barsa-tiles 2.3.142 → 2.3.144

package/fesm2022/barsa-tiles.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, ChangeDetectionStrategy, Component, Input, Directive, ChangeDetectorRef, ViewContainerRef, HostListener, ElementRef, ViewChild, Pipe, EventEmitter, Output, HostBinding, Injector, input, Renderer2, TemplateRef, signal, DOCUMENT, NgModule, ComponentFactoryResolver, provideAppInitializer, NO_ERRORS_SCHEMA } 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 { PortalService, BbbTranslatePipe, BarsaApi, TilePropsComponent, BaseComponent, BaseDirective, IsDarkMode, LocalStorageService, PreventDefaulEvent, getDeviceIsMobile, SaveScrollPositionService, ExecuteDynamicCommand, ShellbarHeightService, 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 { Subject, BehaviorSubject, of, from, takeUntil as takeUntil$1, filter as filter$1, interval, finalize as finalize$1, combineLatest, fromEvent, map as map$1, forkJoin } from 'rxjs';
-import { startWith, shareReplay, takeUntil, distinctUntilChanged, filter, tap, map, concatMap, debounceTime, exhaustMap, finalize, withLatestFrom } from 'rxjs/operators';
+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 { 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';
 import { ThemingService, RtlService, DialogRef, DialogService, CarouselComponent, ContentDensityService, ShellbarComponent as ShellbarComponent$1, ComboboxComponent, FundamentalNgxCoreModule, GridListModule, ShellbarUserMenuComponent } from '@fundamental-ngx/core';
 import * as i1$2 from '@angular/common';
 import { CommonModule, LowerCasePipe } from '@angular/common';
@@ -14,31 +15,32 @@ import * as i1$1 from '@fundamental-ngx/core/tile';
 import * as i1 from '@fundamental-ngx/core/icon';
 import * as i3 from 'barsa-sap-ui';
 import { MaskComponent, BarsaTreeItemComponent, BarsaSapUiModule } from 'barsa-sap-ui';
-import * as i1$3 from '@angular/router';
-import { Router, ActivatedRoute, NavigationEnd, RouterEvent, RouterModule } from '@angular/router';
-import * as i3$1 from '@angular/cdk/drag-drop';
+import * as i1$5 from '@angular/router';
+import { Router, NavigationEnd, RouterEvent, ActivatedRoute, RouterModule } from '@angular/router';
+import * as i2$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i4$1 from '@fundamental-ngx/core/busy-indicator';
-import * as i7 from '@fundamental-ngx/core/layout-panel';
+import * as i3$1 from '@fundamental-ngx/core/busy-indicator';
+import * as i5$1 from '@fundamental-ngx/core/layout-panel';
 import * as i6$1 from '@fundamental-ngx/core/title';
-import * as i5$1 from '@fundamental-ngx/core/toolbar';
-import * as i1$4 from '@fundamental-ngx/core/avatar';
-import * as i2$1 from '@fundamental-ngx/core/card';
-import * as i1$5 from '@angular/forms';
+import * as i7 from '@fundamental-ngx/core/toolbar';
+import * as i1$3 from '@fundamental-ngx/core/avatar';
+import * as i2$2 from '@fundamental-ngx/core/card';
+import * as i1$4 from '@angular/forms';
 import { UntypedFormBuilder, UntypedFormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i4$2 from '@fundamental-ngx/core/input-group';
-import * as i2$2 from '@fundamental-ngx/core/bar';
+import * as i4$1 from '@fundamental-ngx/core/input-group';
+import * as i2$3 from '@fundamental-ngx/core/bar';
 import * as i3$2 from '@fundamental-ngx/core/form';
 import * as i5$2 from '@fundamental-ngx/core/dialog';
 import * as i7$1 from '@fundamental-ngx/cdk/utils';
-import * as i8 from '@fundamental-ngx/platform';
+import * as i8 from '@fundamental-ngx/core/select';
+import * as i5$3 from '@fundamental-ngx/core/checkbox';
+import * as i8$1 from '@fundamental-ngx/platform';
 import { IconTabBarComponent, IconTabBarTabComponent, IconTabBarTabContentDirective, SearchFieldComponent } from '@fundamental-ngx/platform';
-import * as i4$3 from '@fundamental-ngx/core/dynamic-page';
+import * as i4$2 from '@fundamental-ngx/core/dynamic-page';
 import * as i6$2 from '@fundamental-ngx/core/switch';
-import * as i2$3 from 'barsa-echarts';
+import * as i2$4 from 'barsa-echarts';
 import { BarsaEchartsModule } from 'barsa-echarts';
-import * as i2$4 from '@fundamental-ngx/core/carousel';
-import * as i4$4 from '@fundamental-ngx/core/checkbox';
+import * as i2$5 from '@fundamental-ngx/core/carousel';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i11 from '@fundamental-ngx/core/object-status';
 import * as i6$3 from '@fundamental-ngx/core/panel';
@@ -49,36 +51,277 @@ import * as i16 from '@fundamental-ngx/core/generic-tag';
 import * as i18 from '@fundamental-ngx/core/user-menu';
 import { UserMenuComponent, UserMenuControlComponent, UserMenuBodyComponent, UserMenuListComponent, UserMenuFooterComponent, UserMenuHeaderDirective, UserMenuSublineDirective, UserMenuUserNameDirective, UserMenuHeaderContainerDirective, UserMenuListItemComponent } from '@fundamental-ngx/core/user-menu';
 import * as i3$3 from '@fundamental-ngx/core/breadcrumb';
-import * as i4$5 from '@fundamental-ngx/core/dynamic-side-content';
-import * as i5$3 from '@fundamental-ngx/core/message-page';
+import * as i4$3 from '@fundamental-ngx/core/dynamic-side-content';
+import * as i5$4 from '@fundamental-ngx/core/message-page';
 import { CdkTableModule } from '@angular/cdk/table';
 import { SplitterModule } from '@fundamental-ngx/btp/splitter';
 import * as i1$6 from '@fundamental-ngx/core/notification';
 
+function setTileInfo(appTile) {
+    const title = BarsaApi.Common.Util.TryGetValue(appTile, 'Component.Settings.TileSetting.Title', null);
+    appTile.TileTitle = !appTile.Title ? title : appTile.Title;
+    const subtitle = BarsaApi.Common.Util.TryGetValue(appTile, 'Component.Settings.TileSetting.Subtitle', null);
+    appTile.Subtitle = !appTile.Subtitle ? subtitle : appTile.Subtitle;
+}
+function prepareNavigator(appTileGroup, translate) {
+    appTileGroup.$TileSettingChanged = false;
+    appTileGroup.$Disabledpin = false;
+    appTileGroup.navigatorTitle = BarsaApi.Common.Util.TryGetValue(appTileGroup, 'UserAppTileGroupSetting.Title', appTileGroup.Title);
+    appTileGroup.navigatorTitle =
+        appTileGroup.navigatorTitle === '' ? 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;
+    const visible = BarsaApi.Common.Util.TryGetValue(appTileGroup, 'UserAppTileGroupSetting.Visible', null);
+    appTileGroup.navigatorVisible = visible !== null ? visible : appTileGroup.Visible;
+    const appTiles = appTileGroup.AppTiles?.MoDataList ?? [];
+    appTileGroup.navigatorTiles = appTiles
+        .filter((c) => c.Visible && !c.IsActionLink)
+        .sort((a, b) => Number(a.OrderItem) - Number(b.OrderItem));
+    appTileGroup.navigatorActionLinks = appTiles
+        .filter((c) => c.Visible && c.IsActionLink)
+        .sort((a, b) => Number(a.OrderItemActionLink) - Number(b.OrderItemActionLink));
+    appTileGroup.navigatorTiles.forEach((appTile) => setTileInfo(appTile));
+    appTileGroup.navigatorActionLinks.forEach((appTile) => setTileInfo(appTile));
+    appTileGroup.$Children?.forEach((subAppTileGroup) => prepareNavigator(subAppTileGroup, translate));
+}
+
+function emptyEntities() {
+    return {
+        groupsById: {},
+        rootGroupIds: [],
+        childGroupIdsByParentId: {},
+        tilesById: {},
+        tileIdsByGroupId: {}
+    };
+}
+function normalizeGroups(allApps) {
+    const groupsById = {};
+    const rootGroupIds = [];
+    const childGroupIdsByParentId = {};
+    const tilesById = {};
+    const tileIdsByGroupId = {};
+    const visitGroup = (g, parentId) => {
+        groupsById[g.Id] = g;
+        if (!parentId) {
+            rootGroupIds.push(g.Id);
+        }
+        else {
+            childGroupIdsByParentId[parentId] = childGroupIdsByParentId[parentId] ?? [];
+            childGroupIdsByParentId[parentId].push(g.Id);
+        }
+        const tiles = g.navigatorTiles ?? g.AppTiles?.MoDataList ?? [];
+        tileIdsByGroupId[g.Id] = [];
+        tiles.forEach((t) => {
+            const id = (t.AppTile?.Id ?? t.Id);
+            tilesById[id] = t;
+            tileIdsByGroupId[g.Id].push(id);
+        });
+        (g.$Children ?? []).forEach((c) => visitGroup(c, g.Id));
+    };
+    (allApps.MoDataList ?? []).forEach((g) => visitGroup(g, null));
+    return { groupsById, rootGroupIds, childGroupIdsByParentId, tilesById, tileIdsByGroupId };
+}
+/** Shallow copy each node and keep only `navigatorVisible` subtrees (non-mutating). */
+function filterNavigatorVisibleSubtree(g) {
+    const children = (g.$Children ?? [])
+        .filter((c) => !!c.navigatorVisible)
+        .map((c) => filterNavigatorVisibleSubtree(c));
+    return { ...g, $Children: children };
+}
+class TilesStore {
+    constructor() {
+        this.appTileGroups = signal(null);
+        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());
+        this.homeAppTileGroups = computed(() => {
+            const allApps = this.appTileGroups();
+            if (!allApps) {
+                return [];
+            }
+            return [...(allApps.MoDataList ?? [])]
+                .filter((c) => c.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}).
+         */
+        this.rootGroups = computed(() => {
+            const { groupsById, rootGroupIds } = this.entities();
+            const groups = rootGroupIds.map((id) => groupsById[id]).filter(Boolean);
+            if (this.editHome()) {
+                return groups;
+            }
+            return groups
+                .filter((g) => !!g.navigatorVisible)
+                .map((g) => filterNavigatorVisibleSubtree(g));
+        });
+        this.selectedGroup = computed(() => {
+            const id = this.selectedGroupId();
+            const { groupsById } = this.entities();
+            return (id && groupsById[id]) || null;
+        });
+        this._translate = inject(BbbTranslatePipe);
+        this.selectGroupChildren = (parentId) => computed(() => {
+            const { groupsById, childGroupIdsByParentId } = this.entities();
+            let list = (childGroupIdsByParentId[parentId] ?? []).map((id) => groupsById[id]).filter(Boolean);
+            if (!this.editHome()) {
+                list = list.filter((g) => !!g.navigatorVisible);
+            }
+            return list;
+        });
+        this.selectGroupTiles = (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.
+     */
+    replaceAllAppTileGroups(allApps) {
+        if (!allApps) {
+            this.appTileGroups.set(null);
+            this.entities.set(emptyEntities());
+            return;
+        }
+        allApps.MoDataList?.forEach((g) => prepareNavigator(g, this._translate));
+        this.appTileGroups.set({ ...allApps });
+        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.
+     */
+    applyLocalTreeSnapshot(allApps) {
+        this.appTileGroups.set({ ...allApps });
+        this.entities.set(normalizeGroups(allApps));
+    }
+    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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Single place for tiles feature BL / report calls (`RunBlMethodAsync` and portal reports).
+ */
+class TilesApiService {
+    constructor() {
+        this._portal = inject(PortalService);
+    }
+    loadAllAppTileGroups() {
+        return this._portal.ReportExecute('AllAppTileGroups');
+    }
+    loadAllAppTileGroupsByReportId(id) {
+        return this._portal.ReportExecuteById(id);
+    }
+    getProfileImage(repIdProfileImage) {
+        return this._runBl('BarsaPortalGetProfileImage', [repIdProfileImage]);
+    }
+    refreshTile(appTileId) {
+        return this._runBl('RefreshTile', [appTileId]);
+    }
+    getUserPortalSettings() {
+        return this._runBl('GetUserPortalSettings', []);
+    }
+    toggleGroupVisible(groupId) {
+        return this._runBl('ToggleAppTileGroupSettingVisible', [groupId]);
+    }
+    resetGroupSetting(groupId) {
+        return this._runBl('ResetAppTileGroupSettingVisible', [groupId]);
+    }
+    deleteGroup(groupId) {
+        return this._runBl('DeleteAppGroup', [groupId]);
+    }
+    changeAppTileSetting(groupId, tileId, title, subtitle) {
+        return this._runBl('ChangeAppTileSetting', [groupId, tileId, title, subtitle]);
+    }
+    saveGroupOrders(groupIds) {
+        return this._runBl('ChangeOrderAppTileGroups', [groupIds]);
+    }
+    createAppTileGroup(parameters) {
+        return this._runBl('CreateAppTileGroup', parameters).pipe(map((mo) => mo));
+    }
+    saveTileOrders(groupId, tileIds, isActionLink, transferredId) {
+        return this._runBl('ChangeOrderAppTiles', [groupId, tileIds, isActionLink, transferredId]);
+    }
+    tilePinChanged(groupChanges, visible, appId) {
+        return this._runBl('TilePinChanged', [groupChanges, visible, appId]);
+    }
+    loadShellbarByPortalId(portalId) {
+        return this._runBl('LoadShellbarByPortalId', [portalId]);
+    }
+    refreshAppTiles(tileIds) {
+        return this._runBl('RefreshAppTiles', [tileIds]);
+    }
+    loadAppTilesByGroup(groupId) {
+        return this._runBl('LoadAllAppTilesByAppTileGroup', [groupId]);
+    }
+    loadAppTilesByUserGroupSettings(groupId) {
+        return this._runBl('LoadAllAppTilesByUserAppTileGroupSettings', [groupId]);
+    }
+    saveUserPortalSettings(payload) {
+        return this._runBl('SaveUserPortalSettings', [payload]);
+    }
+    _runBl(method, parameters) {
+        return from(new Promise((resolve, reject) => {
+            BarsaApi.Bw.RunBlMethodAsync({
+                Parameters: parameters,
+                Method: method,
+                SuccessFn: (res) => resolve(res),
+                FailFn: () => reject(new Error(`BL method failed: ${method}`))
+            });
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class TilesService {
+    /** Same signal reference as {@link TilesStore#appTileGroups} (read-only for consumers). */
+    get appTileGroupsSig() {
+        return this._store.appTileGroups;
+    }
     /** Inserted by Angular inject() migration for backwards compatibility */
     constructor() {
-        this.shellbarSource = new Subject();
-        this._OnDestroy$ = new Subject();
-        this._homeAppTileGroupsSource = new BehaviorSubject([]);
-        this.pinTilesSource = new Subject();
-        this._appTileGroupsSource = new BehaviorSubject(null);
-        this._userInfo$ = new BehaviorSubject(null);
-        this._edithomeSource = new BehaviorSubject(false);
-        this._componentSettings$ = new Subject();
+        this.homeAppTileGroupsSig = signal([]);
+        this.userInfoSig = signal(null);
+        this.editHomeSig = signal(false);
+        this.shellbarSig = signal(null);
+        this.componentSettingsSig = signal(null);
+        this._destroyRef = inject(DestroyRef);
+        this._pinTilesSource = new Subject();
+        this._store = inject(TilesStore);
+        this._tilesApi = inject(TilesApiService);
         this._themingService = inject(ThemingService);
         this._portalService = inject(PortalService);
         this._rtlService = inject(RtlService);
         this._bbbTranslatePipe = inject(BbbTranslatePipe);
         this._appTileGroupLoaded = {};
         BarsaApi.Bw.TilesService = this;
-        this.userInfo$ = this._userInfo$.asObservable();
-        this.homeAppTileGroups$ = this._homeAppTileGroupsSource.asObservable();
-        this.pinTiles$ = this.pinTilesSource.asObservable().pipe(startWith(null));
-        this.shellbarSource = new Subject();
-        this.shellbar$ = this.shellbarSource.asObservable().pipe(shareReplay(1));
-        this.appTileGroups$ = this._appTileGroupsSource.pipe(shareReplay(1));
-        this.edit$ = this._edithomeSource.asObservable().pipe(takeUntil(this._OnDestroy$), distinctUntilChanged());
+        this.userInfo$ = toObservable(this.userInfoSig);
+        this.homeAppTileGroups$ = toObservable(this.homeAppTileGroupsSig);
+        this.pinTiles$ = this._pinTilesSource.asObservable().pipe(startWith(null));
+        this.shellbar$ = toObservable(this.shellbarSig).pipe(shareReplay({ bufferSize: 1, refCount: true }));
+        this.appTileGroups$ = toObservable(this._store.appTileGroups).pipe(shareReplay({ bufferSize: 1, refCount: true }));
+        this.edit$ = toObservable(this.editHomeSig).pipe(distinctUntilChanged());
+        this.componentSettings$ = toObservable(this.componentSettingsSig).pipe(filter((c) => c != null), shareReplay({ bufferSize: 1, refCount: true }));
         this.deviceSize$ = this._portalService.deviceSize$;
         this._rtlService.rtl.next(BarsaApi.LoginFormData.IsRtl);
         this.appTileGroups$
@@ -87,20 +330,15 @@ class TilesService {
                 this._allAppsLoaded(moForReportModel);
             }
         }))
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe();
         BarsaApi.Ul.ApplicationCtrlr.on('GlobalRefreshTile', this._onApplication_GlobalRefreshTile.bind(this));
     }
-    get componentSettings$() {
-        return this._componentSettings$.asObservable();
-    }
     get isDark$() {
-        return this._themingService.currentTheme.pipe(map((c) => c && c.name.toLocaleLowerCase().includes('dark')));
+        return this._themingService.currentTheme.pipe(map$1((c) => c && c.name.toLocaleLowerCase().includes('dark')));
     }
     get appTileGroups() {
-        return this._appTileGroupsSource.getValue();
-    }
-    ngOnDestroy() {
-        this._OnDestroy$.next();
+        return this._store.appTileGroups();
     }
     loadAllAppTileGroupsByReportId(id) {
         this._loadAllAppTileGroupsByReportId(id);
@@ -112,42 +350,58 @@ class TilesService {
         if (!repIdProfileImage) {
             return;
         }
-        BarsaApi.Bw.RunBlMethodAsync({
-            Parameters: [repIdProfileImage],
-            Method: 'BarsaPortalGetProfileImage',
-            SuccessFn: (res) => {
+        this._tilesApi.getProfileImage(repIdProfileImage).subscribe({
+            next: (res) => {
                 const userInfo = BarsaApi.Ext.decode(res);
-                this._userInfo$.next(userInfo);
+                this.userInfoSig.set(userInfo);
             },
-            FailFn: () => { }
+            error: () => { }
         });
     }
     loadAppTileGroups(appTileGroup) {
-        if (!appTileGroup || this._appTileGroupLoaded[appTileGroup.Id]) {
+        if (!appTileGroup?.Id) {
             return;
         }
-        const allApps = this._appTileGroupsSource.getValue();
-        if (allApps) {
-            const selectedAppTilegroup = allApps?.MoDataList.find((c) => c.Id === appTileGroup.Id);
-            if (selectedAppTilegroup) {
-                this._loadAppTilesOfAppTileGroup(selectedAppTilegroup, allApps);
-                selectedAppTilegroup.$Children?.forEach((subGroup) => {
-                    this._loadAppTilesOfAppTileGroup(subGroup, allApps);
-                });
+        const allApps = this._store.appTileGroups();
+        if (!allApps) {
+            return;
+        }
+        const canonical = this._findCanonicalAppTileGroup(allApps, 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);
             }
+        });
+    }
+    /** True if tiles for this group were already loaded (canonical tree or in-flight flag). */
+    isAppTileGroupTilesLoaded(groupId) {
+        const allApps = this._store.appTileGroups();
+        if (!allApps) {
+            return false;
         }
+        const g = this._findCanonicalAppTileGroup(allApps, groupId);
+        return g ? this._isAppTileGroupTilesLoaded(g) : !!this._appTileGroupLoaded[groupId];
     }
     loadAppTileGroupsById(appTileGroupId) {
-        const allApps = this._appTileGroupsSource.getValue();
-        if (allApps) {
-            const selectedAppTilegroup = allApps?.MoDataList.find((c) => c.Id === appTileGroupId);
-            if (selectedAppTilegroup) {
-                const callback = () => {
-                    this._nextAllAppTileGroups(allApps);
-                };
-                this._loadAppTilesByAppTileGroupSetting(selectedAppTilegroup, callback);
-            }
+        const allApps = this._store.appTileGroups();
+        if (!allApps) {
+            return;
+        }
+        const selectedAppTilegroup = this._findCanonicalAppTileGroup(allApps, appTileGroupId);
+        if (!selectedAppTilegroup || this._isAppTileGroupTilesLoaded(selectedAppTilegroup)) {
+            return;
         }
+        const callback = () => {
+            this._nextAllAppTileGroups(allApps);
+        };
+        this._loadAppTilesByAppTileGroupSetting(selectedAppTilegroup, callback);
     }
     saveTilesStackContent(tilesStackContent) {
         const userPortalSettings = this._portalService.userPortalSettings['UserPortalSettings'];
@@ -169,88 +423,35 @@ class TilesService {
         }));
     }
     refreshTile(appTile) {
-        return new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [appTile.Id],
-                Method: 'RefreshTile',
-                SuccessFn: (newAppTile) => {
-                    if (newAppTile.MoDataList?.length) {
-                        resolve(newAppTile.MoDataList[0]);
-                    }
-                    reject(`refresh tile not found apptile width title: ${appTile.Title}`);
-                },
-                FailFn: () => {
-                    reject(null);
-                }
-            });
-        });
+        return firstValueFrom(this._tilesApi.refreshTile(appTile.Id).pipe(map$1((newAppTile) => {
+            if (newAppTile.MoDataList?.length) {
+                return newAppTile.MoDataList[0];
+            }
+            throw new Error(`refresh tile not found apptile width title: ${appTile.Title}`);
+        }))).catch(() => Promise.reject(null));
     }
     loadFromServerUserPortalSetting() {
-        return from(new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [],
-                Method: 'GetUserPortalSettings',
-                SuccessFn: (userPortalSetting) => {
-                    this._portalService.setData('UserPortalSetting', userPortalSetting);
-                    resolve(userPortalSetting);
-                },
-                FailFn: () => {
-                    reject(null);
-                }
-            });
+        return this._tilesApi.getUserPortalSettings().pipe(tap((userPortalSetting) => {
+            this._portalService.setData('UserPortalSetting', userPortalSetting);
         }));
     }
     toggleAppGroupSettingVisible(appGroup) {
-        return from(new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [appGroup.Id],
-                Method: 'ToggleAppTileGroupSettingVisible',
-                SuccessFn: (appGroupSetting) => {
-                    this._updateAppTileGroupSettings(appGroup, appGroupSetting);
-                    resolve(appGroupSetting);
-                },
-                FailFn: () => {
-                    reject(null);
-                }
-            });
-        })).pipe(tap((appGroupSetting) => {
+        return this._tilesApi.toggleGroupVisible(appGroup.Id).pipe(map$1((appGroupSetting) => this._updateAppTileGroupSettings(appGroup, appGroupSetting)), tap((appGroupSetting) => {
             this._updateAppGroupSetting(appGroup, appGroupSetting);
         }));
     }
     resetAppGroupSetting(appGroup) {
-        return from(new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [appGroup.Id],
-                Method: 'ResetAppTileGroupSettingVisible',
-                SuccessFn: (appGroupSetting) => {
-                    this._updateAppTileGroupSettings(appGroup, appGroupSetting);
-                    resolve(appGroupSetting);
-                },
-                FailFn: () => {
-                    reject(null);
-                }
-            });
-        })).pipe(tap((appGroupSetting) => {
+        return this._tilesApi.resetGroupSetting(appGroup.Id).pipe(tap((appGroupSetting) => {
+            this._updateAppTileGroupSettings(appGroup, appGroupSetting);
             this._updateAppGroupSetting(appGroup, appGroupSetting);
         }));
     }
     deleteAppGroup(appGroup) {
-        return from(new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [appGroup.Id],
-                Method: 'DeleteAppGroup',
-                SuccessFn: () => {
-                    resolve(appGroup.Id);
-                },
-                FailFn: () => {
-                    reject(null);
-                }
-            });
-        })).pipe(tap((appGroupId) => {
+        return this._tilesApi.deleteGroup(appGroup.Id).pipe(map$1(() => appGroup.Id), tap((appGroupId) => {
             const allApps = this.appTileGroups;
             if (allApps) {
-                allApps.MoDataList = allApps.MoDataList.filter((c) => c.Id !== appGroupId);
-                this._appTileGroupsSource.next({ ...allApps });
+                this._removeAppTileGroupFromTree(allApps, appGroupId);
+                this._nextAllAppTileGroups(allApps);
             }
         }));
     }
@@ -260,57 +461,24 @@ class TilesService {
         if (selectedGroup === null) {
             return of(null);
         }
-        return from(new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [selectedGroup.Id, appTile.Id, appTile.Title, appTile.Subtitle],
-                Method: 'ChangeAppTileSetting',
-                SuccessFn: (settings) => {
-                    this._updateAppTileGroupSettings(selectedGroup, settings);
-                    this._nextAllAppTileGroups(allApps);
-                    resolve(selectedGroup);
-                },
-                FailFn: () => {
-                    reject(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);
+            return selectedGroup;
         }));
     }
     saveAppGroupOrders(appGroups) {
         const groupOrders = appGroups.map((c) => c.Id);
-        return from(new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [groupOrders],
-                Method: 'ChangeOrderAppTileGroups',
-                SuccessFn: () => {
-                    resolve();
-                },
-                FailFn: () => {
-                    reject(null);
-                }
-            });
-        })).pipe();
+        return this._tilesApi.saveGroupOrders(groupOrders);
     }
-    createAppGroup(title) {
-        return from(new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [title],
-                Method: 'CreateAppTileGroup',
-                SuccessFn: (mo) => {
-                    resolve(mo);
-                },
-                FailFn: () => {
-                    reject(null);
-                }
-            });
-        })).pipe(tap((mo) => this.addAppGroup(mo)));
+    createAppGroup(title, parentId = null) {
+        const primaryParams = parentId ? [title, parentId] : [title];
+        return this._tilesApi.createAppTileGroup(primaryParams).pipe(tap((mo) => this.addAppGroup(mo)));
     }
     saveOrderAppTiles(appGroup, appTiles, isActionLink = false, appTileIdTransferedId = '0') {
-        BarsaApi.Bw.RunBlMethodAsync({
-            Parameters: [appGroup.Id, appTiles, isActionLink, appTileIdTransferedId],
-            Method: 'ChangeOrderAppTiles',
-            SuccessFn: () => { },
-            FailFn: () => { }
-        });
+        this._tilesApi
+            .saveTileOrders(appGroup.Id, appTiles, isActionLink, appTileIdTransferedId)
+            .subscribe({ error: () => { } });
     }
     updateAppTile(allApps, appTile) {
         if (!allApps || !appTile.A_App_Component) {
@@ -319,45 +487,48 @@ class TilesService {
         const selectedAppTile = this.findAppTileWithKey(allApps, '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._componentSettings$.next(selectedAppTile.A_App_Component.Settings);
+            this.componentSettingsSig.set(selectedAppTile.A_App_Component.Settings);
         }
     }
     updataAppTileSetting(selectedGroup, appGroupSetting) {
         const allApps = this.appTileGroups;
-        allApps?.MoDataList.forEach((appGroup) => {
+        if (!allApps) {
+            return;
+        }
+        allApps.MoDataList.forEach((appGroup) => {
             if (appGroup.Id === selectedGroup.Id) {
                 appGroup.UserAppTileGroupSetting = appGroupSetting;
             }
         });
-        this._appTileGroupsSource.next(allApps);
+        this._nextAllAppTileGroups(allApps);
     }
     addAppGroup(mo) {
         const allApps = this.appTileGroups;
         if (allApps) {
-            allApps.MoDataList.push(mo);
-            this._appTileGroupsSource.next(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);
         }
     }
-    singlePinTileChanged(appTileId) {
+    singlePinTileChanged(appTile, callback) {
         const allApps = this.appTileGroups;
-        const group = this.findGroupWithAppTileId(allApps, appTileId);
+        const group = this.findGroupWithAppTileId(allApps, appTile.Id);
         if (group === null) {
-            return of(false);
+            return;
         }
-        return from(new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [group.Id, appTileId],
-                Method: 'RemoveAppTileFromTileGroup',
-                SuccessFn: (setting) => {
-                    this._updateAppTileGroupSettings(group, setting);
-                    this._nextAllAppTileGroups(allApps);
-                    resolve(true);
-                },
-                FailFn: () => {
-                    reject(false);
-                }
-            });
-        }));
+        this.pinTileChanged([{ appTileGroup: group, visible: false }], appTile.App, callback);
     }
     pinTileChanged(appTileGroupsPin, app, callback) {
         const allApps = this.appTileGroups;
@@ -366,14 +537,12 @@ class TilesService {
             Id: c.appTileGroup.Id,
             TypeDefId: allApps?.TypeDefId
         }));
