barsa-tiles 1.0.455 → 1.0.457

package/fesm2022/barsa-tiles.mjs

@@ -0,0 +1,3609 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, Input, Directive, inject, HostListener, Pipe, HostBinding, EventEmitter, Output, ElementRef, ViewChild, ChangeDetectorRef, TemplateRef, Inject, signal, ViewContainerRef, NgModule, APP_INITIALIZER, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as i1 from 'barsa-novin-ray-core';
+import { BarsaApi, TilePropsComponent, BaseComponent, BaseDirective, LocalStorageService, PreventDefaulEvent, getDeviceIsMobile, fromIntersectionObserver, IntersectionStatus, APP_VERSION, getDeviceIsDesktop, getDeviceIsTablet, LogService, BreadcrumbService, PortalService, RoutingService, EmptyPageComponent, AuthGuard, PortalPageResolver, TileGroupBreadcrumResolver, BaseModule, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
+import { Subject, BehaviorSubject, of, from, takeUntil as takeUntil$1, filter as filter$1, interval, combineLatest, forkJoin } from 'rxjs';
+import { startWith, shareReplay, takeUntil, distinctUntilChanged, filter, tap, concatMap, debounceTime, exhaustMap, finalize, map, withLatestFrom } from 'rxjs/operators';
+import * as i1$1 from '@fundamental-ngx/core';
+import { CarouselComponent, ComboboxComponent, FundamentalNgxCoreModule, GridListModule } from '@fundamental-ngx/core';
+import * as i1$3 from '@fundamental-ngx/core/tile';
+import * as i3$1 from '@angular/router';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import * as i1$4 from '@angular/common';
+import { DOCUMENT, CommonModule, LowerCasePipe } from '@angular/common';
+import * as i2 from '@fundamental-ngx/core/button';
+import * as i6$1 from '@fundamental-ngx/core/list';
+import * as i4 from '@fundamental-ngx/core/menu';
+import * as i6 from 'barsa-sap-ui';
+import { BarsaTreeItemComponent, ReportNavigatorComponent, BarsaSapUiModule } from 'barsa-sap-ui';
+import * as i1$2 from '@fundamental-ngx/core/icon';
+import * as i3 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 i8 from '@fundamental-ngx/core/title';
+import * as i9 from '@fundamental-ngx/core/panel';
+import * as i5 from '@fundamental-ngx/core/toolbar';
+import * as i1$5 from '@fundamental-ngx/core/avatar';
+import * as i3$2 from '@fundamental-ngx/core/card';
+import * as i4$2 from '@fundamental-ngx/core/fixed-card-layout';
+import * as i1$6 from '@angular/forms';
+import { UntypedFormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i6$2 from '@fundamental-ngx/core/input-group';
+import * as i4$3 from '@fundamental-ngx/core/bar';
+import * as i5$1 from '@fundamental-ngx/core/form';
+import * as i7$1 from '@fundamental-ngx/core/dialog';
+import * as i9$1 from '@fundamental-ngx/cdk/utils';
+import * as i9$2 from '@fundamental-ngx/platform';
+import { IconTabBarComponent, IconTabBarTabComponent, IconTabBarTabContentDirective } from '@fundamental-ngx/platform';
+import * as i2$1 from '@angular/cdk/scrolling';
+import * as i5$2 from '@fundamental-ngx/core/dynamic-page';
+import * as i7$2 from '@fundamental-ngx/core/switch';
+import * as i2$2 from 'barsa-echarts';
+import { BarsaEchartsModule } from 'barsa-echarts';
+import * as i2$3 from '@fundamental-ngx/core/carousel';
+import * as i5$3 from '@fundamental-ngx/core/checkbox';
+import * as i3$3 from '@angular/platform-browser';
+import * as i10 from '@fundamental-ngx/core/product-switch';
+import * as i11 from '@fundamental-ngx/core/popover';
+import * as i12 from '@fundamental-ngx/core/shellbar';
+import * as i4$4 from '@fundamental-ngx/core/notification';
+import * as i5$4 from '@fundamental-ngx/core/tabs';
+import * as i3$4 from '@fundamental-ngx/core/breadcrumb';
+import * as i4$5 from '@fundamental-ngx/core/dynamic-side-content';
+import * as i5$5 from '@fundamental-ngx/core/message-page';
+import { CdkTableModule } from '@angular/cdk/table';
+import { SplitterModule } from '@fundamental-ngx/btp/splitter';
+
+class TilesService {
+    constructor(_portalService, _rtlService, _bbbTranslatePipe) {
+        this._portalService = _portalService;
+        this._rtlService = _rtlService;
+        this._bbbTranslatePipe = _bbbTranslatePipe;
+        this.shellbarSource = new Subject();
+        this._OnDestroy$ = new Subject();
+        this._homeAppTileGroupsSource = new BehaviorSubject([]);
+        this.pinTilesSource = new Subject();
+        this._appTileGroupsSource = new BehaviorSubject(null);
+        this._userProfileImageUrl$ = new BehaviorSubject(null);
+        this._edithomeSource = new BehaviorSubject(false);
+        this._componentSettings$ = new Subject();
+        BarsaApi.Bw.TilesService = this;
+        this.userProfileImageUrl$ = this._userProfileImageUrl$.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.deviceSize$ = this._portalService.deviceSize$;
+        this._rtlService.rtl.next(BarsaApi.LoginFormData.IsRtl);
+        this.loadAllAppTileGroups();
+        this.appTileGroups$
+            .pipe(filter((moForReportModel) => moForReportModel !== null), tap((moForReportModel) => {
+            if (moForReportModel) {
+                this._allAppsLoaded(moForReportModel);
+            }
+        }))
+            .subscribe();
+        BarsaApi.Ul.ApplicationCtrlr.on('GlobalRefreshTile', this._onApplication_GlobalRefreshTile.bind(this));
+    }
+    get componentSettings$() {
+        return this._componentSettings$.asObservable();
+    }
+    get appTileGroups() {
+        return this._appTileGroupsSource.getValue();
+    }
+    ngOnDestroy() {
+        this._OnDestroy$.next();
+    }
+    _onApplication_GlobalRefreshTile(sender, appTilesTitle) {
+        const allApps = this._appTileGroupsSource.getValue();
+        const appTiles = [];
+        if (allApps) {
+            appTilesTitle.forEach((c) => {
+                const selectedTile = this.findAppTileWithKey(allApps, 'A_App_AppKey', c);
+                if (selectedTile) {
+                    appTiles.push(selectedTile);
+                }
+            });
+            this._updateAppTileFromNotification(allApps, appTiles);
+            this._appTileGroupsSource.next(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) => {
+                result.MoDataList.forEach((c) => this.updateAppTile(allApps, c));
+                this._appTileGroupsSource.next({ ...allApps });
+            },
+            FailFn: () => { }
+        });
+    }
+    loadUserProfileImage(repIdProfileImage) {
+        if (!repIdProfileImage) {
+            return;
+        }
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [repIdProfileImage],
+            Method: 'BarsaPortalGetProfileImage',
+            SuccessFn: (url) => {
+                this._userProfileImageUrl$.next(url);
+            },
+            FailFn: () => { }
+        });
+    }
+    loadAppTileGroups(appTileGroup) {
+        if (!appTileGroup || appTileGroup.$TilesLoaded) {
+            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);
+                });
+            }
+        }
+    }
+    saveTilesStackContent(tilesStackContent) {
+        const userPortalSettings = this._portalService.userPortalSettings['UserPortalSettings'];
+        if (userPortalSettings == null) {
+            return Promise.resolve();
+        }
+        userPortalSettings.TilesStackContent = tilesStackContent;
+        userPortalSettings.$State = 'Modified';
+        return this._saveUserPortalSettings(userPortalSettings).then(() => this._portalService.setUserPortalSettings(userPortalSettings));
+    }
+    loadUserPortalSettings() {
+        return this._portalService.getData('UserPortalSetting').pipe(concatMap((data) => {
+            if (data) {
+                return of(data);
+            }
+            else {
+                return this.loadFromServerUserPortalSetting();
+            }
+        }));
+    }
+    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);
+                }
+            });
+        });
+    }
+    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);
+                }
+            });
+        }));
+    }
+    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) => {
+            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) => {
+            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) => {
+            const allApps = this.appTileGroups;
+            if (allApps) {
+                allApps.MoDataList = allApps.MoDataList.filter((c) => c.Id !== appGroupId);
+                this._appTileGroupsSource.next(allApps);
+            }
+        }));
+    }
+    changeAppTileSetting(appTile) {
+        const allApps = this.appTileGroups;
+        const selectedGroup = this.findGroupWithAppTileId(allApps, appTile.Id);
+        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);
+                }
+            });
+        }));
+    }
+    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();
+    }
+    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)));
+    }
+    saveOrderAppTiles(appGroup, appTiles, isActionLink = false, appTileIdTransferedId = '0') {
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [appGroup.Id, appTiles, isActionLink, appTileIdTransferedId],
+            Method: 'ChangeOrderAppTiles',
+            SuccessFn: () => { },
+            FailFn: () => { }
+        });
+    }
+    updateAppTile(allApps, appTile) {
+        if (!allApps) {
+            return;
+        }
+        const selectedAppTile = this.findAppTileWithKey(allApps, 'A_App_Component.Settings.Id', appTile.A_App_Component.Settings.Id);
+        if (selectedAppTile) {
+            BarsaApi.Common.Merger.FastMerge(selectedAppTile.A_App_Component.Settings, appTile.A_App_Component.Settings);
+            this._componentSettings$.next(selectedAppTile.A_App_Component.Settings);
+        }
+    }
+    updataAppTileSetting(selectedGroup, appGroupSetting) {
+        const allApps = this.appTileGroups;
+        allApps?.MoDataList.forEach((appGroup) => {
+            if (appGroup.Id === selectedGroup.Id) {
+                appGroup.UserAppTileGroupSetting = appGroupSetting;
+            }
+        });
+        this._appTileGroupsSource.next(allApps);
+    }
+    addAppGroup(mo) {
+        const allApps = this.appTileGroups;
+        if (allApps) {
+            allApps.MoDataList.push(mo);
+            this._appTileGroupsSource.next(allApps);
+        }
+    }
+    singlePinTileChanged(appTileId) {
+        const allApps = this.appTileGroups;
+        const group = this.findGroupWithAppTileId(allApps, appTileId);
+        if (group === null) {
+            return of(false);
+        }
+        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);
+                }
+            });
+        }));
+    }
+    pinTileChanged(appTileGroupsPin, app, callback) {
+        const allApps = this.appTileGroups;
+        const visible = appTileGroupsPin.map((c) => c.visible);
+        const groupChanges = appTileGroupsPin.map((c) => new BarsaApi.Common.MetaObjectWeb({
+            Id: c.appTileGroup.Id,
+            TypeDefId: allApps?.TypeDefId
+        }));
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [groupChanges, visible, app.Id],
+            Method: 'TilePinChanged',
+            SuccessFn: (settings) => {
+                this._tilePinChange(appTileGroupsPin, allApps);
+                callback(settings);
+            },
+            FailFn: () => {
+                // TODO show error
+            }
+        });
+    }
+    _tilePinChange(appTileGroupsPin, allApps) {
+        for (const appTileGroupPin of appTileGroupsPin) {
+            let selectedAppGroup;
+            const appGroupId = appTileGroupPin.appTileGroup.Id;
+            allApps?.MoDataList.forEach((c) => {
+                if (c.Id === appGroupId) {
+                    selectedAppGroup = c;
+                }
+                else if (!selectedAppGroup) {
+                    selectedAppGroup = c.$Children?.find((child) => child.Id === appGroupId);
+                }
+            });
+            if (selectedAppGroup && selectedAppGroup.$TilesLoaded) {
+                // let moDataList = selectedAppGroup.AppTiles.MoDataList;
+                // if (appTileGroups[i].visible)
+                //   selectedAppGroup.AppTiles.MoDataList = [...moDataList, settings[i]];
+                // else
+                //   selectedAppGroup.AppTiles.MoDataList = moDataList.filter(
+                //     (c) => c.App.Id !== app.Id
+                //   );
+                this._loadAppTilesOfAppTileGroup(selectedAppGroup, allApps);
+            }
+        }
+        this._nextAllAppTileGroups(allApps);
+    }
+    loadShellbar() {
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [BarsaApi.LoginFormData.PortalId],
+            Method: 'LoadShellbarByPortalId',
+            SuccessFn: (shellbar) => {
+                this.shellbarSource.next(shellbar);
+            },
+            FailFn: () => {
+                // TODO show error
+            }
+        });
+        // this._portalService
+        //     .ReportExecutePromise('Shellbar')
+        //     .then((moForReportModel) => this.shellbarSource.next(moForReportModel.MoDataList[0]));
+    }
+    loadAllAppTileGroups() {
+        this._portalService
+            .ReportExecute('AllAppTileGroups')
+            .subscribe((allApps) => this._nextAllAppTileGroups(allApps));
+    }
+    _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;
+        }
+    }
+    getTileGroups() {
+        return this._appTileGroupsSource.getValue();
+    }
+    setEditHome(edit) {
+        this._edithomeSource.next(edit);
+    }
+    _allAppsLoaded(moForReportModel) {
+        moForReportModel.MoDataList.forEach((c) => {
+            this._prepareNavigator(c);
+        });
+        this._setHomeAppTileGroups(moForReportModel.MoDataList);
+    }
+    _loadAppTilesOfAppTileGroup(selectedAppTilegroup, allApps) {
+        const callback = () => {
+            this._nextAllAppTileGroups(allApps);
+        };
+        if (!selectedAppTilegroup.UserAppTileGroupSetting) {
+            this._loadAppTilesByAppTileGroup(selectedAppTilegroup, callback);
+        }
+        else {
+            this._loadAppTilesByAppTileGroupSetting(selectedAppTilegroup, callback);
+        }
+    }
+    _loadAppTilesByAppTileGroup(appGroup, callback) {
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [appGroup.Id],
+            Method: 'LoadAllAppTilesByAppTileGroup',
+            SuccessFn: (appTiles) => {
+                this._updateAppTilesOfAppTileGroup(appGroup, appTiles);
+                callback();
+            },
+            FailFn: () => {
+                // TODO show error
+            }
+        });
+    }
+    _updateAppTilesOfAppTileGroup(selectedAppTilegroup, appTiles) {
+        if (this.appTileGroups) {
+            selectedAppTilegroup = { ...selectedAppTilegroup, $TilesLoaded: true };
+            appTiles.MoDataList.forEach((element) => {
+                element.Component = element.A_App_Component ?? element.A_AppTile_App_Component;
+                element.DynamicCommand = element.A_App_DynamicCommand ?? element.A_AppTile_App_DynamicCommand;
+                element.Predefined = element.Predefined ?? element.A_AppTile_Predefined;
+            });
+            const apptileGroupIndex = this.appTileGroups?.MoDataList.findIndex((c) => c.Id === selectedAppTilegroup.Id || c.Id === selectedAppTilegroup.$ParentId);
+            selectedAppTilegroup.AppTiles = appTiles;
+            const tileGroup = this.appTileGroups.MoDataList[apptileGroupIndex];
+            if (selectedAppTilegroup.$ParentId) {
+                if (tileGroup.$Children) {
+                    const idOfSubGroup = tileGroup.$Children.findIndex((c) => c.Id === selectedAppTilegroup.Id);
+                    tileGroup.$Children[idOfSubGroup] = selectedAppTilegroup;
+                }
+                this.appTileGroups.MoDataList[apptileGroupIndex] = { ...tileGroup };
+            }
+            else {
+                this.appTileGroups.MoDataList[apptileGroupIndex] = selectedAppTilegroup;
+            }
+        }
+    }
+    _loadAppTilesByAppTileGroupSetting(appTileGroup, callback) {
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [appTileGroup.Id],
+            Method: 'LoadAllAppTilesByUserAppTileGroupSettings',
+            SuccessFn: (appTiles) => {
+                this._updateAppTilesOfAppTileGroup(appTileGroup, appTiles);
+                callback();
+            },
+            FailFn: () => {
+                // TODO show error
+            }
+        });
+    }
+    _nextAllAppTileGroups(newAllApps = null) {
+        const allApps = newAllApps ?? this._appTileGroupsSource.getValue();
+        this._appTileGroupsSource.next(allApps ? { ...allApps } : null);
+    }
+    _setHomeAppTileGroups(appGroups) {
+        let newAppGroups = [...appGroups];
+        newAppGroups = newAppGroups
+            .filter((c) => c.Visible)
+            .sort((a, b) => Number(a.navigatorOrderItem) - Number(b.navigatorOrderItem));
+        this._homeAppTileGroupsSource.next(newAppGroups);
+    }
+    _saveUserPortalSettings(userPortalSettings) {
+        return new Promise((resolve, reject) => {
+            BarsaApi.Bw.RunBlMethodAsync({
+                Parameters: [new BarsaApi.Common.MetaObjectWeb(userPortalSettings)],
+                Method: 'SaveUserPortalSettings',
+                SuccessFn: () => {
+                    resolve();
+                },
+                FailFn: () => {
+                    reject(null);
+                }
+            });
+        });
+    }
+    _updateAppGroupSetting(appGroup, appGroupSetting) {
+        const allApps = this.appTileGroups;
+        const selectedAppGroup = allApps?.MoDataList.find((c) => c.Id === appGroup.Id);
+        if (selectedAppGroup && allApps) {
+            selectedAppGroup.UserAppTileGroupSetting = appGroupSetting;
+            this._nextAllAppTileGroups(allApps);
+        }
+    }
+    findAppTileWithKey(allApps, key, value) {
+        let selectedTile;
+        if (typeof value === 'string') {
+            value = BarsaApi.Common.Util.ReplaceArabicCharchter(value);
+        }
+        if (!allApps) {
+            return null;
+        }
+        allApps.MoDataList.forEach((appGroup) => {
+            if (selectedTile) {
+                return;
+            }
+            selectedTile = appGroup.navigatorTiles.find((c) => BarsaApi.Common.Util.TryGetValue(c, key, null) === value);
+            appGroup.$Children?.forEach((subGroup) => {
+                if (selectedTile) {
+                    return;
+                }
+                selectedTile = subGroup.navigatorTiles.find((c) => BarsaApi.Common.Util.TryGetValue(c, key, null) === value);
+            });
+        });
+        return selectedTile;
+    }
+    findGroupWithAppTileId(allApps, appTileId) {
+        let selectedGroup;
+        if (!allApps) {
+            return null;
+        }
+        allApps.MoDataList.forEach((appGroup) => {
+            if (selectedGroup) {
+                return;
+            }
+            if (appGroup.navigatorTiles.some((appTile) => appTile.Id === appTileId)) {
+                selectedGroup = appGroup;
+                return;
+            }
+            appGroup.$Children?.forEach((subGroup) => {
+                if (subGroup.navigatorTiles.some((appTile) => appTile.Id === appTileId)) {
+                    selectedGroup = subGroup;
+                    return;
+                }
+            });
+        });
+        return selectedGroup;
+    }
+    _findGroupWithAppGroupId(allApps, appGroupId) {
+        let selectedGroup;
+        if (!allApps) {
+            return null;
+        }
+        allApps.MoDataList.forEach((appGroup) => {
+            if (selectedGroup) {
+                return;
+            }
+            if (appGroup.Id === appGroupId) {
+                selectedGroup = appGroup;
+                return;
+            }
+            appGroup.$Children?.forEach((subGroup) => {
+                if (subGroup.Id === appGroupId) {
+                    selectedGroup = subGroup;
+                    return;
+                }
+            });
+        });
+        return selectedGroup;
+    }
+    _updateAppTileGroupSettings(appTileGroup, setting) {
+        appTileGroup.UserAppTileGroupSetting = setting;
+        appTileGroup.AppTiles.MoDataList.forEach((e, i) => {
+            const ex = setting.UserAppTilesSetting.MoDataList.find((c) => c.Id === e.Id);
+            if (ex) {
+                appTileGroup.AppTiles.MoDataList[i] = { ...appTileGroup.AppTiles.MoDataList[i], ...ex };
+            }
+        });
+        this._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);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesService, deps: [{ token: i1.PortalService }, { token: i1$1.RtlService }, { token: i1.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.PortalService }, { type: i1$1.RtlService }, { type: i1.BbbTranslatePipe }] });
+
+class BaseTileComponent extends TilePropsComponent {
+    constructor(el, _renderer2, _cdr, _tilesService) {
+        super(el, _renderer2, _cdr);
+        this.el = el;
+        this._renderer2 = _renderer2;
+        this._cdr = _cdr;
+        this._tilesService = _tilesService;
+    }
+    get settings() {
+        const data = this.data?.Component?.Settings;
+        return data ? data : this.parameters;
+    }
+    get backColor() {
+        return this.settings.TileSetting.BackColor;
+    }
+    get title() {
+        return this.data.TileTitle;
+    }
+    get subtitle() {
+        return this.data.Subtitle;
+    }
+    get double() {
+        return this.settings.TileSetting.IsDouble;
+    }
+    get badge() {
+        return this.settings.TileSetting.Badge;
+    }
+    get footer() {
+        return this.settings.TileSetting.Footer;
+    }
+    get tileSetting() {
+        return this.settings.TileSetting;
+    }
+    setEditHome(val) {
+        this.edit = val;
+        this._cdr.detectChanges();
+    }
+    onTileClick() {
+        if (this.context) {
+            this.context.FireEvent('click', this.context);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseTileComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TilesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BaseTileComponent, selector: "bt-base-tile", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bt-base-tile',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: TilesService }] });
+
+class BaseBtTileComponent extends BaseTileComponent {
+    ngOnInit() {
+        super.ngOnInit();
+        this._tilesService.componentSettings$
+            .pipe(takeUntil$1(this._onDestroy$), filter$1((c) => c.Id === this.settings.Id))
+            .subscribe((c) => {
+            this._cdr.detectChanges();
+        });
+        this._renderer2.addClass(this.el.nativeElement, 'barsa-tile');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseBtTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BaseBtTileComponent, selector: "bt-base-bt-tile", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseBtTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bt-base-bt-tile',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false
+                }]
+        }] });
+
+class FooterTileComponent extends BaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FooterTileComponent, selector: "bt-footer-tile,div[bt-footer-tile]", inputs: { firstSection: "firstSection", secondSection: "secondSection", twoColumn: "twoColumn" }, usesInheritance: true, ngImport: i0, template: "@if (twoColumn) {\r\n<div fd-tile-section>\r\n    <fd-icon fd-tile-refresh [font]=\"firstSection.Icon | sapFont\" [glyph]=\"firstSection.Icon\"></fd-icon>\r\n    <span fd-tile-footer-text>{{ firstSection.Text | bbbTranslate }}</span>\r\n</div>\r\n<div fd-tile-section>\r\n    <fd-icon fd-tile-refresh [font]=\"secondSection.Icon | sapFont\" [glyph]=\"secondSection.Icon\"></fd-icon>\r\n    <span fd-tile-footer-text>{{ secondSection.Text | bbbTranslate }}</span>\r\n</div>\r\n} @else {\r\n<fd-icon fd-tile-refresh [font]=\"firstSection.Icon | sapFont\" [glyph]=\"firstSection.Icon\"></fd-icon>\r\n<span fd-tile-footer-text>{{ firstSection.Text | bbbTranslate }}</span>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i1$3.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$3.TileRefreshDirective, selector: "[fdTileRefresh], [fd-tile-refresh]", inputs: ["glyph", "glyphFont", "class", "ariaLabel"] }, { kind: "directive", type: i1$3.TileFooterTextDirective, selector: "[fdTileFooterText], [fd-tile-footer-text]" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i6.SapFontPipe, name: "sapFont" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-footer-tile,div[bt-footer-tile]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (twoColumn) {\r\n<div fd-tile-section>\r\n    <fd-icon fd-tile-refresh [font]=\"firstSection.Icon | sapFont\" [glyph]=\"firstSection.Icon\"></fd-icon>\r\n    <span fd-tile-footer-text>{{ firstSection.Text | bbbTranslate }}</span>\r\n</div>\r\n<div fd-tile-section>\r\n    <fd-icon fd-tile-refresh [font]=\"secondSection.Icon | sapFont\" [glyph]=\"secondSection.Icon\"></fd-icon>\r\n    <span fd-tile-footer-text>{{ secondSection.Text | bbbTranslate }}</span>\r\n</div>\r\n} @else {\r\n<fd-icon fd-tile-refresh [font]=\"firstSection.Icon | sapFont\" [glyph]=\"firstSection.Icon\"></fd-icon>\r\n<span fd-tile-footer-text>{{ firstSection.Text | bbbTranslate }}</span>\r\n}\r\n" }]
+        }], propDecorators: { firstSection: [{
+                type: Input
+            }], secondSection: [{
+                type: Input
+            }], twoColumn: [{
+                type: Input
+            }] } });
+
+class TileStyleDirective extends BaseDirective {
+    constructor(_renderer2, _el) {
+        super(_el);
+        this._renderer2 = _renderer2;
+        this._el = _el;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const firstChild = this._el.nativeElement.firstChild;
+        if (this.backColor && firstChild) {
+            this._renderer2.setStyle(firstChild, 'background-color', `${this.backColor}`);
+            this._renderer2.addClass(firstChild, 'customColor');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileStyleDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TileStyleDirective, selector: "[tileStyle]", inputs: { backColor: "backColor" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileStyleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tileStyle]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { backColor: [{
+                type: Input
+            }] } });
+
+class TileComponent extends TilePropsComponent {
+    constructor() {
+        super(...arguments);
+        this._localStorage = inject(LocalStorageService);
+        this._router = inject(Router);
+        this.runningCommand = false;
+    }
+    onClick(ev) {
+        if (this.edit || this.disableClick || this.runningCommand || !this.dynamicCommand) {
+            return false;
+        }
+        PreventDefaulEvent(ev);
+        if (this.setToStorage) {
+            this._localStorage.setItem('ActiveTile', this.title);
+        }
+        const command = this.dynamicCommand;
+        const e = { command, DynamicSetting: null };
+        this.runningCommand = true;
+        if (this.navigateBackOnClick) {
+            this._router.navigate(['../']);
+            setTimeout(() => {
+                this.executeCommand(command, e);
+            });
+            return true;
+        }
+        return this.executeCommand(command, e);
+    }
+    executeCommand(command, e) {
+        this._cdr.detectChanges();
+        BarsaApi.Common.CustomCodeManager.RunDynamicCommand(command.Id, e, (res) => {
+            this.runningCommand = false;
+            if (res && typeof res.Detail !== 'undefined') {
+                BarsaApi.Bw.Msg.Error(res.message || res.Text);
+            }
+            this._cdr.detectChanges();
+        });
+        return false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TileComponent, selector: "bt-tile", inputs: { type: "type", footerTemplate: "footerTemplate", footer: "footer", disableClick: "disableClick", title: "title", icon: "icon", subtitle: "subtitle", isDouble: "isDouble", edit: "edit", backColor: "backColor", dynamicCommand: "dynamicCommand", hideHeader: "hideHeader", setToStorage: "setToStorage", listMode: "listMode", navigateBackOnClick: "navigateBackOnClick" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "@if(!listMode) {\r\n<fd-tile [type]=\"type\" [double]=\"isDouble\" [action]=\"edit\" tileStyle [backColor]=\"backColor\" [size]=\"'s'\">\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>\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@if (runningCommand) {\r\n<bsu-mask></bsu-mask>\r\n}\r\n", styles: [":host,fd-tile{display:block}\n"], dependencies: [{ kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.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$3.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "directive", type: i1$3.TileHeaderDirective, selector: "[fdTileHeader], [fd-tile-header]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileTitleDirective, selector: "[fdTileTitle], [fd-tile-title]" }, { kind: "directive", type: i1$3.TileSubtitleDirective, selector: "[fdTileTitle], [fd-tile-subtitle]" }, { kind: "directive", type: i1$3.TileActionCloseDirective, selector: "[fdTileActionClose], [fd-tile-action-close]", inputs: ["class"] }, { kind: "directive", type: i1$3.TileActionIndicatorDirective, selector: "[fdTileActionIndicator], [fd-tile-action-indicator]", inputs: ["class"] }, { kind: "component", type: i6.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { 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: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if(!listMode) {\r\n<fd-tile [type]=\"type\" [double]=\"isDouble\" [action]=\"edit\" tileStyle [backColor]=\"backColor\" [size]=\"'s'\">\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>\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@if (runningCommand) {\r\n<bsu-mask></bsu-mask>\r\n}\r\n", styles: [":host,fd-tile{display:block}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], footerTemplate: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], disableClick: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], isDouble: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], backColor: [{
+                type: Input
+            }], dynamicCommand: [{
+                type: Input
+            }], hideHeader: [{
+                type: Input
+            }], setToStorage: [{
+                type: Input
+            }], listMode: [{
+                type: Input
+            }], navigateBackOnClick: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class TilePropPipe {
+    transform(data, prop, parameters) {
+        if (data) {
+            if (prop === 'Title') {
+                let val = data.TileTitle;
+                if (!val) {
+                    val = BarsaApi.Common.Util.TryGetValue(data, 'Component.Settings.TileSetting.Title', '');
+                }
+                if (!val) {
+                    val = BarsaApi.Common.Util.TryGetValue(data, 'Title', '');
+                }
+                return val;
+            }
+            if (prop === 'Subtitle') {
+                let val = data.Subtitle;
+                if (!val) {
+                    val = BarsaApi.Common.Util.TryGetValue(data, 'Component.Settings.TileSetting.Subtitle', '');
+                }
+                if (!val) {
+                    val = BarsaApi.Common.Util.TryGetValue(data, 'Subtitle', '');
+                }
+                return val;
+            }
+            if (prop === 'DynamicCommand') {
+                return data['DynamicCommand'];
+            }
+            if (data.Component && data.Component.Settings) {
+                const val = data.Component.Settings.TileSetting[prop];
+                if (typeof val === 'undefined') {
+                    return data.Component.Settings[prop];
+                }
+                return val;
+            }
+            return '';
+        }
+        return parameters ? parameters.TileSetting[prop] : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilePropPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TilePropPipe, name: "tileProp" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilePropPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'tileProp',
+                    standalone: false
+                }]
+        }] });
+
+class FormTileComponent extends BaseBtTileComponent {
+    ngOnInit() {
+        super.ngOnInit();
+        const options = {
+            Parameters: [],
+            Method: this.settings.RunBlMethod,
+            SuccessFn: (mo) => {
+                this.params = {
+                    moId: mo.$State === 'New' ? '0' : mo.Id,
+                    typeDefId: this.settings.TypeDef.Id,
+                    viewId: this.settings.TypeViewEntity.Id
+                };
+                this._cdr.detectChanges();
+            },
+            FailFn: () => { }
+        };
+        BarsaApi.Bw.RunBlMethodAsync(options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FormTileComponent, 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$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i1.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", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+class ActionItemComponent extends TileComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ActionItemComponent, selector: "bt-action-item", usesInheritance: true, ngImport: i0, template: "<div [class.action-item-edit-mode]=\"edit\" class=\"action-item s\">\r\n    @if (icon) {\r\n    <fd-icon [glyph]=\"icon\"></fd-icon>\r\n    }\r\n    <h1 fd-tile-title>{{ title }}</h1>\r\n\r\n    @if (subtitle) {\r\n    <h2 fd-tile-subtitle>{{ subtitle }}</h2>\r\n    } @if (edit && !data.Locked) {\r\n    <div class=\"buttons\">\r\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    </div>\r\n    }\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</div>\r\n", styles: [".action-item{display:flex;justify-content:space-between;height:100%;align-items:center;column-gap:10px;padding:7px;background-color:var(--sapTile_Background, #fff);cursor:pointer;box-shadow:var(--sapContent_Shadow0, 0 0 0 .0625rem rgba(0, 0, 0, .1), 0 .125rem .5rem 0 rgba(0, 0, 0, .1));border-radius:var(--sapElement_BorderCornerRadius, .25rem);border:.0625rem solid var(--sapTile_BorderColor, transparent)}.action-item:hover{background-color:var(--sapBackgroundColor);border-color:var(--sapTile_Interactive_BorderColor)}.action-item fd-icon{color:var(--sapLinkColor, #0a6ed1);font-size:1.3rem;line-height:0}.action-item.s .fd-tile__title{font-size:var(--sapFontHeader6Size)}.action-item.s .fd-tile__subtitle{font-size:var(--sapFontSmallSize)}.action-item-edit-mode h1,.action-item-edit-mode h2{opacity:.3}.action-item-edit-mode .buttons{display:flex;column-gap:2px}.action-item-edit-mode .buttons button{display:flex}h1{text-decoration:none;color:var(--sapLinkColor, #0a6ed1);text-shadow:var(--sapContent_TextShadow, 0 0 .125rem #fff)}\n"], dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "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: "directive", type: i1$3.TileTitleDirective, selector: "[fdTileTitle], [fd-tile-title]" }, { kind: "directive", type: i1$3.TileSubtitleDirective, selector: "[fdTileTitle], [fd-tile-subtitle]" }, { kind: "directive", type: i1$3.TileActionCloseDirective, selector: "[fdTileActionClose], [fd-tile-action-close]", inputs: ["class"] }, { kind: "directive", type: i1$3.TileActionIndicatorDirective, selector: "[fdTileActionIndicator], [fd-tile-action-indicator]", inputs: ["class"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-action-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div [class.action-item-edit-mode]=\"edit\" class=\"action-item s\">\r\n    @if (icon) {\r\n    <fd-icon [glyph]=\"icon\"></fd-icon>\r\n    }\r\n    <h1 fd-tile-title>{{ title }}</h1>\r\n\r\n    @if (subtitle) {\r\n    <h2 fd-tile-subtitle>{{ subtitle }}</h2>\r\n    } @if (edit && !data.Locked) {\r\n    <div class=\"buttons\">\r\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    </div>\r\n    }\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</div>\r\n", styles: [".action-item{display:flex;justify-content:space-between;height:100%;align-items:center;column-gap:10px;padding:7px;background-color:var(--sapTile_Background, #fff);cursor:pointer;box-shadow:var(--sapContent_Shadow0, 0 0 0 .0625rem rgba(0, 0, 0, .1), 0 .125rem .5rem 0 rgba(0, 0, 0, .1));border-radius:var(--sapElement_BorderCornerRadius, .25rem);border:.0625rem solid var(--sapTile_BorderColor, transparent)}.action-item:hover{background-color:var(--sapBackgroundColor);border-color:var(--sapTile_Interactive_BorderColor)}.action-item fd-icon{color:var(--sapLinkColor, #0a6ed1);font-size:1.3rem;line-height:0}.action-item.s .fd-tile__title{font-size:var(--sapFontHeader6Size)}.action-item.s .fd-tile__subtitle{font-size:var(--sapFontSmallSize)}.action-item-edit-mode h1,.action-item-edit-mode h2{opacity:.3}.action-item-edit-mode .buttons{display:flex;column-gap:2px}.action-item-edit-mode .buttons button{display:flex}h1{text-decoration:none;color:var(--sapLinkColor, #0a6ed1);text-shadow:var(--sapContent_TextShadow, 0 0 .125rem #fff)}\n"] }]
+        }] });
+
+class ActionsLinkComponent extends BaseComponent {
+    constructor(_cdr) {
+        super();
+        this._cdr = _cdr;
+        this._class = '';
+        /**
+         *
+         */
+        this.isMobile = getDeviceIsMobile();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.hide = this.actionsLink?.length === 0;
+        this._class = 's';
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const { actionsLink } = changes;
+        if (actionsLink && !actionsLink.firstChange) {
+            this.hide = actionsLink.currentValue?.length === 0;
+            this._cdr.detectChanges();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsLinkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ActionsLinkComponent, 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) {\r\n<bt-action-item\r\n    cdkDrag\r\n    [data]=\"actionItem\"\r\n    [edit]=\"edit\"\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>\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.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: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-actions-link', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@for (actionItem of actionsLink; track actionItem) {\r\n<bt-action-item\r\n    cdkDrag\r\n    [data]=\"actionItem\"\r\n    [edit]=\"edit\"\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>\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"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { hide: [{
+                type: HostBinding,
+                args: ['class.hide']
+            }], actionsLink: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }], _class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class TileRendererDirective extends BaseDirective {
+    constructor(_cdr, _portalService, _vcr, _injector, _el) {
+        super(_el);
+        this._cdr = _cdr;
+        this._portalService = _portalService;
+        this._vcr = _vcr;
+        this._injector = _injector;
+        this._el = _el;
+        this.hideClick = new EventEmitter();
+        this.renameClick = new EventEmitter();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (!this.component) {
+            return;
+        }
+        const { Module, ModuleFileName, Name, Selector } = this.component;
+        this._portalService
+            .getComponent(Module, ModuleFileName, Name, Selector, this._injector)
+            .pipe(takeUntil(this._onDestroy$))
+            .subscribe((componentRef) => {
+            const instance = componentRef.instance;
+            instance.data = this.data;
+            instance.edit = this.edit;
+            instance.deviceSize = this.deviceSize;
+            instance.setToStorage = this.setToStorage;
+            instance.listMode = this.listMode;
+            instance.navigateBackOnClick = this.navigateBackOnClick;
+            instance.hideClick?.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
+                this.hideClick.emit();
+            });
+            instance.renameClick?.pipe(takeUntil(this._onDestroy$)).subscribe(() => this.renameClick.emit());
+            this._vcr.insert(componentRef.hostView);
+            this._tileRef = componentRef;
+            // this._cdr.detectChanges();
+        });
+    }
+    ngOnChanges(changes) {
+        const { edit } = changes;
+        if (edit && !edit.firstChange) {
+            this._tileRef.instance.setEditHome(edit.currentValue);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this._tileRef) {
+            this._tileRef.destroy();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileRendererDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PortalService }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TileRendererDirective, selector: "[tileRenderer]", inputs: { component: "component", data: "data", edit: "edit", deviceSize: "deviceSize", setToStorage: "setToStorage", listMode: "listMode", navigateBackOnClick: "navigateBackOnClick" }, outputs: { hideClick: "hideClick", renameClick: "renameClick" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileRendererDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tileRenderer]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.PortalService }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { component: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }], setToStorage: [{
+                type: Input
+            }], listMode: [{
+                type: Input
+            }], navigateBackOnClick: [{
+                type: Input
+            }], hideClick: [{
+                type: Output
+            }], renameClick: [{
+                type: Output
+            }] } });
+
+class TilesViewerGroupComponent extends BaseComponent {
+    constructor(_el) {
+        super();
+        this._el = _el;
+        this.tilesDropped = new EventEmitter();
+        this.hideAppTileClick = new EventEmitter();
+        this.renameAppTileClick = new EventEmitter();
+        this.toggleGroup = new EventEmitter();
+        this.resetGroup = new EventEmitter();
+        this.deleteGroup = new EventEmitter();
+        this.marginRightTile = null;
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.deviceSize === 's') {
+            const t = document.body.clientWidth % 154;
+            this.marginRightTile = t / 3;
+        }
+    }
+    onDrop(appTileGroup, event) {
+        if (!this.edit || appTileGroup.Locked) {
+            return;
+        }
+        this.tilesDropped.emit({ appTileGroup, event });
+    }
+    onAppTileHideClick(appTile) {
+        this.hideAppTileClick.emit(appTile);
+    }
+    onAppTileRenameClick(appTile) {
+        this.renameAppTileClick.emit(appTile);
+    }
+    onDelete(appTileGroup) {
+        this.deleteGroup.emit(appTileGroup);
+    }
+    onToggleShowHide(appTileGroup) {
+        this.toggleGroup.emit(appTileGroup);
+    }
+    onReset(appTileGroup) {
+        this.resetGroup.emit(appTileGroup);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesViewerGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: { appTileGroup: "appTileGroup", stackContent: "stackContent", edit: "edit", rtl: "rtl", isAppTileSubGroup: "isAppTileSubGroup", deviceSize: "deviceSize" }, outputs: { tilesDropped: "tilesDropped", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel\r\n    [fixed]=\"true\"\r\n    [attr.editHome]=\"edit\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!edit || !stackContent\"\r\n    [class.empty-tiles-group]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n>\r\n    @if (edit || stackContent || isAppTileSubGroup) {\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-head>\r\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</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 [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\r\n            fd-panel-content\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                    [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    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<bt-actions-link\r\n    [class.actions-link-edit-home]=\"edit\"\r\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\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@for (appTileSubGroup of appTileGroup.$Children; track appTileSubGroup) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\r\n    [edit]=\"edit\"\r\n    [rtl]=\"rtl\"\r\n    [stackContent]=\"stackContent\"\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}fd-layout-panel{box-shadow:none;border-radius:0!important}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 fd-layout-panel-body:not(.small-size){margin-top:1rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{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}fd-layout-panel-body.small-size .tile-wrapper{display:grid;grid-template-columns:154px 154px;gap:1rem}fd-layout-panel-body.small-size .tile-wrapper .isdouble{grid-column-start:1;grid-column-end:3}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.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.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", "title", "label", "ariaLive"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1$2.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: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i9.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "component", type: i1$3.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i5.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit", "deviceSize"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "edit", "deviceSize", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesViewerGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-layout-panel\r\n    [fixed]=\"true\"\r\n    [attr.editHome]=\"edit\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!edit || !stackContent\"\r\n    [class.empty-tiles-group]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n>\r\n    @if (edit || stackContent || isAppTileSubGroup) {\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-head>\r\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</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 [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\r\n            fd-panel-content\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                    [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    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<bt-actions-link\r\n    [class.actions-link-edit-home]=\"edit\"\r\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\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@for (appTileSubGroup of appTileGroup.$Children; track appTileSubGroup) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\r\n    [edit]=\"edit\"\r\n    [rtl]=\"rtl\"\r\n    [stackContent]=\"stackContent\"\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}fd-layout-panel{box-shadow:none;border-radius:0!important}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 fd-layout-panel-body:not(.small-size){margin-top:1rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{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}fd-layout-panel-body.small-size .tile-wrapper{display:grid;grid-template-columns:154px 154px;gap:1rem}fd-layout-panel-body.small-size .tile-wrapper .isdouble{grid-column-start:1;grid-column-end:3}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { appTileGroup: [{
+                type: Input
+            }], stackContent: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], rtl: [{
+                type: Input
+            }], isAppTileSubGroup: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }], tilesDropped: [{
+                type: Output
+            }], hideAppTileClick: [{
+                type: Output
+            }], renameAppTileClick: [{
+                type: Output
+            }], toggleGroup: [{
+                type: Output
+            }], resetGroup: [{
+                type: Output
+            }], deleteGroup: [{
+                type: Output
+            }] } });
+
+class EmptyListDirective {
+    set emptyList(list) {
+        if (!list || (!list.length && !this.hasView)) {
+            const _view = this.viewContainer.createEmbeddedView(this.templateRef);
+            this.setNoData(_view);
+            this.hasView = true;
+        }
+        else if (list && list.length > 0 && this.hasView) {
+            this.viewContainer.clear();
+            this.hasView = false;
+        }
+    }
+    constructor(templateRef, viewContainer, bbbPipe) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.bbbPipe = bbbPipe;
+        this.hasView = false;
+    }
+    setNoData(view) {
+        view.rootNodes[0].innerHTML = this.bbbPipe.transform('NoData');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmptyListDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: EmptyListDirective, selector: "[emptyList]", inputs: { emptyList: "emptyList" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmptyListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emptyList]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1.BbbTranslatePipe }], propDecorators: { emptyList: [{
+                type: Input
+            }] } });
+
+class AppFinderAppListComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.pinClick = new EventEmitter();
+        this.appTileGroupsPinChange = new EventEmitter();
+    }
+    onPinTap(app) {
+        this.pinClick.emit(app);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFinderAppListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppFinderAppListComponent, 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<fd-fixed-card-layout [disableDragDrop]=\"true\">\r\n    @for (app of appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }; track app; let i = $index) {\r\n    <fd-card *fdCardDef=\"i\">\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\">\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</fd-fixed-card-layout>\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$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "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"], exportAs: ["fd-button"] }, { kind: "component", type: i3$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: i3$2.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i3$2.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i3$2.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i3$2.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i3$2.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i4$2.FixedCardLayoutComponent, selector: "fd-fixed-card-layout", inputs: ["disableDragDrop", "dragStartDelay", "cardMinimumWidth", "columnsWidthConfig", "maxColumns"], outputs: ["layoutChange", "cardDraggedDropped"] }, { kind: "directive", type: i4$2.CardDefinitionDirective, selector: "[fdCardDef]", inputs: ["fdCardDef"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i1.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: EmptyListDirective, selector: "[emptyList]", inputs: ["emptyList"] }, { kind: "pipe", type: i1.FilterStringPipe, name: "filterStr" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFinderAppListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-app-finder-app-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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<fd-fixed-card-layout [disableDragDrop]=\"true\">\r\n    @for (app of appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }; track app; let i = $index) {\r\n    <fd-card *fdCardDef=\"i\">\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\">\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</fd-fixed-card-layout>\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"] }]
+        }], propDecorators: { appGroup: [{
+                type: Input
+            }], mobile: [{
+                type: Input
+            }], searchTerm: [{
+                type: Input
+            }], pinnedAppInAppTileGroups: [{
+                type: Input
+            }], pinClick: [{
+                type: Output
+            }], appTileGroupsPinChange: [{
+                type: Output
+            }] } });
+
+class AppFinderGroupComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.selectedIdChange = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        if (changes.appGroups && !changes.appGroups.firstChange) {
+            const appGroups = changes.appGroups.currentValue;
+            if (appGroups && appGroups.length > 0 && !this.selectedId) {
+                this.selectedIdChange.emit(appGroups[0].Id);
+            }
+        }
+    }
+    OnMenuGroupClick(group) {
+        this.selectedIdChange.emit(group.Id);
+    }
+    OnGroupClick(group) {
+        this.selectedIdChange.emit(group.Id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFinderGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppFinderGroupComponent, selector: "bt-app-finder-group", inputs: { appGroups: "appGroups", selectedId: "selectedId", listMode: "listMode" }, outputs: { selectedIdChange: "selectedIdChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (listMode) {\r\n<div class=\"app-groups\">\r\n    <ul fd-list [selection]=\"true\">\r\n        @for (group of appGroups; track group; let i = $index) {\r\n        <li fd-list-item [selected]=\"group.Id === selectedId\" (click)=\"OnGroupClick(group)\">\r\n            <span fd-list-title>\r\n                {{ group.Title }}\r\n            </span>\r\n        </li>\r\n        }\r\n    </ul>\r\n</div>\r\n} @else { @for (group of appGroups; track group; let i = $index) {\r\n<li fd-menu-item [selected]=\"group.Id === selectedId\">\r\n    <a fd-menu-interactive (click)=\"OnMenuGroupClick(group)\">\r\n        <span fd-menu-title>\r\n            {{ group.Title }}\r\n        </span>\r\n    </a>\r\n</li>\r\n} }\r\n", styles: [".app-groups{width:25vw;border-left:.0625rem solid var(--sapGroup_TitleBorderColor, #d9d9d9)}\n"], dependencies: [{ kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFinderGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-app-finder-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (listMode) {\r\n<div class=\"app-groups\">\r\n    <ul fd-list [selection]=\"true\">\r\n        @for (group of appGroups; track group; let i = $index) {\r\n        <li fd-list-item [selected]=\"group.Id === selectedId\" (click)=\"OnGroupClick(group)\">\r\n            <span fd-list-title>\r\n                {{ group.Title }}\r\n            </span>\r\n        </li>\r\n        }\r\n    </ul>\r\n</div>\r\n} @else { @for (group of appGroups; track group; let i = $index) {\r\n<li fd-menu-item [selected]=\"group.Id === selectedId\">\r\n    <a fd-menu-interactive (click)=\"OnMenuGroupClick(group)\">\r\n        <span fd-menu-title>\r\n            {{ group.Title }}\r\n        </span>\r\n    </a>\r\n</li>\r\n} }\r\n", styles: [".app-groups{width:25vw;border-left:.0625rem solid var(--sapGroup_TitleBorderColor, #d9d9d9)}\n"] }]
+        }], propDecorators: { appGroups: [{
+                type: Input
+            }], selectedId: [{
+                type: Input
+            }], listMode: [{
+                type: Input
+            }], selectedIdChange: [{
+                type: Output
+            }] } });
+
+class AppFinderComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.contentDensity = 'compact';
+        this.pinClick = new EventEmitter();
+        this.selectedAppGroupIdChange = new EventEmitter();
+    }
+    onSearchSubmit() {
+        this.searchTerm = this.searchTerm2;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFinderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppFinderComponent, 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\" [style.height]=\"contentHeight\">\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}\n"], dependencies: [{ kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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"], exportAs: ["fd-button"] }, { kind: "component", type: i6$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.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i5.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i6.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: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFinderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-app-finder', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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\" [style.height]=\"contentHeight\">\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}\n"] }]
+        }], propDecorators: { appGroups: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }], sideContentSize: [{
+                type: Input
+            }], selectedAppGroup: [{
+                type: Input
+            }], selectedAppGroupId: [{
+                type: Input
+            }], mobile: [{
+                type: Input
+            }], contentDensity: [{
+                type: Input
+            }], contentHeight: [{
+                type: Input
+            }], pinnedAppInAppTileGroups: [{
+                type: Input
+            }], pinClick: [{
+                type: Output
+            }], selectedAppGroupIdChange: [{
+                type: Output
+            }] } });
+
+class ChangeAppTileComponent extends BaseComponent {
+    constructor(fb, dialogRef, bbbPipe) {
+        super();
+        this.fb = fb;
+        this.dialogRef = dialogRef;
+        this.bbbPipe = bbbPipe;
+        this.title = dialogRef.data.TileTitle;
+        this.subtitle = dialogRef.data.Subtitle;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.appGroupForm = this.fb.group({
+            title: new UntypedFormControl(this.title, [Validators.required]),
+            subtitle: new UntypedFormControl(this.subtitle)
+        });
+        this.RequiredText = this.bbbPipe
+            .transform(')AlertFieldIsMandatory')
+            .replace('{0}', this.bbbPipe.transform('Title'));
+    }
+    onSave() {
+        this.submitted = true;
+        if (this.appGroupForm.valid) {
+            this.dialogRef.close({ title: this.title, subtitle: this.subtitle });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChangeAppTileComponent, deps: [{ token: i1$6.UntypedFormBuilder }, { token: i1$1.DialogRef }, { token: i1.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ChangeAppTileComponent, 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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i5$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i5$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i5$1.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i5$1.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: i6$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: i7$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i7$1.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i7$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i7$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i7$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i9$1.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: () => [{ type: i1$6.UntypedFormBuilder }, { type: i1$1.DialogRef }, { type: i1.BbbTranslatePipe }] });
+
+class TilesViewerService {
+    constructor(dialogService, tilesService) {
+        this.dialogService = dialogService;
+        this.tilesService = tilesService;
+        this._onDestroy$ = new Subject();
+        this._hideTileSource = new Subject();
+        this._updateAppTileSettingSource = new Subject();
+        this._deleteGroupSource = new Subject();
+        this._loadAppGroupSource = new Subject();
+        this._saveAppGroupOrdersSource = new Subject();
+        this.saveAppGroupOrders$ = this._saveAppGroupOrdersSource.asObservable();
+        this._resetAppGroupSource = new Subject();
+        this.resetAppGroup$ = this._resetAppGroupSource.asObservable();
+        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._loadAppGroupSource
+            .asObservable()
+            .pipe(takeUntil(this._onDestroy$))
+            .subscribe((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()))
+            .subscribe();
+        this.updateAppTileSetting$
+            .pipe(takeUntil(this._onDestroy$), tap(() => this.setLoading()), exhaustMap((appTile) => this.tilesService.changeAppTileSetting(appTile).pipe(finalize(() => {
+            this.setLoaded();
+        }))), finalize(() => {
+            this.setLoaded();
+        }))
+            .subscribe();
+        this.deleteAppGroup$
+            .pipe(tap(() => this.setLoading()), takeUntil(this._onDestroy$), exhaustMap((appGroup) => this.tilesService.deleteAppGroup(appGroup).pipe(finalize(() => {
+            this.setLoaded();
+        }))))
+            .subscribe();
+        this.resetAppGroup$
+            .pipe(takeUntil(this._onDestroy$), tap(() => this.setLoading()), exhaustMap((appGroup) => this.tilesService.resetAppGroupSetting(appGroup).pipe(finalize(() => {
+            this.setLoaded();
+        }))), finalize(() => {
+            this.setLoaded();
+        }))
+            .subscribe();
+        this.hideAppGroup$
+            .pipe(takeUntil(this._onDestroy$), tap(() => this.setLoading()), exhaustMap((appGroup) => this.tilesService.toggleAppGroupSettingVisible(appGroup).pipe(finalize(() => {
+            this.setLoaded();
+        }))), finalize(() => {
+            this.setLoaded();
+        }))
+            .subscribe();
+        this.saveAppGroupOrders$
+            .pipe(takeUntil(this._onDestroy$), tap(() => this.setLoading()), exhaustMap((appGroups) => this.tilesService.saveAppGroupOrders(appGroups).pipe(finalize(() => {
+            this.setLoaded();
+        }))), finalize(() => {
+            this.setLoaded();
+        }))
+            .subscribe();
+    }
+    get selectedAppGroupId() {
+        return localStorage.getItem('selectedTab') ?? '';
+    }
+    set selectedAppGroupId(groupId) {
+        localStorage.setItem('selectedTab', groupId);
+    }
+    setSelectedTab(group) {
+        this.selectedAppGroupId = group.Id;
+    }
+    loadAppGroup(group) {
+        this._loadAppGroupSource.next(group);
+    }
+    ngOnDestroy() {
+        this._onDestroy$.next();
+    }
+    openRenameForm(appTile) {
+        const newGroupDialogRef = this.dialogService.open(ChangeAppTileComponent, {
+            data: appTile,
+            verticalPadding: true,
+            responsivePadding: true
+        });
+        newGroupDialogRef.afterClosed.subscribe((setting) => {
+            if (setting) {
+                const newAppTile = { ...appTile };
+                newAppTile.Title = newAppTile.TileTitle = setting.title;
+                newAppTile.Subtitle = setting.subtitle;
+                this._updateAppTileSettingSource.next(newAppTile);
+            }
+        });
+    }
+    resetAppGroup(appGroup) {
+        this._resetAppGroupSource.next(appGroup);
+    }
+    toggleAppGroupSettingVisible(appGroup) {
+        this._hideAppGroupSource.next(appGroup);
+    }
+    deleteAppGroup(appGroup) {
+        this._deleteGroupSource.next(appGroup);
+    }
+    hideTile(appTile) {
+        this._hideTileSource.next(appTile);
+    }
+    saveAppGroupOrders(appGroups) {
+        this._saveAppGroupOrdersSource.next(appGroups);
+    }
+    setLoaded() {
+        this._viewLoadingSource.next(false);
+    }
+    setLoading() {
+        this._viewLoadingSource.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesViewerService, deps: [{ token: i1$1.DialogService }, { token: TilesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesViewerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesViewerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.DialogService }, { type: TilesService }] });
+
+class TilesViewerComponent extends BaseComponent {
+    constructor(_cdr, _saveScrollPosition) {
+        super();
+        this._cdr = _cdr;
+        this._saveScrollPosition = _saveScrollPosition;
+        this.pageContentClass = true;
+        this.stackContentChange = new EventEmitter();
+        this.closeEditHome = new EventEmitter();
+        this.save = new EventEmitter();
+        this.listDropped = new EventEmitter();
+        this.tabChanged = new EventEmitter();
+        this.toggleGroup = new EventEmitter();
+        this.resetGroup = new EventEmitter();
+        this.deleteGroup = new EventEmitter();
+        this.hideAppTileClick = new EventEmitter();
+        this.renameAppTileClick = new EventEmitter();
+        this.tilesDropped = new EventEmitter();
+        this._rtl = BarsaApi.LoginFormData.IsRtl;
+        this.color = 'informative';
+        this.id = 'tilesviewer';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.contentPageRef) {
+            const elDom = this.contentPageRef.nativeElement;
+            elDom.addEventListener('scroll', () => {
+                this._saveScrollPosition.setScrollPosition(this.id, elDom.scrollTop);
+            });
+            this._tilesIntersection = fromIntersectionObserver(elDom, {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0
+            }, 0, false)
+                .pipe(takeUntil$1(this._onDestroy$))
+                .subscribe((e) => {
+                this._onInView(e);
+            });
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.tabListComponent) {
+            this.tabListComponent._disableScrollSpy = true;
+        }
+    }
+    onSelectedTabChange(selectedTab) {
+        let firstSelected = false;
+        if (!this.selectedTabTitle) {
+            firstSelected = true;
+        }
+        const selectedTabTitle = selectedTab.label || '';
+        this.selectedTabTitle = selectedTabTitle;
+        if (firstSelected) {
+            const tab = this.appTileGroups.find((c) => c.Id === this.defaultTab);
+            if (tab) {
+                if (!this.tabListComponent) {
+                    setTimeout(() => {
+                        this._selectTab(tab.Id);
+                    });
+                }
+                else {
+                    this._selectTab(tab.Id);
+                }
+                return;
+            }
+        }
+        setTimeout(() => {
+            this.tabChanged.emit({
+                firstSelected,
+                selectedTabTitle,
+                tabPanels: this.tabListComponent.children(),
+                appTileGroups: this.appTileGroups,
+                tabbarComponent: this.tabListComponent
+            });
+        });
+    }
+    onDropGroup(appTileGroups, event) {
+        if (!this.edit) {
+            return;
+        }
+        this.listDropped.emit({ appTileGroups, event });
+    }
+    onDrop($event) {
+        this.tilesDropped.emit($event);
+    }
+    onStackContentChanged(checked) {
+        this.stackContentChange.emit(checked);
+    }
+    onExitEditHome(appGroups) {
+        this.save.emit(appGroups);
+    }
+    onCloseEditHome() {
+        this.closeEditHome.emit();
+    }
+    _trackById(index, item) {
+        return item ? item.Id : index;
+    }
+    _selectTab(tabId) {
+        if (this.tabListComponent) {
+            this.tabListComponent.selectTab(tabId);
+        }
+    }
+    _onInView(e) {
+        this.formVisibilityStatus = e;
+        if (this.formVisibilityStatus === IntersectionStatus.Visible) {
+            const scrollTop = this._saveScrollPosition.getScrollPosition(this.id);
+            // window.scrollTo({ top: scrollTop, behavior: 'smooth' });
+            this.contentPageRef.nativeElement.scrollTop = scrollTop;
+            // this._cdr.detectChanges();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesViewerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SaveScrollPositionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", rtl: "rtl", defaultTab: "defaultTab", stackContent: "stackContent", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", hideTabs: "hideTabs", 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", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: IconTabBarComponent, descendants: true }, { propertyName: "contentPageRef", first: true, predicate: ["contentPage"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page size=\"large\" [autoResponsive]=\"true\" [class.hideTabs]=\"hideTabs\">\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        (iconTabSelected)=\"onSelectedTabChange($event)\"\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]=\"color\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\" cdkScrollable>\r\n                <bt-tiles-viewer-group\r\n                    [class]=\"deviceSize\"\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false || hideTabs\"\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                ></bt-tiles-viewer-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 ::ng-deep .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}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page article{height:calc(100vh - 44px)!important}:host ::ng-deep .footer-spacer{height:0}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}fd-dynamic-page.hideTabs ::ng-deep fdp-icon-tab-bar-text-type{display:none}@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: i4$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4$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"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i5$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i5$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i5$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i5$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i5$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i5$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i7$2.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "component", type: i5.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i9$2.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i9$2.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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\" [class.hideTabs]=\"hideTabs\">\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        (iconTabSelected)=\"onSelectedTabChange($event)\"\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]=\"color\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\" cdkScrollable>\r\n                <bt-tiles-viewer-group\r\n                    [class]=\"deviceSize\"\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false || hideTabs\"\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                ></bt-tiles-viewer-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 ::ng-deep .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}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page article{height:calc(100vh - 44px)!important}:host ::ng-deep .footer-spacer{height:0}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}fd-dynamic-page.hideTabs ::ng-deep fdp-icon-tab-bar-text-type{display:none}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SaveScrollPositionService }], propDecorators: { tabListComponent: [{
+                type: ViewChild,
+                args: [IconTabBarComponent]
+            }], contentPageRef: [{
+                type: ViewChild,
+                args: ['contentPage', { static: true, read: ElementRef }]
+            }], pageContentClass: [{
+                type: HostBinding,
+                args: ['class.page-content']
+            }], appTileGroups: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], rtl: [{
+                type: Input
+            }], defaultTab: [{
+                type: Input
+            }], stackContent: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }], selectedAppGroupId: [{
+                type: Input
+            }], hideTabs: [{
+                type: Input
+            }], DynamicComponents: [{
+                type: Input
+            }], stackContentChange: [{
+                type: Output
+            }], closeEditHome: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], listDropped: [{
+                type: Output
+            }], tabChanged: [{
+                type: Output
+            }], toggleGroup: [{
+                type: Output
+            }], resetGroup: [{
+                type: Output
+            }], deleteGroup: [{
+                type: Output
+            }], hideAppTileClick: [{
+                type: Output
+            }], renameAppTileClick: [{
+                type: Output
+            }], tilesDropped: [{
+                type: Output
+            }], _rtl: [{
+                type: HostBinding,
+                args: ['attr.rtl']
+            }] } });
+
+class TilesViewerContainerComponent extends BaseComponent {
+    constructor(_portalService, _tilesService, _tilesViewerService) {
+        super();
+        this._portalService = _portalService;
+        this._tilesService = _tilesService;
+        this._tilesViewerService = _tilesViewerService;
+        this.changedOrder = false;
+        this.userStackContent = false;
+        this.initialStackContentValue = false;
+        this.firstSelected = false;
+        this.stackContent = false;
+        this._activatedRoute = inject(ActivatedRoute);
+        this._router = inject(Router);
+        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();
+        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._tilesService.loadAppTileGroups(c);
+                });
+            }
+        });
+        // setTimeout(() => {
+        //     this._router.navigate(
+        //         ['home', { outlets: { dialog: ['appgroupdialog', '_2tevxXK-rtcFnX_ZsfG1LX_VvR0K81'] } }],
+        //         { relativeTo: this._activatedRoute }
+        //     );
+        // }, 3000);
+    }
+    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());
+                    }
+                }
+            }
+        }
+        if (!appTileGroup) {
+            appTileGroup = appGroups.find((c) => c.navigatorTitle === selectedTabTitle);
+        }
+        if (appTileGroup) {
+            this._tilesViewerService.setSelectedTab(appTileGroup);
+            this._tilesViewerService.loadAppGroup(appTileGroup);
+        }
+    }
+    onDropGroup(e) {
+        const { event, appTileGroups: appGroups } = e;
+        moveItemInArray(appGroups, event.previousIndex, event.currentIndex);
+        this.changedOrder = true;
+        // this.saveOrderAppTiles(allApps, 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);
+            }
+        }
+    }
+    onStackContentChanged(checked) {
+        this.userStackContent = checked;
+    }
+    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);
+    }
+    onCloseEditHome() {
+        this._setEditHome(false);
+    }
+    onDelete(appTileGroup) {
+        this._tilesViewerService.deleteAppGroup(appTileGroup);
+    }
+    onToggleShowHide(appTileGroup) {
+        this._tilesViewerService.toggleAppGroupSettingVisible(appTileGroup);
+    }
+    onReset(appTileGroup) {
+        this._tilesViewerService.resetAppGroup(appTileGroup);
+    }
+    onHideAppTile(appTile) {
+        this._tilesViewerService.hideTile(appTile);
+    }
+    onRenameAppTile(appTile) {
+        this._tilesViewerService.openRenameForm(appTile);
+    }
+    _setEditHome(val) {
+        this._tilesService.setEditHome(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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesViewerContainerComponent, deps: [{ token: i1.PortalService }, { token: TilesService }, { token: TilesViewerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TilesViewerContainerComponent, selector: "bt-tiles-viewer-container", providers: [TilesViewerService], usesInheritance: true, ngImport: i0, template: "@if (appTileGroups$ | async; as appTileGroups) { @if (appTileGroups) {\r\n<bt-tiles-viewer\r\n    [class.edit]=\"(edit$ | async)!!\"\r\n    [appTileGroups]=\"appTileGroups\"\r\n    [loading]=\"(viewLoading$ | async)!!\"\r\n    [hideTabs]=\"settings?.HideTabs\"\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} @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: "component", type: i6.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i6.NoDataComponent, selector: "bsu-no-data", inputs: ["simple"] }, { kind: "component", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: ["appTileGroups", "loading", "edit", "rtl", "defaultTab", "stackContent", "deviceSize", "selectedAppGroupId", "hideTabs", "DynamicComponents"], outputs: ["stackContentChange", "closeEditHome", "save", "listDropped", "tabChanged", "toggleGroup", "resetGroup", "deleteGroup", "hideAppTileClick", "renameAppTileClick", "tilesDropped"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TilesViewerContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-tiles-viewer-container', providers: [TilesViewerService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (appTileGroups$ | async; as appTileGroups) { @if (appTileGroups) {\r\n<bt-tiles-viewer\r\n    [class.edit]=\"(edit$ | async)!!\"\r\n    [appTileGroups]=\"appTileGroups\"\r\n    [loading]=\"(viewLoading$ | async)!!\"\r\n    [hideTabs]=\"settings?.HideTabs\"\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} @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: () => [{ type: i1.PortalService }, { type: TilesService }, { type: TilesViewerService }] });
+
+class MicroTileChartBulletComponent extends BaseBtTileComponent {
+    ngOnInit() {
+        super.ngOnInit();
+        this.target = this.settings.Target;
+        this.value = this.settings.Value;
+        this.range = this.settings.Range;
+        this.forecast = this.settings.Forecast;
+        this.suffix = this.settings.Suffix;
+        this.separatorLines = this.settings.SeparatorLines;
+        this.isDelta = this.settings.IsDelta;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MicroTileChartBulletComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MicroTileChartBulletComponent, 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$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$2.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", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+class NewsTileComponent extends BaseBtTileComponent {
+    constructor() {
+        super(...arguments);
+        this.isStop = false;
+    }
+    get twoColumn() {
+        return this.footer.TwoColumn;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const slides = this.settings.Report.MoDataList;
+        if (slides.length) {
+            this._updateTile(slides[0]);
+            interval(5000)
+                .pipe(takeUntil(this._onDestroy$), tap(() => {
+                if (!this.isStop) {
+                    this.carouselComponent.next();
+                }
+            }))
+                .subscribe();
+        }
+        this.slides = slides;
+    }
+    slideChange(activeSlide) {
+        const currentSlide = activeSlide.activeItems[0].value;
+        this._updateTile(currentSlide);
+    }
+    _updateTile(newsMo) {
+        this.activeNews = newsMo;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewsTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NewsTileComponent, 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                    />\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 button fd-icon{z-index:4;min-width:1.5rem!important;font-size:1.5rem!important;color:#fff!important}: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"], exportAs: ["fd-button"] }, { kind: "component", type: i2$3.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$3.CarouselItemComponent, selector: "fd-carousel-item", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "loading", "title", "initialHeight", "initialWidth", "value"] }, { kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$3.TileFooterTextDirective, selector: "[fdTileFooterText], [fd-tile-footer-text]" }, { kind: "directive", type: i1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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                    />\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 button fd-icon{z-index:4;min-width:1.5rem!important;font-size:1.5rem!important;color:#fff!important}: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]
+            }] } });
+
+class MicroTileChartComparisonComponent extends BaseBtTileComponent {
+    constructor() {
+        super(...arguments);
+        this.chartData = {
+            data: [
+                { value: 5, color: '#de890d', label: 'تاخیر' },
+                {
+                    value: 45,
+                    color: '#dc0d0e',
+                    label: 'هم اکنون'
+                },
+                { value: 100, color: '#3fa45b', label: 'به موقع' }
+            ],
+            suffix: '%'
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MicroTileChartComparisonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MicroTileChartComparisonComponent, 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$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$2.MicroChartComparisonComponent, selector: "be-micro-chart-comparison", inputs: ["chartInstanceId", "parentMoId", "size"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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" }]
+        }] });
+
+class MicroTileChartStackbarComponent extends BaseBtTileComponent {
+    constructor() {
+        super(...arguments);
+        this.charData = {
+            data: [
+                { value: 20, color: '#3fa45b' },
+                { value: 30, color: '#e9730c' },
+                { value: 50, color: '#dc0d0e' }
+            ],
+            suffix: '%'
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MicroTileChartStackbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MicroTileChartStackbarComponent, 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$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$2.MicroChartStackbarComponent, selector: "be-micro-chart-stackbar", inputs: ["chartInstanceId", "parentMoId"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+class MicroTileChartLineComponent extends BaseBtTileComponent {
+    constructor() {
+        super(...arguments);
+        this.chartData = {
+            data: [
+                { value: 2, label: '1 آبان' },
+                { value: 4, label: 'آبان 20' },
+                {
+                    value: 3,
+                    label: 'آبان 27'
+                },
+                { value: 5, label: 'آبان 30' }
+            ],
+            color: '',
+            suffix: 'M'
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MicroTileChartLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MicroTileChartLineComponent, 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$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$2.MicroChartLineComponent, selector: "be-micro-chart-line", inputs: ["chartInstanceId", "parentMoId"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+class MicroTileChartCircularComponent extends BaseBtTileComponent {
+    constructor() {
+        super(...arguments);
+        this.chartData = 70;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MicroTileChartCircularComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MicroTileChartCircularComponent, 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$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$2.MicroChartCircularComponent, selector: "be-micro-chart-circular", inputs: ["chartInstanceId", "parentMoId"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+class MicroTileChartAreaComponent extends BaseBtTileComponent {
+    constructor() {
+        super(...arguments);
+        this.chartData = {
+            areas: [
+                { data: [2.5, 2.5, 2.5, 2.5], color: '#3fa45b' },
+                {
+                    data: [2, 2, 2, 2],
+                    color: '#e9730c'
+                },
+                { data: [1.5, 1.5, 1.5, 1.5], color: '#dc0d0e' }
+            ],
+            line: {
+                data: [
+                    { value: 2, label: 'june 1' },
+                    { value: 4, label: 'june 20' },
+                    { value: 3, label: 'june 27' },
+                    { value: 5, label: 'june 30' }
+                ],
+                suffix: 'M'
+            },
+            firstValueColor: '#3fa45b',
+            lastValueColor: '#dc0d0e'
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MicroTileChartAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MicroTileChartAreaComponent, 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$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$2.MicroChartAreaComponent, selector: "be-micro-chart-area", inputs: ["chartInstanceId", "parentMoId", "size", "chartData"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }] });
+
+class MicroTileChartBarComponent extends BaseBtTileComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MicroTileChartBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MicroTileChartBarComponent, 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$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$2.MicroChartBarComponent, selector: "be-micro-chart-bar", inputs: ["chartInstanceId", "parentMoId", "size", "extraData"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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(fb, dialogRef, bbbPipe) {
+        super();
+        this.fb = fb;
+        this.dialogRef = dialogRef;
+        this.bbbPipe = bbbPipe;
+    }
+    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: "18.2.13", ngImport: i0, type: CreateAppGroupComponent, deps: [{ token: i1$6.UntypedFormBuilder }, { token: i1$1.DialogRef }, { token: i1.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CreateAppGroupComponent, 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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i5$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i5$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i5$1.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i5$1.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: i6$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: i7$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i7$1.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i7$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i7$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i7$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i9$1.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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" }]
+        }], ctorParameters: () => [{ type: i1$6.UntypedFormBuilder }, { type: i1$1.DialogRef }, { type: i1.BbbTranslatePipe }] });
+
+class PinTileComponent extends BaseComponent {
+    constructor(_dialogService, _dialogRef, bbbPipe) {
+        super();
+        this._dialogService = _dialogService;
+        this._dialogRef = _dialogRef;
+        this.bbbPipe = bbbPipe;
+        this.newGroupText = BarsaApi.LoginFormData.IsRtl
+            ? this.bbbPipe.transform('Groups') + ' ' + this.bbbPipe.transform('New')
+            : this.bbbPipe.transform('New') + ' ' + this.bbbPipe.transform('Groups');
+        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(() => {
+            // if (result) {
+            //   this.dialogRef.loading(true);
+            //   this.tilesService
+            //     .createAppGroup(result)
+            //     .pipe(
+            //       takeUntil(this._onDestroy$),
+            //       finalize(() => {
+            //         this.dialogRef.loading(false);
+            //       })
+            //     )
+            //     .subscribe();
+            // }
+        });
+    }
+    _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: "18.2.13", ngImport: i0, type: PinTileComponent, deps: [{ token: i1$1.DialogService }, { token: i1$1.DialogRef }, { token: i1.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PinTileComponent, 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            </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            </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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { 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: i1$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i7$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i7$1.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i7$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i7$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i9$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i9$1.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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            </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            </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: () => [{ type: i1$1.DialogService }, { type: i1$1.DialogRef }, { type: i1.BbbTranslatePipe }], propDecorators: { app: [{
+                type: Input
+            }], appTileGroups: [{
+                type: Input
+            }], mobile: [{
+                type: Input
+            }], pin: [{
+                type: Input
+            }] } });
+
+class AppFinderService {
+    constructor(_portalService, _tileService) {
+        this._portalService = _portalService;
+        this._tileService = _tileService;
+        this._appGroupsSource = new BehaviorSubject([]);
+        this._OnDestroy$ = new Subject();
+        this._selectedAppGroupIdSource = new Subject();
+        this._pinnedAppInAppTileGroupsSource = new BehaviorSubject({});
+        this.loadAppGroups();
+        this.deviceSize$ = this._tileService.deviceSize$;
+        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)));
+    }
+    get deviceSize() {
+        return this._portalService.deviceSize;
+    }
+    get appTileGroups() {
+        return this._tileService.appTileGroups?.MoDataList;
+    }
+    ngOnDestroy() {
+        this._OnDestroy$.next();
+    }
+    loadAppGroups() {
+        this._portalService
+            .ReportExecute('UserAppGroups')
+            .subscribe((allApps) => this._nextAllApps(allApps.MoDataList));
+    }
+    selectAppGroup(appGroupId) {
+        const appGroups = this._appGroupsSource.getValue();
+        const group = appGroups.find((c) => c.Id === appGroupId);
+        if (group) {
+            this._selectedAppGroupIdSource.next(appGroupId);
+            this.loadAppsByAppGroup(appGroups, group);
+        }
+    }
+    loadAppsByAppGroup(appGroups, appGroup) {
+        if (appGroup.Apps) {
+            return;
+        }
+        const reportWrapper = BarsaApi.Bw.RunBlMethod('LoadAppsByAppGroup', appGroup.Id);
+        const moForReport = reportWrapper.Unwrap();
+        appGroup.Apps = appGroup.Apps ?? [];
+        const apps = moForReport.MoDataList;
+        if (apps.length > 0) {
+            const customColumns = Object.keys(apps[0]).filter((c) => c.indexOf('$Caption') > -1 && !c.startsWith('$'));
+            apps.forEach((app) => {
+                customColumns.forEach((column) => {
+                    app.$HasPinned = app.$HasPinned || Number(app[column.split('$Caption')[0]]);
+                });
+            });
+        }
+        appGroup.Apps = [...appGroup.Apps, ...apps];
+        this._nextAllApps(appGroups);
+    }
+    loadPinnedAppInTileGroups(app) {
+        const appId = app.Id;
+        const val = this._pinnedAppInAppTileGroupsSource.getValue();
+        if (val[appId]) {
+            return 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];
+                }
+            });
+        }
+        this._pinnedAppInAppTileGroupsSource.next(val);
+        return val;
+    }
+    pinTileChanged(appTileGroups, app, callback) {
+        this._tileService.pinTileChanged(appTileGroups, app, (settings) => {
+            const val = this._pinnedAppInAppTileGroupsSource.getValue();
+            const appId = app.Id;
+            for (let i = 0; i < appTileGroups.length; i++) {
+                const appTileSetting = settings[i];
+                const appTileGroupSettingId = appTileSetting.UserAppTileGroupSettingId;
+                const appTileGroupId = appTileSetting.AppTileGroupId;
+                if (appTileGroups[i].visible) {
+                    val[appId] = [...val[appId], appTileGroupSettingId, appTileGroupId];
+                }
+                else {
+                    val[appId] = val[appId].filter((c) => c !== appTileGroupSettingId && c !== appTileGroupId);
+                }
+            }
+            this._pinnedAppInAppTileGroupsSource.next({ ...val });
+            callback();
+        });
+    }
+    _nextAllApps(appGroups) {
+        const newAppGroups = appGroups ?? this._appGroupsSource.getValue();
+        this._appGroupsSource.next([...newAppGroups]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFinderService, deps: [{ token: i1.PortalService }, { token: TilesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFinderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFinderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.PortalService }, { type: TilesService }] });
+
+class FormAppFinderComponent extends BaseComponent {
+    constructor(_cdr, _dialogService, _appFinderService, _el, _contentDensityService) {
+        super();
+        this._cdr = _cdr;
+        this._dialogService = _dialogService;
+        this._appFinderService = _appFinderService;
+        this._el = _el;
+        this.isAllSelected = true;
+        this.contentDensity$ = _contentDensityService.contentDensity.asObservable();
+        this.appGroups$ = this._appFinderService.appGroups$;
+        this.selectedAppGroup$ = this._appFinderService.selectedAppGroup$;
+        this.selectedAppGroupId$ = this._appFinderService.selectedAppGroupId$;
+        this.deviceSize$ = this._appFinderService.deviceSize$;
+        this.pinnedAppInAppTileGroups$ = this._appFinderService.pinnedAppInAppTileGroups$;
+        this.mobile$ = this.deviceSize$.pipe(map((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) => {
+            switch (deviceSize) {
+                case 's':
+                    return 'sm';
+                case 'm':
+                    return 'md';
+                case 'l':
+                    return 'lg';
+                case 'xl':
+                    return 'xl';
+                default:
+                    return 'l';
+            }
+        }));
+    }
+    onSelectedAppGroupChange(appGroupId) {
+        this._changeGroup(appGroupId);
+    }
+    onPinClick(app) {
+        const pinnedAppInTileGroups = this._appFinderService.loadPinnedAppInTileGroups(app);
+        const appTileGroups = this._appFinderService.appTileGroups;
+        const deviceSize = this._appFinderService.deviceSize;
+        const mobile = deviceSize === 's';
+        this._dialogService
+            .open(PinTileComponent, {
+            data: { app, pinnedAppInTileGroups, appTileGroups },
+            minWidth: '350px',
+            minHeight: '420px',
+            draggable: false,
+            mobile,
+            resizable: false,
+            verticalPadding: false,
+            backdropClickCloseable: false
+        })
+            .afterClosed.subscribe((result) => {
+            this._appTileGroupsPinChange(result);
+        });
+    }
+    onRefresh() { }
+    async _appTileGroupsPinChange(result) {
+        try {
+            // Will try to ask for permission
+            this._appFinderService.pinTileChanged(result.appTileGroupsPin, result.app, () => {
+                this._cdr.detectChanges();
+            });
+        }
+        catch (err) {
+            // show msg error
+        }
+        finally {
+            // show toast successful
+        }
+    }
+    _changeGroup(appGroupId) {
+        this.isAllSelected = false;
+        this._appFinderService.selectAppGroup(appGroupId);
+        this._cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormAppFinderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DialogService }, { token: AppFinderService }, { token: i0.ElementRef }, { token: i1$1.ContentDensityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormAppFinderComponent, selector: "bt-form-app-finder", usesInheritance: true, ngImport: i0, template: "<bt-app-finder\r\n    [appGroups]=\"(appGroups$ | async)!!\"\r\n    [selectedAppGroupId]=\"(selectedAppGroupId$ | async)!!\"\r\n    [selectedAppGroup]=\"(selectedAppGroup$ | async)!!\"\r\n    [mobile]=\"(mobile$ | async)!!\"\r\n    [sideContentSize]=\"(sideContentSize$ | async)!!\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [contentDensity]=\"(contentDensity$ | async) ?? 'compact'\"\r\n    [pinnedAppInAppTileGroups]=\"(pinnedAppInAppTileGroups$ | async)!!\"\r\n    [contentHeight]=\"contentHeight\"\r\n    (selectedAppGroupIdChange)=\"onSelectedAppGroupChange($event)\"\r\n    (pinClick)=\"onPinClick($event)\"\r\n>\r\n</bt-app-finder>\r\n", styles: [":host{display:block;min-height:100vh}\n"], dependencies: [{ kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "component", type: AppFinderComponent, selector: "bt-app-finder", inputs: ["appGroups", "deviceSize", "sideContentSize", "selectedAppGroup", "selectedAppGroupId", "mobile", "contentDensity", "contentHeight", "pinnedAppInAppTileGroups"], outputs: ["pinClick", "selectedAppGroupIdChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormAppFinderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-form-app-finder', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-app-finder\r\n    [appGroups]=\"(appGroups$ | async)!!\"\r\n    [selectedAppGroupId]=\"(selectedAppGroupId$ | async)!!\"\r\n    [selectedAppGroup]=\"(selectedAppGroup$ | async)!!\"\r\n    [mobile]=\"(mobile$ | async)!!\"\r\n    [sideContentSize]=\"(sideContentSize$ | async)!!\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [contentDensity]=\"(contentDensity$ | async) ?? 'compact'\"\r\n    [pinnedAppInAppTileGroups]=\"(pinnedAppInAppTileGroups$ | async)!!\"\r\n    [contentHeight]=\"contentHeight\"\r\n    (selectedAppGroupIdChange)=\"onSelectedAppGroupChange($event)\"\r\n    (pinClick)=\"onPinClick($event)\"\r\n>\r\n</bt-app-finder>\r\n", styles: [":host{display:block;min-height:100vh}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.DialogService }, { type: AppFinderService }, { type: i0.ElementRef }, { type: i1$1.ContentDensityService }] });
+
+class FooterEditTileComponent extends BaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterEditTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterEditTileComponent, selector: "bt-footer-edit-tile", usesInheritance: true, ngImport: i0, template: "<button fd-button [glyph]=\"'pushpin-off'\" fdType=\"\"></button>\r\n", styles: [":host{border-top:1px solid #ccc;padding-bottom:5px}\n"], dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterEditTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-footer-edit-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button fd-button [glyph]=\"'pushpin-off'\" fdType=\"\"></button>\r\n", styles: [":host{border-top:1px solid #ccc;padding-bottom:5px}\n"] }]
+        }] });
+
+class NumericTileComponent extends BaseBtTileComponent {
+    constructor() {
+        super(...arguments);
+        this.kpiStateIsColor = false;
+        this.scalseStateIsColor = false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        switch (this.kpiState) {
+            case 'positive':
+            case 'negative':
+            case 'informative':
+            case 'critical':
+            case 'neutral':
+                break;
+            default:
+                this.kpiStateIsColor = this.kpiState !== '';
+                break;
+        }
+        switch (this.scaleState) {
+            case 'positive':
+            case 'negative':
+            case 'informative':
+            case 'critical':
+            case 'neutral':
+                break;
+            default:
+                this.scalseStateIsColor = this.scaleState !== '';
+                break;
+        }
+    }
+    get launchIcon() {
+        return this.settings.LaunchIcon;
+    }
+    get kpiState() {
+        return this.settings.ContentKpiState;
+    }
+    get kpi() {
+        return this.settings.ContentKpi;
+    }
+    get scaleState() {
+        return this.settings.ScaleState;
+    }
+    get scaleText() {
+        return this.settings.ScaleText;
+    }
+    get scaleArrowIcon() {
+        return this.settings.ScaleArrowIcon;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumericTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NumericTileComponent, 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    [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 style=\"padding-top: 0.2rem\">\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\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$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$3.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$3.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "directive", type: i1$3.NumericContentLaunchIconContainerDirective, selector: "[fd-numeric-content-launch-icon-container]" }, { kind: "directive", type: i1$3.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$3.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$3.NumericContentScaleContainerDirective, selector: "[fd-numeric-content-scale-container]" }, { kind: "directive", type: i1$3.NumericContentScaleDirective, selector: "[fd-numeric-content-scale]", inputs: ["state", "class"] }, { kind: "directive", type: i1$3.NumericContentScaleTextDirective, selector: "[fd-numeric-content-scale-text]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i6.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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    [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 style=\"padding-top: 0.2rem\">\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\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 {
+    get fileId() {
+        let fileId = this.settings.Logo?.FileId;
+        if (!fileId) {
+            fileId = this.settings.CalcLogo?.FileId;
+        }
+        return fileId;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoTileComponent, 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    [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\" />\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileLogoDirective, selector: "[fdTileLogo], [fd-tile-logo]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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    [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\" />\r\n    </div>\r\n</bt-tile>\r\n" }]
+        }] });
+
+class FeedTileComponent extends BaseBtTileComponent {
+    get twoColumn() {
+        return this.settings.TwoColumn;
+    }
+    get text() {
+        return this.settings.ContentText;
+    }
+    get byline() {
+        return this.settings.ContentByLine;
+    }
+    get kpi() {
+        return this.settings.ContentKpi;
+    }
+    get state() {
+        return this.settings.State;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FeedTileComponent, 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$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$3.TileContentTextDirective, selector: "[fdTileContentText], [fd-tile-content-text]" }, { kind: "directive", type: i1$3.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$3.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$3.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeedTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-feed-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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" }]
+        }] });
+
+class SimpleTileComponent extends BaseBtTileComponent {
+    ngOnInit() {
+        super.ngOnInit();
+        this.icon = this.settings.Icon;
+        this.pictureIcon = this.settings.PictureIcon;
+        if (this.icon && this.icon.toLowerCase().startsWith('ih')) {
+            this.iconCalc = this.icon;
+        }
+        this.iconColor = this.settings.IconColor;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpleTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SimpleTileComponent, 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    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [backColor]=\"backColor\"\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 [class.picture-icon]=\"pictureIcon || iconCalc\">\r\n        @if(pictureIcon || iconCalc){\r\n        <span\r\n            class=\"tile-picture-icon\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"iconCalc || (pictureIcon.FileId | picFieldSrc: 'GetPictureFromFileInfo':null)\"\r\n        ></span>\r\n        } @else if (icon) {\r\n        <div class=\"fd-numeric-content__launch-icon-container\" style=\"justify-content: center\">\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        </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;max-width:5rem;width:100%;max-height:5rem;height:100%}\n"], dependencies: [{ kind: "component", type: i1$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileProfileImgDirective, selector: "[fdTileProfileImg], [fd-tile-profile-img]", inputs: ["id", "ariaLabel", "ariaLabelledby", "backgroundImage"] }, { kind: "directive", type: i1$3.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i6.SapFontPipe, name: "sapFont" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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    [setToStorage]=\"setToStorage\"\r\n    [listMode]=\"listMode\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [backColor]=\"backColor\"\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 [class.picture-icon]=\"pictureIcon || iconCalc\">\r\n        @if(pictureIcon || iconCalc){\r\n        <span\r\n            class=\"tile-picture-icon\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"iconCalc || (pictureIcon.FileId | picFieldSrc: 'GetPictureFromFileInfo':null)\"\r\n        ></span>\r\n        } @else if (icon) {\r\n        <div class=\"fd-numeric-content__launch-icon-container\" style=\"justify-content: center\">\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        </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;max-width:5rem;width:100%;max-height:5rem;height:100%}\n"] }]
+        }] });
+
+class ProfileTileComponent extends BaseBtTileComponent {
+    get fileId() {
+        let fileId = this.settings?.Image?.FileId;
+        if (!fileId) {
+            fileId = this.settings?.CalcImage;
+        }
+        return fileId;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.icon = this.settings?.Icon;
+        this.fileId2 = this.fileId;
+        this.calcImage = this.settings?.CalcImage;
+        if (this.calcImage && this.calcImage.toLowerCase().startsWith('ih')) {
+            this.iconCalc = this.calcImage;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProfileTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ProfileTileComponent, 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    [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$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileProfileImgDirective, selector: "[fdTileProfileImg], [fd-tile-profile-img]", inputs: ["id", "ariaLabel", "ariaLabelledby", "backgroundImage"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand", "hideHeader", "setToStorage", "listMode", "navigateBackOnClick"] }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i6.SapFontPipe, name: "sapFont" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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    [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"] }]
+        }] });
+
+class NotificationGroupHeaderComponent extends BaseComponent {
+    constructor(_cdr) {
+        super();
+        this._cdr = _cdr;
+        this.unreadCount = 0;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.setUnreadCount(this.notifications);
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const { notifications } = changes;
+        if (notifications && !notifications.firstChange) {
+            this.setUnreadCount(notifications.currentValue);
+            this._cdr.detectChanges();
+        }
+    }
+    setUnreadCount(notifications) {
+        this.unreadCount = notifications.filter((c) => c.Unread).length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationGroupHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NotificationGroupHeaderComponent, selector: "bt-notification-group-header", inputs: { notifications: "notifications", title: "title" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<h2 fd-notification-title [unread]=\"false\">\r\n    {{ title | bbbTranslate }} ({{ notifications.length }}) @if (unreadCount !== 0) {\r\n    <strong>{{ 'New' | bbbTranslate }} ({{ unreadCount }})</strong>\r\n    }\r\n</h2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$4.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread", "id"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationGroupHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-notification-group-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<h2 fd-notification-title [unread]=\"false\">\r\n    {{ title | bbbTranslate }} ({{ notifications.length }}) @if (unreadCount !== 0) {\r\n    <strong>{{ 'New' | bbbTranslate }} ({{ unreadCount }})</strong>\r\n    }\r\n</h2>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { notifications: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class NotificationGroupComponent extends BaseComponent {
+    constructor(_groupByPipe, _cdr) {
+        super();
+        this._groupByPipe = _groupByPipe;
+        this._cdr = _cdr;
+        this._deviceSize = '';
+        this.viewed = new EventEmitter();
+        this.remove = new EventEmitter();
+        this.actionClick = new EventEmitter();
+        this.showEvent = new EventEmitter();
+        this.loadMore = new EventEmitter();
+        this.expanded = {};
+        this.tabList = [
+            { title: 'By Date', groupByItems: [] },
+            { title: 'By Type', groupByItems: [] },
+            { title: 'By Priority', groupByItems: [] }
+        ];
+        this.viewedNotifications = [];
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._deviceSize = this.deviceSize;
+        this.applyGroupByItems(this.notifications);
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const { notifications } = changes;
+        if (notifications && !notifications.firstChange) {
+            this.applyGroupByItems(notifications.currentValue);
+            this._cdr.detectChanges();
+        }
+    }
+    applyGroupByItems(notifications) {
+        if (!notifications?.length) {
+            return;
+        }
+        this.tabList[0].groupByItems = this._groupByPipe.transform(notifications, 'CreationDate');
+        this.tabList[1].groupByItems = this._groupByPipe.transform(notifications, 'Subject');
+        this.tabList[2].groupByItems = this._groupByPipe.transform(notifications, 'Priority');
+        for (let i = 0; i < this.tabList.length; i++) {
+            if (this.tabList[i].groupByItems.length) {
+                const firstKey = this.tabList[i].groupByItems[0].key;
+                if (firstKey && typeof this.expanded[firstKey] === 'undefined') {
+                    this.expanded[firstKey] = true;
+                }
+            }
+        }
+    }
+    _trackByTitle(_index, _) {
+        return _index;
+    }
+    _trackByKey(_index, item) {
+        return item.key;
+    }
+    _trackMoById(_index, mo) {
+        return mo.Id;
+    }
+    onVisibilityChange(e, mo, isLast) {
+        if (e === IntersectionStatus.Visible) {
+            if (mo.Unread) {
+                this.viewedNotifications = [...this.viewedNotifications.filter((c) => c.Unread), mo];
+                this.viewed.emit(mo);
+            }
+            if (isLast) {
+                this.loadMore.emit();
+            }
+        }
+    }
+    onWorkflowExecuteChoiceStatusChanged(e, mo) {
+        if (e.result && !e.error) {
+            this.remove.emit({ items: [mo], silent: true });
+            BarsaApi.Bw.Toast.Success(`${e.choice?.Title} ${BarsaApi.BBB.Action}`);
+            return;
+        }
+        mo.$ChoiceDefStatus = e;
+        this._cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationGroupComponent, deps: [{ token: i1.GroupByPipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: { notifications: "notifications", loading: "loading", deviceSize: "deviceSize", notificationCount: "notificationCount" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", showEvent: "showEvent", loadMore: "loadMore" }, host: { properties: { "class": "this._deviceSize" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (notifications && notifications.length > 0) {\r\n<ng-container>\r\n    <fd-notification-group>\r\n        <fd-tab-list size=\"s\" [expandOverflowText]=\"'More' | bbbTranslate\">\r\n            @for (tab of tabList; track _trackByTitle(index, tab); let index = $index) {\r\n            <fd-tab [title]=\"tab.title | bbbTranslate\">\r\n                @for (groupItem of tab.groupByItems; track _trackByKey(index, groupItem); let index = $index) {\r\n                <fd-notification-group-list>\r\n                    <fd-notification-group-header [(expanded)]=\"expanded[groupItem.key]\">\r\n                        <fd-notification-header>\r\n                            <bt-notification-group-header\r\n                                [notifications]=\"groupItem.value\"\r\n                                [title]=\"groupItem.key\"\r\n                            ></bt-notification-group-header>\r\n                        </fd-notification-header>\r\n                        <fd-notification-actions>\r\n                            <!-- <button fd-button label=\"Accept All\"></button> -->\r\n                            <button\r\n                                fd-button\r\n                                fdType=\"transparent\"\r\n                                [ariaLabel]=\"'DeleteAll' | bbbTranslate\"\r\n                                [title]=\"'DeleteAll' | bbbTranslate\"\r\n                                glyph=\"decline\"\r\n                                (click)=\"remove.emit({ items: groupItem.value, silent: false })\"\r\n                            ></button>\r\n                        </fd-notification-actions>\r\n                    </fd-notification-group-header>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            notificationBody;\r\n                            context: { $implicit: groupItem.value, expanded: expanded[groupItem.key] }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <fd-notification-limit *ngIf=\"groupItem.value.length - 4 > 0\">\r\n                <h1 fd-notification-limit-title>\r\n                  There are {{ groupItem.value.length - 4 }} more notifications\r\n                </h1>\r\n                <p fd-notification-limit-description>\r\n                  You need to close or take action on the listed notifications to display more.\r\n                </p>\r\n              </fd-notification-limit> -->\r\n                </fd-notification-group-list>\r\n                }\r\n            </fd-tab>\r\n            }\r\n        </fd-tab-list>\r\n    </fd-notification-group>\r\n</ng-container>\r\n} @else { @if (!loading) {\r\n<bsu-no-data [simple]=\"true\" style=\"height: 3rem\"></bsu-no-data>\r\n} @else {\r\n<div style=\"height: 30px; position: relative\">\r\n    <bsu-mask [top]=\"'10px'\"></bsu-mask>\r\n</div>\r\n} }\r\n<ng-template #loadingTpl>\r\n    <div style=\"height: 30px; position: relative\">\r\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\r\n    </div>\r\n</ng-template>\r\n<ng-template #notificationItem> </ng-template>\r\n\r\n<ng-template #notificationBody let-notifications let-exapanded=\"expanded\">\r\n    <div style=\"max-height: 346px; overflow-y: auto; overflow-x: hidden\">\r\n        @for (mo of notifications; track _trackMoById($index, mo); let first = $first; let last = $last) {\r\n        <bsu-notification-item\r\n            [notificationItem]=\"mo\"\r\n            (viewed)=\"viewed.emit($event)\"\r\n            (remove)=\"remove.emit($event)\"\r\n            (showEvent)=\"showEvent.emit($event)\"\r\n            (actionClick)=\"actionClick.emit($event)\"\r\n            intersectionObserver\r\n            [intersectionThreshold]=\"0.5\"\r\n            [deviceSize]=\"deviceSize\"\r\n            (visibilityChange)=\"onVisibilityChange($event, mo, last)\"\r\n        ></bsu-notification-item>\r\n        } @if (loading) {\r\n        <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\r\n        }\r\n    </div>\r\n</ng-template>\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}\n"], dependencies: [{ kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$4.NotificationGroupComponent, selector: "fd-notification-group", inputs: ["expanded", "ariaLabel"] }, { kind: "component", type: i4$4.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i4$4.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i4$4.NotificationGroupListComponent, selector: "fd-notification-group-list", inputs: ["ariaLabelledBy", "id"] }, { kind: "component", type: i4$4.NotificationGroupHeaderComponent, selector: "fd-notification-group-header" }, { kind: "component", type: i5$4.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$4.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "directive", type: i1.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "component", type: i6.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i6.NoDataComponent, selector: "bsu-no-data", inputs: ["simple"] }, { kind: "component", type: i6.NotificationItemComponent, selector: "bsu-notification-item", inputs: ["option", "notificationItem", "showCloseButton", "deviceSize"], outputs: ["viewed", "remove", "actionClick", "showEvent", "closeEvent"] }, { kind: "component", type: NotificationGroupHeaderComponent, selector: "bt-notification-group-header", inputs: ["notifications", "title"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-notification-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (notifications && notifications.length > 0) {\r\n<ng-container>\r\n    <fd-notification-group>\r\n        <fd-tab-list size=\"s\" [expandOverflowText]=\"'More' | bbbTranslate\">\r\n            @for (tab of tabList; track _trackByTitle(index, tab); let index = $index) {\r\n            <fd-tab [title]=\"tab.title | bbbTranslate\">\r\n                @for (groupItem of tab.groupByItems; track _trackByKey(index, groupItem); let index = $index) {\r\n                <fd-notification-group-list>\r\n                    <fd-notification-group-header [(expanded)]=\"expanded[groupItem.key]\">\r\n                        <fd-notification-header>\r\n                            <bt-notification-group-header\r\n                                [notifications]=\"groupItem.value\"\r\n                                [title]=\"groupItem.key\"\r\n                            ></bt-notification-group-header>\r\n                        </fd-notification-header>\r\n                        <fd-notification-actions>\r\n                            <!-- <button fd-button label=\"Accept All\"></button> -->\r\n                            <button\r\n                                fd-button\r\n                                fdType=\"transparent\"\r\n                                [ariaLabel]=\"'DeleteAll' | bbbTranslate\"\r\n                                [title]=\"'DeleteAll' | bbbTranslate\"\r\n                                glyph=\"decline\"\r\n                                (click)=\"remove.emit({ items: groupItem.value, silent: false })\"\r\n                            ></button>\r\n                        </fd-notification-actions>\r\n                    </fd-notification-group-header>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            notificationBody;\r\n                            context: { $implicit: groupItem.value, expanded: expanded[groupItem.key] }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <fd-notification-limit *ngIf=\"groupItem.value.length - 4 > 0\">\r\n                <h1 fd-notification-limit-title>\r\n                  There are {{ groupItem.value.length - 4 }} more notifications\r\n                </h1>\r\n                <p fd-notification-limit-description>\r\n                  You need to close or take action on the listed notifications to display more.\r\n                </p>\r\n              </fd-notification-limit> -->\r\n                </fd-notification-group-list>\r\n                }\r\n            </fd-tab>\r\n            }\r\n        </fd-tab-list>\r\n    </fd-notification-group>\r\n</ng-container>\r\n} @else { @if (!loading) {\r\n<bsu-no-data [simple]=\"true\" style=\"height: 3rem\"></bsu-no-data>\r\n} @else {\r\n<div style=\"height: 30px; position: relative\">\r\n    <bsu-mask [top]=\"'10px'\"></bsu-mask>\r\n</div>\r\n} }\r\n<ng-template #loadingTpl>\r\n    <div style=\"height: 30px; position: relative\">\r\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\r\n    </div>\r\n</ng-template>\r\n<ng-template #notificationItem> </ng-template>\r\n\r\n<ng-template #notificationBody let-notifications let-exapanded=\"expanded\">\r\n    <div style=\"max-height: 346px; overflow-y: auto; overflow-x: hidden\">\r\n        @for (mo of notifications; track _trackMoById($index, mo); let first = $first; let last = $last) {\r\n        <bsu-notification-item\r\n            [notificationItem]=\"mo\"\r\n            (viewed)=\"viewed.emit($event)\"\r\n            (remove)=\"remove.emit($event)\"\r\n            (showEvent)=\"showEvent.emit($event)\"\r\n            (actionClick)=\"actionClick.emit($event)\"\r\n            intersectionObserver\r\n            [intersectionThreshold]=\"0.5\"\r\n            [deviceSize]=\"deviceSize\"\r\n            (visibilityChange)=\"onVisibilityChange($event, mo, last)\"\r\n        ></bsu-notification-item>\r\n        } @if (loading) {\r\n        <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\r\n        }\r\n    </div>\r\n</ng-template>\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}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GroupByPipe }, { type: i0.ChangeDetectorRef }], propDecorators: { notifications: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }], notificationCount: [{
+                type: Input
+            }], _deviceSize: [{
+                type: HostBinding,
+                args: ['class']
+            }], viewed: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], actionClick: [{
+                type: Output
+            }], showEvent: [{
+                type: Output
+            }], loadMore: [{
+                type: Output
+            }] } });
+
+class BarsaShellbarComponent extends BaseComponent {
+    constructor(_notificationService, _dialogService, _router, _portalService, _document, appVersion) {
+        super();
+        this._notificationService = _notificationService;
+        this._dialogService = _dialogService;
+        this._router = _router;
+        this._portalService = _portalService;
+        this._document = _document;
+        this.appVersion = appVersion;
+        this.isServiceDesk = false;
+        this.isOpenQuickAccessChanged = new EventEmitter(false);
+        this.openNotificationPanel = new EventEmitter();
+        this.openQuickAccessPanel = new EventEmitter();
+        this.cultureChanged = new EventEmitter();
+        this.notificationLoadMore = new EventEmitter();
+        this.removeNotification = new EventEmitter();
+        this.notifiationActionClick = new EventEmitter();
+        this.notificationViewed = new EventEmitter();
+        this._cdr = inject(ChangeDetectorRef);
+        this.Array = Array;
+        this.isOpenNotificatoin = false;
+        this.user = {
+            initials: 'WW',
+            colorAccent: 1
+        };
+        this.searchTerms = ['مرخصی', 'ماموریت', 'تیکت', 'پروژه'];
+        this.showVersion = false;
+        this._viewedNotifications$ = new Subject();
+        this.onBellNotification = () => {
+            this._document?.body && this._document.body.click();
+            this._dialogService
+                .open(this._notificationsDialog, {
+                mobile: true,
+                verticalPadding: false,
+                closeOnNavigation: true
+            })
+                .afterLoaded.subscribe(() => {
+                this.openNotificationPanel.emit();
+            });
+        };
+        this._viewedNotifications = [];
+        this.onOpenQuickAccess = () => {
+            this.isOpenQuickAccessChanged.emit(true);
+            this.openQuickAccessPanel.emit();
+        };
+        this.onOpenNotification = () => {
+            this.isOpenNotificatoin = true;
+            this.openNotificationPanel.emit();
+        };
+        this.onLanguage = (e) => {
+            const culture = e.currentTarget.textContent.trim();
+            this._changeCulture(culture);
+        };
+        this.showVersion = false;
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const { userProfileImageUrl } = changes;
+        if (userProfileImageUrl) {
+            this.user.image = userProfileImageUrl.currentValue;
+        }
+    }
+    onRouteFormStateChange() {
+        this._closeSideMenu();
+    }
+    onCultureChange(culture) {
+        this._changeCulture(culture);
+    }
+    onShowNotification(e) {
+        this.isOpenNotificatoin = false;
+        this._notificationService.ShowNotificationRelatedMo(e);
+    }
+    onNotificationItemViewed(viewedMo) {
+        this.notificationViewed.emit(viewedMo);
+    }
+    onRemoveNotifications(e) {
+        this.removeNotification.emit(e);
+    }
+    onNotificationAction(e) {
+        this.notifiationActionClick.emit(e);
+    }
+    onNotificationLoadMore() {
+        this.notificationLoadMore.emit();
+    }
+    _closeSideMenu() {
+        if (!this.isOpenQuickAccess) {
+            return;
+        }
+        this.isOpenQuickAccessChanged.emit(false);
+        this._cdr.detectChanges();
+    }
+    _changeCulture(culture) {
+        this.cultureChanged.emit(culture);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaShellbarComponent, deps: [{ token: i1.NotificationService }, { token: i1$1.DialogService }, { token: i3$1.Router }, { token: i1.PortalService }, { token: DOCUMENT }, { token: APP_VERSION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: { cssCustomUrl: "cssCustomUrl", cssUrl: "cssUrl", cssVariableUrl: "cssVariableUrl", multiLanguages: "multiLanguages", userLoggedIn: "userLoggedIn", settings: "settings", productMenuControl: "productMenuControl", deviceSize: "deviceSize", cultures: "cultures", shellbarData: "shellbarData", notificationCount: "notificationCount", notifcationLoaded: "notifcationLoaded", notificationLoading: "notificationLoading", notifications: "notifications", productMenuItems1: "productMenuItems1", bodyClick: "bodyClick", logo: "logo", actions: "actions", userMenu: "userMenu", productSwitcher: "productSwitcher", subtitle: "subtitle", isMobile: "isMobile", hideShellbarActions: "hideShellbarActions", showExtraButton: "showExtraButton", isTablet: "isTablet", userProfileImageUrl: "userProfileImageUrl", isDesktop: "isDesktop", isServiceDesk: "isServiceDesk", isOpenQuickAccess: "isOpenQuickAccess", sideMenuTemplate: "sideMenuTemplate" }, outputs: { isOpenQuickAccessChanged: "isOpenQuickAccessChanged", openNotificationPanel: "openNotificationPanel", openQuickAccessPanel: "openQuickAccessPanel", cultureChanged: "cultureChanged", notificationLoadMore: "notificationLoadMore", removeNotification: "removeNotification", notifiationActionClick: "notifiationActionClick", notificationViewed: "notificationViewed" }, 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, usesOnChanges: true, ngImport: i0, template: "@if (cssVariableUrl) {\r\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssVariableUrl\" />\r\n} @if (cssUrl) {\r\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\r\n} @if (cssCustomUrl) {\r\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\r\n}\r\n<fd-shellbar\r\n    [size]=\"deviceSize\"\r\n    [ngClass]=\"deviceSize\"\r\n    routeFormChange\r\n    (stateChanged)=\"onRouteFormStateChange()\"\r\n    [handleBodyClick]=\"true\"\r\n>\r\n    @if (sideMenuTemplate) {\r\n    <fd-shellbar-action\r\n        [glyph]=\"'apps'\"\r\n        [label]=\"'Quick Access' | bbbTranslate\"\r\n        [notificationCount]=\"notificationCount.unread ?? 0\"\r\n        [notificationLabel]=\"'Quick Access' | bbbTranslate\"\r\n        [callback]=\"onOpenQuickAccess\"\r\n    >\r\n    </fd-shellbar-action>\r\n    } @if (sideMenuTemplate) {\r\n    <button\r\n        fd-shellbar-side-nav\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        glyph=\"menu2\"\r\n        style=\"width: 2.75rem\"\r\n        (click)=\"$event.stopPropagation(); isOpenQuickAccessChanged.emit(!isOpenQuickAccess)\"\r\n    ></button>\r\n    } @if (logo) {\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\"\r\n            aria-label=\"Barsa Novin Ray\"\r\n        ></a>\r\n    </fd-shellbar-logo>\r\n    } @if (!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0) {\r\n    <fd-product-menu [control]=\"productMenuControl\" [closePopoverOnSelect]=\"true\" [items]=\"productMenuItems1\">\r\n    </fd-product-menu>\r\n    }\r\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }}</fd-shellbar-subtitle>\r\n    @if (!hideShellbarActions&& user && (userMenu?.length || !settings?.HideLanguage)) {\r\n    <fd-shellbar-actions [user]=\"user\" [userMenu]=\"userMenu\" #langRef>\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=\"login\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if (deviceSize === 's' && userLoggedIn && !settings?.HideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notifications' | bbbTranslate\"\r\n            [notificationCount]=\"notificationCount.unread ?? 0\"\r\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\r\n            [callback]=\"onBellNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if (!settings?.HideNotifications && userLoggedIn) {\r\n        <fd-popover\r\n            [(isOpen)]=\"isOpenNotificatoin\"\r\n            [triggers]=\"[]\"\r\n            [focusTrapped]=\"true\"\r\n            [noArrow]=\"true\"\r\n            placement=\"bottom\"\r\n            title=\"Notification Popover\"\r\n            [focusAutoCapture]=\"true\"\r\n            [mobile]=\"deviceSize === 's'\"\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]=\"notificationCount.unread\"\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                <ng-container\r\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\r\n                ></ng-container>\r\n            </fd-popover-body>\r\n        </fd-popover>\r\n        } @if (!settings?.HideLanguage && deviceSize !== 's' && multiLanguages) {\r\n        <fd-shellbar-action [glyph]=\"'world'\" [label]=\"'language'\" [fdMenuTrigger]=\"menu\" (callback)=\"(onLanguage)\">\r\n        </fd-shellbar-action>\r\n        } @if (!settings?.HideLanguage && deviceSize === 's' && multiLanguages) { @for (culture of cultures | keyvalue;\r\n        track culture) {\r\n        <fd-shellbar-action\r\n            [label]=\"culture.value\"\r\n            [callback]=\"onLanguage\"\r\n            class=\"culture-abbrivation\"\r\n            [glyph]=\"culture.key\"\r\n            [ngClass]=\"'flags'\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } } @if (productSwitcher?.length) {\r\n        <fd-product-switch>\r\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\r\n            </fd-product-switch-body>\r\n        </fd-product-switch>\r\n        }\r\n    </fd-shellbar-actions>\r\n    }\r\n</fd-shellbar>\r\n@if(showExtraButton){\r\n<div\r\n    [class.fd-shellbar--xl]=\"isDesktop\"\r\n    [class.fd-shellbar--m]=\"isTablet\"\r\n    [class.fd-shellbar--s]=\"isMobile\"\r\n    class=\"extra-button-wrapper\"\r\n    [class.service-desk]=\"isServiceDesk\"\r\n>\r\n    <ng-content select=\"button\"></ng-content>\r\n</div>\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-bg-white 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\"\r\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\r\n    (click)=\"$event.stopPropagation()\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></ng-container>\r\n</div>\r\n\r\n@if(isOpenQuickAccess) {\r\n<div\r\n    class=\"sidemenu-h tw-fixed tw-right-0 tw-bg-slate-800/[.5] tw-z-[90] tw-w-screen tw-backdrop-blur-sm\"\r\n    (click)=\"isOpenQuickAccessChanged.emit(false)\"\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>\r\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" />\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    @if (!notifcationLoaded && notificationLoading === true) {\r\n    <div style=\"position: relative; height: 100px\">\r\n        <bsu-mask size=\"s\"></bsu-mask>\r\n    </div>\r\n    }\r\n    <bt-notification-group\r\n        [notifications]=\"notifications\"\r\n        [notificationCount]=\"notificationCount\"\r\n        [loading]=\"notificationLoading === true\"\r\n        (viewed)=\"onNotificationItemViewed($event)\"\r\n        (remove)=\"onRemoveNotifications($event)\"\r\n        (showEvent)=\"popoverComponent.close(); onShowNotification($event)\"\r\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\r\n        (loadMore)=\"onNotificationLoadMore()\"\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: notificationCount }\"\r\n            ></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative}:host ::ng-deep fd-shellbar-actions fd-avatar{background-color:transparent!important;color:var(--sapShell_InteractiveTextColor, #d1e8ff)}: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}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.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}.sidemenu-h{top:var(--fdShellbar_Height);height:calc(100vh - var(--fdShellbar_Height))}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { 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$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i7$1.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i7$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i7$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i10.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i11.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i11.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i11.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i12.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex"] }, { kind: "component", type: i12.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i12.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i12.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect"], outputs: ["searchOpen"] }, { kind: "component", type: i12.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i12.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i12.ShellbarSidenavDirective, selector: "[fdShellbarSidenav], [fd-shellbar-side-nav]" }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i1.RouteFormChangeDirective, selector: "[routeFormChange]", inputs: ["handleBodyClick"], outputs: ["stateChanged"] }, { kind: "component", type: i6.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i1$4.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaShellbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-barsa-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (cssVariableUrl) {\r\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssVariableUrl\" />\r\n} @if (cssUrl) {\r\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\r\n} @if (cssCustomUrl) {\r\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\r\n}\r\n<fd-shellbar\r\n    [size]=\"deviceSize\"\r\n    [ngClass]=\"deviceSize\"\r\n    routeFormChange\r\n    (stateChanged)=\"onRouteFormStateChange()\"\r\n    [handleBodyClick]=\"true\"\r\n>\r\n    @if (sideMenuTemplate) {\r\n    <fd-shellbar-action\r\n        [glyph]=\"'apps'\"\r\n        [label]=\"'Quick Access' | bbbTranslate\"\r\n        [notificationCount]=\"notificationCount.unread ?? 0\"\r\n        [notificationLabel]=\"'Quick Access' | bbbTranslate\"\r\n        [callback]=\"onOpenQuickAccess\"\r\n    >\r\n    </fd-shellbar-action>\r\n    } @if (sideMenuTemplate) {\r\n    <button\r\n        fd-shellbar-side-nav\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        glyph=\"menu2\"\r\n        style=\"width: 2.75rem\"\r\n        (click)=\"$event.stopPropagation(); isOpenQuickAccessChanged.emit(!isOpenQuickAccess)\"\r\n    ></button>\r\n    } @if (logo) {\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\"\r\n            aria-label=\"Barsa Novin Ray\"\r\n        ></a>\r\n    </fd-shellbar-logo>\r\n    } @if (!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0) {\r\n    <fd-product-menu [control]=\"productMenuControl\" [closePopoverOnSelect]=\"true\" [items]=\"productMenuItems1\">\r\n    </fd-product-menu>\r\n    }\r\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }}</fd-shellbar-subtitle>\r\n    @if (!hideShellbarActions&& user && (userMenu?.length || !settings?.HideLanguage)) {\r\n    <fd-shellbar-actions [user]=\"user\" [userMenu]=\"userMenu\" #langRef>\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=\"login\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if (deviceSize === 's' && userLoggedIn && !settings?.HideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notifications' | bbbTranslate\"\r\n            [notificationCount]=\"notificationCount.unread ?? 0\"\r\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\r\n            [callback]=\"onBellNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if (!settings?.HideNotifications && userLoggedIn) {\r\n        <fd-popover\r\n            [(isOpen)]=\"isOpenNotificatoin\"\r\n            [triggers]=\"[]\"\r\n            [focusTrapped]=\"true\"\r\n            [noArrow]=\"true\"\r\n            placement=\"bottom\"\r\n            title=\"Notification Popover\"\r\n            [focusAutoCapture]=\"true\"\r\n            [mobile]=\"deviceSize === 's'\"\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]=\"notificationCount.unread\"\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                <ng-container\r\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\r\n                ></ng-container>\r\n            </fd-popover-body>\r\n        </fd-popover>\r\n        } @if (!settings?.HideLanguage && deviceSize !== 's' && multiLanguages) {\r\n        <fd-shellbar-action [glyph]=\"'world'\" [label]=\"'language'\" [fdMenuTrigger]=\"menu\" (callback)=\"(onLanguage)\">\r\n        </fd-shellbar-action>\r\n        } @if (!settings?.HideLanguage && deviceSize === 's' && multiLanguages) { @for (culture of cultures | keyvalue;\r\n        track culture) {\r\n        <fd-shellbar-action\r\n            [label]=\"culture.value\"\r\n            [callback]=\"onLanguage\"\r\n            class=\"culture-abbrivation\"\r\n            [glyph]=\"culture.key\"\r\n            [ngClass]=\"'flags'\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } } @if (productSwitcher?.length) {\r\n        <fd-product-switch>\r\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\r\n            </fd-product-switch-body>\r\n        </fd-product-switch>\r\n        }\r\n    </fd-shellbar-actions>\r\n    }\r\n</fd-shellbar>\r\n@if(showExtraButton){\r\n<div\r\n    [class.fd-shellbar--xl]=\"isDesktop\"\r\n    [class.fd-shellbar--m]=\"isTablet\"\r\n    [class.fd-shellbar--s]=\"isMobile\"\r\n    class=\"extra-button-wrapper\"\r\n    [class.service-desk]=\"isServiceDesk\"\r\n>\r\n    <ng-content select=\"button\"></ng-content>\r\n</div>\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-bg-white 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\"\r\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\r\n    (click)=\"$event.stopPropagation()\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></ng-container>\r\n</div>\r\n\r\n@if(isOpenQuickAccess) {\r\n<div\r\n    class=\"sidemenu-h tw-fixed tw-right-0 tw-bg-slate-800/[.5] tw-z-[90] tw-w-screen tw-backdrop-blur-sm\"\r\n    (click)=\"isOpenQuickAccessChanged.emit(false)\"\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>\r\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" />\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    @if (!notifcationLoaded && notificationLoading === true) {\r\n    <div style=\"position: relative; height: 100px\">\r\n        <bsu-mask size=\"s\"></bsu-mask>\r\n    </div>\r\n    }\r\n    <bt-notification-group\r\n        [notifications]=\"notifications\"\r\n        [notificationCount]=\"notificationCount\"\r\n        [loading]=\"notificationLoading === true\"\r\n        (viewed)=\"onNotificationItemViewed($event)\"\r\n        (remove)=\"onRemoveNotifications($event)\"\r\n        (showEvent)=\"popoverComponent.close(); onShowNotification($event)\"\r\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\r\n        (loadMore)=\"onNotificationLoadMore()\"\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: notificationCount }\"\r\n            ></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative}:host ::ng-deep fd-shellbar-actions fd-avatar{background-color:transparent!important;color:var(--sapShell_InteractiveTextColor, #d1e8ff)}: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}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.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}.sidemenu-h{top:var(--fdShellbar_Height);height:calc(100vh - var(--fdShellbar_Height))}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NotificationService }, { type: i1$1.DialogService }, { type: i3$1.Router }, { type: i1.PortalService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_VERSION]
+                }] }], propDecorators: { cssCustomUrl: [{
+                type: Input
+            }], cssUrl: [{
+                type: Input
+            }], cssVariableUrl: [{
+                type: Input
+            }], multiLanguages: [{
+                type: Input
+            }], userLoggedIn: [{
+                type: Input
+            }], settings: [{
+                type: Input
+            }], productMenuControl: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }], cultures: [{
+                type: Input
+            }], shellbarData: [{
+                type: Input
+            }], notificationCount: [{
+                type: Input
+            }], notifcationLoaded: [{
+                type: Input
+            }], notificationLoading: [{
+                type: Input
+            }], notifications: [{
+                type: Input
+            }], productMenuItems1: [{
+                type: Input
+            }], bodyClick: [{
+                type: Input
+            }], logo: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], userMenu: [{
+                type: Input
+            }], productSwitcher: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], isMobile: [{
+                type: Input
+            }], hideShellbarActions: [{
+                type: Input
+            }], showExtraButton: [{
+                type: Input
+            }], isTablet: [{
+                type: Input
+            }], userProfileImageUrl: [{
+                type: Input
+            }], isDesktop: [{
+                type: Input
+            }], isServiceDesk: [{
+                type: Input
+            }], isOpenQuickAccess: [{
+                type: Input
+            }], sideMenuTemplate: [{
+                type: Input
+            }], isOpenQuickAccessChanged: [{
+                type: Output
+            }], openNotificationPanel: [{
+                type: Output
+            }], openQuickAccessPanel: [{
+                type: Output
+            }], cultureChanged: [{
+                type: Output
+            }], notificationLoadMore: [{
+                type: Output
+            }], removeNotification: [{
+                type: Output
+            }], notifiationActionClick: [{
+                type: Output
+            }], notificationViewed: [{
+                type: Output
+            }], comboboxComponent: [{
+                type: ViewChild,
+                args: [ComboboxComponent]
+            }], popoverComponent: [{
+                type: ViewChild,
+                args: ['popoverComponent', { static: false }]
+            }], _notificationsDialog: [{
+                type: ViewChild,
+                args: ['notificationsDialog', { static: true, read: TemplateRef }]
+            }] } });
+
+class ShellbarComponent extends BaseComponent {
+    get repIdProfileImage() {
+        return this.shellbarData?.ProfileImageReport?.Id;
+    }
+    get subtitle() {
+        if (!this.shellbarData) {
+            return '';
+        }
+        if (this._portalService.deviceSize === 's' && this.shellbarData.MobileSubtitle) {
+            return this.shellbarData.MobileSubtitle
+                ? `${this.shellbarData.MobileSubtitle} ${typeof this.shellbarData?.calcSubtitle === 'string' ? this.shellbarData.calcSubtitle : ''}`
+                : '';
+        }
+        return this.shellbarData.Subtitle
+            ? `${this.shellbarData?.Subtitle} ${typeof this.shellbarData?.calcSubtitle === 'string' ? this.shellbarData.calcSubtitle : ''}`
+            : '';
+    }
+    get logo() {
+        return this.shellbarData?.Logo;
+    }
+    get cssStyles() {
+        return this.shellbarData?.CssStyles;
+    }
+    get actions() {
+        return this.settings?.HideUserMenu ? [] : this.shellbarData?.ActionItems?.MoDataList ?? [];
+    }
+    get sidebarSettings() {
+        if (!this.shellbarData?.SidebarReport?.Id) {
+            return null;
+        }
+        return {
+            RelatedReport: { Id: this.shellbarData?.SidebarReport?.Id, $Caption: '' },
+            RowClick: '',
+            DataOnly: false
+        };
+    }
+    get userMenu() {
+        const moDataList = BarsaApi.Common.Util.TryGetValue(this.shellbarData, 'UserMenuItems.MoDataList');
+        const items = moDataList ? [...moDataList] : [];
+        if (!items.length) {
+            return [];
+        }
+        items.forEach((c) => {
+            c.text = this._bbbTranslatePipe.transform(c.text);
+            c.callback = new Function(c.Code + this.bodyClick);
+        });
+        if (!this.IsUserAnonymous && this.IsUserLoggedIn) {
+            items.splice(0, 0, { Id: '-1', $Caption: '', text: BarsaApi.LoginFormData.UserDisplayName });
+        }
+        return this.settings?.HideUserMenu ? [] : items;
+    }
+    get productSwitcher() {
+        return (this.shellbarData?.ProductSwitchItems?.MoDataList ?? []);
+    }
+    get multiLanguages() {
+        return this.shellbarData?.MultiLanguages;
+    }
+    get productMenuItems() {
+        const items = this.shellbarData?.ProductMenuItems?.MoDataList ?? [];
+        items.forEach((c) => (c.callback = new Function(c.Code + this.bodyClick)));
+        return items;
+    }
+    get IsUserLoggedIn() {
+        return BarsaApi.LoginFormData.IsUserLoggedIn;
+    }
+    get IsUserAnonymous() {
+        return BarsaApi.LoginFormData.IsAnonymous;
+    }
+    constructor(_bbbTranslatePipe, _portalService, _breadCrumbService, _tilesService, _cdr, _domSanitizer, _notificationService, appVersion) {
+        super();
+        this._bbbTranslatePipe = _bbbTranslatePipe;
+        this._portalService = _portalService;
+        this._breadCrumbService = _breadCrumbService;
+        this._tilesService = _tilesService;
+        this._cdr = _cdr;
+        this._domSanitizer = _domSanitizer;
+        this._notificationService = _notificationService;
+        this.appVersion = appVersion;
+        this.isOpenNotificatoin = false;
+        this.user = {
+            initials: 'WW',
+            colorAccent: 1
+        };
+        this.notifcationLoaded = false;
+        this._viewedNotifications$ = new Subject();
+        this._viewedNotifications = [];
+        this.bodyClick = ';$("body").click()';
+        this.isMobile = getDeviceIsMobile();
+        this.isDesktop = getDeviceIsDesktop();
+        this.isTablet = getDeviceIsTablet();
+        this.isServiceDesk = false;
+        this.isOpenQuickAccess = false;
+        this.onOpenNotification = () => {
+            this.isOpenNotificatoin = true;
+            this._handleOpenNotificationPanel();
+        };
+        this.onCultureChanged = (culture) => {
+            this._changeCulture(culture);
+        };
+        this.userLoggedIn$ = this._portalService.userLoggedIn$;
+        this.notifiationCountLoaded$ = this._notificationService.notificationCountLoaded$;
+        this._viewedNotifications$
+            .pipe(takeUntil(this._onDestroy$), tap((item) => this._viewedNotifications.push(item)), map((item) => this._viewedNotifications), debounceTime(2000), map((items) => items.map((item) => item.Tag)))
+            .subscribe((tags) => {
+            this._viewedNotifications = [];
+            this._notificationService.setNotificationViewed(tags);
+        });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.isServiceDesk = BarsaApi.LoginFormData.IsServiceDesk;
+        this.cultures = BarsaApi.LoginFormData.Cultures;
+        this.cssUrl$ = this._portalService.cssUrl$;
+        this.cssVariableUrl$ = this._portalService.cssVariableUrl$;
+        this.cssCustomUrl$ = this._portalService.cssCustomUrl$;
+        this.loginRouterLink$ = this._portalService.loginRoute$;
+        this.notificationsCount$ = this._notificationService.notificationCount$;
+        this._notificationService.notificationCount$.subscribe(() => this._cdr.detectChanges());
+        this.notificationLoading$ = this._notificationService.notificationLoading$;
+        this.notifications$ = this._notificationService.notifications$.pipe(takeUntil(this._onDestroy$), map((notifications) => this._mapNotifications(notifications)));
+        BarsaApi.Bw.SetUserPortalSettings = (userPortalSettings) => {
+            this._portalService.setUserPortalSettings(userPortalSettings);
+        };
+        BarsaApi.Bw.SetShellbarSubtitle = (calcSubtitle) => {
+            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.userProfileImageUrl$ = this._tilesService.userProfileImageUrl$;
+        this._tilesService.shellbar$.pipe(takeUntil(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]))
+                .subscribe((c) => {
+                this.productMenuItems1 = c;
+                this._cdr.detectChanges();
+            });
+        });
+        if (this.settings?.AllowAnonymous) {
+            this._tilesService.loadShellbar();
+        }
+        this._portalService.userLoggedIn$.pipe(takeUntil(this._onDestroy$)).subscribe((loggedIn) => {
+            if (!loggedIn) {
+                return;
+            }
+            this._tilesService.loadShellbar();
+            this._notificationService.loadUnreadNotificationCount();
+        });
+    }
+    onCultureChange(culture) {
+        this._changeCulture(culture);
+    }
+    onShowNotification(e) {
+        this.isOpenNotificatoin = false;
+        this._notificationService.ShowNotificationRelatedMo(e);
+    }
+    onNotificationItemViewed(viewedMo) {
+        this._viewedNotifications$.next(viewedMo);
+    }
+    onRemoveNotifications(e) {
+        this._notificationService.removeNotification(e.items);
+    }
+    onNotificationAction(e) {
+        this._portalService.ExecuteNotificationAction(e.item.Tag, e.btn.Title);
+    }
+    onNotificationLoadMore() {
+        this._notificationService.loadMore();
+    }
+    onNotificationWorkflowChoiceSuccess(result) { }
+    onNotificationWorkflowChoiceFailed(err) { }
+    onHandleOpenNotificationPanel() {
+        this._handleOpenNotificationPanel();
+    }
+    _handleOpenNotificationPanel() {
+        if (this.notifcationLoaded) {
+            return;
+        }
+        this.notifcationLoaded = true;
+        this._notificationService.loadNotifications();
+    }
+    _mapNotifications(notifications) {
+        return notifications.map((notification) => ({
+            ...notification,
+            contentSafeHtml: notification.Content
+                ? this._domSanitizer.bypassSecurityTrustHtml(notification.Content)
+                : ''
+        }));
+    }
+    _changeCulture(culture /* culture sample :English */) {
+        BarsaApi.Bw.SetCultureByDisplayName(culture);
+        BarsaApi.Bw.NavigateTo('/');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ShellbarComponent, deps: [{ token: i1.BbbTranslatePipe }, { token: i1.PortalService }, { token: i1.BreadcrumbService }, { token: TilesService }, { token: i0.ChangeDetectorRef }, { token: i3$3.DomSanitizer }, { token: i1.NotificationService }, { token: APP_VERSION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ShellbarComponent, selector: "bt-shellbar", 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 (notifiationCountLoaded$ | async; as notifiationCountLoaded) { @if\r\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\r\n<bt-barsa-shellbar\r\n    [class.service-desk]=\"isServiceDesk\"\r\n    [cssUrl]=\"cssUrl$ | async\"\r\n    [cssVariableUrl]=\"cssVariableUrl$ | async\"\r\n    [userProfileImageUrl]=\"userProfileImageUrl$ | async\"\r\n    [cssCustomUrl]=\"cssCustomUrl$ | async\"\r\n    [userLoggedIn]=\"true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cssStyle]=\"cssStyles\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [settings]=\"settings\"\r\n    [isMobile]=\"isMobile\"\r\n    [isTablet]=\"isTablet\"\r\n    [isDesktop]=\"isDesktop\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [notificationCount]=\"(notificationsCount$ | async)!!\"\r\n    [notifications]=\"(notifications$ | async) ?? []\"\r\n    [notifcationLoaded]=\"notifcationLoaded\"\r\n    [notificationLoading]=\"(notificationLoading$ | async) === true\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [actions]=\"actions\"\r\n    [userMenu]=\"userMenu\"\r\n    [productSwitcher]=\"productSwitcher\"\r\n    [subtitle]=\"subtitle\"\r\n    [isServiceDesk]=\"isServiceDesk\"\r\n    [sideMenuTemplate]=\"QuickAccessTemplate\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [isOpenQuickAccess]=\"isOpenQuickAccess\"\r\n    (isOpenQuickAccessChanged)=\"isOpenQuickAccess = $event\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n    (notificationViewed)=\"onNotificationItemViewed($event)\"\r\n    (notifiationActionClick)=\"onNotificationAction($event)\"\r\n    (removeNotification)=\"onRemoveNotifications($event)\"\r\n    (notificationLoadMore)=\"onNotificationLoadMore()\"\r\n    (openNotificationPanel)=\"onHandleOpenNotificationPanel()\"\r\n>\r\n</bt-barsa-shellbar>\r\n} } } } @else { @if (notificationsCount$ | async; as notificationCount) {\r\n<bt-barsa-shellbar\r\n    [class.service-desk]=\"isServiceDesk\"\r\n    [cssUrl]=\"''\"\r\n    [cssStyle]=\"cssStyles\"\r\n    [cssVariableUrl]=\"''\"\r\n    [cssCustomUr]=\"''\"\r\n    [userLoggedIn]=\"false\"\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]=\"userMenu\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [productSwitcher]=\"productSwitcher\"\r\n    [subtitle]=\"subtitle\"\r\n    [settings]=\"settings\"\r\n    [notificationCount]=\"{ unread: 0, all: 0 }\"\r\n    [notifications]=\"[]\"\r\n    [notifcationLoaded]=\"true\"\r\n    [notificationLoading]=\"false\"\r\n    [hideShellbarActions]=\"true\"\r\n    [showExtraButton]=\"true\"\r\n    [cultures]=\"cultures\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n>\r\n    @for(btn of userMenu;track btn){\r\n    <button\r\n        class=\"extra_btn\"\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</bt-barsa-shellbar>\r\n} }\r\n<ng-template #QuickAccessTemplate>\r\n    @if ((notificationLoading$ | async) === true) {\r\n    <div style=\"position: relative; height: 100px\">\r\n        <bsu-mask size=\"s\"></bsu-mask>\r\n    </div>\r\n    }\r\n    <bnrc-report-container *ngIf=\"sidebarSettings\" [settings]=\"sidebarSettings\"> </bnrc-report-container>\r\n    <!-- <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder> -->\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative}:host .extra_btn{background-color:transparent;border-color:transparent}:host #menu_btn{background-color:transparent;border-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1.ReportContainerComponent, selector: "bnrc-report-container", inputs: ["settings"] }, { kind: "directive", type: i1.DynamicStyleDirective, selector: "[cssStyle]", inputs: ["cssStyle"] }, { kind: "component", type: i6.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: ["cssCustomUrl", "cssUrl", "cssVariableUrl", "multiLanguages", "userLoggedIn", "settings", "productMenuControl", "deviceSize", "cultures", "shellbarData", "notificationCount", "notifcationLoaded", "notificationLoading", "notifications", "productMenuItems1", "bodyClick", "logo", "actions", "userMenu", "productSwitcher", "subtitle", "isMobile", "hideShellbarActions", "showExtraButton", "isTablet", "userProfileImageUrl", "isDesktop", "isServiceDesk", "isOpenQuickAccess", "sideMenuTemplate"], outputs: ["isOpenQuickAccessChanged", "openNotificationPanel", "openQuickAccessPanel", "cultureChanged", "notificationLoadMore", "removeNotification", "notifiationActionClick", "notificationViewed"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ShellbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notifiationCountLoaded$ | async; as notifiationCountLoaded) { @if\r\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\r\n<bt-barsa-shellbar\r\n    [class.service-desk]=\"isServiceDesk\"\r\n    [cssUrl]=\"cssUrl$ | async\"\r\n    [cssVariableUrl]=\"cssVariableUrl$ | async\"\r\n    [userProfileImageUrl]=\"userProfileImageUrl$ | async\"\r\n    [cssCustomUrl]=\"cssCustomUrl$ | async\"\r\n    [userLoggedIn]=\"true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cssStyle]=\"cssStyles\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [settings]=\"settings\"\r\n    [isMobile]=\"isMobile\"\r\n    [isTablet]=\"isTablet\"\r\n    [isDesktop]=\"isDesktop\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [notificationCount]=\"(notificationsCount$ | async)!!\"\r\n    [notifications]=\"(notifications$ | async) ?? []\"\r\n    [notifcationLoaded]=\"notifcationLoaded\"\r\n    [notificationLoading]=\"(notificationLoading$ | async) === true\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [actions]=\"actions\"\r\n    [userMenu]=\"userMenu\"\r\n    [productSwitcher]=\"productSwitcher\"\r\n    [subtitle]=\"subtitle\"\r\n    [isServiceDesk]=\"isServiceDesk\"\r\n    [sideMenuTemplate]=\"QuickAccessTemplate\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [isOpenQuickAccess]=\"isOpenQuickAccess\"\r\n    (isOpenQuickAccessChanged)=\"isOpenQuickAccess = $event\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n    (notificationViewed)=\"onNotificationItemViewed($event)\"\r\n    (notifiationActionClick)=\"onNotificationAction($event)\"\r\n    (removeNotification)=\"onRemoveNotifications($event)\"\r\n    (notificationLoadMore)=\"onNotificationLoadMore()\"\r\n    (openNotificationPanel)=\"onHandleOpenNotificationPanel()\"\r\n>\r\n</bt-barsa-shellbar>\r\n} } } } @else { @if (notificationsCount$ | async; as notificationCount) {\r\n<bt-barsa-shellbar\r\n    [class.service-desk]=\"isServiceDesk\"\r\n    [cssUrl]=\"''\"\r\n    [cssStyle]=\"cssStyles\"\r\n    [cssVariableUrl]=\"''\"\r\n    [cssCustomUr]=\"''\"\r\n    [userLoggedIn]=\"false\"\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]=\"userMenu\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [productSwitcher]=\"productSwitcher\"\r\n    [subtitle]=\"subtitle\"\r\n    [settings]=\"settings\"\r\n    [notificationCount]=\"{ unread: 0, all: 0 }\"\r\n    [notifications]=\"[]\"\r\n    [notifcationLoaded]=\"true\"\r\n    [notificationLoading]=\"false\"\r\n    [hideShellbarActions]=\"true\"\r\n    [showExtraButton]=\"true\"\r\n    [cultures]=\"cultures\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n>\r\n    @for(btn of userMenu;track btn){\r\n    <button\r\n        class=\"extra_btn\"\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</bt-barsa-shellbar>\r\n} }\r\n<ng-template #QuickAccessTemplate>\r\n    @if ((notificationLoading$ | async) === true) {\r\n    <div style=\"position: relative; height: 100px\">\r\n        <bsu-mask size=\"s\"></bsu-mask>\r\n    </div>\r\n    }\r\n    <bnrc-report-container *ngIf=\"sidebarSettings\" [settings]=\"sidebarSettings\"> </bnrc-report-container>\r\n    <!-- <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder> -->\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative}:host .extra_btn{background-color:transparent;border-color:transparent}:host #menu_btn{background-color:transparent;border-color:transparent}\n"] }]
+        }], ctorParameters: () => [{ type: i1.BbbTranslatePipe }, { type: i1.PortalService }, { type: i1.BreadcrumbService }, { type: TilesService }, { type: i0.ChangeDetectorRef }, { type: i3$3.DomSanitizer }, { type: i1.NotificationService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_VERSION]
+                }] }], propDecorators: { comboboxComponent: [{
+                type: ViewChild,
+                args: [ComboboxComponent]
+            }], popoverComponent: [{
+                type: ViewChild,
+                args: ['popoverComponent', { static: false }]
+            }], _notificationsDialog: [{
+                type: ViewChild,
+                args: ['notificationsDialog', { static: true, read: TemplateRef }]
+            }] } });
+
+class TileHomeFilterPipe {
+    transform(collection) {
+        return collection.filter((val) => this.matchFilter(val));
+    }
+    matchFilter(value) {
+        const match = Object.keys(value.Data).some((key) => {
+            if (key.startsWith('$')) {
+                return false;
+            }
+            if (key.startsWith('c')) {
+                return BarsaApi.Common.Util.TryGetValue(value, 'Data.' + key);
+            }
+        });
+        return match;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileHomeFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TileHomeFilterPipe, name: "tileHomeFilter" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileHomeFilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'tileHomeFilter',
+                    standalone: false
+                }]
+        }] });
+
+class GroupTilesPipe {
+    transform(appGroup) {
+        const predefineTiles = appGroup.AppTiles;
+        if (predefineTiles?.length === 0) {
+            return of([]);
+        }
+        const predefine$ = of(predefineTiles);
+        const userDefine$ = of(appGroup.UserAppTileGroupSetting?.UserAppTilesSetting?.MoDataList);
+        return forkJoin([predefine$, userDefine$]).pipe(map(([s1, s2]) => [...s1, ...s2]), map((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);
+            group.OrderItem = BarsaApi.Common.Util.TryGetValue(group, 'UserAppTileGroupSetting.OrderItem', group.OrderItem);
+            return tempTiles;
+        }), shareReplay(1));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GroupTilesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GroupTilesPipe, name: "groupTiles" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GroupTilesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'groupTiles',
+                    standalone: false
+                }]
+        }] });
+
+class PopoverAppFinderComponent extends BaseComponent {
+    constructor(_cdr, _dialogService, _appFinderService, _el, _contentDensityService) {
+        super();
+        this._cdr = _cdr;
+        this._dialogService = _dialogService;
+        this._appFinderService = _appFinderService;
+        this._el = _el;
+        this.closeMenu = new EventEmitter();
+        this.isAllSelected = true;
+        this.contentDensity$ = _contentDensityService.contentDensity.asObservable();
+        this.appGroups$ = this._appFinderService.appGroups$.pipe(map((appGroups) => {
+            appGroups.forEach((cat) => {
+                this._appFinderService.loadAppsByAppGroup(appGroups, cat);
+            });
+            return appGroups;
+        }));
+        this.selectedAppGroup$ = this._appFinderService.selectedAppGroup$;
+        this.selectedAppGroupId$ = this._appFinderService.selectedAppGroupId$;
+        this.deviceSize$ = this._appFinderService.deviceSize$;
+        this.pinnedAppInAppTileGroups$ = this._appFinderService.pinnedAppInAppTileGroups$;
+        this.mobile$ = this.deviceSize$.pipe(map((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) => {
+            switch (deviceSize) {
+                case 's':
+                    return 'sm';
+                case 'm':
+                    return 'md';
+                case 'l':
+                    return 'lg';
+                case 'xl':
+                    return 'xl';
+                default:
+                    return 'l';
+            }
+        }));
+    }
+    onSelectedAppGroupChange(appGroupId) {
+        this._changeGroup(appGroupId);
+    }
+    onPinClick(app) {
+        const pinnedAppInTileGroups = this._appFinderService.loadPinnedAppInTileGroups(app);
+        const appTileGroups = this._appFinderService.appTileGroups;
+        const deviceSize = this._appFinderService.deviceSize;
+        const mobile = deviceSize === 's';
+        this._dialogService
+            .open(PinTileComponent, {
+            data: { app, pinnedAppInTileGroups, appTileGroups },
+            minWidth: '350px',
+            minHeight: '420px',
+            draggable: false,
+            mobile,
+            resizable: false,
+            verticalPadding: false,
+            backdropClickCloseable: false
+        })
+            .afterClosed.subscribe((result) => {
+            this._appTileGroupsPinChange(result);
+        });
+    }
+    onRefresh() { }
+    async _appTileGroupsPinChange(result) {
+        try {
+            // Will try to ask for permission
+            this._appFinderService.pinTileChanged(result.appTileGroupsPin, result.app, () => {
+                this._cdr.detectChanges();
+            });
+        }
+        catch (err) {
+            // show msg error
+        }
+        finally {
+            // show toast successful
+        }
+    }
+    _changeGroup(appGroupId) {
+        this.isAllSelected = false;
+        this._appFinderService.selectAppGroup(appGroupId);
+        this._cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverAppFinderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DialogService }, { token: AppFinderService }, { token: i0.ElementRef }, { token: i1$1.ContentDensityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PopoverAppFinderComponent, selector: "bt-popover-app-finder", outputs: { closeMenu: "closeMenu" }, host: { classAttribute: "!tw-min-h-min" }, usesInheritance: true, ngImport: i0, template: "<!-- \r\n<div>\r\n    <div class=\"!tw-px-4 !tw-pt-2\" fd-form-item>\r\n        <fd-input-group\r\n            glyph=\"decline\"\r\n            glyphAriaLabel=\"Clear\"\r\n            placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\r\n            [button]=\"true\"\r\n            [disabled]=\"false\"\r\n            [(ngModel)]=\"searchTerm\"\r\n            (addOnButtonClicked)=\"searchTerm = ''\"\r\n        >\r\n        </fd-input-group>\r\n    </div>\r\n    @for (cat of appGroups$ | async | filterAppsGrouped:searchTerm; track cat.Id) {\r\n    <fd-panel\r\n        fdCompact\r\n        expandAriaLabel=\"Panel Expand\"\r\n        expandAriaLabelledBy=\"panel-compact-1\"\r\n        [expanded]=\"!!searchTerm?.length\"\r\n    >\r\n        <h5 fd-panel-title id=\"panel-compact-1\">{{ cat.Title }}</h5>\r\n        <div fd-panel-content ariaLabel=\"Panel Content\" id=\"panel-content-3\" class=\"!p-0\">\r\n            <ul fd-list [noBorder]=\"false\">\r\n                @for (app of cat.Apps | filterApps:searchTerm; track app.Id) {\r\n                <li fd-list-item>\r\n                    <a fd-list-link [navigated]=\"true\" [dynCommand]=\"app.DynamicCommand\" (click)=\"closeMenu.emit()\">\r\n                        <i fd-list-icon glyph=\"history\"></i>\r\n                        <span fd-list-title>{{ app.Title }}</span>\r\n                        <span fd-list-secondary>\r\n                            @if(pinnedAppInAppTileGroups$ | async; as pinnedAppInAppTileGroups) {\r\n                            <button\r\n                                ariaLabel=\"Bookmark\"\r\n                                fdType=\"transparent\"\r\n                                title=\"Bookmark\"\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                                            : 'transparent'\r\n                                        : app.$HasPinned\r\n                                        ? 'emphasized'\r\n                                        : 'transparent'\r\n                                \"\r\n                                (click)=\"$event.stopPropagation(); onPinClick(app)\"\r\n                            ></button>\r\n                            }\r\n                        </span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </div>\r\n    </fd-panel>\r\n    }\r\n</div> -->\r\n", styles: [":host{display:block;min-height:100vh}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverAppFinderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-popover-app-finder', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: '!tw-min-h-min'
+                    }, standalone: false, template: "<!-- \r\n<div>\r\n    <div class=\"!tw-px-4 !tw-pt-2\" fd-form-item>\r\n        <fd-input-group\r\n            glyph=\"decline\"\r\n            glyphAriaLabel=\"Clear\"\r\n            placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\r\n            [button]=\"true\"\r\n            [disabled]=\"false\"\r\n            [(ngModel)]=\"searchTerm\"\r\n            (addOnButtonClicked)=\"searchTerm = ''\"\r\n        >\r\n        </fd-input-group>\r\n    </div>\r\n    @for (cat of appGroups$ | async | filterAppsGrouped:searchTerm; track cat.Id) {\r\n    <fd-panel\r\n        fdCompact\r\n        expandAriaLabel=\"Panel Expand\"\r\n        expandAriaLabelledBy=\"panel-compact-1\"\r\n        [expanded]=\"!!searchTerm?.length\"\r\n    >\r\n        <h5 fd-panel-title id=\"panel-compact-1\">{{ cat.Title }}</h5>\r\n        <div fd-panel-content ariaLabel=\"Panel Content\" id=\"panel-content-3\" class=\"!p-0\">\r\n            <ul fd-list [noBorder]=\"false\">\r\n                @for (app of cat.Apps | filterApps:searchTerm; track app.Id) {\r\n                <li fd-list-item>\r\n                    <a fd-list-link [navigated]=\"true\" [dynCommand]=\"app.DynamicCommand\" (click)=\"closeMenu.emit()\">\r\n                        <i fd-list-icon glyph=\"history\"></i>\r\n                        <span fd-list-title>{{ app.Title }}</span>\r\n                        <span fd-list-secondary>\r\n                            @if(pinnedAppInAppTileGroups$ | async; as pinnedAppInAppTileGroups) {\r\n                            <button\r\n                                ariaLabel=\"Bookmark\"\r\n                                fdType=\"transparent\"\r\n                                title=\"Bookmark\"\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                                            : 'transparent'\r\n                                        : app.$HasPinned\r\n                                        ? 'emphasized'\r\n                                        : 'transparent'\r\n                                \"\r\n                                (click)=\"$event.stopPropagation(); onPinClick(app)\"\r\n                            ></button>\r\n                            }\r\n                        </span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </div>\r\n    </fd-panel>\r\n    }\r\n</div> -->\r\n", styles: [":host{display:block;min-height:100vh}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.DialogService }, { type: AppFinderService }, { type: i0.ElementRef }, { type: i1$1.ContentDensityService }], propDecorators: { closeMenu: [{
+                type: Output
+            }] } });
+
+class BarsaPinAppComponent extends BarsaTreeItemComponent {
+    constructor() {
+        super(...arguments);
+        this._appFinderService = inject(AppFinderService);
+        this.appGroups$ = signal([]);
+        this.pinnedAppInAppTileGroups$ = signal({});
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._appFinderService.appGroups$.pipe(takeUntil$1(this._onDestroy$)).subscribe((c) => {
+            this.appGroups$.set(c);
+        });
+        this._appFinderService.pinnedAppInAppTileGroups$.pipe(takeUntil$1(this._onDestroy$)).subscribe((c) => {
+            this.pinnedAppInAppTileGroups$.set(c);
+        });
+    }
+    onPinTap() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaPinAppComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BarsaPinAppComponent, selector: "bt-barsa-pin-app", inputs: { titleTemplateRef: "titleTemplateRef" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"titleTemplateRef\">\r\n    <ng-container *ngTemplateOutlet=\"titleTemplateRef\"></ng-container>\r\n</ng-container>\r\n<button\r\n    fd-button\r\n    [glyph]=\"'pushpin-off'\"\r\n    [fdType]=\"\r\n        pinnedAppInAppTileGroups$()[node.Data.Id]\r\n            ? pinnedAppInAppTileGroups$()[node.Data.Id].length\r\n                ? 'emphasized'\r\n                : 'standard'\r\n            : node.Data.$HasPinned\r\n            ? 'emphasized'\r\n            : 'standard'\r\n    \"\r\n    (click)=\"onPinTap()\"\r\n></button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaPinAppComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-barsa-pin-app', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"titleTemplateRef\">\r\n    <ng-container *ngTemplateOutlet=\"titleTemplateRef\"></ng-container>\r\n</ng-container>\r\n<button\r\n    fd-button\r\n    [glyph]=\"'pushpin-off'\"\r\n    [fdType]=\"\r\n        pinnedAppInAppTileGroups$()[node.Data.Id]\r\n            ? pinnedAppInAppTileGroups$()[node.Data.Id].length\r\n                ? 'emphasized'\r\n                : 'standard'\r\n            : node.Data.$HasPinned\r\n            ? 'emphasized'\r\n            : 'standard'\r\n    \"\r\n    (click)=\"onPinTap()\"\r\n></button>\r\n" }]
+        }], propDecorators: { titleTemplateRef: [{
+                type: Input
+            }] } });
+
+class BarsaTileGroupPageComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this._position = 'absolute';
+        this.moList = signal([]);
+        this.isMobile = getDeviceIsMobile();
+        this.rtl = BarsaApi.LoginFormData.IsRtl;
+        this._logService = inject(LogService);
+        this._activatedRoute = inject(ActivatedRoute);
+        this._cdr = inject(ChangeDetectorRef);
+        this._router = inject(Router);
+        this._localStorage = inject(LocalStorageService);
+        this._breadCrumbService = inject(BreadcrumbService);
+        this._portalService = inject(PortalService);
+        this.loading = signal(false);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.breadcrumbs$ = this._breadCrumbService.breadcrumbs$;
+        this.title = localStorage.getItem('ActiveTile');
+        this.isSimple = this.parameters?.IsSimple || this.settings?.IsSimple;
+        this.listMode = this.parameters?.ListMode || this.settings?.ListMode;
+        if (this.isSimple) {
+            this._position = 'relative';
+        }
+        this.deviceSize = this._portalService.deviceSize;
+        const id = this._activatedRoute.snapshot.params['id'];
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [id],
+            Method: 'GetTileGroupApps',
+            SuccessFn: (e) => {
+                this.moList.set(e.MoDataList);
+            },
+            FailFn: (e) => {
+                this._logService.error(e);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+    }
+    onClose() {
+        this._router.navigate(['../']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTileGroupPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaTileGroupPageComponent, 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.p-b0]=\"true\"\r\n        [class.hide-title]=\"false\"\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-gap-1 tw-flex-wrap\">\r\n        @for(app of moList();track app.Id){\r\n        <ng-container *ngTemplateOutlet=\"tile; context: { $implicit: app, deviceSize: deviceSize }\"></ng-container>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template #tile let-app let-listMode=\"listMode\" let-navigateBack=\"navigateBack\" let-deviceSize=\"deviceSize\">\r\n    <span\r\n        [dynamicCommand]=\"app.DynamicCommand\"\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)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$4.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i3$4.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i5$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i5$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i5$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i5$2.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i5.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i6.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i6.BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "edit", "deviceSize", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTileGroupPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-barsa-tile-group-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [RoutingService], standalone: false, 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.p-b0]=\"true\"\r\n        [class.hide-title]=\"false\"\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-gap-1 tw-flex-wrap\">\r\n        @for(app of moList();track app.Id){\r\n        <ng-container *ngTemplateOutlet=\"tile; context: { $implicit: app, deviceSize: deviceSize }\"></ng-container>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template #tile let-app let-listMode=\"listMode\" let-navigateBack=\"navigateBack\" let-deviceSize=\"deviceSize\">\r\n    <span\r\n        [dynamicCommand]=\"app.DynamicCommand\"\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)}\n"] }]
+        }], propDecorators: { _containerRef: [{
+                type: ViewChild,
+                args: ['containerRef', { read: ViewContainerRef }]
+            }], _position: [{
+                type: HostBinding,
+                args: ['style.position']
+            }] } });
+
+class BarsaTileSidebarPageComponent extends EmptyPageComponent {
+    constructor() {
+        super(...arguments);
+        this.isMobile = getDeviceIsMobile();
+        this.rtl = BarsaApi.LoginFormData.IsRtl;
+        this._router = inject(Router);
+        this._localStorage = inject(LocalStorageService);
+        this._breadCrumbService = inject(BreadcrumbService);
+        this._routingService = inject(RoutingService); // create new routing service to handle sidebar navigation
+        this.firstReportLoaded = signal(false);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.isFirstPage = false;
+        this._portalService.navigationEnd$.pipe(takeUntil$1(this._onDestroy$)).subscribe((c) => {
+            c && c.url.indexOf('mainside:report') > 0 && this.firstReportLoaded.set(true);
+        });
+        this.breadcrumbs$ = this._breadCrumbService.breadcrumbs$;
+        this._routingService.isSidebar = true;
+        this.title = localStorage.getItem('ActiveTile');
+    }
+    onClose() {
+        this._router.navigate(['../']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTileSidebarPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaTileSidebarPageComponent, 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=\"margin: 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:BarsaFont 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: i3$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i4$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "component", type: i3$4.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i3$4.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$5.MessagePageComponent, selector: "fd-message-page", inputs: ["class", "type", "hasIcon", "glyphFont", "glyph"] }, { kind: "component", type: i5$5.MessagePageTitleComponent, selector: "fd-message-page-title" }, { kind: "directive", type: i1.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i6.BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTileSidebarPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-barsa-tile-sidebar-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [RoutingService], standalone: false, 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=\"margin: 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:BarsaFont 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"] }]
+        }] });
+
+class HomeGroupPipe {
+    constructor() { }
+    transform(appGroups) {
+        return appGroups.filter((c) => c.navigatorTiles && c.navigatorTiles.length > 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HomeGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: HomeGroupPipe, name: "homeGroup" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HomeGroupPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'homeGroup',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [] });
+
+class ActionLinksPipe {
+    transform(tiles) {
+        return tiles.filter((tile) => tile.IsActionLink);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionLinksPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ActionLinksPipe, name: "actionLinks" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionLinksPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'actionLinks',
+                    standalone: false
+                }]
+        }] });
+
+class FilterAppsGroupedPipe {
+    transform(value, term) {
+        return value?.filter((cat) => !!cat.Apps.filter((app) => app.$Caption.includes(term ?? ''))?.length);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterAppsGroupedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FilterAppsGroupedPipe, isStandalone: true, name: "filterAppsGrouped", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterAppsGroupedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterAppsGrouped',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+class FilterAppsPipe {
+    transform(value, term) {
+        if (!Array.isArray(value) || !term) {
+            return value;
+        }
+        return value?.filter((app) => app.$Caption.includes(term));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterAppsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FilterAppsPipe, isStandalone: true, name: "filterApps", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterAppsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterApps',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+
+class TileSizeDirective extends BaseDirective {
+    constructor(_renderer2, _el, _portalService) {
+        super(_el);
+        this._renderer2 = _renderer2;
+        this._el = _el;
+        this._portalService = _portalService;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._portalService.deviceSize$.pipe(takeUntil$1(this._onDestroy$)).subscribe((c) => {
+            if (c === 's') {
+                this._renderer2.addClass(this._el.nativeElement.firstChild, 'fd-tile--s');
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileSizeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.PortalService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TileSizeDirective, selector: "[tileSize]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TileSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tileSize]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.PortalService }] });
+
+const extendHomeRouter = [
+    {
+        path: 'appgroupsidebar',
+        component: BarsaTileSidebarPageComponent,
+        canActivate: [AuthGuard],
+        data: {
+            pageData: {
+                Module: 'BarsaHomePage',
+                HasAuthorize: true,
+                Route: '/appgroupsidebar'
+            }
+        },
+        resolve: { pageData: PortalPageResolver, breadcrumb: TileGroupBreadcrumResolver },
+        children: [
+            {
+                path: 'report/:id',
+                outlet: 'mainside',
+                component: ReportNavigatorComponent,
+                data: {
+                    pageData: {
+                        HasAuthorize: false,
+                        Route: '/report',
+                        Module: 'BarsaReportPage'
+                    }
+                }
+            },
+            {
+                path: 'popup',
+                loadChildren: () => import('barsa-novin-ray-core').then((c) => c.BarsaSapUiFormPageModule)
+            },
+            {
+                path: 'formfieldshow',
+                loadChildren: () => import('barsa-novin-ray-core').then((c) => c.BarsaSapUiFormPageModule)
+            }
+        ]
+    }
+];
+const routes = [];
+class BarsaTilesRoutingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTilesRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BarsaTilesRoutingModule, imports: [i3$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTilesRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTilesRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+const components = [
+    ShellbarComponent,
+    SimpleTileComponent,
+    TilesViewerComponent,
+    ProfileTileComponent,
+    FeedTileComponent,
+    FooterTileComponent,
+    TileComponent,
+    LogoTileComponent,
+    NumericTileComponent,
+    FooterEditTileComponent,
+    FormAppFinderComponent,
+    PinTileComponent,
+    ChangeAppTileComponent,
+    CreateAppGroupComponent,
+    MicroTileChartAreaComponent,
+    MicroTileChartCircularComponent,
+    MicroTileChartLineComponent,
+    MicroTileChartStackbarComponent,
+    MicroTileChartComparisonComponent,
+    MicroTileChartBarComponent,
+    MicroTileChartBulletComponent,
+    TilesViewerContainerComponent,
+    NewsTileComponent,
+    ActionsLinkComponent,
+    ActionItemComponent,
+    AppFinderComponent,
+    AppFinderGroupComponent,
+    AppFinderAppListComponent,
+    TilesViewerGroupComponent,
+    FormTileComponent,
+    BarsaShellbarComponent,
+    PopoverAppFinderComponent,
+    BarsaPinAppComponent,
+    BarsaTileGroupPageComponent,
+    BarsaTileSidebarPageComponent
+];
+const pipes = [GroupTilesPipe, TileHomeFilterPipe, HomeGroupPipe, ActionLinksPipe, TilePropPipe];
+const directives = [EmptyListDirective, TileRendererDirective, TileStyleDirective, TileSizeDirective];
+function addTilesPageSidebar(_router) {
+    const config = _router.config;
+    const home = config.find((c) => c.path === 'home');
+    home?.children?.push(...extendHomeRouter);
+    const servicedesk = config.find((c) => c.path === 'servicedesk');
+    servicedesk?.children?.push(...extendHomeRouter);
+    _router.resetConfig(config);
+}
+class BarsaTilesModule extends BaseModule {
+    constructor(dcm, componentFactoryResolver) {
+        super(dcm, componentFactoryResolver, 'BarsaTilesModule');
+        this.dcm = dcm;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.dynamicComponents = [...components];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTilesModule, deps: [{ token: i1.DynamicComponentService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BarsaTilesModule, declarations: [ShellbarComponent,
+            SimpleTileComponent,
+            TilesViewerComponent,
+            ProfileTileComponent,
+            FeedTileComponent,
+            FooterTileComponent,
+            TileComponent,
+            LogoTileComponent,
+            NumericTileComponent,
+            FooterEditTileComponent,
+            FormAppFinderComponent,
+            PinTileComponent,
+            ChangeAppTileComponent,
+            CreateAppGroupComponent,
+            MicroTileChartAreaComponent,
+            MicroTileChartCircularComponent,
+            MicroTileChartLineComponent,
+            MicroTileChartStackbarComponent,
+            MicroTileChartComparisonComponent,
+            MicroTileChartBarComponent,
+            MicroTileChartBulletComponent,
+            TilesViewerContainerComponent,
+            NewsTileComponent,
+            ActionsLinkComponent,
+            ActionItemComponent,
+            AppFinderComponent,
+            AppFinderGroupComponent,
+            AppFinderAppListComponent,
+            TilesViewerGroupComponent,
+            FormTileComponent,
+            BarsaShellbarComponent,
+            PopoverAppFinderComponent,
+            BarsaPinAppComponent,
+            BarsaTileGroupPageComponent,
+            BarsaTileSidebarPageComponent, GroupTilesPipe, TileHomeFilterPipe, HomeGroupPipe, ActionLinksPipe, TilePropPipe, EmptyListDirective, TileRendererDirective, TileStyleDirective, TileSizeDirective, NotificationGroupComponent,
+            NotificationGroupHeaderComponent], imports: [CommonModule,
+            FormsModule,
+            RouterModule,
+            DragDropModule,
+            CdkTableModule,
+            FundamentalNgxCoreModule,
+            GridListModule,
+            ReactiveFormsModule,
+            BarsaNovinRayCoreModule,
+            BarsaSapUiModule,
+            BarsaTilesRoutingModule,
+            BarsaEchartsModule,
+            IconTabBarComponent,
+            IconTabBarTabComponent,
+            IconTabBarTabContentDirective,
+            FilterAppsGroupedPipe,
+            FilterAppsPipe,
+            SplitterModule], exports: [ShellbarComponent,
+            SimpleTileComponent,
+            TilesViewerComponent,
+            ProfileTileComponent,
+            FeedTileComponent,
+            FooterTileComponent,
+            TileComponent,
+            LogoTileComponent,
+            NumericTileComponent,
+            FooterEditTileComponent,
+            FormAppFinderComponent,
+            PinTileComponent,
+            ChangeAppTileComponent,
+            CreateAppGroupComponent,
+            MicroTileChartAreaComponent,
+            MicroTileChartCircularComponent,
+            MicroTileChartLineComponent,
+            MicroTileChartStackbarComponent,
+            MicroTileChartComparisonComponent,
+            MicroTileChartBarComponent,
+            MicroTileChartBulletComponent,
+            TilesViewerContainerComponent,
+            NewsTileComponent,
+            ActionsLinkComponent,
+            ActionItemComponent,
+            AppFinderComponent,
+            AppFinderGroupComponent,
+            AppFinderAppListComponent,
+            TilesViewerGroupComponent,
+            FormTileComponent,
+            BarsaShellbarComponent,
+            PopoverAppFinderComponent,
+            BarsaPinAppComponent,
+            BarsaTileGroupPageComponent,
+            BarsaTileSidebarPageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTilesModule, providers: [
+            TilesService,
+            AppFinderService,
+            LowerCasePipe,
+            {
+                provide: APP_INITIALIZER,
+                useFactory: (_router) => () => addTilesPageSidebar(_router),
+                deps: [Router],
+                multi: true
+            }
+        ], imports: [CommonModule,
+            FormsModule,
+            RouterModule,
+            DragDropModule,
+            CdkTableModule,
+            FundamentalNgxCoreModule,
+            GridListModule,
+            ReactiveFormsModule,
+            BarsaNovinRayCoreModule,
+            BarsaSapUiModule,
+            BarsaTilesRoutingModule,
+            BarsaEchartsModule,
+            IconTabBarComponent,
+            IconTabBarTabComponent,
+            SplitterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTilesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    schemas: [NO_ERRORS_SCHEMA],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        DragDropModule,
+                        CdkTableModule,
+                        FundamentalNgxCoreModule,
+                        GridListModule,
+                        ReactiveFormsModule,
+                        BarsaNovinRayCoreModule,
+                        BarsaSapUiModule,
+                        BarsaTilesRoutingModule,
+                        BarsaEchartsModule,
+                        IconTabBarComponent,
+                        IconTabBarTabComponent,
+                        IconTabBarTabContentDirective,
+                        FilterAppsGroupedPipe,
+                        FilterAppsPipe,
+                        SplitterModule
+                    ],
+                    providers: [
+                        TilesService,
+                        AppFinderService,
+                        LowerCasePipe,
+                        {
+                            provide: APP_INITIALIZER,
+                            useFactory: (_router) => () => addTilesPageSidebar(_router),
+                            deps: [Router],
+                            multi: true
+                        }
+                    ],
+                    declarations: [
+                        ...components,
+                        ...pipes,
+                        ...directives,
+                        NotificationGroupComponent,
+                        NotificationGroupHeaderComponent
+                    ],
+                    exports: [...components]
+                }]
+        }], ctorParameters: () => [{ type: i1.DynamicComponentService }, { type: i0.ComponentFactoryResolver }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionItemComponent, ActionsLinkComponent, AppFinderAppListComponent, AppFinderComponent, AppFinderGroupComponent, BarsaPinAppComponent, BarsaShellbarComponent, BarsaTileGroupPageComponent, BarsaTileSidebarPageComponent, BarsaTilesModule, ChangeAppTileComponent, CreateAppGroupComponent, FeedTileComponent, FooterEditTileComponent, FooterTileComponent, FormAppFinderComponent, FormTileComponent, GroupTilesPipe, LogoTileComponent, MicroTileChartAreaComponent, MicroTileChartBarComponent, MicroTileChartBulletComponent, MicroTileChartCircularComponent, MicroTileChartComparisonComponent, MicroTileChartLineComponent, MicroTileChartStackbarComponent, NewsTileComponent, NumericTileComponent, PinTileComponent, PopoverAppFinderComponent, ProfileTileComponent, ShellbarComponent, SimpleTileComponent, TileComponent, TileHomeFilterPipe, TilePropPipe, TilesService, TilesViewerComponent, TilesViewerContainerComponent, TilesViewerGroupComponent, TilesViewerService, addTilesPageSidebar };
+//# sourceMappingURL=barsa-tiles.mjs.map