barsa-tiles 2.3.157 → 2.3.159

package/fesm2022/barsa-tiles.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { signal, computed, inject, Injectable, DestroyRef, ChangeDetectionStrategy, Component, Input, Directive, ChangeDetectorRef, ViewContainerRef, HostListener, EventEmitter, Output, ElementRef, ViewChild, Pipe, HostBinding, Injector, input, Renderer2, TemplateRef, DOCUMENT, NgModule, ComponentFactoryResolver, provideAppInitializer, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i5 from 'barsa-novin-ray-core';
-import { BarsaApi, BbbTranslatePipe, PortalService, TilePropsComponent, BaseComponent, BaseDirective, IsDarkMode, LocalStorageService, PreventDefaulEvent, getDeviceIsMobile, BaseController, BaseDynamicComponent, SaveScrollPositionService, ExecuteDynamicCommand, ShellbarHeightService, ViewBase, GroupByService, APP_VERSION, getDeviceIsDesktop, getDeviceIsTablet, ApplicationCtrlrService, BreadcrumbService, NotificationService, SortDirection, LogService, RoutingService, EmptyPageComponent, ReportNavigatorComponent, TileGroupBreadcrumResolver, PortalPageResolver, AuthGuard, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
+import { BarsaApi, BbbTranslatePipe, PortalService, TilePropsComponent, BaseComponent, BaseDirective, IsDarkMode, LocalStorageService, PreventDefaulEvent, ScrollLayoutContextHolder, getDeviceIsMobile, BaseController, BaseDynamicComponent, SaveScrollPositionService, ExecuteDynamicCommand, ShellbarHeightService, ViewBase, GroupByService, APP_VERSION, getDeviceIsDesktop, getDeviceIsTablet, ApplicationCtrlrService, BreadcrumbService, NotificationService, SortDirection, LogService, RoutingService, EmptyPageComponent, ReportNavigatorComponent, TileGroupBreadcrumResolver, PortalPageResolver, AuthGuard, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { map, from, Subject, of, firstValueFrom, takeUntil, filter as filter$1, finalize, BehaviorSubject, interval, combineLatest, fromEvent, forkJoin } from 'rxjs';
 import { startWith, shareReplay, distinctUntilChanged, filter, tap, map as map$1, concatMap, takeUntil as takeUntil$1, debounceTime, withLatestFrom, exhaustMap, finalize as finalize$1 } from 'rxjs/operators';
@@ -66,9 +66,9 @@ function setTileInfo(appTile) {
 function prepareNavigator(appTileGroup, translate) {
     appTileGroup.$TileSettingChanged = false;
     appTileGroup.$Disabledpin = false;
-    appTileGroup.navigatorTitle = BarsaApi.Common.Util.TryGetValue(appTileGroup, 'UserAppTileGroupSetting.Title', appTileGroup.Title);
+    const hasUserSettings = BarsaApi.Common.Util.TryGetValue(appTileGroup, 'UserAppTileGroupSetting', false);
     appTileGroup.navigatorTitle =
-        appTileGroup.navigatorTitle === '' ? appTileGroup.Title : appTileGroup.navigatorTitle;
+        !hasUserSettings ? appTileGroup.Title : appTileGroup.navigatorTitle;
     appTileGroup.navigatorTitle = translate.transform(appTileGroup.navigatorTitle);
     const orderItem = BarsaApi.Common.Util.TryGetValue(appTileGroup, 'UserAppTileGroupSetting.OrderItem', null);
     appTileGroup.navigatorOrderItem = orderItem !== null ? orderItem : appTileGroup.OrderItem;
@@ -91,6 +91,7 @@ function emptyEntities() {
         groupsById: {},
         rootGroupIds: [],
         childGroupIdsByParentId: {},
+        parentIdByGroupId: {},
         tilesById: {},
         tileIdsByGroupId: {}
     };
@@ -99,6 +100,7 @@ function normalizeGroups(allApps) {
     const groupsById = {};
     const rootGroupIds = [];
     const childGroupIdsByParentId = {};
+    const parentIdByGroupId = {};
     const tilesById = {};
     const tileIdsByGroupId = {};
     const visitGroup = (g, parentId) => {
@@ -109,6 +111,7 @@ function normalizeGroups(allApps) {
         else {
             childGroupIdsByParentId[parentId] = childGroupIdsByParentId[parentId] ?? [];
             childGroupIdsByParentId[parentId].push(g.Id);
+            parentIdByGroupId[g.Id] = parentId;
         }
         const tiles = g.navigatorTiles ?? g.AppTiles?.MoDataList ?? [];
         tileIdsByGroupId[g.Id] = [];
@@ -120,9 +123,8 @@ function normalizeGroups(allApps) {
         (g.$Children ?? []).forEach((c) => visitGroup(c, g.Id));
     };
     (allApps.MoDataList ?? []).forEach((g) => visitGroup(g, null));
-    return { groupsById, rootGroupIds, childGroupIdsByParentId, tilesById, tileIdsByGroupId };
+    return { groupsById, rootGroupIds, childGroupIdsByParentId, parentIdByGroupId, tilesById, tileIdsByGroupId };
 }
-/** Shallow copy each node and keep only `navigatorVisible` subtrees (non-mutating). */
 function filterNavigatorVisibleSubtree(g) {
     const children = (g.$Children ?? [])
         .filter((c) => !!c.navigatorVisible)
@@ -131,29 +133,43 @@ function filterNavigatorVisibleSubtree(g) {
 }
 class TilesStore {
     constructor() {
-        this.appTileGroups = signal(null);
+        /** Primary source of truth: normalized dictionary of all groups by ID. */
+        this.entities = signal(emptyEntities());
+        /** Metadata from the original MoForReportModelBase (TypeDefId, etc.), excluding MoDataList. */
+        this._moMeta = signal(null);
+        /** Tree form reconstructed from entities dictionary (backward compatibility). */
+        this.appTileGroups = computed(() => {
+            const e = this.entities();
+            const meta = this._moMeta();
+            if (!meta || e.rootGroupIds.length === 0) {
+                return null;
+            }
+            const buildGroup = (id) => {
+                const g = e.groupsById[id];
+                const childIds = e.childGroupIdsByParentId[id] ?? [];
+                return { ...g, $Children: childIds.map(buildGroup) };
+            };
+            return { ...meta, MoDataList: e.rootGroupIds.map(buildGroup) };
+        });
         this.editHome = signal(false);
         this.shellbar = signal(null);
         this.userInfo = signal(null);
         this.componentSettings = signal(null);
-        /** Viewer / megamenu load state (shared). */
         this.loading = signal(false);
         this.allAppsLoading = signal(false);
         this.stackContent = signal(false);
         this.selectedGroupId = signal('');
-        this.entities = signal(emptyEntities());
+        /** Root groups sorted by navigatorOrderItem, filtered by Visible. */
         this.homeAppTileGroups = computed(() => {
-            const allApps = this.appTileGroups();
-            if (!allApps) {
-                return [];
-            }
-            return [...(allApps.MoDataList ?? [])]
-                .filter((c) => c.Visible)
+            const { groupsById, rootGroupIds } = this.entities();
+            return rootGroupIds
+                .map((id) => groupsById[id])
+                .filter((g) => g?.Visible)
                 .sort((a, b) => Number(a.navigatorOrderItem) - Number(b.navigatorOrderItem));
         });
         /**
-         * Edit home: full tree. Otherwise roots and `$Children` only where
-         * `navigatorVisible` is truthy (after {@link prepareNavigator}).
+         * Root groups for navigator display. In edit mode returns all roots.
+         * Otherwise filters by navigatorVisible and trims invisible subtrees.
          */
         this.rootGroups = computed(() => {
             const { groupsById, rootGroupIds } = this.entities();
@@ -167,10 +183,12 @@ class TilesStore {
         });
         this.selectedGroup = computed(() => {
             const id = this.selectedGroupId();
-            const { groupsById } = this.entities();
-            return (id && groupsById[id]) || null;
+            return this.entities().groupsById[id] || null;
         });
         this._translate = inject(BbbTranslatePipe);
+        /** Signal factory: single group by id. */
+        this.selectGroup = (id) => computed(() => this.entities().groupsById[id] ?? null);
+        /** Signal factory: child groups of a parent (respects editHome filter). */
         this.selectGroupChildren = (parentId) => computed(() => {
             const { groupsById, childGroupIdsByParentId } = this.entities();
             let list = (childGroupIdsByParentId[parentId] ?? []).map((id) => groupsById[id]).filter(Boolean);
@@ -179,32 +197,95 @@ class TilesStore {
             }
             return list;
         });
-        this.selectGroupTiles = (groupId) => computed(() => {
+        /** Signal factory: navigatorTiles of a group. */
+        this.selectGroupNavigatorTiles = (groupId) => computed(() => {
             const { tilesById, tileIdsByGroupId } = this.entities();
             return (tileIdsByGroupId[groupId] ?? []).map((id) => tilesById[id]).filter(Boolean);
         });
     }
     /**
-     * Full replace from API / report: run {@link prepareNavigator} on every root (and nested),
-     * then refresh canonical snapshot + entity index.
+     * Full replace from API: run prepareNavigator on every group,
+     * store metadata separately, then build entities dictionary.
      */
     replaceAllAppTileGroups(allApps) {
         if (!allApps) {
-            this.appTileGroups.set(null);
+            this._moMeta.set(null);
             this.entities.set(emptyEntities());
             return;
         }
         allApps.MoDataList?.forEach((g) => prepareNavigator(g, this._translate));
-        this.appTileGroups.set({ ...allApps });
+        const { ...meta } = allApps;
+        this._moMeta.set(meta);
         this.entities.set(normalizeGroups(allApps));
     }
     /**
-     * After in-tree mutations: caller already ran {@link prepareNavigator} on touched groups.
-     * Only refreshes the canonical snapshot and re-builds the entity index from the current tree.
+     * Update (or insert) a single group in the dictionary.
+     * Runs prepareNavigator automatically and refreshes tile indexes for this group.
      */
-    applyLocalTreeSnapshot(allApps) {
-        this.appTileGroups.set({ ...allApps });
-        this.entities.set(normalizeGroups(allApps));
+    upsertGroup(group) {
+        prepareNavigator(group, this._translate);
+        this.entities.update((e) => {
+            const tiles = group.navigatorTiles ?? group.AppTiles?.MoDataList ?? [];
+            const newTilesById = { ...e.tilesById };
+            const newTileIds = [];
+            tiles.forEach((t) => {
+                const id = (t.AppTile?.Id ?? t.Id);
+                newTilesById[id] = t;
+                newTileIds.push(id);
+            });
+            return {
+                ...e,
+                groupsById: { ...e.groupsById, [group.Id]: group },
+                tilesById: newTilesById,
+                tileIdsByGroupId: { ...e.tileIdsByGroupId, [group.Id]: newTileIds }
+            };
+        });
+    }
+    /** Remove a group from the dictionary and clean up all indexes. */
+    removeGroup(groupId) {
+        this.entities.update((e) => {
+            const { ...restGroups } = e.groupsById;
+            const parentId = e.parentIdByGroupId[groupId];
+            const newRootIds = e.rootGroupIds.filter((id) => id !== groupId);
+            const newChildMap = { ...e.childGroupIdsByParentId };
+            if (parentId) {
+                newChildMap[parentId] = (newChildMap[parentId] ?? []).filter((id) => id !== groupId);
+            }
+            const { ...restParentMap } = e.parentIdByGroupId;
+            const { ...restTileIds } = e.tileIdsByGroupId;
+            return {
+                ...e,
+                groupsById: restGroups,
+                rootGroupIds: newRootIds,
+                childGroupIdsByParentId: newChildMap,
+                parentIdByGroupId: restParentMap,
+                tileIdsByGroupId: restTileIds
+            };
+        });
+    }
+    /** Add a new group to the dictionary under an optional parent. */
+    addGroup(group, parentId = null) {
+        prepareNavigator(group, this._translate);
+        this.entities.update((e) => {
+            const newChildMap = { ...e.childGroupIdsByParentId };
+            const newRootIds = [...e.rootGroupIds];
+            const newParentMap = { ...e.parentIdByGroupId };
+            if (parentId) {
+                newChildMap[parentId] = [...(newChildMap[parentId] ?? []), group.Id];
+                newParentMap[group.Id] = parentId;
+            }
+            else {
+                newRootIds.push(group.Id);
+            }
+            return {
+                ...e,
+                groupsById: { ...e.groupsById, [group.Id]: group },
+                rootGroupIds: newRootIds,
+                childGroupIdsByParentId: newChildMap,
+                parentIdByGroupId: newParentMap,
+                tileIdsByGroupId: { ...e.tileIdsByGroupId, [group.Id]: [] }
+            };
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesStore, providedIn: 'root' }); }
@@ -294,11 +375,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         }] });
 
 class TilesService {
-    /** Same signal reference as {@link TilesStore#appTileGroups} (read-only for consumers). */
+    /** Same computed signal reference as TilesStore#appTileGroups (read-only for consumers). */
     get appTileGroupsSig() {
         return this._store.appTileGroups;
     }
-    /** Inserted by Angular inject() migration for backwards compatibility */
     constructor() {
         this.homeAppTileGroupsSig = signal([]);
         this.userInfoSig = signal(null);
@@ -362,49 +442,38 @@ class TilesService {
         if (!appTileGroup?.Id) {
             return;
         }
-        const allApps = this._store.appTileGroups();
-        if (!allApps) {
-            return;
-        }
-        const canonical = this._findCanonicalAppTileGroup(allApps, appTileGroup.Id);
+        const canonical = this._store.entities().groupsById[appTileGroup.Id];
         if (!canonical) {
             return;
         }
         if (this._isAppTileGroupTilesLoaded(canonical)) {
             return;
         }
-        this._loadAppTilesOfAppTileGroup(canonical, allApps);
-        canonical.$Children?.forEach((subGroup) => {
-            if (!this._isAppTileGroupTilesLoaded(subGroup)) {
-                this._loadAppTilesOfAppTileGroup(subGroup, allApps);
+        this._loadAppTilesOfAppTileGroup(canonical);
+        const { childGroupIdsByParentId, groupsById } = this._store.entities();
+        (childGroupIdsByParentId[canonical.Id] ?? []).forEach((childId) => {
+            const subGroup = groupsById[childId];
+            if (subGroup && !this._isAppTileGroupTilesLoaded(subGroup)) {
+                this._loadAppTilesOfAppTileGroup(subGroup);
             }
         });
     }
-    /** True if tiles for this group were already loaded (canonical tree or in-flight flag). */
+    /** True if tiles for this group were already loaded. */
     isAppTileGroupTilesLoaded(groupId) {
-        const allApps = this._store.appTileGroups();
-        if (!allApps) {
-            return false;
-        }
-        const g = this._findCanonicalAppTileGroup(allApps, groupId);
+        const g = this._store.entities().groupsById[groupId];
         return g ? this._isAppTileGroupTilesLoaded(g) : !!this._appTileGroupLoaded[groupId];
     }
     loadAppTileGroupsById(appTileGroupId, forceReload = false) {
-        const allApps = this._store.appTileGroups();
-        if (!allApps) {
-            return;
-        }
-        const selectedAppTilegroup = this._findCanonicalAppTileGroup(allApps, appTileGroupId);
+        const selectedAppTilegroup = this._store.entities().groupsById[appTileGroupId];
         if (!selectedAppTilegroup) {
             return;
         }
         if (!this._isAppTileGroupTilesLoaded(selectedAppTilegroup) && !forceReload) {
             return;
         }
-        const callback = () => {
-            this._nextAllAppTileGroups(allApps);
-        };
-        selectedAppTilegroup && this._loadAppTilesByAppTileGroupSetting(selectedAppTilegroup, callback);
+        this._loadAppTilesByAppTileGroupSetting(selectedAppTilegroup, (updated) => {
+            this._store.upsertGroup(updated);
+        });
     }
     saveTilesStackContent(tilesStackContent) {
         const userPortalSettings = this._portalService.userPortalSettings['UserPortalSettings'];
@@ -451,22 +520,17 @@ class TilesService {
     }
     deleteAppGroup(appGroup) {
         return this._tilesApi.deleteGroup(appGroup.Id).pipe(map$1(() => appGroup.Id), tap((appGroupId) => {
-            const allApps = this.appTileGroups;
-            if (allApps) {
-                this._removeAppTileGroupFromTree(allApps, appGroupId);
-                this._nextAllAppTileGroups(allApps);
-            }
+            this._store.removeGroup(appGroupId);
         }));
     }
     changeAppTileSetting(appTile) {
-        const allApps = this.appTileGroups;
-        const selectedGroup = this.findGroupWithAppTileId(allApps, appTile.Id);
+        const selectedGroup = this._findGroupWithAppTileId(appTile.Id);
         if (selectedGroup === null) {
             return of(null);
         }
         return this._tilesApi.changeAppTileSetting(selectedGroup.Id, appTile.Id, appTile.Title, appTile.Subtitle).pipe(map$1((settings) => {
             const updatedGroup = this._updateAppTileGroupSettings(selectedGroup, settings);
-            this._nextAllAppTileGroups(allApps, updatedGroup);
+            this._store.upsertGroup(updatedGroup);
             return selectedGroup;
         }));
     }
@@ -487,47 +551,25 @@ class TilesService {
         if (!allApps || !appTile.A_App_Component) {
             return;
         }
-        const selectedAppTile = this.findAppTileWithKey(allApps, 'A_App_Component.Settings.Id', appTile.A_App_Component.Settings.Id);
+        const selectedAppTile = this._findAppTileWithKey('A_App_Component.Settings.Id', appTile.A_App_Component.Settings.Id);
         if (selectedAppTile && selectedAppTile.A_App_Component) {
             BarsaApi.Common.Merger.FastMerge(selectedAppTile.A_App_Component.Settings, appTile.A_App_Component.Settings);
             this.componentSettingsSig.set(selectedAppTile.A_App_Component.Settings);
         }
     }
     updataAppTileSetting(selectedGroup, appGroupSetting) {
-        const allApps = this.appTileGroups;
-        if (!allApps) {
+        const group = this._store.entities().groupsById[selectedGroup.Id];
+        if (!group) {
             return;
         }
-        allApps.MoDataList.forEach((appGroup) => {
-            if (appGroup.Id === selectedGroup.Id) {
-                appGroup.UserAppTileGroupSetting = appGroupSetting;
-            }
-        });
-        this._nextAllAppTileGroups(allApps);
+        this._store.upsertGroup({ ...group, UserAppTileGroupSetting: appGroupSetting });
     }
     addAppGroup(mo) {
-        const allApps = this.appTileGroups;
-        if (allApps) {
-            const parentId = mo.Parent ? mo.Parent.Id : mo.AppTileGroupParentId;
-            if (parentId) {
-                const parent = allApps.MoDataList.find((g) => g.Id === parentId);
-                if (parent) {
-                    parent.$Children = parent.$Children ?? [];
-                    parent.$Children.push(mo);
-                }
-                else {
-                    allApps.MoDataList.push(mo);
-                }
-            }
-            else {
-                allApps.MoDataList.push(mo);
-            }
-            this._nextAllAppTileGroups(allApps, mo);
-        }
+        const parentId = mo.Parent ? mo.Parent.Id : mo.AppTileGroupParentId;
+        this._store.addGroup(mo, parentId ?? null);
     }
     singlePinTileChanged(appTile, callback) {
-        const allApps = this.appTileGroups;
-        const group = this.findGroupWithAppTileId(allApps, appTile.Id);
+        const group = this._findGroupWithAppTileId(appTile.Id);
         if (group === null) {
             return;
         }
@@ -542,52 +584,28 @@ class TilesService {
         }));
         this._tilesApi.tilePinChanged(groupChanges, visible, app.Id).subscribe({
             next: (settings) => {
-                this._tilePinChange(appTileGroupsPin, allApps);
+                this._tilePinChange(appTileGroupsPin);
                 callback(settings);
             },
-            error: () => {
-                // TODO show error
-            }
+            error: () => { }
         });
     }
-    _tilePinChange(appTileGroupsPin, allApps) {
-        for (const appTileGroupPin of appTileGroupsPin) {
-            let selectedAppGroup;
-            const appGroupId = appTileGroupPin.appTileGroup.Id;
-            allApps?.MoDataList.forEach((c) => {
-                if (c.Id === appGroupId) {
-                    selectedAppGroup = c;
-                }
-                else if (!selectedAppGroup) {
-                    selectedAppGroup = c.$Children?.find((child) => child.Id === appGroupId);
-                }
-            });
-            if (selectedAppGroup) {
-                // let moDataList = selectedAppGroup.AppTiles.MoDataList;
-                // if (appTileGroups[i].visible)
-                //   selectedAppGroup.AppTiles.MoDataList = [...moDataList, settings[i]];
-                // else
-                //   selectedAppGroup.AppTiles.MoDataList = moDataList.filter(
-                //     (c) => c.App.Id !== app.Id
-                //   );
-                this._loadAppTilesOfAppTileGroup(selectedAppGroup, allApps);
+    _tilePinChange(appTileGroupsPin) {
+        const { groupsById } = this._store.entities();
+        for (const pin of appTileGroupsPin) {
+            const group = groupsById[pin.appTileGroup.Id];
+            if (group) {
+                this._loadAppTilesOfAppTileGroup(group);
             }
-            this._prepareNavigator(appTileGroupPin);
         }
-        this._nextAllAppTileGroups(allApps);
     }
     loadShellbar() {
         this._tilesApi.loadShellbarByPortalId(BarsaApi.LoginFormData.PortalId).subscribe({
             next: (shellbar) => {
                 this.shellbarSig.set(shellbar);
             },
-            error: () => {
-                // TODO show error
-            }
+            error: () => { }
         });
-        // this._portalService
-        //     .ReportExecutePromise('Shellbar')
-        //     .then((moForReportModel) => this.shellbarSource.next(moForReportModel.MoDataList[0]));
     }
     _setTileInfo(appTile) {
         setTileInfo(appTile);
@@ -600,19 +618,20 @@ class TilesService {
         this._store.editHome.set(edit);
     }
     /**
-     * After {@link TilesStore#replaceAllAppTileGroups} from another entry point (e.g. {@link TilesViewerService}),
+     * After TilesStore#replaceAllAppTileGroups from another entry point (e.g. TilesViewerService),
      * refresh derived home list (store already holds app groups).
      */
     syncExternalAppTileGroups() {
-        const allApps = this._store.appTileGroups();
-        if (allApps?.MoDataList) {
-            this._setHomeAppTileGroups(allApps.MoDataList);
+        const { groupsById, rootGroupIds } = this._store.entities();
+        if (rootGroupIds.length) {
+            const groups = rootGroupIds.map((id) => groupsById[id]).filter(Boolean);
+            this._setHomeAppTileGroups(groups);
         }
         else {
             this.homeAppTileGroupsSig.set([]);
         }
     }
-    /** Call when the canonical tree is replaced from outside {@link TilesService} (e.g. viewer API). */
+    /** Call when the canonical tree is replaced from outside TilesService (e.g. viewer API). */
     resetAppTileGroupLoadCache() {
         this._appTileGroupLoaded = {};
     }
@@ -629,27 +648,25 @@ class TilesService {
             .subscribe((allApps) => this._applyLoadedAppTileGroups(allApps));
     }
     _onApplication_GlobalRefreshTile(_sender, appTilesTitle) {
-        const allApps = this._store.appTileGroups();
+        const { groupsById } = this._store.entities();
         const appTiles = [];
-        if (allApps) {
-            appTilesTitle.forEach((c) => {
-                const selectedTile = this.findAppTileWithKey(allApps, 'A_App_AppKey', c);
-                if (selectedTile) {
-                    appTiles.push(selectedTile);
-                }
-            });
-            this._updateAppTileFromNotification(allApps, appTiles);
-            this._nextAllAppTileGroups(allApps);
+        appTilesTitle.forEach((key) => {
+            const tile = this._findAppTileWithKey('A_App_AppKey', key);
+            if (tile) {
+                appTiles.push(tile);
+            }
+        });
+        if (appTiles.length) {
+            this._updateAppTileFromNotification(groupsById, appTiles);
         }
     }
-    _updateAppTileFromNotification(allApps, appTiles) {
+    _updateAppTileFromNotification(groupsById, appTiles) {
         if (!appTiles?.length) {
             return;
         }
         this._tilesApi.refreshAppTiles(appTiles.map((c) => (c.AppTile?.Id ? c.AppTile?.Id : c.Id))).subscribe({
             next: (result) => {
-                result.MoDataList.forEach((c) => this.updateAppTile(allApps, c));
-                this._nextAllAppTileGroups(allApps);
+                result.MoDataList.forEach((c) => this.updateAppTile({ MoDataList: Object.values(groupsById) }, c));
             },
             error: () => { }
         });
@@ -657,9 +674,9 @@ class TilesService {
     _allAppsLoaded(moForReportModel) {
         this._setHomeAppTileGroups(moForReportModel.MoDataList);
     }
-    _loadAppTilesOfAppTileGroup(selectedAppTilegroup, allApps) {
+    _loadAppTilesOfAppTileGroup(selectedAppTilegroup) {
         const callback = (appTileGroup) => {
-            this._nextAllAppTileGroups(allApps, appTileGroup);
+            this._store.upsertGroup(appTileGroup);
         };
         if (!selectedAppTilegroup.UserAppTileGroupSetting || BarsaApi.LoginFormData.IsAnonymous) {
             this._loadAppTilesByAppTileGroup(selectedAppTilegroup, callback);
@@ -672,146 +689,36 @@ class TilesService {
         this._appTileGroupLoaded[appGroup.Id] = true;
         this._tilesApi.loadAppTilesByGroup(appGroup.Id).subscribe({
             next: (appTiles) => {
-                const x = this._updateAppTilesOfAppTileGroup(appGroup, appTiles);
-                callback(x);
+                callback(this._prepareGroupWithTiles(appGroup, appTiles));
             },
-            error: () => {
-                // TODO show error
-            }
+            error: () => { }
         });
     }
-    _updateAppTilesOfAppTileGroup(selectedAppTilegroup, appTiles) {
-        if (this.appTileGroups) {
-            selectedAppTilegroup = { ...selectedAppTilegroup, $TilesLoaded: true };
-            appTiles.MoDataList.forEach((element) => {
-                element.Component = element.A_App_Component ?? element.A_AppTile_App_Component;
-                element.DynamicCommand = element.A_App_DynamicCommand ?? element.A_AppTile_App_DynamicCommand;
-                element.Predefined = element.Predefined ?? element.A_AppTile_Predefined;
-            });
-            const apptileGroupIndex = this.appTileGroups?.MoDataList.findIndex((c) => c.Id === selectedAppTilegroup.Id || c.Id === selectedAppTilegroup.$ParentId);
-            selectedAppTilegroup.AppTiles = appTiles;
-            this._prepareNavigator(selectedAppTilegroup);
-            const tileGroup = this.appTileGroups.MoDataList[apptileGroupIndex];
-            if (selectedAppTilegroup.$ParentId) {
-                if (tileGroup.$Children) {
-                    const idOfSubGroup = tileGroup.$Children.findIndex((c) => c.Id === selectedAppTilegroup.Id);
-                    tileGroup.$Children[idOfSubGroup] = selectedAppTilegroup;
-                }
-                this.appTileGroups.MoDataList[apptileGroupIndex] = { ...tileGroup };
-            }
-            else {
-                this.appTileGroups.MoDataList[apptileGroupIndex] = selectedAppTilegroup;
-            }
-        }
-        return selectedAppTilegroup;
+    _prepareGroupWithTiles(appTilegroup, appTiles) {
+        appTiles.MoDataList.forEach((element) => {
+            element.Component = element.A_App_Component ?? element.A_AppTile_App_Component;
+            element.DynamicCommand = element.A_App_DynamicCommand ?? element.A_AppTile_App_DynamicCommand;
+            element.Predefined = element.Predefined ?? element.A_AppTile_Predefined;
+        });
+        return { ...appTilegroup, $TilesLoaded: true, AppTiles: appTiles };
     }
     _loadAppTilesByAppTileGroupSetting(appTileGroup, callback) {
         this._appTileGroupLoaded[appTileGroup.Id] = true;
         this._tilesApi.loadAppTilesByUserGroupSettings(appTileGroup.Id).subscribe({
             next: (appTiles) => {
-                const x = this._updateAppTilesOfAppTileGroup(appTileGroup, appTiles);
-                callback(x);
+                callback(this._prepareGroupWithTiles(appTileGroup, appTiles));
             },
-            error: () => {
-                // TODO show error
-            }
+            error: () => { }
         });
     }
-    /** Report/API load: full tree + {@link prepareNavigator} on all roots (via store). */
+    /** Report/API load: full tree + prepareNavigator on all groups (via store). */
     _applyLoadedAppTileGroups(allApps) {
         this._appTileGroupLoaded = {};
         this._store.replaceAllAppTileGroups(allApps);
     }
-    _findCanonicalAppTileGroup(allApps, id) {
-        for (const root of allApps.MoDataList ?? []) {
-            const found = this._findAppTileGroupInTree(root, id);
-            if (found) {
-                return found;
-            }
-        }
-        return null;
-    }
-    _findAppTileGroupInTree(node, id) {
-        if (node.Id === id) {
-            return node;
-        }
-        for (const ch of node.$Children ?? []) {
-            const found = this._findAppTileGroupInTree(ch, id);
-            if (found) {
-                return found;
-            }
-        }
-        return null;
-    }
-    /** Removes a group by id from root {@link MoForReportModelBase#MoDataList} or any nested {@link AppTileGroup#$Children}. */
-    _removeAppTileGroupFromTree(allApps, appGroupId) {
-        const roots = allApps.MoDataList ?? [];
-        const atRoot = roots.some((c) => c.Id === appGroupId);
-        if (atRoot) {
-            allApps.MoDataList = roots.filter((c) => c.Id !== appGroupId);
-            return;
-        }
-        for (const root of roots) {
-            if (this._removeAppTileGroupFromChildren(root, appGroupId)) {
-                return;
-            }
-        }
-    }
-    _removeAppTileGroupFromChildren(parent, appGroupId) {
-        const children = parent.$Children;
-        if (!children?.length) {
-            return false;
-        }
-        if (children.some((c) => c.Id === appGroupId)) {
-            parent.$Children = children.filter((c) => c.Id !== appGroupId);
-            return true;
-        }
-        for (const ch of children) {
-            if (this._removeAppTileGroupFromChildren(ch, appGroupId)) {
-                return true;
-            }
-        }
-        return false;
-    }
     _isAppTileGroupTilesLoaded(g) {
         return !!g.$TilesLoaded || !!this._appTileGroupLoaded[g.Id];
     }
-    /** Replaces the node with the same {@link AppTileGroup#Id} anywhere under {@link $Children}. */
-    _replaceAppTileGroupInTreeList(list, appTileGroup) {
-        if (!list?.length) {
-            return false;
-        }
-        const idx = list.findIndex((c) => c.Id === appTileGroup.Id);
-        if (idx !== -1) {
-            list[idx] = appTileGroup;
-            return true;
-        }
-        for (const node of list) {
-            const children = node.$Children;
-            if (children?.length && this._replaceAppTileGroupInTreeList(children, appTileGroup)) {
-                node.$Children = [...node.$Children];
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Local tree changed: merge optional root replacement, then snapshot store without re-running
-     * {@link prepareNavigator} on every root (caller must have prepared touched groups).
-     */
-    _nextAllAppTileGroups(newAllApps = null, appTileGroup = null) {
-        const allApps = newAllApps ?? this._store.appTileGroups();
-        if (!allApps) {
-            this._store.replaceAllAppTileGroups(null);
-            return;
-        }
-        if (appTileGroup?.Id) {
-            appTileGroup = { ...appTileGroup };
-            this._prepareNavigator(appTileGroup);
-            this._replaceAppTileGroupInTreeList(allApps.MoDataList, appTileGroup);
-        }
-        this._store.applyLocalTreeSnapshot({ ...allApps });
-    }
     _setHomeAppTileGroups(appGroups) {
         let newAppGroups = [...appGroups];
         newAppGroups = newAppGroups
@@ -823,88 +730,41 @@ class TilesService {
         return firstValueFrom(this._tilesApi.saveUserPortalSettings(new BarsaApi.Common.MetaObjectWeb(userPortalSettings)));
     }
     _updateAppGroupSetting(appGroup, appGroupSetting) {
-        const allApps = this.appTileGroups;
-        const selectedAppGroup = this._findGroupWithAppGroupId(allApps, appGroup.Id);
-        if (selectedAppGroup && allApps) {
-            selectedAppGroup.UserAppTileGroupSetting = appGroupSetting.UserAppTileGroupSetting;
-            this._nextAllAppTileGroups(allApps, selectedAppGroup);
+        const group = this._store.entities().groupsById[appGroup.Id];
+        if (group) {
+            this._store.upsertGroup({ ...group, UserAppTileGroupSetting: appGroupSetting.UserAppTileGroupSetting });
         }
     }
-    findAppTileWithKey(allApps, key, value) {
-        let selectedTile;
+    _findAppTileWithKey(key, value) {
         if (typeof value === 'string') {
             value = BarsaApi.Common.Util.ReplaceArabicCharchter(value);
         }
-        if (!allApps) {
-            return null;
-        }
-        allApps.MoDataList.forEach((appGroup) => {
-            if (selectedTile) {
-                return;
+        const { groupsById } = this._store.entities();
+        for (const group of Object.values(groupsById)) {
+            const tile = (group.navigatorTiles ?? []).find((c) => BarsaApi.Common.Util.TryGetValue(c, key, null) === value);
+            if (tile) {
+                return tile;
             }
-            selectedTile = appGroup.navigatorTiles.find((c) => BarsaApi.Common.Util.TryGetValue(c, key, null) === value);
-            appGroup.$Children?.forEach((subGroup) => {
-                if (selectedTile) {
-                    return;
-                }
-                selectedTile = subGroup.navigatorTiles.find((c) => BarsaApi.Common.Util.TryGetValue(c, key, null) === value);
-            });
-        });
-        return selectedTile;
-    }
-    findGroupWithAppTileId(allApps, appTileId) {
-        let selectedGroup;
-        if (!allApps) {
-            return null;
         }
-        allApps.MoDataList.forEach((appGroup) => {
-            if (selectedGroup) {
-                return;
-            }
-            if (appGroup.navigatorTiles.some((appTile) => appTile.Id === appTileId)) {
-                selectedGroup = appGroup;
-                return;
-            }
-            appGroup.$Children?.forEach((subGroup) => {
-                if (subGroup.navigatorTiles.some((appTile) => appTile.Id === appTileId)) {
-                    selectedGroup = subGroup;
-                    return;
-                }
-            });
-        });
-        return selectedGroup;
+        return null;
     }
-    _findGroupWithAppGroupId(allApps, appGroupId) {
-        let selectedGroup;
-        if (!allApps) {
-            return null;
-        }
-        allApps.MoDataList.forEach((appGroup) => {
-            if (selectedGroup) {
-                return;
+    _findGroupWithAppTileId(appTileId) {
+        const { groupsById } = this._store.entities();
+        for (const group of Object.values(groupsById)) {
+            if ((group.navigatorTiles ?? []).some((t) => t.Id === appTileId)) {
+                return group;
             }
-            if (appGroup.Id === appGroupId) {
-                selectedGroup = appGroup;
-                return;
-            }
-            appGroup.$Children?.forEach((subGroup) => {
-                if (subGroup.Id === appGroupId) {
-                    selectedGroup = subGroup;
-                    return;
-                }
-            });
-        });
-        return selectedGroup;
+        }
+        return null;
     }
     _updateAppTileGroupSettings(appTileGroup, setting) {
         appTileGroup.UserAppTileGroupSetting = setting;
-        appTileGroup.AppTiles.MoDataList.forEach((e, i) => {
-            const ex = setting.UserAppTilesSetting.MoDataList.find((c) => c.Id === e.Id);
+        appTileGroup.AppTiles?.MoDataList?.forEach((e, i) => {
+            const ex = setting.UserAppTilesSetting?.MoDataList?.find((c) => c.Id === e.Id);
             if (ex) {
                 appTileGroup.AppTiles.MoDataList[i] = { ...appTileGroup.AppTiles.MoDataList[i], ...ex };
             }
         });
-        // this._nextAllAppTileGroups();
         return appTileGroup;
     }
     _prepareNavigator(appTileGroup) {
@@ -1265,7 +1125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 class TileGroupBaseComponent extends BaseComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.tilesDropped = new EventEmitter();
         this.hideAppTileClick = new EventEmitter();
         this.renameAppTileClick = new EventEmitter();
@@ -1274,7 +1134,12 @@ class TileGroupBaseComponent extends BaseComponent {
         this.resetGroup = new EventEmitter();
         this.deleteGroup = new EventEmitter();
         this.isJustifyStart = signal(false);
+        this._scrollLayoutContext = inject(ScrollLayoutContextHolder);
+        /**
+         *
+         */
         this._cdr = inject(ChangeDetectorRef);
+        this._scrollLayoutContext.setMode('nested');
     }
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
@@ -1321,8 +1186,8 @@ class TileGroupBaseComponent extends BaseComponent {
         const x = this.appTileGroup && this.appTileGroup.navigatorTiles;
         this.isJustifyStart.set(x && x.length ? x.length % 3 !== 0 : false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TileGroupBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TileGroupBaseComponent, isStandalone: false, selector: "bt-tile-group-base", inputs: { parameters: "parameters", appTileGroup: "appTileGroup", childrenAppTileGroup: "childrenAppTileGroup", stackContent: "stackContent", cssStyles: "cssStyles", edit: "edit", visible: "visible", rtl: "rtl", isAppTileSubGroup: "isAppTileSubGroup", deviceSize: "deviceSize", isLast: "isLast" }, outputs: { tilesDropped: "tilesDropped", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", changeGroupAppTileClick: "changeGroupAppTileClick", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TileGroupBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TileGroupBaseComponent, isStandalone: false, selector: "bt-tile-group-base", inputs: { parameters: "parameters", appTileGroup: "appTileGroup", childrenAppTileGroup: "childrenAppTileGroup", stackContent: "stackContent", cssStyles: "cssStyles", edit: "edit", visible: "visible", rtl: "rtl", isAppTileSubGroup: "isAppTileSubGroup", deviceSize: "deviceSize", isLast: "isLast" }, outputs: { tilesDropped: "tilesDropped", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", changeGroupAppTileClick: "changeGroupAppTileClick", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup" }, providers: [ScrollLayoutContextHolder], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TileGroupBaseComponent, decorators: [{
             type: Component,
@@ -1330,9 +1195,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     selector: 'bt-tile-group-base',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: false
+                    standalone: false,
+                    providers: [ScrollLayoutContextHolder]
                 }]
-        }], propDecorators: { parameters: [{
+        }], ctorParameters: () => [], propDecorators: { parameters: [{
                 type: Input
             }], appTileGroup: [{
                 type: Input
@@ -1567,11 +1433,11 @@ class TilesViewerGroupComponent extends TileGroupBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TilesViewerGroupComponent, isStandalone: false, selector: "bt-tiles-viewer-group", usesInheritance: true, ngImport: i0, template: "<fd-layout-panel\r\n    [attr.editHome]=\"edit\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!edit || !stackContent\"\r\n    [ngClass]=\"appTileGroup.TileGroupType$Caption\"\r\n    [class.hide-header]=\"appTileGroup.HideHeader\"\r\n    [style.background-color]=\"appTileGroup.BackgroundColor ? appTileGroup.BackgroundColor : null\"\r\n    [class.custom-color]=\"appTileGroup.BackgroundColor\"\r\n    [class.tw-pb-2]=\"isLast\"\r\n    [class.hide]=\"!appTileGroup?.navigatorTiles?.length && !appTileGroup.navigatorActionLinks.length\"\r\n    [class.!tw-mb-2]=\"edit\"\r\n>\r\n    @if (edit || stackContent || isAppTileSubGroup || appTileGroup.HideHeader) {\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-head>\r\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle | bbbTranslate }}</h5>\r\n        </fd-layout-panel-head>\r\n        @if (edit) {\r\n        <fd-layout-panel-actions class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!visible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\r\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\r\n                } @if (appTileGroup.CanDelete) {\r\n                <button\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n                }\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n        }\r\n    </fd-layout-panel-header>\r\n    }\r\n    <fd-layout-panel-body [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            tilesCls\r\n            [class.!tw-hidden]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [class.!tw-justify-start]=\"isJustifyStart()\"\r\n            [rtl]=\"rtl\"\r\n            [appTileGroup]=\"appTileGroup\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [ngClass]=\"deviceSize\"\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\r\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\r\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\r\n            <h5 fd-title></h5>\r\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\r\n            <div\r\n                [class.edit-home]=\"edit\"\r\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [setToStorage]=\"true\"\r\n                    [enableCommand]=\"!edit && appTile.Component\"\r\n                    tileRenderer\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [data]=\"appTile\"\r\n                    [groupType]=\"appTileGroup.TileGroupType$Caption\"\r\n                    [edit]=\"edit\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                    (changeGroupClick)=\"onAppTileChangeGroupClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            }\r\n        </div>\r\n        <bt-actions-link\r\n            [class.actions-link-edit-home]=\"edit\"\r\n            [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n            [class.!tw-p-0]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [edit]=\"edit\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [style.min-height]=\"edit ? '4rem' : 'auto'\"\r\n            cdkDropList\r\n            #actionLinks=\"cdkDropList\"\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListConnectedTo]=\"tiles\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListData]=\"{\r\n                isTile: false,\r\n                items: appTileGroup.navigatorActionLinks || []\r\n            }\"\r\n        >\r\n        </bt-actions-link>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n@for (appTileSubGroup of childrenAppTileGroup; track appTileSubGroup.Id;let last=$last) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\r\n    [childrenAppTileGroup]=\"appTileSubGroup.$Children || []\"\r\n    [visible]=\"appTileSubGroup.navigatorVisible\"\r\n    [isLast]=\"last\"\r\n    [edit]=\"edit\"\r\n    [rtl]=\"rtl\"\r\n    [stackContent]=\"stackContent\"\r\n    [cssStyle]=\"appTileSubGroup.CssStyles\"\r\n    [isAppTileSubGroup]=\"true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    (tilesDropped)=\"tilesDropped.emit($event)\"\r\n    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n    (resetGroup)=\"resetGroup.emit($event)\"\r\n    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    (changeGroupAppTileClick)=\"onAppTileChangeGroupClick($event)\"\r\n></bt-tiles-viewer-group>\r\n}\r\n", styles: [":host{display:block}:host[islast=true]{margin-bottom:var(--footer-height)}:host.s{padding:0 1rem}:host ::ng-deep>fd-layout-panel>fd-layout-panel-header .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}fd-layout-panel.custom-color{margin-top:1rem}fd-layout-panel.empty-tiles-group:not([edithome=true]){display:none}fd-layout-panel fd-layout-panel-header fd-layout-panel-head h5{font-weight:500}fd-layout-panel.hide-header fd-layout-panel-header{display:none}fd-layout-panel[editHome=false]{background-color:transparent}.tile-wrapper.TilesGroup{column-gap:.5rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center;flex-direction:column}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup{display:flex;row-gap:.5rem;column-gap:.5rem;justify-content:start;width:calc(99.9999999999svw - 4rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s{max-height:7.25rem;min-height:6.25rem;min-width:8.25rem;max-width:8.25rem;display:flex;flex-direction:column-reverse;justify-content:space-between}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header{height:1.2rem;max-height:1.2rem;min-height:1.2rem;text-align:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header.child-has-overflow-text{position:relative}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__subtitle{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__footer{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-tile--launch .fd-tile__content{align-items:center;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content{justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content .fd-numeric-content__launch-icon-container{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s{--sapFontHeader6Size: .75rem;min-width:calc(33.3333333333svw - 2rem);max-width:calc(33.3333333333svw - 2rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-numeric-content__kpi{font-size:1.2rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s span.fd-numeric-content__scale-text{font-size:.8rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__title{white-space:nowrap}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__content{height:3rem;max-height:3rem;min-height:3rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile.disable-tile-resize .fd-tile--double{min-width:calc(99.9999999999svw - 6rem + 1rem);max-width:calc(99.9999999999svw - 6rem + 1rem)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i5$1.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i5$1.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i5$1.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i5$1.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i5$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i7.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i5.DynamicStyleDirective, selector: "[cssStyle]", inputs: ["cssStyle"] }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit", "deviceSize"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group" }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "groupType", "edit", "deviceSize", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["hideClick", "renameClick", "changeGroupClick"] }, { kind: "directive", type: TileClassDirective, selector: "[tilesCls]", inputs: ["rtl", "deviceSize", "appTileGroup"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TilesViewerGroupComponent, isStandalone: false, selector: "bt-tiles-viewer-group", providers: [ScrollLayoutContextHolder], usesInheritance: true, ngImport: i0, template: "<fd-layout-panel\r\n    [attr.editHome]=\"edit\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!edit || !stackContent\"\r\n    [ngClass]=\"appTileGroup.TileGroupType$Caption\"\r\n    [class.hide-header]=\"appTileGroup.HideHeader\"\r\n    [style.background-color]=\"appTileGroup.BackgroundColor ? appTileGroup.BackgroundColor : null\"\r\n    [class.custom-color]=\"appTileGroup.BackgroundColor\"\r\n    [class.tw-pb-2]=\"isLast\"\r\n    [class.!tw-mb-2]=\"edit\"\r\n>\r\n    @if (edit || stackContent || isAppTileSubGroup || appTileGroup.HideHeader) {\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-head>\r\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle | bbbTranslate }}</h5>\r\n        </fd-layout-panel-head>\r\n        @if (edit) {\r\n        <fd-layout-panel-actions class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!visible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\r\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\r\n                } @if (appTileGroup.CanDelete) {\r\n                <button\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n                }\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n        }\r\n    </fd-layout-panel-header>\r\n    }\r\n    <fd-layout-panel-body [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            tilesCls\r\n            [class.!tw-hidden]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [class.!tw-justify-start]=\"isJustifyStart()\"\r\n            [rtl]=\"rtl\"\r\n            [appTileGroup]=\"appTileGroup\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [ngClass]=\"deviceSize\"\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\r\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\r\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\r\n            <h5 fd-title></h5>\r\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\r\n            <div\r\n                [class.edit-home]=\"edit\"\r\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [setToStorage]=\"true\"\r\n                    [enableCommand]=\"!edit && appTile.Component\"\r\n                    tileRenderer\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [data]=\"appTile\"\r\n                    [groupType]=\"appTileGroup.TileGroupType$Caption\"\r\n                    [edit]=\"edit\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                    (changeGroupClick)=\"onAppTileChangeGroupClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            }\r\n        </div>\r\n        <bt-actions-link\r\n            [class.actions-link-edit-home]=\"edit\"\r\n            [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n            [class.!tw-p-0]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [edit]=\"edit\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [style.min-height]=\"edit ? '4rem' : 'auto'\"\r\n            cdkDropList\r\n            #actionLinks=\"cdkDropList\"\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListConnectedTo]=\"tiles\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListData]=\"{\r\n                isTile: false,\r\n                items: appTileGroup.navigatorActionLinks || []\r\n            }\"\r\n        >\r\n        </bt-actions-link>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n@for (appTileSubGroup of childrenAppTileGroup; track appTileSubGroup.Id;let last=$last) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\r\n    [childrenAppTileGroup]=\"appTileSubGroup.$Children || []\"\r\n    [visible]=\"appTileSubGroup.navigatorVisible\"\r\n    [isLast]=\"last\"\r\n    [edit]=\"edit\"\r\n    [rtl]=\"rtl\"\r\n    [stackContent]=\"stackContent\"\r\n    [cssStyle]=\"appTileSubGroup.CssStyles\"\r\n    [isAppTileSubGroup]=\"true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    (tilesDropped)=\"tilesDropped.emit($event)\"\r\n    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n    (resetGroup)=\"resetGroup.emit($event)\"\r\n    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    (changeGroupAppTileClick)=\"onAppTileChangeGroupClick($event)\"\r\n></bt-tiles-viewer-group>\r\n}\r\n", styles: [":host{display:block}:host[islast=true]{margin-bottom:var(--footer-height)}:host.s{padding:0 1rem}:host ::ng-deep>fd-layout-panel>fd-layout-panel-header .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}fd-layout-panel.custom-color{margin-top:1rem}fd-layout-panel.empty-tiles-group:not([edithome=true]){display:none}fd-layout-panel fd-layout-panel-header fd-layout-panel-head h5{font-weight:500}fd-layout-panel.hide-header fd-layout-panel-header{display:none}fd-layout-panel[editHome=false]{background-color:transparent}.tile-wrapper.TilesGroup{column-gap:.5rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center;flex-direction:column}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup{display:flex;row-gap:.5rem;column-gap:.5rem;justify-content:start;width:calc(99.9999999999svw - 4rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s{max-height:7.25rem;min-height:6.25rem;min-width:8.25rem;max-width:8.25rem;display:flex;flex-direction:column-reverse;justify-content:space-between}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header{height:1.2rem;max-height:1.2rem;min-height:1.2rem;text-align:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header.child-has-overflow-text{position:relative}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__subtitle{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__footer{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-tile--launch .fd-tile__content{align-items:center;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content{justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content .fd-numeric-content__launch-icon-container{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s{--sapFontHeader6Size: .75rem;min-width:calc(33.3333333333svw - 2rem);max-width:calc(33.3333333333svw - 2rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-numeric-content__kpi{font-size:1.2rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s span.fd-numeric-content__scale-text{font-size:.8rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__title{white-space:nowrap}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__content{height:3rem;max-height:3rem;min-height:3rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile.disable-tile-resize .fd-tile--double{min-width:calc(99.9999999999svw - 6rem + 1rem);max-width:calc(99.9999999999svw - 6rem + 1rem)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i5$1.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i5$1.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i5$1.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i5$1.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i5$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i7.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i5.DynamicStyleDirective, selector: "[cssStyle]", inputs: ["cssStyle"] }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit", "deviceSize"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group" }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "groupType", "edit", "deviceSize", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["hideClick", "renameClick", "changeGroupClick"] }, { kind: "directive", type: TileClassDirective, selector: "[tilesCls]", inputs: ["rtl", "deviceSize", "appTileGroup"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-layout-panel\r\n    [attr.editHome]=\"edit\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!edit || !stackContent\"\r\n    [ngClass]=\"appTileGroup.TileGroupType$Caption\"\r\n    [class.hide-header]=\"appTileGroup.HideHeader\"\r\n    [style.background-color]=\"appTileGroup.BackgroundColor ? appTileGroup.BackgroundColor : null\"\r\n    [class.custom-color]=\"appTileGroup.BackgroundColor\"\r\n    [class.tw-pb-2]=\"isLast\"\r\n    [class.hide]=\"!appTileGroup?.navigatorTiles?.length && !appTileGroup.navigatorActionLinks.length\"\r\n    [class.!tw-mb-2]=\"edit\"\r\n>\r\n    @if (edit || stackContent || isAppTileSubGroup || appTileGroup.HideHeader) {\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-head>\r\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle | bbbTranslate }}</h5>\r\n        </fd-layout-panel-head>\r\n        @if (edit) {\r\n        <fd-layout-panel-actions class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!visible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\r\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\r\n                } @if (appTileGroup.CanDelete) {\r\n                <button\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n                }\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n        }\r\n    </fd-layout-panel-header>\r\n    }\r\n    <fd-layout-panel-body [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            tilesCls\r\n            [class.!tw-hidden]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [class.!tw-justify-start]=\"isJustifyStart()\"\r\n            [rtl]=\"rtl\"\r\n            [appTileGroup]=\"appTileGroup\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [ngClass]=\"deviceSize\"\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\r\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\r\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\r\n            <h5 fd-title></h5>\r\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\r\n            <div\r\n                [class.edit-home]=\"edit\"\r\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [setToStorage]=\"true\"\r\n                    [enableCommand]=\"!edit && appTile.Component\"\r\n                    tileRenderer\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [data]=\"appTile\"\r\n                    [groupType]=\"appTileGroup.TileGroupType$Caption\"\r\n                    [edit]=\"edit\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                    (changeGroupClick)=\"onAppTileChangeGroupClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            }\r\n        </div>\r\n        <bt-actions-link\r\n            [class.actions-link-edit-home]=\"edit\"\r\n            [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n            [class.!tw-p-0]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [edit]=\"edit\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [style.min-height]=\"edit ? '4rem' : 'auto'\"\r\n            cdkDropList\r\n            #actionLinks=\"cdkDropList\"\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListConnectedTo]=\"tiles\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListData]=\"{\r\n                isTile: false,\r\n                items: appTileGroup.navigatorActionLinks || []\r\n            }\"\r\n        >\r\n        </bt-actions-link>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n@for (appTileSubGroup of childrenAppTileGroup; track appTileSubGroup.Id;let last=$last) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\r\n    [childrenAppTileGroup]=\"appTileSubGroup.$Children || []\"\r\n    [visible]=\"appTileSubGroup.navigatorVisible\"\r\n    [isLast]=\"last\"\r\n    [edit]=\"edit\"\r\n    [rtl]=\"rtl\"\r\n    [stackContent]=\"stackContent\"\r\n    [cssStyle]=\"appTileSubGroup.CssStyles\"\r\n    [isAppTileSubGroup]=\"true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    (tilesDropped)=\"tilesDropped.emit($event)\"\r\n    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n    (resetGroup)=\"resetGroup.emit($event)\"\r\n    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    (changeGroupAppTileClick)=\"onAppTileChangeGroupClick($event)\"\r\n></bt-tiles-viewer-group>\r\n}\r\n", styles: [":host{display:block}:host[islast=true]{margin-bottom:var(--footer-height)}:host.s{padding:0 1rem}:host ::ng-deep>fd-layout-panel>fd-layout-panel-header .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}fd-layout-panel.custom-color{margin-top:1rem}fd-layout-panel.empty-tiles-group:not([edithome=true]){display:none}fd-layout-panel fd-layout-panel-header fd-layout-panel-head h5{font-weight:500}fd-layout-panel.hide-header fd-layout-panel-header{display:none}fd-layout-panel[editHome=false]{background-color:transparent}.tile-wrapper.TilesGroup{column-gap:.5rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center;flex-direction:column}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup{display:flex;row-gap:.5rem;column-gap:.5rem;justify-content:start;width:calc(99.9999999999svw - 4rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s{max-height:7.25rem;min-height:6.25rem;min-width:8.25rem;max-width:8.25rem;display:flex;flex-direction:column-reverse;justify-content:space-between}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header{height:1.2rem;max-height:1.2rem;min-height:1.2rem;text-align:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header.child-has-overflow-text{position:relative}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__subtitle{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__footer{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-tile--launch .fd-tile__content{align-items:center;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content{justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content .fd-numeric-content__launch-icon-container{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s{--sapFontHeader6Size: .75rem;min-width:calc(33.3333333333svw - 2rem);max-width:calc(33.3333333333svw - 2rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-numeric-content__kpi{font-size:1.2rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s span.fd-numeric-content__scale-text{font-size:.8rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__title{white-space:nowrap}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__content{height:3rem;max-height:3rem;min-height:3rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile.disable-tile-resize .fd-tile--double{min-width:calc(99.9999999999svw - 6rem + 1rem);max-width:calc(99.9999999999svw - 6rem + 1rem)}\n"] }]
+            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, providers: [ScrollLayoutContextHolder], template: "<fd-layout-panel\r\n    [attr.editHome]=\"edit\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!edit || !stackContent\"\r\n    [ngClass]=\"appTileGroup.TileGroupType$Caption\"\r\n    [class.hide-header]=\"appTileGroup.HideHeader\"\r\n    [style.background-color]=\"appTileGroup.BackgroundColor ? appTileGroup.BackgroundColor : null\"\r\n    [class.custom-color]=\"appTileGroup.BackgroundColor\"\r\n    [class.tw-pb-2]=\"isLast\"\r\n    [class.!tw-mb-2]=\"edit\"\r\n>\r\n    @if (edit || stackContent || isAppTileSubGroup || appTileGroup.HideHeader) {\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-head>\r\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle | bbbTranslate }}</h5>\r\n        </fd-layout-panel-head>\r\n        @if (edit) {\r\n        <fd-layout-panel-actions class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!visible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\r\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\r\n                } @if (appTileGroup.CanDelete) {\r\n                <button\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n                }\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n        }\r\n    </fd-layout-panel-header>\r\n    }\r\n    <fd-layout-panel-body [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            tilesCls\r\n            [class.!tw-hidden]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [class.!tw-justify-start]=\"isJustifyStart()\"\r\n            [rtl]=\"rtl\"\r\n            [appTileGroup]=\"appTileGroup\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [ngClass]=\"deviceSize\"\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\r\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\r\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\r\n            <h5 fd-title></h5>\r\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\r\n            <div\r\n                [class.edit-home]=\"edit\"\r\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [setToStorage]=\"true\"\r\n                    [enableCommand]=\"!edit && appTile.Component\"\r\n                    tileRenderer\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [data]=\"appTile\"\r\n                    [groupType]=\"appTileGroup.TileGroupType$Caption\"\r\n                    [edit]=\"edit\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                    (changeGroupClick)=\"onAppTileChangeGroupClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            }\r\n        </div>\r\n        <bt-actions-link\r\n            [class.actions-link-edit-home]=\"edit\"\r\n            [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n            [class.!tw-p-0]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [edit]=\"edit\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [style.min-height]=\"edit ? '4rem' : 'auto'\"\r\n            cdkDropList\r\n            #actionLinks=\"cdkDropList\"\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListConnectedTo]=\"tiles\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListData]=\"{\r\n                isTile: false,\r\n                items: appTileGroup.navigatorActionLinks || []\r\n            }\"\r\n        >\r\n        </bt-actions-link>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n@for (appTileSubGroup of childrenAppTileGroup; track appTileSubGroup.Id;let last=$last) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\r\n    [childrenAppTileGroup]=\"appTileSubGroup.$Children || []\"\r\n    [visible]=\"appTileSubGroup.navigatorVisible\"\r\n    [isLast]=\"last\"\r\n    [edit]=\"edit\"\r\n    [rtl]=\"rtl\"\r\n    [stackContent]=\"stackContent\"\r\n    [cssStyle]=\"appTileSubGroup.CssStyles\"\r\n    [isAppTileSubGroup]=\"true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    (tilesDropped)=\"tilesDropped.emit($event)\"\r\n    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n    (resetGroup)=\"resetGroup.emit($event)\"\r\n    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    (changeGroupAppTileClick)=\"onAppTileChangeGroupClick($event)\"\r\n></bt-tiles-viewer-group>\r\n}\r\n", styles: [":host{display:block}:host[islast=true]{margin-bottom:var(--footer-height)}:host.s{padding:0 1rem}:host ::ng-deep>fd-layout-panel>fd-layout-panel-header .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}fd-layout-panel.custom-color{margin-top:1rem}fd-layout-panel.empty-tiles-group:not([edithome=true]){display:none}fd-layout-panel fd-layout-panel-header fd-layout-panel-head h5{font-weight:500}fd-layout-panel.hide-header fd-layout-panel-header{display:none}fd-layout-panel[editHome=false]{background-color:transparent}.tile-wrapper.TilesGroup{column-gap:.5rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center;flex-direction:column}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup{display:flex;row-gap:.5rem;column-gap:.5rem;justify-content:start;width:calc(99.9999999999svw - 4rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s{max-height:7.25rem;min-height:6.25rem;min-width:8.25rem;max-width:8.25rem;display:flex;flex-direction:column-reverse;justify-content:space-between}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header{height:1.2rem;max-height:1.2rem;min-height:1.2rem;text-align:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header.child-has-overflow-text{position:relative}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__subtitle{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__footer{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-tile--launch .fd-tile__content{align-items:center;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content{justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content .fd-numeric-content__launch-icon-container{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s{--sapFontHeader6Size: .75rem;min-width:calc(33.3333333333svw - 2rem);max-width:calc(33.3333333333svw - 2rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-numeric-content__kpi{font-size:1.2rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s span.fd-numeric-content__scale-text{font-size:.8rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__title{white-space:nowrap}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__content{height:3rem;max-height:3rem;min-height:3rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile.disable-tile-resize .fd-tile--double{min-width:calc(99.9999999999svw - 6rem + 1rem);max-width:calc(99.9999999999svw - 6rem + 1rem)}\n"] }]
         }] });
 
 class EmptyListDirective {
@@ -2384,9 +2250,37 @@ class TilesViewerComponent extends BaseComponent {
             Name: 'TilesViewerGroup',
             Selector: 'bt-tiles-viewer-group'
         };
+        this._firstSelected = true;
         this._cdr = inject(ChangeDetectorRef);
         this._saveScrollPosition = inject(SaveScrollPositionService);
-        this._firstSelected = true;
+        this._tilesStore = inject(TilesStore);
+        /** Cache of selectGroup signals keyed by group ID to avoid creating new computeds each render. */
+        this._groupSignalCache = new Map();
+        /** Cache of selectGroupChildren signals keyed by parent group ID. */
+        this._childrenSignalCache = new Map();
+    }
+    /**
+     * Returns a stable Signal for a single group from the store dictionary.
+     * The signal is cached per ID so Angular's signal graph tracks it efficiently.
+     */
+    groupById(id) {
+        let sig = this._groupSignalCache.get(id);
+        if (!sig) {
+            sig = this._tilesStore.selectGroup(id);
+            this._groupSignalCache.set(id, sig);
+        }
+        return sig;
+    }
+    /**
+     * Returns a stable Signal for the children of a group from the store dictionary.
+     */
+    groupChildrenById(parentId) {
+        let sig = this._childrenSignalCache.get(parentId);
+        if (!sig) {
+            sig = this._tilesStore.selectGroupChildren(parentId);
+            this._childrenSignalCache.set(parentId, sig);
+        }
+        return sig;
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
@@ -2454,11 +2348,11 @@ class TilesViewerComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TilesViewerComponent, isStandalone: false, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", rtl: "rtl", defaultTab: "defaultTab", tabsBackColor: "tabsBackColor", stackContent: "stackContent", iconTabType: "iconTabType", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", DynamicComponents: "DynamicComponents" }, outputs: { stackContentChange: "stackContentChange", closeEditHome: "closeEditHome", save: "save", listDropped: "listDropped", tabChanged: "tabChanged", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", changeGroupAppTileClick: "changeGroupAppTileClick", tilesDropped: "tilesDropped" }, host: { properties: { "class.page-content": "this.pageContentClass", "class.tiles-viewer": "this._cls", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: IconTabBarComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page size=\"large\" [autoResponsive]=\"true\">\r\n    <fd-dynamic-page-header [class.hide]=\"!edit\" [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                <fd-switch\r\n                    fd-toolbar-item\r\n                    [checked]=\"stackContent\"\r\n                    (checkedChange)=\"onStackContentChanged($event)\"\r\n                ></fd-switch>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                    <i class=\"sap-icon--decline\"></i>\r\n                </button>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n\r\n    <fdp-icon-tab-bar\r\n        [stackContent]=\"stackContent\"\r\n        maxContentHeight=\"auto\"\r\n        ariaRoledescription=\"Tiles Container\"\r\n        [iconTabType]=\"iconTabType || 'text'\"\r\n        (iconTabSelected)=\"onSelectedTabChange($event)\"\r\n        fixMore\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [color]=\"appTileGroup.Color?.$Caption\"\r\n            [icon]=\"appTileGroup.IconFont\"\r\n            [iconFont]=\"appTileGroup.IconFontName?.$Caption\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            #tabRef\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\" cdkScrollable [scrollPersist]=\"appTileGroup.Id\" >\r\n                <bt-dynamic-tile-group\r\n                    [component]=\"appTileGroup.Component?.Selector ? appTileGroup.Component : defaultTileGroupComponent\"\r\n                    [parameters]=\"appTileGroup.Component?.Settings\"\r\n                    [tabRef]=\"tabRef\"\r\n                    [class]=\"deviceSize\"\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [visible]=\"appTileGroup.navigatorVisible\"\r\n                    [childrenAppTileGroup]=\"appTileGroup.$Children || []\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [cssStyles]=\"appTileGroup.CssStyles\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"i > 0\"\r\n                    (tilesDropped)=\"onDrop($event)\"\r\n                    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n                    (hideAppTileClick)=\"onHideAppTileClick($event)\"\r\n                    (changeGroupAppTileClick)=\"changeGroupAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bt-dynamic-tile-group>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n\r\n        } }\r\n    </fdp-icon-tab-bar>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"onExitEditHome(appTileGroups)\"\r\n                ></fd-button-bar>\r\n            </div>\r\n        </div>\r\n        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n", styles: [":host{display:block}:host .no-dynamic-page ::ng-deep fdp-icon-tab-bar-filter-type>ul{padding-inline:3rem}:host ::ng-deep>fd-dynamic-page ::ng-deep>article{height:calc(100vh - var(--shellbar-height) - var(--bottom-menu-height))!important}:host ::ng-deep>fd-dynamic-page ::ng-deep>article .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep>fd-dynamic-page ::ng-deep>article fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep>fd-dynamic-page ::ng-deep>article .fd-panel__content{border-bottom:none;padding:1px}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}@media (min-width: 1200px){:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fd-dynamic-page-content,:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fdp-icon-tab-bar-text-type{display:flex;justify-content:center}:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar ul,:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fd-dynamic-page-content>bt-tiles-viewer-group{width:90rem}}:host.hideTabs ::ng-deep fdp-icon-tab-bar-text-type{display:none!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"], dependencies: [{ kind: "directive", type: i2$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i4$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i4$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i4$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i4$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i4$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i3$2.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i6$2.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "component", type: i7.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i8$1.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i8$1.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "directive", type: i5.ScrollPersistDirective, selector: "[scrollPersist]", inputs: ["scrollPersist"] }, { kind: "directive", type: i3.FixMoreDirective, selector: "[fixMore]" }, { kind: "component", type: DynamicTileGroupComponent, selector: "bt-dynamic-tile-group,[dynamictilegroup]", inputs: ["appTileGroup", "tabRef", "stackContent", "cssStyles", "edit", "visible", "rtl", "childrenAppTileGroup", "isAppTileSubGroup", "deviceSize", "isLast"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "changeGroupAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TilesViewerComponent, isStandalone: false, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", rtl: "rtl", defaultTab: "defaultTab", tabsBackColor: "tabsBackColor", stackContent: "stackContent", iconTabType: "iconTabType", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", DynamicComponents: "DynamicComponents" }, outputs: { stackContentChange: "stackContentChange", closeEditHome: "closeEditHome", save: "save", listDropped: "listDropped", tabChanged: "tabChanged", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", changeGroupAppTileClick: "changeGroupAppTileClick", tilesDropped: "tilesDropped" }, host: { properties: { "class.page-content": "this.pageContentClass", "class.tiles-viewer": "this._cls", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: IconTabBarComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page size=\"large\" [autoResponsive]=\"true\">\n    <fd-dynamic-page-header [class.hide]=\"!edit\" [title]=\"'HomeEdit' | bbbTranslate\">\n        <fd-dynamic-page-global-actions>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\n                <fd-switch\n                    fd-toolbar-item\n                    [checked]=\"stackContent\"\n                    (checkedChange)=\"onStackContentChanged($event)\"\n                ></fd-switch>\n            </fd-toolbar>\n        </fd-dynamic-page-global-actions>\n        <fd-dynamic-page-layout-actions>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\n                    <i class=\"sap-icon--decline\"></i>\n                </button>\n            </fd-toolbar>\n        </fd-dynamic-page-layout-actions>\n    </fd-dynamic-page-header>\n\n    <fdp-icon-tab-bar\n        [stackContent]=\"stackContent\"\n        maxContentHeight=\"auto\"\n        ariaRoledescription=\"Tiles Container\"\n        [iconTabType]=\"iconTabType || 'text'\"\n        (iconTabSelected)=\"onSelectedTabChange($event)\"\n        fixMore\n    >\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) {\n            @let group = groupById(appTileGroup.Id)();\n            @if (group && (edit || group.navigatorVisible)) {\n\n            <fdp-icon-tab-bar-tab\n                [id]=\"group.Id\"\n                [color]=\"group.Color?.$Caption\"\n                [icon]=\"group.IconFont\"\n                [iconFont]=\"group.IconFontName?.$Caption\"\n                [label]=\"group.navigatorTitle | bbbTranslate\"\n                [title]=\"group.navigatorTitle | bbbTranslate\"\n                #tabRef\n            >\n                <fd-dynamic-page-content [id]=\"group.Id\" cdkScrollable [scrollPersist]=\"group.Id\">\n                    <bt-dynamic-tile-group\n                        [component]=\"group.Component?.Selector ? group.Component : defaultTileGroupComponent\"\n                        [parameters]=\"group.Component?.Settings\"\n                        [tabRef]=\"tabRef\"\n                        [class]=\"deviceSize\"\n                        [appTileGroup]=\"group\"\n                        [visible]=\"group.navigatorVisible\"\n                        [childrenAppTileGroup]=\"groupChildrenById(group.Id)()\"\n                        [edit]=\"edit\"\n                        [rtl]=\"rtl\"\n                        [cssStyles]=\"group.CssStyles\"\n                        [deviceSize]=\"deviceSize\"\n                        [stackContent]=\"stackContent\"\n                        [isAppTileSubGroup]=\"i > 0\"\n                        (tilesDropped)=\"onDrop($event)\"\n                        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n                        (hideAppTileClick)=\"onHideAppTileClick($event)\"\n                        (changeGroupAppTileClick)=\"changeGroupAppTileClick.emit($event)\"\n                        (resetGroup)=\"resetGroup.emit($event)\"\n                        (deleteGroup)=\"deleteGroup.emit($event)\"\n                        (toggleGroup)=\"toggleGroup.emit($event)\"\n                    ></bt-dynamic-tile-group>\n                </fd-dynamic-page-content>\n            </fdp-icon-tab-bar-tab>\n\n            }\n        }\n    </fdp-icon-tab-bar>\n\n    <fd-dynamic-page-footer>\n        @if (edit) {\n        <div fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-button-bar\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\n                    fdType=\"emphasized\"\n                    (click)=\"onExitEditHome(appTileGroups)\"\n                ></fd-button-bar>\n            </div>\n        </div>\n        }\n    </fd-dynamic-page-footer>\n</fd-dynamic-page>\n", styles: [":host{display:block}:host .no-dynamic-page ::ng-deep fdp-icon-tab-bar-filter-type>ul{padding-inline:3rem}:host ::ng-deep>fd-dynamic-page ::ng-deep>article{height:calc(100vh - var(--shellbar-height) - var(--bottom-menu-height))!important}:host ::ng-deep>fd-dynamic-page ::ng-deep>article .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep>fd-dynamic-page ::ng-deep>article fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep>fd-dynamic-page ::ng-deep>article .fd-panel__content{border-bottom:none;padding:1px}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}@media (min-width: 1200px){:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fd-dynamic-page-content,:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fdp-icon-tab-bar-text-type{display:flex;justify-content:center}:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar ul,:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fd-dynamic-page-content>bt-tiles-viewer-group{width:90rem}}:host.hideTabs ::ng-deep fdp-icon-tab-bar-text-type{display:none!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"], dependencies: [{ kind: "directive", type: i2$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i4$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i4$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i4$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i4$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i4$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i3$2.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i6$2.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "component", type: i7.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i8$1.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i8$1.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "directive", type: i5.ScrollPersistDirective, selector: "[scrollPersist]", inputs: ["scrollPersist"] }, { kind: "directive", type: i3.FixMoreDirective, selector: "[fixMore]" }, { kind: "component", type: DynamicTileGroupComponent, selector: "bt-dynamic-tile-group,[dynamictilegroup]", inputs: ["appTileGroup", "tabRef", "stackContent", "cssStyles", "edit", "visible", "rtl", "childrenAppTileGroup", "isAppTileSubGroup", "deviceSize", "isLast"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "changeGroupAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-dynamic-page size=\"large\" [autoResponsive]=\"true\">\r\n    <fd-dynamic-page-header [class.hide]=\"!edit\" [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                <fd-switch\r\n                    fd-toolbar-item\r\n                    [checked]=\"stackContent\"\r\n                    (checkedChange)=\"onStackContentChanged($event)\"\r\n                ></fd-switch>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                    <i class=\"sap-icon--decline\"></i>\r\n                </button>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n\r\n    <fdp-icon-tab-bar\r\n        [stackContent]=\"stackContent\"\r\n        maxContentHeight=\"auto\"\r\n        ariaRoledescription=\"Tiles Container\"\r\n        [iconTabType]=\"iconTabType || 'text'\"\r\n        (iconTabSelected)=\"onSelectedTabChange($event)\"\r\n        fixMore\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [color]=\"appTileGroup.Color?.$Caption\"\r\n            [icon]=\"appTileGroup.IconFont\"\r\n            [iconFont]=\"appTileGroup.IconFontName?.$Caption\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            #tabRef\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\" cdkScrollable [scrollPersist]=\"appTileGroup.Id\" >\r\n                <bt-dynamic-tile-group\r\n                    [component]=\"appTileGroup.Component?.Selector ? appTileGroup.Component : defaultTileGroupComponent\"\r\n                    [parameters]=\"appTileGroup.Component?.Settings\"\r\n                    [tabRef]=\"tabRef\"\r\n                    [class]=\"deviceSize\"\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [visible]=\"appTileGroup.navigatorVisible\"\r\n                    [childrenAppTileGroup]=\"appTileGroup.$Children || []\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [cssStyles]=\"appTileGroup.CssStyles\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"i > 0\"\r\n                    (tilesDropped)=\"onDrop($event)\"\r\n                    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n                    (hideAppTileClick)=\"onHideAppTileClick($event)\"\r\n                    (changeGroupAppTileClick)=\"changeGroupAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bt-dynamic-tile-group>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n\r\n        } }\r\n    </fdp-icon-tab-bar>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"onExitEditHome(appTileGroups)\"\r\n                ></fd-button-bar>\r\n            </div>\r\n        </div>\r\n        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n", styles: [":host{display:block}:host .no-dynamic-page ::ng-deep fdp-icon-tab-bar-filter-type>ul{padding-inline:3rem}:host ::ng-deep>fd-dynamic-page ::ng-deep>article{height:calc(100vh - var(--shellbar-height) - var(--bottom-menu-height))!important}:host ::ng-deep>fd-dynamic-page ::ng-deep>article .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep>fd-dynamic-page ::ng-deep>article fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep>fd-dynamic-page ::ng-deep>article .fd-panel__content{border-bottom:none;padding:1px}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}@media (min-width: 1200px){:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fd-dynamic-page-content,:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fdp-icon-tab-bar-text-type{display:flex;justify-content:center}:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar ul,:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fd-dynamic-page-content>bt-tiles-viewer-group{width:90rem}}:host.hideTabs ::ng-deep fdp-icon-tab-bar-text-type{display:none!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"] }]
+            args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-dynamic-page size=\"large\" [autoResponsive]=\"true\">\n    <fd-dynamic-page-header [class.hide]=\"!edit\" [title]=\"'HomeEdit' | bbbTranslate\">\n        <fd-dynamic-page-global-actions>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\n                <fd-switch\n                    fd-toolbar-item\n                    [checked]=\"stackContent\"\n                    (checkedChange)=\"onStackContentChanged($event)\"\n                ></fd-switch>\n            </fd-toolbar>\n        </fd-dynamic-page-global-actions>\n        <fd-dynamic-page-layout-actions>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\n                    <i class=\"sap-icon--decline\"></i>\n                </button>\n            </fd-toolbar>\n        </fd-dynamic-page-layout-actions>\n    </fd-dynamic-page-header>\n\n    <fdp-icon-tab-bar\n        [stackContent]=\"stackContent\"\n        maxContentHeight=\"auto\"\n        ariaRoledescription=\"Tiles Container\"\n        [iconTabType]=\"iconTabType || 'text'\"\n        (iconTabSelected)=\"onSelectedTabChange($event)\"\n        fixMore\n    >\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) {\n            @let group = groupById(appTileGroup.Id)();\n            @if (group && (edit || group.navigatorVisible)) {\n\n            <fdp-icon-tab-bar-tab\n                [id]=\"group.Id\"\n                [color]=\"group.Color?.$Caption\"\n                [icon]=\"group.IconFont\"\n                [iconFont]=\"group.IconFontName?.$Caption\"\n                [label]=\"group.navigatorTitle | bbbTranslate\"\n                [title]=\"group.navigatorTitle | bbbTranslate\"\n                #tabRef\n            >\n                <fd-dynamic-page-content [id]=\"group.Id\" cdkScrollable [scrollPersist]=\"group.Id\">\n                    <bt-dynamic-tile-group\n                        [component]=\"group.Component?.Selector ? group.Component : defaultTileGroupComponent\"\n                        [parameters]=\"group.Component?.Settings\"\n                        [tabRef]=\"tabRef\"\n                        [class]=\"deviceSize\"\n                        [appTileGroup]=\"group\"\n                        [visible]=\"group.navigatorVisible\"\n                        [childrenAppTileGroup]=\"groupChildrenById(group.Id)()\"\n                        [edit]=\"edit\"\n                        [rtl]=\"rtl\"\n                        [cssStyles]=\"group.CssStyles\"\n                        [deviceSize]=\"deviceSize\"\n                        [stackContent]=\"stackContent\"\n                        [isAppTileSubGroup]=\"i > 0\"\n                        (tilesDropped)=\"onDrop($event)\"\n                        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n                        (hideAppTileClick)=\"onHideAppTileClick($event)\"\n                        (changeGroupAppTileClick)=\"changeGroupAppTileClick.emit($event)\"\n                        (resetGroup)=\"resetGroup.emit($event)\"\n                        (deleteGroup)=\"deleteGroup.emit($event)\"\n                        (toggleGroup)=\"toggleGroup.emit($event)\"\n                    ></bt-dynamic-tile-group>\n                </fd-dynamic-page-content>\n            </fdp-icon-tab-bar-tab>\n\n            }\n        }\n    </fdp-icon-tab-bar>\n\n    <fd-dynamic-page-footer>\n        @if (edit) {\n        <div fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-button-bar\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\n                    fdType=\"emphasized\"\n                    (click)=\"onExitEditHome(appTileGroups)\"\n                ></fd-button-bar>\n            </div>\n        </div>\n        }\n    </fd-dynamic-page-footer>\n</fd-dynamic-page>\n", styles: [":host{display:block}:host .no-dynamic-page ::ng-deep fdp-icon-tab-bar-filter-type>ul{padding-inline:3rem}:host ::ng-deep>fd-dynamic-page ::ng-deep>article{height:calc(100vh - var(--shellbar-height) - var(--bottom-menu-height))!important}:host ::ng-deep>fd-dynamic-page ::ng-deep>article .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep>fd-dynamic-page ::ng-deep>article fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep>fd-dynamic-page ::ng-deep>article .fd-panel__content{border-bottom:none;padding:1px}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}@media (min-width: 1200px){:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fd-dynamic-page-content,:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fdp-icon-tab-bar-text-type{display:flex;justify-content:center}:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar ul,:host.centerContent>fd-dynamic-page ::ng-deep>article>fdp-icon-tab-bar fd-dynamic-page-content>bt-tiles-viewer-group{width:90rem}}:host.hideTabs ::ng-deep fdp-icon-tab-bar-text-type{display:none!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"] }]
         }], propDecorators: { tabListComponent: [{
                 type: ViewChild,
                 args: [IconTabBarComponent]
@@ -3602,11 +3496,11 @@ class BarsaShellbarComponent extends BaseComponent {
         this.cultureChanged.emit(culture);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaShellbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaShellbarComponent, isStandalone: false, selector: "bt-barsa-shellbar", inputs: { showSidebar: "showSidebar", multiLanguages: "multiLanguages", userLoggedIn: "userLoggedIn", settings: "settings", productMenuControl: "productMenuControl", dastoratSarasari: "dastoratSarasari", workflowMenuItems: "workflowMenuItems", groupedCommandMenus: "groupedCommandMenus", deviceSize: "deviceSize", cultures: "cultures", shellbarData: "shellbarData", notificationsUnreadCount: "notificationsUnreadCount", productMenuItems1: "productMenuItems1", bodyClick: "bodyClick", logo: "logo", actions: "actions", userMenu: "userMenu", footerButtons: "footerButtons", productSwitcher: "productSwitcher", subtitle: "subtitle", isMobile: "isMobile", hideShellbarActions: "hideShellbarActions", flatButtons: "flatButtons", isTablet: "isTablet", userInfo: "userInfo", isDesktop: "isDesktop", informativeText: "informativeText", informativeStatus: "informativeStatus", hideProductMenu: "hideProductMenu", enableSearch: "enableSearch", hideNotifications: "hideNotifications", isServiceDesk: "isServiceDesk", isOpenQuickAccess: "isOpenQuickAccess", sideMenuTemplate: "sideMenuTemplate", notificationReport: "notificationReport", profileDynamicCommand: "profileDynamicCommand", profileDynamicCommandText: "profileDynamicCommandText", profileDynamicCommandIcon: "profileDynamicCommandIcon", displayName: "displayName", hideBranding: "hideBranding", showSearchInSystem: "showSearchInSystem", rtl: "rtl", suggestions: "suggestions" }, outputs: { appTileGroupChange: "appTileGroupChange", searchItemClick: "searchItemClick", searchInput: "searchInput", isOpenQuickAccessChanged: "isOpenQuickAccessChanged", openNotificationPanel: "openNotificationPanel", openQuickAccessPanel: "openQuickAccessPanel", cultureChanged: "cultureChanged", notifiationActionClick: "notifiationActionClick" }, viewQueries: [{ propertyName: "searchDialogContent", first: true, predicate: ["searchContent"], descendants: true, read: TemplateRef }, { propertyName: "searchDialogSubHeader", first: true, predicate: ["searchSubHeader"], descendants: true, read: TemplateRef }, { propertyName: "shellbar", first: true, predicate: ShellbarComponent$1, descendants: true, static: true }, { propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-shellbar\r\n    [ngClass]=\"deviceSize\"\r\n    routeFormChange\r\n    (stateChanged)=\"onRouteFormStateChange()\"\r\n    [showNavigationButton]=\"sideMenuTemplate || showSidebar ? true : false\"\r\n    (navigationButtonClicked)=\"$event.stopPropagation(); isOpenQuickAccessChanged.emit(!isOpenQuickAccess)\"\r\n    [handleBodyClick]=\"true\"\r\n    [size]=\"deviceSize === 's' && userLoggedIn ? 'm' : deviceSize\"\r\n>\r\n    <fd-shellbar-branding [interactiveBranding]=\"true\" [style.display]=\"hideBranding ? 'none' : null\">\r\n        <fd-shellbar-logo>\r\n            <a\r\n                [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\r\n                href=\"/\"\r\n                class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced tw-bg-center !tw-bg-auto\"\r\n                [attr.aria-label]=\"subtitle | bbbTranslate\"\r\n            ></a>\r\n        </fd-shellbar-logo>\r\n        <fd-shellbar-title> {{ subtitle | bbbTranslate }} {{ showVersion ? appVersion : '' }}</fd-shellbar-title>\r\n    </fd-shellbar-branding>\r\n\r\n    <fd-shellbar-context-area>       \r\n        <span\r\n            [class.hide]=\"!informativeText\"\r\n            fdShellbarHidePriority=\"1\"\r\n            fd-object-status\r\n            [status]=\"informativeStatus || 'informative'\"\r\n            [inverted]=\"true\"\r\n            [label]=\"informativeText\"\r\n        ></span>\r\n        <fd-product-switch\r\n            fdShellbarHidePriority=\"3\"\r\n            [class.hide]=\"!productSwitcher?.length\"\r\n            [restoreFocusOnClose]=\"false\"\r\n        >\r\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\r\n            </fd-product-switch-body>\r\n        </fd-product-switch>\r\n        <span\r\n            [class.hide]=\"!showSearchInSystem\"\r\n            fdShellbarHidePriority=\"4\"\r\n            class=\"fd-shellbar__button\"\r\n            fd-button\r\n            glyph=\"search\"\r\n            fdType=\"transparent\"\r\n            (click)=\"onOpenSearchDialog()\"\r\n        >\r\n        </span>\r\n        <fd-product-menu\r\n            fdShellbarHidePriority=\"2\"\r\n            [control]=\"productMenuControl\"\r\n            [closePopoverOnSelect]=\"true\"\r\n            [items]=\"productMenuItems1\"\r\n            [class.hide]=\"!productMenuItems1?.length\"            \r\n        >\r\n        </fd-product-menu>\r\n        <fd-shellbar-separator fdshellbarhidepriority=\"5\"  style=\"flex-shrink: 0;\"></fd-shellbar-separator>\r\n        @for(dastor of dastoratSarasari; track dastor.label){\r\n            @if(dastor.children?.length){\r\n            <button\r\n                type=\"button\"\r\n                class=\"fd-shellbar__button\"\r\n                [fdShellbarHidePriority]=\"dastor.priority\"\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [glyph]=\"dastor.glyph\"\r\n                [label]=\"dastor.label | bbbTranslate\"\r\n                [fdMenuTrigger]=\"globalCommandMenu\"\r\n        \r\n                >                \r\n        </button>\r\n            <fd-menu #globalCommandMenu>\r\n                @for(item of dastor.children; track item.key) {\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        globalSubmenuTemplate;\r\n                        context: { item: item, parentSubmenu: undefined, rootMenu: globalCommandMenu }\r\n                    \"\r\n                ></ng-container>\r\n                }\r\n                <ng-template #globalSubmenuTemplate let-item=\"item\" let-parentSubmenu=\"parentSubmenu\" let-rootMenu=\"rootMenu\">\r\n                    <li fd-menu-item [submenu]=\"item.children?.length ? submenu : undefined\" [parentSubmenu]=\"parentSubmenu\">\r\n                        @if(item.children?.length){\r\n                        <div fd-menu-interactive>\r\n                            <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                            <fd-menu-addon [submenuIndicator]=\"true\"></fd-menu-addon>\r\n                        </div>\r\n                        } @else {\r\n                        <a\r\n                            fd-menu-interactive\r\n                            href=\"\"\r\n                            [class.shellbar-command-action--image-glyph]=\"item.useImageGlyph\"\r\n                            (click)=\"$event.preventDefault(); rootMenu.close(); item.callback?.()\"\r\n                        >\r\n                            @if(item.useImageGlyph){\r\n                            <img\r\n                                class=\"shellbar-command-action__image\"\r\n                                [src]=\"item.glyph\"\r\n                                [alt]=\"item.label | bbbTranslate\"\r\n                                loading=\"lazy\"\r\n                            />\r\n                            }\r\n                            <span fd-menu-title class=\"shellbar-command-action__label\">{{ item.label | bbbTranslate }}</span>\r\n                        </a>\r\n                        }\r\n                    </li>\r\n                    <fd-submenu #submenu>\r\n                        @if(item.children?.length){\r\n                        @for(subItem of item.children; track subItem.key) {\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                globalSubmenuTemplate;\r\n                                context: { item: subItem, parentSubmenu: submenu, rootMenu: rootMenu }\r\n                            \"\r\n                        ></ng-container>\r\n                        }\r\n                        }\r\n                    </fd-submenu>\r\n                </ng-template>\r\n            </fd-menu>\r\n            } @else {\r\n            <span                                \r\n                [fdShellbarHidePriority]=\"dastor.priority\"\r\n                fd-button\r\n                [glyph]=\"dastor.glyph\"\r\n                class=\"fd-shellbar__button\"\r\n                [label]=\"dastor.useImageGlyph ? undefined : (dastor.label | bbbTranslate)\"\r\n                [class.shellbar-command-action--image-glyph]=\"dastor.useImageGlyph\"\r\n                (click)=\"dastor.callback?.()\"\r\n            >\r\n                @if(dastor.useImageGlyph){\r\n                <img\r\n                    class=\"shellbar-command-action__image\"\r\n                    [src]=\"dastor.glyph\"\r\n                    [alt]=\"dastor.label | bbbTranslate\"\r\n                    loading=\"lazy\"\r\n                />\r\n                <span class=\"shellbar-command-action__label\">{{ dastor.label | bbbTranslate }}</span>\r\n                }\r\n            </span>\r\n            }\r\n        }\r\n\r\n\r\n        @if(workflowMenuItems.length){\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [label]=\"'Workflow' | bbbTranslate\"\r\n                [fdMenu]=\"true\"\r\n                [fdMenuTrigger]=\"workflowMenu\"\r\n            ></button>\r\n            <fd-menu #workflowMenu>\r\n                @for(item of workflowMenuItems; track item.key) {\r\n                <li fd-menu-item>\r\n                    <a fd-menu-interactive href=\"\" (click)=\"$event.preventDefault(); workflowMenu.close(); item.callback?.()\">\r\n                        <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </fd-menu>\r\n        }\r\n\r\n        @for(group of groupedCommandMenus; track group.Caption){\r\n            <button                                \r\n                fd-button                \r\n                [label]=\"group.Caption | bbbTranslate\"\r\n                [fdMenu]=\"true\"\r\n                [fdMenuTrigger]=\"groupMenu\"\r\n            ></button>\r\n            <fd-menu #groupMenu>\r\n                @for(item of group.Commands; track item.key) {\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        groupSubmenuTemplate;\r\n                        context: { item: item, parentSubmenu: undefined, rootMenu: groupMenu }\r\n                    \"\r\n                ></ng-container>\r\n                }\r\n                <ng-template #groupSubmenuTemplate let-item=\"item\" let-parentSubmenu=\"parentSubmenu\" let-rootMenu=\"rootMenu\">\r\n                    <li fd-menu-item [submenu]=\"item.children?.length ? submenu : undefined\" [parentSubmenu]=\"parentSubmenu\">\r\n                        @if(item.children?.length){\r\n                        <div fd-menu-interactive>\r\n                            <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                            <fd-menu-addon [submenuIndicator]=\"true\"></fd-menu-addon>\r\n                        </div>\r\n                        } @else {\r\n                        <a\r\n                            fd-menu-interactive                            \r\n                            class=\"tw-gap-2\"\r\n                            [class.shellbar-command-action--image-glyph]=\"item.useImageGlyph\"\r\n                            (click)=\"$event.preventDefault(); rootMenu.close(); item.callback?.()\"\r\n                        >\r\n                            @if(item.useImageGlyph){\r\n                            <img\r\n                                class=\"shellbar-command-action__image\"\r\n                                [src]=\"item.glyph\"\r\n                                [alt]=\"item.label | bbbTranslate\"\r\n                                loading=\"lazy\"\r\n                            />\r\n                            }\r\n                            <span fd-menu-title class=\"shellbar-command-action__label\">{{ item.label | bbbTranslate }}</span>\r\n                        </a>\r\n                        }\r\n                    </li>\r\n                    <fd-submenu #submenu>\r\n                        @if(item.children?.length){\r\n                        @for(subItem of item.children; track subItem.key) {\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                groupSubmenuTemplate;\r\n                                context: { item: subItem, parentSubmenu: submenu, rootMenu: rootMenu }\r\n                            \"\r\n                        ></ng-container>\r\n                        }\r\n                        }\r\n                    </fd-submenu>\r\n                </ng-template>\r\n            </fd-menu>\r\n        }\r\n    </fd-shellbar-context-area>\r\n\r\n    @if(inputEnableSearch()){\r\n    <fdp-search-field\r\n        [placeholder]=\"'Search' | bbbTranslate\"\r\n        (inputChange)=\"onSearchInputChange($event)\"\r\n        [suggestions]=\"suggestions\"\r\n        (searchSubmit)=\"onSearchSubmit($event)\"\r\n    ></fdp-search-field>\r\n    }\r\n    <fd-shellbar-actions\r\n        #shellbarActions\r\n        (searchOpen)=\"onSearchOpen($event)\"\r\n        [class.flat-buttons]=\"flatButtons?.length && !showSearch()\"\r\n    >\r\n        <fd-user-menu>\r\n            <fd-user-menu-control>\r\n                <fd-avatar size=\"xs\" [circle]=\"true\" [attr.ariaLabel]=\"displayName\" [image]=\"userInfo?.Url\"></fd-avatar>\r\n            </fd-user-menu-control>\r\n            <fd-user-menu-body>\r\n                <div fd-user-menu-header>\r\n                    <fd-avatar\r\n                        [circle]=\"true\"\r\n                        [size]=\"deviceSize\"\r\n                        [label]=\"userInfo?.Url ? '' : displayName\"\r\n                        zoomGlyph=\"\"\r\n                        title=\"Edit avatar\"\r\n                        [image]=\"userInfo?.Url\"\r\n                    ></fd-avatar>\r\n                    <div fd-user-menu-header-container>\r\n                        <div fd-user-menu-user-name>{{ displayName }}</div>\r\n                        @for(item of userInfo?.Sublines;track item){\r\n                        <div fd-user-menu-subline>{{ item }}</div>\r\n                        }\r\n                    </div>\r\n                    @if(profileDynamicCommandText){\r\n                    <button\r\n                        fd-button\r\n                        [label]=\"profileDynamicCommandText || 'Edit' | bbbTranslate\"\r\n                        [glyph]=\"profileDynamicCommandIcon || 'edit'\"\r\n                        [attr.ariaLabel]=\"'\u0648\u06CC\u0631\u0627\u06CC\u0634 \u067E\u0631\u0648\u0641\u0627\u06CC\u0644'\"\r\n                        [dynCommand]=\"profileDynamicCommand\"\r\n                        bodyClick\r\n                    ></button>\r\n                    }\r\n                </div>\r\n                <div fd-user-menu-content-container>\r\n                    @if(userMenu?.length){\r\n                    <fd-panel transparent noRadius [fixed]=\"true\" class=\"hide-panel-header\"> </fd-panel>}\r\n\r\n                    <fd-user-menu-list>\r\n                        @for(item of userMenu;track item.text){\r\n                        <li fd-user-menu-list-item [icon]=\"item.icon\" [text]=\"item.text\" (click)=\"item.callback()\"></li>\r\n                        }\r\n                    </fd-user-menu-list>\r\n                </div>\r\n            </fd-user-menu-body>\r\n\r\n            <fd-user-menu-footer>\r\n                <div fd-bar barDesign=\"footer\">\r\n                    <div fd-bar-right>\r\n                        @for(item of footerButtons;track item.text){\r\n                        <button\r\n                            fd-button\r\n                            [label]=\"item.text\"\r\n                            fdType=\"transparent\"\r\n                            [glyph]=\"item.icon\"\r\n                            [attr.ariaLabel]=\"item.text\"\r\n                            (click)=\"item.callback()\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-user-menu-footer>\r\n        </fd-user-menu>\r\n        @for (action of actions; track action) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"action.Icon\"\r\n            [callback]=\"action.Callback\"\r\n            [label]=\"action.Label\"\r\n            [notificationLabel]=\"action.label\"\r\n        >\r\n        </fd-shellbar-action>\r\n\r\n        } @if (!settings?.HideLanguage && multiLanguages && userLoggedIn) {\r\n        <button\r\n            class=\"fd-shellbar__button\"\r\n            fd-button\r\n            glyph=\"world\"\r\n            fdType=\"transparent\"\r\n            [fdMenuTrigger]=\"menu\"\r\n        ></button>\r\n        } @if (deviceSize !== 's' && userLoggedIn && !hideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notification'\"\r\n            [notificationCount]=\"notificationsUnreadCount\"\r\n            [notificationLabel]=\"'Notification Label'\"\r\n            [callback]=\"onOpenNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if (deviceSize === 's' && userLoggedIn && !hideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notifications' | bbbTranslate\"\r\n            [notificationCount]=\"notificationsUnreadCount\"\r\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\r\n            [callback]=\"onBellNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if(flatButtons?.length){\r\n        <div class=\"tw-flex tw-gap-1\">\r\n            @if (!settings?.HideLanguage && multiLanguages){\r\n            <button\r\n                class=\"fd-shellbar__button\"\r\n                fd-button\r\n                glyph=\"world\"\r\n                fdType=\"transparent\"\r\n                [fdMenuTrigger]=\"menu\"\r\n            ></button>\r\n            } @for(btn of flatButtons;track btn){\r\n            <button\r\n                fd-button\r\n                [label]=\"btn.text\"\r\n                [glyph]=\"btn.text === ('Login' | bbbTranslate) ? 'person-placeholder' : null\"\r\n                fdType=\"emphasized\"\r\n                (click)=\"btn.callback()\"\r\n            ></button>\r\n            }\r\n        </div>\r\n        }\r\n    </fd-shellbar-actions>\r\n    <fd-popover\r\n        [(isOpen)]=\"isOpenNotificatoin\"\r\n        [noArrow]=\"true\"\r\n        placement=\"top-end\"\r\n        title=\"Notification Popover\"\r\n        [appendTo]=\"el\"\r\n        [mobile]=\"false\"\r\n        #popoverComponent\r\n    >\r\n        <fd-popover-control>\r\n            <!-- <fd-shellbar-action\r\n                    [glyph]=\"'bell'\"\r\n                    [label]=\"'Notification'\"\r\n                    [notificationCount]=\"notificationsUnreadCount\"\r\n                    [notificationLabel]=\"'Notification Label'\"\r\n                    [callback]=\"onOpenNotification\"\r\n                >\r\n                </fd-shellbar-action> -->\r\n        </fd-popover-control>\r\n        <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\r\n            @if(isOpenNotificatoin){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsUnreadCount }\"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</fd-shellbar>\r\n\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<div\r\n    *ngIf=\"sideMenuTemplate\"\r\n    class=\"sidemenu-h tw-fixed tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\r\n    [class.tw-w-screen]=\"isMobile\"\r\n    [class.-tw-right-full]=\"isMobile\"\r\n    [class.tw-w-96]=\"!isMobile\"\r\n    [class.-tw-right-96]=\"!isMobile && rtl\"\r\n    [class.!tw-right-0]=\"rtl && isOpenQuickAccess\"\r\n    [class.-tw-left-96]=\"!isMobile && !rtl\"\r\n    [class.!tw-left-0]=\"!rtl && isOpenQuickAccess\"\r\n    (click)=\"$event.stopPropagation()\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></ng-container>\r\n</div>\r\n\r\n<fd-menu #menu>\r\n    <ul fd-list>\r\n        @for (culture of cultures | keyvalue; track culture) {\r\n        <li fd-list-item>\r\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\r\n                <span fd-list-title class=\"tw-flex tw-items-center tw-gap-1\">\r\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" loading=\"lazy\" />\r\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\r\n                </span>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</fd-menu>\r\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\r\n    <bt-notification-group\r\n        [notificationReport]=\"notificationReport\"\r\n        [notificationCount]=\"notificationCount\"\r\n        (actionClick)=\"popoverComponent.close()\"\r\n        [deviceSize]=\"deviceSize\"\r\n    ></bt-notification-group>\r\n</ng-template>\r\n\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body class=\"mobile\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsUnreadCount }\"\r\n            ></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n<ng-template #searchContent>\r\n    <ul fd-list [byline]=\"true\">\r\n        @for (item of (suggestions | suggestionsFilter:selectedSuggestionFiltertype) ; track item.data.path) {\r\n        <li\r\n            fd-list-item\r\n            [interactive]=\"true\"\r\n            (click)=\"onSearchItemClick(item)\"\r\n            class=\"!tw-ps-1\"\r\n            [class.!tw-bg-blue-600]=\"item.data.source === 'Report'\"\r\n            [class.!tw-bg-green-600]=\"item.data.source === 'Command'\"\r\n            [class.!tw-bg-gray-600]=\"item.data.source !== 'Command' && item.data.source !== 'Report'\"\r\n        >\r\n            <a fd-list-link [attr.href]=\"!item.data.url ? null : item.data.url\" (click)=\"onSearchLink(item, $event)\">\r\n                <div fd-list-content>\r\n                    <div fd-list-title>{{ item.value }}</div>\r\n                    <div fd-list-byline>{{ item.data.path }}</div>\r\n                </div>\r\n                <span fd-list-secondary>\r\n                    @if(item.data.canPin){\r\n                    <button\r\n                        class=\"!tw-m-[0.1rem]\"\r\n                        [ariaLabel]=\"'AddToFavorite' | bbbTranslate\"\r\n                        [title]=\"'Add To Favorite' | bbbTranslate\"\r\n                        fd-button\r\n                        glyph=\"shortcut\"\r\n                        (click)=\"oFavoriteLink(item, $event)\"\r\n                    ></button>\r\n                    }\r\n                </span>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n<ng-template #searchSubHeader>\r\n    <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n        <fd-input-group\r\n            glyph=\"search\"\r\n            fdkInitialFocus\r\n            glyphAriaLabel=\"Submit\"\r\n            [button]=\"true\"\r\n            (input)=\"onSearchInputChange($event)\"\r\n        >\r\n        </fd-input-group>\r\n        @if(suggestions.length){\r\n        <div class=\"tw-flex tw-gap-4 tw-overflow-x-auto suggestion-filters-cat tw-pb-4\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: { name: '\u0647\u0645\u0647', count: (suggestions | suggestionsCountFilter: 'all'), type: '' }\r\n                \"\r\n            ></ng-container>\r\n\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: { name: '\u0632\u06CC\u0631\u0633\u06CC\u0633\u062A\u0645', count: (suggestions | suggestionsCountFilter: 'subsystem'), type: '' }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u06AF\u0631\u0648\u0647 \u0646\u0648\u06CC\u06AF\u06CC\u062A\u0648\u0631',\r\n                        count: (suggestions | suggestionsCountFilter: 'navgroup'),\r\n                        type: ''\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u06AF\u0632\u0627\u0631\u0634\u0627\u062A',\r\n                        count: (suggestions | suggestionsCountFilter: 'report'),\r\n                        type: 'information'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u062F\u0633\u062A\u0648\u0631\u0627\u062A',\r\n                        count: (suggestions | suggestionsCountFilter: 'command'),\r\n                        type: 'success'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template #catTag let-name=\"name\" let-count=\"count\" let-type=\"type\">\r\n    @if(count && count!==' '){\r\n    <div fd-generic-tag [name]=\"name\" [value]=\"count\" (click)=\"selectedSuggestionFiltertype = name\" [type]=\"type\"></div>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative}:host fd-user-menu{background-color:transparent}:host fd-shellbar-actions.flat-buttons{flex-direction:row-reverse}:host.hide-user-menu fd-shellbar-actions ::ng-deep .fd-user-menu{display:none}:host ::ng-deep fd-shellbar-actions fd-avatar{background-color:transparent!important;color:var(--sapShell_InteractiveTextColor, #d1e8ff)}:host ::ng-deep .fd-shellbar--s .fd-shellbar__title{display:block;max-width:10rem;text-wrap:auto;font-size:.8rem}:host ::ng-deep fd-combobox .fd-input-group input{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}:host ::ng-deep fd-combobox .fd-input-group span{min-width:2rem;min-height:1.625rem}:host ::ng-deep .fd-shellbar__subtitle{font-size:1rem}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem;margin:0!important}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.hide-panel-header ::ng-deep .fd-panel__header{min-height:auto;height:auto}:host ::ng-deep .shellbar-command-action--image-glyph{gap:.375rem}:host ::ng-deep .shellbar-command-action--image-glyph ::ng-deep fd-icon{display:none}.shellbar-command-action__image{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}:host ::ng-deep .fd-shellbar{height:var(--shellbar-height)}:host ::ng-deep fd-shellbar.s .fd-shellbar__product{max-width:120px}:host ::ng-deep fd-shellbar.s .fd-shellbar--has-context-area{justify-content:center!important}:host ::ng-deep fd-shellbar.s .fd-shellbar--has-context-area .fd-shellbar__action--shrink button{color:var(--fdButtonIconColor, var(--sapShell_InteractiveTextColor))}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i4$1.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i6.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i6.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i6.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "component", type: i4.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i4.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i4.SubmenuComponent, selector: "fd-submenu", inputs: ["ariaLabel", "ariaLabelledby"], exportAs: ["fdSubmenu"] }, { kind: "component", type: i4.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i4.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i4.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i5$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i5$2.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i5$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i7$1.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: i11.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: i6$3.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "component", type: i13.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i13.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i14.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i14.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i14.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i15.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex", "showNavigationButton", "showBackButton", "navigationButtonLabel", "backButtonLabel"], outputs: ["navigationButtonClicked", "backButtonClicked"] }, { kind: "component", type: i15.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i15.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect", "assistiveTools", "assistiveToolsCallback"], outputs: ["searchOpen"] }, { kind: "component", type: i15.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i15.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "component", type: i15.ShellbarTitleComponent, selector: "fd-shellbar-title" }, { kind: "component", type: i15.ShellbarBrandingComponent, selector: "fd-shellbar-branding", inputs: ["interactiveBranding"] }, { kind: "component", type: i15.ShellbarContextAreaComponent, selector: "fd-shellbar-context-area", outputs: ["contentItemVisibilityChange"] }, { kind: "component", type: i15.ShellbarSeparatorComponent, selector: "fd-shellbar-separator" }, { kind: "directive", type: i15.ShellbarHidePriorityDirective, selector: "[fdShellbarHidePriority]", inputs: ["fdShellbarHidePriority"] }, { kind: "component", type: i16.GenericTagComponent, selector: "[fd-generic-tag]", inputs: ["class", "type", "name", "value", "ariaRoleDescription"] }, { kind: "component", type: i8$1.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: i18.UserMenuComponent, selector: "fd-user-menu", inputs: ["mobile"], outputs: ["isOpenChange"] }, { kind: "component", type: i18.UserMenuControlComponent, selector: "fd-user-menu-control", outputs: ["clicked"] }, { kind: "component", type: i18.UserMenuBodyComponent, selector: "fd-user-menu-body" }, { kind: "component", type: i18.UserMenuListComponent, selector: "fd-user-menu-list" }, { kind: "component", type: i18.UserMenuFooterComponent, selector: "fd-user-menu-footer" }, { kind: "directive", type: i18.UserMenuHeaderDirective, selector: "[fd-user-menu-header]" }, { kind: "directive", type: i18.UserMenuSublineDirective, selector: "[fd-user-menu-subline]", inputs: ["truncate"] }, { kind: "directive", type: i18.UserMenuUserNameDirective, selector: "[fd-user-menu-user-name]", inputs: ["truncate"] }, { kind: "directive", type: i18.UserMenuHeaderContainerDirective, selector: "[fd-user-menu-header-container]" }, { kind: "component", type: i18.UserMenuListItemComponent, selector: "[fd-user-menu-list-item]", inputs: ["uniqueId", "icon", "text", "textId", "hasSubmenu", "submenu", "selected"], outputs: ["keyDown", "isOpenChange", "showSubmenu", "updateTitle"] }, { kind: "directive", type: i5.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: i5.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i5.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i5.RouteFormChangeDirective, selector: "[routeFormChange]", inputs: ["handleBodyClick"], outputs: ["stateChanged"] }, { kind: "component", type: i3.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount", "notificationReport"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: SuggestionsFilterPipe, name: "suggestionsFilter" }, { kind: "pipe", type: SuggestionsCountFilterPipe, name: "suggestionsCountFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaShellbarComponent, isStandalone: false, selector: "bt-barsa-shellbar", inputs: { showSidebar: "showSidebar", multiLanguages: "multiLanguages", userLoggedIn: "userLoggedIn", settings: "settings", productMenuControl: "productMenuControl", dastoratSarasari: "dastoratSarasari", workflowMenuItems: "workflowMenuItems", groupedCommandMenus: "groupedCommandMenus", deviceSize: "deviceSize", cultures: "cultures", shellbarData: "shellbarData", notificationsUnreadCount: "notificationsUnreadCount", productMenuItems1: "productMenuItems1", bodyClick: "bodyClick", logo: "logo", actions: "actions", userMenu: "userMenu", footerButtons: "footerButtons", productSwitcher: "productSwitcher", subtitle: "subtitle", isMobile: "isMobile", hideShellbarActions: "hideShellbarActions", flatButtons: "flatButtons", isTablet: "isTablet", userInfo: "userInfo", isDesktop: "isDesktop", informativeText: "informativeText", informativeStatus: "informativeStatus", hideProductMenu: "hideProductMenu", enableSearch: "enableSearch", hideNotifications: "hideNotifications", isServiceDesk: "isServiceDesk", isOpenQuickAccess: "isOpenQuickAccess", sideMenuTemplate: "sideMenuTemplate", notificationReport: "notificationReport", profileDynamicCommand: "profileDynamicCommand", profileDynamicCommandText: "profileDynamicCommandText", profileDynamicCommandIcon: "profileDynamicCommandIcon", displayName: "displayName", hideBranding: "hideBranding", showSearchInSystem: "showSearchInSystem", rtl: "rtl", suggestions: "suggestions" }, outputs: { appTileGroupChange: "appTileGroupChange", searchItemClick: "searchItemClick", searchInput: "searchInput", isOpenQuickAccessChanged: "isOpenQuickAccessChanged", openNotificationPanel: "openNotificationPanel", openQuickAccessPanel: "openQuickAccessPanel", cultureChanged: "cultureChanged", notifiationActionClick: "notifiationActionClick" }, viewQueries: [{ propertyName: "searchDialogContent", first: true, predicate: ["searchContent"], descendants: true, read: TemplateRef }, { propertyName: "searchDialogSubHeader", first: true, predicate: ["searchSubHeader"], descendants: true, read: TemplateRef }, { propertyName: "shellbar", first: true, predicate: ShellbarComponent$1, descendants: true, static: true }, { propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-shellbar\r\n    [ngClass]=\"deviceSize\"\r\n    routeFormChange\r\n    (stateChanged)=\"onRouteFormStateChange()\"\r\n    [showNavigationButton]=\"sideMenuTemplate || showSidebar ? true : false\"\r\n    (navigationButtonClicked)=\"$event.stopPropagation(); isOpenQuickAccessChanged.emit(!isOpenQuickAccess)\"\r\n    [handleBodyClick]=\"true\"\r\n    [size]=\"deviceSize === 's' && userLoggedIn ? 'm' : deviceSize\"\r\n>\r\n    <fd-shellbar-branding [interactiveBranding]=\"true\" [style.display]=\"hideBranding ? 'none' : null\">\r\n        <fd-shellbar-logo>\r\n            <a\r\n                [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\r\n                href=\"/\"\r\n                class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced tw-bg-center !tw-bg-auto\"\r\n                [attr.aria-label]=\"subtitle | bbbTranslate\"\r\n            ></a>\r\n        </fd-shellbar-logo>\r\n        <fd-shellbar-title> {{ subtitle | bbbTranslate }} {{ showVersion ? appVersion : '' }}</fd-shellbar-title>\r\n    </fd-shellbar-branding>\r\n\r\n    <fd-shellbar-context-area>\r\n        <span\r\n            [class.hide]=\"!informativeText\"\r\n            fdShellbarHidePriority=\"1\"\r\n            fd-object-status\r\n            [status]=\"informativeStatus || 'informative'\"\r\n            [inverted]=\"true\"\r\n            [label]=\"informativeText\"\r\n        ></span>\r\n        <fd-product-switch\r\n            fdShellbarHidePriority=\"3\"\r\n            [class.hide]=\"!productSwitcher?.length\"\r\n            [restoreFocusOnClose]=\"false\"\r\n        >\r\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\r\n            </fd-product-switch-body>\r\n        </fd-product-switch>\r\n        <span\r\n            [class.hide]=\"!showSearchInSystem\"\r\n            fdShellbarHidePriority=\"4\"\r\n            class=\"fd-shellbar__button\"\r\n            fd-button\r\n            glyph=\"search\"\r\n            fdType=\"transparent\"\r\n            (click)=\"onOpenSearchDialog()\"\r\n        >\r\n        </span>\r\n        <fd-product-menu\r\n            fdShellbarHidePriority=\"2\"\r\n            [control]=\"productMenuControl\"\r\n            [closePopoverOnSelect]=\"true\"\r\n            [items]=\"productMenuItems1\"\r\n            [class.hide]=\"!productMenuItems1?.length\"\r\n        >\r\n        </fd-product-menu>\r\n        <fd-shellbar-separator fdshellbarhidepriority=\"5\" style=\"flex-shrink: 0\"></fd-shellbar-separator>\r\n        @for(dastor of dastoratSarasari; track dastor.label){ @if(dastor.children?.length){\r\n        <button\r\n            type=\"button\"\r\n            class=\"fd-shellbar__button\"\r\n            [fdShellbarHidePriority]=\"dastor.priority\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [glyph]=\"dastor.glyph\"\r\n            [label]=\"dastor.label | bbbTranslate\"\r\n            [fdMenuTrigger]=\"globalCommandMenu\"\r\n        ></button>\r\n        <fd-menu #globalCommandMenu>\r\n            @for(item of dastor.children; track item.key) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    globalSubmenuTemplate;\r\n                    context: { item: item, parentSubmenu: undefined, rootMenu: globalCommandMenu }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n            <ng-template\r\n                #globalSubmenuTemplate\r\n                let-item=\"item\"\r\n                let-parentSubmenu=\"parentSubmenu\"\r\n                let-rootMenu=\"rootMenu\"\r\n            >\r\n                <li\r\n                    fd-menu-item\r\n                    [submenu]=\"item.children?.length ? submenu : undefined\"\r\n                    [parentSubmenu]=\"parentSubmenu\"\r\n                >\r\n                    @if(item.children?.length){\r\n                    <div fd-menu-interactive>\r\n                        <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                        <fd-menu-addon [submenuIndicator]=\"true\"></fd-menu-addon>\r\n                    </div>\r\n                    } @else {\r\n                    <a\r\n                        fd-menu-interactive\r\n                        href=\"\"\r\n                        [class.shellbar-command-action--image-glyph]=\"item.useImageGlyph\"\r\n                        (click)=\"$event.preventDefault(); rootMenu.close(); item.callback?.()\"\r\n                    >\r\n                        @if(item.useImageGlyph){\r\n                        <img\r\n                            class=\"shellbar-command-action__image\"\r\n                            [src]=\"item.glyph\"\r\n                            [alt]=\"item.label | bbbTranslate\"\r\n                            loading=\"lazy\"\r\n                        />\r\n                        }\r\n                        <span fd-menu-title class=\"shellbar-command-action__label\">{{\r\n                            item.label | bbbTranslate\r\n                        }}</span>\r\n                    </a>\r\n                    }\r\n                </li>\r\n                <fd-submenu #submenu>\r\n                    @if(item.children?.length){ @for(subItem of item.children; track subItem.key) {\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            globalSubmenuTemplate;\r\n                            context: { item: subItem, parentSubmenu: submenu, rootMenu: rootMenu }\r\n                        \"\r\n                    ></ng-container>\r\n                    } }\r\n                </fd-submenu>\r\n            </ng-template>\r\n        </fd-menu>\r\n        } @else {\r\n        <span\r\n            [fdShellbarHidePriority]=\"dastor.priority\"\r\n            fd-button\r\n            [glyph]=\"dastor.glyph\"\r\n            class=\"fd-shellbar__button\"\r\n            [label]=\"dastor.useImageGlyph ? undefined : (dastor.label | bbbTranslate)\"\r\n            [class.shellbar-command-action--image-glyph]=\"dastor.useImageGlyph\"\r\n            (click)=\"dastor.callback?.()\"\r\n        >\r\n            @if(dastor.useImageGlyph){\r\n            <img\r\n                class=\"shellbar-command-action__image\"\r\n                [src]=\"dastor.glyph\"\r\n                [alt]=\"dastor.label | bbbTranslate\"\r\n                loading=\"lazy\"\r\n            />\r\n            <span class=\"shellbar-command-action__label\">{{ dastor.label | bbbTranslate }}</span>\r\n            }\r\n        </span>\r\n        } } @if(workflowMenuItems.length){\r\n        <button\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Workflow' | bbbTranslate\"\r\n            [fdMenu]=\"true\"\r\n            [fdMenuTrigger]=\"workflowMenu\"\r\n        ></button>\r\n        <fd-menu #workflowMenu>\r\n            @for(item of workflowMenuItems; track item.key) {\r\n            <li fd-menu-item>\r\n                <a\r\n                    fd-menu-interactive\r\n                    href=\"\"\r\n                    (click)=\"$event.preventDefault(); workflowMenu.close(); item.callback?.()\"\r\n                >\r\n                    <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                </a>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n        } @for(group of groupedCommandMenus; track group.Caption){\r\n        <button fd-button [label]=\"group.Caption | bbbTranslate\" [fdMenu]=\"true\" [fdMenuTrigger]=\"groupMenu\"></button>\r\n        <fd-menu #groupMenu>\r\n            @for(item of group.Commands; track item.key) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    groupSubmenuTemplate;\r\n                    context: { item: item, parentSubmenu: undefined, rootMenu: groupMenu }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n            <ng-template\r\n                #groupSubmenuTemplate\r\n                let-item=\"item\"\r\n                let-parentSubmenu=\"parentSubmenu\"\r\n                let-rootMenu=\"rootMenu\"\r\n            >\r\n                <li\r\n                    fd-menu-item\r\n                    [submenu]=\"item.children?.length ? submenu : undefined\"\r\n                    [parentSubmenu]=\"parentSubmenu\"\r\n                >\r\n                    @if(item.children?.length){\r\n                    <div fd-menu-interactive>\r\n                        <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                        <fd-menu-addon [submenuIndicator]=\"true\"></fd-menu-addon>\r\n                    </div>\r\n                    } @else {\r\n                    <a\r\n                        fd-menu-interactive\r\n                        class=\"tw-gap-2\"\r\n                        [class.shellbar-command-action--image-glyph]=\"item.useImageGlyph\"\r\n                        (click)=\"$event.preventDefault(); rootMenu.close(); item.callback?.()\"\r\n                    >\r\n                        @if(item.useImageGlyph){\r\n                        <img\r\n                            class=\"shellbar-command-action__image\"\r\n                            [src]=\"item.glyph\"\r\n                            [alt]=\"item.label | bbbTranslate\"\r\n                            loading=\"lazy\"\r\n                        />\r\n                        }\r\n                        <span fd-menu-title class=\"shellbar-command-action__label\">{{\r\n                            item.label | bbbTranslate\r\n                        }}</span>\r\n                    </a>\r\n                    }\r\n                </li>\r\n                <fd-submenu #submenu>\r\n                    @if(item.children?.length){ @for(subItem of item.children; track subItem.key) {\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            groupSubmenuTemplate;\r\n                            context: { item: subItem, parentSubmenu: submenu, rootMenu: rootMenu }\r\n                        \"\r\n                    ></ng-container>\r\n                    } }\r\n                </fd-submenu>\r\n            </ng-template>\r\n        </fd-menu>\r\n        }\r\n    </fd-shellbar-context-area>\r\n\r\n    @if(inputEnableSearch()){\r\n    <fdp-search-field\r\n        [placeholder]=\"'Search' | bbbTranslate\"\r\n        (inputChange)=\"onSearchInputChange($event)\"\r\n        [suggestions]=\"suggestions\"\r\n        (searchSubmit)=\"onSearchSubmit($event)\"\r\n    ></fdp-search-field>\r\n    }\r\n    <fd-shellbar-actions\r\n        #shellbarActions\r\n        (searchOpen)=\"onSearchOpen($event)\"\r\n        [class.flat-buttons]=\"flatButtons?.length && !showSearch()\"\r\n    >\r\n        <fd-user-menu>\r\n            <fd-user-menu-control>\r\n                <fd-avatar size=\"xs\" [circle]=\"true\" [attr.ariaLabel]=\"displayName\" [image]=\"userInfo?.Url\"></fd-avatar>\r\n            </fd-user-menu-control>\r\n            <fd-user-menu-body>\r\n                <div fd-user-menu-header>\r\n                    <fd-avatar\r\n                        [circle]=\"true\"\r\n                        [size]=\"deviceSize\"\r\n                        [label]=\"userInfo?.Url ? '' : displayName\"\r\n                        zoomGlyph=\"\"\r\n                        title=\"Edit avatar\"\r\n                        [image]=\"userInfo?.Url\"\r\n                    ></fd-avatar>\r\n                    <div fd-user-menu-header-container>\r\n                        <div fd-user-menu-user-name>{{ displayName }}</div>\r\n                        @for(item of userInfo?.Sublines;track item){\r\n                        <div fd-user-menu-subline>{{ item }}</div>\r\n                        }\r\n                    </div>\r\n                    @if(profileDynamicCommandText){\r\n                    <button\r\n                        fd-button\r\n                        [label]=\"profileDynamicCommandText || 'Edit' | bbbTranslate\"\r\n                        [glyph]=\"profileDynamicCommandIcon || 'edit'\"\r\n                        [attr.ariaLabel]=\"'\u0648\u06CC\u0631\u0627\u06CC\u0634 \u067E\u0631\u0648\u0641\u0627\u06CC\u0644'\"\r\n                        [dynCommand]=\"profileDynamicCommand\"\r\n                        bodyClick\r\n                    ></button>\r\n                    }\r\n                </div>\r\n                <div fd-user-menu-content-container>\r\n                    @if(userMenu?.length){\r\n                    <fd-panel transparent noRadius [fixed]=\"true\" class=\"hide-panel-header\"> </fd-panel>}\r\n\r\n                    <fd-user-menu-list>\r\n                        @for(item of userMenu;track item.text){\r\n                        <li fd-user-menu-list-item [icon]=\"item.icon\" [text]=\"item.text\" (click)=\"item.callback()\"></li>\r\n                        }\r\n                    </fd-user-menu-list>\r\n                </div>\r\n            </fd-user-menu-body>\r\n\r\n            <fd-user-menu-footer>\r\n                <div fd-bar barDesign=\"footer\">\r\n                    <div fd-bar-right>\r\n                        @for(item of footerButtons;track item.text){\r\n                        <button\r\n                            fd-button\r\n                            [label]=\"item.text\"\r\n                            fdType=\"transparent\"\r\n                            [glyph]=\"item.icon\"\r\n                            [attr.ariaLabel]=\"item.text\"\r\n                            (click)=\"item.callback()\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-user-menu-footer>\r\n        </fd-user-menu>\r\n        @for (action of actions; track action) {            \r\n        <fd-shellbar-action\r\n            [glyph]=\"action.glyph\"\r\n            [callback]=\"action.callback\"\r\n            [label]=\"action.label\"\r\n            [notificationLabel]=\"action.notificationLabel\"\r\n            [notificationCount]=\"action.notificationCount\"\r\n        >\r\n        </fd-shellbar-action>\r\n\r\n        } @if (!settings?.HideLanguage && multiLanguages && userLoggedIn) {\r\n        <button\r\n            class=\"fd-shellbar__button\"\r\n            fd-button\r\n            glyph=\"world\"\r\n            fdType=\"transparent\"\r\n            [fdMenuTrigger]=\"menu\"\r\n        ></button>\r\n        } @if (deviceSize !== 's' && userLoggedIn && !hideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notification'\"\r\n            [notificationCount]=\"notificationsUnreadCount\"\r\n            [notificationLabel]=\"'Notification Label'\"\r\n            [callback]=\"onOpenNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if (deviceSize === 's' && userLoggedIn && !hideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notifications' | bbbTranslate\"\r\n            [notificationCount]=\"notificationsUnreadCount\"\r\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\r\n            [callback]=\"onBellNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if(flatButtons?.length){\r\n        <div class=\"tw-flex tw-gap-1\">\r\n            @if (!settings?.HideLanguage && multiLanguages){\r\n            <button\r\n                class=\"fd-shellbar__button\"\r\n                fd-button\r\n                glyph=\"world\"\r\n                fdType=\"transparent\"\r\n                [fdMenuTrigger]=\"menu\"\r\n            ></button>\r\n            } @for(btn of flatButtons;track btn){\r\n            <button\r\n                fd-button\r\n                [label]=\"btn.text\"\r\n                [glyph]=\"btn.text === ('Login' | bbbTranslate) ? 'person-placeholder' : null\"\r\n                fdType=\"emphasized\"\r\n                (click)=\"btn.callback()\"\r\n            ></button>\r\n            }\r\n        </div>\r\n        }\r\n    </fd-shellbar-actions>\r\n    <fd-popover\r\n        [(isOpen)]=\"isOpenNotificatoin\"\r\n        [noArrow]=\"true\"\r\n        placement=\"top-end\"\r\n        title=\"Notification Popover\"\r\n        [appendTo]=\"el\"\r\n        [mobile]=\"false\"\r\n        #popoverComponent\r\n    >\r\n        <fd-popover-control>\r\n            <!-- <fd-shellbar-action\r\n                    [glyph]=\"'bell'\"\r\n                    [label]=\"'Notification'\"\r\n                    [notificationCount]=\"notificationsUnreadCount\"\r\n                    [notificationLabel]=\"'Notification Label'\"\r\n                    [callback]=\"onOpenNotification\"\r\n                >\r\n                </fd-shellbar-action> -->\r\n        </fd-popover-control>\r\n        <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\r\n            @if(isOpenNotificatoin){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsUnreadCount }\"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</fd-shellbar>\r\n\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<div\r\n    *ngIf=\"sideMenuTemplate\"\r\n    class=\"sidemenu-h tw-fixed tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\r\n    [class.tw-w-screen]=\"isMobile\"\r\n    [class.-tw-right-full]=\"isMobile\"\r\n    [class.tw-w-96]=\"!isMobile\"\r\n    [class.-tw-right-96]=\"!isMobile && rtl\"\r\n    [class.!tw-right-0]=\"rtl && isOpenQuickAccess\"\r\n    [class.-tw-left-96]=\"!isMobile && !rtl\"\r\n    [class.!tw-left-0]=\"!rtl && isOpenQuickAccess\"\r\n    (click)=\"$event.stopPropagation()\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></ng-container>\r\n</div>\r\n\r\n<fd-menu #menu>\r\n    <ul fd-list>\r\n        @for (culture of cultures | keyvalue; track culture) {\r\n        <li fd-list-item>\r\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\r\n                <span fd-list-title class=\"tw-flex tw-items-center tw-gap-1\">\r\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" loading=\"lazy\" />\r\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\r\n                </span>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</fd-menu>\r\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\r\n    <bt-notification-group\r\n        [notificationReport]=\"notificationReport\"\r\n        [notificationCount]=\"notificationCount\"\r\n        (actionClick)=\"popoverComponent.close()\"\r\n        [deviceSize]=\"deviceSize\"\r\n    ></bt-notification-group>\r\n</ng-template>\r\n\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body class=\"mobile\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsUnreadCount }\"\r\n            ></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n<ng-template #searchContent>\r\n    <ul fd-list [byline]=\"true\">\r\n        @for (item of (suggestions | suggestionsFilter:selectedSuggestionFiltertype) ; track item.data.path) {\r\n        <li\r\n            fd-list-item\r\n            [interactive]=\"true\"\r\n            (click)=\"onSearchItemClick(item)\"\r\n            class=\"!tw-ps-1\"\r\n            [class.!tw-bg-blue-600]=\"item.data.source === 'Report'\"\r\n            [class.!tw-bg-green-600]=\"item.data.source === 'Command'\"\r\n            [class.!tw-bg-gray-600]=\"item.data.source !== 'Command' && item.data.source !== 'Report'\"\r\n        >\r\n            <a fd-list-link [attr.href]=\"!item.data.url ? null : item.data.url\" (click)=\"onSearchLink(item, $event)\">\r\n                <div fd-list-content>\r\n                    <div fd-list-title>{{ item.value }}</div>\r\n                    <div fd-list-byline>{{ item.data.path }}</div>\r\n                </div>\r\n                <span fd-list-secondary>\r\n                    @if(item.data.canPin){\r\n                    <button\r\n                        class=\"!tw-m-[0.1rem]\"\r\n                        [ariaLabel]=\"'AddToFavorite' | bbbTranslate\"\r\n                        [title]=\"'Add To Favorite' | bbbTranslate\"\r\n                        fd-button\r\n                        glyph=\"shortcut\"\r\n                        (click)=\"oFavoriteLink(item, $event)\"\r\n                    ></button>\r\n                    }\r\n                </span>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n<ng-template #searchSubHeader>\r\n    <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n        <fd-input-group\r\n            glyph=\"search\"\r\n            fdkInitialFocus\r\n            glyphAriaLabel=\"Submit\"\r\n            [button]=\"true\"\r\n            (input)=\"onSearchInputChange($event)\"\r\n        >\r\n        </fd-input-group>\r\n        @if(suggestions.length){\r\n        <div class=\"tw-flex tw-gap-4 tw-overflow-x-auto suggestion-filters-cat tw-pb-4\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: { name: '\u0647\u0645\u0647', count: (suggestions | suggestionsCountFilter: 'all'), type: '' }\r\n                \"\r\n            ></ng-container>\r\n\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: { name: '\u0632\u06CC\u0631\u0633\u06CC\u0633\u062A\u0645', count: (suggestions | suggestionsCountFilter: 'subsystem'), type: '' }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u06AF\u0631\u0648\u0647 \u0646\u0648\u06CC\u06AF\u06CC\u062A\u0648\u0631',\r\n                        count: (suggestions | suggestionsCountFilter: 'navgroup'),\r\n                        type: ''\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u06AF\u0632\u0627\u0631\u0634\u0627\u062A',\r\n                        count: (suggestions | suggestionsCountFilter: 'report'),\r\n                        type: 'information'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u062F\u0633\u062A\u0648\u0631\u0627\u062A',\r\n                        count: (suggestions | suggestionsCountFilter: 'command'),\r\n                        type: 'success'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template #catTag let-name=\"name\" let-count=\"count\" let-type=\"type\">\r\n    @if(count && count!==' '){\r\n    <div fd-generic-tag [name]=\"name\" [value]=\"count\" (click)=\"selectedSuggestionFiltertype = name\" [type]=\"type\"></div>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative}:host fd-user-menu{background-color:transparent}:host fd-shellbar-actions.flat-buttons{flex-direction:row-reverse}:host.hide-user-menu fd-shellbar-actions ::ng-deep .fd-user-menu{display:none}:host ::ng-deep fd-shellbar-actions fd-avatar{background-color:transparent!important;color:var(--sapShell_InteractiveTextColor, #d1e8ff)}:host ::ng-deep .fd-shellbar--s .fd-shellbar__title{display:block;max-width:10rem;text-wrap:auto;font-size:.8rem}:host ::ng-deep fd-combobox .fd-input-group input{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}:host ::ng-deep fd-combobox .fd-input-group span{min-width:2rem;min-height:1.625rem}:host ::ng-deep .fd-shellbar__subtitle{font-size:1rem}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem;margin:0!important}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.hide-panel-header ::ng-deep .fd-panel__header{min-height:auto;height:auto}:host ::ng-deep .shellbar-command-action--image-glyph{gap:.375rem}:host ::ng-deep .shellbar-command-action--image-glyph ::ng-deep fd-icon{display:none}.shellbar-command-action__image{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}:host ::ng-deep .fd-shellbar{height:var(--shellbar-height)}:host ::ng-deep fd-shellbar.s .fd-shellbar__product{max-width:120px}:host ::ng-deep fd-shellbar.s .fd-shellbar--has-context-area{justify-content:center!important}:host ::ng-deep fd-shellbar.s .fd-shellbar--has-context-area .fd-shellbar__action--shrink button{color:var(--fdButtonIconColor, var(--sapShell_InteractiveTextColor))}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i4$1.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i6.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i6.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i6.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "component", type: i4.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i4.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i4.SubmenuComponent, selector: "fd-submenu", inputs: ["ariaLabel", "ariaLabelledby"], exportAs: ["fdSubmenu"] }, { kind: "component", type: i4.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i4.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i4.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i5$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i5$2.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i5$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i7$1.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: i11.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: i6$3.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "component", type: i13.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i13.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i14.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i14.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i14.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i15.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex", "showNavigationButton", "showBackButton", "navigationButtonLabel", "backButtonLabel"], outputs: ["navigationButtonClicked", "backButtonClicked"] }, { kind: "component", type: i15.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i15.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect", "assistiveTools", "assistiveToolsCallback"], outputs: ["searchOpen"] }, { kind: "component", type: i15.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i15.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "component", type: i15.ShellbarTitleComponent, selector: "fd-shellbar-title" }, { kind: "component", type: i15.ShellbarBrandingComponent, selector: "fd-shellbar-branding", inputs: ["interactiveBranding"] }, { kind: "component", type: i15.ShellbarContextAreaComponent, selector: "fd-shellbar-context-area", outputs: ["contentItemVisibilityChange"] }, { kind: "component", type: i15.ShellbarSeparatorComponent, selector: "fd-shellbar-separator" }, { kind: "directive", type: i15.ShellbarHidePriorityDirective, selector: "[fdShellbarHidePriority]", inputs: ["fdShellbarHidePriority"] }, { kind: "component", type: i16.GenericTagComponent, selector: "[fd-generic-tag]", inputs: ["class", "type", "name", "value", "ariaRoleDescription"] }, { kind: "component", type: i8$1.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: i18.UserMenuComponent, selector: "fd-user-menu", inputs: ["mobile"], outputs: ["isOpenChange"] }, { kind: "component", type: i18.UserMenuControlComponent, selector: "fd-user-menu-control", outputs: ["clicked"] }, { kind: "component", type: i18.UserMenuBodyComponent, selector: "fd-user-menu-body" }, { kind: "component", type: i18.UserMenuListComponent, selector: "fd-user-menu-list" }, { kind: "component", type: i18.UserMenuFooterComponent, selector: "fd-user-menu-footer" }, { kind: "directive", type: i18.UserMenuHeaderDirective, selector: "[fd-user-menu-header]" }, { kind: "directive", type: i18.UserMenuSublineDirective, selector: "[fd-user-menu-subline]", inputs: ["truncate"] }, { kind: "directive", type: i18.UserMenuUserNameDirective, selector: "[fd-user-menu-user-name]", inputs: ["truncate"] }, { kind: "directive", type: i18.UserMenuHeaderContainerDirective, selector: "[fd-user-menu-header-container]" }, { kind: "component", type: i18.UserMenuListItemComponent, selector: "[fd-user-menu-list-item]", inputs: ["uniqueId", "icon", "text", "textId", "hasSubmenu", "submenu", "selected"], outputs: ["keyDown", "isOpenChange", "showSubmenu", "updateTitle"] }, { kind: "directive", type: i5.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: i5.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i5.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i5.RouteFormChangeDirective, selector: "[routeFormChange]", inputs: ["handleBodyClick"], outputs: ["stateChanged"] }, { kind: "component", type: i3.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount", "notificationReport"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: SuggestionsFilterPipe, name: "suggestionsFilter" }, { kind: "pipe", type: SuggestionsCountFilterPipe, name: "suggestionsCountFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaShellbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-barsa-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-shellbar\r\n    [ngClass]=\"deviceSize\"\r\n    routeFormChange\r\n    (stateChanged)=\"onRouteFormStateChange()\"\r\n    [showNavigationButton]=\"sideMenuTemplate || showSidebar ? true : false\"\r\n    (navigationButtonClicked)=\"$event.stopPropagation(); isOpenQuickAccessChanged.emit(!isOpenQuickAccess)\"\r\n    [handleBodyClick]=\"true\"\r\n    [size]=\"deviceSize === 's' && userLoggedIn ? 'm' : deviceSize\"\r\n>\r\n    <fd-shellbar-branding [interactiveBranding]=\"true\" [style.display]=\"hideBranding ? 'none' : null\">\r\n        <fd-shellbar-logo>\r\n            <a\r\n                [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\r\n                href=\"/\"\r\n                class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced tw-bg-center !tw-bg-auto\"\r\n                [attr.aria-label]=\"subtitle | bbbTranslate\"\r\n            ></a>\r\n        </fd-shellbar-logo>\r\n        <fd-shellbar-title> {{ subtitle | bbbTranslate }} {{ showVersion ? appVersion : '' }}</fd-shellbar-title>\r\n    </fd-shellbar-branding>\r\n\r\n    <fd-shellbar-context-area>       \r\n        <span\r\n            [class.hide]=\"!informativeText\"\r\n            fdShellbarHidePriority=\"1\"\r\n            fd-object-status\r\n            [status]=\"informativeStatus || 'informative'\"\r\n            [inverted]=\"true\"\r\n            [label]=\"informativeText\"\r\n        ></span>\r\n        <fd-product-switch\r\n            fdShellbarHidePriority=\"3\"\r\n            [class.hide]=\"!productSwitcher?.length\"\r\n            [restoreFocusOnClose]=\"false\"\r\n        >\r\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\r\n            </fd-product-switch-body>\r\n        </fd-product-switch>\r\n        <span\r\n            [class.hide]=\"!showSearchInSystem\"\r\n            fdShellbarHidePriority=\"4\"\r\n            class=\"fd-shellbar__button\"\r\n            fd-button\r\n            glyph=\"search\"\r\n            fdType=\"transparent\"\r\n            (click)=\"onOpenSearchDialog()\"\r\n        >\r\n        </span>\r\n        <fd-product-menu\r\n            fdShellbarHidePriority=\"2\"\r\n            [control]=\"productMenuControl\"\r\n            [closePopoverOnSelect]=\"true\"\r\n            [items]=\"productMenuItems1\"\r\n            [class.hide]=\"!productMenuItems1?.length\"            \r\n        >\r\n        </fd-product-menu>\r\n        <fd-shellbar-separator fdshellbarhidepriority=\"5\"  style=\"flex-shrink: 0;\"></fd-shellbar-separator>\r\n        @for(dastor of dastoratSarasari; track dastor.label){\r\n            @if(dastor.children?.length){\r\n            <button\r\n                type=\"button\"\r\n                class=\"fd-shellbar__button\"\r\n                [fdShellbarHidePriority]=\"dastor.priority\"\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [glyph]=\"dastor.glyph\"\r\n                [label]=\"dastor.label | bbbTranslate\"\r\n                [fdMenuTrigger]=\"globalCommandMenu\"\r\n        \r\n                >                \r\n        </button>\r\n            <fd-menu #globalCommandMenu>\r\n                @for(item of dastor.children; track item.key) {\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        globalSubmenuTemplate;\r\n                        context: { item: item, parentSubmenu: undefined, rootMenu: globalCommandMenu }\r\n                    \"\r\n                ></ng-container>\r\n                }\r\n                <ng-template #globalSubmenuTemplate let-item=\"item\" let-parentSubmenu=\"parentSubmenu\" let-rootMenu=\"rootMenu\">\r\n                    <li fd-menu-item [submenu]=\"item.children?.length ? submenu : undefined\" [parentSubmenu]=\"parentSubmenu\">\r\n                        @if(item.children?.length){\r\n                        <div fd-menu-interactive>\r\n                            <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                            <fd-menu-addon [submenuIndicator]=\"true\"></fd-menu-addon>\r\n                        </div>\r\n                        } @else {\r\n                        <a\r\n                            fd-menu-interactive\r\n                            href=\"\"\r\n                            [class.shellbar-command-action--image-glyph]=\"item.useImageGlyph\"\r\n                            (click)=\"$event.preventDefault(); rootMenu.close(); item.callback?.()\"\r\n                        >\r\n                            @if(item.useImageGlyph){\r\n                            <img\r\n                                class=\"shellbar-command-action__image\"\r\n                                [src]=\"item.glyph\"\r\n                                [alt]=\"item.label | bbbTranslate\"\r\n                                loading=\"lazy\"\r\n                            />\r\n                            }\r\n                            <span fd-menu-title class=\"shellbar-command-action__label\">{{ item.label | bbbTranslate }}</span>\r\n                        </a>\r\n                        }\r\n                    </li>\r\n                    <fd-submenu #submenu>\r\n                        @if(item.children?.length){\r\n                        @for(subItem of item.children; track subItem.key) {\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                globalSubmenuTemplate;\r\n                                context: { item: subItem, parentSubmenu: submenu, rootMenu: rootMenu }\r\n                            \"\r\n                        ></ng-container>\r\n                        }\r\n                        }\r\n                    </fd-submenu>\r\n                </ng-template>\r\n            </fd-menu>\r\n            } @else {\r\n            <span                                \r\n                [fdShellbarHidePriority]=\"dastor.priority\"\r\n                fd-button\r\n                [glyph]=\"dastor.glyph\"\r\n                class=\"fd-shellbar__button\"\r\n                [label]=\"dastor.useImageGlyph ? undefined : (dastor.label | bbbTranslate)\"\r\n                [class.shellbar-command-action--image-glyph]=\"dastor.useImageGlyph\"\r\n                (click)=\"dastor.callback?.()\"\r\n            >\r\n                @if(dastor.useImageGlyph){\r\n                <img\r\n                    class=\"shellbar-command-action__image\"\r\n                    [src]=\"dastor.glyph\"\r\n                    [alt]=\"dastor.label | bbbTranslate\"\r\n                    loading=\"lazy\"\r\n                />\r\n                <span class=\"shellbar-command-action__label\">{{ dastor.label | bbbTranslate }}</span>\r\n                }\r\n            </span>\r\n            }\r\n        }\r\n\r\n\r\n        @if(workflowMenuItems.length){\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [label]=\"'Workflow' | bbbTranslate\"\r\n                [fdMenu]=\"true\"\r\n                [fdMenuTrigger]=\"workflowMenu\"\r\n            ></button>\r\n            <fd-menu #workflowMenu>\r\n                @for(item of workflowMenuItems; track item.key) {\r\n                <li fd-menu-item>\r\n                    <a fd-menu-interactive href=\"\" (click)=\"$event.preventDefault(); workflowMenu.close(); item.callback?.()\">\r\n                        <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </fd-menu>\r\n        }\r\n\r\n        @for(group of groupedCommandMenus; track group.Caption){\r\n            <button                                \r\n                fd-button                \r\n                [label]=\"group.Caption | bbbTranslate\"\r\n                [fdMenu]=\"true\"\r\n                [fdMenuTrigger]=\"groupMenu\"\r\n            ></button>\r\n            <fd-menu #groupMenu>\r\n                @for(item of group.Commands; track item.key) {\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        groupSubmenuTemplate;\r\n                        context: { item: item, parentSubmenu: undefined, rootMenu: groupMenu }\r\n                    \"\r\n                ></ng-container>\r\n                }\r\n                <ng-template #groupSubmenuTemplate let-item=\"item\" let-parentSubmenu=\"parentSubmenu\" let-rootMenu=\"rootMenu\">\r\n                    <li fd-menu-item [submenu]=\"item.children?.length ? submenu : undefined\" [parentSubmenu]=\"parentSubmenu\">\r\n                        @if(item.children?.length){\r\n                        <div fd-menu-interactive>\r\n                            <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                            <fd-menu-addon [submenuIndicator]=\"true\"></fd-menu-addon>\r\n                        </div>\r\n                        } @else {\r\n                        <a\r\n                            fd-menu-interactive                            \r\n                            class=\"tw-gap-2\"\r\n                            [class.shellbar-command-action--image-glyph]=\"item.useImageGlyph\"\r\n                            (click)=\"$event.preventDefault(); rootMenu.close(); item.callback?.()\"\r\n                        >\r\n                            @if(item.useImageGlyph){\r\n                            <img\r\n                                class=\"shellbar-command-action__image\"\r\n                                [src]=\"item.glyph\"\r\n                                [alt]=\"item.label | bbbTranslate\"\r\n                                loading=\"lazy\"\r\n                            />\r\n                            }\r\n                            <span fd-menu-title class=\"shellbar-command-action__label\">{{ item.label | bbbTranslate }}</span>\r\n                        </a>\r\n                        }\r\n                    </li>\r\n                    <fd-submenu #submenu>\r\n                        @if(item.children?.length){\r\n                        @for(subItem of item.children; track subItem.key) {\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                groupSubmenuTemplate;\r\n                                context: { item: subItem, parentSubmenu: submenu, rootMenu: rootMenu }\r\n                            \"\r\n                        ></ng-container>\r\n                        }\r\n                        }\r\n                    </fd-submenu>\r\n                </ng-template>\r\n            </fd-menu>\r\n        }\r\n    </fd-shellbar-context-area>\r\n\r\n    @if(inputEnableSearch()){\r\n    <fdp-search-field\r\n        [placeholder]=\"'Search' | bbbTranslate\"\r\n        (inputChange)=\"onSearchInputChange($event)\"\r\n        [suggestions]=\"suggestions\"\r\n        (searchSubmit)=\"onSearchSubmit($event)\"\r\n    ></fdp-search-field>\r\n    }\r\n    <fd-shellbar-actions\r\n        #shellbarActions\r\n        (searchOpen)=\"onSearchOpen($event)\"\r\n        [class.flat-buttons]=\"flatButtons?.length && !showSearch()\"\r\n    >\r\n        <fd-user-menu>\r\n            <fd-user-menu-control>\r\n                <fd-avatar size=\"xs\" [circle]=\"true\" [attr.ariaLabel]=\"displayName\" [image]=\"userInfo?.Url\"></fd-avatar>\r\n            </fd-user-menu-control>\r\n            <fd-user-menu-body>\r\n                <div fd-user-menu-header>\r\n                    <fd-avatar\r\n                        [circle]=\"true\"\r\n                        [size]=\"deviceSize\"\r\n                        [label]=\"userInfo?.Url ? '' : displayName\"\r\n                        zoomGlyph=\"\"\r\n                        title=\"Edit avatar\"\r\n                        [image]=\"userInfo?.Url\"\r\n                    ></fd-avatar>\r\n                    <div fd-user-menu-header-container>\r\n                        <div fd-user-menu-user-name>{{ displayName }}</div>\r\n                        @for(item of userInfo?.Sublines;track item){\r\n                        <div fd-user-menu-subline>{{ item }}</div>\r\n                        }\r\n                    </div>\r\n                    @if(profileDynamicCommandText){\r\n                    <button\r\n                        fd-button\r\n                        [label]=\"profileDynamicCommandText || 'Edit' | bbbTranslate\"\r\n                        [glyph]=\"profileDynamicCommandIcon || 'edit'\"\r\n                        [attr.ariaLabel]=\"'\u0648\u06CC\u0631\u0627\u06CC\u0634 \u067E\u0631\u0648\u0641\u0627\u06CC\u0644'\"\r\n                        [dynCommand]=\"profileDynamicCommand\"\r\n                        bodyClick\r\n                    ></button>\r\n                    }\r\n                </div>\r\n                <div fd-user-menu-content-container>\r\n                    @if(userMenu?.length){\r\n                    <fd-panel transparent noRadius [fixed]=\"true\" class=\"hide-panel-header\"> </fd-panel>}\r\n\r\n                    <fd-user-menu-list>\r\n                        @for(item of userMenu;track item.text){\r\n                        <li fd-user-menu-list-item [icon]=\"item.icon\" [text]=\"item.text\" (click)=\"item.callback()\"></li>\r\n                        }\r\n                    </fd-user-menu-list>\r\n                </div>\r\n            </fd-user-menu-body>\r\n\r\n            <fd-user-menu-footer>\r\n                <div fd-bar barDesign=\"footer\">\r\n                    <div fd-bar-right>\r\n                        @for(item of footerButtons;track item.text){\r\n                        <button\r\n                            fd-button\r\n                            [label]=\"item.text\"\r\n                            fdType=\"transparent\"\r\n                            [glyph]=\"item.icon\"\r\n                            [attr.ariaLabel]=\"item.text\"\r\n                            (click)=\"item.callback()\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-user-menu-footer>\r\n        </fd-user-menu>\r\n        @for (action of actions; track action) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"action.Icon\"\r\n            [callback]=\"action.Callback\"\r\n            [label]=\"action.Label\"\r\n            [notificationLabel]=\"action.label\"\r\n        >\r\n        </fd-shellbar-action>\r\n\r\n        } @if (!settings?.HideLanguage && multiLanguages && userLoggedIn) {\r\n        <button\r\n            class=\"fd-shellbar__button\"\r\n            fd-button\r\n            glyph=\"world\"\r\n            fdType=\"transparent\"\r\n            [fdMenuTrigger]=\"menu\"\r\n        ></button>\r\n        } @if (deviceSize !== 's' && userLoggedIn && !hideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notification'\"\r\n            [notificationCount]=\"notificationsUnreadCount\"\r\n            [notificationLabel]=\"'Notification Label'\"\r\n            [callback]=\"onOpenNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if (deviceSize === 's' && userLoggedIn && !hideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notifications' | bbbTranslate\"\r\n            [notificationCount]=\"notificationsUnreadCount\"\r\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\r\n            [callback]=\"onBellNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if(flatButtons?.length){\r\n        <div class=\"tw-flex tw-gap-1\">\r\n            @if (!settings?.HideLanguage && multiLanguages){\r\n            <button\r\n                class=\"fd-shellbar__button\"\r\n                fd-button\r\n                glyph=\"world\"\r\n                fdType=\"transparent\"\r\n                [fdMenuTrigger]=\"menu\"\r\n            ></button>\r\n            } @for(btn of flatButtons;track btn){\r\n            <button\r\n                fd-button\r\n                [label]=\"btn.text\"\r\n                [glyph]=\"btn.text === ('Login' | bbbTranslate) ? 'person-placeholder' : null\"\r\n                fdType=\"emphasized\"\r\n                (click)=\"btn.callback()\"\r\n            ></button>\r\n            }\r\n        </div>\r\n        }\r\n    </fd-shellbar-actions>\r\n    <fd-popover\r\n        [(isOpen)]=\"isOpenNotificatoin\"\r\n        [noArrow]=\"true\"\r\n        placement=\"top-end\"\r\n        title=\"Notification Popover\"\r\n        [appendTo]=\"el\"\r\n        [mobile]=\"false\"\r\n        #popoverComponent\r\n    >\r\n        <fd-popover-control>\r\n            <!-- <fd-shellbar-action\r\n                    [glyph]=\"'bell'\"\r\n                    [label]=\"'Notification'\"\r\n                    [notificationCount]=\"notificationsUnreadCount\"\r\n                    [notificationLabel]=\"'Notification Label'\"\r\n                    [callback]=\"onOpenNotification\"\r\n                >\r\n                </fd-shellbar-action> -->\r\n        </fd-popover-control>\r\n        <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\r\n            @if(isOpenNotificatoin){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsUnreadCount }\"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</fd-shellbar>\r\n\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<div\r\n    *ngIf=\"sideMenuTemplate\"\r\n    class=\"sidemenu-h tw-fixed tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\r\n    [class.tw-w-screen]=\"isMobile\"\r\n    [class.-tw-right-full]=\"isMobile\"\r\n    [class.tw-w-96]=\"!isMobile\"\r\n    [class.-tw-right-96]=\"!isMobile && rtl\"\r\n    [class.!tw-right-0]=\"rtl && isOpenQuickAccess\"\r\n    [class.-tw-left-96]=\"!isMobile && !rtl\"\r\n    [class.!tw-left-0]=\"!rtl && isOpenQuickAccess\"\r\n    (click)=\"$event.stopPropagation()\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></ng-container>\r\n</div>\r\n\r\n<fd-menu #menu>\r\n    <ul fd-list>\r\n        @for (culture of cultures | keyvalue; track culture) {\r\n        <li fd-list-item>\r\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\r\n                <span fd-list-title class=\"tw-flex tw-items-center tw-gap-1\">\r\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" loading=\"lazy\" />\r\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\r\n                </span>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</fd-menu>\r\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\r\n    <bt-notification-group\r\n        [notificationReport]=\"notificationReport\"\r\n        [notificationCount]=\"notificationCount\"\r\n        (actionClick)=\"popoverComponent.close()\"\r\n        [deviceSize]=\"deviceSize\"\r\n    ></bt-notification-group>\r\n</ng-template>\r\n\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body class=\"mobile\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsUnreadCount }\"\r\n            ></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n<ng-template #searchContent>\r\n    <ul fd-list [byline]=\"true\">\r\n        @for (item of (suggestions | suggestionsFilter:selectedSuggestionFiltertype) ; track item.data.path) {\r\n        <li\r\n            fd-list-item\r\n            [interactive]=\"true\"\r\n            (click)=\"onSearchItemClick(item)\"\r\n            class=\"!tw-ps-1\"\r\n            [class.!tw-bg-blue-600]=\"item.data.source === 'Report'\"\r\n            [class.!tw-bg-green-600]=\"item.data.source === 'Command'\"\r\n            [class.!tw-bg-gray-600]=\"item.data.source !== 'Command' && item.data.source !== 'Report'\"\r\n        >\r\n            <a fd-list-link [attr.href]=\"!item.data.url ? null : item.data.url\" (click)=\"onSearchLink(item, $event)\">\r\n                <div fd-list-content>\r\n                    <div fd-list-title>{{ item.value }}</div>\r\n                    <div fd-list-byline>{{ item.data.path }}</div>\r\n                </div>\r\n                <span fd-list-secondary>\r\n                    @if(item.data.canPin){\r\n                    <button\r\n                        class=\"!tw-m-[0.1rem]\"\r\n                        [ariaLabel]=\"'AddToFavorite' | bbbTranslate\"\r\n                        [title]=\"'Add To Favorite' | bbbTranslate\"\r\n                        fd-button\r\n                        glyph=\"shortcut\"\r\n                        (click)=\"oFavoriteLink(item, $event)\"\r\n                    ></button>\r\n                    }\r\n                </span>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n<ng-template #searchSubHeader>\r\n    <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n        <fd-input-group\r\n            glyph=\"search\"\r\n            fdkInitialFocus\r\n            glyphAriaLabel=\"Submit\"\r\n            [button]=\"true\"\r\n            (input)=\"onSearchInputChange($event)\"\r\n        >\r\n        </fd-input-group>\r\n        @if(suggestions.length){\r\n        <div class=\"tw-flex tw-gap-4 tw-overflow-x-auto suggestion-filters-cat tw-pb-4\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: { name: '\u0647\u0645\u0647', count: (suggestions | suggestionsCountFilter: 'all'), type: '' }\r\n                \"\r\n            ></ng-container>\r\n\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: { name: '\u0632\u06CC\u0631\u0633\u06CC\u0633\u062A\u0645', count: (suggestions | suggestionsCountFilter: 'subsystem'), type: '' }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u06AF\u0631\u0648\u0647 \u0646\u0648\u06CC\u06AF\u06CC\u062A\u0648\u0631',\r\n                        count: (suggestions | suggestionsCountFilter: 'navgroup'),\r\n                        type: ''\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u06AF\u0632\u0627\u0631\u0634\u0627\u062A',\r\n                        count: (suggestions | suggestionsCountFilter: 'report'),\r\n                        type: 'information'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u062F\u0633\u062A\u0648\u0631\u0627\u062A',\r\n                        count: (suggestions | suggestionsCountFilter: 'command'),\r\n                        type: 'success'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template #catTag let-name=\"name\" let-count=\"count\" let-type=\"type\">\r\n    @if(count && count!==' '){\r\n    <div fd-generic-tag [name]=\"name\" [value]=\"count\" (click)=\"selectedSuggestionFiltertype = name\" [type]=\"type\"></div>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative}:host fd-user-menu{background-color:transparent}:host fd-shellbar-actions.flat-buttons{flex-direction:row-reverse}:host.hide-user-menu fd-shellbar-actions ::ng-deep .fd-user-menu{display:none}:host ::ng-deep fd-shellbar-actions fd-avatar{background-color:transparent!important;color:var(--sapShell_InteractiveTextColor, #d1e8ff)}:host ::ng-deep .fd-shellbar--s .fd-shellbar__title{display:block;max-width:10rem;text-wrap:auto;font-size:.8rem}:host ::ng-deep fd-combobox .fd-input-group input{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}:host ::ng-deep fd-combobox .fd-input-group span{min-width:2rem;min-height:1.625rem}:host ::ng-deep .fd-shellbar__subtitle{font-size:1rem}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem;margin:0!important}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.hide-panel-header ::ng-deep .fd-panel__header{min-height:auto;height:auto}:host ::ng-deep .shellbar-command-action--image-glyph{gap:.375rem}:host ::ng-deep .shellbar-command-action--image-glyph ::ng-deep fd-icon{display:none}.shellbar-command-action__image{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}:host ::ng-deep .fd-shellbar{height:var(--shellbar-height)}:host ::ng-deep fd-shellbar.s .fd-shellbar__product{max-width:120px}:host ::ng-deep fd-shellbar.s .fd-shellbar--has-context-area{justify-content:center!important}:host ::ng-deep fd-shellbar.s .fd-shellbar--has-context-area .fd-shellbar__action--shrink button{color:var(--fdButtonIconColor, var(--sapShell_InteractiveTextColor))}\n"] }]
+            args: [{ selector: 'bt-barsa-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-shellbar\r\n    [ngClass]=\"deviceSize\"\r\n    routeFormChange\r\n    (stateChanged)=\"onRouteFormStateChange()\"\r\n    [showNavigationButton]=\"sideMenuTemplate || showSidebar ? true : false\"\r\n    (navigationButtonClicked)=\"$event.stopPropagation(); isOpenQuickAccessChanged.emit(!isOpenQuickAccess)\"\r\n    [handleBodyClick]=\"true\"\r\n    [size]=\"deviceSize === 's' && userLoggedIn ? 'm' : deviceSize\"\r\n>\r\n    <fd-shellbar-branding [interactiveBranding]=\"true\" [style.display]=\"hideBranding ? 'none' : null\">\r\n        <fd-shellbar-logo>\r\n            <a\r\n                [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\r\n                href=\"/\"\r\n                class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced tw-bg-center !tw-bg-auto\"\r\n                [attr.aria-label]=\"subtitle | bbbTranslate\"\r\n            ></a>\r\n        </fd-shellbar-logo>\r\n        <fd-shellbar-title> {{ subtitle | bbbTranslate }} {{ showVersion ? appVersion : '' }}</fd-shellbar-title>\r\n    </fd-shellbar-branding>\r\n\r\n    <fd-shellbar-context-area>\r\n        <span\r\n            [class.hide]=\"!informativeText\"\r\n            fdShellbarHidePriority=\"1\"\r\n            fd-object-status\r\n            [status]=\"informativeStatus || 'informative'\"\r\n            [inverted]=\"true\"\r\n            [label]=\"informativeText\"\r\n        ></span>\r\n        <fd-product-switch\r\n            fdShellbarHidePriority=\"3\"\r\n            [class.hide]=\"!productSwitcher?.length\"\r\n            [restoreFocusOnClose]=\"false\"\r\n        >\r\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\r\n            </fd-product-switch-body>\r\n        </fd-product-switch>\r\n        <span\r\n            [class.hide]=\"!showSearchInSystem\"\r\n            fdShellbarHidePriority=\"4\"\r\n            class=\"fd-shellbar__button\"\r\n            fd-button\r\n            glyph=\"search\"\r\n            fdType=\"transparent\"\r\n            (click)=\"onOpenSearchDialog()\"\r\n        >\r\n        </span>\r\n        <fd-product-menu\r\n            fdShellbarHidePriority=\"2\"\r\n            [control]=\"productMenuControl\"\r\n            [closePopoverOnSelect]=\"true\"\r\n            [items]=\"productMenuItems1\"\r\n            [class.hide]=\"!productMenuItems1?.length\"\r\n        >\r\n        </fd-product-menu>\r\n        <fd-shellbar-separator fdshellbarhidepriority=\"5\" style=\"flex-shrink: 0\"></fd-shellbar-separator>\r\n        @for(dastor of dastoratSarasari; track dastor.label){ @if(dastor.children?.length){\r\n        <button\r\n            type=\"button\"\r\n            class=\"fd-shellbar__button\"\r\n            [fdShellbarHidePriority]=\"dastor.priority\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [glyph]=\"dastor.glyph\"\r\n            [label]=\"dastor.label | bbbTranslate\"\r\n            [fdMenuTrigger]=\"globalCommandMenu\"\r\n        ></button>\r\n        <fd-menu #globalCommandMenu>\r\n            @for(item of dastor.children; track item.key) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    globalSubmenuTemplate;\r\n                    context: { item: item, parentSubmenu: undefined, rootMenu: globalCommandMenu }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n            <ng-template\r\n                #globalSubmenuTemplate\r\n                let-item=\"item\"\r\n                let-parentSubmenu=\"parentSubmenu\"\r\n                let-rootMenu=\"rootMenu\"\r\n            >\r\n                <li\r\n                    fd-menu-item\r\n                    [submenu]=\"item.children?.length ? submenu : undefined\"\r\n                    [parentSubmenu]=\"parentSubmenu\"\r\n                >\r\n                    @if(item.children?.length){\r\n                    <div fd-menu-interactive>\r\n                        <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                        <fd-menu-addon [submenuIndicator]=\"true\"></fd-menu-addon>\r\n                    </div>\r\n                    } @else {\r\n                    <a\r\n                        fd-menu-interactive\r\n                        href=\"\"\r\n                        [class.shellbar-command-action--image-glyph]=\"item.useImageGlyph\"\r\n                        (click)=\"$event.preventDefault(); rootMenu.close(); item.callback?.()\"\r\n                    >\r\n                        @if(item.useImageGlyph){\r\n                        <img\r\n                            class=\"shellbar-command-action__image\"\r\n                            [src]=\"item.glyph\"\r\n                            [alt]=\"item.label | bbbTranslate\"\r\n                            loading=\"lazy\"\r\n                        />\r\n                        }\r\n                        <span fd-menu-title class=\"shellbar-command-action__label\">{{\r\n                            item.label | bbbTranslate\r\n                        }}</span>\r\n                    </a>\r\n                    }\r\n                </li>\r\n                <fd-submenu #submenu>\r\n                    @if(item.children?.length){ @for(subItem of item.children; track subItem.key) {\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            globalSubmenuTemplate;\r\n                            context: { item: subItem, parentSubmenu: submenu, rootMenu: rootMenu }\r\n                        \"\r\n                    ></ng-container>\r\n                    } }\r\n                </fd-submenu>\r\n            </ng-template>\r\n        </fd-menu>\r\n        } @else {\r\n        <span\r\n            [fdShellbarHidePriority]=\"dastor.priority\"\r\n            fd-button\r\n            [glyph]=\"dastor.glyph\"\r\n            class=\"fd-shellbar__button\"\r\n            [label]=\"dastor.useImageGlyph ? undefined : (dastor.label | bbbTranslate)\"\r\n            [class.shellbar-command-action--image-glyph]=\"dastor.useImageGlyph\"\r\n            (click)=\"dastor.callback?.()\"\r\n        >\r\n            @if(dastor.useImageGlyph){\r\n            <img\r\n                class=\"shellbar-command-action__image\"\r\n                [src]=\"dastor.glyph\"\r\n                [alt]=\"dastor.label | bbbTranslate\"\r\n                loading=\"lazy\"\r\n            />\r\n            <span class=\"shellbar-command-action__label\">{{ dastor.label | bbbTranslate }}</span>\r\n            }\r\n        </span>\r\n        } } @if(workflowMenuItems.length){\r\n        <button\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Workflow' | bbbTranslate\"\r\n            [fdMenu]=\"true\"\r\n            [fdMenuTrigger]=\"workflowMenu\"\r\n        ></button>\r\n        <fd-menu #workflowMenu>\r\n            @for(item of workflowMenuItems; track item.key) {\r\n            <li fd-menu-item>\r\n                <a\r\n                    fd-menu-interactive\r\n                    href=\"\"\r\n                    (click)=\"$event.preventDefault(); workflowMenu.close(); item.callback?.()\"\r\n                >\r\n                    <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                </a>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n        } @for(group of groupedCommandMenus; track group.Caption){\r\n        <button fd-button [label]=\"group.Caption | bbbTranslate\" [fdMenu]=\"true\" [fdMenuTrigger]=\"groupMenu\"></button>\r\n        <fd-menu #groupMenu>\r\n            @for(item of group.Commands; track item.key) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    groupSubmenuTemplate;\r\n                    context: { item: item, parentSubmenu: undefined, rootMenu: groupMenu }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n            <ng-template\r\n                #groupSubmenuTemplate\r\n                let-item=\"item\"\r\n                let-parentSubmenu=\"parentSubmenu\"\r\n                let-rootMenu=\"rootMenu\"\r\n            >\r\n                <li\r\n                    fd-menu-item\r\n                    [submenu]=\"item.children?.length ? submenu : undefined\"\r\n                    [parentSubmenu]=\"parentSubmenu\"\r\n                >\r\n                    @if(item.children?.length){\r\n                    <div fd-menu-interactive>\r\n                        <span fd-menu-title>{{ item.label | bbbTranslate }}</span>\r\n                        <fd-menu-addon [submenuIndicator]=\"true\"></fd-menu-addon>\r\n                    </div>\r\n                    } @else {\r\n                    <a\r\n                        fd-menu-interactive\r\n                        class=\"tw-gap-2\"\r\n                        [class.shellbar-command-action--image-glyph]=\"item.useImageGlyph\"\r\n                        (click)=\"$event.preventDefault(); rootMenu.close(); item.callback?.()\"\r\n                    >\r\n                        @if(item.useImageGlyph){\r\n                        <img\r\n                            class=\"shellbar-command-action__image\"\r\n                            [src]=\"item.glyph\"\r\n                            [alt]=\"item.label | bbbTranslate\"\r\n                            loading=\"lazy\"\r\n                        />\r\n                        }\r\n                        <span fd-menu-title class=\"shellbar-command-action__label\">{{\r\n                            item.label | bbbTranslate\r\n                        }}</span>\r\n                    </a>\r\n                    }\r\n                </li>\r\n                <fd-submenu #submenu>\r\n                    @if(item.children?.length){ @for(subItem of item.children; track subItem.key) {\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            groupSubmenuTemplate;\r\n                            context: { item: subItem, parentSubmenu: submenu, rootMenu: rootMenu }\r\n                        \"\r\n                    ></ng-container>\r\n                    } }\r\n                </fd-submenu>\r\n            </ng-template>\r\n        </fd-menu>\r\n        }\r\n    </fd-shellbar-context-area>\r\n\r\n    @if(inputEnableSearch()){\r\n    <fdp-search-field\r\n        [placeholder]=\"'Search' | bbbTranslate\"\r\n        (inputChange)=\"onSearchInputChange($event)\"\r\n        [suggestions]=\"suggestions\"\r\n        (searchSubmit)=\"onSearchSubmit($event)\"\r\n    ></fdp-search-field>\r\n    }\r\n    <fd-shellbar-actions\r\n        #shellbarActions\r\n        (searchOpen)=\"onSearchOpen($event)\"\r\n        [class.flat-buttons]=\"flatButtons?.length && !showSearch()\"\r\n    >\r\n        <fd-user-menu>\r\n            <fd-user-menu-control>\r\n                <fd-avatar size=\"xs\" [circle]=\"true\" [attr.ariaLabel]=\"displayName\" [image]=\"userInfo?.Url\"></fd-avatar>\r\n            </fd-user-menu-control>\r\n            <fd-user-menu-body>\r\n                <div fd-user-menu-header>\r\n                    <fd-avatar\r\n                        [circle]=\"true\"\r\n                        [size]=\"deviceSize\"\r\n                        [label]=\"userInfo?.Url ? '' : displayName\"\r\n                        zoomGlyph=\"\"\r\n                        title=\"Edit avatar\"\r\n                        [image]=\"userInfo?.Url\"\r\n                    ></fd-avatar>\r\n                    <div fd-user-menu-header-container>\r\n                        <div fd-user-menu-user-name>{{ displayName }}</div>\r\n                        @for(item of userInfo?.Sublines;track item){\r\n                        <div fd-user-menu-subline>{{ item }}</div>\r\n                        }\r\n                    </div>\r\n                    @if(profileDynamicCommandText){\r\n                    <button\r\n                        fd-button\r\n                        [label]=\"profileDynamicCommandText || 'Edit' | bbbTranslate\"\r\n                        [glyph]=\"profileDynamicCommandIcon || 'edit'\"\r\n                        [attr.ariaLabel]=\"'\u0648\u06CC\u0631\u0627\u06CC\u0634 \u067E\u0631\u0648\u0641\u0627\u06CC\u0644'\"\r\n                        [dynCommand]=\"profileDynamicCommand\"\r\n                        bodyClick\r\n                    ></button>\r\n                    }\r\n                </div>\r\n                <div fd-user-menu-content-container>\r\n                    @if(userMenu?.length){\r\n                    <fd-panel transparent noRadius [fixed]=\"true\" class=\"hide-panel-header\"> </fd-panel>}\r\n\r\n                    <fd-user-menu-list>\r\n                        @for(item of userMenu;track item.text){\r\n                        <li fd-user-menu-list-item [icon]=\"item.icon\" [text]=\"item.text\" (click)=\"item.callback()\"></li>\r\n                        }\r\n                    </fd-user-menu-list>\r\n                </div>\r\n            </fd-user-menu-body>\r\n\r\n            <fd-user-menu-footer>\r\n                <div fd-bar barDesign=\"footer\">\r\n                    <div fd-bar-right>\r\n                        @for(item of footerButtons;track item.text){\r\n                        <button\r\n                            fd-button\r\n                            [label]=\"item.text\"\r\n                            fdType=\"transparent\"\r\n                            [glyph]=\"item.icon\"\r\n                            [attr.ariaLabel]=\"item.text\"\r\n                            (click)=\"item.callback()\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-user-menu-footer>\r\n        </fd-user-menu>\r\n        @for (action of actions; track action) {            \r\n        <fd-shellbar-action\r\n            [glyph]=\"action.glyph\"\r\n            [callback]=\"action.callback\"\r\n            [label]=\"action.label\"\r\n            [notificationLabel]=\"action.notificationLabel\"\r\n            [notificationCount]=\"action.notificationCount\"\r\n        >\r\n        </fd-shellbar-action>\r\n\r\n        } @if (!settings?.HideLanguage && multiLanguages && userLoggedIn) {\r\n        <button\r\n            class=\"fd-shellbar__button\"\r\n            fd-button\r\n            glyph=\"world\"\r\n            fdType=\"transparent\"\r\n            [fdMenuTrigger]=\"menu\"\r\n        ></button>\r\n        } @if (deviceSize !== 's' && userLoggedIn && !hideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notification'\"\r\n            [notificationCount]=\"notificationsUnreadCount\"\r\n            [notificationLabel]=\"'Notification Label'\"\r\n            [callback]=\"onOpenNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if (deviceSize === 's' && userLoggedIn && !hideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notifications' | bbbTranslate\"\r\n            [notificationCount]=\"notificationsUnreadCount\"\r\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\r\n            [callback]=\"onBellNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if(flatButtons?.length){\r\n        <div class=\"tw-flex tw-gap-1\">\r\n            @if (!settings?.HideLanguage && multiLanguages){\r\n            <button\r\n                class=\"fd-shellbar__button\"\r\n                fd-button\r\n                glyph=\"world\"\r\n                fdType=\"transparent\"\r\n                [fdMenuTrigger]=\"menu\"\r\n            ></button>\r\n            } @for(btn of flatButtons;track btn){\r\n            <button\r\n                fd-button\r\n                [label]=\"btn.text\"\r\n                [glyph]=\"btn.text === ('Login' | bbbTranslate) ? 'person-placeholder' : null\"\r\n                fdType=\"emphasized\"\r\n                (click)=\"btn.callback()\"\r\n            ></button>\r\n            }\r\n        </div>\r\n        }\r\n    </fd-shellbar-actions>\r\n    <fd-popover\r\n        [(isOpen)]=\"isOpenNotificatoin\"\r\n        [noArrow]=\"true\"\r\n        placement=\"top-end\"\r\n        title=\"Notification Popover\"\r\n        [appendTo]=\"el\"\r\n        [mobile]=\"false\"\r\n        #popoverComponent\r\n    >\r\n        <fd-popover-control>\r\n            <!-- <fd-shellbar-action\r\n                    [glyph]=\"'bell'\"\r\n                    [label]=\"'Notification'\"\r\n                    [notificationCount]=\"notificationsUnreadCount\"\r\n                    [notificationLabel]=\"'Notification Label'\"\r\n                    [callback]=\"onOpenNotification\"\r\n                >\r\n                </fd-shellbar-action> -->\r\n        </fd-popover-control>\r\n        <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\r\n            @if(isOpenNotificatoin){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsUnreadCount }\"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</fd-shellbar>\r\n\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<div\r\n    *ngIf=\"sideMenuTemplate\"\r\n    class=\"sidemenu-h tw-fixed tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\r\n    [class.tw-w-screen]=\"isMobile\"\r\n    [class.-tw-right-full]=\"isMobile\"\r\n    [class.tw-w-96]=\"!isMobile\"\r\n    [class.-tw-right-96]=\"!isMobile && rtl\"\r\n    [class.!tw-right-0]=\"rtl && isOpenQuickAccess\"\r\n    [class.-tw-left-96]=\"!isMobile && !rtl\"\r\n    [class.!tw-left-0]=\"!rtl && isOpenQuickAccess\"\r\n    (click)=\"$event.stopPropagation()\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></ng-container>\r\n</div>\r\n\r\n<fd-menu #menu>\r\n    <ul fd-list>\r\n        @for (culture of cultures | keyvalue; track culture) {\r\n        <li fd-list-item>\r\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\r\n                <span fd-list-title class=\"tw-flex tw-items-center tw-gap-1\">\r\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" loading=\"lazy\" />\r\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\r\n                </span>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</fd-menu>\r\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\r\n    <bt-notification-group\r\n        [notificationReport]=\"notificationReport\"\r\n        [notificationCount]=\"notificationCount\"\r\n        (actionClick)=\"popoverComponent.close()\"\r\n        [deviceSize]=\"deviceSize\"\r\n    ></bt-notification-group>\r\n</ng-template>\r\n\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body class=\"mobile\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsUnreadCount }\"\r\n            ></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n<ng-template #searchContent>\r\n    <ul fd-list [byline]=\"true\">\r\n        @for (item of (suggestions | suggestionsFilter:selectedSuggestionFiltertype) ; track item.data.path) {\r\n        <li\r\n            fd-list-item\r\n            [interactive]=\"true\"\r\n            (click)=\"onSearchItemClick(item)\"\r\n            class=\"!tw-ps-1\"\r\n            [class.!tw-bg-blue-600]=\"item.data.source === 'Report'\"\r\n            [class.!tw-bg-green-600]=\"item.data.source === 'Command'\"\r\n            [class.!tw-bg-gray-600]=\"item.data.source !== 'Command' && item.data.source !== 'Report'\"\r\n        >\r\n            <a fd-list-link [attr.href]=\"!item.data.url ? null : item.data.url\" (click)=\"onSearchLink(item, $event)\">\r\n                <div fd-list-content>\r\n                    <div fd-list-title>{{ item.value }}</div>\r\n                    <div fd-list-byline>{{ item.data.path }}</div>\r\n                </div>\r\n                <span fd-list-secondary>\r\n                    @if(item.data.canPin){\r\n                    <button\r\n                        class=\"!tw-m-[0.1rem]\"\r\n                        [ariaLabel]=\"'AddToFavorite' | bbbTranslate\"\r\n                        [title]=\"'Add To Favorite' | bbbTranslate\"\r\n                        fd-button\r\n                        glyph=\"shortcut\"\r\n                        (click)=\"oFavoriteLink(item, $event)\"\r\n                    ></button>\r\n                    }\r\n                </span>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n<ng-template #searchSubHeader>\r\n    <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n        <fd-input-group\r\n            glyph=\"search\"\r\n            fdkInitialFocus\r\n            glyphAriaLabel=\"Submit\"\r\n            [button]=\"true\"\r\n            (input)=\"onSearchInputChange($event)\"\r\n        >\r\n        </fd-input-group>\r\n        @if(suggestions.length){\r\n        <div class=\"tw-flex tw-gap-4 tw-overflow-x-auto suggestion-filters-cat tw-pb-4\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: { name: '\u0647\u0645\u0647', count: (suggestions | suggestionsCountFilter: 'all'), type: '' }\r\n                \"\r\n            ></ng-container>\r\n\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: { name: '\u0632\u06CC\u0631\u0633\u06CC\u0633\u062A\u0645', count: (suggestions | suggestionsCountFilter: 'subsystem'), type: '' }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u06AF\u0631\u0648\u0647 \u0646\u0648\u06CC\u06AF\u06CC\u062A\u0648\u0631',\r\n                        count: (suggestions | suggestionsCountFilter: 'navgroup'),\r\n                        type: ''\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u06AF\u0632\u0627\u0631\u0634\u0627\u062A',\r\n                        count: (suggestions | suggestionsCountFilter: 'report'),\r\n                        type: 'information'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    catTag;\r\n                    context: {\r\n                        name: '\u062F\u0633\u062A\u0648\u0631\u0627\u062A',\r\n                        count: (suggestions | suggestionsCountFilter: 'command'),\r\n                        type: 'success'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template #catTag let-name=\"name\" let-count=\"count\" let-type=\"type\">\r\n    @if(count && count!==' '){\r\n    <div fd-generic-tag [name]=\"name\" [value]=\"count\" (click)=\"selectedSuggestionFiltertype = name\" [type]=\"type\"></div>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative}:host fd-user-menu{background-color:transparent}:host fd-shellbar-actions.flat-buttons{flex-direction:row-reverse}:host.hide-user-menu fd-shellbar-actions ::ng-deep .fd-user-menu{display:none}:host ::ng-deep fd-shellbar-actions fd-avatar{background-color:transparent!important;color:var(--sapShell_InteractiveTextColor, #d1e8ff)}:host ::ng-deep .fd-shellbar--s .fd-shellbar__title{display:block;max-width:10rem;text-wrap:auto;font-size:.8rem}:host ::ng-deep fd-combobox .fd-input-group input{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}:host ::ng-deep fd-combobox .fd-input-group span{min-width:2rem;min-height:1.625rem}:host ::ng-deep .fd-shellbar__subtitle{font-size:1rem}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem;margin:0!important}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.hide-panel-header ::ng-deep .fd-panel__header{min-height:auto;height:auto}:host ::ng-deep .shellbar-command-action--image-glyph{gap:.375rem}:host ::ng-deep .shellbar-command-action--image-glyph ::ng-deep fd-icon{display:none}.shellbar-command-action__image{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}:host ::ng-deep .fd-shellbar{height:var(--shellbar-height)}:host ::ng-deep fd-shellbar.s .fd-shellbar__product{max-width:120px}:host ::ng-deep fd-shellbar.s .fd-shellbar--has-context-area{justify-content:center!important}:host ::ng-deep fd-shellbar.s .fd-shellbar--has-context-area .fd-shellbar__action--shrink button{color:var(--fdButtonIconColor, var(--sapShell_InteractiveTextColor))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchDialogContent: [{
                 type: ViewChild,
                 args: ['searchContent', { read: TemplateRef }]
@@ -3759,7 +3653,22 @@ class ShellbarComponent extends BaseComponent {
         return this.shellbarData?.CssStyles;
     }
     get actions() {
-        return this.settings?.HideUserMenu ? [] : this.shellbarData?.ActionItems?.MoDataList ?? [];
+        if (this.settings?.HideUserMenu) {
+            return [];
+        }
+        const moDataList = BarsaApi.Common.Util.TryGetValue(this.shellbarData, 'ActionItems.MoDataList');
+        const items = moDataList ? [...moDataList] : [];
+        if (!items.length) {
+            return [];
+        }
+        const actionItems = items.map((c) => ({
+            label: this._bbbTranslatePipe.transform(c.Label),
+            glyph: c.Glyph,
+            notificationLabel: c.NotificationLabel,
+            notificationCount: c.NotificationCount,
+            callback: new Function(c.Callback + this.bodyClick)
+        }));
+        return actionItems;
     }
     get sidebarSettings() {
         if (!this.shellbarData?.SidebarReport?.Id) {