-        BarsaApi.Bw.RunBlMethodAsync({
-            Parameters: [groupChanges, visible, app.Id],
-            Method: 'TilePinChanged',
-            SuccessFn: (settings) => {
+        this._tilesApi.tilePinChanged(groupChanges, visible, app.Id).subscribe({
+            next: (settings) => {
                 this._tilePinChange(appTileGroupsPin, allApps);
                 callback(settings);
             },
-            FailFn: () => {
+            error: () => {
                 // TODO show error
             }
         });
@@ -405,13 +574,11 @@ class TilesService {
         this._nextAllAppTileGroups(allApps);
     }
     loadShellbar() {
-        BarsaApi.Bw.RunBlMethodAsync({
-            Parameters: [BarsaApi.LoginFormData.PortalId],
-            Method: 'LoadShellbarByPortalId',
-            SuccessFn: (shellbar) => {
-                this.shellbarSource.next(shellbar);
+        this._tilesApi.loadShellbarByPortalId(BarsaApi.LoginFormData.PortalId).subscribe({
+            next: (shellbar) => {
+                this.shellbarSig.set(shellbar);
             },
-            FailFn: () => {
+            error: () => {
                 // TODO show error
             }
         });
@@ -420,31 +587,46 @@ class TilesService {
         //     .then((moForReportModel) => this.shellbarSource.next(moForReportModel.MoDataList[0]));
     }
     _setTileInfo(appTile) {
-        {
-            const title = BarsaApi.Common.Util.TryGetValue(appTile, 'Component.Settings.TileSetting.Title', null);
-            appTile.TileTitle = !appTile.Title ? title : appTile.Title;
-            const subtitle = BarsaApi.Common.Util.TryGetValue(appTile, 'Component.Settings.TileSetting.Subtitle', null);
-            appTile.Subtitle = !appTile.Subtitle ? subtitle : appTile.Subtitle;
-        }
+        setTileInfo(appTile);
     }
     getTileGroups() {
-        return this._appTileGroupsSource.getValue();
+        return this._store.appTileGroups();
     }
     setEditHome(edit) {
-        this._edithomeSource.next(edit);
+        this.editHomeSig.set(edit);
+        this._store.editHome.set(edit);
+    }
+    /**
+     * After {@link TilesStore#replaceAllAppTileGroups} from another entry point (e.g. {@link TilesViewerService}),
+     * refresh derived home list (store already holds app groups).
+     */
+    syncExternalAppTileGroups() {
+        const allApps = this._store.appTileGroups();
+        if (allApps?.MoDataList) {
+            this._setHomeAppTileGroups(allApps.MoDataList);
+        }
+        else {
+            this.homeAppTileGroupsSig.set([]);
+        }
+    }
+    /** Call when the canonical tree is replaced from outside {@link TilesService} (e.g. viewer API). */
+    resetAppTileGroupLoadCache() {
+        this._appTileGroupLoaded = {};
     }
     _loadAllAppTileGroupsByReportId(id) {
         this._portalService
             .ReportExecuteById(id)
-            .subscribe((allApps) => this._nextAllAppTileGroups(allApps));
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((allApps) => this._applyLoadedAppTileGroups(allApps));
     }
     _loadAllAppTileGroups() {
         this._portalService
             .ReportExecute('AllAppTileGroups')
-            .subscribe((allApps) => this._nextAllAppTileGroups(allApps));
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((allApps) => this._applyLoadedAppTileGroups(allApps));
     }
     _onApplication_GlobalRefreshTile(_sender, appTilesTitle) {
-        const allApps = this._appTileGroupsSource.getValue();
+        const allApps = this._store.appTileGroups();
         const appTiles = [];
         if (allApps) {
             appTilesTitle.forEach((c) => {
@@ -454,32 +636,27 @@ class TilesService {
                 }
             });
             this._updateAppTileFromNotification(allApps, appTiles);
-            this._appTileGroupsSource.next(allApps);
+            this._nextAllAppTileGroups(allApps);
         }
     }
     _updateAppTileFromNotification(allApps, appTiles) {
         if (!appTiles?.length) {
             return;
         }
-        BarsaApi.Bw.RunBlMethodAsync({
-            Parameters: [appTiles.map((c) => (c.AppTile?.Id ? c.AppTile?.Id : c.Id))],
-            Method: 'RefreshAppTiles',
-            SuccessFn: (result) => {
+        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._appTileGroupsSource.next({ ...allApps });
+                this._nextAllAppTileGroups(allApps);
             },
-            FailFn: () => { }
+            error: () => { }
         });
     }
     _allAppsLoaded(moForReportModel) {
-        moForReportModel.MoDataList.forEach((c) => {
-            this._prepareNavigator(c);
-        });
         this._setHomeAppTileGroups(moForReportModel.MoDataList);
     }
     _loadAppTilesOfAppTileGroup(selectedAppTilegroup, allApps) {
-        const callback = () => {
-            this._nextAllAppTileGroups(allApps);
+        const callback = (appTileGroup) => {
+            this._nextAllAppTileGroups(allApps, appTileGroup);
         };
         if (!selectedAppTilegroup.UserAppTileGroupSetting || BarsaApi.LoginFormData.IsAnonymous) {
             this._loadAppTilesByAppTileGroup(selectedAppTilegroup, callback);
@@ -490,14 +667,12 @@ class TilesService {
     }
     _loadAppTilesByAppTileGroup(appGroup, callback) {
         this._appTileGroupLoaded[appGroup.Id] = true;
-        BarsaApi.Bw.RunBlMethodAsync({
-            Parameters: [appGroup.Id],
-            Method: 'LoadAllAppTilesByAppTileGroup',
-            SuccessFn: (appTiles) => {
-                this._updateAppTilesOfAppTileGroup(appGroup, appTiles);
-                callback();
+        this._tilesApi.loadAppTilesByGroup(appGroup.Id).subscribe({
+            next: (appTiles) => {
+                const x = this._updateAppTilesOfAppTileGroup(appGroup, appTiles);
+                callback(x);
             },
-            FailFn: () => {
+            error: () => {
                 // TODO show error
             }
         });
@@ -525,52 +700,131 @@ class TilesService {
                 this.appTileGroups.MoDataList[apptileGroupIndex] = selectedAppTilegroup;
             }
         }
+        return selectedAppTilegroup;
     }
     _loadAppTilesByAppTileGroupSetting(appTileGroup, callback) {
         this._appTileGroupLoaded[appTileGroup.Id] = true;
-        BarsaApi.Bw.RunBlMethodAsync({
-            Parameters: [appTileGroup.Id],
-            Method: 'LoadAllAppTilesByUserAppTileGroupSettings',
-            SuccessFn: (appTiles) => {
-                this._updateAppTilesOfAppTileGroup(appTileGroup, appTiles);
-                callback();
+        this._tilesApi.loadAppTilesByUserGroupSettings(appTileGroup.Id).subscribe({
+            next: (appTiles) => {
+                const x = this._updateAppTilesOfAppTileGroup(appTileGroup, appTiles);
+                callback(x);
             },
-            FailFn: () => {
+            error: () => {
                 // TODO show error
             }
         });
     }
-    _nextAllAppTileGroups(newAllApps = null) {
-        const allApps = newAllApps ?? this._appTileGroupsSource.getValue();
-        this._appTileGroupsSource.next(allApps ? { ...allApps } : null);
+    /** Report/API load: full tree + {@link prepareNavigator} on all roots (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
             .filter((c) => c.Visible)
             .sort((a, b) => Number(a.navigatorOrderItem) - Number(b.navigatorOrderItem));
-        this._homeAppTileGroupsSource.next(newAppGroups);
+        this.homeAppTileGroupsSig.set(newAppGroups);
     }
     _saveUserPortalSettings(userPortalSettings) {
-        return new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [new BarsaApi.Common.MetaObjectWeb(userPortalSettings)],
-                Method: 'SaveUserPortalSettings',
-                SuccessFn: () => {
-                    resolve();
-                },
-                FailFn: () => {
-                    reject(null);
-                }
-            });
-        });
+        return firstValueFrom(this._tilesApi.saveUserPortalSettings(new BarsaApi.Common.MetaObjectWeb(userPortalSettings)));
     }
     _updateAppGroupSetting(appGroup, appGroupSetting) {
         const allApps = this.appTileGroups;
-        const selectedAppGroup = allApps?.MoDataList.find((c) => c.Id === appGroup.Id);
+        const selectedAppGroup = this._findGroupWithAppGroupId(allApps, appGroup.Id);
         if (selectedAppGroup && allApps) {
-            selectedAppGroup.UserAppTileGroupSetting = appGroupSetting;
-            this._nextAllAppTileGroups(allApps);
+            selectedAppGroup.UserAppTileGroupSetting = appGroupSetting.UserAppTileGroupSetting;
+            this._nextAllAppTileGroups(allApps, selectedAppGroup);
         }
     }
     findAppTileWithKey(allApps, key, value) {
@@ -647,43 +901,11 @@ class TilesService {
                 appTileGroup.AppTiles.MoDataList[i] = { ...appTileGroup.AppTiles.MoDataList[i], ...ex };
             }
         });
-        this._prepareNavigator(appTileGroup);
         // this._nextAllAppTileGroups();
         return appTileGroup;
     }
     _prepareNavigator(appTileGroup) {
-        appTileGroup.$TileSettingChanged = false;
-        appTileGroup.$Disabledpin = false;
-        appTileGroup.navigatorTitle = BarsaApi.Common.Util.TryGetValue(appTileGroup, 'UserAppTileGroupSetting.Title', appTileGroup.Title);
-        appTileGroup.navigatorTitle = appTileGroup.navigatorTitle =
-            appTileGroup.navigatorTitle === '' ? appTileGroup.Title : appTileGroup.navigatorTitle;
-        appTileGroup.navigatorTitle = this._bbbTranslatePipe.transform(appTileGroup.navigatorTitle);
-        const orderItem = BarsaApi.Common.Util.TryGetValue(appTileGroup, 'UserAppTileGroupSetting.OrderItem', null);
-        if (orderItem !== null) {
-            appTileGroup.navigatorOrderItem = orderItem;
-        }
-        else {
-            appTileGroup.navigatorOrderItem = appTileGroup.OrderItem;
-        }
-        const visible = BarsaApi.Common.Util.TryGetValue(appTileGroup, 'UserAppTileGroupSetting.Visible', null);
-        if (visible !== null) {
-            appTileGroup.navigatorVisible = visible;
-        }
-        else {
-            appTileGroup.navigatorVisible = appTileGroup.Visible;
-        }
-        const appTiles = appTileGroup.AppTiles?.MoDataList ?? [];
-        appTileGroup.navigatorTiles = appTiles
-            .filter((c) => c.Visible && !c.IsActionLink)
-            .sort((a, b) => Number(a.OrderItem) - Number(b.OrderItem));
-        appTileGroup.navigatorActionLinks = appTiles
-            .filter((c) => c.Visible && c.IsActionLink)
-            .sort((a, b) => Number(a.OrderItemActionLink) - Number(b.OrderItemActionLink));
-        appTileGroup.navigatorTiles.forEach((appTile) => this._setTileInfo(appTile));
-        appTileGroup.navigatorActionLinks.forEach((appTile) => this._setTileInfo(appTile));
-        appTileGroup.$Children?.forEach((subAppTileGroup) => {
-            this._prepareNavigator(subAppTileGroup);
-        });
+        prepareNavigator(appTileGroup, this._bbbTranslatePipe);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesService, providedIn: 'root' }); }
@@ -865,12 +1087,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             }] } });
 
 class TileComponent extends TilePropsComponent {
+    constructor() {
+        super(...arguments);
+        /** Open "change group" (pin) dialog from tile menu */
+        this.changeGroupClick = new EventEmitter();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TileComponent, isStandalone: false, selector: "bt-tile", inputs: { type: "type", footerTemplate: "footerTemplate", footer: "footer", title: "title", icon: "icon", subtitle: "subtitle", isDouble: "isDouble", darkMode: "darkMode", disableClick: "disableClick", edit: "edit", dynamicCommand: "dynamicCommand", backColor: "backColor", hideHeader: "hideHeader", setToStorage: "setToStorage", listMode: "listMode", navigateBackOnClick: "navigateBackOnClick" }, usesInheritance: true, ngImport: i0, template: "@if(!listMode) {\r\n<fd-tile\r\n    [type]=\"type\"\r\n    [double]=\"isDouble\"\r\n    [action]=\"edit\"\r\n    tileStyle\r\n    [backColor]=\"darkMode ? '' : backColor\"\r\n    [size]=\"'s'\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"title\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"dynamicCommand\"\r\n>\r\n    @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n    } @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    } @if(!hideHeader){\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title [overflowText]=\"title | bbbTranslate\">\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    }\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\r\n</fd-tile>\r\n}@else{\r\n<span fd-list-title> {{ title | bbbTranslate }} </span>\r\n<span fd-list-secondary> {{ subtitle | bbbTranslate }} </span>\r\n@if(icon){ <i fd-list-icon [glyph]=\"icon\"></i>} }\r\n<ng-template #defaultFooter>\r\n    @if (footer) {\r\n    <div\r\n        fd-tile-footer\r\n        bt-footer-tile\r\n        [secondSection]=\"footer.SecondSection\"\r\n        [twoColumn]=\"footer.twoColumn\"\r\n        [firstSection]=\"footer.FirstSection\"\r\n    ></div>\r\n\r\n    }\r\n</ng-template>\r\n<fd-menu #menu>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host,fd-tile{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { 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.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { 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.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i4.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "directive", type: i1$1.TileHeaderDirective, selector: "[fdTileHeader], [fd-tile-header]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileTitleDirective, selector: "[fdTileTitle], [fd-tile-title]" }, { kind: "directive", type: i1$1.TileSubtitleDirective, selector: "[fdTileTitle], [fd-tile-subtitle]" }, { kind: "directive", type: i1$1.TileActionCloseDirective, selector: "[fdTileActionClose], [fd-tile-action-close]", inputs: ["class"] }, { kind: "directive", type: i1$1.TileActionIndicatorDirective, selector: "[fdTileActionIndicator], [fd-tile-action-indicator]", inputs: ["class"] }, { kind: "directive", type: i5.OverflowTextDirective, selector: "[overflowText]", exportAs: ["overflowText"] }, { kind: "component", type: FooterTileComponent, selector: "bt-footer-tile,div[bt-footer-tile]", inputs: ["firstSection", "secondSection", "twoColumn"] }, { kind: "directive", type: TileStyleDirective, selector: "[tileStyle]", inputs: ["backColor"] }, { kind: "directive", type: TileDynamicCommandDirective, selector: "[tileDynCommand]", inputs: ["disableClick", "edit", "dynamicCommand", "title", "setToStorage", "navigateBackOnClick"] }, { 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: TileComponent, isStandalone: false, selector: "bt-tile", inputs: { type: "type", footerTemplate: "footerTemplate", footer: "footer", title: "title", icon: "icon", subtitle: "subtitle", isDouble: "isDouble", darkMode: "darkMode", disableClick: "disableClick", edit: "edit", dynamicCommand: "dynamicCommand", backColor: "backColor", hideHeader: "hideHeader", setToStorage: "setToStorage", listMode: "listMode", navigateBackOnClick: "navigateBackOnClick" }, outputs: { changeGroupClick: "changeGroupClick" }, usesInheritance: true, ngImport: i0, template: "@if(!listMode) {\r\n<fd-tile\r\n    [type]=\"type\"\r\n    [double]=\"isDouble\"\r\n    [action]=\"edit\"\r\n    tileStyle\r\n    [backColor]=\"darkMode ? '' : backColor\"\r\n    [size]=\"'s'\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"title\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"dynamicCommand\"\r\n>\r\n    @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n    } @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    } @if(!hideHeader){\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title [overflowText]=\"title | bbbTranslate\">\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    }\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\r\n</fd-tile>\r\n}@else{\r\n<span fd-list-title> {{ title | bbbTranslate }} </span>\r\n<span fd-list-secondary> {{ subtitle | bbbTranslate }} </span>\r\n@if(icon){ <i fd-list-icon [glyph]=\"icon\"></i>} }\r\n<ng-template #defaultFooter>\r\n    @if (footer) {\r\n    <div\r\n        fd-tile-footer\r\n        bt-footer-tile\r\n        [secondSection]=\"footer.SecondSection\"\r\n        [twoColumn]=\"footer.twoColumn\"\r\n        [firstSection]=\"footer.FirstSection\"\r\n    ></div>\r\n\r\n    }\r\n</ng-template>\r\n<fd-menu #menu>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); changeGroupClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Groups' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host,fd-tile{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { 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.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { 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.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i4.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "directive", type: i1$1.TileHeaderDirective, selector: "[fdTileHeader], [fd-tile-header]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileTitleDirective, selector: "[fdTileTitle], [fd-tile-title]" }, { kind: "directive", type: i1$1.TileSubtitleDirective, selector: "[fdTileTitle], [fd-tile-subtitle]" }, { kind: "directive", type: i1$1.TileActionCloseDirective, selector: "[fdTileActionClose], [fd-tile-action-close]", inputs: ["class"] }, { kind: "directive", type: i1$1.TileActionIndicatorDirective, selector: "[fdTileActionIndicator], [fd-tile-action-indicator]", inputs: ["class"] }, { kind: "directive", type: i5.OverflowTextDirective, selector: "[overflowText]", exportAs: ["overflowText"] }, { kind: "component", type: FooterTileComponent, selector: "bt-footer-tile,div[bt-footer-tile]", inputs: ["firstSection", "secondSection", "twoColumn"] }, { kind: "directive", type: TileStyleDirective, selector: "[tileStyle]", inputs: ["backColor"] }, { kind: "directive", type: TileDynamicCommandDirective, selector: "[tileDynCommand]", inputs: ["disableClick", "edit", "dynamicCommand", "title", "setToStorage", "navigateBackOnClick"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if(!listMode) {\r\n<fd-tile\r\n    [type]=\"type\"\r\n    [double]=\"isDouble\"\r\n    [action]=\"edit\"\r\n    tileStyle\r\n    [backColor]=\"darkMode ? '' : backColor\"\r\n    [size]=\"'s'\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"title\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"dynamicCommand\"\r\n>\r\n    @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n    } @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    } @if(!hideHeader){\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title [overflowText]=\"title | bbbTranslate\">\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    }\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\r\n</fd-tile>\r\n}@else{\r\n<span fd-list-title> {{ title | bbbTranslate }} </span>\r\n<span fd-list-secondary> {{ subtitle | bbbTranslate }} </span>\r\n@if(icon){ <i fd-list-icon [glyph]=\"icon\"></i>} }\r\n<ng-template #defaultFooter>\r\n    @if (footer) {\r\n    <div\r\n        fd-tile-footer\r\n        bt-footer-tile\r\n        [secondSection]=\"footer.SecondSection\"\r\n        [twoColumn]=\"footer.twoColumn\"\r\n        [firstSection]=\"footer.FirstSection\"\r\n    ></div>\r\n\r\n    }\r\n</ng-template>\r\n<fd-menu #menu>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host,fd-tile{display:block}\n"] }]
+            args: [{ selector: 'bt-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if(!listMode) {\r\n<fd-tile\r\n    [type]=\"type\"\r\n    [double]=\"isDouble\"\r\n    [action]=\"edit\"\r\n    tileStyle\r\n    [backColor]=\"darkMode ? '' : backColor\"\r\n    [size]=\"'s'\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"title\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"dynamicCommand\"\r\n>\r\n    @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n    } @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    } @if(!hideHeader){\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title [overflowText]=\"title | bbbTranslate\">\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    }\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\r\n</fd-tile>\r\n}@else{\r\n<span fd-list-title> {{ title | bbbTranslate }} </span>\r\n<span fd-list-secondary> {{ subtitle | bbbTranslate }} </span>\r\n@if(icon){ <i fd-list-icon [glyph]=\"icon\"></i>} }\r\n<ng-template #defaultFooter>\r\n    @if (footer) {\r\n    <div\r\n        fd-tile-footer\r\n        bt-footer-tile\r\n        [secondSection]=\"footer.SecondSection\"\r\n        [twoColumn]=\"footer.twoColumn\"\r\n        [firstSection]=\"footer.FirstSection\"\r\n    ></div>\r\n\r\n    }\r\n</ng-template>\r\n<fd-menu #menu>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); changeGroupClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Groups' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host,fd-tile{display:block}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], footerTemplate: [{
@@ -903,6 +1130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Input
             }], navigateBackOnClick: [{
                 type: Input
+            }], changeGroupClick: [{
+                type: Output
             }] } });
 
 class BaseBtTileComponent extends BaseTileComponent {
@@ -917,14 +1146,27 @@ class BaseBtTileComponent extends BaseTileComponent {
             this._renderer2.addClass(this._btTitleElementRef.nativeElement, 'disable-tile-resize');
         }
         this._tilesService.componentSettings$
-            .pipe(takeUntil$1(this._onDestroy$), filter$1((c) => c.Id === this.settings.Id))
+            .pipe(takeUntil(this._onDestroy$), filter$1((c) => c.Id === this.settings.Id))
             .subscribe((_c) => {
             this._cdr.detectChanges();
         });
         this._renderer2.addClass(this.el.nativeElement, 'barsa-tile');
     }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        let detectChanges = false;
+        Object.keys(changes).forEach((key) => {
+            if (!changes[key].firstChange) {
+                this[key] = changes[key].currentValue;
+                detectChanges = true;
+            }
+        });
+        if (detectChanges) {
+            this._cdr.detectChanges();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BaseBtTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BaseBtTileComponent, isStandalone: false, selector: "bt-base-bt-tile", viewQueries: [{ propertyName: "_btTitleElementRef", first: true, predicate: TileComponent, descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BaseBtTileComponent, isStandalone: false, selector: "bt-base-bt-tile", viewQueries: [{ propertyName: "_btTitleElementRef", first: true, predicate: TileComponent, descendants: true, read: ElementRef, static: true }], 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: BaseBtTileComponent, decorators: [{
             type: Component,
@@ -939,6 +1181,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 args: [TileComponent, { read: ElementRef, static: true }]
             }] } });
 
+;
+;
+;
+;
+
 class TilePropPipe {
     transform(data, prop, parameters) {
         if (data) {
@@ -1006,11 +1253,11 @@ class FormTileComponent extends BaseBtTileComponent {
         BarsaApi.Bw.RunBlMethodAsync(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FormTileComponent, isStandalone: false, selector: "bt-form-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    [disableClick]=\"true\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (params) {\r\n        <bnrc-form [params]=\"params\"></bnrc-form>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}bnrc-form{z-index:3}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i5.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "UlvMainCtrlr", "formPanelCtrlId", "saveOnChange", "inlineEditInReport"], outputs: ["titleChanged", "moChanged", "formClose", "uiComponent", "formRendered", "bruleAction", "beforeTransition", "afterTransition"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FormTileComponent, isStandalone: false, selector: "bt-form-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    [disableClick]=\"true\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (params) {\r\n        <bnrc-form [params]=\"params\"></bnrc-form>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}bnrc-form{z-index:3}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i5.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "UlvMainCtrlr", "formPanelCtrlId", "saveOnChange", "inlineEditInReport"], outputs: ["titleChanged", "moChanged", "formClose", "uiComponent", "formRendered", "bruleAction", "beforeTransition", "afterTransition"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-form-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    [disableClick]=\"true\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (params) {\r\n        <bnrc-form [params]=\"params\"></bnrc-form>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}bnrc-form{z-index:3}\n"] }]
+            args: [{ selector: 'bt-form-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    [disableClick]=\"true\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (params) {\r\n        <bnrc-form [params]=\"params\"></bnrc-form>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}bnrc-form{z-index:3}\n"] }]
         }] });
 
 class TileGroupBaseComponent extends BaseComponent {
@@ -1019,9 +1266,11 @@ class TileGroupBaseComponent extends BaseComponent {
         this.tilesDropped = new EventEmitter();
         this.hideAppTileClick = new EventEmitter();
         this.renameAppTileClick = new EventEmitter();
+        this.changeGroupAppTileClick = new EventEmitter();
         this.toggleGroup = new EventEmitter();
         this.resetGroup = new EventEmitter();
         this.deleteGroup = new EventEmitter();
+        this.isJustifyStart = signal(false);
         this._cdr = inject(ChangeDetectorRef);
     }
     ngOnChanges(changes) {
@@ -1036,6 +1285,7 @@ class TileGroupBaseComponent extends BaseComponent {
         if (detectChanges) {
             this.detectChanges();
         }
+        this._setIsJustifyStart();
     }
     onDrop(appTileGroup, event) {
         if (!this.edit || appTileGroup.Locked) {
@@ -1049,6 +1299,9 @@ class TileGroupBaseComponent extends BaseComponent {
     onAppTileRenameClick(appTile) {
         this.renameAppTileClick.emit(appTile);
     }
+    onAppTileChangeGroupClick(appTile) {
+        this.changeGroupAppTileClick.emit(appTile);
+    }
     onDelete(appTileGroup) {
         this.deleteGroup.emit(appTileGroup);
     }
@@ -1061,8 +1314,12 @@ class TileGroupBaseComponent extends BaseComponent {
     detectChanges() {
         this._cdr.detectChanges();
     }
+    _setIsJustifyStart() {
+        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", stackContent: "stackContent", cssStyles: "cssStyles", edit: "edit", rtl: "rtl", isAppTileSubGroup: "isAppTileSubGroup", deviceSize: "deviceSize", isLast: "isLast" }, outputs: { tilesDropped: "tilesDropped", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TileGroupBaseComponent, decorators: [{
             type: Component,
@@ -1076,12 +1333,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Input
             }], appTileGroup: [{
                 type: Input
+            }], childrenAppTileGroup: [{
+                type: Input
             }], stackContent: [{
                 type: Input
             }], cssStyles: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], visible: [{
+                type: Input
             }], rtl: [{
                 type: Input
             }], isAppTileSubGroup: [{
@@ -1096,6 +1357,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Output
             }], renameAppTileClick: [{
                 type: Output
+            }], changeGroupAppTileClick: [{
+                type: Output
             }], toggleGroup: [{
                 type: Output
             }], resetGroup: [{
@@ -1134,7 +1397,7 @@ class ActionsLinkComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ActionsLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ActionsLinkComponent, isStandalone: false, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", edit: "edit", deviceSize: "deviceSize" }, host: { properties: { "class.hide": "this.hide", "class": "this._class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@for (actionItem of actionsLink; track actionItem.Id) {\r\n<bt-action-item\r\n    cdkDrag\r\n    [data]=\"actionItem\"    \r\n    [title]=\"actionItem | tileProp: 'Title'\"\r\n    [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\r\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\r\n    [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\r\n    [footer]=\"actionItem | tileProp: 'Footer'\"\r\n    [icon]=\"actionItem | tileProp: 'Icon'\"\r\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\r\n    [mo]=\"actionItem\"\r\n    [class.isMobile]=\"isMobile\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"    \r\n    [title]=\"actionItem | tileProp: 'Title'\"    \r\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\r\n>\r\n</bt-action-item>\r\n}\r\n", styles: [":host{display:flex;width:100%;row-gap:3px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:3px;padding:1rem 0}:host.isMobile{padding:0 1.3rem}bt-action-item{margin-top:auto;margin-bottom:auto}\n"], dependencies: [{ kind: "directive", type: i3$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: ActionItemComponent, selector: "bt-action-item" }, { kind: "directive", type: TileDynamicCommandDirective, selector: "[tileDynCommand]", inputs: ["disableClick", "edit", "dynamicCommand", "title", "setToStorage", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ActionsLinkComponent, isStandalone: false, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", edit: "edit", deviceSize: "deviceSize" }, host: { properties: { "class.hide": "this.hide", "class": "this._class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@for (actionItem of actionsLink; track actionItem.Id) {\r\n<bt-action-item\r\n    cdkDrag\r\n    [data]=\"actionItem\"    \r\n    [title]=\"actionItem | tileProp: 'Title'\"\r\n    [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\r\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\r\n    [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\r\n    [footer]=\"actionItem | tileProp: 'Footer'\"\r\n    [icon]=\"actionItem | tileProp: 'Icon'\"\r\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\r\n    [mo]=\"actionItem\"\r\n    [class.isMobile]=\"isMobile\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"    \r\n    [title]=\"actionItem | tileProp: 'Title'\"    \r\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\r\n>\r\n</bt-action-item>\r\n}\r\n", styles: [":host{display:flex;width:100%;row-gap:3px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:3px;padding:1rem 0}:host.isMobile{padding:0 1.3rem}bt-action-item{margin-top:auto;margin-bottom:auto}\n"], dependencies: [{ 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: ActionItemComponent, selector: "bt-action-item" }, { kind: "directive", type: TileDynamicCommandDirective, selector: "[tileDynCommand]", inputs: ["disableClick", "edit", "dynamicCommand", "title", "setToStorage", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ActionsLinkComponent, decorators: [{
             type: Component,
@@ -1158,6 +1421,7 @@ class TileRendererDirective extends BaseDirective {
         super(...arguments);
         this.hideClick = new EventEmitter();
         this.renameClick = new EventEmitter();
+        this.changeGroupClick = new EventEmitter();
         this._cdr = inject(ChangeDetectorRef);
         this._vcr = inject(ViewContainerRef);
         this._injector = inject(Injector);
@@ -1170,7 +1434,7 @@ class TileRendererDirective extends BaseDirective {
         const { Module, ModuleFileName, Name, Selector } = this.component;
         this._portalService
             .getComponent(Module, ModuleFileName, Name, Selector, this._injector)
-            .pipe(takeUntil(this._onDestroy$))
+            .pipe(takeUntil$1(this._onDestroy$))
             .subscribe((componentRef) => {
             const instance = componentRef.instance;
             instance.data = this.data;
@@ -1180,10 +1444,12 @@ class TileRendererDirective extends BaseDirective {
             instance.listMode = this.listMode;
             instance.groupType = this.groupType;
             instance.navigateBackOnClick = this.navigateBackOnClick;
-            instance.hideClick?.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
+            instance.hideClick?.pipe(takeUntil$1(this._onDestroy$)).subscribe(() => {
                 this.hideClick.emit();
             });
-            instance.renameClick?.pipe(takeUntil(this._onDestroy$)).subscribe(() => this.renameClick.emit());
+            instance.renameClick?.pipe(takeUntil$1(this._onDestroy$)).subscribe(() => this.renameClick.emit());
+            instance.changeGroupClick?.pipe(takeUntil$1(this._onDestroy$))
+                .subscribe(() => this.changeGroupClick.emit());
             this._vcr.insert(componentRef.hostView);
             this._tileRef = componentRef;
             // this._cdr.detectChanges();
@@ -1194,6 +1460,9 @@ class TileRendererDirective extends BaseDirective {
         if (edit && !edit.firstChange) {
             this._tileRef.instance.setEditHome(edit.currentValue);
         }
+        else {
+            this._tileRef?.instance.ngOnChanges(changes);
+        }
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -1202,7 +1471,7 @@ class TileRendererDirective extends BaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TileRendererDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: TileRendererDirective, isStandalone: false, selector: "[tileRenderer]", inputs: { component: "component", data: "data", groupType: "groupType", edit: "edit", deviceSize: "deviceSize", setToStorage: "setToStorage", listMode: "listMode", navigateBackOnClick: "navigateBackOnClick" }, outputs: { hideClick: "hideClick", renameClick: "renameClick" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: TileRendererDirective, isStandalone: false, selector: "[tileRenderer]", inputs: { component: "component", data: "data", groupType: "groupType", edit: "edit", deviceSize: "deviceSize", setToStorage: "setToStorage", listMode: "listMode", navigateBackOnClick: "navigateBackOnClick" }, outputs: { hideClick: "hideClick", renameClick: "renameClick", changeGroupClick: "changeGroupClick" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TileRendererDirective, decorators: [{
             type: Directive,
@@ -1230,6 +1499,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Output
             }], renameClick: [{
                 type: Output
+            }], changeGroupClick: [{
+                type: Output
             }] } });
 
 class TileClassDirective extends BaseDirective {
@@ -1293,11 +1564,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>\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]=\"!appTileGroup.navigatorVisible ? ('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.Predefined) {\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]=\"appTileGroup.navigatorTiles?.length % 3 !== 0\"\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                ></span>\r\n            </div>\r\n            } @if (edit) {\r\n            <fd-tile class=\"add-tile\" [routerLink]=\"['/home/appfinder']\">\r\n                <div style=\"margin: 0\">\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\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 appTileGroup.$Children; track appTileSubGroup.Id;let last=$last) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\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></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: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$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: i3$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: i4$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: i1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i7.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i7.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i7.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i7.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i7.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: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i5$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5$1.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"] }, { 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", 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 }); }
 }
 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>\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]=\"!appTileGroup.navigatorVisible ? ('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.Predefined) {\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]=\"appTileGroup.navigatorTiles?.length % 3 !== 0\"\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                ></span>\r\n            </div>\r\n            } @if (edit) {\r\n            <fd-tile class=\"add-tile\" [routerLink]=\"['/home/appfinder']\">\r\n                <div style=\"margin: 0\">\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\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 appTileGroup.$Children; track appTileSubGroup.Id;let last=$last) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\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></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, 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"] }]
         }] });
 
 class EmptyListDirective {
@@ -1345,7 +1616,7 @@ class AppFinderAppListComponent extends BaseComponent {
         this.pinClick.emit(app);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AppFinderAppListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AppFinderAppListComponent, isStandalone: false, selector: "bt-app-finder-app-list", inputs: { appGroup: "appGroup", mobile: "mobile", searchTerm: "searchTerm", pinnedAppInAppTileGroups: "pinnedAppInAppTileGroups" }, outputs: { pinClick: "pinClick", appTileGroupsPinChange: "appTileGroupsPinChange" }, usesInheritance: true, ngImport: i0, template: "@if (appGroup) {\r\n<h5 fd-title *emptyList=\"appGroup.Apps\"></h5>\r\n@if ((appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }).length > 0) {\r\n<div class=\"tw-flex tw-gap-3 tw-flex-wrap tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 xl:tw-grid-cols-4 2xl:tw-grid-cols-5\">\r\n    @for (app of appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }; track app; let i = $index) {\r\n    <fd-card >\r\n        <fd-card-header [dynCommand]=\"app.DynamicCommand\" [mo]=\"app\">\r\n            <fd-card-main-header>\r\n                @if (app.Icon) {\r\n                <fd-avatar [glyph]=\"app.Icon\" size=\"s\" [title]=\"app.Title\"></fd-avatar>\r\n                }\r\n                <h2 fd-card-title class=\"header-title ellapsis\" [attr.title]=\"app.Title\">\r\n                    {{ app.Title }}\r\n                </h2>\r\n                <h3 fd-card-subtitle></h3>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content>\r\n            <button\r\n                fd-button\r\n                [glyph]=\"'pushpin-off'\"\r\n                [fdType]=\"\r\n                    pinnedAppInAppTileGroups[app.Id]\r\n                        ? pinnedAppInAppTileGroups[app.Id].length\r\n                            ? 'emphasized'\r\n                            : 'standard'\r\n                        : app.$HasPinned\r\n                        ? 'emphasized'\r\n                        : 'standard'\r\n                \"\r\n                (click)=\"onPinTap(app)\"\r\n            ></button>\r\n        </fd-card-content>\r\n    </fd-card>\r\n    }\r\n</div>\r\n} }\r\n", styles: [":host{display:block;flex-grow:1;padding:1rem}button{cursor:pointer}h3{padding-bottom:.5rem}fd-fixed-card-layout,h5{padding-bottom:2rem;display:block}.header-title{padding-bottom:30px}fd-card-content{padding:10px;cursor:default}@media (max-width: 767px){:host{padding:0 1rem}}\n"], dependencies: [{ kind: "component", type: i1$4.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.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$1.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i2$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i2$1.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i2$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i2$1.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i2$1.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i5.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: EmptyListDirective, selector: "[emptyList]", inputs: ["emptyList"] }, { kind: "pipe", type: i5.FilterStringPipe, name: "filterStr" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AppFinderAppListComponent, isStandalone: false, selector: "bt-app-finder-app-list", inputs: { appGroup: "appGroup", mobile: "mobile", searchTerm: "searchTerm", pinnedAppInAppTileGroups: "pinnedAppInAppTileGroups" }, outputs: { pinClick: "pinClick", appTileGroupsPinChange: "appTileGroupsPinChange" }, usesInheritance: true, ngImport: i0, template: "@if (appGroup) {\r\n<h5 fd-title *emptyList=\"appGroup.Apps\"></h5>\r\n@if ((appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }).length > 0) {\r\n<div class=\"tw-flex tw-gap-3 tw-flex-wrap tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 xl:tw-grid-cols-4 2xl:tw-grid-cols-5\">\r\n    @for (app of appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }; track app; let i = $index) {\r\n    <fd-card >\r\n        <fd-card-header [dynCommand]=\"app.DynamicCommand\" [mo]=\"app\">\r\n            <fd-card-main-header>\r\n                @if (app.Icon) {\r\n                <fd-avatar [glyph]=\"app.Icon\" size=\"s\" [title]=\"app.Title\"></fd-avatar>\r\n                }\r\n                <h2 fd-card-title class=\"header-title ellapsis\" [attr.title]=\"app.Title\">\r\n                    {{ app.Title }}\r\n                </h2>\r\n                <h3 fd-card-subtitle></h3>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content>\r\n            <button\r\n                fd-button\r\n                [glyph]=\"'pushpin-off'\"\r\n                [fdType]=\"\r\n                    pinnedAppInAppTileGroups[app.Id]\r\n                        ? pinnedAppInAppTileGroups[app.Id].length\r\n                            ? 'emphasized'\r\n                            : 'standard'\r\n                        : app.$HasPinned\r\n                        ? 'emphasized'\r\n                        : 'standard'\r\n                \"\r\n                (click)=\"onPinTap(app)\"\r\n            ></button>\r\n        </fd-card-content>\r\n    </fd-card>\r\n    }\r\n</div>\r\n} }\r\n", styles: [":host{display:block;flex-grow:1;padding:1rem}button{cursor:pointer}h3{padding-bottom:.5rem}fd-fixed-card-layout,h5{padding-bottom:2rem;display:block}.header-title{padding-bottom:30px}fd-card-content{padding:10px;cursor:default}@media (max-width: 767px){:host{padding:0 1rem}}\n"], dependencies: [{ 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.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$2.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i2$2.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i2$2.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i2$2.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i2$2.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i2$2.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i5.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: EmptyListDirective, selector: "[emptyList]", inputs: ["emptyList"] }, { kind: "pipe", type: i5.FilterStringPipe, name: "filterStr" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AppFinderAppListComponent, decorators: [{
             type: Component,
@@ -1411,7 +1682,7 @@ class AppFinderComponent extends BaseComponent {
         this.searchTerm = this.searchTerm2;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AppFinderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AppFinderComponent, isStandalone: false, selector: "bt-app-finder", inputs: { appGroups: "appGroups", deviceSize: "deviceSize", sideContentSize: "sideContentSize", selectedAppGroup: "selectedAppGroup", selectedAppGroupId: "selectedAppGroupId", mobile: "mobile", contentDensity: "contentDensity", contentHeight: "contentHeight", pinnedAppInAppTileGroups: "pinnedAppInAppTileGroups" }, outputs: { pinClick: "pinClick", selectedAppGroupIdChange: "selectedAppGroupIdChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\">\r\n    @if (appGroups) {\r\n    <fd-toolbar [fdType]=\"'solid'\">\r\n        @if (deviceSize === 's') {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [fdMenu]=\"true\"\r\n            [glyph]=\"'menu2'\"\r\n            [fdType]=\"'transparent'\"\r\n            [fdMenuTrigger]=\"menu\"\r\n            [label]=\"selectedAppGroup?.Title\"\r\n        ></button>\r\n        }\r\n        <fd-toolbar-spacer></fd-toolbar-spacer>\r\n        <fd-input-group\r\n            fd-toolbar-item\r\n            type=\"search\"\r\n            glyph=\"search\"\r\n            [glyphAriaLabel]=\"'Search' | bbbTranslate\"\r\n            [placeholder]=\"'Search' | bbbTranslate\"\r\n            [button]=\"true\"\r\n            [disabled]=\"false\"\r\n            [(ngModel)]=\"searchTerm2\"\r\n            (addOnButtonClicked)=\"onSearchSubmit()\"\r\n            (keydown.enter)=\"onSearchSubmit()\"\r\n        >\r\n        </fd-input-group>\r\n    </fd-toolbar>\r\n    <div style=\"display: flex; overflow-y: auto;height:calc(100svh - var(--shellbar-height) - 2.5rem)\">\r\n        <div class=\"app-groups\">\r\n            @if (deviceSize !== 's') {\r\n            <bt-app-finder-group\r\n                [appGroups]=\"appGroups\"\r\n                [listMode]=\"true\"\r\n                [selectedId]=\"selectedAppGroupId\"\r\n                (selectedIdChange)=\"selectedAppGroupIdChange.emit($event)\"\r\n            >\r\n            </bt-app-finder-group>\r\n            }\r\n        </div>\r\n        <bt-app-finder-app-list\r\n            [appGroup]=\"selectedAppGroup\"\r\n            [mobile]=\"mobile\"\r\n            [searchTerm]=\"searchTerm\"\r\n            [pinnedAppInAppTileGroups]=\"pinnedAppInAppTileGroups\"\r\n            (pinClick)=\"pinClick.emit($event)\"\r\n        ></bt-app-finder-app-list>\r\n    </div>\r\n    <fd-menu\r\n        #menu\r\n        [mobile]=\"deviceSize === 's'\"\r\n        [mobileConfig]=\"{ title: 'Groups' | bbbTranslate, hasCloseButton: true }\"\r\n    >\r\n        @if (deviceSize === 's') {\r\n        <bt-app-finder-group\r\n            [appGroups]=\"appGroups\"\r\n            [selectedId]=\"selectedAppGroupId\"\r\n            (selectedIdChange)=\"menu.close(); selectedAppGroupIdChange.emit($event)\"\r\n        >\r\n        </bt-app-finder-group>\r\n        }\r\n    </fd-menu>\r\n    } @else {\r\n    <bsu-mask></bsu-mask>\r\n    }\r\n</div>\r\n", styles: [":host{display:block;background-color:var(--sapBackgroundColor, #f7f7f7);color:var(--sapTextColor, #32363a)}:host ::ng-deep .fd-list__title{line-height:1.5rem}.wrapper{display:flex;flex-direction:column}fd-toolbar{width:100%}::ng-deep span.fd-toolbar__spacer{display:none}.app-groups{background-color:var(--sapBaseColor);height:100%}\n"], dependencies: [{ kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.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: i4.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i5$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5$1.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i5$1.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i5.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i3.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: AppFinderGroupComponent, selector: "bt-app-finder-group", inputs: ["appGroups", "selectedId", "listMode"], outputs: ["selectedIdChange"] }, { kind: "component", type: AppFinderAppListComponent, selector: "bt-app-finder-app-list", inputs: ["appGroup", "mobile", "searchTerm", "pinnedAppInAppTileGroups"], outputs: ["pinClick", "appTileGroupsPinChange"] }, { 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: AppFinderComponent, isStandalone: false, selector: "bt-app-finder", inputs: { appGroups: "appGroups", deviceSize: "deviceSize", sideContentSize: "sideContentSize", selectedAppGroup: "selectedAppGroup", selectedAppGroupId: "selectedAppGroupId", mobile: "mobile", contentDensity: "contentDensity", contentHeight: "contentHeight", pinnedAppInAppTileGroups: "pinnedAppInAppTileGroups" }, outputs: { pinClick: "pinClick", selectedAppGroupIdChange: "selectedAppGroupIdChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\">\r\n    @if (appGroups) {\r\n    <fd-toolbar [fdType]=\"'solid'\">\r\n        @if (deviceSize === 's') {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [fdMenu]=\"true\"\r\n            [glyph]=\"'menu2'\"\r\n            [fdType]=\"'transparent'\"\r\n            [fdMenuTrigger]=\"menu\"\r\n            [label]=\"selectedAppGroup?.Title\"\r\n        ></button>\r\n        }\r\n        <fd-toolbar-spacer></fd-toolbar-spacer>\r\n        <fd-input-group\r\n            fd-toolbar-item\r\n            type=\"search\"\r\n            glyph=\"search\"\r\n            [glyphAriaLabel]=\"'Search' | bbbTranslate\"\r\n            [placeholder]=\"'Search' | bbbTranslate\"\r\n            [button]=\"true\"\r\n            [disabled]=\"false\"\r\n            [(ngModel)]=\"searchTerm2\"\r\n            (addOnButtonClicked)=\"onSearchSubmit()\"\r\n            (keydown.enter)=\"onSearchSubmit()\"\r\n        >\r\n        </fd-input-group>\r\n    </fd-toolbar>\r\n    <div style=\"display: flex; overflow-y: auto;height:calc(100svh - var(--shellbar-height) - 2.5rem)\">\r\n        <div class=\"app-groups\">\r\n            @if (deviceSize !== 's') {\r\n            <bt-app-finder-group\r\n                [appGroups]=\"appGroups\"\r\n                [listMode]=\"true\"\r\n                [selectedId]=\"selectedAppGroupId\"\r\n                (selectedIdChange)=\"selectedAppGroupIdChange.emit($event)\"\r\n            >\r\n            </bt-app-finder-group>\r\n            }\r\n        </div>\r\n        <bt-app-finder-app-list\r\n            [appGroup]=\"selectedAppGroup\"\r\n            [mobile]=\"mobile\"\r\n            [searchTerm]=\"searchTerm\"\r\n            [pinnedAppInAppTileGroups]=\"pinnedAppInAppTileGroups\"\r\n            (pinClick)=\"pinClick.emit($event)\"\r\n        ></bt-app-finder-app-list>\r\n    </div>\r\n    <fd-menu\r\n        #menu\r\n        [mobile]=\"deviceSize === 's'\"\r\n        [mobileConfig]=\"{ title: 'Groups' | bbbTranslate, hasCloseButton: true }\"\r\n    >\r\n        @if (deviceSize === 's') {\r\n        <bt-app-finder-group\r\n            [appGroups]=\"appGroups\"\r\n            [selectedId]=\"selectedAppGroupId\"\r\n            (selectedIdChange)=\"menu.close(); selectedAppGroupIdChange.emit($event)\"\r\n        >\r\n        </bt-app-finder-group>\r\n        }\r\n    </fd-menu>\r\n    } @else {\r\n    <bsu-mask></bsu-mask>\r\n    }\r\n</div>\r\n", styles: [":host{display:block;background-color:var(--sapBackgroundColor, #f7f7f7);color:var(--sapTextColor, #32363a)}:host ::ng-deep .fd-list__title{line-height:1.5rem}.wrapper{display:flex;flex-direction:column}fd-toolbar{width:100%}::ng-deep span.fd-toolbar__spacer{display:none}.app-groups{background-color:var(--sapBaseColor);height:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i4.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { 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: i7.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i5.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i3.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: AppFinderGroupComponent, selector: "bt-app-finder-group", inputs: ["appGroups", "selectedId", "listMode"], outputs: ["selectedIdChange"] }, { kind: "component", type: AppFinderAppListComponent, selector: "bt-app-finder-app-list", inputs: ["appGroup", "mobile", "searchTerm", "pinnedAppInAppTileGroups"], outputs: ["pinClick", "appTileGroupsPinChange"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AppFinderComponent, decorators: [{
             type: Component,
@@ -1467,18 +1738,226 @@ class ChangeAppTileComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChangeAppTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ChangeAppTileComponent, isStandalone: false, selector: "bt-change-app-tile", usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.$Caption }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body [formGroup]=\"appGroupForm\">\r\n        <div fd-form-item>\r\n            <label fd-form-label [required]=\"true\">{{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                @if (submitted && appGroupForm.controls.title.errors) {\r\n                <fd-form-message type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n                }\r\n            </fd-form-input-message-group>\r\n        </div>\r\n        <br />\r\n        <div fd-form-item>\r\n            <label fd-form-label>{{ 'Subtitle' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group formControlName=\"subtitle\" form-control [button]=\"true\" [(ngModel)]=\"subtitle\">\r\n                </fd-input-group>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdkInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.close()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { 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: i3$2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i3$2.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: i4$2.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: 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.DialogFooterComponent, selector: "fd-dialog-footer" }, { 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: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ChangeAppTileComponent, isStandalone: false, selector: "bt-change-app-tile", usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.$Caption }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body [formGroup]=\"appGroupForm\">\r\n        <div fd-form-item>\r\n            <label fd-form-label [required]=\"true\">{{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                @if (submitted && appGroupForm.controls.title.errors) {\r\n                <fd-form-message type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n                }\r\n            </fd-form-input-message-group>\r\n        </div>\r\n        <br />\r\n        <div fd-form-item>\r\n            <label fd-form-label>{{ 'Subtitle' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group formControlName=\"subtitle\" form-control [button]=\"true\" [(ngModel)]=\"subtitle\">\r\n                </fd-input-group>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdkInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.close()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { 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: i3$2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i3$2.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { 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: 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.DialogFooterComponent, selector: "fd-dialog-footer" }, { 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: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChangeAppTileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-change-app-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.$Caption }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body [formGroup]=\"appGroupForm\">\r\n        <div fd-form-item>\r\n            <label fd-form-label [required]=\"true\">{{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                @if (submitted && appGroupForm.controls.title.errors) {\r\n                <fd-form-message type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n                }\r\n            </fd-form-input-message-group>\r\n        </div>\r\n        <br />\r\n        <div fd-form-item>\r\n            <label fd-form-label>{{ 'Subtitle' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group formControlName=\"subtitle\" form-control [button]=\"true\" [(ngModel)]=\"subtitle\">\r\n                </fd-input-group>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdkInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.close()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n" }]
         }], ctorParameters: () => [] });
 
+class CreateAppGroupComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.dialogRef = inject(DialogRef);
+        this.parentId = null;
+        this.parents = [];
+        this.bbbPipe = inject(BbbTranslatePipe);
+        this.fb = inject(UntypedFormBuilder);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.title = this.dialogRef.data?.title ?? this.title;
+        this.parents = this.dialogRef.data?.parents ?? [];
+        this.appGroupForm = this.fb.group({
+            title: new UntypedFormControl(this.title, [Validators.required]),
+            parentId: new UntypedFormControl(this.parentId)
+        });
+        const mandatoryFieldText = this.bbbPipe.transform('AlertFieldIsMandatory');
+        const titleText = this.bbbPipe.transform('Title');
+        this.RequiredText = mandatoryFieldText.replace('{0}', titleText);
+    }
+    onSave() {
+        this.submitted = true;
+        if (this.appGroupForm.valid) {
+            const { title, parentId } = this.appGroupForm.value;
+            this.dialogRef.close({ title, parentId: parentId || null });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CreateAppGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CreateAppGroupComponent, isStandalone: false, selector: "bt-create-app-group", usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.title }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n\r\n    <fd-dialog-body>\r\n        <div fd-form-item [formGroup]=\"appGroupForm\">\r\n            <label fd-form-label [required]=\"true\"> {{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                @if (submitted && appGroupForm.controls.title.errors) {\r\n                <fd-form-message type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n                }\r\n            </fd-form-input-message-group>\r\n        </div>\r\n\r\n        <div fd-form-item [formGroup]=\"appGroupForm\" class=\"tw-mt-3\">\r\n            <label fd-form-label> {{ 'Parent Group' | bbbTranslate }}</label>\r\n            <fd-select formControlName=\"parentId\">\r\n                <fd-option [value]=\"null\">{{ 'NoParent' | bbbTranslate }}</fd-option>\r\n                @for (p of parents; track p.Id) {\r\n                <fd-option [value]=\"p.Id\">{{ p.navigatorTitle || p.Title }}</fd-option>\r\n                }\r\n            </fd-select>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdkInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.dismiss()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { 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: i3$2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i3$2.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { 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: 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.DialogFooterComponent, selector: "fd-dialog-footer" }, { 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: i8.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i8.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CreateAppGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-create-app-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.title }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n\r\n    <fd-dialog-body>\r\n        <div fd-form-item [formGroup]=\"appGroupForm\">\r\n            <label fd-form-label [required]=\"true\"> {{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                @if (submitted && appGroupForm.controls.title.errors) {\r\n                <fd-form-message type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n                }\r\n            </fd-form-input-message-group>\r\n        </div>\r\n\r\n        <div fd-form-item [formGroup]=\"appGroupForm\" class=\"tw-mt-3\">\r\n            <label fd-form-label> {{ 'Parent Group' | bbbTranslate }}</label>\r\n            <fd-select formControlName=\"parentId\">\r\n                <fd-option [value]=\"null\">{{ 'NoParent' | bbbTranslate }}</fd-option>\r\n                @for (p of parents; track p.Id) {\r\n                <fd-option [value]=\"p.Id\">{{ p.navigatorTitle || p.Title }}</fd-option>\r\n                }\r\n            </fd-select>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdkInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.dismiss()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n" }]
+        }] });
+
+class PinTileComponent extends BaseComponent {
+    constructor() {
+        super();
+        this.newGroupText = '';
+        this.loading = signal(false);
+        this._dialogService = inject(DialogService);
+        this._dialogRef = inject(DialogRef);
+        this._bbbTranslate = inject(BbbTranslatePipe);
+        this._tilesService = inject(TilesService);
+        this.newGroupText = BarsaApi.LoginFormData.IsRtl
+            ? this._bbbTranslate.transform('Create') + ' ' + this._bbbTranslate.transform('Groups')
+            : this._bbbTranslate.transform('Groups') + ' ' + this._bbbTranslate.transform('Create');
+        const _dialogRef = this._dialogRef;
+        this.app = _dialogRef.data.app;
+        this.appTileGroups = _dialogRef.data.appTileGroups;
+        this.pinnedAppInTileGroups = _dialogRef.data.pinnedAppInTileGroups;
+    }
+    ngOnInit() {
+        this._setLoading(true);
+        const tileGroupsId = this.pinnedAppInTileGroups[this.app.Id];
+        this.appTileGroups.forEach((appGroup) => {
+            this._setDefaultPinTile(appGroup, tileGroupsId);
+        });
+        this._setLoading(false);
+    }
+    onAccept() {
+        const appTileGroupsPin = [];
+        this.appTileGroups.forEach((group) => {
+            this._getChangedPinTileGroups(group, appTileGroupsPin);
+        });
+        this._close({ appTileGroupsPin, app: this.app });
+    }
+    onClose() {
+        this._close();
+    }
+    onNewGroup() {
+        this.newGroupDialogRef = this._dialogService.open(CreateAppGroupComponent, {
+            data: { title: this.newGroupText, parents: this.appTileGroups },
+            verticalPadding: true,
+            mobile: this.mobile,
+            responsivePadding: true
+        });
+        this.newGroupDialogRef.afterClosed.subscribe((result) => {
+            if (result) {
+                this._setLoading(true);
+                const title = typeof result === 'string' ? result : result.title;
+                const parentId = typeof result === 'string' ? null : result.parentId;
+                this._tilesService
+                    .createAppGroup(title, parentId)
+                    .pipe(takeUntil(this._onDestroy$), finalize(() => {
+                    this._setLoading(false);
+                }))
+                    .subscribe();
+            }
+        });
+    }
+    onDeleteGroup(appTileGroup) {
+        const deleteCaption = this._bbbTranslate.transform('Delete');
+        const deleteConfirmation = this._bbbTranslate.transform('QuestionDeleteConfirmMessage');
+        BarsaApi.Bw.Msg.YesNo(deleteConfirmation, deleteCaption, (buttonId) => {
+            if (buttonId === 'yes') {
+                this._setLoading(true);
+                this._tilesService
+                    .deleteAppGroup(appTileGroup)
+                    .pipe(takeUntil(this._onDestroy$), finalize(() => {
+                    this._setLoading(false);
+                }))
+                    .subscribe(() => (this.appTileGroups = this.appTileGroups.filter((c) => c.Id !== appTileGroup.Id)));
+            }
+        });
+    }
+    _setLoading(loading) {
+        this._dialogRef.loading(loading);
+        this.loading.set(loading);
+    }
+    _setDefaultPinTile(appTileGroup, tileGroupsId) {
+        appTileGroup.$PinTile = appTileGroup.$DefaultPinTile =
+            tileGroupsId.includes(appTileGroup.Id) || tileGroupsId.includes(appTileGroup.UserAppTileGroupSetting?.Id);
+        appTileGroup.$Children?.forEach((subGroup) => {
+            this._setDefaultPinTile(subGroup, tileGroupsId);
+        });
+        appTileGroup.$Disabledpin = false;
+    }
+    _getChangedPinTileGroups(appTileGroup, appTileGroupsPin) {
+        if (appTileGroup.$PinTile && !appTileGroup.$DefaultPinTile) {
+            // Add
+            appTileGroupsPin.push({ appTileGroup, visible: true });
+        }
+        else if (appTileGroup.$PinTile === false && appTileGroup.$DefaultPinTile) {
+            // Remove
+            appTileGroupsPin.push({ appTileGroup, visible: false });
+        }
+        appTileGroup.$Children?.forEach((subGroup) => {
+            this._getChangedPinTileGroups(subGroup, appTileGroupsPin);
+        });
+    }
+    _close(result) {
+        this._dialogRef.close(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PinTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: PinTileComponent, isStandalone: false, selector: "bt-pin-tile", inputs: { app: "app", appTileGroups: "appTileGroups", mobile: "mobile", pin: "pin" }, usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ 'AddToList' | bbbTranslate }}</h1>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body>\r\n        <ul fd-list [navigationIndicator]=\"true\" style=\"margin-bottom: 1rem\">\r\n            <li fd-list-item [action]=\"true\" [growing]=\"true\" (click)=\"onNewGroup()\" (keyup.enter)=\"onNewGroup()\"\r\n                (keydown.space)=\"$event.preventDefault()\">\r\n                <span fd-list-title>\r\n                    <fd-busy-indicator [block]=\"false\" [loading]=\"loading()\"></fd-busy-indicator>                    \r\n                    <span fd-list-title-text> {{ newGroupText }} </span>                    \r\n                </span>\r\n            </li>          \r\n            @for (appTileGroup of appTileGroups; track appTileGroup) { @if (!appTileGroup.$Disabledpin) {\r\n            <li fd-list-item [selected]=\"appTileGroup.$PinTile\">\r\n                <fd-checkbox [(ngModel)]=\"appTileGroup.$PinTile\"></fd-checkbox>\r\n                <span fd-list-title>{{ appTileGroup.navigatorTitle || appTileGroup.Title }}</span>\r\n                @if( appTileGroup.CanDelete){\r\n                <button fd-button glyph=\"delete\" fdType=\"transparent\" [title]=\"'Delete' | bbbTranslate\"\r\n                    (click)=\"onDeleteGroup(appTileGroup)\"></button>\r\n                }\r\n            </li>\r\n            } @for (subGroup of appTileGroup.$Children; track subGroup) { @if (!subGroup.$Disabledpin) {\r\n            <li fd-list-item [selected]=\"subGroup.$PinTile\">\r\n                <fd-checkbox [(ngModel)]=\"subGroup.$PinTile\"></fd-checkbox>\r\n                <span fd-list-title>{{ subGroup.navigatorTitle || subGroup.Title }}</span>\r\n                @if( subGroup.CanDelete){\r\n                <button fd-button glyph=\"delete\" fdType=\"transparent\" [title]=\"'Delete' | bbbTranslate\"\r\n                    (click)=\"onDeleteGroup(subGroup)\"></button>\r\n                }\r\n            </li>\r\n            } } }\r\n        </ul>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <ng-template fdkTemplate=\"footer\">\r\n            <div fd-bar-left></div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar fdkInitialFocus fdType=\"emphasized\" [label]=\"'OK' | bbbTranslate\" (click)=\"onAccept()\">\r\n                </fd-button-bar>\r\n                <fd-button-bar fdkInitialFocus fdType=\"transparent\" [label]=\"'Cancel' | bbbTranslate\"\r\n                    (click)=\"onClose()\">\r\n                </fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-footer>\r\n</fd-dialog>", styles: [":host ::ng-deep .cdk-drag{cursor:default!important}:host *{cursor:default!important}li{cursor:pointer}fd-dialog-body,fd-dialog-footer,fd-dialog-header{cursor:default}fd-icon{padding:0 5px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { 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: 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$3.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { 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.ListTitleTextDirective, selector: "[fd-list-title-text], [fdListTitleText]" }, { 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.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i5$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i7$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { 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: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PinTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-pin-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ 'AddToList' | bbbTranslate }}</h1>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body>\r\n        <ul fd-list [navigationIndicator]=\"true\" style=\"margin-bottom: 1rem\">\r\n            <li fd-list-item [action]=\"true\" [growing]=\"true\" (click)=\"onNewGroup()\" (keyup.enter)=\"onNewGroup()\"\r\n                (keydown.space)=\"$event.preventDefault()\">\r\n                <span fd-list-title>\r\n                    <fd-busy-indicator [block]=\"false\" [loading]=\"loading()\"></fd-busy-indicator>                    \r\n                    <span fd-list-title-text> {{ newGroupText }} </span>                    \r\n                </span>\r\n            </li>          \r\n            @for (appTileGroup of appTileGroups; track appTileGroup) { @if (!appTileGroup.$Disabledpin) {\r\n            <li fd-list-item [selected]=\"appTileGroup.$PinTile\">\r\n                <fd-checkbox [(ngModel)]=\"appTileGroup.$PinTile\"></fd-checkbox>\r\n                <span fd-list-title>{{ appTileGroup.navigatorTitle || appTileGroup.Title }}</span>\r\n                @if( appTileGroup.CanDelete){\r\n                <button fd-button glyph=\"delete\" fdType=\"transparent\" [title]=\"'Delete' | bbbTranslate\"\r\n                    (click)=\"onDeleteGroup(appTileGroup)\"></button>\r\n                }\r\n            </li>\r\n            } @for (subGroup of appTileGroup.$Children; track subGroup) { @if (!subGroup.$Disabledpin) {\r\n            <li fd-list-item [selected]=\"subGroup.$PinTile\">\r\n                <fd-checkbox [(ngModel)]=\"subGroup.$PinTile\"></fd-checkbox>\r\n                <span fd-list-title>{{ subGroup.navigatorTitle || subGroup.Title }}</span>\r\n                @if( subGroup.CanDelete){\r\n                <button fd-button glyph=\"delete\" fdType=\"transparent\" [title]=\"'Delete' | bbbTranslate\"\r\n                    (click)=\"onDeleteGroup(subGroup)\"></button>\r\n                }\r\n            </li>\r\n            } } }\r\n        </ul>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <ng-template fdkTemplate=\"footer\">\r\n            <div fd-bar-left></div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar fdkInitialFocus fdType=\"emphasized\" [label]=\"'OK' | bbbTranslate\" (click)=\"onAccept()\">\r\n                </fd-button-bar>\r\n                <fd-button-bar fdkInitialFocus fdType=\"transparent\" [label]=\"'Cancel' | bbbTranslate\"\r\n                    (click)=\"onClose()\">\r\n                </fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-footer>\r\n</fd-dialog>", styles: [":host ::ng-deep .cdk-drag{cursor:default!important}:host *{cursor:default!important}li{cursor:pointer}fd-dialog-body,fd-dialog-footer,fd-dialog-header{cursor:default}fd-icon{padding:0 5px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { app: [{
+                type: Input
+            }], appTileGroups: [{
+                type: Input
+            }], mobile: [{
+                type: Input
+            }], pin: [{
+                type: Input
+            }] } });
+
 class TilesViewerService {
     constructor() {
-        this._onDestroy$ = new Subject();
-        this.dialogService = inject(DialogService);
-        this.tilesService = inject(TilesService, { self: true });
+        this._destroyRef = inject(DestroyRef);
+        this.tilesApi = inject(TilesApiService);
+        this.tilesStore = inject(TilesStore);
+        this.tilesService = inject(TilesService);
+    }
+    loadAllAppTileGroupsByReportId(id) {
+        this.tilesStore.loading.set(true);
+        this.tilesApi
+            .loadAllAppTileGroupsByReportId(id)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe({
+            next: (allApps) => {
+                this.tilesService.resetAppTileGroupLoadCache();
+                this.tilesStore.replaceAllAppTileGroups(allApps);
+                this.tilesService.syncExternalAppTileGroups();
+                this.tilesStore.loading.set(false);
+            },
+            error: () => this.tilesStore.loading.set(false)
+        });
+    }
+    loadAllAppTileGroups() {
+        this.tilesStore.loading.set(true);
+        if (this.tilesStore.allAppsLoading()) {
+            return;
+        }
+        this.tilesApi
+            .loadAllAppTileGroups()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe({
+            next: (allApps) => {
+                this.tilesService.resetAppTileGroupLoadCache();
+                this.tilesStore.replaceAllAppTileGroups(allApps);
+                this.tilesService.syncExternalAppTileGroups();
+                this.tilesStore.loading.set(false);
+                this.tilesStore.allAppsLoading.set(true);
+            },
+            error: () => this.tilesStore.loading.set(false)
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerService, decorators: [{
+            type: Injectable
+        }] });
+
+class TilesViewerContainerController extends BaseController {
+    constructor() {
+        super(...arguments);
+        // Public observables
+        this.edit$ = toObservable(this._tilesStore.editHome);
+        this.appTileGroups$ = toObservable(this._tilesStore.rootGroups);
+        this.rtl$ = this._portalService.rtl$;
+        this.deviceSize$ = this._portalService.deviceSize$;
+        this.stackContent$ = this._portalService.userPortalSettings$.pipe(map$1((settings) => settings['UserPortalSettings']), map$1((settings) => settings?.TilesStackContent), distinctUntilChanged());
+        this.changedOrder = false;
+        this.userStackContent = false;
+        this.initialStackContentValue = false;
+        this.stackContent = false;
+        // Moved from service
         this._hideTileSource = new Subject();
         this._updateAppTileSettingSource = new Subject();
         this._deleteGroupSource = new Subject();
@@ -1490,78 +1969,216 @@ class TilesViewerService {
         this._hideAppGroupSource = new Subject();
         this.hideAppGroup$ = this._hideAppGroupSource.asObservable();
         this._viewLoadingSource = new BehaviorSubject(false);
-        this.viewLoading$ = this._viewLoadingSource.asObservable().pipe(debounceTime(200));
-        this.hideTile$ = this._hideTileSource.asObservable();
-        this.updateAppTileSetting$ = this._updateAppTileSettingSource.asObservable();
-        this.deleteAppGroup$ = this._deleteGroupSource.asObservable();
+        /**
+         *
+         */
+        this._hideTile$ = this._hideTileSource.asObservable();
+    }
+    get updateAppTileSetting$() {
+        return this._updateAppTileSettingSource.asObservable();
+    }
+    get deleteAppGroup$() {
+        return this._deleteGroupSource.asObservable();
+    }
+    /** UI/state exposed to view */
+    get viewLoading$() {
+        return this._viewLoadingSource.asObservable().pipe(debounceTime(200));
+    }
+    get selectedAppGroupId() {
+        return localStorage.getItem('selectedTab') ?? '';
+    }
+    set selectedAppGroupId(groupId) {
+        localStorage.setItem('selectedTab', groupId);
+    }
+    get _portalService() {
+        return this.view.injector.get(PortalService);
+    }
+    get _tilesService() {
+        return this.view.injector.get(TilesService);
+    }
+    get _tilesViewerService() {
+        return this.view.injector.get(TilesViewerService);
+    }
+    get _tilesStore() {
+        return this.view.injector.get(TilesStore);
+    }
+    get _dialogService() {
+        return this.view.injector.get(DialogService);
+    }
+    /** Call from component constructor */
+    connectLifecycle() {
+        const onDestroy$ = this.view.onDestroy$;
+        this.stackContent$.pipe(takeUntil$1(onDestroy$)).subscribe((stackContent) => {
+            this.initialStackContentValue = this.userStackContent = stackContent;
+            if (stackContent) {
+                this.stackContent = stackContent;
+            }
+        });
+        this.appTileGroups$
+            .pipe(map$1((appTileGroups) => appTileGroups ?? []), distinctUntilChanged((a, b) => a.length === b.length &&
+            [...a.map((t) => t.Id)].sort().join(',') === [...b.map((t) => t.Id)].sort().join(',')), withLatestFrom(this.stackContent$), takeUntil$1(onDestroy$), filter(([appTileGroups, stackContent]) => appTileGroups.length > 0 && !!stackContent))
+            .subscribe((pair) => {
+            const [tiles] = pair;
+            tiles.forEach((c) => this.loadAppTileGroup(c));
+        });
+        // Moved from service
         this._loadAppGroupSource
             .asObservable()
-            .pipe(takeUntil(this._onDestroy$))
+            .pipe(takeUntil$1(onDestroy$))
             .subscribe((group) => {
-            this.tilesService.loadAppTileGroups(group);
+            this._tilesService.loadAppTileGroups(group);
         });
-        this.hideTile$
-            .pipe(tap(() => this.setLoading()), takeUntil(this._onDestroy$), exhaustMap((appTile) => this.tilesService
-            .singlePinTileChanged(appTile.AppTile ? appTile.AppTile.Id : appTile.Id)
-            .pipe(finalize(() => this.setLoaded()))), finalize(() => this.setLoaded()))
+        this._hideTile$
+            .pipe(tap(() => this.setLoading()), takeUntil$1(onDestroy$), tap((appTile) => this._tilesService.singlePinTileChanged(appTile.AppTile ? appTile.AppTile : appTile, () => this.setLoaded())))
             .subscribe();
         this.updateAppTileSetting$
-            .pipe(takeUntil(this._onDestroy$), tap(() => this.setLoading()), exhaustMap((appTile) => this.tilesService.changeAppTileSetting(appTile).pipe(finalize(() => {
+            .pipe(takeUntil$1(onDestroy$), tap(() => this.setLoading()), exhaustMap((appTile) => this._tilesService.changeAppTileSetting(appTile).pipe(finalize$1(() => {
             this.setLoaded();
-        }))), finalize(() => {
+        }))), finalize$1(() => {
             this.setLoaded();
         }))
             .subscribe();
         this.deleteAppGroup$
-            .pipe(tap(() => this.setLoading()), takeUntil(this._onDestroy$), exhaustMap((appGroup) => this.tilesService.deleteAppGroup(appGroup).pipe(finalize(() => {
+            .pipe(tap(() => this.setLoading()), takeUntil$1(onDestroy$), exhaustMap((appGroup) => this._tilesService.deleteAppGroup(appGroup).pipe(finalize$1(() => {
             this.setLoaded();
         }))))
             .subscribe();
         this.resetAppGroup$
-            .pipe(takeUntil(this._onDestroy$), tap(() => this.setLoading()), exhaustMap((appGroup) => this.tilesService.resetAppGroupSetting(appGroup).pipe(finalize(() => {
+            .pipe(takeUntil$1(onDestroy$), tap(() => this.setLoading()), exhaustMap((appGroup) => this._tilesService.resetAppGroupSetting(appGroup).pipe(finalize$1(() => {
             this.setLoaded();
-        }))), finalize(() => {
+        }))), finalize$1(() => {
             this.setLoaded();
         }))
             .subscribe();
         this.hideAppGroup$
-            .pipe(takeUntil(this._onDestroy$), tap(() => this.setLoading()), exhaustMap((appGroup) => this.tilesService.toggleAppGroupSettingVisible(appGroup).pipe(finalize(() => {
+            .pipe(takeUntil$1(onDestroy$), tap(() => this.setLoading()), exhaustMap((appGroup) => this._tilesService.toggleAppGroupSettingVisible(appGroup).pipe(finalize$1(() => {
             this.setLoaded();
-        }))), finalize(() => {
+        }))), finalize$1(() => {
             this.setLoaded();
         }))
             .subscribe();
         this.saveAppGroupOrders$
-            .pipe(takeUntil(this._onDestroy$), tap(() => this.setLoading()), exhaustMap((appGroups) => this.tilesService.saveAppGroupOrders(appGroups).pipe(finalize(() => {
+            .pipe(takeUntil$1(onDestroy$), tap(() => this.setLoading()), exhaustMap((appGroups) => this._tilesService.saveAppGroupOrders(appGroups).pipe(finalize$1(() => {
             this.setLoaded();
-        }))), finalize(() => {
+        }))), finalize$1(() => {
             this.setLoaded();
         }))
             .subscribe();
     }
-    loadAllAppTileGroupsByReportId(id) {
-        this.tilesService.loadAllAppTileGroupsByReportId(id);
+    init(settings) {
+        this.connectLifecycle();
+        const s = settings ?? this.view.settings;
+        const reportId = s?.MetaReportTiles?.Id;
+        if (reportId && reportId !== '0') {
+            this._tilesViewerService.loadAllAppTileGroupsByReportId(reportId);
+        }
+        else {
+            this._tilesViewerService.loadAllAppTileGroups();
+        }
     }
-    loadAllAppTileGroups() {
-        this.tilesService.loadAllAppTileGroups();
+    destroy() {
+        this._tilesService.setEditHome(false);
     }
-    get selectedAppGroupId() {
-        return localStorage.getItem('selectedTab') ?? '';
+    onSelectedTabChange(e) {
+        const { firstSelected, selectedTabTitle, appTileGroups: appGroups, tabPanels, tabbarComponent } = e;
+        let appTileGroup;
+        if (this.stackContent) {
+            return;
+        }
+        if (firstSelected) {
+            const lastSelectedAppGroupId = this.selectedAppGroupId;
+            if (lastSelectedAppGroupId) {
+                appTileGroup = appGroups.find((c) => c.Id === lastSelectedAppGroupId);
+                if (appTileGroup) {
+                    const lastTab = tabPanels.find((c) => c.label() === appTileGroup?.navigatorTitle);
+                    if (lastTab && selectedTabTitle !== lastTab.label()) {
+                        appTileGroup = appGroups.find((c) => c.Id === lastSelectedAppGroupId);
+                        tabbarComponent.selectTab(lastTab.id());
+                    }
+                    return;
+                }
+            }
+        }
+        if (!appTileGroup) {
+            appTileGroup = appGroups.find((c) => c.navigatorTitle === selectedTabTitle);
+        }
+        if (appTileGroup) {
+            this.setSelectedTab(appTileGroup);
+            if (!this._tilesService.isAppTileGroupTilesLoaded(appTileGroup.Id)) {
+                this.loadAppTileGroup(appTileGroup);
+            }
+        }
     }
-    set selectedAppGroupId(groupId) {
-        localStorage.setItem('selectedTab', groupId);
+    onLoadAppTileGroup(appTileGroup) {
+        if (!this._tilesService.isAppTileGroupTilesLoaded(appTileGroup.Id)) {
+            this.loadAppTileGroup(appTileGroup);
+        }
     }
-    setSelectedTab(group) {
-        this.selectedAppGroupId = group.Id;
+    onDropGroup(e) {
+        const { event, appTileGroups: appGroups } = e;
+        moveItemInArray(appGroups, event.previousIndex, event.currentIndex);
+        this.changedOrder = true;
     }
-    loadAppTileGroup(group) {
-        this._loadAppGroupSource.next(group);
+    onDrop(e) {
+        const { appTileGroup: group, event } = e;
+        const previousContainer = event.previousContainer;
+        const container = event.container;
+        const containerIsTile = container.data.isTile;
+        const previousItems = previousContainer.data.items;
+        const containerItems = container.data.items;
+        const { previousIndex, currentIndex } = event;
+        if (previousContainer === container) {
+            moveItemInArray(previousItems, previousIndex, currentIndex);
+            if (containerIsTile) {
+                this._saveOrderAppTiles(group);
+            }
+            else {
+                this._saveOrderActionLinks(group);
+            }
+        }
+        else {
+            transferArrayItem(previousItems, containerItems, previousIndex, currentIndex);
+            const appTileIdTransferedId = containerItems[currentIndex]?.AppTile?.Id ?? containerItems[currentIndex].Id;
+            if (containerIsTile) {
+                this._saveOrderActionLinks(group);
+                this._saveOrderAppTiles(group, appTileIdTransferedId);
+            }
+            else {
+                this._saveOrderAppTiles(group);
+                this._saveOrderActionLinks(group, appTileIdTransferedId);
+            }
+        }
     }
-    ngOnDestroy() {
-        this._onDestroy$.next();
+    onStackContentChanged(checked) {
+        this.userStackContent = checked;
+    }
+    onExitEditHome(appTileGroups) {
+        if (this.changedOrder) {
+            this.saveAppGroupOrders(appTileGroups);
+            this.changedOrder = false;
+        }
+        if (this.userStackContent !== this.initialStackContentValue) {
+            this._tilesService.saveTilesStackContent(this.userStackContent);
+        }
+        this._tilesService.setEditHome(false);
+    }
+    onCloseEditHome() {
+        this._tilesService.setEditHome(false);
+    }
+    onDelete(appTileGroup) {
+        this.deleteAppGroup(appTileGroup);
+    }
+    onToggleShowHide(appTileGroup) {
+        this.toggleAppGroupSettingVisible(appTileGroup);
+    }
+    onReset(appTileGroup) {
+        this.resetAppGroup(appTileGroup);
+    }
+    onHideAppTile(appTile) {
+        this.hideTile(appTile);
     }
-    openRenameForm(appTile) {
-        const newGroupDialogRef = this.dialogService.open(ChangeAppTileComponent, {
+    onRenameAppTile(appTile) {
+        const newGroupDialogRef = this._dialogService.open(ChangeAppTileComponent, {
             data: appTile,
             verticalPadding: true,
             responsivePadding: true
@@ -1575,6 +2192,39 @@ class TilesViewerService {
             }
         });
     }
+    onChangeGroupAppTile(appTile) {
+        const app = appTile.App;
+        const pinnedAppInTileGroups = this._loadPinnedAppInTileGroups(app);
+        const appTileGroups = this._tilesService.appTileGroups?.MoDataList ?? [];
+        const mobile = getDeviceIsMobile();
+        const ref = this._dialogService.open(PinTileComponent, {
+            data: { app, pinnedAppInTileGroups, appTileGroups },
+            minWidth: '360px',
+            minHeight: mobile ? '420px' : 'auto',
+            height: mobile ? 'auto' : '60svh',
+            draggable: false,
+            mobile,
+            resizable: false,
+            verticalPadding: false,
+            backdropClickCloseable: false
+        });
+        ref.afterClosed.subscribe((result) => {
+            if (!result?.appTileGroupsPin || !result?.app) {
+                return;
+            }
+            this.setLoading();
+            try {
+                this._tilesService.pinTileChanged(result.appTileGroupsPin, result.app, () => this.setLoaded());
+            }
+            catch {
+                this.setLoaded();
+            }
+        });
+    }
+    // Moved methods
+    updateAppTileSetting(appTile) {
+        this._updateAppTileSettingSource.next(appTile);
+    }
     resetAppGroup(appGroup) {
         this._resetAppGroupSource.next(appGroup);
     }
@@ -1596,12 +2246,112 @@ class TilesViewerService {
     setLoading() {
         this._viewLoadingSource.next(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerService }); }
+    setSelectedTab(group) {
+        this.selectedAppGroupId = group.Id;
+    }
+    loadAppTileGroup(appTileGroup) {
+        this._loadAppGroupSource.next(appTileGroup);
+    }
+    _loadPinnedAppInTileGroups(app) {
+        const appId = app.Id;
+        const val = {};
+        const reportWrapper = BarsaApi.Bw.RunBlMethod('PinnedAppInTileGroups', appId);
+        const moForReport = reportWrapper.Unwrap();
+        val[appId] = val[appId] ?? [];
+        const apps = moForReport.MoDataList;
+        if (apps?.length > 0) {
+            apps.forEach((itemApp) => {
+                const predefined = itemApp.Id.Id;
+                const userSetting = itemApp.UserAppTileGroupSetting?.Id;
+                if (predefined) {
+                    val[appId] = [...val[appId], predefined];
+                }
+                if (userSetting) {
+                    val[appId] = [...val[appId], userSetting];
+                }
+            });
+        }
+        return val;
+    }
+    _saveOrderAppTiles(appTileGroup, appTileIdTransferedId = '0') {
+        const appTiles = appTileGroup.navigatorTiles.map((appTile) => appTile.AppTile ? appTile.AppTile.Id : appTile.Id);
+        this._tilesService.saveOrderAppTiles(appTileGroup, appTiles, false, appTileIdTransferedId);
+    }
+    _saveOrderActionLinks(appTileGroup, appTileIdTransferedId = '0') {
+        const actionLinks = appTileGroup.navigatorActionLinks.map((appTile) => appTile.AppTile ? appTile.AppTile.Id : appTile.Id);
+        this._tilesService.saveOrderAppTiles(appTileGroup, actionLinks, true, appTileIdTransferedId);
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+
+class DynamicTileGroupComponent extends BaseDynamicComponent {
+    constructor() {
+        super(...arguments);
+        this.tilesDropped = new EventEmitter();
+        this.hideAppTileClick = new EventEmitter();
+        this.renameAppTileClick = new EventEmitter();
+        this.changeGroupAppTileClick = new EventEmitter();
+        this.toggleGroup = new EventEmitter();
+        this.resetGroup = new EventEmitter();
+        this.deleteGroup = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const { appTileGroup } = changes;
+        if (appTileGroup && !appTileGroup.firstChange) {
+            this._renderComponentInstance();
+        }
+        else if (this._component) {
+            this._component.instance.ngOnChanges(changes);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DynamicTileGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: DynamicTileGroupComponent, isStandalone: false, selector: "bt-dynamic-tile-group,[dynamictilegroup]", inputs: { appTileGroup: "appTileGroup", tabRef: "tabRef", stackContent: "stackContent", cssStyles: "cssStyles", edit: "edit", visible: "visible", rtl: "rtl", childrenAppTileGroup: "childrenAppTileGroup", 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: `<ng-container #componentContainer></ng-container>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DynamicTileGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bt-dynamic-tile-group,[dynamictilegroup]',
+                    template: `<ng-container #componentContainer></ng-container>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false
+                }]
+        }], propDecorators: { appTileGroup: [{
+                type: Input
+            }], tabRef: [{
+                type: Input
+            }], stackContent: [{
+                type: Input
+            }], cssStyles: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], rtl: [{
+                type: Input
+            }], childrenAppTileGroup: [{
+                type: Input
+            }], isAppTileSubGroup: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], tilesDropped: [{
+                type: Output
+            }], hideAppTileClick: [{
+                type: Output
+            }], renameAppTileClick: [{
+                type: Output
+            }], changeGroupAppTileClick: [{
+                type: Output
+            }], toggleGroup: [{
+                type: Output
+            }], resetGroup: [{
+                type: Output
+            }], deleteGroup: [{
+                type: Output
+            }] } });
 
 class TilesViewerComponent extends BaseComponent {
     constructor() {
@@ -1618,6 +2368,7 @@ class TilesViewerComponent extends BaseComponent {
         this.deleteGroup = new EventEmitter();
         this.hideAppTileClick = new EventEmitter();
         this.renameAppTileClick = new EventEmitter();
+        this.changeGroupAppTileClick = new EventEmitter();
         this.tilesDropped = new EventEmitter();
         this._rtl = BarsaApi.LoginFormData.IsRtl;
         this.color = 'default';
@@ -1640,9 +2391,6 @@ class TilesViewerComponent extends BaseComponent {
             this.tabListComponent._disableScrollSpy = true;
         }
     }
-    ngOnChanges(changes) {
-        super.ngOnChanges(changes);
-    }
     onSelectedTabChange(selectedTab) {
         if (!this.selectedTabTitle) {
             this._firstSelected = false;
@@ -1691,6 +2439,9 @@ class TilesViewerComponent extends BaseComponent {
     onCloseEditHome() {
         this.closeEditHome.emit();
     }
+    onHideAppTileClick(appTile) {
+        this.hideAppTileClick.emit(appTile);
+    }
     _trackById(index, item) {
         return item ? item.Id : index;
     }
@@ -1700,11 +2451,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", 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, usesOnChanges: 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                <bnrc-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                    [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)=\"hideAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bnrc-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: i3$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i2$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i2$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i2$2.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$3.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i4$3.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i4$3.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i4$3.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i4$3.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i4$3.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: i5$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5$1.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i8.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.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "component", type: i5.DynamicTileGroupComponent, selector: "bnrc-dynamic-tile-group,[dynamictilegroup]", inputs: ["appTileGroup", "tabRef", "stackContent", "cssStyles", "edit", "rtl", "isAppTileSubGroup", "deviceSize", "isLast"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: i5.ScrollPersistDirective, selector: "[scrollPersist]", inputs: ["scrollPersist"] }, { kind: "directive", type: i3.FixMoreDirective, selector: "[fixMore]" }, { 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\">\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 }); }
 }
 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                <bnrc-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                    [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)=\"hideAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bnrc-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\">\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"] }]
         }], propDecorators: { tabListComponent: [{
                 type: ViewChild,
                 args: [IconTabBarComponent]
@@ -1756,6 +2507,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Output
             }], renameAppTileClick: [{
                 type: Output
+            }], changeGroupAppTileClick: [{
+                type: Output
             }], tilesDropped: [{
                 type: Output
             }], _rtl: [{
@@ -1837,238 +2590,133 @@ class TilesViewerMegamenuComponent extends BaseComponent {
         this._rtl = BarsaApi.LoginFormData.IsRtl;
         this.loadAppTileGroup = new EventEmitter();
         this.color = 'default';
-        this.id = 'tilesviewer';
-        this.openMenu = null;
-        this.isOpen = false;
-        this.defaultTileGroupComponent = {
-            Id: '',
-            $Caption: '',
-            Module: 'BarsaTiles',
-            ModuleFileName: '',
-            Name: 'TilesViewerGroup',
-            Selector: 'bt-tiles-viewer-group'
-        };
-        this._cdr = inject(ChangeDetectorRef);
-        this._shellbarHeightServcie = inject(ShellbarHeightService);
-        this._shellbarHeightServcie.add('var(--megamenu-height)');
-    }
-    ngOnChanges(changes) {
-        const { appTileGroups } = changes;
-        appTileGroups &&
-            appTileGroups.currentValue
-                .filter((c) => !c.$TileLoaded)
-                .forEach((appTileGroup) => {
-                this.loadAppTileGroup.emit(appTileGroup);
-            });
-    }
-    onGroupVisibilityChange(e) {
-        if (e.visibility === 'Visible') {
-            // this.loadAppTileGroup.emit(e.menu.data);
-        }
-    }
-    _trackById(index, item) {
-        return item ? item.Id : index;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerMegamenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TilesViewerMegamenuComponent, isStandalone: false, selector: "bt-tiles-viewer-megamenu", inputs: { appTileGroups: "appTileGroups", loading: "loading", rtl: "rtl", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", DynamicComponents: "DynamicComponents" }, outputs: { loadAppTileGroup: "loadAppTileGroup" }, host: { properties: { "class.tiles-viewer": "this._cls", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "_cssRootVariable", first: true, predicate: ["cssRootVariable"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<bsu-barsa-megamenu  [deviceSize]=\"deviceSize\" [menuGroups]=\"appTileGroups | megamenu\" (visibilityChange)=\"onGroupVisibilityChange($event)\"></bsu-barsa-megamenu>\r\n", styles: ["fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-end:1rem;padding-inline-start:0rem}fd-side-nav ul li a{height:3rem;min-width:5rem;border:none}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}\n"], dependencies: [{ kind: "component", type: i3.BarsaMegamenuComponent, selector: "bsu-barsa-megamenu", inputs: ["menuGroups", "titleKey", "iconKey", "deviceSize"], outputs: ["visibilityChange"] }, { kind: "pipe", type: MegamenuPipe, name: "megamenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerMegamenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-tiles-viewer-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bsu-barsa-megamenu  [deviceSize]=\"deviceSize\" [menuGroups]=\"appTileGroups | megamenu\" (visibilityChange)=\"onGroupVisibilityChange($event)\"></bsu-barsa-megamenu>\r\n", styles: ["fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-end:1rem;padding-inline-start:0rem}fd-side-nav ul li a{height:3rem;min-width:5rem;border:none}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _cssRootVariable: [{
-                type: ViewChild,
-                args: ['cssRootVariable']
-            }], _cls: [{
-                type: HostBinding,
-                args: ['class.tiles-viewer']
-            }], appTileGroups: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], rtl: [{
-                type: Input
-            }], deviceSize: [{
-                type: Input
-            }], selectedAppGroupId: [{
-                type: Input
-            }], DynamicComponents: [{
-                type: Input
-            }], _rtl: [{
-                type: HostBinding,
-                args: ['attr.rtl']
-            }], loadAppTileGroup: [{
-                type: Output
-            }] } });
-
-class TilesViewerContainerComponent extends BaseComponent {
-    constructor() {
-        super();
-        this.changedOrder = false;
-        this.userStackContent = false;
-        this.initialStackContentValue = false;
-        this.firstSelected = false;
-        this.stackContent = false;
-        this._activatedRoute = inject(ActivatedRoute);
-        this._router = inject(Router);
-        this._portalService = inject(PortalService);
-        this._tilesService = inject(TilesService);
-        this._tilesViewerService = inject(TilesViewerService);
-        BarsaApi.Bw.RefreshAppTileGroup = (appTileGroupId) => {
-            this._tilesService.loadAppTileGroupsById(appTileGroupId);
-        };
-        this.stackContent$ = this._portalService.userPortalSettings$.pipe(takeUntil(this._onDestroy$), map((settings) => settings['UserPortalSettings']), map((settings) => settings?.TilesStackContent), distinctUntilChanged());
-        this.stackContent$.subscribe((stackContent) => {
-            this.initialStackContentValue = this.userStackContent = stackContent;
-            if (stackContent) {
-                this.stackContent = stackContent;
-            }
-        });
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        if (this.settings.MetaReportTiles?.Id && this.settings.MetaReportTiles?.Id !== '0') {
-            this._tilesViewerService.loadAllAppTileGroupsByReportId(this.settings.MetaReportTiles?.Id);
-        }
-        else {
-            this._tilesViewerService.loadAllAppTileGroups();
-        }
-        this.viewLoading$ = this._tilesViewerService.viewLoading$;
-        this.selectedAppGroupId = this._tilesViewerService.selectedAppGroupId;
-        this.rtl$ = this._portalService.rtl$;
-        this.deviceSize$ = this._portalService.deviceSize$;
-        this.edit$ = this._tilesService.edit$;
-        this.appTileGroups$ = this._tilesService.homeAppTileGroups$;
-        this.appTileGroups$.pipe(withLatestFrom(this.stackContent$)).subscribe(([tiles, stackContent]) => {
-            if (tiles && stackContent) {
-                tiles.forEach((c) => {
-                    this.loadAppTileGroup(c);
-                });
-            }
-        });
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._tilesService.setEditHome(false);
-    }
-    onSelectedTabChange(e) {
-        const { firstSelected, selectedTabTitle, appTileGroups: appGroups, tabPanels, tabbarComponent } = e;
-        let appTileGroup;
-        if (this.stackContent) {
-            return;
-        }
-        if (firstSelected) {
-            const lastSelectedAppGroupId = this._tilesViewerService.selectedAppGroupId;
-            if (lastSelectedAppGroupId) {
-                appTileGroup = appGroups.find((c) => c.Id === lastSelectedAppGroupId);
-                if (appTileGroup) {
-                    const lastTab = tabPanels.find((c) => c.label === appTileGroup?.navigatorTitle);
-                    if (lastTab && selectedTabTitle !== lastTab.label()) {
-                        appTileGroup = appGroups.find((c) => c.Id === lastSelectedAppGroupId);
-                        tabbarComponent.selectTab(lastTab.id());
-                    }
-                    return;
-                }
-            }
-        }
-        if (!appTileGroup) {
-            appTileGroup = appGroups.find((c) => c.navigatorTitle === selectedTabTitle);
-        }
-        if (appTileGroup) {
-            this._tilesViewerService.setSelectedTab(appTileGroup);
-            this.loadAppTileGroup(appTileGroup);
-        }
-    }
-    onLoadAppTileGroup(appTileGroup) {
-        this.loadAppTileGroup(appTileGroup);
+        this.id = 'tilesviewer';
+        this.openMenu = null;
+        this.isOpen = false;
+        this.defaultTileGroupComponent = {
+            Id: '',
+            $Caption: '',
+            Module: 'BarsaTiles',
+            ModuleFileName: '',
+            Name: 'TilesViewerGroup',
+            Selector: 'bt-tiles-viewer-group'
+        };
+        this._cdr = inject(ChangeDetectorRef);
+        this._shellbarHeightServcie = inject(ShellbarHeightService);
+        this._shellbarHeightServcie.add('var(--megamenu-height)');
     }
-    onDropGroup(e) {
-        const { event, appTileGroups: appGroups } = e;
-        moveItemInArray(appGroups, event.previousIndex, event.currentIndex);
-        this.changedOrder = true;
-        // this.saveOrderAppTiles(allApps, group);
+    ngOnChanges(changes) {
+        const { appTileGroups } = changes;
+        appTileGroups &&
+            appTileGroups.currentValue
+                .filter((c) => !c.$TileLoaded)
+                .forEach((appTileGroup) => {
+                this.loadAppTileGroup.emit(appTileGroup);
+            });
     }
-    onDrop(e) {
-        const { appTileGroup: group, event } = e;
-        const previousContainer = event.previousContainer;
-        const container = event.container;
-        const containerIsTile = container.data.isTile;
-        const previousItems = previousContainer.data.items;
-        const containerItems = container.data.items;
-        const { previousIndex, currentIndex } = event;
-        if (previousContainer === container) {
-            moveItemInArray(previousItems, previousIndex, currentIndex);
-            if (containerIsTile) {
-                this._saveOrderAppTiles(group);
-            }
-            else {
-                this._saveOrderActionLinks(group);
-            }
-        }
-        else {
-            transferArrayItem(previousItems, containerItems, previousIndex, currentIndex);
-            const appTileIdTransferedId = containerItems[currentIndex]?.AppTile?.Id ?? containerItems[currentIndex].Id;
-            if (containerIsTile) {
-                this._saveOrderActionLinks(group);
-                this._saveOrderAppTiles(group, appTileIdTransferedId);
-            }
-            else {
-                this._saveOrderAppTiles(group);
-                this._saveOrderActionLinks(group, appTileIdTransferedId);
-            }
+    onGroupVisibilityChange(e) {
+        if (e.visibility === 'Visible') {
+            // this.loadAppTileGroup.emit(e.menu.data);
         }
     }
-    onStackContentChanged(checked) {
-        this.userStackContent = checked;
+    _trackById(index, item) {
+        return item ? item.Id : index;
     }
-    onExitEditHome(appTileGroups) {
-        if (this.changedOrder) {
-            this._tilesViewerService.saveAppGroupOrders(appTileGroups);
-            this.changedOrder = false;
-        }
-        if (this.userStackContent !== this.initialStackContentValue) {
-            this._tilesService.saveTilesStackContent(this.userStackContent);
-        }
-        this._setEditHome(false);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerMegamenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TilesViewerMegamenuComponent, isStandalone: false, selector: "bt-tiles-viewer-megamenu", inputs: { appTileGroups: "appTileGroups", loading: "loading", rtl: "rtl", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", DynamicComponents: "DynamicComponents" }, outputs: { loadAppTileGroup: "loadAppTileGroup" }, host: { properties: { "class.tiles-viewer": "this._cls", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "_cssRootVariable", first: true, predicate: ["cssRootVariable"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<bsu-barsa-megamenu  [deviceSize]=\"deviceSize\" [menuGroups]=\"appTileGroups | megamenu\" (visibilityChange)=\"onGroupVisibilityChange($event)\"></bsu-barsa-megamenu>\r\n", styles: ["fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-end:1rem;padding-inline-start:0rem}fd-side-nav ul li a{height:3rem;min-width:5rem;border:none}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}\n"], dependencies: [{ kind: "component", type: i3.BarsaMegamenuComponent, selector: "bsu-barsa-megamenu", inputs: ["menuGroups", "titleKey", "iconKey", "deviceSize"], outputs: ["visibilityChange"] }, { kind: "pipe", type: MegamenuPipe, name: "megamenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerMegamenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-tiles-viewer-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bsu-barsa-megamenu  [deviceSize]=\"deviceSize\" [menuGroups]=\"appTileGroups | megamenu\" (visibilityChange)=\"onGroupVisibilityChange($event)\"></bsu-barsa-megamenu>\r\n", styles: ["fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-end:1rem;padding-inline-start:0rem}fd-side-nav ul li a{height:3rem;min-width:5rem;border:none}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _cssRootVariable: [{
+                type: ViewChild,
+                args: ['cssRootVariable']
+            }], _cls: [{
+                type: HostBinding,
+                args: ['class.tiles-viewer']
+            }], appTileGroups: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], rtl: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }], selectedAppGroupId: [{
+                type: Input
+            }], DynamicComponents: [{
+                type: Input
+            }], _rtl: [{
+                type: HostBinding,
+                args: ['attr.rtl']
+            }], loadAppTileGroup: [{
+                type: Output
+            }] } });
+
+class TilesViewerContainerComponent extends ViewBase {
+    constructor() {
+        super(...arguments);
+        this.controller = new TilesViewerContainerController(this);
+        this._onDestroyLocal$ = new Subject();
     }
-    onCloseEditHome() {
-        this._setEditHome(false);
+    get onDestroy$() {
+        return this._onDestroyLocal$.asObservable();
     }
-    onDelete(appTileGroup) {
-        this._tilesViewerService.deleteAppGroup(appTileGroup);
+    // Template bindings come from the controller.
+    get appTileGroups$() {
+        return this.controller.appTileGroups$;
     }
-    onToggleShowHide(appTileGroup) {
-        this._tilesViewerService.toggleAppGroupSettingVisible(appTileGroup);
+    get viewLoading$() {
+        return this.controller.viewLoading$;
     }
-    onReset(appTileGroup) {
-        this._tilesViewerService.resetAppGroup(appTileGroup);
+    get deviceSize$() {
+        return this.controller.deviceSize$;
     }
-    onHideAppTile(appTile) {
-        this._tilesViewerService.hideTile(appTile);
+    get edit$() {
+        return this.controller.edit$;
     }
-    onRenameAppTile(appTile) {
-        this._tilesViewerService.openRenameForm(appTile);
+    get stackContent$() {
+        return this.controller.stackContent$;
     }
-    loadAppTileGroup(appTileGroup) {
-        this._tilesViewerService.loadAppTileGroup(appTileGroup);
+    get rtl$() {
+        return this.controller.rtl$;
     }
-    _setEditHome(val) {
-        this._tilesService.setEditHome(val);
+    get selectedAppGroupId() {
+        return this.controller.selectedAppGroupId;
     }
-    _saveOrderAppTiles(appTileGroup, appTileIdTransferedId = '0') {
-        const appTiles = appTileGroup.navigatorTiles.map((appTile) => appTile.AppTile ? appTile.AppTile.Id : appTile.Id);
-        this._tilesService.saveOrderAppTiles(appTileGroup, appTiles, false, appTileIdTransferedId);
+    ngOnInit() {
+        super.ngOnInit();
     }
-    _saveOrderActionLinks(appTileGroup, appTileIdTransferedId = '0') {
-        const actionLinks = appTileGroup.navigatorActionLinks.map((appTile) => appTile.AppTile ? appTile.AppTile.Id : appTile.Id);
-        this._tilesService.saveOrderAppTiles(appTileGroup, actionLinks, true, appTileIdTransferedId);
+    showError(message, code) {
+        super.showError(message, code);
+    }
+    // `ViewBase.ngOnInit()` will call `controller.init()`.
+    ngOnDestroy() {
+        this._onDestroyLocal$.next();
+        this._onDestroyLocal$.complete();
+        this.controller.destroy();
+        super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TilesViewerContainerComponent, isStandalone: false, selector: "bt-tiles-viewer-container", providers: [TilesViewerService, TilesService], usesInheritance: true, ngImport: i0, template: "@if (appTileGroups$ | async; as appTileGroups) { @if (appTileGroups) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        settings.DisplayMode$Caption === '\u062A\u0628 \u0628\u0646\u062F\u06CC' ? tabmode : megamenu;\r\n        context: { $implicit: appTileGroups }\r\n    \"\r\n>\r\n</ng-container>\r\n<ng-template #tabmode let-appTileGroups>\r\n    <bt-tiles-viewer\r\n        darkClass\r\n        [class.edit]=\"(edit$ | async)!!\"\r\n        [appTileGroups]=\"appTileGroups\"\r\n        [loading]=\"(viewLoading$ | async)!!\"\r\n        [iconTabType]=\"settings?.TabType?.$Caption\"\r\n        [class.hideTabs]=\"settings?.HideTabs\"\r\n        [class.centerContent]=\"settings?.CenterContent\"\r\n        [class.boxShadow]=\"settings?.BoxShadow\"\r\n        [class.tabsBackColor]=\"settings?.TabsBackColor\"\r\n        cssRootVariable\r\n        [cssVariableValue]=\"settings?.TabsBackColor\"\r\n        [cssVariableName]=\"'--tile-tabs-custom-color'\"\r\n        [edit]=\"(edit$ | async)!!\"\r\n        [rtl]=\"(rtl$ | async)!!\"\r\n        [stackContent]=\"(stackContent$ | async)!!\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"\r\n        [defaultTab]=\"selectedAppGroupId\"\r\n        (stackContentChange)=\"onStackContentChanged($event)\"\r\n        (closeEditHome)=\"onCloseEditHome()\"\r\n        (save)=\"onExitEditHome($event)\"\r\n        (listDropped)=\"onDropGroup($event)\"\r\n        (tabChanged)=\"onSelectedTabChange($event)\"\r\n        (toggleGroup)=\"onToggleShowHide($event)\"\r\n        (resetGroup)=\"onReset($event)\"\r\n        (deleteGroup)=\"onDelete($event)\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (hideAppTileClick)=\"onHideAppTile($event)\"\r\n        (renameAppTileClick)=\"onRenameAppTile($event)\"\r\n    ></bt-tiles-viewer>\r\n</ng-template>\r\n<ng-template #megamenu>\r\n    <bt-tiles-viewer-megamenu\r\n        darkClass\r\n        [appTileGroups]=\"appTileGroups\"\r\n        [loading]=\"(viewLoading$ | async)!!\"\r\n        [class.centerContent]=\"settings?.CenterContent\"\r\n        [rtl]=\"(rtl$ | async)!!\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"        \r\n        (loadAppTileGroup)=\"onLoadAppTileGroup($event)\"\r\n    ></bt-tiles-viewer-megamenu>\r\n</ng-template>\r\n} @else {\r\n<bsu-no-data></bsu-no-data>\r\n} } @else {\r\n<bsu-mask></bsu-mask>\r\n}\r\n\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.DynamicRootVariableDirective, selector: "[cssRootVariable]", inputs: ["cssVariableName", "cssVariableValue", "disable"], exportAs: ["cssRootVariable"] }, { kind: "component", type: i3.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i3.NoDataComponent, selector: "bsu-no-data", inputs: ["simple"] }, { kind: "directive", type: i3.DarkClassDirective, selector: "[darkClass]" }, { kind: "component", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: ["appTileGroups", "loading", "edit", "rtl", "defaultTab", "tabsBackColor", "stackContent", "iconTabType", "deviceSize", "selectedAppGroupId", "DynamicComponents"], outputs: ["stackContentChange", "closeEditHome", "save", "listDropped", "tabChanged", "toggleGroup", "resetGroup", "deleteGroup", "hideAppTileClick", "renameAppTileClick", "tilesDropped"] }, { kind: "component", type: TilesViewerMegamenuComponent, selector: "bt-tiles-viewer-megamenu", inputs: ["appTileGroups", "loading", "rtl", "deviceSize", "selectedAppGroupId", "DynamicComponents"], outputs: ["loadAppTileGroup"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    onSelectedTabChange(e) { this.controller.onSelectedTabChange(e); }
+    onLoadAppTileGroup(appTileGroup) { this.controller.onLoadAppTileGroup(appTileGroup); }
+    onDropGroup(e) { this.controller.onDropGroup(e); }
+    onDrop(e) { this.controller.onDrop(e); }
+    onStackContentChanged(checked) { this.controller.onStackContentChanged(checked); }
+    onExitEditHome(appTileGroups) { this.controller.onExitEditHome(appTileGroups); }
+    onCloseEditHome() { this.controller.onCloseEditHome(); }
+    onDelete(appTileGroup) { this.controller.onDelete(appTileGroup); }
+    onToggleShowHide(appTileGroup) { this.controller.onToggleShowHide(appTileGroup); }
+    onReset(appTileGroup) { this.controller.onReset(appTileGroup); }
+    onHideAppTile(appTile) { this.controller.onHideAppTile(appTile); }
+    onRenameAppTile(appTile) { this.controller.onRenameAppTile(appTile); }
+    onChangeGroupAppTile(appTile) { this.controller.onChangeGroupAppTile(appTile); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TilesViewerContainerComponent, isStandalone: false, selector: "bt-tiles-viewer-container", usesInheritance: true, ngImport: i0, template: "@if (appTileGroups$ | async; as appTileGroups) { @if (appTileGroups) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        settings.DisplayMode$Caption === '\u062A\u0628 \u0628\u0646\u062F\u06CC' ? tabmode : megamenu;\r\n        context: { $implicit: appTileGroups }\r\n    \"\r\n>\r\n</ng-container>\r\n<ng-template #tabmode let-appTileGroups>\r\n    <bt-tiles-viewer\r\n        darkClass\r\n        [class.edit]=\"(edit$ | async) === true\"\r\n        [appTileGroups]=\"appTileGroups\"\r\n        [loading]=\"(viewLoading$ | async)!!\"\r\n        [iconTabType]=\"settings?.TabType?.$Caption\"\r\n        [class.hideTabs]=\"settings?.HideTabs\"\r\n        [class.centerContent]=\"settings?.CenterContent\"\r\n        [class.boxShadow]=\"settings?.BoxShadow\"\r\n        [class.tabsBackColor]=\"settings?.TabsBackColor\"\r\n        cssRootVariable\r\n        [cssVariableValue]=\"settings?.TabsBackColor\"\r\n        [cssVariableName]=\"'--tile-tabs-custom-color'\"\r\n        [edit]=\"(edit$ | async) === true\"\r\n        [rtl]=\"(rtl$ | async) === true\"\r\n        [stackContent]=\"(stackContent$ | async) === true\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"\r\n        [defaultTab]=\"selectedAppGroupId\"\r\n        (stackContentChange)=\"onStackContentChanged($event)\"\r\n        (closeEditHome)=\"onCloseEditHome()\"\r\n        (save)=\"onExitEditHome($event)\"\r\n        (listDropped)=\"onDropGroup($event)\"\r\n        (tabChanged)=\"onSelectedTabChange($event)\"\r\n        (toggleGroup)=\"onToggleShowHide($event)\"\r\n        (resetGroup)=\"onReset($event)\"\r\n        (deleteGroup)=\"onDelete($event)\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (hideAppTileClick)=\"onHideAppTile($event)\"\r\n        (renameAppTileClick)=\"onRenameAppTile($event)\"\r\n        (changeGroupAppTileClick)=\"onChangeGroupAppTile($event)\"\r\n    ></bt-tiles-viewer>\r\n</ng-template>\r\n<ng-template #megamenu>\r\n    <bt-tiles-viewer-megamenu\r\n        darkClass\r\n        [appTileGroups]=\"appTileGroups\"\r\n        [loading]=\"(viewLoading$ | async)!!\"\r\n        [class.centerContent]=\"settings?.CenterContent\"\r\n        [rtl]=\"(rtl$ | async)!!\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"        \r\n        (loadAppTileGroup)=\"onLoadAppTileGroup($event)\"\r\n    ></bt-tiles-viewer-megamenu>\r\n</ng-template>\r\n} @else {\r\n<bsu-no-data></bsu-no-data>\r\n} } @else {\r\n<bsu-mask></bsu-mask>\r\n}\r\n\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.DynamicRootVariableDirective, selector: "[cssRootVariable]", inputs: ["cssVariableName", "cssVariableValue", "disable"], exportAs: ["cssRootVariable"] }, { kind: "component", type: i3.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i3.NoDataComponent, selector: "bsu-no-data", inputs: ["simple"] }, { kind: "directive", type: i3.DarkClassDirective, selector: "[darkClass]" }, { kind: "component", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: ["appTileGroups", "loading", "edit", "rtl", "defaultTab", "tabsBackColor", "stackContent", "iconTabType", "deviceSize", "selectedAppGroupId", "DynamicComponents"], outputs: ["stackContentChange", "closeEditHome", "save", "listDropped", "tabChanged", "toggleGroup", "resetGroup", "deleteGroup", "hideAppTileClick", "renameAppTileClick", "changeGroupAppTileClick", "tilesDropped"] }, { kind: "component", type: TilesViewerMegamenuComponent, selector: "bt-tiles-viewer-megamenu", inputs: ["appTileGroups", "loading", "rtl", "deviceSize", "selectedAppGroupId", "DynamicComponents"], outputs: ["loadAppTileGroup"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer-container', providers: [TilesViewerService, TilesService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (appTileGroups$ | async; as appTileGroups) { @if (appTileGroups) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        settings.DisplayMode$Caption === '\u062A\u0628 \u0628\u0646\u062F\u06CC' ? tabmode : megamenu;\r\n        context: { $implicit: appTileGroups }\r\n    \"\r\n>\r\n</ng-container>\r\n<ng-template #tabmode let-appTileGroups>\r\n    <bt-tiles-viewer\r\n        darkClass\r\n        [class.edit]=\"(edit$ | async)!!\"\r\n        [appTileGroups]=\"appTileGroups\"\r\n        [loading]=\"(viewLoading$ | async)!!\"\r\n        [iconTabType]=\"settings?.TabType?.$Caption\"\r\n        [class.hideTabs]=\"settings?.HideTabs\"\r\n        [class.centerContent]=\"settings?.CenterContent\"\r\n        [class.boxShadow]=\"settings?.BoxShadow\"\r\n        [class.tabsBackColor]=\"settings?.TabsBackColor\"\r\n        cssRootVariable\r\n        [cssVariableValue]=\"settings?.TabsBackColor\"\r\n        [cssVariableName]=\"'--tile-tabs-custom-color'\"\r\n        [edit]=\"(edit$ | async)!!\"\r\n        [rtl]=\"(rtl$ | async)!!\"\r\n        [stackContent]=\"(stackContent$ | async)!!\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"\r\n        [defaultTab]=\"selectedAppGroupId\"\r\n        (stackContentChange)=\"onStackContentChanged($event)\"\r\n        (closeEditHome)=\"onCloseEditHome()\"\r\n        (save)=\"onExitEditHome($event)\"\r\n        (listDropped)=\"onDropGroup($event)\"\r\n        (tabChanged)=\"onSelectedTabChange($event)\"\r\n        (toggleGroup)=\"onToggleShowHide($event)\"\r\n        (resetGroup)=\"onReset($event)\"\r\n        (deleteGroup)=\"onDelete($event)\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (hideAppTileClick)=\"onHideAppTile($event)\"\r\n        (renameAppTileClick)=\"onRenameAppTile($event)\"\r\n    ></bt-tiles-viewer>\r\n</ng-template>\r\n<ng-template #megamenu>\r\n    <bt-tiles-viewer-megamenu\r\n        darkClass\r\n        [appTileGroups]=\"appTileGroups\"\r\n        [loading]=\"(viewLoading$ | async)!!\"\r\n        [class.centerContent]=\"settings?.CenterContent\"\r\n        [rtl]=\"(rtl$ | async)!!\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"        \r\n        (loadAppTileGroup)=\"onLoadAppTileGroup($event)\"\r\n    ></bt-tiles-viewer-megamenu>\r\n</ng-template>\r\n} @else {\r\n<bsu-no-data></bsu-no-data>\r\n} } @else {\r\n<bsu-mask></bsu-mask>\r\n}\r\n\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'bt-tiles-viewer-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (appTileGroups$ | async; as appTileGroups) { @if (appTileGroups) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        settings.DisplayMode$Caption === '\u062A\u0628 \u0628\u0646\u062F\u06CC' ? tabmode : megamenu;\r\n        context: { $implicit: appTileGroups }\r\n    \"\r\n>\r\n</ng-container>\r\n<ng-template #tabmode let-appTileGroups>\r\n    <bt-tiles-viewer\r\n        darkClass\r\n        [class.edit]=\"(edit$ | async) === true\"\r\n        [appTileGroups]=\"appTileGroups\"\r\n        [loading]=\"(viewLoading$ | async)!!\"\r\n        [iconTabType]=\"settings?.TabType?.$Caption\"\r\n        [class.hideTabs]=\"settings?.HideTabs\"\r\n        [class.centerContent]=\"settings?.CenterContent\"\r\n        [class.boxShadow]=\"settings?.BoxShadow\"\r\n        [class.tabsBackColor]=\"settings?.TabsBackColor\"\r\n        cssRootVariable\r\n        [cssVariableValue]=\"settings?.TabsBackColor\"\r\n        [cssVariableName]=\"'--tile-tabs-custom-color'\"\r\n        [edit]=\"(edit$ | async) === true\"\r\n        [rtl]=\"(rtl$ | async) === true\"\r\n        [stackContent]=\"(stackContent$ | async) === true\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"\r\n        [defaultTab]=\"selectedAppGroupId\"\r\n        (stackContentChange)=\"onStackContentChanged($event)\"\r\n        (closeEditHome)=\"onCloseEditHome()\"\r\n        (save)=\"onExitEditHome($event)\"\r\n        (listDropped)=\"onDropGroup($event)\"\r\n        (tabChanged)=\"onSelectedTabChange($event)\"\r\n        (toggleGroup)=\"onToggleShowHide($event)\"\r\n        (resetGroup)=\"onReset($event)\"\r\n        (deleteGroup)=\"onDelete($event)\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (hideAppTileClick)=\"onHideAppTile($event)\"\r\n        (renameAppTileClick)=\"onRenameAppTile($event)\"\r\n        (changeGroupAppTileClick)=\"onChangeGroupAppTile($event)\"\r\n    ></bt-tiles-viewer>\r\n</ng-template>\r\n<ng-template #megamenu>\r\n    <bt-tiles-viewer-megamenu\r\n        darkClass\r\n        [appTileGroups]=\"appTileGroups\"\r\n        [loading]=\"(viewLoading$ | async)!!\"\r\n        [class.centerContent]=\"settings?.CenterContent\"\r\n        [rtl]=\"(rtl$ | async)!!\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"        \r\n        (loadAppTileGroup)=\"onLoadAppTileGroup($event)\"\r\n    ></bt-tiles-viewer-megamenu>\r\n</ng-template>\r\n} @else {\r\n<bsu-no-data></bsu-no-data>\r\n} } @else {\r\n<bsu-mask></bsu-mask>\r\n}\r\n\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
+        }] });
 
 class MicroTileChartBulletComponent extends BaseBtTileComponent {
     ngOnInit() {
@@ -2082,11 +2730,11 @@ class MicroTileChartBulletComponent extends BaseBtTileComponent {
         this.isDelta = this.settings.IsDelta;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartBulletComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MicroTileChartBulletComponent, isStandalone: false, selector: "bt-micro-tile-chart-bullet", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (double) {\r\n        <be-micro-chart-bullet\r\n            [target]=\"target\"\r\n            [value]=\"value\"\r\n            [range]=\"range\"\r\n            [forecast]=\"forecast\"\r\n            [isDelta]=\"isDelta\"\r\n            [separatorLines]=\"separatorLines\"\r\n            [suffix]=\"suffix\"\r\n        >\r\n        </be-micro-chart-bullet>\r\n        }\r\n\r\n        <be-micro-chart-bullet\r\n            [target]=\"target\"\r\n            [value]=\"value\"\r\n            [range]=\"range\"\r\n            [forecast]=\"forecast\"\r\n            [isDelta]=\"double ? false : isDelta\"\r\n            [separatorLines]=\"separatorLines\"\r\n            [suffix]=\"suffix\"\r\n        >\r\n        </be-micro-chart-bullet>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host ::ng-deep .fd-tile__content{display:flex;column-gap:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$3.MicroChartBulletComponent, selector: "be-micro-chart-bullet", inputs: ["chartInstanceId", "parentMoId", "range", "value", "forecast", "target", "suffix", "separatorLines", "isDelta"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MicroTileChartBulletComponent, isStandalone: false, selector: "bt-micro-tile-chart-bullet", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (double) {\r\n        <be-micro-chart-bullet\r\n            [target]=\"target\"\r\n            [value]=\"value\"\r\n            [range]=\"range\"\r\n            [forecast]=\"forecast\"\r\n            [isDelta]=\"isDelta\"\r\n            [separatorLines]=\"separatorLines\"\r\n            [suffix]=\"suffix\"\r\n        >\r\n        </be-micro-chart-bullet>\r\n        }\r\n\r\n        <be-micro-chart-bullet\r\n            [target]=\"target\"\r\n            [value]=\"value\"\r\n            [range]=\"range\"\r\n            [forecast]=\"forecast\"\r\n            [isDelta]=\"double ? false : isDelta\"\r\n            [separatorLines]=\"separatorLines\"\r\n            [suffix]=\"suffix\"\r\n        >\r\n        </be-micro-chart-bullet>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host ::ng-deep .fd-tile__content{display:flex;column-gap:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartBulletComponent, selector: "be-micro-chart-bullet", inputs: ["chartInstanceId", "parentMoId", "range", "value", "forecast", "target", "suffix", "separatorLines", "isDelta"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartBulletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-bullet', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (double) {\r\n        <be-micro-chart-bullet\r\n            [target]=\"target\"\r\n            [value]=\"value\"\r\n            [range]=\"range\"\r\n            [forecast]=\"forecast\"\r\n            [isDelta]=\"isDelta\"\r\n            [separatorLines]=\"separatorLines\"\r\n            [suffix]=\"suffix\"\r\n        >\r\n        </be-micro-chart-bullet>\r\n        }\r\n\r\n        <be-micro-chart-bullet\r\n            [target]=\"target\"\r\n            [value]=\"value\"\r\n            [range]=\"range\"\r\n            [forecast]=\"forecast\"\r\n            [isDelta]=\"double ? false : isDelta\"\r\n            [separatorLines]=\"separatorLines\"\r\n            [suffix]=\"suffix\"\r\n        >\r\n        </be-micro-chart-bullet>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host ::ng-deep .fd-tile__content{display:flex;column-gap:20px}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-bullet', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (double) {\r\n        <be-micro-chart-bullet\r\n            [target]=\"target\"\r\n            [value]=\"value\"\r\n            [range]=\"range\"\r\n            [forecast]=\"forecast\"\r\n            [isDelta]=\"isDelta\"\r\n            [separatorLines]=\"separatorLines\"\r\n            [suffix]=\"suffix\"\r\n        >\r\n        </be-micro-chart-bullet>\r\n        }\r\n\r\n        <be-micro-chart-bullet\r\n            [target]=\"target\"\r\n            [value]=\"value\"\r\n            [range]=\"range\"\r\n            [forecast]=\"forecast\"\r\n            [isDelta]=\"double ? false : isDelta\"\r\n            [separatorLines]=\"separatorLines\"\r\n            [suffix]=\"suffix\"\r\n        >\r\n        </be-micro-chart-bullet>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host ::ng-deep .fd-tile__content{display:flex;column-gap:20px}\n"] }]
         }] });
 
 class NewsTileComponent extends BaseBtTileComponent {
@@ -2103,7 +2751,7 @@ class NewsTileComponent extends BaseBtTileComponent {
         if (slides.length) {
             this._updateTile(slides[0]);
             interval(5000)
-                .pipe(takeUntil(this._onDestroy$), tap(() => {
+                .pipe(takeUntil$1(this._onDestroy$), tap(() => {
                 if (!this.isStop) {
                     this.carouselComponent.next();
                 }
@@ -2120,11 +2768,11 @@ class NewsTileComponent extends BaseBtTileComponent {
         this.activeNews = newsMo;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NewsTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NewsTileComponent, isStandalone: false, selector: "bt-news-tile", viewQueries: [{ propertyName: "carouselComponent", first: true, predicate: CarouselComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [footerTemplate]=\"newsFooter\"\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [listMode]=\"listMode\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\r\n        <span>\r\n            {{ activeNews?.Text | bbbTranslate }}\r\n        </span>\r\n\r\n        <div class=\"wrapper-carousel\">\r\n            <div class=\"cover\"></div>\r\n            @if (slides.length > 1) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [glyph]=\"isStop ? 'play' : 'pause'\"\r\n                (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\r\n            ></button>\r\n            }\r\n            <fd-carousel\r\n                carouselIndicatorsOrientation=\"top\"\r\n                [slideTransitionDuration]=\"1000\"\r\n                (slideChange)=\"slideChange($event)\"\r\n                [loop]=\"true\"\r\n                [navigation]=\"false\"\r\n                [navigatorInPageIndicator]=\"false\"\r\n                width=\"100%\"\r\n            >\r\n                @for (slide of slides; track slide) {\r\n                <fd-carousel-item [value]=\"slide\">\r\n                    <img\r\n                        [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\r\n                        loading=\"lazy\"\r\n                    />\r\n                </fd-carousel-item>\r\n                }\r\n            </fd-carousel>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n\r\n<!--  tile footer-->\r\n<ng-template #newsFooter>\r\n    <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\r\n        @if (twoColumn) {\r\n        <div fd-tile-section>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\r\n        </div>\r\n        <div fd-tile-section>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer2 | bbbTranslate }}</span>\r\n        </div>\r\n        } @else {\r\n        <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{position:relative;display:block}:host bt-tile{position:relative}:host bt-tile .wrapper-carousel{position:absolute;top:0;width:100%;height:100%;left:0;z-index:0}:host bt-tile .wrapper-carousel img{width:335px;height:165px;object-fit:cover}:host ::ng-deep span{z-index:3;color:#fff}:host ::ng-deep button{position:absolute;right:15px;top:15px;display:none}:host ::ng-deep .fd-carousel__content{z-index:3}:host ::ng-deep .fd-carousel__page-indicator-container{position:absolute;bottom:0;display:none;background-color:transparent}:host ::ng-deep .fd-carousel__page-indicator-container ol{z-index:5}:host ::ng-deep .fd-carousel__page-indicator-container ol li{background-color:#dad7d7}:host ::ng-deep .fd-carousel__page-indicator-container ol li.fd-carousel__page-indicator--active{background-color:#fff}:host .cover{background-color:#064079d9;position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;opacity:.6}:host:hover ::ng-deep .fd-carousel__page-indicator-container{display:inherit}:host:hover ::ng-deep button{display:inline-flex}\n"], dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$4.CarouselComponent, selector: "fd-carousel", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "pageIndicatorsOrientation", "height", "width", "loop", "navigation", "navigatorInPageIndicator", "numericIndicator", "pageIndicatorContainer", "pageIndicator", "resourceStrings", "slideTransitionDuration", "swipeEnabled", "vertical", "noPaginationContainerBorder", "contentBackground", "pageIndicatorBackground", "visibleSlidesCount"], outputs: ["slideChange"] }, { kind: "component", type: i2$4.CarouselItemComponent, selector: "fd-carousel-item", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "loading", "title", "initialHeight", "initialWidth", "value"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$1.TileFooterTextDirective, selector: "[fdTileFooterText], [fd-tile-footer-text]" }, { kind: "directive", type: i5.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NewsTileComponent, isStandalone: false, selector: "bt-news-tile", viewQueries: [{ propertyName: "carouselComponent", first: true, predicate: CarouselComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [footerTemplate]=\"newsFooter\"\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [listMode]=\"listMode\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\r\n        <span>\r\n            {{ activeNews?.Text | bbbTranslate }}\r\n        </span>\r\n\r\n        <div class=\"wrapper-carousel\">\r\n            <div class=\"cover\"></div>\r\n            @if (slides.length > 1) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [glyph]=\"isStop ? 'play' : 'pause'\"\r\n                (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\r\n            ></button>\r\n            }\r\n            <fd-carousel\r\n                carouselIndicatorsOrientation=\"top\"\r\n                [slideTransitionDuration]=\"1000\"\r\n                (slideChange)=\"slideChange($event)\"\r\n                [loop]=\"true\"\r\n                [navigation]=\"false\"\r\n                [navigatorInPageIndicator]=\"false\"\r\n                width=\"100%\"\r\n            >\r\n                @for (slide of slides; track slide) {\r\n                <fd-carousel-item [value]=\"slide\">\r\n                    <img\r\n                        [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\r\n                        loading=\"lazy\"\r\n                    />\r\n                </fd-carousel-item>\r\n                }\r\n            </fd-carousel>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n\r\n<!--  tile footer-->\r\n<ng-template #newsFooter>\r\n    <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\r\n        @if (twoColumn) {\r\n        <div fd-tile-section>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\r\n        </div>\r\n        <div fd-tile-section>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer2 | bbbTranslate }}</span>\r\n        </div>\r\n        } @else {\r\n        <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{position:relative;display:block}:host bt-tile{position:relative}:host bt-tile .wrapper-carousel{position:absolute;top:0;width:100%;height:100%;left:0;z-index:0}:host bt-tile .wrapper-carousel img{width:335px;height:165px;object-fit:cover}:host ::ng-deep span{z-index:3;color:#fff}:host ::ng-deep button{position:absolute;right:15px;top:15px;display:none}:host ::ng-deep .fd-carousel__content{z-index:3}:host ::ng-deep .fd-carousel__page-indicator-container{position:absolute;bottom:0;display:none;background-color:transparent}:host ::ng-deep .fd-carousel__page-indicator-container ol{z-index:5}:host ::ng-deep .fd-carousel__page-indicator-container ol li{background-color:#dad7d7}:host ::ng-deep .fd-carousel__page-indicator-container ol li.fd-carousel__page-indicator--active{background-color:#fff}:host .cover{background-color:#064079d9;position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;opacity:.6}:host:hover ::ng-deep .fd-carousel__page-indicator-container{display:inherit}:host:hover ::ng-deep button{display:inline-flex}\n"], dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$5.CarouselComponent, selector: "fd-carousel", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "pageIndicatorsOrientation", "height", "width", "loop", "navigation", "navigatorInPageIndicator", "numericIndicator", "pageIndicatorContainer", "pageIndicator", "resourceStrings", "slideTransitionDuration", "swipeEnabled", "vertical", "noPaginationContainerBorder", "contentBackground", "pageIndicatorBackground", "visibleSlidesCount"], outputs: ["slideChange"] }, { kind: "component", type: i2$5.CarouselItemComponent, selector: "fd-carousel-item", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "loading", "title", "initialHeight", "initialWidth", "value"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$1.TileFooterTextDirective, selector: "[fdTileFooterText], [fd-tile-footer-text]" }, { kind: "directive", type: i5.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NewsTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-news-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [footerTemplate]=\"newsFooter\"\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [listMode]=\"listMode\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\r\n        <span>\r\n            {{ activeNews?.Text | bbbTranslate }}\r\n        </span>\r\n\r\n        <div class=\"wrapper-carousel\">\r\n            <div class=\"cover\"></div>\r\n            @if (slides.length > 1) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [glyph]=\"isStop ? 'play' : 'pause'\"\r\n                (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\r\n            ></button>\r\n            }\r\n            <fd-carousel\r\n                carouselIndicatorsOrientation=\"top\"\r\n                [slideTransitionDuration]=\"1000\"\r\n                (slideChange)=\"slideChange($event)\"\r\n                [loop]=\"true\"\r\n                [navigation]=\"false\"\r\n                [navigatorInPageIndicator]=\"false\"\r\n                width=\"100%\"\r\n            >\r\n                @for (slide of slides; track slide) {\r\n                <fd-carousel-item [value]=\"slide\">\r\n                    <img\r\n                        [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\r\n                        loading=\"lazy\"\r\n                    />\r\n                </fd-carousel-item>\r\n                }\r\n            </fd-carousel>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n\r\n<!--  tile footer-->\r\n<ng-template #newsFooter>\r\n    <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\r\n        @if (twoColumn) {\r\n        <div fd-tile-section>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\r\n        </div>\r\n        <div fd-tile-section>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer2 | bbbTranslate }}</span>\r\n        </div>\r\n        } @else {\r\n        <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{position:relative;display:block}:host bt-tile{position:relative}:host bt-tile .wrapper-carousel{position:absolute;top:0;width:100%;height:100%;left:0;z-index:0}:host bt-tile .wrapper-carousel img{width:335px;height:165px;object-fit:cover}:host ::ng-deep span{z-index:3;color:#fff}:host ::ng-deep button{position:absolute;right:15px;top:15px;display:none}:host ::ng-deep .fd-carousel__content{z-index:3}:host ::ng-deep .fd-carousel__page-indicator-container{position:absolute;bottom:0;display:none;background-color:transparent}:host ::ng-deep .fd-carousel__page-indicator-container ol{z-index:5}:host ::ng-deep .fd-carousel__page-indicator-container ol li{background-color:#dad7d7}:host ::ng-deep .fd-carousel__page-indicator-container ol li.fd-carousel__page-indicator--active{background-color:#fff}:host .cover{background-color:#064079d9;position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;opacity:.6}:host:hover ::ng-deep .fd-carousel__page-indicator-container{display:inherit}:host:hover ::ng-deep button{display:inline-flex}\n"] }]
+            args: [{ selector: 'bt-news-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [footerTemplate]=\"newsFooter\"\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [listMode]=\"listMode\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\r\n        <span>\r\n            {{ activeNews?.Text | bbbTranslate }}\r\n        </span>\r\n\r\n        <div class=\"wrapper-carousel\">\r\n            <div class=\"cover\"></div>\r\n            @if (slides.length > 1) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [glyph]=\"isStop ? 'play' : 'pause'\"\r\n                (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\r\n            ></button>\r\n            }\r\n            <fd-carousel\r\n                carouselIndicatorsOrientation=\"top\"\r\n                [slideTransitionDuration]=\"1000\"\r\n                (slideChange)=\"slideChange($event)\"\r\n                [loop]=\"true\"\r\n                [navigation]=\"false\"\r\n                [navigatorInPageIndicator]=\"false\"\r\n                width=\"100%\"\r\n            >\r\n                @for (slide of slides; track slide) {\r\n                <fd-carousel-item [value]=\"slide\">\r\n                    <img\r\n                        [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\r\n                        loading=\"lazy\"\r\n                    />\r\n                </fd-carousel-item>\r\n                }\r\n            </fd-carousel>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n\r\n<!--  tile footer-->\r\n<ng-template #newsFooter>\r\n    <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\r\n        @if (twoColumn) {\r\n        <div fd-tile-section>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\r\n        </div>\r\n        <div fd-tile-section>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer2 | bbbTranslate }}</span>\r\n        </div>\r\n        } @else {\r\n        <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{position:relative;display:block}:host bt-tile{position:relative}:host bt-tile .wrapper-carousel{position:absolute;top:0;width:100%;height:100%;left:0;z-index:0}:host bt-tile .wrapper-carousel img{width:335px;height:165px;object-fit:cover}:host ::ng-deep span{z-index:3;color:#fff}:host ::ng-deep button{position:absolute;right:15px;top:15px;display:none}:host ::ng-deep .fd-carousel__content{z-index:3}:host ::ng-deep .fd-carousel__page-indicator-container{position:absolute;bottom:0;display:none;background-color:transparent}:host ::ng-deep .fd-carousel__page-indicator-container ol{z-index:5}:host ::ng-deep .fd-carousel__page-indicator-container ol li{background-color:#dad7d7}:host ::ng-deep .fd-carousel__page-indicator-container ol li.fd-carousel__page-indicator--active{background-color:#fff}:host .cover{background-color:#064079d9;position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;opacity:.6}:host:hover ::ng-deep .fd-carousel__page-indicator-container{display:inherit}:host:hover ::ng-deep button{display:inline-flex}\n"] }]
         }], propDecorators: { carouselComponent: [{
                 type: ViewChild,
                 args: [CarouselComponent]
@@ -2147,11 +2795,11 @@ class MicroTileChartComparisonComponent extends BaseBtTileComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartComparisonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: MicroTileChartComparisonComponent, isStandalone: false, selector: "bt-micro-tile-chart-comparison", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-comparison [data]=\"chartData\" [size]=\"double ? 'l' : 's'\"></be-micro-chart-comparison>\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$3.MicroChartComparisonComponent, selector: "be-micro-chart-comparison", inputs: ["chartInstanceId", "parentMoId", "size"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: MicroTileChartComparisonComponent, isStandalone: false, selector: "bt-micro-tile-chart-comparison", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-comparison [data]=\"chartData\" [size]=\"double ? 'l' : 's'\"></be-micro-chart-comparison>\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartComparisonComponent, selector: "be-micro-chart-comparison", inputs: ["chartInstanceId", "parentMoId", "size"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartComparisonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-comparison', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-comparison [data]=\"chartData\" [size]=\"double ? 'l' : 's'\"></be-micro-chart-comparison>\r\n    </div>\r\n</bt-tile>\r\n" }]
+            args: [{ selector: 'bt-micro-tile-chart-comparison', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-comparison [data]=\"chartData\" [size]=\"double ? 'l' : 's'\"></be-micro-chart-comparison>\r\n    </div>\r\n</bt-tile>\r\n" }]
         }] });
 
 class MicroTileChartStackbarComponent extends BaseBtTileComponent {
@@ -2167,11 +2815,11 @@ class MicroTileChartStackbarComponent extends BaseBtTileComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartStackbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: MicroTileChartStackbarComponent, isStandalone: false, selector: "bt-micro-tile-chart-stackbar", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-stackbar [data]=\"charData\"></be-micro-chart-stackbar>\r\n    </div>\r\n</bt-tile>\r\n", styles: [".chart{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$3.MicroChartStackbarComponent, selector: "be-micro-chart-stackbar", inputs: ["chartInstanceId", "parentMoId"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: MicroTileChartStackbarComponent, isStandalone: false, selector: "bt-micro-tile-chart-stackbar", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-stackbar [data]=\"charData\"></be-micro-chart-stackbar>\r\n    </div>\r\n</bt-tile>\r\n", styles: [".chart{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartStackbarComponent, selector: "be-micro-chart-stackbar", inputs: ["chartInstanceId", "parentMoId"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartStackbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-stackbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-stackbar [data]=\"charData\"></be-micro-chart-stackbar>\r\n    </div>\r\n</bt-tile>\r\n", styles: [".chart{width:100%}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-stackbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-stackbar [data]=\"charData\"></be-micro-chart-stackbar>\r\n    </div>\r\n</bt-tile>\r\n", styles: [".chart{width:100%}\n"] }]
         }] });
 
 class MicroTileChartLineComponent extends BaseBtTileComponent {
@@ -2192,11 +2840,11 @@ class MicroTileChartLineComponent extends BaseBtTileComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: MicroTileChartLineComponent, isStandalone: false, selector: "bt-micro-tile-chart-line", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-line [line]=\"chartData\"></be-micro-chart-line>\r\n    </div>\r\n</bt-tile>\r\n", styles: ["be-micro-chart-bar{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$3.MicroChartLineComponent, selector: "be-micro-chart-line", inputs: ["chartInstanceId", "parentMoId"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: MicroTileChartLineComponent, isStandalone: false, selector: "bt-micro-tile-chart-line", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-line [line]=\"chartData\"></be-micro-chart-line>\r\n    </div>\r\n</bt-tile>\r\n", styles: ["be-micro-chart-bar{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartLineComponent, selector: "be-micro-chart-line", inputs: ["chartInstanceId", "parentMoId"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-line', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-line [line]=\"chartData\"></be-micro-chart-line>\r\n    </div>\r\n</bt-tile>\r\n", styles: ["be-micro-chart-bar{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-line', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-line [line]=\"chartData\"></be-micro-chart-line>\r\n    </div>\r\n</bt-tile>\r\n", styles: ["be-micro-chart-bar{display:flex;flex-direction:column}\n"] }]
         }] });
 
 class MicroTileChartCircularComponent extends BaseBtTileComponent {
@@ -2205,11 +2853,11 @@ class MicroTileChartCircularComponent extends BaseBtTileComponent {
         this.chartData = 70;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartCircularComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: MicroTileChartCircularComponent, isStandalone: false, selector: "bt-micro-tile-chart-circular", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-circular [data]=\"chartData\"></be-micro-chart-circular>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$3.MicroChartCircularComponent, selector: "be-micro-chart-circular", inputs: ["chartInstanceId", "parentMoId"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: MicroTileChartCircularComponent, isStandalone: false, selector: "bt-micro-tile-chart-circular", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-circular [data]=\"chartData\"></be-micro-chart-circular>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartCircularComponent, selector: "be-micro-chart-circular", inputs: ["chartInstanceId", "parentMoId"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartCircularComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-circular', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-circular [data]=\"chartData\"></be-micro-chart-circular>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-circular', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-circular [data]=\"chartData\"></be-micro-chart-circular>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}\n"] }]
         }] });
 
 class MicroTileChartAreaComponent extends BaseBtTileComponent {
@@ -2238,163 +2886,22 @@ class MicroTileChartAreaComponent extends BaseBtTileComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: MicroTileChartAreaComponent, isStandalone: false, selector: "bt-micro-tile-chart-area", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-area\r\n            [style.flex-direction]=\"double ? 'row' : 'column'\"\r\n            [chartData]=\"chartData\"\r\n            [size]=\"double ? 'l' : 's'\"\r\n        ></be-micro-chart-area>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}be-micro-chart-area{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$3.MicroChartAreaComponent, selector: "be-micro-chart-area", inputs: ["chartInstanceId", "parentMoId", "size", "chartData"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: MicroTileChartAreaComponent, isStandalone: false, selector: "bt-micro-tile-chart-area", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-area\r\n            [style.flex-direction]=\"double ? 'row' : 'column'\"\r\n            [chartData]=\"chartData\"\r\n            [size]=\"double ? 'l' : 's'\"\r\n        ></be-micro-chart-area>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}be-micro-chart-area{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartAreaComponent, selector: "be-micro-chart-area", inputs: ["chartInstanceId", "parentMoId", "size", "chartData"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-area', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-area\r\n            [style.flex-direction]=\"double ? 'row' : 'column'\"\r\n            [chartData]=\"chartData\"\r\n            [size]=\"double ? 'l' : 's'\"\r\n        ></be-micro-chart-area>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}be-micro-chart-area{display:flex}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-area', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <be-micro-chart-area\r\n            [style.flex-direction]=\"double ? 'row' : 'column'\"\r\n            [chartData]=\"chartData\"\r\n            [size]=\"double ? 'l' : 's'\"\r\n        ></be-micro-chart-area>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}be-micro-chart-area{display:flex}\n"] }]
         }] });
 
 class MicroTileChartBarComponent extends BaseBtTileComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MicroTileChartBarComponent, isStandalone: false, selector: "bt-micro-tile-chart-bar", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n    [footerTemplate]=\"footerTpl\"\r\n    [hideHeader]=\"true\"\r\n>\r\n    <div fd-tile-content style=\"height: 100%; max-height: 100%\">\r\n        @if(settings.ChartInstance?.Id){\r\n        <be-micro-chart-bar\r\n            [chartInstanceId]=\"settings.ChartInstance.Id\"\r\n            [size]=\"double ? 'l' : 's'\"\r\n        ></be-micro-chart-bar>\r\n        }@else{\r\n        <div>chart defined</div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n<ng-template #footerTpl></ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$3.MicroChartBarComponent, selector: "be-micro-chart-bar", inputs: ["chartInstanceId", "parentMoId", "size", "extraData"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MicroTileChartBarComponent, isStandalone: false, selector: "bt-micro-tile-chart-bar", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n    [footerTemplate]=\"footerTpl\"\r\n    [hideHeader]=\"true\"\r\n>\r\n    <div fd-tile-content style=\"height: 100%; max-height: 100%\">\r\n        @if(settings.ChartInstance?.Id){\r\n        <be-micro-chart-bar\r\n            [chartInstanceId]=\"settings.ChartInstance.Id\"\r\n            [size]=\"double ? 'l' : 's'\"\r\n        ></be-micro-chart-bar>\r\n        }@else{\r\n        <div>chart defined</div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n<ng-template #footerTpl></ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartBarComponent, selector: "be-micro-chart-bar", inputs: ["chartInstanceId", "parentMoId", "size", "extraData"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MicroTileChartBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n    [footerTemplate]=\"footerTpl\"\r\n    [hideHeader]=\"true\"\r\n>\r\n    <div fd-tile-content style=\"height: 100%; max-height: 100%\">\r\n        @if(settings.ChartInstance?.Id){\r\n        <be-micro-chart-bar\r\n            [chartInstanceId]=\"settings.ChartInstance.Id\"\r\n            [size]=\"double ? 'l' : 's'\"\r\n        ></be-micro-chart-bar>\r\n        }@else{\r\n        <div>chart defined</div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n<ng-template #footerTpl></ng-template>\r\n", styles: [":host{display:block}\n"] }]
-        }] });
-
-class CreateAppGroupComponent extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        this.dialogRef = inject(DialogRef);
-        this.bbbPipe = inject(BbbTranslatePipe);
-        this.fb = inject(UntypedFormBuilder);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.appGroupForm = this.fb.group({
-            title: new UntypedFormControl(this.title, [Validators.required])
-        });
-        const mandatoryFieldText = this.bbbPipe.transform('AlertFieldIsMandatory');
-        const titleText = this.bbbPipe.transform('Title');
-        this.RequiredText = mandatoryFieldText.replace('{0}', titleText);
-    }
-    onSave() {
-        this.submitted = true;
-        if (this.appGroupForm.valid) {
-            this.dialogRef.close(this.title);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CreateAppGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CreateAppGroupComponent, isStandalone: false, selector: "bt-create-app-group", usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.title }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n\r\n    <fd-dialog-body>\r\n        <div fd-form-item [formGroup]=\"appGroupForm\">\r\n            <label fd-form-label [required]=\"true\"> {{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                @if (submitted && appGroupForm.controls.title.errors) {\r\n                <fd-form-message type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n                }\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdkInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.dismiss()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { 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: i3$2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i3$2.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: i4$2.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: 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.DialogFooterComponent, selector: "fd-dialog-footer" }, { 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: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CreateAppGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-create-app-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.title }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n\r\n    <fd-dialog-body>\r\n        <div fd-form-item [formGroup]=\"appGroupForm\">\r\n            <label fd-form-label [required]=\"true\"> {{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                @if (submitted && appGroupForm.controls.title.errors) {\r\n                <fd-form-message type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n                }\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdkInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.dismiss()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n" }]
+            args: [{ selector: 'bt-micro-tile-chart-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n    [footerTemplate]=\"footerTpl\"\r\n    [hideHeader]=\"true\"\r\n>\r\n    <div fd-tile-content style=\"height: 100%; max-height: 100%\">\r\n        @if(settings.ChartInstance?.Id){\r\n        <be-micro-chart-bar\r\n            [chartInstanceId]=\"settings.ChartInstance.Id\"\r\n            [size]=\"double ? 'l' : 's'\"\r\n        ></be-micro-chart-bar>\r\n        }@else{\r\n        <div>chart defined</div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n<ng-template #footerTpl></ng-template>\r\n", styles: [":host{display:block}\n"] }]
         }] });
 
-class PinTileComponent extends BaseComponent {
-    constructor() {
-        super();
-        this.newGroupText = '';
-        this._dialogService = inject(DialogService);
-        this._dialogRef = inject(DialogRef);
-        this._bbbTranslate = inject(BbbTranslatePipe);
-        this._tilesService = inject(TilesService);
-        this.newGroupText = BarsaApi.LoginFormData.IsRtl
-            ? this._bbbTranslate.transform('Groups') + ' ' + this._bbbTranslate.transform('New')
-            : this._bbbTranslate.transform('New') + ' ' + this._bbbTranslate.transform('Groups');
-        const _dialogRef = this._dialogRef;
-        this.app = _dialogRef.data.app;
-        this.appTileGroups = _dialogRef.data.appTileGroups;
-        this.pinnedAppInTileGroups = _dialogRef.data.pinnedAppInTileGroups;
-    }
-    ngOnInit() {
-        this._setLoading(true);
-        const tileGroupsId = this.pinnedAppInTileGroups[this.app.Id];
-        this.appTileGroups.forEach((appGroup) => {
-            this._setDefaultPinTile(appGroup, tileGroupsId);
-        });
-        this._setLoading(false);
-    }
-    onAccept() {
-        const appTileGroupsPin = [];
-        this.appTileGroups.forEach((group) => {
-            this._getChangedPinTileGroups(group, appTileGroupsPin);
-        });
-        this._close({ appTileGroupsPin, app: this.app });
-    }
-    onClose() {
-        this._close();
-    }
-    onNewGroup() {
-        this.newGroupDialogRef = this._dialogService.open(CreateAppGroupComponent, {
-            data: { title: this.newGroupText },
-            verticalPadding: true,
-            mobile: this.mobile,
-            responsivePadding: true
-        });
-        this.newGroupDialogRef.afterClosed.subscribe((result) => {
-            if (result) {
-                this._setLoading(true);
-                this._tilesService
-                    .createAppGroup(result)
-                    .pipe(takeUntil$1(this._onDestroy$), finalize$1(() => {
-                    this._setLoading(false);
-                }))
-                    .subscribe();
-            }
-        });
-    }
-    onDeleteGroup(appTileGroup) {
-        const deleteCaption = this._bbbTranslate.transform('Delete');
-        const deleteConfirmation = this._bbbTranslate.transform('QuestionDeleteConfirmMessage');
-        BarsaApi.Bw.Msg.YesNo(deleteConfirmation, deleteCaption, (buttonId) => {
-            if (buttonId === 'yes') {
-                this._setLoading(true);
-                this._tilesService
-                    .deleteAppGroup(appTileGroup)
-                    .pipe(takeUntil$1(this._onDestroy$), finalize$1(() => {
-                    this._setLoading(false);
-                }))
-                    .subscribe(() => this._close());
-            }
-        });
-    }
-    _setLoading(loading) {
-        this._dialogRef.loading(loading);
-    }
-    _setDefaultPinTile(appTileGroup, tileGroupsId) {
-        appTileGroup.$PinTile = appTileGroup.$DefaultPinTile =
-            tileGroupsId.includes(appTileGroup.Id) || tileGroupsId.includes(appTileGroup.UserAppTileGroupSetting?.Id);
-        appTileGroup.$Children?.forEach((subGroup) => {
-            this._setDefaultPinTile(subGroup, tileGroupsId);
-        });
-        appTileGroup.$Disabledpin = false;
-    }
-    _getChangedPinTileGroups(appTileGroup, appTileGroupsPin) {
-        if (appTileGroup.$PinTile && !appTileGroup.$DefaultPinTile) {
-            // Add
-            appTileGroupsPin.push({ appTileGroup, visible: true });
-        }
-        else if (appTileGroup.$PinTile === false && appTileGroup.$DefaultPinTile) {
-            // Remove
-            appTileGroupsPin.push({ appTileGroup, visible: false });
-        }
-        appTileGroup.$Children?.forEach((subGroup) => {
-            this._getChangedPinTileGroups(subGroup, appTileGroupsPin);
-        });
-    }
-    _close(result) {
-        this._dialogRef.close(result);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PinTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: PinTileComponent, isStandalone: false, selector: "bt-pin-tile", inputs: { app: "app", appTileGroups: "appTileGroups", mobile: "mobile", pin: "pin" }, usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ 'AddToList' | bbbTranslate }}</h1>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body>\r\n        <ul fd-list [navigationIndicator]=\"true\" style=\"margin-bottom: 1rem\">\r\n            <li fd-list-item [navigationIndicator]=\"true\" (click)=\"onNewGroup()\">\r\n                <fd-icon glyph=\"add\"></fd-icon><span fd-list-title>{{ newGroupText }}</span>\r\n            </li>\r\n            @for (appTileGroup of appTileGroups; track appTileGroup) { @if (!appTileGroup.$Disabledpin) {\r\n            <li fd-list-item [selected]=\"appTileGroup.$PinTile\">\r\n                <fd-checkbox [(ngModel)]=\"appTileGroup.$PinTile\"></fd-checkbox>\r\n                <span fd-list-title>{{ appTileGroup.navigatorTitle || appTileGroup.Title }}</span>\r\n                @if( !appTileGroup.Predefined){\r\n                <button\r\n                    fd-button\r\n                    glyph=\"delete\"\r\n                    fdType=\"transparent\"\r\n                    [title]=\"'Delete' | bbbTranslate\"\r\n                    (click)=\"onDeleteGroup(appTileGroup)\"\r\n                ></button>\r\n                }\r\n            </li>\r\n            } @for (subGroup of appTileGroup.$Children; track subGroup) { @if (!subGroup.$Disabledpin) {\r\n            <li fd-list-item [selected]=\"subGroup.$PinTile\">\r\n                <fd-checkbox [(ngModel)]=\"subGroup.$PinTile\"></fd-checkbox>\r\n                <span fd-list-title>{{ subGroup.navigatorTitle || subGroup.Title }}</span>\r\n                @if( !subGroup.Predefined){\r\n                <button\r\n                    fd-button\r\n                    glyph=\"delete\"\r\n                    fdType=\"transparent\"\r\n                    [title]=\"'Delete' | bbbTranslate\"\r\n                    (click)=\"onDeleteGroup(subGroup)\"\r\n                ></button>\r\n                }\r\n            </li>\r\n            } } }\r\n        </ul>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <ng-template fdkTemplate=\"footer\">\r\n            <div fd-bar-left></div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar fdkInitialFocus fdType=\"emphasized\" [label]=\"'OK' | bbbTranslate\" (click)=\"onAccept()\">\r\n                </fd-button-bar>\r\n                <fd-button-bar\r\n                    fdkInitialFocus\r\n                    fdType=\"transparent\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                    (click)=\"onClose()\"\r\n                >\r\n                </fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [":host ::ng-deep .cdk-drag{cursor:default!important}:host *{cursor:default!important}li{cursor:pointer}fd-dialog-body,fd-dialog-footer,fd-dialog-header{cursor:default}fd-icon{padding:0 5px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i2$2.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$4.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { 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: "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.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i5$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i7$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { 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: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PinTileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-pin-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ 'AddToList' | bbbTranslate }}</h1>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body>\r\n        <ul fd-list [navigationIndicator]=\"true\" style=\"margin-bottom: 1rem\">\r\n            <li fd-list-item [navigationIndicator]=\"true\" (click)=\"onNewGroup()\">\r\n                <fd-icon glyph=\"add\"></fd-icon><span fd-list-title>{{ newGroupText }}</span>\r\n            </li>\r\n            @for (appTileGroup of appTileGroups; track appTileGroup) { @if (!appTileGroup.$Disabledpin) {\r\n            <li fd-list-item [selected]=\"appTileGroup.$PinTile\">\r\n                <fd-checkbox [(ngModel)]=\"appTileGroup.$PinTile\"></fd-checkbox>\r\n                <span fd-list-title>{{ appTileGroup.navigatorTitle || appTileGroup.Title }}</span>\r\n                @if( !appTileGroup.Predefined){\r\n                <button\r\n                    fd-button\r\n                    glyph=\"delete\"\r\n                    fdType=\"transparent\"\r\n                    [title]=\"'Delete' | bbbTranslate\"\r\n                    (click)=\"onDeleteGroup(appTileGroup)\"\r\n                ></button>\r\n                }\r\n            </li>\r\n            } @for (subGroup of appTileGroup.$Children; track subGroup) { @if (!subGroup.$Disabledpin) {\r\n            <li fd-list-item [selected]=\"subGroup.$PinTile\">\r\n                <fd-checkbox [(ngModel)]=\"subGroup.$PinTile\"></fd-checkbox>\r\n                <span fd-list-title>{{ subGroup.navigatorTitle || subGroup.Title }}</span>\r\n                @if( !subGroup.Predefined){\r\n                <button\r\n                    fd-button\r\n                    glyph=\"delete\"\r\n                    fdType=\"transparent\"\r\n                    [title]=\"'Delete' | bbbTranslate\"\r\n                    (click)=\"onDeleteGroup(subGroup)\"\r\n                ></button>\r\n                }\r\n            </li>\r\n            } } }\r\n        </ul>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <ng-template fdkTemplate=\"footer\">\r\n            <div fd-bar-left></div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar fdkInitialFocus fdType=\"emphasized\" [label]=\"'OK' | bbbTranslate\" (click)=\"onAccept()\">\r\n                </fd-button-bar>\r\n                <fd-button-bar\r\n                    fdkInitialFocus\r\n                    fdType=\"transparent\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                    (click)=\"onClose()\"\r\n                >\r\n                </fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [":host ::ng-deep .cdk-drag{cursor:default!important}:host *{cursor:default!important}li{cursor:pointer}fd-dialog-body,fd-dialog-footer,fd-dialog-header{cursor:default}fd-icon{padding:0 5px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { app: [{
-                type: Input
-            }], appTileGroups: [{
-                type: Input
-            }], mobile: [{
-                type: Input
-            }], pin: [{
-                type: Input
-            }] } });
-
 class AppFinderService {
     constructor() {
         this._appGroupsSource = new BehaviorSubject([]);
@@ -2409,7 +2916,7 @@ class AppFinderService {
         this.pinnedAppInAppTileGroups$ = this._pinnedAppInAppTileGroupsSource.asObservable();
         this.appGroups$ = this._appGroupsSource.asObservable();
         this.selectedAppGroupId$ = this._selectedAppGroupIdSource.asObservable().pipe(distinctUntilChanged());
-        this.selectedAppGroup$ = combineLatest([this.appGroups$, this.selectedAppGroupId$]).pipe(map(([moDataList, selectedId]) => moDataList?.find((c) => c.Id === selectedId)));
+        this.selectedAppGroup$ = combineLatest([this.appGroups$, this.selectedAppGroupId$]).pipe(map$1(([moDataList, selectedId]) => moDataList?.find((c) => c.Id === selectedId)));
     }
     get deviceSize() {
         return this._portalService.deviceSize;
@@ -2524,11 +3031,11 @@ class FormAppFinderComponent extends BaseComponent {
         this.selectedAppGroupId$ = this._appFinderService.selectedAppGroupId$;
         this.deviceSize$ = this._appFinderService.deviceSize$;
         this.pinnedAppInAppTileGroups$ = this._appFinderService.pinnedAppInAppTileGroups$;
-        this.mobile$ = this.deviceSize$.pipe(map((c) => c === 's'));
+        this.mobile$ = this.deviceSize$.pipe(map$1((c) => c === 's'));
     }
     ngOnInit() {
         super.ngOnInit();
-        this.sideContentSize$ = this.deviceSize$.pipe(takeUntil(this._onDestroy$), map((deviceSize) => {
+        this.sideContentSize$ = this.deviceSize$.pipe(takeUntil$1(this._onDestroy$), map$1((deviceSize) => {
             switch (deviceSize) {
                 case 's':
                     return 'sm';
@@ -2654,11 +3161,11 @@ class NumericTileComponent extends BaseBtTileComponent {
         return this.settings.ScaleArrowIcon;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NumericTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: NumericTileComponent, isStandalone: false, selector: "bt-numeric-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <div fd-numeric-content>\r\n            <div fd-numeric-content-launch-icon-container>\r\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\r\n            </div>\r\n            <div fd-numeric-content-kpi-container>\r\n                <div fd-numeric-content-kpi [state]=\"kpiState\" [style.color]=\"kpiStateIsColor ? kpiState : null\">\r\n                    {{ kpi }}\r\n                </div>\r\n            </div>\r\n            <div fd-numeric-content-scale-container>\r\n                <div\r\n                    fd-numeric-content-scale\r\n                    [state]=\"scaleState\"\r\n                    [style.color]=\"scalseStateIsColor ? scaleState : null\"\r\n                >\r\n                    <span\r\n                        fd-numeric-content-scale-arrow\r\n                        [glyph]=\"scaleArrowIcon\"\r\n                        [class]=\"scaleArrowIcon | sapFontClass\"\r\n                        [style.color]=\"scalseStateIsColor ? scaleState : null\"\r\n                    ></span>\r\n                    <span fd-numeric-content-scale-text [style.color]=\"scalseStateIsColor ? scaleState : null\">{{\r\n                        scaleText | bbbTranslate\r\n                    }}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$1.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$1.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "directive", type: i1$1.NumericContentLaunchIconContainerDirective, selector: "[fd-numeric-content-launch-icon-container]" }, { kind: "directive", type: i1$1.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$1.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$1.NumericContentScaleContainerDirective, selector: "[fd-numeric-content-scale-container]" }, { kind: "directive", type: i1$1.NumericContentScaleDirective, selector: "[fd-numeric-content-scale]", inputs: ["state", "class"] }, { kind: "directive", type: i1$1.NumericContentScaleTextDirective, selector: "[fd-numeric-content-scale-text]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i3.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: NumericTileComponent, isStandalone: false, selector: "bt-numeric-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <div fd-numeric-content>\r\n            <div fd-numeric-content-launch-icon-container>\r\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\r\n            </div>\r\n            <div fd-numeric-content-kpi-container>\r\n                <div fd-numeric-content-kpi [state]=\"kpiState\" [style.color]=\"kpiStateIsColor ? kpiState : null\">\r\n                    {{ kpi }}\r\n                </div>\r\n            </div>\r\n            <div fd-numeric-content-scale-container>\r\n                <div\r\n                    fd-numeric-content-scale\r\n                    [state]=\"scaleState\"\r\n                    [style.color]=\"scalseStateIsColor ? scaleState : null\"\r\n                >\r\n                    <span\r\n                        fd-numeric-content-scale-arrow\r\n                        [glyph]=\"scaleArrowIcon\"\r\n                        [class]=\"scaleArrowIcon | sapFontClass\"\r\n                        [style.color]=\"scalseStateIsColor ? scaleState : null\"\r\n                    ></span>\r\n                    <span fd-numeric-content-scale-text [style.color]=\"scalseStateIsColor ? scaleState : null\">{{\r\n                        scaleText | bbbTranslate\r\n                    }}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$1.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$1.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "directive", type: i1$1.NumericContentLaunchIconContainerDirective, selector: "[fd-numeric-content-launch-icon-container]" }, { kind: "directive", type: i1$1.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$1.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$1.NumericContentScaleContainerDirective, selector: "[fd-numeric-content-scale-container]" }, { kind: "directive", type: i1$1.NumericContentScaleDirective, selector: "[fd-numeric-content-scale]", inputs: ["state", "class"] }, { kind: "directive", type: i1$1.NumericContentScaleTextDirective, selector: "[fd-numeric-content-scale-text]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i3.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NumericTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-numeric-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <div fd-numeric-content>\r\n            <div fd-numeric-content-launch-icon-container>\r\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\r\n            </div>\r\n            <div fd-numeric-content-kpi-container>\r\n                <div fd-numeric-content-kpi [state]=\"kpiState\" [style.color]=\"kpiStateIsColor ? kpiState : null\">\r\n                    {{ kpi }}\r\n                </div>\r\n            </div>\r\n            <div fd-numeric-content-scale-container>\r\n                <div\r\n                    fd-numeric-content-scale\r\n                    [state]=\"scaleState\"\r\n                    [style.color]=\"scalseStateIsColor ? scaleState : null\"\r\n                >\r\n                    <span\r\n                        fd-numeric-content-scale-arrow\r\n                        [glyph]=\"scaleArrowIcon\"\r\n                        [class]=\"scaleArrowIcon | sapFontClass\"\r\n                        [style.color]=\"scalseStateIsColor ? scaleState : null\"\r\n                    ></span>\r\n                    <span fd-numeric-content-scale-text [style.color]=\"scalseStateIsColor ? scaleState : null\">{{\r\n                        scaleText | bbbTranslate\r\n                    }}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n" }]
+            args: [{ selector: 'bt-numeric-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        <div fd-numeric-content>\r\n            <div fd-numeric-content-launch-icon-container>\r\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\r\n            </div>\r\n            <div fd-numeric-content-kpi-container>\r\n                <div fd-numeric-content-kpi [state]=\"kpiState\" [style.color]=\"kpiStateIsColor ? kpiState : null\">\r\n                    {{ kpi }}\r\n                </div>\r\n            </div>\r\n            <div fd-numeric-content-scale-container>\r\n                <div\r\n                    fd-numeric-content-scale\r\n                    [state]=\"scaleState\"\r\n                    [style.color]=\"scalseStateIsColor ? scaleState : null\"\r\n                >\r\n                    <span\r\n                        fd-numeric-content-scale-arrow\r\n                        [glyph]=\"scaleArrowIcon\"\r\n                        [class]=\"scaleArrowIcon | sapFontClass\"\r\n                        [style.color]=\"scalseStateIsColor ? scaleState : null\"\r\n                    ></span>\r\n                    <span fd-numeric-content-scale-text [style.color]=\"scalseStateIsColor ? scaleState : null\">{{\r\n                        scaleText | bbbTranslate\r\n                    }}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n" }]
         }] });
 
 class LogoTileComponent extends BaseBtTileComponent {
@@ -2670,11 +3177,11 @@ class LogoTileComponent extends BaseBtTileComponent {
         return fileId;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LogoTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: LogoTileComponent, isStandalone: false, selector: "bt-logo-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n>\r\n    <div fd-tile-content>\r\n        <img fd-tile-logo [src]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\" loading=\"lazy\"/>\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileLogoDirective, selector: "[fdTileLogo], [fd-tile-logo]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: LogoTileComponent, isStandalone: false, selector: "bt-logo-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n>\r\n    <div fd-tile-content>\r\n        <img fd-tile-logo [src]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\" loading=\"lazy\"/>\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileLogoDirective, selector: "[fdTileLogo], [fd-tile-logo]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LogoTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-logo-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n>\r\n    <div fd-tile-content>\r\n        <img fd-tile-logo [src]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\" loading=\"lazy\"/>\r\n    </div>\r\n</bt-tile>\r\n" }]
+            args: [{ selector: 'bt-logo-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n>\r\n    <div fd-tile-content>\r\n        <img fd-tile-logo [src]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\" loading=\"lazy\"/>\r\n    </div>\r\n</bt-tile>\r\n" }]
         }] });
 
 class FeedTileComponent extends BaseBtTileComponent {
@@ -2694,7 +3201,7 @@ class FeedTileComponent extends BaseBtTileComponent {
         return this.settings.State;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FeedTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FeedTileComponent, isStandalone: false, selector: "bt-feed-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'feed'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content [twoColumn]=\"twoColumn\">\r\n        @if (twoColumn) {\r\n        <div fd-tile-section>\r\n            <div fd-tile-content-text>{{ text | bbbTranslate }}</div>\r\n            <div fd-tile-content-byline>{{ byline }}</div>\r\n        </div>\r\n        <div fd-tile-section>\r\n            <div fd-numeric-content>\r\n                <div fd-numeric-content-kpi-container>\r\n                    <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        } @else {\r\n        <div fd-numeric-content>\r\n            <div fd-numeric-content-kpi-container>\r\n                <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$1.TileContentTextDirective, selector: "[fdTileContentText], [fd-tile-content-text]" }, { kind: "directive", type: i1$1.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$1.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$1.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FeedTileComponent, isStandalone: false, selector: "bt-feed-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'feed'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content [twoColumn]=\"twoColumn\">\r\n        @if (twoColumn) {\r\n        <div fd-tile-section>\r\n            <div fd-tile-content-text>{{ text | bbbTranslate }}</div>\r\n            <div fd-tile-content-byline>{{ byline }}</div>\r\n        </div>\r\n        <div fd-tile-section>\r\n            <div fd-numeric-content>\r\n                <div fd-numeric-content-kpi-container>\r\n                    <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        } @else {\r\n        <div fd-numeric-content>\r\n            <div fd-numeric-content-kpi-container>\r\n                <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$1.TileContentTextDirective, selector: "[fdTileContentText], [fd-tile-content-text]" }, { kind: "directive", type: i1$1.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$1.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$1.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FeedTileComponent, decorators: [{
             type: Component,
@@ -2714,11 +3221,11 @@ class SimpleTileComponent extends BaseBtTileComponent {
         this.iconColor = this.settings.IconColor;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SimpleTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SimpleTileComponent, isStandalone: false, selector: "bt-simple-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [listMode]=\"listMode\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [backColor]=\"backColor\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content [class.picture-icon]=\"pictureIcon || iconCalc\">\r\n        @if(pictureIcon || iconCalc){\r\n        <span\r\n            class=\"tile-picture-icon\"\r\n            [class.circle]=\"isCircle\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"iconCalc || (pictureIcon.FileId | picFieldSrc: 'GetPictureFromFileInfo':null)\"\r\n        ></span>\r\n        } @else if (icon || iconImage) {\r\n        <div class=\"fd-numeric-content__launch-icon-container\" style=\"justify-content: center\">\r\n            @if(icon){\r\n            <fd-icon\r\n                class=\"fd-numeric-content__launch-icon\"\r\n                fd-numeric-content-launch-icon\r\n                [glyph]=\"icon\"\r\n                [font]=\"icon | sapFont\"\r\n                [style.color]=\"iconColor\"\r\n            ></fd-icon>\r\n            }@else if(iconImage){\r\n            <img [src]=\"iconImage\" style=\"width: 1.75rem\" loading=\"lazy\"/>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: ["fd-icon{font-size:2rem}.tile-picture-icon{background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:0}.tile-picture-icon.circle{border-radius:50%}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileProfileImgDirective, selector: "[fdTileProfileImg], [fd-tile-profile-img]", inputs: ["id", "ariaLabel", "ariaLabelledby", "backgroundImage"] }, { kind: "directive", type: i1$1.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i3.SapFontPipe, name: "sapFont" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SimpleTileComponent, isStandalone: false, selector: "bt-simple-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [listMode]=\"listMode\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [backColor]=\"backColor\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content [class.picture-icon]=\"pictureIcon || iconCalc\">\r\n        @if(pictureIcon || iconCalc){\r\n        <span\r\n            class=\"tile-picture-icon\"\r\n            [class.circle]=\"isCircle\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"iconCalc || (pictureIcon.FileId | picFieldSrc: 'GetPictureFromFileInfo':null)\"\r\n        ></span>\r\n        } @else if (icon || iconImage) {\r\n        <div class=\"fd-numeric-content__launch-icon-container\" style=\"justify-content: center\">\r\n            @if(icon){\r\n            <fd-icon\r\n                class=\"fd-numeric-content__launch-icon\"\r\n                fd-numeric-content-launch-icon\r\n                [glyph]=\"icon\"\r\n                [font]=\"icon | sapFont\"\r\n                [style.color]=\"iconColor\"\r\n            ></fd-icon>\r\n            }@else if(iconImage){\r\n            <img [src]=\"iconImage\" style=\"width: 1.75rem\" loading=\"lazy\"/>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: ["fd-icon{font-size:2rem}.tile-picture-icon{background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:0}.tile-picture-icon.circle{border-radius:50%}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileProfileImgDirective, selector: "[fdTileProfileImg], [fd-tile-profile-img]", inputs: ["id", "ariaLabel", "ariaLabelledby", "backgroundImage"] }, { kind: "directive", type: i1$1.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i3.SapFontPipe, name: "sapFont" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SimpleTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-simple-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [listMode]=\"listMode\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [backColor]=\"backColor\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content [class.picture-icon]=\"pictureIcon || iconCalc\">\r\n        @if(pictureIcon || iconCalc){\r\n        <span\r\n            class=\"tile-picture-icon\"\r\n            [class.circle]=\"isCircle\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"iconCalc || (pictureIcon.FileId | picFieldSrc: 'GetPictureFromFileInfo':null)\"\r\n        ></span>\r\n        } @else if (icon || iconImage) {\r\n        <div class=\"fd-numeric-content__launch-icon-container\" style=\"justify-content: center\">\r\n            @if(icon){\r\n            <fd-icon\r\n                class=\"fd-numeric-content__launch-icon\"\r\n                fd-numeric-content-launch-icon\r\n                [glyph]=\"icon\"\r\n                [font]=\"icon | sapFont\"\r\n                [style.color]=\"iconColor\"\r\n            ></fd-icon>\r\n            }@else if(iconImage){\r\n            <img [src]=\"iconImage\" style=\"width: 1.75rem\" loading=\"lazy\"/>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: ["fd-icon{font-size:2rem}.tile-picture-icon{background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:0}.tile-picture-icon.circle{border-radius:50%}\n"] }]
+            args: [{ selector: 'bt-simple-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [listMode]=\"listMode\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [backColor]=\"backColor\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content [class.picture-icon]=\"pictureIcon || iconCalc\">\r\n        @if(pictureIcon || iconCalc){\r\n        <span\r\n            class=\"tile-picture-icon\"\r\n            [class.circle]=\"isCircle\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"iconCalc || (pictureIcon.FileId | picFieldSrc: 'GetPictureFromFileInfo':null)\"\r\n        ></span>\r\n        } @else if (icon || iconImage) {\r\n        <div class=\"fd-numeric-content__launch-icon-container\" style=\"justify-content: center\">\r\n            @if(icon){\r\n            <fd-icon\r\n                class=\"fd-numeric-content__launch-icon\"\r\n                fd-numeric-content-launch-icon\r\n                [glyph]=\"icon\"\r\n                [font]=\"icon | sapFont\"\r\n                [style.color]=\"iconColor\"\r\n            ></fd-icon>\r\n            }@else if(iconImage){\r\n            <img [src]=\"iconImage\" style=\"width: 1.75rem\" loading=\"lazy\"/>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: ["fd-icon{font-size:2rem}.tile-picture-icon{background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:0}.tile-picture-icon.circle{border-radius:50%}\n"] }]
         }] });
 
 class ReportTileComponent extends BaseBtTileComponent {
@@ -2773,11 +3280,11 @@ class ProfileTileComponent extends BaseBtTileComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ProfileTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ProfileTileComponent, isStandalone: false, selector: "bt-profile-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (fileId2 || calcImage) {\r\n        <span\r\n            class=\"profile\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"calcImage || (fileId2 | picFieldSrc: 'GetPictureFromFileInfo':null)\"\r\n        ></span>\r\n        } @else if(icon){\r\n        <fd-icon [font]=\"icon | sapFont\" fd-tile-profile-img style=\"font-size: 2rem\" [glyph]=\"icon\"></fd-icon>\r\n        } @else {\r\n        <fd-icon font=\"SAP-icons-TNT\" fd-tile-profile-img style=\"font-size: 2rem\" glyph=\"user\"></fd-icon>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [".profile{background-size:contain;background-repeat:no-repeat}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileProfileImgDirective, selector: "[fdTileProfileImg], [fd-tile-profile-img]", inputs: ["id", "ariaLabel", "ariaLabelledby", "backgroundImage"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i3.SapFontPipe, name: "sapFont" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ProfileTileComponent, isStandalone: false, selector: "bt-profile-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (fileId2 || calcImage) {\r\n        <span\r\n            class=\"profile\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"calcImage || (fileId2 | picFieldSrc: 'GetPictureFromFileInfo':null)\"\r\n        ></span>\r\n        } @else if(icon){\r\n        <fd-icon [font]=\"icon | sapFont\" fd-tile-profile-img style=\"font-size: 2rem\" [glyph]=\"icon\"></fd-icon>\r\n        } @else {\r\n        <fd-icon font=\"SAP-icons-TNT\" fd-tile-profile-img style=\"font-size: 2rem\" glyph=\"user\"></fd-icon>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [".profile{background-size:contain;background-repeat:no-repeat}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileProfileImgDirective, selector: "[fdTileProfileImg], [fd-tile-profile-img]", inputs: ["id", "ariaLabel", "ariaLabelledby", "backgroundImage"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "title", "icon", "subtitle", "isDouble", "darkMode", "disableClick", "edit", "dynamicCommand", "backColor", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["changeGroupClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i3.SapFontPipe, name: "sapFont" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ProfileTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-profile-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (fileId2 || calcImage) {\r\n        <span\r\n            class=\"profile\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"calcImage || (fileId2 | picFieldSrc: 'GetPictureFromFileInfo':null)\"\r\n        ></span>\r\n        } @else if(icon){\r\n        <fd-icon [font]=\"icon | sapFont\" fd-tile-profile-img style=\"font-size: 2rem\" [glyph]=\"icon\"></fd-icon>\r\n        } @else {\r\n        <fd-icon font=\"SAP-icons-TNT\" fd-tile-profile-img style=\"font-size: 2rem\" glyph=\"user\"></fd-icon>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [".profile{background-size:contain;background-repeat:no-repeat}\n"] }]
+            args: [{ selector: 'bt-profile-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\r\n    [darkMode]=\"(isDark$ | async) === true\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (changeGroupClick)=\"changeGroupClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content>\r\n        @if (fileId2 || calcImage) {\r\n        <span\r\n            class=\"profile\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"calcImage || (fileId2 | picFieldSrc: 'GetPictureFromFileInfo':null)\"\r\n        ></span>\r\n        } @else if(icon){\r\n        <fd-icon [font]=\"icon | sapFont\" fd-tile-profile-img style=\"font-size: 2rem\" [glyph]=\"icon\"></fd-icon>\r\n        } @else {\r\n        <fd-icon font=\"SAP-icons-TNT\" fd-tile-profile-img style=\"font-size: 2rem\" glyph=\"user\"></fd-icon>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [".profile{background-size:contain;background-repeat:no-repeat}\n"] }]
         }] });
 
 class NotificationGroupComponent extends BaseComponent {
@@ -2856,7 +3363,7 @@ class NotificationGroupComponent extends BaseComponent {
         return _index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NotificationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NotificationGroupComponent, isStandalone: false, selector: "bt-notification-group", inputs: { notifications: "notifications", loading: "loading", deviceSize: "deviceSize", notificationCount: "notificationCount", notificationReport: "notificationReport" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", showEvent: "showEvent", loadMore: "loadMore" }, host: { properties: { "class": "this._deviceSize" } }, providers: [GroupByService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fdp-icon-tab-bar\r\n    size=\"s\"\r\n    [expandOverflowText]=\"'More' | bbbTranslate\"\r\n    (iconTabSelected)=\"onSelectedTabChange($event)\"\r\n    fixMore\r\n>\r\n    @for (tab of tabList; track tab.label; let index = $index) {\r\n    <fdp-icon-tab-bar-tab [label]=\"tab.label | bbbTranslate\" [title]=\"tab.label | bbbTranslate\" [id]=\"tab.title\">\r\n    </fdp-icon-tab-bar-tab>\r\n    }\r\n</fdp-icon-tab-bar>\r\n@if(reportSetting() !==null){\r\n<bnrc-report-container [settings]=\"reportSetting()\"> </bnrc-report-container>\r\n}", styles: [":host{display:block;min-width:600px}:host ::ng-deep .fd-tabs__content{overflow:hidden}:host ::ng-deep .fd-notification{padding:0;box-shadow:none}fd-notification{margin:0;padding-left:0rem!important;padding-right:0rem!important}fd-notification-body{position:relative}.noloading{visibility:hidden;height:0;width:0}.loading{visibility:visible;height:100%;width:100%}:host.s{min-width:auto}fdp-icon-tab-bar ::ng-deep>div>fdp-icon-tab-bar-text-type>ul{padding:0 .5rem}\n"], dependencies: [{ kind: "component", type: i8.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.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "component", type: i5.ReportContainerComponent, selector: "bnrc-report-container", inputs: ["settings"] }, { kind: "directive", type: i3.FixMoreDirective, selector: "[fixMore]" }, { 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: NotificationGroupComponent, isStandalone: false, selector: "bt-notification-group", inputs: { notifications: "notifications", loading: "loading", deviceSize: "deviceSize", notificationCount: "notificationCount", notificationReport: "notificationReport" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", showEvent: "showEvent", loadMore: "loadMore" }, host: { properties: { "class": "this._deviceSize" } }, providers: [GroupByService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fdp-icon-tab-bar\r\n    size=\"s\"\r\n    [expandOverflowText]=\"'More' | bbbTranslate\"\r\n    (iconTabSelected)=\"onSelectedTabChange($event)\"\r\n    fixMore\r\n>\r\n    @for (tab of tabList; track tab.label; let index = $index) {\r\n    <fdp-icon-tab-bar-tab [label]=\"tab.label | bbbTranslate\" [title]=\"tab.label | bbbTranslate\" [id]=\"tab.title\">\r\n    </fdp-icon-tab-bar-tab>\r\n    }\r\n</fdp-icon-tab-bar>\r\n@if(reportSetting() !==null){\r\n<bnrc-report-container [settings]=\"reportSetting()\"> </bnrc-report-container>\r\n}", styles: [":host{display:block;min-width:600px}:host ::ng-deep .fd-tabs__content{overflow:hidden}:host ::ng-deep .fd-notification{padding:0;box-shadow:none}fd-notification{margin:0;padding-left:0rem!important;padding-right:0rem!important}fd-notification-body{position:relative}.noloading{visibility:hidden;height:0;width:0}.loading{visibility:visible;height:100%;width:100%}:host.s{min-width:auto}fdp-icon-tab-bar ::ng-deep>div>fdp-icon-tab-bar-text-type>ul{padding:0 .5rem}\n"], dependencies: [{ 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: "component", type: i5.ReportContainerComponent, selector: "bnrc-report-container", inputs: ["settings"] }, { kind: "directive", type: i3.FixMoreDirective, selector: "[fixMore]" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NotificationGroupComponent, decorators: [{
             type: Component,
@@ -2938,6 +3445,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 class BarsaShellbarComponent extends BaseComponent {
     constructor() {
         super();
+        this.dastoratSarasari = [];
+        this.workflowMenuItems = [];
+        this.groupedCommandMenus = [];
         this.isServiceDesk = false;
         this.appTileGroupChange = new EventEmitter();
         this.searchItemClick = new EventEmitter();
@@ -2986,7 +3496,7 @@ class BarsaShellbarComponent extends BaseComponent {
         };
         this.showVersion = false;
         fromEvent(document, 'scroll')
-            .pipe(map$1(() => window.scrollY) // یا document.documentElement.scrollTop
+            .pipe(map(() => window.scrollY) // یا document.documentElement.scrollTop
         )
             .subscribe((scrollTop) => {
             const x = this._el.nativeElement;
@@ -3084,11 +3594,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", 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-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=\"Favorite\"\r\n                        title=\"favorite\"\r\n                        fd-button\r\n                        glyph=\"unfavorite\"\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}.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 .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$4.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$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i2$2.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$2.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: "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: "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.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){\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                            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                                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{display:inline-flex;align-items:center;flex-direction:row-reverse;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}.shellbar-command-action__label{line-height:1}: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-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=\"Favorite\"\r\n                        title=\"favorite\"\r\n                        fd-button\r\n                        glyph=\"unfavorite\"\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}.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 .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){\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                            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                                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{display:inline-flex;align-items:center;flex-direction:row-reverse;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}.shellbar-command-action__label{line-height:1}: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 }]
@@ -3105,6 +3615,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Input
             }], productMenuControl: [{
                 type: Input
+            }], dastoratSarasari: [{
+                type: Input
+            }], workflowMenuItems: [{
+                type: Input
+            }], groupedCommandMenus: [{
+                type: Input
             }], deviceSize: [{
                 type: Input
             }], cultures: [{
@@ -3266,7 +3782,7 @@ class ShellbarComponent extends BaseComponent {
     }
     get productMenuItems() {
         const items = this.shellbarData?.ProductMenuItems?.MoDataList ?? [];
-        items.forEach((c) => (c.callback = new Function(c.Code + this.bodyClick)));
+        items.forEach((c) => c.webcode && (c.callback = new Function(c.webcode + this.bodyClick)));
         return items;
     }
     get IsUserLoggedIn() {
@@ -3331,22 +3847,16 @@ class ShellbarComponent extends BaseComponent {
             this.shellbarData.calcSubtitle = calcSubtitle;
             this._cdr.detectChanges();
         };
-        this.deviceSize$ = this._portalService.deviceSize$.pipe(takeUntil(this._onDestroy$));
-        this._breadCrumbService.breadcrumbs$.pipe(takeUntil(this._onDestroy$)).subscribe((breadCrumbs) => {
-            if (breadCrumbs.length > 0) {
-                this.productMenuControl = breadCrumbs[breadCrumbs.length - 1].label;
-            }
-            this._cdr.detectChanges();
-        });
+        this.deviceSize$ = this._portalService.deviceSize$.pipe(takeUntil$1(this._onDestroy$));
         this.userInfo$ = this._tilesService.userInfo$;
-        this._tilesService.shellbar$.pipe(takeUntil(this._onDestroy$)).subscribe((mo) => {
+        this._tilesService.shellbar$.pipe(takeUntil$1(this._onDestroy$)).subscribe((mo) => {
             this.shellbarData = mo;
             if (this.IsUserLoggedIn) {
                 this._tilesService.loadUserProfileImage(this.repIdProfileImage);
             }
             // this._cdr.detectChanges();
             forkJoin([of(this.productMenuItems), of([])]) // to append user defined
-                .pipe(takeUntil(this._onDestroy$), map(([s1, s2]) => [...s1, ...s2]))
+                .pipe(takeUntil$1(this._onDestroy$), map$1(([s1, s2]) => [...s1, ...s2]))
                 .subscribe((c) => {
                 this.productMenuItems1 = c;
                 this._cdr.detectChanges();
@@ -3355,7 +3865,7 @@ class ShellbarComponent extends BaseComponent {
         if (this.settings?.AllowAnonymous) {
             this._tilesService.loadShellbar();
         }
-        this._portalService.userLoggedIn$.pipe(takeUntil(this._onDestroy$)).subscribe((loggedIn) => {
+        this._portalService.userLoggedIn$.pipe(takeUntil$1(this._onDestroy$)).subscribe((loggedIn) => {
             if (!loggedIn) {
                 return;
             }
@@ -3371,7 +3881,7 @@ class ShellbarComponent extends BaseComponent {
         });
     }
     onAppTileGroupChange(appTileGroupId) {
-        BarsaApi.Bw.RefreshAppTileGroup(appTileGroupId);
+        this._tilesService.loadAppTileGroupsById(appTileGroupId);
     }
     onCultureChange(culture) {
         this._changeCulture(culture);
@@ -3403,11 +3913,11 @@ class ShellbarComponent extends BaseComponent {
         BarsaApi.Bw.NavigateTo('/');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ShellbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ShellbarComponent, isStandalone: false, selector: "bt-shellbar", host: { properties: { "class.isOpenQuickAccess": "this.isOpenQuickAccess" } }, viewQueries: [{ 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, ngImport: i0, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notificationsUnreadCount$ | async; as notificationsUnreadCount) { @if\r\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\r\n<bt-barsa-shellbar\r\n    [class.service-desk]=\"isServiceDesk\"\r\n    cssRootVariable\r\n    [cssVariableValue]=\"(shellbarHeight$ | async)!!\"\r\n    [cssVariableName]=\"'--absolute-page-top'\"\r\n    [notificationReport]=\"notificationReport\"\r\n    [userInfo]=\"userInfo$ | async\"\r\n    [userLoggedIn]=\"true\"\r\n    [rtl]=\"(rtl$ | async) === true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cssStyle]=\"cssStyles\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [settings]=\"settings\"\r\n    [suggestions]=\"suggestions\"\r\n    [informativeText]=\"settings?.InformativeText\"\r\n    [informativeStatus]=\"settings?.InformativeStatus\"\r\n    [hideProductMenu]=\"settings?.HideProductMenu\"\r\n    [hideNotifications]=\"settings?.HideNotifications\"\r\n    [profileDynamicCommand]=\"shellbarData.ProfileDynamicCommand\"\r\n    [profileDynamicCommandText]=\"shellbarData.ProfileDynamicCommandText\"\r\n    [profileDynamicCommandIcon]=\"shellbarData.ProfileDynamicCommandIcon\"\r\n    [isMobile]=\"isMobile\"\r\n    [displayName]=\"displayName\"\r\n    [isTablet]=\"isTablet\"\r\n    [isDesktop]=\"isDesktop\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [notificationsUnreadCount]=\"notificationsUnreadCount > 0 ? notificationsUnreadCount : undefined\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [actions]=\"actions\"\r\n    [footerButtons]=\"userMenu | filter: { inFooter: true }\"\r\n    [userMenu]=\"userMenu | filter: { inFooter: false }\"\r\n    [productSwitcher]=\"productSwitcherItems\"\r\n    [subtitle]=\"subtitle\"\r\n    [enableSearch]=\"shellbarData?.EnableSearch\"\r\n    [isServiceDesk]=\"isServiceDesk\"\r\n    [sideMenuTemplate]=\"\r\n        sidebarSettings?.RelatedReport && sidebarSettings?.RelatedReport?.Id !== '0' ? QuickAccessTemplate : null\r\n    \"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [isOpenQuickAccess]=\"isOpenQuickAccess\"\r\n    (isOpenQuickAccessChanged)=\"isOpenQuickAccess = $event\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n    (notifiationActionClick)=\"onNotificationAction($event)\"\r\n    (appTileGroupChange)=\"onAppTileGroupChange($event)\"\r\n>\r\n</bt-barsa-shellbar>\r\n} } } } @else{ @if (settings?.AllowAnonymous) {\r\n<bt-barsa-shellbar\r\n    class=\"hide-user-menu\"\r\n    [notificationReport]=\"notificationReport\"\r\n    [cssStyle]=\"cssStyles\"\r\n    [userLoggedIn]=\"false\"\r\n    [suggestions]=\"suggestions\"\r\n    [rtl]=\"(rtl$ | async) === true\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [userMenu]=\"userMenu\"\r\n    [logo]=\"logo\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [isMobile]=\"isMobile\"\r\n    [isTablet]=\"isTablet\"\r\n    [isDesktop]=\"isDesktop\"\r\n    [isServiceDesk]=\"isServiceDesk\"\r\n    [actions]=\"actions\"\r\n    [userMenu]=\"[]\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [productSwitcher]=\"[]\"\r\n    [subtitle]=\"subtitle\"\r\n    [enableSearch]=\"shellbarData?.EnableSearch\"\r\n    [settings]=\"settings\"\r\n    [flatButtons]=\"userMenu\"\r\n    [cultures]=\"cultures\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n>\r\n</bt-barsa-shellbar>\r\n} }\r\n<ng-template #QuickAccessTemplate>\r\n    <!-- <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder> -->\r\n    <bnrc-report-container [settings]=\"sidebarSettings\"> </bnrc-report-container>\r\n</ng-template>\r\n@if(isOpenQuickAccess) { @if(sidebarSettings?.RelatedReport && sidebarSettings?.RelatedReport?.Id !== '0'){\r\n\r\n<div\r\n    class=\"sidemenu-h tw-fixed rtl:tw-right-0 ltr:tw-left-0 !tw-z-[90] tw-w-screen\"\r\n    (click)=\"isOpenQuickAccess = false\"\r\n></div>\r\n\r\n}\r\n\r\n<!-- <div class=\"tw-h-full\" [class.s]=\"(deviceSize$ | async) === 's'\">\r\n      \r\n    </div> -->\r\n}\r\n", styles: [":host{display:block;position:relative}:host #menu_btn{background-color:transparent;border-color:transparent}:host ::ng-deep .sidemenu-h{top:var(--shellbar-height);height:calc(100vh - var(--shellbar-height))}:host ::ng-deep .sidemenu-h>div.s{z-index:100!important}:host ::ng-deep .sidemenu-h ::ng-deep bsu-barsa-ulv-main{background-color:var(--sapBaseColor)}\n"], dependencies: [{ kind: "component", type: i5.ReportContainerComponent, selector: "bnrc-report-container", inputs: ["settings"] }, { kind: "directive", type: i5.DynamicStyleDirective, selector: "[cssStyle]", inputs: ["cssStyle"] }, { kind: "directive", type: i5.DynamicRootVariableDirective, selector: "[cssRootVariable]", inputs: ["cssVariableName", "cssVariableValue", "disable"], exportAs: ["cssRootVariable"] }, { kind: "component", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: ["showSidebar", "multiLanguages", "userLoggedIn", "settings", "productMenuControl", "deviceSize", "cultures", "shellbarData", "notificationsUnreadCount", "productMenuItems1", "bodyClick", "logo", "actions", "userMenu", "footerButtons", "productSwitcher", "subtitle", "isMobile", "hideShellbarActions", "flatButtons", "isTablet", "userInfo", "isDesktop", "informativeText", "informativeStatus", "hideProductMenu", "enableSearch", "hideNotifications", "isServiceDesk", "isOpenQuickAccess", "sideMenuTemplate", "notificationReport", "profileDynamicCommand", "profileDynamicCommandText", "profileDynamicCommandIcon", "displayName", "hideBranding", "showSearchInSystem", "rtl", "suggestions"], outputs: ["appTileGroupChange", "searchItemClick", "searchInput", "isOpenQuickAccessChanged", "openNotificationPanel", "openQuickAccessPanel", "cultureChanged", "notifiationActionClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.FilterPipe, name: "filter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ShellbarComponent, isStandalone: false, selector: "bt-shellbar", host: { properties: { "class.isOpenQuickAccess": "this.isOpenQuickAccess" } }, viewQueries: [{ 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, ngImport: i0, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notificationsUnreadCount$ | async; as notificationsUnreadCount) { @if\r\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\r\n<bt-barsa-shellbar\r\n    [class.service-desk]=\"isServiceDesk\"\r\n    cssRootVariable\r\n    [cssVariableValue]=\"(shellbarHeight$ | async)!!\"\r\n    [cssVariableName]=\"'--absolute-page-top'\"\r\n    [notificationReport]=\"notificationReport\"\r\n    [userInfo]=\"userInfo$ | async\"\r\n    [userLoggedIn]=\"true\"\r\n    [rtl]=\"(rtl$ | async) === true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cssStyle]=\"cssStyles\"\r\n    productMenuControl=\"\"    \r\n    [settings]=\"settings\"\r\n    [suggestions]=\"suggestions\"\r\n    [informativeText]=\"settings?.InformativeText\"\r\n    [informativeStatus]=\"settings?.InformativeStatus\"\r\n    [hideProductMenu]=\"settings?.HideProductMenu\"\r\n    [hideNotifications]=\"settings?.HideNotifications\"\r\n    [profileDynamicCommand]=\"shellbarData.ProfileDynamicCommand\"\r\n    [profileDynamicCommandText]=\"shellbarData.ProfileDynamicCommandText\"\r\n    [profileDynamicCommandIcon]=\"shellbarData.ProfileDynamicCommandIcon\"\r\n    [isMobile]=\"isMobile\"\r\n    [displayName]=\"displayName\"    \r\n    [isTablet]=\"isTablet\"\r\n    [isDesktop]=\"isDesktop\"\r\n    [multiLanguages]=\"multiLanguages\"    \r\n    [notificationsUnreadCount]=\"notificationsUnreadCount > 0 ? notificationsUnreadCount : undefined\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [actions]=\"actions\"\r\n    [footerButtons]=\"userMenu | filter: { inFooter: true }\"\r\n    [userMenu]=\"userMenu | filter: { inFooter: false }\"\r\n    [productSwitcher]=\"productSwitcherItems\"\r\n    [subtitle]=\"subtitle\"\r\n    [enableSearch]=\"shellbarData?.EnableSearch\"\r\n    [isServiceDesk]=\"isServiceDesk\"\r\n    [sideMenuTemplate]=\"\r\n        sidebarSettings?.RelatedReport && sidebarSettings?.RelatedReport?.Id !== '0' ? QuickAccessTemplate : null\r\n    \"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [isOpenQuickAccess]=\"isOpenQuickAccess\"\r\n    (isOpenQuickAccessChanged)=\"isOpenQuickAccess = $event\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n    (notifiationActionClick)=\"onNotificationAction($event)\"\r\n    (appTileGroupChange)=\"onAppTileGroupChange($event)\"\r\n>\r\n</bt-barsa-shellbar>\r\n} } } } @else{ @if (settings?.AllowAnonymous) {\r\n<bt-barsa-shellbar\r\n    class=\"hide-user-menu\"\r\n    [notificationReport]=\"notificationReport\"\r\n    [cssStyle]=\"cssStyles\"\r\n    [userLoggedIn]=\"false\"\r\n    [suggestions]=\"suggestions\"\r\n    [rtl]=\"(rtl$ | async) === true\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [userMenu]=\"userMenu\"\r\n    [logo]=\"logo\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [isMobile]=\"isMobile\"\r\n    [isTablet]=\"isTablet\"\r\n    [isDesktop]=\"isDesktop\"\r\n    [isServiceDesk]=\"isServiceDesk\"\r\n    [actions]=\"actions\"\r\n    [userMenu]=\"[]\"\r\n    productMenuControl=\"\"    \r\n    \r\n    [productSwitcher]=\"[]\"\r\n    [subtitle]=\"subtitle\"\r\n    [enableSearch]=\"shellbarData?.EnableSearch\"\r\n    [settings]=\"settings\"\r\n    [flatButtons]=\"userMenu\"\r\n    [cultures]=\"cultures\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n>\r\n</bt-barsa-shellbar>\r\n} }\r\n<ng-template #QuickAccessTemplate>\r\n    <!-- <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder> -->\r\n    <bnrc-report-container [settings]=\"sidebarSettings\"> </bnrc-report-container>\r\n</ng-template>\r\n@if(isOpenQuickAccess) { @if(sidebarSettings?.RelatedReport && sidebarSettings?.RelatedReport?.Id !== '0'){\r\n\r\n<div\r\n    class=\"sidemenu-h tw-fixed rtl:tw-right-0 ltr:tw-left-0 !tw-z-[90] tw-w-screen\"\r\n    (click)=\"isOpenQuickAccess = false\"\r\n></div>\r\n\r\n}\r\n\r\n<!-- <div class=\"tw-h-full\" [class.s]=\"(deviceSize$ | async) === 's'\">\r\n      \r\n    </div> -->\r\n}\r\n", styles: [":host{display:block;position:relative}:host #menu_btn{background-color:transparent;border-color:transparent}:host ::ng-deep .sidemenu-h{top:var(--shellbar-height);height:calc(100vh - var(--shellbar-height))}:host ::ng-deep .sidemenu-h>div.s{z-index:100!important}:host ::ng-deep .sidemenu-h ::ng-deep bsu-barsa-ulv-main{background-color:var(--sapBaseColor)}\n"], dependencies: [{ kind: "component", type: i5.ReportContainerComponent, selector: "bnrc-report-container", inputs: ["settings"] }, { kind: "directive", type: i5.DynamicStyleDirective, selector: "[cssStyle]", inputs: ["cssStyle"] }, { kind: "directive", type: i5.DynamicRootVariableDirective, selector: "[cssRootVariable]", inputs: ["cssVariableName", "cssVariableValue", "disable"], exportAs: ["cssRootVariable"] }, { kind: "component", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: ["showSidebar", "multiLanguages", "userLoggedIn", "settings", "productMenuControl", "dastoratSarasari", "workflowMenuItems", "groupedCommandMenus", "deviceSize", "cultures", "shellbarData", "notificationsUnreadCount", "productMenuItems1", "bodyClick", "logo", "actions", "userMenu", "footerButtons", "productSwitcher", "subtitle", "isMobile", "hideShellbarActions", "flatButtons", "isTablet", "userInfo", "isDesktop", "informativeText", "informativeStatus", "hideProductMenu", "enableSearch", "hideNotifications", "isServiceDesk", "isOpenQuickAccess", "sideMenuTemplate", "notificationReport", "profileDynamicCommand", "profileDynamicCommandText", "profileDynamicCommandIcon", "displayName", "hideBranding", "showSearchInSystem", "rtl", "suggestions"], outputs: ["appTileGroupChange", "searchItemClick", "searchInput", "isOpenQuickAccessChanged", "openNotificationPanel", "openQuickAccessPanel", "cultureChanged", "notifiationActionClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.FilterPipe, name: "filter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ShellbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notificationsUnreadCount$ | async; as notificationsUnreadCount) { @if\r\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\r\n<bt-barsa-shellbar\r\n    [class.service-desk]=\"isServiceDesk\"\r\n    cssRootVariable\r\n    [cssVariableValue]=\"(shellbarHeight$ | async)!!\"\r\n    [cssVariableName]=\"'--absolute-page-top'\"\r\n    [notificationReport]=\"notificationReport\"\r\n    [userInfo]=\"userInfo$ | async\"\r\n    [userLoggedIn]=\"true\"\r\n    [rtl]=\"(rtl$ | async) === true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cssStyle]=\"cssStyles\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [settings]=\"settings\"\r\n    [suggestions]=\"suggestions\"\r\n    [informativeText]=\"settings?.InformativeText\"\r\n    [informativeStatus]=\"settings?.InformativeStatus\"\r\n    [hideProductMenu]=\"settings?.HideProductMenu\"\r\n    [hideNotifications]=\"settings?.HideNotifications\"\r\n    [profileDynamicCommand]=\"shellbarData.ProfileDynamicCommand\"\r\n    [profileDynamicCommandText]=\"shellbarData.ProfileDynamicCommandText\"\r\n    [profileDynamicCommandIcon]=\"shellbarData.ProfileDynamicCommandIcon\"\r\n    [isMobile]=\"isMobile\"\r\n    [displayName]=\"displayName\"\r\n    [isTablet]=\"isTablet\"\r\n    [isDesktop]=\"isDesktop\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [notificationsUnreadCount]=\"notificationsUnreadCount > 0 ? notificationsUnreadCount : undefined\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [actions]=\"actions\"\r\n    [footerButtons]=\"userMenu | filter: { inFooter: true }\"\r\n    [userMenu]=\"userMenu | filter: { inFooter: false }\"\r\n    [productSwitcher]=\"productSwitcherItems\"\r\n    [subtitle]=\"subtitle\"\r\n    [enableSearch]=\"shellbarData?.EnableSearch\"\r\n    [isServiceDesk]=\"isServiceDesk\"\r\n    [sideMenuTemplate]=\"\r\n        sidebarSettings?.RelatedReport && sidebarSettings?.RelatedReport?.Id !== '0' ? QuickAccessTemplate : null\r\n    \"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [isOpenQuickAccess]=\"isOpenQuickAccess\"\r\n    (isOpenQuickAccessChanged)=\"isOpenQuickAccess = $event\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n    (notifiationActionClick)=\"onNotificationAction($event)\"\r\n    (appTileGroupChange)=\"onAppTileGroupChange($event)\"\r\n>\r\n</bt-barsa-shellbar>\r\n} } } } @else{ @if (settings?.AllowAnonymous) {\r\n<bt-barsa-shellbar\r\n    class=\"hide-user-menu\"\r\n    [notificationReport]=\"notificationReport\"\r\n    [cssStyle]=\"cssStyles\"\r\n    [userLoggedIn]=\"false\"\r\n    [suggestions]=\"suggestions\"\r\n    [rtl]=\"(rtl$ | async) === true\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [userMenu]=\"userMenu\"\r\n    [logo]=\"logo\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [isMobile]=\"isMobile\"\r\n    [isTablet]=\"isTablet\"\r\n    [isDesktop]=\"isDesktop\"\r\n    [isServiceDesk]=\"isServiceDesk\"\r\n    [actions]=\"actions\"\r\n    [userMenu]=\"[]\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [productSwitcher]=\"[]\"\r\n    [subtitle]=\"subtitle\"\r\n    [enableSearch]=\"shellbarData?.EnableSearch\"\r\n    [settings]=\"settings\"\r\n    [flatButtons]=\"userMenu\"\r\n    [cultures]=\"cultures\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n>\r\n</bt-barsa-shellbar>\r\n} }\r\n<ng-template #QuickAccessTemplate>\r\n    <!-- <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder> -->\r\n    <bnrc-report-container [settings]=\"sidebarSettings\"> </bnrc-report-container>\r\n</ng-template>\r\n@if(isOpenQuickAccess) { @if(sidebarSettings?.RelatedReport && sidebarSettings?.RelatedReport?.Id !== '0'){\r\n\r\n<div\r\n    class=\"sidemenu-h tw-fixed rtl:tw-right-0 ltr:tw-left-0 !tw-z-[90] tw-w-screen\"\r\n    (click)=\"isOpenQuickAccess = false\"\r\n></div>\r\n\r\n}\r\n\r\n<!-- <div class=\"tw-h-full\" [class.s]=\"(deviceSize$ | async) === 's'\">\r\n      \r\n    </div> -->\r\n}\r\n", styles: [":host{display:block;position:relative}:host #menu_btn{background-color:transparent;border-color:transparent}:host ::ng-deep .sidemenu-h{top:var(--shellbar-height);height:calc(100vh - var(--shellbar-height))}:host ::ng-deep .sidemenu-h>div.s{z-index:100!important}:host ::ng-deep .sidemenu-h ::ng-deep bsu-barsa-ulv-main{background-color:var(--sapBaseColor)}\n"] }]
+            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notificationsUnreadCount$ | async; as notificationsUnreadCount) { @if\r\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\r\n<bt-barsa-shellbar\r\n    [class.service-desk]=\"isServiceDesk\"\r\n    cssRootVariable\r\n    [cssVariableValue]=\"(shellbarHeight$ | async)!!\"\r\n    [cssVariableName]=\"'--absolute-page-top'\"\r\n    [notificationReport]=\"notificationReport\"\r\n    [userInfo]=\"userInfo$ | async\"\r\n    [userLoggedIn]=\"true\"\r\n    [rtl]=\"(rtl$ | async) === true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cssStyle]=\"cssStyles\"\r\n    productMenuControl=\"\"    \r\n    [settings]=\"settings\"\r\n    [suggestions]=\"suggestions\"\r\n    [informativeText]=\"settings?.InformativeText\"\r\n    [informativeStatus]=\"settings?.InformativeStatus\"\r\n    [hideProductMenu]=\"settings?.HideProductMenu\"\r\n    [hideNotifications]=\"settings?.HideNotifications\"\r\n    [profileDynamicCommand]=\"shellbarData.ProfileDynamicCommand\"\r\n    [profileDynamicCommandText]=\"shellbarData.ProfileDynamicCommandText\"\r\n    [profileDynamicCommandIcon]=\"shellbarData.ProfileDynamicCommandIcon\"\r\n    [isMobile]=\"isMobile\"\r\n    [displayName]=\"displayName\"    \r\n    [isTablet]=\"isTablet\"\r\n    [isDesktop]=\"isDesktop\"\r\n    [multiLanguages]=\"multiLanguages\"    \r\n    [notificationsUnreadCount]=\"notificationsUnreadCount > 0 ? notificationsUnreadCount : undefined\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [actions]=\"actions\"\r\n    [footerButtons]=\"userMenu | filter: { inFooter: true }\"\r\n    [userMenu]=\"userMenu | filter: { inFooter: false }\"\r\n    [productSwitcher]=\"productSwitcherItems\"\r\n    [subtitle]=\"subtitle\"\r\n    [enableSearch]=\"shellbarData?.EnableSearch\"\r\n    [isServiceDesk]=\"isServiceDesk\"\r\n    [sideMenuTemplate]=\"\r\n        sidebarSettings?.RelatedReport && sidebarSettings?.RelatedReport?.Id !== '0' ? QuickAccessTemplate : null\r\n    \"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [isOpenQuickAccess]=\"isOpenQuickAccess\"\r\n    (isOpenQuickAccessChanged)=\"isOpenQuickAccess = $event\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n    (notifiationActionClick)=\"onNotificationAction($event)\"\r\n    (appTileGroupChange)=\"onAppTileGroupChange($event)\"\r\n>\r\n</bt-barsa-shellbar>\r\n} } } } @else{ @if (settings?.AllowAnonymous) {\r\n<bt-barsa-shellbar\r\n    class=\"hide-user-menu\"\r\n    [notificationReport]=\"notificationReport\"\r\n    [cssStyle]=\"cssStyles\"\r\n    [userLoggedIn]=\"false\"\r\n    [suggestions]=\"suggestions\"\r\n    [rtl]=\"(rtl$ | async) === true\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [userMenu]=\"userMenu\"\r\n    [logo]=\"logo\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [isMobile]=\"isMobile\"\r\n    [isTablet]=\"isTablet\"\r\n    [isDesktop]=\"isDesktop\"\r\n    [isServiceDesk]=\"isServiceDesk\"\r\n    [actions]=\"actions\"\r\n    [userMenu]=\"[]\"\r\n    productMenuControl=\"\"    \r\n    \r\n    [productSwitcher]=\"[]\"\r\n    [subtitle]=\"subtitle\"\r\n    [enableSearch]=\"shellbarData?.EnableSearch\"\r\n    [settings]=\"settings\"\r\n    [flatButtons]=\"userMenu\"\r\n    [cultures]=\"cultures\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n>\r\n</bt-barsa-shellbar>\r\n} }\r\n<ng-template #QuickAccessTemplate>\r\n    <!-- <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder> -->\r\n    <bnrc-report-container [settings]=\"sidebarSettings\"> </bnrc-report-container>\r\n</ng-template>\r\n@if(isOpenQuickAccess) { @if(sidebarSettings?.RelatedReport && sidebarSettings?.RelatedReport?.Id !== '0'){\r\n\r\n<div\r\n    class=\"sidemenu-h tw-fixed rtl:tw-right-0 ltr:tw-left-0 !tw-z-[90] tw-w-screen\"\r\n    (click)=\"isOpenQuickAccess = false\"\r\n></div>\r\n\r\n}\r\n\r\n<!-- <div class=\"tw-h-full\" [class.s]=\"(deviceSize$ | async) === 's'\">\r\n      \r\n    </div> -->\r\n}\r\n", styles: [":host{display:block;position:relative}:host #menu_btn{background-color:transparent;border-color:transparent}:host ::ng-deep .sidemenu-h{top:var(--shellbar-height);height:calc(100vh - var(--shellbar-height))}:host ::ng-deep .sidemenu-h>div.s{z-index:100!important}:host ::ng-deep .sidemenu-h ::ng-deep bsu-barsa-ulv-main{background-color:var(--sapBaseColor)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { comboboxComponent: [{
                 type: ViewChild,
                 args: [ComboboxComponent]
@@ -3456,7 +3966,7 @@ class GroupTilesPipe {
         }
         const predefine$ = of(predefineTiles);
         const userDefine$ = of(appGroup.UserAppTileGroupSetting?.UserAppTilesSetting?.MoDataList);
-        return forkJoin([predefine$, userDefine$]).pipe(map(([s1, s2]) => [...s1, ...s2]), map((arrTiles) => {
+        return forkJoin([predefine$, userDefine$]).pipe(map$1(([s1, s2]) => [...s1, ...s2]), map$1((arrTiles) => {
             const tempTiles = arrTiles.filter((c) => c.Visible).sort((a, b) => (a.OrderItem > b.OrderItem ? 1 : 0));
             const group = { ...appGroup };
             group.Title = BarsaApi.Common.Util.TryGetValue(group, 'UserAppTileGroupSetting.Title', group.Title);
@@ -3485,7 +3995,7 @@ class PopoverAppFinderComponent extends BaseComponent {
         this._appFinderService = inject(AppFinderService);
         this._contentDensityService = inject(ContentDensityService);
         this.contentDensity$ = this._contentDensityService.contentDensity.asObservable();
-        this.appGroups$ = this._appFinderService.appGroups$.pipe(map((appGroups) => {
+        this.appGroups$ = this._appFinderService.appGroups$.pipe(map$1((appGroups) => {
             appGroups.forEach((cat) => {
                 this._appFinderService.loadAppsByAppGroup(appGroups, cat);
             });
@@ -3495,12 +4005,12 @@ class PopoverAppFinderComponent extends BaseComponent {
         this.selectedAppGroupId$ = this._appFinderService.selectedAppGroupId$;
         this.deviceSize$ = this._appFinderService.deviceSize$;
         this.pinnedAppInAppTileGroups$ = this._appFinderService.pinnedAppInAppTileGroups$;
-        this.mobile$ = this.deviceSize$.pipe(map((c) => c === 's'));
+        this.mobile$ = this.deviceSize$.pipe(map$1((c) => c === 's'));
     }
     ngOnInit() {
         super.ngOnInit();
         this.contentHeight = 'calc(' + this._el.nativeElement.offsetHeight + 'px - 2.75rem)';
-        this.sideContentSize$ = this.deviceSize$.pipe(takeUntil(this._onDestroy$), map((deviceSize) => {
+        this.sideContentSize$ = this.deviceSize$.pipe(takeUntil$1(this._onDestroy$), map$1((deviceSize) => {
             switch (deviceSize) {
                 case 's':
                     return 'sm';
@@ -3580,10 +4090,10 @@ class BarsaPinAppComponent extends BarsaTreeItemComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        this._appFinderService.appGroups$.pipe(takeUntil$1(this._onDestroy$)).subscribe((c) => {
+        this._appFinderService.appGroups$.pipe(takeUntil(this._onDestroy$)).subscribe((c) => {
             this.appGroups$.set(c);
         });
-        this._appFinderService.pinnedAppInAppTileGroups$.pipe(takeUntil$1(this._onDestroy$)).subscribe((c) => {
+        this._appFinderService.pinnedAppInAppTileGroups$.pipe(takeUntil(this._onDestroy$)).subscribe((c) => {
             this.pinnedAppInAppTileGroups$.set(c);
         });
     }
@@ -3659,7 +4169,7 @@ class BarsaTileGroupPageComponent extends BaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTileGroupPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaTileGroupPageComponent, isStandalone: false, selector: "bt-barsa-tile-group-page", host: { properties: { "style.position": "this._position" } }, providers: [RoutingService], viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["containerRef"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isSimple ){\r\n<fd-dynamic-page [autoResponsive]=\"true\">\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"true\"\r\n        [title]=\"title | bbbTranslate\"\r\n        [class.hide-title]=\"false\"\r\n        [class.mobile]=\"isMobile\"\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n            <fd-breadcrumb>\r\n                @if (breadcrumbs$ | async; as breadCrumbs) { @for ( breadCrumb of breadCrumbs | slice:\r\n                0:breadCrumbs.length; track breadCrumb.url; let i = $index; let last = $last) {\r\n                <fd-breadcrumb-item>\r\n                    <bsu-breadcrumb\r\n                        [index]=\"i\"\r\n                        [isLast]=\"last\"\r\n                        [breadCrumb]=\"breadCrumb\"\r\n                        [allBreadCrumb]=\"breadCrumbs\"\r\n                    ></bsu-breadcrumb>\r\n                </fd-breadcrumb-item>\r\n                } }\r\n            </fd-breadcrumb>\r\n        </fd-dynamic-page-breadcrumb>\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\" (click)=\"onClose()\" title=\"Close\">\r\n                    <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : '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    <fd-dynamic-page-content cdkScrollable>\r\n        <ng-container *ngTemplateOutlet=\"tilesTpl\"> </ng-container>\r\n    </fd-dynamic-page-content>\r\n</fd-dynamic-page>\r\n} @else {\r\n<ng-container *ngTemplateOutlet=\"tilesTpl\"> </ng-container>\r\n}\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n<ng-template #tilesTpl>\r\n    <div class=\"tw-flex tw-flex-col tw-gap-4\">\r\n        @for(appGroup of moList() | multipleGroupBy: sortSetting();track appGroup.$Group || appGroup.Id) {\r\n        @if(appGroup.$Group) {\r\n        <fd-panel [fixed]=\"true\">\r\n            <h2 fd-panel-title>\r\n                {{ appGroup.$Group !== 'undefined' ? appGroup.$Group : '' }}\r\n            </h2>\r\n            <div\r\n                fd-panel-content\r\n                [class.small-size]=\"deviceSize === 's'\"\r\n                class=\"tw-flex tw-gap-2 tw-flex-wrap tw-p-4 !tw-border-b-0\"\r\n            >\r\n                @for(app of appGroup.$Children;track app.Id;let i=$index){\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"tile; context: { $implicit: app, deviceSize: deviceSize, index: i }\"\r\n                ></ng-container>\r\n                }\r\n            </div>\r\n        </fd-panel>\r\n        } }\r\n    </div>\r\n</ng-template>\r\n<ng-template\r\n    #tile\r\n    let-app\r\n    let-listMode=\"listMode\"\r\n    let-navigateBack=\"navigateBack\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-index=\"index\"\r\n>\r\n    <span\r\n        [dynamicCommand]=\"app.DynamicCommand\"\r\n        [style.margin-right]=\"rtl ? (index === 0 ? '-0.5rem' : null) : null\"\r\n        [style.margin-left]=\"!rtl ? (index === 0 ? '-0.5rem' : null) : null\"\r\n        [setToStorage]=\"false\"\r\n        [listMode]=\"false\"\r\n        [navigateBackOnClick]=\"listMode ? false : isSimple ? true : false\"\r\n        [enableCommand]=\"app.Component\"\r\n        tileRenderer\r\n        [data]=\"app\"\r\n        [edit]=\"false\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [component]=\"app.Component\"\r\n    >\r\n    </span>\r\n</ng-template>\r\n", styles: [":host{width:100%;display:block}.app-groups{width:25vw;border-left:.0625rem solid var(--sapGroup_TitleBorderColor, #d9d9d9)}fd-dynamic-page-header.mobile{--fdDynamicPage_Title_Font_Size:1rem}fd-dynamic-page-header.mobile ::ng-deep>.fd-dynamic-page__main-container>.fd-dynamic-page__breadcrumb-title-container{display:flex;flex-direction:row;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$3.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i3$3.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { 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$3.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i4$3.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i4$3.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i4$3.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i4$3.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i6$3.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i6$3.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i6$3.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "component", type: i5$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i3.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "groupType", "edit", "deviceSize", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.MultipleGroupByPipe, name: "multipleGroupBy" }, { 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: BarsaTileGroupPageComponent, isStandalone: false, selector: "bt-barsa-tile-group-page", host: { properties: { "style.position": "this._position" } }, providers: [RoutingService], viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["containerRef"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isSimple ){\r\n<fd-dynamic-page [autoResponsive]=\"true\">\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"true\"\r\n        [title]=\"title | bbbTranslate\"\r\n        [class.hide-title]=\"false\"\r\n        [class.mobile]=\"isMobile\"\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n            <fd-breadcrumb>\r\n                @if (breadcrumbs$ | async; as breadCrumbs) { @for ( breadCrumb of breadCrumbs | slice:\r\n                0:breadCrumbs.length; track breadCrumb.url; let i = $index; let last = $last) {\r\n                <fd-breadcrumb-item>\r\n                    <bsu-breadcrumb\r\n                        [index]=\"i\"\r\n                        [isLast]=\"last\"\r\n                        [breadCrumb]=\"breadCrumb\"\r\n                        [allBreadCrumb]=\"breadCrumbs\"\r\n                    ></bsu-breadcrumb>\r\n                </fd-breadcrumb-item>\r\n                } }\r\n            </fd-breadcrumb>\r\n        </fd-dynamic-page-breadcrumb>\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\" (click)=\"onClose()\" title=\"Close\">\r\n                    <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : '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    <fd-dynamic-page-content cdkScrollable>\r\n        <ng-container *ngTemplateOutlet=\"tilesTpl\"> </ng-container>\r\n    </fd-dynamic-page-content>\r\n</fd-dynamic-page>\r\n} @else {\r\n<ng-container *ngTemplateOutlet=\"tilesTpl\"> </ng-container>\r\n}\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n<ng-template #tilesTpl>\r\n    <div class=\"tw-flex tw-flex-col tw-gap-4\">\r\n        @for(appGroup of moList() | multipleGroupBy: sortSetting();track appGroup.$Group || appGroup.Id) {\r\n        @if(appGroup.$Group) {\r\n        <fd-panel [fixed]=\"true\">\r\n            <h2 fd-panel-title>\r\n                {{ appGroup.$Group !== 'undefined' ? appGroup.$Group : '' }}\r\n            </h2>\r\n            <div\r\n                fd-panel-content\r\n                [class.small-size]=\"deviceSize === 's'\"\r\n                class=\"tw-flex tw-gap-2 tw-flex-wrap tw-p-4 !tw-border-b-0\"\r\n            >\r\n                @for(app of appGroup.$Children;track app.Id;let i=$index){\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"tile; context: { $implicit: app, deviceSize: deviceSize, index: i }\"\r\n                ></ng-container>\r\n                }\r\n            </div>\r\n        </fd-panel>\r\n        } }\r\n    </div>\r\n</ng-template>\r\n<ng-template\r\n    #tile\r\n    let-app\r\n    let-listMode=\"listMode\"\r\n    let-navigateBack=\"navigateBack\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-index=\"index\"\r\n>\r\n    <span\r\n        [dynamicCommand]=\"app.DynamicCommand\"\r\n        [style.margin-right]=\"rtl ? (index === 0 ? '-0.5rem' : null) : null\"\r\n        [style.margin-left]=\"!rtl ? (index === 0 ? '-0.5rem' : null) : null\"\r\n        [setToStorage]=\"false\"\r\n        [listMode]=\"false\"\r\n        [navigateBackOnClick]=\"listMode ? false : isSimple ? true : false\"\r\n        [enableCommand]=\"app.Component\"\r\n        tileRenderer\r\n        [data]=\"app\"\r\n        [edit]=\"false\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [component]=\"app.Component\"\r\n    >\r\n    </span>\r\n</ng-template>\r\n", styles: [":host{width:100%;display:block}.app-groups{width:25vw;border-left:.0625rem solid var(--sapGroup_TitleBorderColor, #d9d9d9)}fd-dynamic-page-header.mobile{--fdDynamicPage_Title_Font_Size:1rem}fd-dynamic-page-header.mobile ::ng-deep>.fd-dynamic-page__main-container>.fd-dynamic-page__breadcrumb-title-container{display:flex;flex-direction:row;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$3.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i3$3.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { 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.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.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i6$3.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i6$3.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i6$3.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "component", type: i7.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i3.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "groupType", "edit", "deviceSize", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["hideClick", "renameClick", "changeGroupClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.MultipleGroupByPipe, name: "multipleGroupBy" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTileGroupPageComponent, decorators: [{
             type: Component,
@@ -3686,7 +4196,7 @@ class BarsaTileSidebarPageComponent extends EmptyPageComponent {
     ngOnInit() {
         super.ngOnInit();
         this.isFirstPage = false;
-        this._portalService.navigationEnd$.pipe(takeUntil$1(this._onDestroy$)).subscribe((c) => {
+        this._portalService.navigationEnd$.pipe(takeUntil(this._onDestroy$)).subscribe((c) => {
             c && c.url.indexOf('mainside:report') > 0 && this.firstReportLoaded.set(true);
         });
         this.breadcrumbs$ = this._breadCrumbService.breadcrumbs$;
@@ -3697,7 +4207,7 @@ class BarsaTileSidebarPageComponent extends EmptyPageComponent {
         this._router.navigate(['../']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTileSidebarPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaTileSidebarPageComponent, isStandalone: false, selector: "bt-barsa-tile-sidebar-page", providers: [RoutingService], usesInheritance: true, ngImport: i0, template: "<div fd-bar>\r\n    <div fd-bar-left style=\"flex: 1; width: 100%\">\r\n        <fd-breadcrumb style=\"width: 100%\">\r\n            @if (breadcrumbs$ | async; as breadCrumbs) { @for ( breadCrumb of breadCrumbs ;track breadCrumb.url; let i =\r\n            $index; let last = $last) {\r\n            <fd-breadcrumb-item>\r\n                <bsu-breadcrumb\r\n                    [index]=\"i\"\r\n                    [isLast]=\"last\"\r\n                    [breadCrumb]=\"breadCrumb\"\r\n                    [allBreadCrumb]=\"breadCrumbs\"\r\n                ></bsu-breadcrumb>\r\n            </fd-breadcrumb-item>\r\n            } }\r\n        </fd-breadcrumb>\r\n    </div>\r\n</div>\r\n\r\n<fd-dynamic-side-content class=\"tiles-sidebar-wrapper\" fillEmptySpace style=\"overflow: auto\">\r\n    <fd-dynamic-side-content-side>\r\n        <ng-container #containerRef></ng-container>\r\n    </fd-dynamic-side-content-side>\r\n    <fd-dynamic-side-content-main style=\"padding: 2rem\">\r\n        @if(firstReportLoaded()===false){\r\n        <fd-message-page type=\"no-items\" style=\"align-self: center; background: transparent\">\r\n            <fd-message-page-title>{{ 'SearchInReports' | bbbTranslate }}</fd-message-page-title>\r\n        </fd-message-page>\r\n        }\r\n        <router-outlet name=\"mainside\"> </router-outlet>\r\n    </fd-dynamic-side-content-main>\r\n</fd-dynamic-side-content>\r\n<div class=\"sidbar-outlet\">\r\n    <router-outlet></router-outlet>\r\n</div>\r\n", styles: [":host{width:100%;display:block}fd-dynamic-page ::ng-deep article fd-dynamic-page-content{padding:0}fd-dynamic-page ::ng-deep article fd-layout-panel{background-color:var(--sapBackgroundColor)}fd-dynamic-page ::ng-deep article li{border:none}.tiles-sidebar-wrapper>fd-dynamic-side-content-side{max-width:20svw;width:20svw;overflow-y:auto;padding:0;background-color:var(--sapBaseColor);border:.0625rem solid var(--sapTile_SeparatorColor, #ccc);border-top:none}.tiles-sidebar-wrapper>fd-dynamic-side-content-side ::ng-deep li span.haschildren{font-family:B-Font Medium}.tiles-sidebar-wrapper>fd-dynamic-side-content-side ::ng-deep bsu-barsa-ulv-main,.tiles-sidebar-wrapper>fd-dynamic-side-content-main ::ng-deep bsu-barsa-ulv-main{margin:0!important}.tiles-sidebar-wrapper>fd-dynamic-side-content-main{width:80svw;max-width:80svw;background-color:var(--sapBaseColor)}@media (max-width: 799px){.tiles-sidebar-wrapper{flex-direction:column}.tiles-sidebar-wrapper>fd-dynamic-side-content-side{width:100svw;max-width:100svw;overflow:hidden}.tiles-sidebar-wrapper>fd-dynamic-side-content-main{width:100svw;max-width:100svw}}@media (min-width: 800px) and (max-width: 1439px){.tiles-sidebar-wrapper>fd-dynamic-side-content-side{width:35svw;max-width:35svw;overflow:hidden}.tiles-sidebar-wrapper>fd-dynamic-side-content-main{width:65svw;max-width:65svw}}\n"], dependencies: [{ kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i2$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "component", type: i3$3.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i3$3.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i4$5.DynamicSideContentComponent, selector: "fd-dynamic-side-content", inputs: ["position", "size", "id"] }, { kind: "component", type: i4$5.DynamicSideContentSideComponent, selector: "fd-dynamic-side-content-side", inputs: ["id"] }, { kind: "component", type: i4$5.DynamicSideContentMainComponent, selector: "fd-dynamic-side-content-main", inputs: ["id"] }, { kind: "component", type: i5$3.MessagePageComponent, selector: "fd-message-page", inputs: ["class", "type", "hasIcon", "glyphFont", "glyph"] }, { kind: "component", type: i5$3.MessagePageTitleComponent, selector: "fd-message-page-title" }, { kind: "directive", type: i5.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight", "setMaxHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { 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: BarsaTileSidebarPageComponent, isStandalone: false, selector: "bt-barsa-tile-sidebar-page", providers: [RoutingService], usesInheritance: true, ngImport: i0, template: "<div fd-bar>\r\n    <div fd-bar-left style=\"flex: 1; width: 100%\">\r\n        <fd-breadcrumb style=\"width: 100%\">\r\n            @if (breadcrumbs$ | async; as breadCrumbs) { @for ( breadCrumb of breadCrumbs ;track breadCrumb.url; let i =\r\n            $index; let last = $last) {\r\n            <fd-breadcrumb-item>\r\n                <bsu-breadcrumb\r\n                    [index]=\"i\"\r\n                    [isLast]=\"last\"\r\n                    [breadCrumb]=\"breadCrumb\"\r\n                    [allBreadCrumb]=\"breadCrumbs\"\r\n                ></bsu-breadcrumb>\r\n            </fd-breadcrumb-item>\r\n            } }\r\n        </fd-breadcrumb>\r\n    </div>\r\n</div>\r\n\r\n<fd-dynamic-side-content class=\"tiles-sidebar-wrapper\" fillEmptySpace style=\"overflow: auto\">\r\n    <fd-dynamic-side-content-side>\r\n        <ng-container #containerRef></ng-container>\r\n    </fd-dynamic-side-content-side>\r\n    <fd-dynamic-side-content-main style=\"padding: 2rem\">\r\n        @if(firstReportLoaded()===false){\r\n        <fd-message-page type=\"no-items\" style=\"align-self: center; background: transparent\">\r\n            <fd-message-page-title>{{ 'SearchInReports' | bbbTranslate }}</fd-message-page-title>\r\n        </fd-message-page>\r\n        }\r\n        <router-outlet name=\"mainside\"> </router-outlet>\r\n    </fd-dynamic-side-content-main>\r\n</fd-dynamic-side-content>\r\n<div class=\"sidbar-outlet\">\r\n    <router-outlet></router-outlet>\r\n</div>\r\n", styles: [":host{width:100%;display:block}fd-dynamic-page ::ng-deep article fd-dynamic-page-content{padding:0}fd-dynamic-page ::ng-deep article fd-layout-panel{background-color:var(--sapBackgroundColor)}fd-dynamic-page ::ng-deep article li{border:none}.tiles-sidebar-wrapper>fd-dynamic-side-content-side{max-width:20svw;width:20svw;overflow-y:auto;padding:0;background-color:var(--sapBaseColor);border:.0625rem solid var(--sapTile_SeparatorColor, #ccc);border-top:none}.tiles-sidebar-wrapper>fd-dynamic-side-content-side ::ng-deep li span.haschildren{font-family:B-Font Medium}.tiles-sidebar-wrapper>fd-dynamic-side-content-side ::ng-deep bsu-barsa-ulv-main,.tiles-sidebar-wrapper>fd-dynamic-side-content-main ::ng-deep bsu-barsa-ulv-main{margin:0!important}.tiles-sidebar-wrapper>fd-dynamic-side-content-main{width:80svw;max-width:80svw;background-color:var(--sapBaseColor)}@media (max-width: 799px){.tiles-sidebar-wrapper{flex-direction:column}.tiles-sidebar-wrapper>fd-dynamic-side-content-side{width:100svw;max-width:100svw;overflow:hidden}.tiles-sidebar-wrapper>fd-dynamic-side-content-main{width:100svw;max-width:100svw}}@media (min-width: 800px) and (max-width: 1439px){.tiles-sidebar-wrapper>fd-dynamic-side-content-side{width:35svw;max-width:35svw;overflow:hidden}.tiles-sidebar-wrapper>fd-dynamic-side-content-main{width:65svw;max-width:65svw}}\n"], dependencies: [{ kind: "directive", type: i1$5.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "component", type: i3$3.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i3$3.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i4$3.DynamicSideContentComponent, selector: "fd-dynamic-side-content", inputs: ["position", "size", "id"] }, { kind: "component", type: i4$3.DynamicSideContentSideComponent, selector: "fd-dynamic-side-content-side", inputs: ["id"] }, { kind: "component", type: i4$3.DynamicSideContentMainComponent, selector: "fd-dynamic-side-content-main", inputs: ["id"] }, { kind: "component", type: i5$4.MessagePageComponent, selector: "fd-message-page", inputs: ["class", "type", "hasIcon", "glyphFont", "glyph"] }, { kind: "component", type: i5$4.MessagePageTitleComponent, selector: "fd-message-page-title" }, { kind: "directive", type: i5.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight", "setMaxHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTileSidebarPageComponent, decorators: [{
             type: Component,
@@ -3722,7 +4232,7 @@ class CardTileComponent extends BaseBtTileComponent {
         this.iconColor = this.settings.IconColor;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: CardTileComponent, isStandalone: false, selector: "bt-card-tile", usesInheritance: true, ngImport: i0, template: "<fd-card\r\n    (click)=\"onTileClick()\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters | bbbTranslate\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [badge]=\"data | tileProp: 'Badge':parameters | bbbTranslate\"\r\n    [ngClass]=\"groupType\"\r\n    [interactive]=\"true\"\r\n    [class.hassize]=\"cardMediaSize\"\r\n    [style.background-color]=\"backgroundColor ? backgroundColor : null\"\r\n    [class.custom-background]=\"backgroundColor\"\r\n>\r\n    <fd-card-media>\r\n        <div fd-card-media-image-container>\r\n            <bsu-barsa-img-skeleton\r\n                fd-card-media-image\r\n                [title]=\"data | tileProp: 'Title':parameters | bbbTranslate\"\r\n                [imageUrl]=\"data | tileProp: 'Picture':parameters | picFieldSrc: 'GetPictureFromFileInfo':null\"\r\n                [size]=\"cardMediaSize | cardMediaSize: 160\"\r\n                [widthFull]=\"!cardMediaSize\"\r\n            ></bsu-barsa-img-skeleton>\r\n            <!-- <fd-skeleton [style.display]=\"!hideSkeleton() ? null:'none'\" type=\"rectangle\" width=\"100%\" height=\"160px\"></fd-skeleton>\r\n            <img\r\n                fd-card-media-image\r\n                [src]=\"data | tileProp: 'Picture':parameters | picFieldSrc: 'GetPictureFromFileInfo':null\"\r\n                [alt]=\"data | tileProp: 'Title':parameters\"\r\n                style=\"max-height: 160px\"\r\n                [style.display]=\"!hideSkeleton() ? 'none':null\"\r\n                (load)=\"hideSkeleton.set(true)\"\r\n            /> -->\r\n        </div>\r\n    </fd-card-media>\r\n    <fd-card-header>\r\n        <fd-card-main-header>\r\n            <h2 fd-card-title>{{ data | tileProp: 'Title':parameters | bbbTranslate }}</h2>\r\n            <h3 fd-card-subtitle>{{ data | tileProp: 'Subtitle':parameters | bbbTranslate }}</h3>\r\n        </fd-card-main-header>\r\n    </fd-card-header>\r\n</fd-card>\r\n", styles: [":host{cursor:pointer}:host ::ng-deep .fd-card__badge-container{z-index:4}:host.InlineCards fd-card-main-header>div{border:none}fd-card.hassize fd-card-media{padding:.3rem .5rem}fd-card.hassize fd-card-media ::ng-deep .fd-card__media-image-container{justify-content:center}fd-card.hassize fd-card-main-header ::ng-deep .fd-card__header-main{border:none;padding:0}fd-card.hassize fd-card-main-header ::ng-deep .fd-card__header-main .fd-card__title-area{justify-content:center}fd-card.hassize fd-card-main-header ::ng-deep h2,fd-card.hassize fd-card-main-header ::ng-deep h3{-webkit-line-clamp:1;text-align:center}fd-card.hassize fd-card-main-header ::ng-deep h2{font-size:.8rem}fd-card.hassize fd-card-main-header ::ng-deep h3{font-size:.7rem}fd-card.custom-background fd-card-media{background-color:transparent}fd-card.custom-background ::ng-deep .fd-card__header-main{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i2$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i2$1.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "directive", type: i2$1.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i2$1.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i2$1.CardMediaComponent, selector: "fd-card-media", inputs: ["ariaRoleDescription", "hasPadding", "shellColor", "legendColor"] }, { kind: "directive", type: i2$1.CardMediaImageDirective, selector: "[fd-card-media-image]" }, { kind: "directive", type: i2$1.CardMediaImageContainerDirective, selector: "[fd-card-media-image-container]" }, { kind: "component", type: i3.BarsaImgSkeletonComponent, selector: "bsu-barsa-img-skeleton", inputs: ["title", "size", "imageUrl", "widthFull"] }, { kind: "directive", type: TileDynamicCommandDirective, selector: "[tileDynCommand]", inputs: ["disableClick", "edit", "dynamicCommand", "title", "setToStorage", "navigateBackOnClick"] }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i5.CardMediaSizePipe, name: "cardMediaSize" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: CardTileComponent, isStandalone: false, selector: "bt-card-tile", usesInheritance: true, ngImport: i0, template: "<fd-card\r\n    (click)=\"onTileClick()\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters | bbbTranslate\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [badge]=\"data | tileProp: 'Badge':parameters | bbbTranslate\"\r\n    [ngClass]=\"groupType\"\r\n    [interactive]=\"true\"\r\n    [class.hassize]=\"cardMediaSize\"\r\n    [style.background-color]=\"backgroundColor ? backgroundColor : null\"\r\n    [class.custom-background]=\"backgroundColor\"\r\n>\r\n    <fd-card-media>\r\n        <div fd-card-media-image-container>\r\n            <bsu-barsa-img-skeleton\r\n                fd-card-media-image\r\n                [title]=\"data | tileProp: 'Title':parameters | bbbTranslate\"\r\n                [imageUrl]=\"data | tileProp: 'Picture':parameters | picFieldSrc: 'GetPictureFromFileInfo':null\"\r\n                [size]=\"cardMediaSize | cardMediaSize: 160\"\r\n                [widthFull]=\"!cardMediaSize\"\r\n            ></bsu-barsa-img-skeleton>\r\n            <!-- <fd-skeleton [style.display]=\"!hideSkeleton() ? null:'none'\" type=\"rectangle\" width=\"100%\" height=\"160px\"></fd-skeleton>\r\n            <img\r\n                fd-card-media-image\r\n                [src]=\"data | tileProp: 'Picture':parameters | picFieldSrc: 'GetPictureFromFileInfo':null\"\r\n                [alt]=\"data | tileProp: 'Title':parameters\"\r\n                style=\"max-height: 160px\"\r\n                [style.display]=\"!hideSkeleton() ? 'none':null\"\r\n                (load)=\"hideSkeleton.set(true)\"\r\n            /> -->\r\n        </div>\r\n    </fd-card-media>\r\n    <fd-card-header>\r\n        <fd-card-main-header>\r\n            <h2 fd-card-title>{{ data | tileProp: 'Title':parameters | bbbTranslate }}</h2>\r\n            <h3 fd-card-subtitle>{{ data | tileProp: 'Subtitle':parameters | bbbTranslate }}</h3>\r\n        </fd-card-main-header>\r\n    </fd-card-header>\r\n</fd-card>\r\n", styles: [":host{cursor:pointer}:host ::ng-deep .fd-card__badge-container{z-index:4}:host.InlineCards fd-card-main-header>div{border:none}fd-card.hassize fd-card-media{padding:.3rem .5rem}fd-card.hassize fd-card-media ::ng-deep .fd-card__media-image-container{justify-content:center}fd-card.hassize fd-card-main-header ::ng-deep .fd-card__header-main{border:none;padding:0}fd-card.hassize fd-card-main-header ::ng-deep .fd-card__header-main .fd-card__title-area{justify-content:center}fd-card.hassize fd-card-main-header ::ng-deep h2,fd-card.hassize fd-card-main-header ::ng-deep h3{-webkit-line-clamp:1;text-align:center}fd-card.hassize fd-card-main-header ::ng-deep h2{font-size:.8rem}fd-card.hassize fd-card-main-header ::ng-deep h3{font-size:.7rem}fd-card.custom-background fd-card-media{background-color:transparent}fd-card.custom-background ::ng-deep .fd-card__header-main{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$2.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i2$2.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i2$2.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "directive", type: i2$2.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i2$2.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i2$2.CardMediaComponent, selector: "fd-card-media", inputs: ["ariaRoleDescription", "hasPadding", "shellColor", "legendColor"] }, { kind: "directive", type: i2$2.CardMediaImageDirective, selector: "[fd-card-media-image]" }, { kind: "directive", type: i2$2.CardMediaImageContainerDirective, selector: "[fd-card-media-image-container]" }, { kind: "component", type: i3.BarsaImgSkeletonComponent, selector: "bsu-barsa-img-skeleton", inputs: ["title", "size", "imageUrl", "widthFull"] }, { kind: "directive", type: TileDynamicCommandDirective, selector: "[tileDynCommand]", inputs: ["disableClick", "edit", "dynamicCommand", "title", "setToStorage", "navigateBackOnClick"] }, { kind: "pipe", type: i5.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i5.CardMediaSizePipe, name: "cardMediaSize" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardTileComponent, decorators: [{
             type: Component,
@@ -3830,7 +4340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 class TileSizeDirective extends BaseDirective {
     ngOnInit() {
         super.ngOnInit();
-        this._portalService.deviceSize$.pipe(takeUntil$1(this._onDestroy$)).subscribe((c) => {
+        this._portalService.deviceSize$.pipe(takeUntil(this._onDestroy$)).subscribe((c) => {
             if (c === 's') {
                 this._renderer2.addClass(this._el.nativeElement.firstChild, 'fd-tile--s');
             }
@@ -3887,7 +4397,7 @@ const extendHomeRouter = [
 const routes = [];
 class BarsaTilesRoutingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTilesRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: BarsaTilesRoutingModule, imports: [i1$3.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: BarsaTilesRoutingModule, imports: [i1$5.RouterModule], exports: [RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTilesRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTilesRoutingModule, decorators: [{
@@ -4027,7 +4537,8 @@ class BarsaTilesModule extends BaseModule {
             TileSizeDirective,
             TileDynamicCommandDirective,
             TileClassDirective, NotificationGroupComponent,
-            NotificationGroupHeaderComponent], imports: [CommonModule,
+            NotificationGroupHeaderComponent,
+            DynamicTileGroupComponent], imports: [CommonModule,
             FormsModule,
             RouterModule,
             ReactiveFormsModule,
@@ -4099,6 +4610,7 @@ class BarsaTilesModule extends BaseModule {
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTilesModule, providers: [
             ...pipes,
             TilesService,
+            TilesViewerService,
             AppFinderService,
             LowerCasePipe,
             provideAppInitializer(() => {
@@ -4171,6 +4683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     providers: [
                         ...pipes,
                         TilesService,
+                        TilesViewerService,
                         AppFinderService,
                         LowerCasePipe,
                         provideAppInitializer(() => {
@@ -4183,7 +4696,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         ...pipes,
                         ...directives,
                         NotificationGroupComponent,
-                        NotificationGroupHeaderComponent
+                        NotificationGroupHeaderComponent,
+                        DynamicTileGroupComponent
                     ],
                     exports: [...components]
                 }]
@@ -4193,5 +4707,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionItemComponent, ActionsLinkComponent, AppFinderAppListComponent, AppFinderComponent, AppFinderGroupComponent, BarsaPinAppComponent, BarsaShellbarComponent, BarsaTileGroupPageComponent, BarsaTileSidebarPageComponent, BarsaTilesModule, CardTileComponent, ChangeAppTileComponent, CreateAppGroupComponent, FeedTileComponent, FooterEditTileComponent, FooterTileComponent, FormAppFinderComponent, FormTileComponent, GroupTilesPipe, LogoTileComponent, MegamenuPipe, MicroTileChartAreaComponent, MicroTileChartBarComponent, MicroTileChartBulletComponent, MicroTileChartCircularComponent, MicroTileChartComparisonComponent, MicroTileChartLineComponent, MicroTileChartStackbarComponent, NewsTileComponent, NumericTileComponent, PinTileComponent, PopoverAppFinderComponent, ProfileTileComponent, ReportTileComponent, SemantiToButtonColorPipe, ShellbarComponent, SimpleTileComponent, SuggestionsCountFilterPipe, SuggestionsFilterPipe, TileClassDirective, TileComponent, TileHomeFilterPipe, TilePropPipe, TilesService, TilesViewerComponent, TilesViewerContainerComponent, TilesViewerGroupComponent, TilesViewerMegamenuComponent, TilesViewerService, addTilesPageSidebar };
+export { ActionItemComponent, ActionsLinkComponent, AppFinderAppListComponent, AppFinderComponent, AppFinderGroupComponent, BarsaPinAppComponent, BarsaShellbarComponent, BarsaTileGroupPageComponent, BarsaTileSidebarPageComponent, BarsaTilesModule, BaseBtTileComponent, BaseTileComponent, CardTileComponent, ChangeAppTileComponent, CreateAppGroupComponent, DynamicTileGroupComponent, FeedTileComponent, FooterEditTileComponent, FooterTileComponent, FormAppFinderComponent, FormTileComponent, GroupTilesPipe, LogoTileComponent, MegamenuPipe, MicroTileChartAreaComponent, MicroTileChartBarComponent, MicroTileChartBulletComponent, MicroTileChartCircularComponent, MicroTileChartComparisonComponent, MicroTileChartLineComponent, MicroTileChartStackbarComponent, NewsTileComponent, NumericTileComponent, PinTileComponent, PopoverAppFinderComponent, ProfileTileComponent, ReportTileComponent, SemantiToButtonColorPipe, ShellbarComponent, SimpleTileComponent, SuggestionsCountFilterPipe, SuggestionsFilterPipe, TileClassDirective, TileComponent, TileHomeFilterPipe, TilePropPipe, TilesService, TilesViewerComponent, TilesViewerContainerComponent, TilesViewerGroupComponent, TilesViewerMegamenuComponent, TilesViewerService, addTilesPageSidebar };
 //# sourceMappingURL=barsa-tiles.mjs.map