barsa-tiles 1.0.336 → 1.0.337

package/fesm2015/barsa-tiles.mjs

@@ -1,10 +1,14 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostListener, Pipe, HostBinding, EventEmitter, Directive, Output, Injectable, ViewChild, TemplateRef, Inject, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import * as i1$2 from 'barsa-novin-ray-core';
-import { TilePropsComponent, BaseComponent, PreventDefaulEvent, BarsaApi, BaseDirective, IntersectionStatus, APP_VERSION, BaseModule, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
-import * as i1 from '@angular/common';
+import { Injectable, Component, ChangeDetectionStrategy, Input, HostListener, Pipe, HostBinding, EventEmitter, Directive, Output, ViewChild, TemplateRef, Inject, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as i1 from 'barsa-novin-ray-core';
+import { BarsaApi, TilePropsComponent, BaseComponent, PreventDefaulEvent, BaseDirective, IntersectionStatus, APP_VERSION, 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 { TabListComponent, CarouselComponent, ComboboxComponent, FundamentalNgxCoreModule, GridListModule } from '@fundamental-ngx/core';
+import * as i1$2 from '@angular/common';
 import { DOCUMENT, CommonModule, LowerCasePipe } from '@angular/common';
-import * as i1$1 from '@fundamental-ngx/core/tile';
+import * as i1$3 from '@fundamental-ngx/core/tile';
 import * as i2$1 from '@fundamental-ngx/core/button';
 import * as i3 from '@fundamental-ngx/core/menu';
 import * as i6 from 'barsa-sap-ui';
@@ -17,18 +21,14 @@ import * as i6$1 from '@fundamental-ngx/core/layout-panel';
 import * as i9 from '@fundamental-ngx/core/title';
 import * as i8 from '@fundamental-ngx/core/panel';
 import * as i4 from '@fundamental-ngx/core/toolbar';
-import { takeUntil, startWith, shareReplay, distinctUntilChanged, filter, tap, concatMap, debounceTime, exhaustMap, finalize, map, withLatestFrom } from 'rxjs/operators';
 import * as i2$3 from '@fundamental-ngx/core/avatar';
 import * as i4$1 from '@fundamental-ngx/core/card';
 import * as i5 from '@fundamental-ngx/core/fixed-card-layout';
 import * as i6$2 from '@fundamental-ngx/core/list';
 import * as i5$1 from '@fundamental-ngx/platform/shared';
 import * as i6$3 from '@fundamental-ngx/platform/search-field';
-import { Subject, BehaviorSubject, of, from, interval, combineLatest, forkJoin } from 'rxjs';
-import * as i1$3 from '@angular/forms';
+import * as i1$4 from '@angular/forms';
 import { UntypedFormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$4 from '@fundamental-ngx/core';
-import { TabListComponent, CarouselComponent, ComboboxComponent, FundamentalNgxCoreModule, GridListModule } from '@fundamental-ngx/core';
 import * as i5$2 from '@fundamental-ngx/core/bar';
 import * as i6$4 from '@fundamental-ngx/core/form';
 import * as i7 from '@fundamental-ngx/core/input-group';
@@ -50,1015 +50,1120 @@ import * as i4$2 from '@fundamental-ngx/core/notification';
 import { CdkTableModule } from '@angular/cdk/table';
 import { FundamentalNgxPlatformModule } from '@fundamental-ngx/platform';
 
-class BaseTileComponent extends TilePropsComponent {
-    get settings() {
-        var _a, _b;
-        const data = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.Component) === null || _b === void 0 ? void 0 : _b.Settings;
-        return data ? data : this.parameters;
-    }
-    get title() {
-        return this.data.TileTitle;
+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._edithomeSource = new BehaviorSubject(false);
+        this._componentSettings$ = new Subject();
+        BarsaApi.Bw.TilesService = this;
+        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 subtitle() {
-        return this.data.Subtitle;
+    get componentSettings$() {
+        return this._componentSettings$.asObservable();
     }
-    get double() {
-        return this.settings.TileSetting.IsDouble;
+    get appTileGroups() {
+        return this._appTileGroupsSource.getValue();
     }
-    get badge() {
-        return this.settings.TileSetting.Badge;
+    ngOnDestroy() {
+        this._OnDestroy$.next();
     }
-    get footer() {
-        return this.settings.TileSetting.Footer;
+    _onApplication_GlobalRefreshTile(sender, appTilesTitle) {
+        const allApps = this._appTileGroupsSource.getValue();
+        const appTiles = [];
+        if (allApps) {
+            appTilesTitle.forEach((c) => {
+                const selectedTile = this.findAppTileWithKey(allApps, 'AppTile.$Caption', c);
+                if (selectedTile) {
+                    appTiles.push(selectedTile);
+                }
+            });
+            this._updateAppTileFromNotification(allApps, appTiles);
+            this._appTileGroupsSource.next(allApps);
+        }
     }
-    get tileSetting() {
-        return this.settings.TileSetting;
+    _updateAppTileFromNotification(allApps, appTiles) {
+        if (!(appTiles === null || appTiles === void 0 ? void 0 : appTiles.length)) {
+            return;
+        }
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [appTiles.map((c) => c.AppTile.Id)],
+            Method: 'RefreshAppTiles',
+            SuccessFn: (result) => {
+                result.MoDataList.forEach((c) => this.updateAppTile(allApps, c));
+                this._appTileGroupsSource.next(Object.assign({}, allApps));
+            },
+            FailFn: () => { }
+        });
     }
-    setEditHome(val) {
-        this.edit = val;
-        this._cdr.detectChanges();
+    loadAppTileGroups(appTileGroup) {
+        var _a;
+        if (!appTileGroup || appTileGroup.$TilesLoaded) {
+            return;
+        }
+        const allApps = this._appTileGroupsSource.getValue();
+        if (allApps) {
+            const selectedAppTilegroup = allApps === null || allApps === void 0 ? void 0 : allApps.MoDataList.find((c) => c.Id === appTileGroup.Id);
+            if (selectedAppTilegroup) {
+                this._loadAppTilesOfAppTileGroup(selectedAppTilegroup, allApps);
+                (_a = selectedAppTilegroup.$Children) === null || _a === void 0 ? void 0 : _a.forEach((subGroup) => {
+                    this._loadAppTilesOfAppTileGroup(subGroup, allApps);
+                });
+            }
+        }
     }
-    onTileClick() {
-        if (this.context) {
-            this.context.FireEvent('click', this.context);
+    saveTilesStackContent(tilesStackContent) {
+        const userPortalSettings = this._portalService.userPortalSettings;
+        if (userPortalSettings == null) {
+            return Promise.resolve();
         }
+        userPortalSettings.TilesStackContent = tilesStackContent;
+        userPortalSettings.$State = 'Modified';
+        return this._saveUserPortalSettings(userPortalSettings).then(() => this._portalService.setUserPortalSettings(userPortalSettings));
     }
-}
-BaseTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BaseTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BaseTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BaseTileComponent, selector: "bt-base-tile", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BaseTileComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'bt-base-tile',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-class BaseBtTileComponent extends BaseTileComponent {
-    ngOnInit() {
-        super.ngOnInit();
-        this._renderer2.addClass(this.el.nativeElement, 'barsa-tile');
+    loadUserPortalSettings() {
+        return this._portalService.getData('UserPortalSetting').pipe(concatMap((data) => {
+            if (data) {
+                return of(data);
+            }
+            else {
+                return this.loadFromServerUserPortalSetting();
+            }
+        }));
     }
-}
-BaseBtTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BaseBtTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BaseBtTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: "14.2.7", ngImport: i0, type: BaseBtTileComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'bt-base-bt-tile',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-class FooterTileComponent extends BaseComponent {
-    get twoColumn() {
-        return this.settings.TwoColumn;
+    refreshTile(appTile) {
+        return new Promise((resolve, reject) => {
+            BarsaApi.Bw.RunBlMethodAsync({
+                Parameters: [appTile.Id],
+                Method: 'RefreshTile',
+                SuccessFn: (newAppTile) => {
+                    var _a;
+                    if ((_a = newAppTile.MoDataList) === null || _a === void 0 ? void 0 : _a.length) {
+                        resolve(newAppTile.MoDataList[0]);
+                    }
+                    reject(`refresh tile not found apptile width title: ${appTile.Title}`);
+                },
+                FailFn: () => {
+                    reject(null);
+                }
+            });
+        });
     }
-    get firstSection() {
-        return this.settings.FirstSection;
+    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);
+                }
+            });
+        }));
     }
-    get secondSection() {
-        return this.settings.SecondSection;
+    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);
+        }));
     }
-}
-FooterTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FooterTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FooterTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FooterTileComponent, selector: "bt-footer-tile", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: "<div fd-tile-footer [twoColumn]=\"twoColumn\">\r\n    <ng-container *ngIf=\"twoColumn; else oneColumn\">\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    </ng-container>\r\n    <ng-template #oneColumn>\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    </ng-template>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i1$1.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$1.TileRefreshDirective, selector: "[fdTileRefresh], [fd-tile-refresh]", inputs: ["glyph", "class", "ariaLabel"] }, { kind: "directive", type: i1$1.TileFooterTextDirective, selector: "[fdTileFooterText], [fd-tile-footer-text]" }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i6.SapFontPipe, name: "sapFont" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FooterTileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-footer-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fd-tile-footer [twoColumn]=\"twoColumn\">\r\n    <ng-container *ngIf=\"twoColumn; else oneColumn\">\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    </ng-container>\r\n    <ng-template #oneColumn>\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    </ng-template>\r\n</div>\r\n" }]
-        }], propDecorators: { settings: [{
-                type: Input
-            }] } });
-
-class TileComponent extends TilePropsComponent {
-    constructor() {
-        super(...arguments);
-        this.runningCommand = false;
+    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);
+        }));
     }
-    onClick(ev) {
-        if (this.edit || this.disableClick || this.runningCommand || !this.dynamicCommand) {
-            return false;
+    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);
         }
-        PreventDefaulEvent(ev);
-        const command = this.dynamicCommand;
-        const e = { command, DynamicSetting: null };
-        this.runningCommand = true;
-        this._cdr.detectChanges();
-        BarsaApi.Common.CustomCodeManager.RunDynamicCommand(command.Id, e, () => {
-            this.runningCommand = false;
-            this._cdr.detectChanges();
-        });
-        return false;
+        return from(new Promise((resolve, reject) => {
+            BarsaApi.Bw.RunBlMethodAsync({
+                Parameters: [selectedGroup.Id, appTile.Id, appTile.Title, appTile.Subtitle],
+                Method: 'ChangeAppTileSetting',
+                SuccessFn: () => {
+                    this._nextAllAppTileGroups(allApps);
+                    resolve(selectedGroup);
+                },
+                FailFn: () => {
+                    reject(null);
+                }
+            });
+        })).pipe(tap((appGroupSetting) => this.updataAppTileSetting(selectedGroup, appGroupSetting)));
     }
-}
-TileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TileComponent, selector: "bt-tile", inputs: { type: "type", footerTemplate: "footerTemplate", footer: "footer", disableClick: "disableClick", title: "title", subtitle: "subtitle", isDouble: "isDouble", edit: "edit", dynamicCommand: "dynamicCommand" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<fd-tile [type]=\"type\" [double]=\"isDouble\" [action]=\"edit\">\n    <ng-container *ngIf=\"edit && !data.Locked\">\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\n    </ng-container>\n    <div fd-tile-header>\n        <h1 fd-tile-title>\n            {{ title | bbbTranslate }}\n        </h1>\n        <h2 fd-tile-subtitle>\n            {{ subtitle | bbbTranslate }}\n        </h2>\n    </div>\n    <ng-content></ng-content>\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\n</fd-tile>\n<ng-template #defaultFooter>\n    <bt-footer-tile *ngIf=\"footer\" [settings]=\"footer\"></bt-footer-tile>\n</ng-template>\n<fd-menu #menu>\n    <li fd-menu-item>\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\n        </a>\n    </li>\n</fd-menu>\n<bsu-mask *ngIf=\"runningCommand\"></bsu-mask>\n", styles: [":host,fd-tile{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i3.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "directive", type: i1$1.TileHeaderDirective, selector: "[fdTileHeader], [fd-tile-header]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileTitleDirective, selector: "[fdTileTitle], [fd-tile-title]" }, { kind: "directive", type: i1$1.TileSubtitleDirective, selector: "[fdTileTitle], [fd-tile-subtitle]" }, { kind: "directive", type: i1$1.TileActionCloseDirective, selector: "[fdTileActionClose], [fd-tile-action-close]", inputs: ["class"] }, { kind: "directive", type: i1$1.TileActionIndicatorDirective, selector: "[fdTileActionIndicator], [fd-tile-action-indicator]", inputs: ["class"] }, { kind: "component", type: i6.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: FooterTileComponent, selector: "bt-footer-tile", inputs: ["settings"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-tile [type]=\"type\" [double]=\"isDouble\" [action]=\"edit\">\n    <ng-container *ngIf=\"edit && !data.Locked\">\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\n    </ng-container>\n    <div fd-tile-header>\n        <h1 fd-tile-title>\n            {{ title | bbbTranslate }}\n        </h1>\n        <h2 fd-tile-subtitle>\n            {{ subtitle | bbbTranslate }}\n        </h2>\n    </div>\n    <ng-content></ng-content>\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\n</fd-tile>\n<ng-template #defaultFooter>\n    <bt-footer-tile *ngIf=\"footer\" [settings]=\"footer\"></bt-footer-tile>\n</ng-template>\n<fd-menu #menu>\n    <li fd-menu-item>\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\n        </a>\n    </li>\n</fd-menu>\n<bsu-mask *ngIf=\"runningCommand\"></bsu-mask>\n", styles: [":host,fd-tile{display:block}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], footerTemplate: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], disableClick: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], isDouble: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }], dynamicCommand: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class TilePropPipe {
-    transform(data, prop, parameters) {
-        if (data) {
-            if (prop === 'Title') {
-                return data.TileTitle;
-            }
-            if (prop === 'Subtitle') {
-                return data.Subtitle;
-            }
-            if (prop === 'DynamicCommand') {
-                return data['DynamicCommand'];
-            }
-            return data.Component.Settings.TileSetting[prop];
-        }
-        return parameters ? parameters.TileSetting[prop] : '';
+    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();
     }
-}
-TilePropPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilePropPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TilePropPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: TilePropPipe, name: "tileProp" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilePropPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'tileProp'
-                }]
-        }] });
-
-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();
-            },
+    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: () => { }
-        };
-        BarsaApi.Bw.RunBlMethodAsync(options);
+        });
     }
-}
-FormTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FormTileComponent, selector: "bt-form-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    [disableClick]=\"true\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n>\n    <div fd-tile-content>\n        <bnrc-form *ngIf=\"params\" [params]=\"params\"></bnrc-form>\n    </div>\n</bt-tile>\n", styles: [":host{display:block}bnrc-form{z-index:3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i1$2.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "formPanelCtrlId"], outputs: ["titleChanged", "moChanged", "formClose", "formRendered"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormTileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-form-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    [disableClick]=\"true\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n>\n    <div fd-tile-content>\n        <bnrc-form *ngIf=\"params\" [params]=\"params\"></bnrc-form>\n    </div>\n</bt-tile>\n", styles: [":host{display:block}bnrc-form{z-index:3}\n"] }]
-        }] });
-
-class ActionItemComponent extends TileComponent {
-}
-ActionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionItemComponent, selector: "bt-action-item", usesInheritance: true, ngImport: i0, template: "<div [class.action-item-edit-mode]=\"edit\" class=\"action-item\">\n    <h1 fd-tile-title>{{ title }}</h1>\n    <h2 fd-tile-subtitle *ngIf=\"subtitle\">{{ subtitle }}</h2>\n\n    <div *ngIf=\"edit && !data.Locked\" class=\"buttons\">\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\n    </div>\n    <fd-menu #menu>\n        <li fd-menu-item>\n            <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\n                <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\n            </a>\n        </li>\n    </fd-menu>\n</div>\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-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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i3.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "directive", type: i1$1.TileTitleDirective, selector: "[fdTileTitle], [fd-tile-title]" }, { kind: "directive", type: i1$1.TileSubtitleDirective, selector: "[fdTileTitle], [fd-tile-subtitle]" }, { kind: "directive", type: i1$1.TileActionCloseDirective, selector: "[fdTileActionClose], [fd-tile-action-close]", inputs: ["class"] }, { kind: "directive", type: i1$1.TileActionIndicatorDirective, selector: "[fdTileActionIndicator], [fd-tile-action-indicator]", inputs: ["class"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-action-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.action-item-edit-mode]=\"edit\" class=\"action-item\">\n    <h1 fd-tile-title>{{ title }}</h1>\n    <h2 fd-tile-subtitle *ngIf=\"subtitle\">{{ subtitle }}</h2>\n\n    <div *ngIf=\"edit && !data.Locked\" class=\"buttons\">\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\n    </div>\n    <fd-menu #menu>\n        <li fd-menu-item>\n            <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\n                <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\n            </a>\n        </li>\n    </fd-menu>\n</div>\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-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 {
-    ngOnInit() {
-        var _a;
-        super.ngOnInit();
-        this.hide = !((_a = this.actionsLink) === null || _a === void 0 ? void 0 : _a.length);
+    updateAppTile(allApps, appTile) {
+        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);
+        }
     }
-}
-ActionsLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionsLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionsLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", edit: "edit" }, host: { properties: { "class.hide": "this.hide" } }, usesInheritance: true, ngImport: i0, template: "<bt-action-item\n    *ngFor=\"let actionItem of actionsLink\"\n    cdkDrag\n    [data]=\"actionItem\"\n    [edit]=\"edit\"\n    [title]=\"actionItem | tileProp: 'Title'\"\n    [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\n    [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\n    [footer]=\"actionItem | tileProp: 'Footer'\"\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n    [mo]=\"actionItem\"\n>\n</bt-action-item>\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}bt-action-item{margin-top:auto;margin-bottom:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], 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: "14.2.7", ngImport: i0, type: ActionsLinkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-actions-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-action-item\n    *ngFor=\"let actionItem of actionsLink\"\n    cdkDrag\n    [data]=\"actionItem\"\n    [edit]=\"edit\"\n    [title]=\"actionItem | tileProp: 'Title'\"\n    [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\n    [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\n    [footer]=\"actionItem | tileProp: 'Footer'\"\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n    [mo]=\"actionItem\"\n>\n</bt-action-item>\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}bt-action-item{margin-top:auto;margin-bottom:auto}\n"] }]
-        }], propDecorators: { hide: [{
-                type: HostBinding,
-                args: ['class.hide']
-            }], actionsLink: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }] } });
-
-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();
+    updataAppTileSetting(selectedGroup, appGroupSetting) {
+        const allApps = this.appTileGroups;
+        allApps === null || allApps === void 0 ? void 0 : allApps.MoDataList.forEach((appGroup) => {
+            if (appGroup.Id === selectedGroup.Id) {
+                appGroup.UserAppTileGroupSetting = appGroupSetting;
+            }
+        });
+        this._appTileGroupsSource.next(allApps);
     }
-    ngOnInit() {
-        super.ngOnInit();
-        if (!this.component) {
-            return;
+    addAppGroup(mo) {
+        const allApps = this.appTileGroups;
+        if (allApps) {
+            allApps.MoDataList.push(mo);
+            this._appTileGroupsSource.next(allApps);
         }
-        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.hideClick.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
-                this.hideClick.emit();
+    }
+    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);
+                }
             });
-            instance.renameClick.pipe(takeUntil(this._onDestroy$)).subscribe(() => this.renameClick.emit());
-            this._vcr.insert(componentRef.hostView);
-            this._tileRef = componentRef;
-            this._cdr.detectChanges();
+        }));
+    }
+    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 === null || allApps === void 0 ? void 0 : allApps.TypeDefId
+        }));
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [groupChanges, visible, app.Id],
+            Method: 'TilePinChanged',
+            SuccessFn: (settings) => {
+                this._tilePinChange(appTileGroupsPin, allApps);
+                callback(settings);
+            },
+            FailFn: () => {
+                // TODO show error
+            }
         });
     }
-    ngOnChanges(changes) {
-        const { edit } = changes;
-        if (edit && !edit.firstChange) {
-            this._tileRef.instance.setEditHome(edit.currentValue);
+    _tilePinChange(appTileGroupsPin, allApps) {
+        for (const appTileGroupPin of appTileGroupsPin) {
+            let selectedAppGroup;
+            const appGroupId = appTileGroupPin.appTileGroup.Id;
+            allApps === null || allApps === void 0 ? void 0 : allApps.MoDataList.forEach((c) => {
+                var _a;
+                if (c.Id === appGroupId) {
+                    selectedAppGroup = c;
+                }
+                else if (!selectedAppGroup) {
+                    selectedAppGroup = (_a = c.$Children) === null || _a === void 0 ? void 0 : _a.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);
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        if (this._tileRef) {
-            this._tileRef.destroy();
-        }
+    loadShellbar() {
+        this._portalService
+            .ReportExecutePromise('Shellbar')
+            .then((moForReportModel) => this.shellbarSource.next(moForReportModel.MoDataList[0]));
     }
-}
-TileRendererDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TileRendererDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.PortalService }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TileRendererDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: TileRendererDirective, selector: "[tileRenderer]", inputs: { component: "component", data: "data", edit: "edit" }, outputs: { hideClick: "hideClick", renameClick: "renameClick" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TileRendererDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tileRenderer]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.PortalService }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { component: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }], hideClick: [{
-                type: Output
-            }], renameClick: [{
-                type: Output
-            }] } });
-
-class TilesViewerGroupComponent extends BaseComponent {
-    constructor() {
-        super();
-        this.tilesDropped = new EventEmitter();
-        this.hideAppTileClick = new EventEmitter();
-        this.renameAppTileClick = new EventEmitter();
-        this.toggleGroup = new EventEmitter();
-        this.resetGroup = new EventEmitter();
-        this.deleteGroup = new EventEmitter();
+    loadAllAppTileGroups() {
+        this._portalService
+            .ReportExecute('AllAppTileGroups')
+            .subscribe((allApps) => this._nextAllAppTileGroups(allApps));
     }
-    onDrop(appTileGroup, event) {
-        if (!this.edit || appTileGroup.Locked) {
-            return;
+    _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;
         }
-        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);
+    getTileGroups() {
+        return this._appTileGroupsSource.getValue();
     }
-    onReset(appTileGroup) {
-        this.resetGroup.emit(appTileGroup);
+    setEditHome(edit) {
+        this._edithomeSource.next(edit);
     }
-}
-TilesViewerGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TilesViewerGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: { appTileGroup: "appTileGroup", stackContent: "stackContent", edit: "edit", 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 [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}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:3px;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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i6$1.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i6$1.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i6$1.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i6$1.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i6$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "component", type: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i4.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "edit"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}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:3px;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}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { appTileGroup: [{
-                type: Input
-            }], stackContent: [{
-                type: Input
-            }], edit: [{
-                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 {
-    constructor(templateRef, viewContainer, bbbPipe) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.bbbPipe = bbbPipe;
-        this.hasView = false;
+    _allAppsLoaded(moForReportModel) {
+        moForReportModel.MoDataList.forEach((c) => {
+            this._prepareNavigator(c);
+        });
+        this._setHomeAppTileGroups(moForReportModel.MoDataList);
     }
-    set emptyList(list) {
-        if (!list || (!list.length && !this.hasView)) {
-            const _view = this.viewContainer.createEmbeddedView(this.templateRef);
-            this.setNoData(_view);
-            this.hasView = true;
+    _loadAppTilesOfAppTileGroup(selectedAppTilegroup, allApps) {
+        const callback = () => {
+            this._nextAllAppTileGroups(allApps);
+        };
+        if (!selectedAppTilegroup.UserAppTileGroupSetting) {
+            this._loadAppTilesByAppTileGroup(selectedAppTilegroup, callback);
         }
-        else if (list && list.length > 0 && this.hasView) {
-            this.viewContainer.clear();
-            this.hasView = false;
+        else {
+            this._loadAppTilesByAppTileGroupSetting(selectedAppTilegroup, callback);
         }
     }
-    setNoData(view) {
-        view.rootNodes[0].innerHTML = this.bbbPipe.transform('NoData');
-    }
-}
-EmptyListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: EmptyListDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1$2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Directive });
-EmptyListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: EmptyListDirective, selector: "[emptyList]", inputs: { emptyList: "emptyList" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: EmptyListDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[emptyList]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1$2.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);
-    }
-}
-AppFinderAppListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderAppListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AppFinderAppListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: "<ng-container *ngIf=\"appGroup\">\r\n    <h5 fd-title *emptyList=\"appGroup.Apps\"></h5>\r\n    <ng-container *ngIf=\"(appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }).length > 0\">\r\n        <fd-fixed-card-layout [disableDragDrop]=\"true\">\r\n            <ng-container\r\n                *ngFor=\"let app of appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }; let i = index\"\r\n            >\r\n                <fd-card *fdCardDef=\"i\">\r\n                    <fd-card-header [dynCommand]=\"app.DynamicCommand\" [mo]=\"app\">\r\n                        <fd-avatar *ngIf=\"app.Icon\" [glyph]=\"app.Icon\" size=\"s\" [title]=\"app.Title\"></fd-avatar>\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-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            </ng-container>\r\n        </fd-fixed-card-layout>\r\n    </ng-container>\r\n</ng-container>\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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i4$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i4$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i4$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "directive", type: i4$1.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i5.FixedCardLayoutComponent, selector: "fd-fixed-card-layout", inputs: ["disableDragDrop", "dragStartDelay", "cardMinimumWidth", "columnsWidthConfig", "maxColumns"], outputs: ["layoutChange", "cardDraggedDropped"] }, { kind: "directive", type: i5.CardDefinitionDirective, selector: "[fdCardDef]", inputs: ["fdCardDef"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i1$2.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: EmptyListDirective, selector: "[emptyList]", inputs: ["emptyList"] }, { kind: "pipe", type: i1$2.FilterStringPipe, name: "filterStr" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderAppListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-app-finder-app-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"appGroup\">\r\n    <h5 fd-title *emptyList=\"appGroup.Apps\"></h5>\r\n    <ng-container *ngIf=\"(appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }).length > 0\">\r\n        <fd-fixed-card-layout [disableDragDrop]=\"true\">\r\n            <ng-container\r\n                *ngFor=\"let app of appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }; let i = index\"\r\n            >\r\n                <fd-card *fdCardDef=\"i\">\r\n                    <fd-card-header [dynCommand]=\"app.DynamicCommand\" [mo]=\"app\">\r\n                        <fd-avatar *ngIf=\"app.Icon\" [glyph]=\"app.Icon\" size=\"s\" [title]=\"app.Title\"></fd-avatar>\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-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            </ng-container>\r\n        </fd-fixed-card-layout>\r\n    </ng-container>\r\n</ng-container>\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();
+    _loadAppTilesByAppTileGroup(appGroup, callback) {
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [appGroup.Id],
+            Method: 'LoadAllAppTilesByAppTileGroup',
+            SuccessFn: (appTiles) => {
+                this._updateAppTilesOfAppTileGroup(appGroup, appTiles);
+                callback();
+            },
+            FailFn: () => {
+                // TODO show error
+            }
+        });
     }
-    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);
+    _updateAppTilesOfAppTileGroup(selectedAppTilegroup, appTiles) {
+        var _a;
+        if (this.appTileGroups) {
+            selectedAppTilegroup = Object.assign(Object.assign({}, selectedAppTilegroup), { $TilesLoaded: true });
+            appTiles.MoDataList.forEach((element) => {
+                var _a, _b, _c;
+                element.Component = (_a = element.A_App_Component) !== null && _a !== void 0 ? _a : element.A_AppTile_App_Component;
+                element.DynamicCommand = (_b = element.A_App_DynamicCommand) !== null && _b !== void 0 ? _b : element.A_AppTile_App_DynamicCommand;
+                element.Predefined = (_c = element.Predefined) !== null && _c !== void 0 ? _c : element.A_AppTile_Predefined;
+            });
+            const apptileGroupIndex = (_a = this.appTileGroups) === null || _a === void 0 ? void 0 : _a.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] = Object.assign({}, tileGroup);
+            }
+            else {
+                this.appTileGroups.MoDataList[apptileGroupIndex] = selectedAppTilegroup;
             }
         }
     }
-    OnMenuGroupClick(group) {
-        this.selectedIdChange.emit(group.Id);
+    _loadAppTilesByAppTileGroupSetting(appTileGroup, callback) {
+        BarsaApi.Bw.RunBlMethodAsync({
+            Parameters: [appTileGroup.Id],
+            Method: 'LoadAllAppTilesByUserAppTileGroupSettings',
+            SuccessFn: (appTiles) => {
+                this._updateAppTilesOfAppTileGroup(appTileGroup, appTiles);
+                callback();
+            },
+            FailFn: () => {
+                // TODO show error
+            }
+        });
     }
-    OnGroupClick(group) {
-        this.selectedIdChange.emit(group.Id);
+    _nextAllAppTileGroups(newAllApps = null) {
+        const allApps = newAllApps !== null && newAllApps !== void 0 ? newAllApps : this._appTileGroupsSource.getValue();
+        this._appTileGroupsSource.next(allApps ? Object.assign({}, allApps) : null);
     }
-}
-AppFinderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AppFinderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: AppFinderGroupComponent, selector: "bt-app-finder-group", inputs: { appGroups: "appGroups", selectedId: "selectedId", listMode: "listMode" }, outputs: { selectedIdChange: "selectedIdChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"listMode; else menuTpl\">\r\n    <div class=\"app-groups\">\r\n        <ul fd-list [selection]=\"true\">\r\n            <li\r\n                fd-list-item\r\n                *ngFor=\"let group of appGroups; let i = index\"\r\n                [selected]=\"group.Id === selectedId\"\r\n                (click)=\"OnGroupClick(group)\"\r\n            >\r\n                <span fd-list-title>\r\n                    {{ group.Title }}\r\n                </span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-container>\r\n<ng-template #menuTpl>\r\n    <li *ngFor=\"let group of appGroups; let i = index\" 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</ng-template>\r\n", styles: [".app-groups{width:25vw;border-left:.0625rem solid var(--sapGroup_TitleBorderColor, #d9d9d9)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i3.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-app-finder-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"listMode; else menuTpl\">\r\n    <div class=\"app-groups\">\r\n        <ul fd-list [selection]=\"true\">\r\n            <li\r\n                fd-list-item\r\n                *ngFor=\"let group of appGroups; let i = index\"\r\n                [selected]=\"group.Id === selectedId\"\r\n                (click)=\"OnGroupClick(group)\"\r\n            >\r\n                <span fd-list-title>\r\n                    {{ group.Title }}\r\n                </span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-container>\r\n<ng-template #menuTpl>\r\n    <li *ngFor=\"let group of appGroups; let i = index\" 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</ng-template>\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();
+    _setHomeAppTileGroups(appGroups) {
+        let newAppGroups = [...appGroups];
+        newAppGroups = newAppGroups
+            .filter((c) => c.Visible)
+            .sort((a, b) => Number(a.navigatorOrderItem) - Number(b.navigatorOrderItem));
+        this._homeAppTileGroupsSource.next(newAppGroups);
     }
-    onSearchSubmit($event) {
-        this.searchTerm = $event.text;
+    _saveUserPortalSettings(userPortalSettings) {
+        return new Promise((resolve, reject) => {
+            BarsaApi.Bw.RunBlMethodAsync({
+                Parameters: [new BarsaApi.Common.MetaObjectWeb(userPortalSettings)],
+                Method: 'SaveUserPortalSettings',
+                SuccessFn: () => {
+                    resolve();
+                },
+                FailFn: () => {
+                    reject(null);
+                }
+            });
+        });
     }
-}
-AppFinderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AppFinderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    <ng-container *ngIf=\"appGroups; else loading\">\r\n        <fd-toolbar [fdType]=\"'solid'\">\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                *ngIf=\"deviceSize === 's'\"\r\n            ></button>\r\n            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n            <fdp-search-field\r\n                fd-toolbar-item\r\n                [contentDensity]=\"contentDensity\"\r\n                [placeholder]=\"'Search' | bbbTranslate\"\r\n                (searchSubmit)=\"onSearchSubmit($event)\"\r\n                [suggestions]=\"[]\"\r\n            ></fdp-search-field>\r\n        </fd-toolbar>\r\n        <div style=\"display: flex; overflow-y: auto\" [style.height]=\"contentHeight\">\r\n            <div class=\"app-groups\">\r\n                <bt-app-finder-group\r\n                    *ngIf=\"deviceSize !== 's'\"\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            </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            <bt-app-finder-group\r\n                *ngIf=\"deviceSize === 's'\"\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        </fd-menu>\r\n    </ng-container>\r\n    <ng-template #loading>\r\n        <bsu-mask></bsu-mask>\r\n    </ng-template>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i4.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i4.ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i5$1.PlatformContentDensityDeprecationDirective, selector: "        fdp-action-bar[contentDensity],        fdp-button[contentDensity],        fdp-object-list-item[contentDensity],        fdp-standard-list-item[contentDensity],        fdp-menu[contentDensity],        fdp-menu-button[contentDensity],        fdp-panel[contentDensity],        fdp-search-field[contentDensity],        fdp-split-menu-button[contentDensity],        fdp-file-uploader[contentDensity],        fdp-upload-collection[contentDensity],        fdp-table[contentDensity],        fdp-multi-input[contentDensity],        fdp-list[contentDensity],        fdp-slider[contentDensity],        fdp-time-picker[contentDensity],        fdp-textarea[contentDensity],        fdp-switch[contentDensity],        fdp-number-step-input[contentDensity],        fdp-select[contentDensity],        fdp-date-picker[contentDensity],        fdp-checkbox[contentDensity],        fdp-checkbox-group[contentDensity],        fdp-combobox[contentDensity],        fdp-datetime-picker[contentDensity],        fdp-input[contentDensity],        fdp-radio-group[contentDensity],        fdp-radio-button[contentDensity],        fdp-multi-combobox[contentDensity],        fdp-input-group-addon-body[contentDensity],        fdp-input-group[contentDensity],        fdp-value-help-dialog[contentDensity],        fdp-filter-single-select[contentDensity],        fdp-filter-multi-select[contentDensity],        fdp-filter-custom[contentDensity]    " }, { kind: "component", type: i6$3.SearchFieldComponent, selector: "fdp-search-field", inputs: ["placeholder", "mobile", "mobileConfig", "disableRefresh", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "directive", type: i1$2.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$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-app-finder', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\">\r\n    <ng-container *ngIf=\"appGroups; else loading\">\r\n        <fd-toolbar [fdType]=\"'solid'\">\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                *ngIf=\"deviceSize === 's'\"\r\n            ></button>\r\n            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n            <fdp-search-field\r\n                fd-toolbar-item\r\n                [contentDensity]=\"contentDensity\"\r\n                [placeholder]=\"'Search' | bbbTranslate\"\r\n                (searchSubmit)=\"onSearchSubmit($event)\"\r\n                [suggestions]=\"[]\"\r\n            ></fdp-search-field>\r\n        </fd-toolbar>\r\n        <div style=\"display: flex; overflow-y: auto\" [style.height]=\"contentHeight\">\r\n            <div class=\"app-groups\">\r\n                <bt-app-finder-group\r\n                    *ngIf=\"deviceSize !== 's'\"\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            </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            <bt-app-finder-group\r\n                *ngIf=\"deviceSize === 's'\"\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        </fd-menu>\r\n    </ng-container>\r\n    <ng-template #loading>\r\n        <bsu-mask></bsu-mask>\r\n    </ng-template>\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 });
+    _updateAppGroupSetting(appGroup, appGroupSetting) {
+        const allApps = this.appTileGroups;
+        const selectedAppGroup = allApps === null || allApps === void 0 ? void 0 : allApps.MoDataList.find((c) => c.Id === appGroup.Id);
+        if (selectedAppGroup && allApps) {
+            selectedAppGroup.UserAppTileGroupSetting = appGroupSetting;
+            this._nextAllAppTileGroups(allApps);
         }
     }
-}
-ChangeAppTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChangeAppTileComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i1$4.DialogRef }, { token: i1$2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-ChangeAppTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\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            fdInitialFocus\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$4.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i6$4.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i6$4.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i6$4.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChangeAppTileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-change-app-tile', changeDetection: ChangeDetectionStrategy.OnPush, 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                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\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            fdInitialFocus\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: function () { return [{ type: i1$3.UntypedFormBuilder }, { type: i1$4.DialogRef }, { type: i1$2.BbbTranslatePipe }]; } });
-
-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._edithomeSource = new BehaviorSubject(false);
-        BarsaApi.Bw.TilesService = this;
-        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();
-    }
-    get appTileGroups() {
-        return this._appTileGroupsSource.getValue();
-    }
-    ngOnDestroy() {
-        this._OnDestroy$.next();
-    }
-    loadAppTileGroups(appTileGroup) {
-        var _a;
-        if (!appTileGroup || appTileGroup.$TilesLoaded) {
-            return;
-        }
-        const allApps = this._appTileGroupsSource.getValue();
-        if (allApps) {
-            const selectedAppTilegroup = allApps === null || allApps === void 0 ? void 0 : allApps.MoDataList.find((c) => c.Id === appTileGroup.Id);
-            if (selectedAppTilegroup) {
-                this._loadAppTilesOfAppTileGroup(selectedAppTilegroup, allApps);
-                (_a = selectedAppTilegroup.$Children) === null || _a === void 0 ? void 0 : _a.forEach((subGroup) => {
-                    this._loadAppTilesOfAppTileGroup(subGroup, allApps);
-                });
-            }
+    findAppTileWithKey(allApps, key, value) {
+        let selectedTile;
+        if (typeof value === 'string') {
+            value = BarsaApi.Common.Util.ReplaceArabicCharchter(value);
         }
-    }
-    saveTilesStackContent(tilesStackContent) {
-        const userPortalSettings = this._portalService.userPortalSettings;
-        if (userPortalSettings == null) {
-            return Promise.resolve();
+        if (!allApps) {
+            return null;
         }
-        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);
+        allApps.MoDataList.forEach((appGroup) => {
+            var _a;
+            if (selectedTile) {
+                return;
             }
-            else {
-                return this.loadFromServerUserPortalSetting();
+            selectedTile = appGroup.navigatorTiles.find((c) => BarsaApi.Common.Util.TryGetValue(c, key, null) === value);
+            if (selectedTile) {
+                return;
             }
-        }));
-    }
-    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);
+            (_a = appGroup.$Children) === null || _a === void 0 ? void 0 : _a.forEach((subGroup) => {
+                selectedTile = subGroup.navigatorTiles.find((c) => BarsaApi.Common.Util.TryGetValue(c, key, null) === value);
+                if (selectedTile) {
+                    return;
                 }
             });
-        }));
+        });
+        return selectedTile;
     }
-    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);
+    findGroupWithAppTileId(allApps, appTileId) {
+        let selectedGroup;
+        if (!allApps) {
+            return null;
+        }
+        allApps.MoDataList.forEach((appGroup) => {
+            var _a;
+            if (selectedGroup) {
+                return;
+            }
+            if (appGroup.navigatorTiles.some((appTile) => appTile.Id === appTileId)) {
+                selectedGroup = appGroup;
+                return;
+            }
+            (_a = appGroup.$Children) === null || _a === void 0 ? void 0 : _a.forEach((subGroup) => {
+                if (subGroup.navigatorTiles.some((appTile) => appTile.Id === appTileId)) {
+                    selectedGroup = subGroup;
+                    return;
                 }
             });
-        })).pipe(tap((appGroupSetting) => {
-            this._updateAppGroupSetting(appGroup, appGroupSetting);
-        }));
+        });
+        return selectedGroup;
     }
-    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);
+    _findGroupWithAppGroupId(allApps, appGroupId) {
+        let selectedGroup;
+        if (!allApps) {
+            return null;
+        }
+        allApps.MoDataList.forEach((appGroup) => {
+            var _a;
+            if (selectedGroup) {
+                return;
+            }
+            if (appGroup.Id === appGroupId) {
+                selectedGroup = appGroup;
+                return;
+            }
+            (_a = appGroup.$Children) === null || _a === void 0 ? void 0 : _a.forEach((subGroup) => {
+                if (subGroup.Id === appGroupId) {
+                    selectedGroup = subGroup;
+                    return;
                 }
             });
-        })).pipe(tap((appGroupSetting) => {
-            this._updateAppGroupSetting(appGroup, appGroupSetting);
-        }));
+        });
+        return selectedGroup;
     }
-    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);
-            }
-        }));
+    _updateAppTileGroupSettings(appTileGroup, setting) {
+        appTileGroup.UserAppTileGroupSetting = setting;
+        appTileGroup = JSON.parse(JSON.stringify(appTileGroup));
+        this._nextAllAppTileGroups();
+        return appTileGroup;
     }
-    changeAppTileSetting(appTile) {
-        const allApps = this.appTileGroups;
-        const selectedGroup = this.findGroupWithAppTileId(allApps, appTile.Id);
-        if (selectedGroup === null) {
-            return of(null);
+    _prepareNavigator(appTileGroup) {
+        var _a, _b, _c;
+        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;
         }
-        return from(new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [selectedGroup.Id, appTile.Id, appTile.Title, appTile.Subtitle],
-                Method: 'ChangeAppTileSetting',
-                SuccessFn: () => {
-                    this._nextAllAppTileGroups(allApps);
-                    resolve(selectedGroup);
-                },
-                FailFn: () => {
-                    reject(null);
-                }
-            });
-        })).pipe(tap((appGroupSetting) => this.updataAppTileSetting(selectedGroup, appGroupSetting)));
+        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 = (_b = (_a = appTileGroup.AppTiles) === null || _a === void 0 ? void 0 : _a.MoDataList) !== null && _b !== void 0 ? _b : [];
+        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));
+        (_c = appTileGroup.$Children) === null || _c === void 0 ? void 0 : _c.forEach((subAppTileGroup) => {
+            this._prepareNavigator(subAppTileGroup);
+        });
     }
-    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();
+}
+TilesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesService, deps: [{ token: i1.PortalService }, { token: i1$1.RtlService }, { token: i1.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Injectable });
+TilesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ 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;
     }
-    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)));
+    get settings() {
+        var _a, _b;
+        const data = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.Component) === null || _b === void 0 ? void 0 : _b.Settings;
+        return data ? data : this.parameters;
     }
-    saveOrderAppTiles(appGroup, appTiles, isActionLink = false, appTileIdTransferedId = '0') {
-        BarsaApi.Bw.RunBlMethodAsync({
-            Parameters: [appGroup.Id, appTiles, isActionLink, appTileIdTransferedId],
-            Method: 'ChangeOrderAppTiles',
-            SuccessFn: () => { },
-            FailFn: () => { }
+    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);
+        }
+    }
+}
+BaseTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BaseTileComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TilesService }], target: i0.ɵɵFactoryTarget.Component });
+BaseTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BaseTileComponent, selector: "bt-base-tile", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BaseTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bt-base-tile',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ 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');
+        if (this.backColor) {
+            this._renderer2.setStyle(this.el.nativeElement, 'background-color', `${this.backColor}`);
+            this._renderer2.addClass(this.el.nativeElement, 'customColor');
+        }
     }
-    updataAppTileSetting(selectedGroup, appGroupSetting) {
-        const allApps = this.appTileGroups;
-        allApps === null || allApps === void 0 ? void 0 : allApps.MoDataList.forEach((appGroup) => {
-            if (appGroup.Id === selectedGroup.Id) {
-                appGroup.UserAppTileGroupSetting = appGroupSetting;
+}
+BaseBtTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BaseBtTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BaseBtTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: "14.2.7", ngImport: i0, type: BaseBtTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bt-base-bt-tile',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class FooterTileComponent extends BaseComponent {
+    get twoColumn() {
+        return this.settings.TwoColumn;
+    }
+    get firstSection() {
+        return this.settings.FirstSection;
+    }
+    get secondSection() {
+        return this.settings.SecondSection;
+    }
+}
+FooterTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FooterTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FooterTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FooterTileComponent, selector: "bt-footer-tile", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: "<div fd-tile-footer [twoColumn]=\"twoColumn\">\r\n    <ng-container *ngIf=\"twoColumn; else oneColumn\">\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    </ng-container>\r\n    <ng-template #oneColumn>\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    </ng-template>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { 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.TileRefreshDirective, selector: "[fdTileRefresh], [fd-tile-refresh]", inputs: ["glyph", "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: "14.2.7", ngImport: i0, type: FooterTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-footer-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fd-tile-footer [twoColumn]=\"twoColumn\">\r\n    <ng-container *ngIf=\"twoColumn; else oneColumn\">\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    </ng-container>\r\n    <ng-template #oneColumn>\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    </ng-template>\r\n</div>\r\n" }]
+        }], propDecorators: { settings: [{
+                type: Input
+            }] } });
+
+class TileComponent extends TilePropsComponent {
+    constructor() {
+        super(...arguments);
+        this.runningCommand = false;
+    }
+    onClick(ev) {
+        if (this.edit || this.disableClick || this.runningCommand || !this.dynamicCommand) {
+            return false;
+        }
+        PreventDefaulEvent(ev);
+        const command = this.dynamicCommand;
+        const e = { command, DynamicSetting: null };
+        this.runningCommand = true;
+        this._cdr.detectChanges();
+        BarsaApi.Common.CustomCodeManager.RunDynamicCommand(command.Id, e, () => {
+            this.runningCommand = false;
+            this._cdr.detectChanges();
+        });
+        return false;
+    }
+}
+TileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TileComponent, selector: "bt-tile", inputs: { type: "type", footerTemplate: "footerTemplate", footer: "footer", disableClick: "disableClick", title: "title", subtitle: "subtitle", isDouble: "isDouble", edit: "edit", dynamicCommand: "dynamicCommand" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<fd-tile [type]=\"type\" [double]=\"isDouble\" [action]=\"edit\">\n    <ng-container *ngIf=\"edit && !data.Locked\">\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\n    </ng-container>\n    <div fd-tile-header>\n        <h1 fd-tile-title>\n            {{ title | bbbTranslate }}\n        </h1>\n        <h2 fd-tile-subtitle>\n            {{ subtitle | bbbTranslate }}\n        </h2>\n    </div>\n    <ng-content></ng-content>\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\n</fd-tile>\n<ng-template #defaultFooter>\n    <bt-footer-tile *ngIf=\"footer\" [settings]=\"footer\"></bt-footer-tile>\n</ng-template>\n<fd-menu #menu>\n    <li fd-menu-item>\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\n        </a>\n    </li>\n</fd-menu>\n<bsu-mask *ngIf=\"runningCommand\"></bsu-mask>\n", styles: [":host,fd-tile{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i3.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i3.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.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", inputs: ["settings"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-tile [type]=\"type\" [double]=\"isDouble\" [action]=\"edit\">\n    <ng-container *ngIf=\"edit && !data.Locked\">\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\n    </ng-container>\n    <div fd-tile-header>\n        <h1 fd-tile-title>\n            {{ title | bbbTranslate }}\n        </h1>\n        <h2 fd-tile-subtitle>\n            {{ subtitle | bbbTranslate }}\n        </h2>\n    </div>\n    <ng-content></ng-content>\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\n</fd-tile>\n<ng-template #defaultFooter>\n    <bt-footer-tile *ngIf=\"footer\" [settings]=\"footer\"></bt-footer-tile>\n</ng-template>\n<fd-menu #menu>\n    <li fd-menu-item>\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\n        </a>\n    </li>\n</fd-menu>\n<bsu-mask *ngIf=\"runningCommand\"></bsu-mask>\n", styles: [":host,fd-tile{display:block}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], footerTemplate: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], disableClick: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], isDouble: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], dynamicCommand: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class TilePropPipe {
+    transform(data, prop, parameters) {
+        if (data) {
+            if (prop === 'Title') {
+                return data.TileTitle;
             }
+            if (prop === 'Subtitle') {
+                return data.Subtitle;
+            }
+            if (prop === 'DynamicCommand') {
+                return data['DynamicCommand'];
+            }
+            return data.Component.Settings.TileSetting[prop];
+        }
+        return parameters ? parameters.TileSetting[prop] : '';
+    }
+}
+TilePropPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilePropPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TilePropPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: TilePropPipe, name: "tileProp" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilePropPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'tileProp'
+                }]
+        }] });
+
+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);
+    }
+}
+FormTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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        <bnrc-form *ngIf=\"params\" [params]=\"params\"></bnrc-form>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}bnrc-form{z-index:3}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "formPanelCtrlId"], outputs: ["titleChanged", "moChanged", "formClose", "formRendered"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-form-tile', changeDetection: ChangeDetectionStrategy.OnPush, 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    [disableClick]=\"true\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n>\r\n    <div fd-tile-content>\r\n        <bnrc-form *ngIf=\"params\" [params]=\"params\"></bnrc-form>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}bnrc-form{z-index:3}\n"] }]
+        }] });
+
+class ActionItemComponent extends TileComponent {
+}
+ActionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionItemComponent, selector: "bt-action-item", usesInheritance: true, ngImport: i0, template: "<div [class.action-item-edit-mode]=\"edit\" class=\"action-item\">\n    <h1 fd-tile-title>{{ title }}</h1>\n    <h2 fd-tile-subtitle *ngIf=\"subtitle\">{{ subtitle }}</h2>\n\n    <div *ngIf=\"edit && !data.Locked\" class=\"buttons\">\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\n    </div>\n    <fd-menu #menu>\n        <li fd-menu-item>\n            <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\n                <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\n            </a>\n        </li>\n    </fd-menu>\n</div>\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-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: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i3.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i3.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: "14.2.7", ngImport: i0, type: ActionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-action-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.action-item-edit-mode]=\"edit\" class=\"action-item\">\n    <h1 fd-tile-title>{{ title }}</h1>\n    <h2 fd-tile-subtitle *ngIf=\"subtitle\">{{ subtitle }}</h2>\n\n    <div *ngIf=\"edit && !data.Locked\" class=\"buttons\">\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\n    </div>\n    <fd-menu #menu>\n        <li fd-menu-item>\n            <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\n                <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\n            </a>\n        </li>\n    </fd-menu>\n</div>\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-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 {
+    ngOnInit() {
+        var _a;
+        super.ngOnInit();
+        this.hide = !((_a = this.actionsLink) === null || _a === void 0 ? void 0 : _a.length);
+    }
+}
+ActionsLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionsLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActionsLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", edit: "edit" }, host: { properties: { "class.hide": "this.hide" } }, usesInheritance: true, ngImport: i0, template: "<bt-action-item\n    *ngFor=\"let actionItem of actionsLink\"\n    cdkDrag\n    [data]=\"actionItem\"\n    [edit]=\"edit\"\n    [title]=\"actionItem | tileProp: 'Title'\"\n    [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\n    [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\n    [footer]=\"actionItem | tileProp: 'Footer'\"\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n    [mo]=\"actionItem\"\n>\n</bt-action-item>\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}bt-action-item{margin-top:auto;margin-bottom:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], 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: "14.2.7", ngImport: i0, type: ActionsLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-actions-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-action-item\n    *ngFor=\"let actionItem of actionsLink\"\n    cdkDrag\n    [data]=\"actionItem\"\n    [edit]=\"edit\"\n    [title]=\"actionItem | tileProp: 'Title'\"\n    [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\n    [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\n    [footer]=\"actionItem | tileProp: 'Footer'\"\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n    [mo]=\"actionItem\"\n>\n</bt-action-item>\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}bt-action-item{margin-top:auto;margin-bottom:auto}\n"] }]
+        }], propDecorators: { hide: [{
+                type: HostBinding,
+                args: ['class.hide']
+            }], actionsLink: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }] } });
+
+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.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();
         });
-        this._appTileGroupsSource.next(allApps);
     }
-    addAppGroup(mo) {
-        const allApps = this.appTileGroups;
-        if (allApps) {
-            allApps.MoDataList.push(mo);
-            this._appTileGroupsSource.next(allApps);
+    ngOnChanges(changes) {
+        const { edit } = changes;
+        if (edit && !edit.firstChange) {
+            this._tileRef.instance.setEditHome(edit.currentValue);
         }
     }
-    singlePinTileChanged(appTileId) {
-        const allApps = this.appTileGroups;
-        const group = this.findGroupWithAppTileId(allApps, appTileId);
-        if (group === null) {
-            return of(false);
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this._tileRef) {
+            this._tileRef.destroy();
         }
-        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 === null || allApps === void 0 ? void 0 : allApps.TypeDefId
-        }));
-        BarsaApi.Bw.RunBlMethodAsync({
-            Parameters: [groupChanges, visible, app.Id],
-            Method: 'TilePinChanged',
-            SuccessFn: (settings) => {
-                this._tilePinChange(appTileGroupsPin, allApps);
-                callback(settings);
-            },
-            FailFn: () => {
-                // TODO show error
-            }
-        });
+}
+TileRendererDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TileRendererDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PortalService }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TileRendererDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: TileRendererDirective, selector: "[tileRenderer]", inputs: { component: "component", data: "data", edit: "edit" }, outputs: { hideClick: "hideClick", renameClick: "renameClick" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TileRendererDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tileRenderer]'
+                }]
+        }], ctorParameters: function () { return [{ 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
+            }], hideClick: [{
+                type: Output
+            }], renameClick: [{
+                type: Output
+            }] } });
+
+class TilesViewerGroupComponent extends BaseComponent {
+    constructor() {
+        super();
+        this.tilesDropped = new EventEmitter();
+        this.hideAppTileClick = new EventEmitter();
+        this.renameAppTileClick = new EventEmitter();
+        this.toggleGroup = new EventEmitter();
+        this.resetGroup = new EventEmitter();
+        this.deleteGroup = new EventEmitter();
     }
-    _tilePinChange(appTileGroupsPin, allApps) {
-        for (const appTileGroupPin of appTileGroupsPin) {
-            let selectedAppGroup;
-            const appGroupId = appTileGroupPin.appTileGroup.Id;
-            allApps === null || allApps === void 0 ? void 0 : allApps.MoDataList.forEach((c) => {
-                var _a;
-                if (c.Id === appGroupId) {
-                    selectedAppGroup = c;
-                }
-                else if (!selectedAppGroup) {
-                    selectedAppGroup = (_a = c.$Children) === null || _a === void 0 ? void 0 : _a.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);
-            }
+    onDrop(appTileGroup, event) {
+        if (!this.edit || appTileGroup.Locked) {
+            return;
         }
-        this._nextAllAppTileGroups(allApps);
+        this.tilesDropped.emit({ appTileGroup, event });
     }
-    loadShellbar() {
-        this._portalService
-            .ReportExecutePromise('Shellbar')
-            .then((moForReportModel) => this.shellbarSource.next(moForReportModel.MoDataList[0]));
+    onAppTileHideClick(appTile) {
+        this.hideAppTileClick.emit(appTile);
     }
-    loadAllAppTileGroups() {
-        this._portalService
-            .ReportExecute('AllAppTileGroups')
-            .subscribe((allApps) => this._nextAllAppTileGroups(allApps));
+    onAppTileRenameClick(appTile) {
+        this.renameAppTileClick.emit(appTile);
     }
-    _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;
-        }
+    onDelete(appTileGroup) {
+        this.deleteGroup.emit(appTileGroup);
     }
-    getTileGroups() {
-        return this._appTileGroupsSource.getValue();
+    onToggleShowHide(appTileGroup) {
+        this.toggleGroup.emit(appTileGroup);
     }
-    setEditHome(edit) {
-        this._edithomeSource.next(edit);
+    onReset(appTileGroup) {
+        this.resetGroup.emit(appTileGroup);
     }
-    _allAppsLoaded(moForReportModel) {
-        moForReportModel.MoDataList.forEach((c) => {
-            this._prepareNavigator(c);
-        });
-        this._setHomeAppTileGroups(moForReportModel.MoDataList);
+}
+TilesViewerGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TilesViewerGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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 [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}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:3px;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}.tile-wrapper.s.rtl ::ng-deep .cdk-drag{margin-left:auto}.tile-wrapper.s.ltr ::ng-deep .cdk-drag{margin-right:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i6$1.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i6$1.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i6$1.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i6$1.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i6$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8.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: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i4.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit"] }, { 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"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}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:3px;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}.tile-wrapper.s.rtl ::ng-deep .cdk-drag{margin-left:auto}.tile-wrapper.s.ltr ::ng-deep .cdk-drag{margin-right:auto}\n"] }]
+        }], ctorParameters: function () { return []; }, 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 {
+    constructor(templateRef, viewContainer, bbbPipe) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.bbbPipe = bbbPipe;
+        this.hasView = false;
     }
-    _loadAppTilesOfAppTileGroup(selectedAppTilegroup, allApps) {
-        const callback = () => {
-            this._nextAllAppTileGroups(allApps);
-        };
-        if (!selectedAppTilegroup.UserAppTileGroupSetting) {
-            this._loadAppTilesByAppTileGroup(selectedAppTilegroup, callback);
+    set emptyList(list) {
+        if (!list || (!list.length && !this.hasView)) {
+            const _view = this.viewContainer.createEmbeddedView(this.templateRef);
+            this.setNoData(_view);
+            this.hasView = true;
         }
-        else {
-            this._loadAppTilesByAppTileGroupSetting(selectedAppTilegroup, callback);
+        else if (list && list.length > 0 && this.hasView) {
+            this.viewContainer.clear();
+            this.hasView = false;
         }
     }
-    _loadAppTilesByAppTileGroup(appGroup, callback) {
-        BarsaApi.Bw.RunBlMethodAsync({
-            Parameters: [appGroup.Id],
-            Method: 'LoadAllAppTilesByAppTileGroup',
-            SuccessFn: (appTiles) => {
-                this._updateAppTilesOfAppTileGroup(appGroup, appTiles);
-                callback();
-            },
-            FailFn: () => {
-                // TODO show error
-            }
-        });
+    setNoData(view) {
+        view.rootNodes[0].innerHTML = this.bbbPipe.transform('NoData');
+    }
+}
+EmptyListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: EmptyListDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Directive });
+EmptyListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: EmptyListDirective, selector: "[emptyList]", inputs: { emptyList: "emptyList" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: EmptyListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emptyList]'
+                }]
+        }], ctorParameters: function () { return [{ 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);
+    }
+}
+AppFinderAppListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderAppListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AppFinderAppListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: "<ng-container *ngIf=\"appGroup\">\r\n    <h5 fd-title *emptyList=\"appGroup.Apps\"></h5>\r\n    <ng-container *ngIf=\"(appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }).length > 0\">\r\n        <fd-fixed-card-layout [disableDragDrop]=\"true\">\r\n            <ng-container\r\n                *ngFor=\"let app of appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }; let i = index\"\r\n            >\r\n                <fd-card *fdCardDef=\"i\">\r\n                    <fd-card-header [dynCommand]=\"app.DynamicCommand\" [mo]=\"app\">\r\n                        <fd-avatar *ngIf=\"app.Icon\" [glyph]=\"app.Icon\" size=\"s\" [title]=\"app.Title\"></fd-avatar>\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-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            </ng-container>\r\n        </fd-fixed-card-layout>\r\n    </ng-container>\r\n</ng-container>\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: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i4$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i4$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i4$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "directive", type: i4$1.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i5.FixedCardLayoutComponent, selector: "fd-fixed-card-layout", inputs: ["disableDragDrop", "dragStartDelay", "cardMinimumWidth", "columnsWidthConfig", "maxColumns"], outputs: ["layoutChange", "cardDraggedDropped"] }, { kind: "directive", type: i5.CardDefinitionDirective, selector: "[fdCardDef]", inputs: ["fdCardDef"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", 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: "14.2.7", ngImport: i0, type: AppFinderAppListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-app-finder-app-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"appGroup\">\r\n    <h5 fd-title *emptyList=\"appGroup.Apps\"></h5>\r\n    <ng-container *ngIf=\"(appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }).length > 0\">\r\n        <fd-fixed-card-layout [disableDragDrop]=\"true\">\r\n            <ng-container\r\n                *ngFor=\"let app of appGroup.Apps | filterStr: { Title: searchTerm, mode: 'contains' }; let i = index\"\r\n            >\r\n                <fd-card *fdCardDef=\"i\">\r\n                    <fd-card-header [dynCommand]=\"app.DynamicCommand\" [mo]=\"app\">\r\n                        <fd-avatar *ngIf=\"app.Icon\" [glyph]=\"app.Icon\" size=\"s\" [title]=\"app.Title\"></fd-avatar>\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-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            </ng-container>\r\n        </fd-fixed-card-layout>\r\n    </ng-container>\r\n</ng-container>\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();
     }
-    _updateAppTilesOfAppTileGroup(selectedAppTilegroup, appTiles) {
-        var _a;
-        if (this.appTileGroups) {
-            selectedAppTilegroup = Object.assign(Object.assign({}, selectedAppTilegroup), { $TilesLoaded: true });
-            appTiles.MoDataList.forEach((element) => {
-                var _a, _b, _c;
-                element.Component = (_a = element.A_App_Component) !== null && _a !== void 0 ? _a : element.A_AppTile_App_Component;
-                element.DynamicCommand = (_b = element.A_App_DynamicCommand) !== null && _b !== void 0 ? _b : element.A_AppTile_App_DynamicCommand;
-                element.Predefined = (_c = element.Predefined) !== null && _c !== void 0 ? _c : element.A_AppTile_Predefined;
-            });
-            const apptileGroupIndex = (_a = this.appTileGroups) === null || _a === void 0 ? void 0 : _a.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] = Object.assign({}, tileGroup);
-            }
-            else {
-                this.appTileGroups.MoDataList[apptileGroupIndex] = selectedAppTilegroup;
+    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);
             }
         }
     }
-    _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 !== null && newAllApps !== void 0 ? newAllApps : this._appTileGroupsSource.getValue();
-        this._appTileGroupsSource.next(allApps ? Object.assign({}, allApps) : null);
+    OnMenuGroupClick(group) {
+        this.selectedIdChange.emit(group.Id);
     }
-    _setHomeAppTileGroups(appGroups) {
-        let newAppGroups = [...appGroups];
-        newAppGroups = newAppGroups
-            .filter((c) => c.Visible)
-            .sort((a, b) => Number(a.navigatorOrderItem) - Number(b.navigatorOrderItem));
-        this._homeAppTileGroupsSource.next(newAppGroups);
+    OnGroupClick(group) {
+        this.selectedIdChange.emit(group.Id);
     }
-    _saveUserPortalSettings(userPortalSettings) {
-        return new Promise((resolve, reject) => {
-            BarsaApi.Bw.RunBlMethodAsync({
-                Parameters: [new BarsaApi.Common.MetaObjectWeb(userPortalSettings)],
-                Method: 'SaveUserPortalSettings',
-                SuccessFn: () => {
-                    resolve();
-                },
-                FailFn: () => {
-                    reject(null);
-                }
-            });
-        });
+}
+AppFinderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AppFinderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: AppFinderGroupComponent, selector: "bt-app-finder-group", inputs: { appGroups: "appGroups", selectedId: "selectedId", listMode: "listMode" }, outputs: { selectedIdChange: "selectedIdChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"listMode; else menuTpl\">\r\n    <div class=\"app-groups\">\r\n        <ul fd-list [selection]=\"true\">\r\n            <li\r\n                fd-list-item\r\n                *ngFor=\"let group of appGroups; let i = index\"\r\n                [selected]=\"group.Id === selectedId\"\r\n                (click)=\"OnGroupClick(group)\"\r\n            >\r\n                <span fd-list-title>\r\n                    {{ group.Title }}\r\n                </span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-container>\r\n<ng-template #menuTpl>\r\n    <li *ngFor=\"let group of appGroups; let i = index\" 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</ng-template>\r\n", styles: [".app-groups{width:25vw;border-left:.0625rem solid var(--sapGroup_TitleBorderColor, #d9d9d9)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i3.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-app-finder-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"listMode; else menuTpl\">\r\n    <div class=\"app-groups\">\r\n        <ul fd-list [selection]=\"true\">\r\n            <li\r\n                fd-list-item\r\n                *ngFor=\"let group of appGroups; let i = index\"\r\n                [selected]=\"group.Id === selectedId\"\r\n                (click)=\"OnGroupClick(group)\"\r\n            >\r\n                <span fd-list-title>\r\n                    {{ group.Title }}\r\n                </span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-container>\r\n<ng-template #menuTpl>\r\n    <li *ngFor=\"let group of appGroups; let i = index\" 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</ng-template>\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();
     }
-    _updateAppGroupSetting(appGroup, appGroupSetting) {
-        const allApps = this.appTileGroups;
-        const selectedAppGroup = allApps === null || allApps === void 0 ? void 0 : allApps.MoDataList.find((c) => c.Id === appGroup.Id);
-        if (selectedAppGroup && allApps) {
-            selectedAppGroup.UserAppTileGroupSetting = appGroupSetting;
-            this._nextAllAppTileGroups(allApps);
-        }
+    onSearchSubmit($event) {
+        this.searchTerm = $event.text;
     }
-    findGroupWithAppTileId(allApps, appTileId) {
-        let selectedGroup;
-        if (!allApps) {
-            return null;
-        }
-        allApps.MoDataList.forEach((appGroup) => {
-            var _a;
-            if (selectedGroup) {
-                return;
-            }
-            if (appGroup.navigatorTiles.some((appTile) => appTile.Id === appTileId)) {
-                selectedGroup = appGroup;
-                return;
-            }
-            (_a = appGroup.$Children) === null || _a === void 0 ? void 0 : _a.forEach((subGroup) => {
-                if (subGroup.navigatorTiles.some((appTile) => appTile.Id === appTileId)) {
-                    selectedGroup = subGroup;
-                    return;
-                }
-            });
-        });
-        return selectedGroup;
+}
+AppFinderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AppFinderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    <ng-container *ngIf=\"appGroups; else loading\">\r\n        <fd-toolbar [fdType]=\"'solid'\">\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                *ngIf=\"deviceSize === 's'\"\r\n            ></button>\r\n            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n            <fdp-search-field\r\n                fd-toolbar-item\r\n                [contentDensity]=\"contentDensity\"\r\n                [placeholder]=\"'Search' | bbbTranslate\"\r\n                (searchSubmit)=\"onSearchSubmit($event)\"\r\n                [suggestions]=\"[]\"\r\n            ></fdp-search-field>\r\n        </fd-toolbar>\r\n        <div style=\"display: flex; overflow-y: auto\" [style.height]=\"contentHeight\">\r\n            <div class=\"app-groups\">\r\n                <bt-app-finder-group\r\n                    *ngIf=\"deviceSize !== 's'\"\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            </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            <bt-app-finder-group\r\n                *ngIf=\"deviceSize === 's'\"\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        </fd-menu>\r\n    </ng-container>\r\n    <ng-template #loading>\r\n        <bsu-mask></bsu-mask>\r\n    </ng-template>\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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i4.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i4.ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i5$1.PlatformContentDensityDeprecationDirective, selector: "        fdp-action-bar[contentDensity],        fdp-button[contentDensity],        fdp-object-list-item[contentDensity],        fdp-standard-list-item[contentDensity],        fdp-menu[contentDensity],        fdp-menu-button[contentDensity],        fdp-panel[contentDensity],        fdp-search-field[contentDensity],        fdp-split-menu-button[contentDensity],        fdp-file-uploader[contentDensity],        fdp-upload-collection[contentDensity],        fdp-table[contentDensity],        fdp-multi-input[contentDensity],        fdp-list[contentDensity],        fdp-slider[contentDensity],        fdp-time-picker[contentDensity],        fdp-textarea[contentDensity],        fdp-switch[contentDensity],        fdp-number-step-input[contentDensity],        fdp-select[contentDensity],        fdp-date-picker[contentDensity],        fdp-checkbox[contentDensity],        fdp-checkbox-group[contentDensity],        fdp-combobox[contentDensity],        fdp-datetime-picker[contentDensity],        fdp-input[contentDensity],        fdp-radio-group[contentDensity],        fdp-radio-button[contentDensity],        fdp-multi-combobox[contentDensity],        fdp-input-group-addon-body[contentDensity],        fdp-input-group[contentDensity],        fdp-value-help-dialog[contentDensity],        fdp-filter-single-select[contentDensity],        fdp-filter-multi-select[contentDensity],        fdp-filter-custom[contentDensity]    " }, { kind: "component", type: i6$3.SearchFieldComponent, selector: "fdp-search-field", inputs: ["placeholder", "mobile", "mobileConfig", "disableRefresh", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { 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: "14.2.7", ngImport: i0, type: AppFinderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-app-finder', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\">\r\n    <ng-container *ngIf=\"appGroups; else loading\">\r\n        <fd-toolbar [fdType]=\"'solid'\">\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                *ngIf=\"deviceSize === 's'\"\r\n            ></button>\r\n            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n            <fdp-search-field\r\n                fd-toolbar-item\r\n                [contentDensity]=\"contentDensity\"\r\n                [placeholder]=\"'Search' | bbbTranslate\"\r\n                (searchSubmit)=\"onSearchSubmit($event)\"\r\n                [suggestions]=\"[]\"\r\n            ></fdp-search-field>\r\n        </fd-toolbar>\r\n        <div style=\"display: flex; overflow-y: auto\" [style.height]=\"contentHeight\">\r\n            <div class=\"app-groups\">\r\n                <bt-app-finder-group\r\n                    *ngIf=\"deviceSize !== 's'\"\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            </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            <bt-app-finder-group\r\n                *ngIf=\"deviceSize === 's'\"\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        </fd-menu>\r\n    </ng-container>\r\n    <ng-template #loading>\r\n        <bsu-mask></bsu-mask>\r\n    </ng-template>\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;
     }
-    _findGroupWithAppGroupId(allApps, appGroupId) {
-        let selectedGroup;
-        if (!allApps) {
-            return null;
-        }
-        allApps.MoDataList.forEach((appGroup) => {
-            var _a;
-            if (selectedGroup) {
-                return;
-            }
-            if (appGroup.Id === appGroupId) {
-                selectedGroup = appGroup;
-                return;
-            }
-            (_a = appGroup.$Children) === null || _a === void 0 ? void 0 : _a.forEach((subGroup) => {
-                if (subGroup.Id === appGroupId) {
-                    selectedGroup = subGroup;
-                    return;
-                }
-            });
+    ngOnInit() {
+        super.ngOnInit();
+        this.appGroupForm = this.fb.group({
+            title: new UntypedFormControl(this.title, [Validators.required]),
+            subtitle: new UntypedFormControl(this.subtitle)
         });
-        return selectedGroup;
-    }
-    _updateAppTileGroupSettings(appTileGroup, setting) {
-        appTileGroup.UserAppTileGroupSetting = setting;
-        appTileGroup = JSON.parse(JSON.stringify(appTileGroup));
-        this._nextAllAppTileGroups();
-        return appTileGroup;
+        this.RequiredText = this.bbbPipe
+            .transform(')AlertFieldIsMandatory')
+            .replace('{0}', this.bbbPipe.transform('Title'));
     }
-    _prepareNavigator(appTileGroup) {
-        var _a, _b, _c;
-        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;
+    onSave() {
+        this.submitted = true;
+        if (this.appGroupForm.valid) {
+            this.dialogRef.close({ title: this.title, subtitle: this.subtitle });
         }
-        const appTiles = (_b = (_a = appTileGroup.AppTiles) === null || _a === void 0 ? void 0 : _a.MoDataList) !== null && _b !== void 0 ? _b : [];
-        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));
-        (_c = appTileGroup.$Children) === null || _c === void 0 ? void 0 : _c.forEach((subAppTileGroup) => {
-            this._prepareNavigator(subAppTileGroup);
-        });
     }
 }
-TilesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesService, deps: [{ token: i1$2.PortalService }, { token: i1$4.RtlService }, { token: i1$2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Injectable });
-TilesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.PortalService }, { type: i1$4.RtlService }, { type: i1$2.BbbTranslatePipe }]; } });
+ChangeAppTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChangeAppTileComponent, deps: [{ token: i1$4.UntypedFormBuilder }, { token: i1$1.DialogRef }, { token: i1.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
+ChangeAppTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\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            fdInitialFocus\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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$4.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i6$4.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i6$4.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i6$4.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChangeAppTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-change-app-tile', changeDetection: ChangeDetectionStrategy.OnPush, 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                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\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            fdInitialFocus\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: function () { return [{ type: i1$4.UntypedFormBuilder }, { type: i1$1.DialogRef }, { type: i1.BbbTranslatePipe }]; } });
 
 class TilesViewerService {
     constructor(dialogService, tilesService) {
@@ -1178,11 +1283,11 @@ class TilesViewerService {
         this._viewLoadingSource.next(true);
     }
 }
-TilesViewerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerService, deps: [{ token: i1$4.DialogService }, { token: TilesService }], target: i0.ɵɵFactoryTarget.Injectable });
+TilesViewerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerService, deps: [{ token: i1$1.DialogService }, { token: TilesService }], target: i0.ɵɵFactoryTarget.Injectable });
 TilesViewerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$4.DialogService }, { type: TilesService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: TilesService }]; } });
 
 class TilesViewerComponent extends BaseComponent {
     constructor() {
@@ -1199,7 +1304,7 @@ class TilesViewerComponent extends BaseComponent {
         this.hideAppTileClick = new EventEmitter();
         this.renameAppTileClick = new EventEmitter();
         this.tilesDropped = new EventEmitter();
-        this.rtl = BarsaApi.LoginFormData.IsRtl;
+        this._rtl = BarsaApi.LoginFormData.IsRtl;
     }
     onSelectedTabChange(selectedTab, appTileGroups) {
         let firstSelected = false;
@@ -1240,10 +1345,10 @@ class TilesViewerComponent extends BaseComponent {
     }
 }
 TilesViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TilesViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", stackContent: "stackContent", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", DynamicComponents: "DynamicComponents" }, outputs: { stackContentChange: "stackContentChange", closeEditHome: "closeEditHome", save: "save", listDropped: "listDropped", tabChanged: "tabChanged", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", tilesDropped: "tilesDropped" }, host: { properties: { "class.page-content": "this.pageContentClass", "attr.rtl": "this.rtl" } }, viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"appTileGroups; else loadingTpl\">\n    <bsu-mask *ngIf=\"loading\"></bsu-mask>\n    <fd-dynamic-page\n        size=\"large\"\n        [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\n        [autoResponsive]=\"true\"\n        [class.stack-mode]=\"stackContent\"\n    >\n        <fd-dynamic-page-header *ngIf=\"edit\" [title]=\"'HomeEdit' | bbbTranslate\">\n            <fd-dynamic-page-global-actions>\n                <fd-toolbar *ngIf=\"edit\" fdType=\"transparent\" [clearBorder]=\"true\">\n                    <label fd-form-label fd-toolbar-item>Stacked Content </label>\n                    <fd-switch\n                        fd-toolbar-item\n                        [checked]=\"stackContent\"\n                        (checkedChange)=\"onStackContentChanged($event)\"\n                    ></fd-switch>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\n                        <i class=\"sap-icon--decline\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-content>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    stackContent ? renderTabsStacked : renderTabs;\n                    context: {\n                        $implicit: appTileGroups,\n                        stackContent: stackContent,\n                        edit: edit\n                    }\n                \"\n            ></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer>\n            <div fd-bar barDesign=\"footer\" *ngIf=\"edit\">\n                <div fd-bar-right>\n                    <fd-button-bar\n                        [label]=\"'SaveAndClose' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onExitEditHome(appTileGroups)\"\n                    ></fd-button-bar>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n</ng-container>\n\n<ng-template #loadingTpl>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<ng-template #renderTabs let-appTileGroups let-stackContent=\"stackContent\" let-edit=\"edit\">\n    <fd-tab-list\n        class=\"tile-tabs\"\n        [size]=\"deviceSize\"\n        [collapseOverflow]=\"true\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        cdkDropList\n        cdkDropListOrientation=\"vertical\"\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\n    >\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\n            <fd-tab\n                *ngIf=\"edit || appTileGroup.navigatorVisible\"\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\n                [class.is-expanded]=\"selectedTabTitle === (appTileGroup.navigatorTitle | bbbTranslate)\"\n            >\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderGroup;\n                            context: {\n                                $implicit: appTileGroup,\n                                stackContent: stackContent,\n                                edit: edit,\n                                isAppTileSubGroup: false\n                            }\n                        \"\n                    ></ng-container>\n                </fd-dynamic-page-content>\n            </fd-tab>\n        </ng-container>\n    </fd-tab-list>\n</ng-template>\n<ng-template #renderTabsStacked let-appTileGroups let-stackContent=\"stackContent\" let-edit=\"edit\">\n    <fd-tab-list\n        class=\"tile-tabs\"\n        [size]=\"deviceSize\"\n        [collapseOverflow]=\"true\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        [stackContent]=\"true\"\n        [maxContentHeight]=\"stackContent ? 'calc(99vh - 2.75rem - 44px)' : 'calc(100vh - 44px)'\"\n        cdkDropList\n        cdkDropListOrientation=\"vertical\"\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\n    >\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\n            <fd-tab\n                *ngIf=\"edit || appTileGroup.navigatorVisible\"\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\n                [count]=\"appTileGroup.$Children?.length\"\n            >\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderGroup;\n                            context: {\n                                $implicit: appTileGroup,\n                                stackContent: stackContent,\n                                edit: edit,\n                                isAppTileSubGroup: false\n                            }\n                        \"\n                    ></ng-container>\n                </fd-dynamic-page-content>\n            </fd-tab>\n        </ng-container>\n    </fd-tab-list>\n</ng-template>\n<ng-template\n    #renderGroup\n    let-appTileGroup\n    let-stackContent=\"stackContent\"\n    let-edit=\"edit\"\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\n>\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileGroup\"\n        [edit]=\"edit\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\n        (tilesDropped)=\"onDrop($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-template>\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 section{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-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: i5$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i5$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$3.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i5$3.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i5$3.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i5$3.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i5$3.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i5$3.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i6$4.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i7$1.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "disabled", "id", "name", "required", "checked", "semantic", "ariaLabel", "ariaLabelledby", "ariaLabelledBy", "semanticAcceptLabel", "semanticDeclineLabel"], outputs: ["checkedChange"] }, { kind: "component", type: i8$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i8$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i4.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i6.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TilesViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", rtl: "rtl", stackContent: "stackContent", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", DynamicComponents: "DynamicComponents" }, outputs: { stackContentChange: "stackContentChange", closeEditHome: "closeEditHome", save: "save", listDropped: "listDropped", tabChanged: "tabChanged", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", tilesDropped: "tilesDropped" }, host: { properties: { "class.page-content": "this.pageContentClass", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"appTileGroups; else loadingTpl\">\n    <bsu-mask *ngIf=\"loading\"></bsu-mask>\n    <fd-dynamic-page\n        size=\"large\"\n        [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\n        [autoResponsive]=\"true\"\n        [class.stack-mode]=\"stackContent\"\n    >\n        <fd-dynamic-page-header *ngIf=\"edit\" [title]=\"'HomeEdit' | bbbTranslate\">\n            <fd-dynamic-page-global-actions>\n                <fd-toolbar *ngIf=\"edit\" fdType=\"transparent\" [clearBorder]=\"true\">\n                    <label fd-form-label fd-toolbar-item>Stacked Content </label>\n                    <fd-switch\n                        fd-toolbar-item\n                        [checked]=\"stackContent\"\n                        (checkedChange)=\"onStackContentChanged($event)\"\n                    ></fd-switch>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\n                        <i class=\"sap-icon--decline\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-content>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    stackContent ? renderTabsStacked : renderTabs;\n                    context: {\n                        $implicit: appTileGroups,\n                        stackContent: stackContent,\n                        edit: edit\n                    }\n                \"\n            ></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer>\n            <div fd-bar barDesign=\"footer\" *ngIf=\"edit\">\n                <div fd-bar-right>\n                    <fd-button-bar\n                        [label]=\"'SaveAndClose' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onExitEditHome(appTileGroups)\"\n                    ></fd-button-bar>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n</ng-container>\n\n<ng-template #loadingTpl>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<ng-template #renderTabs let-appTileGroups let-stackContent=\"stackContent\" let-edit=\"edit\">\n    <fd-tab-list\n        class=\"tile-tabs\"\n        [size]=\"deviceSize\"\n        [collapseOverflow]=\"true\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        cdkDropList\n        cdkDropListOrientation=\"vertical\"\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\n    >\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\n            <fd-tab\n                *ngIf=\"edit || appTileGroup.navigatorVisible\"\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\n                [class.is-expanded]=\"selectedTabTitle === (appTileGroup.navigatorTitle | bbbTranslate)\"\n            >\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderGroup;\n                            context: {\n                                $implicit: appTileGroup,\n                                stackContent: stackContent,\n                                edit: edit,\n                                isAppTileSubGroup: false\n                            }\n                        \"\n                    ></ng-container>\n                </fd-dynamic-page-content>\n            </fd-tab>\n        </ng-container>\n    </fd-tab-list>\n</ng-template>\n<ng-template #renderTabsStacked let-appTileGroups let-stackContent=\"stackContent\" let-edit=\"edit\">\n    <fd-tab-list\n        class=\"tile-tabs\"\n        [size]=\"deviceSize\"\n        [collapseOverflow]=\"true\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        [stackContent]=\"true\"\n        [maxContentHeight]=\"stackContent ? 'calc(99vh - 2.75rem - 44px)' : 'calc(100vh - 44px)'\"\n        cdkDropList\n        cdkDropListOrientation=\"vertical\"\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\n    >\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\n            <fd-tab\n                *ngIf=\"edit || appTileGroup.navigatorVisible\"\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\n                [count]=\"appTileGroup.$Children?.length\"\n            >\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderGroup;\n                            context: {\n                                $implicit: appTileGroup,\n                                stackContent: stackContent,\n                                edit: edit,\n                                isAppTileSubGroup: false\n                            }\n                        \"\n                    ></ng-container>\n                </fd-dynamic-page-content>\n            </fd-tab>\n        </ng-container>\n    </fd-tab-list>\n</ng-template>\n<ng-template\n    #renderGroup\n    let-appTileGroup\n    let-stackContent=\"stackContent\"\n    let-edit=\"edit\"\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\n>\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [deviceSize]=\"deviceSize\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\n        (tilesDropped)=\"onDrop($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-template>\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 section{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-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: i5$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i5$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$3.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i5$3.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i5$3.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i5$3.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i5$3.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i5$3.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i6$4.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i7$1.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "disabled", "id", "name", "required", "checked", "semantic", "ariaLabel", "ariaLabelledby", "ariaLabelledBy", "semanticAcceptLabel", "semanticDeclineLabel"], outputs: ["checkedChange"] }, { kind: "component", type: i8$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i8$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i4.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i6.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { 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: "14.2.7", ngImport: i0, type: TilesViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"appTileGroups; else loadingTpl\">\n    <bsu-mask *ngIf=\"loading\"></bsu-mask>\n    <fd-dynamic-page\n        size=\"large\"\n        [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\n        [autoResponsive]=\"true\"\n        [class.stack-mode]=\"stackContent\"\n    >\n        <fd-dynamic-page-header *ngIf=\"edit\" [title]=\"'HomeEdit' | bbbTranslate\">\n            <fd-dynamic-page-global-actions>\n                <fd-toolbar *ngIf=\"edit\" fdType=\"transparent\" [clearBorder]=\"true\">\n                    <label fd-form-label fd-toolbar-item>Stacked Content </label>\n                    <fd-switch\n                        fd-toolbar-item\n                        [checked]=\"stackContent\"\n                        (checkedChange)=\"onStackContentChanged($event)\"\n                    ></fd-switch>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\n                        <i class=\"sap-icon--decline\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-content>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    stackContent ? renderTabsStacked : renderTabs;\n                    context: {\n                        $implicit: appTileGroups,\n                        stackContent: stackContent,\n                        edit: edit\n                    }\n                \"\n            ></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer>\n            <div fd-bar barDesign=\"footer\" *ngIf=\"edit\">\n                <div fd-bar-right>\n                    <fd-button-bar\n                        [label]=\"'SaveAndClose' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onExitEditHome(appTileGroups)\"\n                    ></fd-button-bar>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n</ng-container>\n\n<ng-template #loadingTpl>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<ng-template #renderTabs let-appTileGroups let-stackContent=\"stackContent\" let-edit=\"edit\">\n    <fd-tab-list\n        class=\"tile-tabs\"\n        [size]=\"deviceSize\"\n        [collapseOverflow]=\"true\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        cdkDropList\n        cdkDropListOrientation=\"vertical\"\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\n    >\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\n            <fd-tab\n                *ngIf=\"edit || appTileGroup.navigatorVisible\"\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\n                [class.is-expanded]=\"selectedTabTitle === (appTileGroup.navigatorTitle | bbbTranslate)\"\n            >\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderGroup;\n                            context: {\n                                $implicit: appTileGroup,\n                                stackContent: stackContent,\n                                edit: edit,\n                                isAppTileSubGroup: false\n                            }\n                        \"\n                    ></ng-container>\n                </fd-dynamic-page-content>\n            </fd-tab>\n        </ng-container>\n    </fd-tab-list>\n</ng-template>\n<ng-template #renderTabsStacked let-appTileGroups let-stackContent=\"stackContent\" let-edit=\"edit\">\n    <fd-tab-list\n        class=\"tile-tabs\"\n        [size]=\"deviceSize\"\n        [collapseOverflow]=\"true\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        [stackContent]=\"true\"\n        [maxContentHeight]=\"stackContent ? 'calc(99vh - 2.75rem - 44px)' : 'calc(100vh - 44px)'\"\n        cdkDropList\n        cdkDropListOrientation=\"vertical\"\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\n    >\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\n            <fd-tab\n                *ngIf=\"edit || appTileGroup.navigatorVisible\"\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\n                [count]=\"appTileGroup.$Children?.length\"\n            >\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderGroup;\n                            context: {\n                                $implicit: appTileGroup,\n                                stackContent: stackContent,\n                                edit: edit,\n                                isAppTileSubGroup: false\n                            }\n                        \"\n                    ></ng-container>\n                </fd-dynamic-page-content>\n            </fd-tab>\n        </ng-container>\n    </fd-tab-list>\n</ng-template>\n<ng-template\n    #renderGroup\n    let-appTileGroup\n    let-stackContent=\"stackContent\"\n    let-edit=\"edit\"\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\n>\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileGroup\"\n        [edit]=\"edit\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\n        (tilesDropped)=\"onDrop($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-template>\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 section{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-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"] }]
+            args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"appTileGroups; else loadingTpl\">\n    <bsu-mask *ngIf=\"loading\"></bsu-mask>\n    <fd-dynamic-page\n        size=\"large\"\n        [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\n        [autoResponsive]=\"true\"\n        [class.stack-mode]=\"stackContent\"\n    >\n        <fd-dynamic-page-header *ngIf=\"edit\" [title]=\"'HomeEdit' | bbbTranslate\">\n            <fd-dynamic-page-global-actions>\n                <fd-toolbar *ngIf=\"edit\" fdType=\"transparent\" [clearBorder]=\"true\">\n                    <label fd-form-label fd-toolbar-item>Stacked Content </label>\n                    <fd-switch\n                        fd-toolbar-item\n                        [checked]=\"stackContent\"\n                        (checkedChange)=\"onStackContentChanged($event)\"\n                    ></fd-switch>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\n                        <i class=\"sap-icon--decline\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-content>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    stackContent ? renderTabsStacked : renderTabs;\n                    context: {\n                        $implicit: appTileGroups,\n                        stackContent: stackContent,\n                        edit: edit\n                    }\n                \"\n            ></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer>\n            <div fd-bar barDesign=\"footer\" *ngIf=\"edit\">\n                <div fd-bar-right>\n                    <fd-button-bar\n                        [label]=\"'SaveAndClose' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onExitEditHome(appTileGroups)\"\n                    ></fd-button-bar>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n</ng-container>\n\n<ng-template #loadingTpl>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<ng-template #renderTabs let-appTileGroups let-stackContent=\"stackContent\" let-edit=\"edit\">\n    <fd-tab-list\n        class=\"tile-tabs\"\n        [size]=\"deviceSize\"\n        [collapseOverflow]=\"true\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        cdkDropList\n        cdkDropListOrientation=\"vertical\"\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\n    >\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\n            <fd-tab\n                *ngIf=\"edit || appTileGroup.navigatorVisible\"\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\n                [class.is-expanded]=\"selectedTabTitle === (appTileGroup.navigatorTitle | bbbTranslate)\"\n            >\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderGroup;\n                            context: {\n                                $implicit: appTileGroup,\n                                stackContent: stackContent,\n                                edit: edit,\n                                isAppTileSubGroup: false\n                            }\n                        \"\n                    ></ng-container>\n                </fd-dynamic-page-content>\n            </fd-tab>\n        </ng-container>\n    </fd-tab-list>\n</ng-template>\n<ng-template #renderTabsStacked let-appTileGroups let-stackContent=\"stackContent\" let-edit=\"edit\">\n    <fd-tab-list\n        class=\"tile-tabs\"\n        [size]=\"deviceSize\"\n        [collapseOverflow]=\"true\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        [stackContent]=\"true\"\n        [maxContentHeight]=\"stackContent ? 'calc(99vh - 2.75rem - 44px)' : 'calc(100vh - 44px)'\"\n        cdkDropList\n        cdkDropListOrientation=\"vertical\"\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\n    >\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\n            <fd-tab\n                *ngIf=\"edit || appTileGroup.navigatorVisible\"\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\n                [count]=\"appTileGroup.$Children?.length\"\n            >\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderGroup;\n                            context: {\n                                $implicit: appTileGroup,\n                                stackContent: stackContent,\n                                edit: edit,\n                                isAppTileSubGroup: false\n                            }\n                        \"\n                    ></ng-container>\n                </fd-dynamic-page-content>\n            </fd-tab>\n        </ng-container>\n    </fd-tab-list>\n</ng-template>\n<ng-template\n    #renderGroup\n    let-appTileGroup\n    let-stackContent=\"stackContent\"\n    let-edit=\"edit\"\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\n>\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [deviceSize]=\"deviceSize\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\n        (tilesDropped)=\"onDrop($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-template>\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 section{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-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"] }]
         }], propDecorators: { tabListComponent: [{
                 type: ViewChild,
                 args: [TabListComponent]
@@ -1256,6 +1361,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }], edit: [{
                 type: Input
+            }], rtl: [{
+                type: Input
             }], stackContent: [{
                 type: Input
             }], deviceSize: [{
@@ -1286,7 +1393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Output
             }], tilesDropped: [{
                 type: Output
-            }], rtl: [{
+            }], _rtl: [{
                 type: HostBinding,
                 args: ['attr.rtl']
             }] } });
@@ -1311,6 +1418,7 @@ class TilesViewerContainerComponent extends BaseComponent {
     ngOnInit() {
         super.ngOnInit();
         this.viewLoading$ = this._tilesViewerService.viewLoading$;
+        this.rtl$ = this._portalService.rtl$;
         this.deviceSize$ = this._portalService.deviceSize$;
         this.edit$ = this._tilesService.edit$;
         this.appTileGroups$ = this._tilesService.homeAppTileGroups$;
@@ -1430,12 +1538,12 @@ class TilesViewerContainerComponent extends BaseComponent {
         this._tilesService.saveOrderAppTiles(appTileGroup, actionLinks, true, appTileIdTransferedId);
     }
 }
-TilesViewerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerContainerComponent, deps: [{ token: i1$2.PortalService }, { token: TilesService }, { token: TilesViewerService }], target: i0.ɵɵFactoryTarget.Component });
-TilesViewerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerContainerComponent, selector: "bt-tiles-viewer-container", providers: [TilesViewerService], usesInheritance: true, ngImport: i0, template: "<bt-tiles-viewer\n    [appTileGroups]=\"(appTileGroups$ | async)!!\"\n    [loading]=\"(viewLoading$ | async)!!\"\n    [edit]=\"(edit$ | async)!!\"\n    [stackContent]=\"(stackContent$ | async)!!\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    (stackContentChange)=\"onStackContentChanged($event)\"\n    (closeEditHome)=\"onCloseEditHome()\"\n    (save)=\"onExitEditHome($event)\"\n    (listDropped)=\"onDropGroup($event)\"\n    (tabChanged)=\"onSelectedTabChange($event)\"\n    (toggleGroup)=\"onToggleShowHide($event)\"\n    (resetGroup)=\"onReset($event)\"\n    (deleteGroup)=\"onDelete($event)\"\n    (tilesDropped)=\"onDrop($event)\"\n    (hideAppTileClick)=\"onHideAppTile($event)\"\n    (renameAppTileClick)=\"onRenameAppTile($event)\"\n></bt-tiles-viewer>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: ["appTileGroups", "loading", "edit", "stackContent", "deviceSize", "selectedAppGroupId", "DynamicComponents"], outputs: ["stackContentChange", "closeEditHome", "save", "listDropped", "tabChanged", "toggleGroup", "resetGroup", "deleteGroup", "hideAppTileClick", "renameAppTileClick", "tilesDropped"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TilesViewerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerContainerComponent, deps: [{ token: i1.PortalService }, { token: TilesService }, { token: TilesViewerService }], target: i0.ɵɵFactoryTarget.Component });
+TilesViewerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerContainerComponent, selector: "bt-tiles-viewer-container", providers: [TilesViewerService], usesInheritance: true, ngImport: i0, template: "<bt-tiles-viewer\n    [appTileGroups]=\"(appTileGroups$ | async)!!\"\n    [loading]=\"(viewLoading$ | async)!!\"\n    [edit]=\"(edit$ | async)!!\"\n    [rtl]=\"(rtl$ | async)!!\"\n    [stackContent]=\"(stackContent$ | async)!!\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    (stackContentChange)=\"onStackContentChanged($event)\"\n    (closeEditHome)=\"onCloseEditHome()\"\n    (save)=\"onExitEditHome($event)\"\n    (listDropped)=\"onDropGroup($event)\"\n    (tabChanged)=\"onSelectedTabChange($event)\"\n    (toggleGroup)=\"onToggleShowHide($event)\"\n    (resetGroup)=\"onReset($event)\"\n    (deleteGroup)=\"onDelete($event)\"\n    (tilesDropped)=\"onDrop($event)\"\n    (hideAppTileClick)=\"onHideAppTile($event)\"\n    (renameAppTileClick)=\"onRenameAppTile($event)\"\n></bt-tiles-viewer>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: ["appTileGroups", "loading", "edit", "rtl", "stackContent", "deviceSize", "selectedAppGroupId", "DynamicComponents"], outputs: ["stackContentChange", "closeEditHome", "save", "listDropped", "tabChanged", "toggleGroup", "resetGroup", "deleteGroup", "hideAppTileClick", "renameAppTileClick", "tilesDropped"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer-container', providers: [TilesViewerService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tiles-viewer\n    [appTileGroups]=\"(appTileGroups$ | async)!!\"\n    [loading]=\"(viewLoading$ | async)!!\"\n    [edit]=\"(edit$ | async)!!\"\n    [stackContent]=\"(stackContent$ | async)!!\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    (stackContentChange)=\"onStackContentChanged($event)\"\n    (closeEditHome)=\"onCloseEditHome()\"\n    (save)=\"onExitEditHome($event)\"\n    (listDropped)=\"onDropGroup($event)\"\n    (tabChanged)=\"onSelectedTabChange($event)\"\n    (toggleGroup)=\"onToggleShowHide($event)\"\n    (resetGroup)=\"onReset($event)\"\n    (deleteGroup)=\"onDelete($event)\"\n    (tilesDropped)=\"onDrop($event)\"\n    (hideAppTileClick)=\"onHideAppTile($event)\"\n    (renameAppTileClick)=\"onRenameAppTile($event)\"\n></bt-tiles-viewer>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.PortalService }, { type: TilesService }, { type: TilesViewerService }]; } });
+            args: [{ selector: 'bt-tiles-viewer-container', providers: [TilesViewerService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tiles-viewer\n    [appTileGroups]=\"(appTileGroups$ | async)!!\"\n    [loading]=\"(viewLoading$ | async)!!\"\n    [edit]=\"(edit$ | async)!!\"\n    [rtl]=\"(rtl$ | async)!!\"\n    [stackContent]=\"(stackContent$ | async)!!\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    (stackContentChange)=\"onStackContentChanged($event)\"\n    (closeEditHome)=\"onCloseEditHome()\"\n    (save)=\"onExitEditHome($event)\"\n    (listDropped)=\"onDropGroup($event)\"\n    (tabChanged)=\"onSelectedTabChange($event)\"\n    (toggleGroup)=\"onToggleShowHide($event)\"\n    (resetGroup)=\"onReset($event)\"\n    (deleteGroup)=\"onDelete($event)\"\n    (tilesDropped)=\"onDrop($event)\"\n    (hideAppTileClick)=\"onHideAppTile($event)\"\n    (renameAppTileClick)=\"onRenameAppTile($event)\"\n></bt-tiles-viewer>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.PortalService }, { type: TilesService }, { type: TilesViewerService }]; } });
 
 class MicroTileChartBulletComponent extends BaseBtTileComponent {
     ngOnInit() {
@@ -1450,18 +1558,15 @@ class MicroTileChartBulletComponent extends BaseBtTileComponent {
     }
 }
 MicroTileChartBulletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartBulletComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MicroTileChartBulletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroTileChartBulletComponent, selector: "bt-micro-tile-chart-bullet", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-bullet\n            *ngIf=\"double\"\n            [target]=\"target\"\n            [value]=\"value\"\n            [range]=\"range\"\n            [forecast]=\"forecast\"\n            [isDelta]=\"isDelta\"\n            [separatorLines]=\"separatorLines\"\n            [suffix]=\"suffix\"\n        >\n        </be-micro-chart-bullet>\n\n        <be-micro-chart-bullet\n            [target]=\"target\"\n            [value]=\"value\"\n            [range]=\"range\"\n            [forecast]=\"forecast\"\n            [isDelta]=\"double ? false : isDelta\"\n            [separatorLines]=\"separatorLines\"\n            [suffix]=\"suffix\"\n        >\n        </be-micro-chart-bullet>\n    </div>\n</bt-tile>\n", styles: [":host ::ng-deep .fd-tile__content{display:flex;column-gap:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartBulletComponent, selector: "be-micro-chart-bullet", inputs: ["range", "value", "forecast", "target", "suffix", "separatorLines", "isDelta"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MicroTileChartBulletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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-bullet\r\n            *ngIf=\"double\"\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        <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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartBulletComponent, selector: "be-micro-chart-bullet", inputs: ["range", "value", "forecast", "target", "suffix", "separatorLines", "isDelta"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartBulletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-bullet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-bullet\n            *ngIf=\"double\"\n            [target]=\"target\"\n            [value]=\"value\"\n            [range]=\"range\"\n            [forecast]=\"forecast\"\n            [isDelta]=\"isDelta\"\n            [separatorLines]=\"separatorLines\"\n            [suffix]=\"suffix\"\n        >\n        </be-micro-chart-bullet>\n\n        <be-micro-chart-bullet\n            [target]=\"target\"\n            [value]=\"value\"\n            [range]=\"range\"\n            [forecast]=\"forecast\"\n            [isDelta]=\"double ? false : isDelta\"\n            [separatorLines]=\"separatorLines\"\n            [suffix]=\"suffix\"\n        >\n        </be-micro-chart-bullet>\n    </div>\n</bt-tile>\n", styles: [":host ::ng-deep .fd-tile__content{display:flex;column-gap:20px}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-bullet', changeDetection: ChangeDetectionStrategy.OnPush, 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-bullet\r\n            *ngIf=\"double\"\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        <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(el, _renderer2, _cdr) {
-        super(el, _renderer2, _cdr);
-        this.el = el;
-        this._renderer2 = _renderer2;
-        this._cdr = _cdr;
+    constructor() {
+        super(...arguments);
         this.isStop = false;
     }
     get twoColumn() {
@@ -1490,12 +1595,12 @@ class NewsTileComponent extends BaseBtTileComponent {
         this.activeNews = newsMo;
     }
 }
-NewsTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NewsTileComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NewsTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NewsTileComponent, selector: "bt-news-tile", viewQueries: [{ propertyName: "carouselComponent", first: true, predicate: CarouselComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [footerTemplate]=\"newsFooter\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\n        <span>\n            {{ activeNews?.Text }}\n        </span>\n\n        <div class=\"wrapper-carousel\">\n            <div class=\"cover\"></div>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                [glyph]=\"isStop ? 'play' : 'pause'\"\n                (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\n            ></button>\n            <fd-carousel\n                carouselIndicatorsOrientation=\"top\"\n                [slideTransitionDuration]=\"1000\"\n                (slideChange)=\"slideChange($event)\"\n                [loop]=\"true\"\n                [navigation]=\"false\"\n                [navigatorInPageIndicator]=\"false\"\n                width=\"100%\"\n            >\n                <fd-carousel-item *ngFor=\"let slide of slides\" [value]=\"slide\">\n                    <img\n                        [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\n                    />\n                </fd-carousel-item>\n            </fd-carousel>\n        </div>\n    </div>\n</bt-tile>\n\n<!--  tile footer-->\n<ng-template #newsFooter>\n    <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\n        <ng-container *ngIf=\"twoColumn; else oneColumn\">\n            <div fd-tile-section>\n                <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\n            </div>\n            <div fd-tile-section>\n                <span fd-tile-footer-text>{{ activeNews?.Footer2 }}</span>\n            </div>\n        </ng-container>\n        <ng-template #oneColumn>\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\n        </ng-template>\n    </div>\n</ng-template>\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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3$2.CarouselComponent, selector: "fd-carousel", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "pageIndicatorsOrientation", "height", "width", "loop", "leftNavigationBtnLabel", "rightNavigationBtnLabel", "navigation", "navigatorInPageIndicator", "numericIndicator", "pageIndicatorContainer", "pageIndicator", "resourceStrings", "slideTransitionDuration", "swipeEnabled", "vertical", "visibleSlidesCount"], outputs: ["slideChange"] }, { kind: "component", type: i3$2.CarouselItemComponent, selector: "fd-carousel-item", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "loading", "title", "initialHeight", "initialWidth", "value"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$1.TileFooterTextDirective, selector: "[fdTileFooterText], [fd-tile-footer-text]" }, { kind: "directive", type: i1$2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i1$2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NewsTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NewsTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NewsTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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 }}\r\n        </span>\r\n\r\n        <div class=\"wrapper-carousel\">\r\n            <div class=\"cover\"></div>\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            <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                <fd-carousel-item *ngFor=\"let slide of slides\" [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            </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        <ng-container *ngIf=\"twoColumn; else oneColumn\">\r\n            <div fd-tile-section>\r\n                <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\r\n            </div>\r\n            <div fd-tile-section>\r\n                <span fd-tile-footer-text>{{ activeNews?.Footer2 }}</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #oneColumn>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\r\n        </ng-template>\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: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3$2.CarouselComponent, selector: "fd-carousel", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "pageIndicatorsOrientation", "height", "width", "loop", "leftNavigationBtnLabel", "rightNavigationBtnLabel", "navigation", "navigatorInPageIndicator", "numericIndicator", "pageIndicatorContainer", "pageIndicator", "resourceStrings", "slideTransitionDuration", "swipeEnabled", "vertical", "visibleSlidesCount"], outputs: ["slideChange"] }, { kind: "component", type: i3$2.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", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NewsTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-news-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [footerTemplate]=\"newsFooter\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\n        <span>\n            {{ activeNews?.Text }}\n        </span>\n\n        <div class=\"wrapper-carousel\">\n            <div class=\"cover\"></div>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                [glyph]=\"isStop ? 'play' : 'pause'\"\n                (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\n            ></button>\n            <fd-carousel\n                carouselIndicatorsOrientation=\"top\"\n                [slideTransitionDuration]=\"1000\"\n                (slideChange)=\"slideChange($event)\"\n                [loop]=\"true\"\n                [navigation]=\"false\"\n                [navigatorInPageIndicator]=\"false\"\n                width=\"100%\"\n            >\n                <fd-carousel-item *ngFor=\"let slide of slides\" [value]=\"slide\">\n                    <img\n                        [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\n                    />\n                </fd-carousel-item>\n            </fd-carousel>\n        </div>\n    </div>\n</bt-tile>\n\n<!--  tile footer-->\n<ng-template #newsFooter>\n    <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\n        <ng-container *ngIf=\"twoColumn; else oneColumn\">\n            <div fd-tile-section>\n                <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\n            </div>\n            <div fd-tile-section>\n                <span fd-tile-footer-text>{{ activeNews?.Footer2 }}</span>\n            </div>\n        </ng-container>\n        <ng-template #oneColumn>\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\n        </ng-template>\n    </div>\n</ng-template>\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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { carouselComponent: [{
+            args: [{ selector: 'bt-news-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [footerTemplate]=\"newsFooter\"\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 style=\"align-items: center; padding-top: 1rem\">\r\n        <span>\r\n            {{ activeNews?.Text }}\r\n        </span>\r\n\r\n        <div class=\"wrapper-carousel\">\r\n            <div class=\"cover\"></div>\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            <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                <fd-carousel-item *ngFor=\"let slide of slides\" [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            </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        <ng-container *ngIf=\"twoColumn; else oneColumn\">\r\n            <div fd-tile-section>\r\n                <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\r\n            </div>\r\n            <div fd-tile-section>\r\n                <span fd-tile-footer-text>{{ activeNews?.Footer2 }}</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #oneColumn>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\r\n        </ng-template>\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]
             }] } });
@@ -1518,10 +1623,10 @@ class MicroTileChartComparisonComponent extends BaseBtTileComponent {
     }
 }
 MicroTileChartComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartComparisonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MicroTileChartComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroTileChartComparisonComponent, selector: "bt-micro-tile-chart-comparison", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-comparison [data]=\"chartData\" [size]=\"double ? 'l' : 's'\"></be-micro-chart-comparison>\n    </div>\n</bt-tile>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartComparisonComponent, selector: "be-micro-chart-comparison", inputs: ["data", "size"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MicroTileChartComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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$4.MicroChartComparisonComponent, selector: "be-micro-chart-comparison", inputs: ["data", "size"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartComparisonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-comparison', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-comparison [data]=\"chartData\" [size]=\"double ? 'l' : 's'\"></be-micro-chart-comparison>\n    </div>\n</bt-tile>\n" }]
+            args: [{ selector: 'bt-micro-tile-chart-comparison', changeDetection: ChangeDetectionStrategy.OnPush, 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-comparison [data]=\"chartData\" [size]=\"double ? 'l' : 's'\"></be-micro-chart-comparison>\r\n    </div>\r\n</bt-tile>\r\n" }]
         }] });
 
 class MicroTileChartStackbarComponent extends BaseBtTileComponent {
@@ -1538,10 +1643,10 @@ class MicroTileChartStackbarComponent extends BaseBtTileComponent {
     }
 }
 MicroTileChartStackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartStackbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MicroTileChartStackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroTileChartStackbarComponent, selector: "bt-micro-tile-chart-stackbar", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-stackbar [data]=\"charData\"></be-micro-chart-stackbar>\n    </div>\n</bt-tile>\n", styles: [".chart{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartStackbarComponent, selector: "be-micro-chart-stackbar", inputs: ["data"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MicroTileChartStackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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$4.MicroChartStackbarComponent, selector: "be-micro-chart-stackbar", inputs: ["data"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartStackbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-stackbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-stackbar [data]=\"charData\"></be-micro-chart-stackbar>\n    </div>\n</bt-tile>\n", styles: [".chart{width:100%}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-stackbar', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
@@ -1563,10 +1668,10 @@ class MicroTileChartLineComponent extends BaseBtTileComponent {
     }
 }
 MicroTileChartLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MicroTileChartLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroTileChartLineComponent, selector: "bt-micro-tile-chart-line", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-line [line]=\"chartData\"></be-micro-chart-line>\n    </div>\n</bt-tile>\n", styles: ["be-micro-chart-bar{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartLineComponent, selector: "be-micro-chart-line", inputs: ["line"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MicroTileChartLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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$4.MicroChartLineComponent, selector: "be-micro-chart-line", inputs: ["line"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-line', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-line [line]=\"chartData\"></be-micro-chart-line>\n    </div>\n</bt-tile>\n", styles: ["be-micro-chart-bar{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-line', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
@@ -1576,10 +1681,10 @@ class MicroTileChartCircularComponent extends BaseBtTileComponent {
     }
 }
 MicroTileChartCircularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartCircularComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MicroTileChartCircularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroTileChartCircularComponent, selector: "bt-micro-tile-chart-circular", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-circular [data]=\"chartData\"></be-micro-chart-circular>\n    </div>\n</bt-tile>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartCircularComponent, selector: "be-micro-chart-circular", inputs: ["data"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MicroTileChartCircularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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$4.MicroChartCircularComponent, selector: "be-micro-chart-circular", inputs: ["data"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartCircularComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-circular', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-circular [data]=\"chartData\"></be-micro-chart-circular>\n    </div>\n</bt-tile>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-circular', changeDetection: ChangeDetectionStrategy.OnPush, 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-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 {
@@ -1609,10 +1714,10 @@ class MicroTileChartAreaComponent extends BaseBtTileComponent {
     }
 }
 MicroTileChartAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MicroTileChartAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroTileChartAreaComponent, selector: "bt-micro-tile-chart-area", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-area\n            [style.flex-direction]=\"double ? 'row' : 'column'\"\n            [chartData]=\"chartData\"\n            [size]=\"double ? 'l' : 's'\"\n        ></be-micro-chart-area>\n    </div>\n</bt-tile>\n", styles: [":host{display:block}be-micro-chart-area{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartAreaComponent, selector: "be-micro-chart-area", inputs: ["size", "chartData"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MicroTileChartAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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$4.MicroChartAreaComponent, selector: "be-micro-chart-area", inputs: ["size", "chartData"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-area\n            [style.flex-direction]=\"double ? 'row' : 'column'\"\n            [chartData]=\"chartData\"\n            [size]=\"double ? 'l' : 's'\"\n        ></be-micro-chart-area>\n    </div>\n</bt-tile>\n", styles: [":host{display:block}be-micro-chart-area{display:flex}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-area', changeDetection: ChangeDetectionStrategy.OnPush, 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-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 {
@@ -1631,10 +1736,10 @@ class MicroTileChartBarComponent extends BaseBtTileComponent {
     }
 }
 MicroTileChartBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MicroTileChartBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MicroTileChartBarComponent, selector: "bt-micro-tile-chart-bar", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-bar [data]=\"chartData\" [size]=\"double ? 'l' : 's'\" [extraData]=\"extraData\"></be-micro-chart-bar>\n    </div>\n</bt-tile>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: i2$4.MicroChartBarComponent, selector: "be-micro-chart-bar", inputs: ["data", "size", "extraData"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MicroTileChartBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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-bar [data]=\"chartData\" [size]=\"double ? 'l' : 's'\" [extraData]=\"extraData\"></be-micro-chart-bar>\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$4.MicroChartBarComponent, selector: "be-micro-chart-bar", inputs: ["data", "size", "extraData"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MicroTileChartBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-micro-tile-chart-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <be-micro-chart-bar [data]=\"chartData\" [size]=\"double ? 'l' : 's'\" [extraData]=\"extraData\"></be-micro-chart-bar>\n    </div>\n</bt-tile>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'bt-micro-tile-chart-bar', changeDetection: ChangeDetectionStrategy.OnPush, 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-bar [data]=\"chartData\" [size]=\"double ? 'l' : 's'\" [extraData]=\"extraData\"></be-micro-chart-bar>\r\n    </div>\r\n</bt-tile>\r\n", styles: [":host{display:block}\n"] }]
         }] });
 
 class CreateAppGroupComponent extends BaseComponent {
@@ -1660,12 +1765,12 @@ class CreateAppGroupComponent extends BaseComponent {
         }
     }
 }
-CreateAppGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CreateAppGroupComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i1$4.DialogRef }, { token: i1$2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-CreateAppGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\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            fdInitialFocus\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$4.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i6$4.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i6$4.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i6$4.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CreateAppGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CreateAppGroupComponent, deps: [{ token: i1$4.UntypedFormBuilder }, { token: i1$1.DialogRef }, { token: i1.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
+CreateAppGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\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            fdInitialFocus\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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$4.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i6$4.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i6$4.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i6$4.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CreateAppGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-create-app-group', changeDetection: ChangeDetectionStrategy.OnPush, 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                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\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            fdInitialFocus\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: function () { return [{ type: i1$3.UntypedFormBuilder }, { type: i1$4.DialogRef }, { type: i1$2.BbbTranslatePipe }]; } });
+        }], ctorParameters: function () { return [{ type: i1$4.UntypedFormBuilder }, { type: i1$1.DialogRef }, { type: i1.BbbTranslatePipe }]; } });
 
 class PinTileComponent extends BaseComponent {
     constructor(_dialogService, _dialogRef, bbbPipe) {
@@ -1750,12 +1855,12 @@ class PinTileComponent extends BaseComponent {
         this._dialogRef.close(result);
     }
 }
-PinTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PinTileComponent, deps: [{ token: i1$4.DialogService }, { token: i1$4.DialogRef }, { token: i1$2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-PinTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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            <ng-container *ngFor=\"let appTileGroup of appTileGroups\">\r\n                <li *ngIf=\"!appTileGroup.$Disabledpin\" 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                <ng-container *ngFor=\"let subGroup of appTileGroup.$Children\">\r\n                    <li *ngIf=\"!subGroup.$Disabledpin\" 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                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <ng-template fdTemplate=\"footer\">\r\n            <div fd-bar-left></div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar fd-initial-focus fdType=\"emphasized\" [label]=\"'OK' | bbbTranslate\" (click)=\"onAccept()\">\r\n                </fd-button-bar>\r\n                <fd-button-bar\r\n                    fd-initial-focus\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i5$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$5.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PinTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PinTileComponent, deps: [{ token: i1$1.DialogService }, { token: i1$1.DialogRef }, { token: i1.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
+PinTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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            <ng-container *ngFor=\"let appTileGroup of appTileGroups\">\r\n                <li *ngIf=\"!appTileGroup.$Disabledpin\" 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                <ng-container *ngFor=\"let subGroup of appTileGroup.$Children\">\r\n                    <li *ngIf=\"!subGroup.$Disabledpin\" 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                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <ng-template fdTemplate=\"footer\">\r\n            <div fd-bar-left></div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar fd-initial-focus fdType=\"emphasized\" [label]=\"'OK' | bbbTranslate\" (click)=\"onAccept()\">\r\n                </fd-button-bar>\r\n                <fd-button-bar\r\n                    fd-initial-focus\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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i5$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$5.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PinTileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-pin-tile', changeDetection: ChangeDetectionStrategy.OnPush, 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            <ng-container *ngFor=\"let appTileGroup of appTileGroups\">\r\n                <li *ngIf=\"!appTileGroup.$Disabledpin\" 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                <ng-container *ngFor=\"let subGroup of appTileGroup.$Children\">\r\n                    <li *ngIf=\"!subGroup.$Disabledpin\" 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                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <ng-template fdTemplate=\"footer\">\r\n            <div fd-bar-left></div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar fd-initial-focus fdType=\"emphasized\" [label]=\"'OK' | bbbTranslate\" (click)=\"onAccept()\">\r\n                </fd-button-bar>\r\n                <fd-button-bar\r\n                    fd-initial-focus\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: function () { return [{ type: i1$4.DialogService }, { type: i1$4.DialogRef }, { type: i1$2.BbbTranslatePipe }]; }, propDecorators: { app: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: i1$1.DialogRef }, { type: i1.BbbTranslatePipe }]; }, propDecorators: { app: [{
                 type: Input
             }], appTileGroups: [{
                 type: Input
@@ -1874,14 +1979,14 @@ class AppFinderService {
         this._appGroupsSource.next([...newAppGroups]);
     }
 }
-AppFinderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderService, deps: [{ token: i1$2.PortalService }, { token: TilesService }], target: i0.ɵɵFactoryTarget.Injectable });
+AppFinderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderService, deps: [{ token: i1.PortalService }, { token: TilesService }], target: i0.ɵɵFactoryTarget.Injectable });
 AppFinderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.PortalService }, { type: TilesService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.PortalService }, { type: TilesService }]; } });
 
 class FormAppFinderComponent extends BaseComponent {
     constructor(_cdr, _dialogService, _appFinderService, _el, _contentDensityService) {
@@ -1963,12 +2068,12 @@ class FormAppFinderComponent extends BaseComponent {
         this._cdr.detectChanges();
     }
 }
-FormAppFinderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormAppFinderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.DialogService }, { token: AppFinderService }, { token: i0.ElementRef }, { token: i1$4.ContentDensityService }], target: i0.ɵɵFactoryTarget.Component });
-FormAppFinderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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$2.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.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FormAppFinderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", 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 });
+FormAppFinderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormAppFinderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-form-app-finder', changeDetection: ChangeDetectionStrategy.OnPush, 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: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DialogService }, { type: AppFinderService }, { type: i0.ElementRef }, { type: i1$4.ContentDensityService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.DialogService }, { type: AppFinderService }, { type: i0.ElementRef }, { type: i1$1.ContentDensityService }]; } });
 
 class FooterEditTileComponent extends BaseComponent {
 }
@@ -2000,10 +2105,10 @@ class NumericTileComponent extends BaseBtTileComponent {
     }
 }
 NumericTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NumericTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumericTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NumericTileComponent, selector: "bt-numeric-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\">{{ kpi }}</div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div fd-numeric-content-scale [state]=\"scaleState\">\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                    ></span>\n                    <span fd-numeric-content-scale-text>{{ scaleText }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$1.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$1.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "directive", type: i1$1.NumericContentLaunchIconContainerDirective, selector: "[fd-numeric-content-launch-icon-container]" }, { kind: "directive", type: i1$1.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph"] }, { kind: "directive", type: i1$1.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph"] }, { kind: "directive", type: i1$1.NumericContentScaleContainerDirective, selector: "[fd-numeric-content-scale-container]" }, { kind: "directive", type: i1$1.NumericContentScaleDirective, selector: "[fd-numeric-content-scale]", inputs: ["state", "class"] }, { kind: "directive", type: i1$1.NumericContentScaleTextDirective, selector: "[fd-numeric-content-scale-text]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i6.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NumericTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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\">{{ kpi }}</div>\r\n            </div>\r\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\r\n                <div fd-numeric-content-scale [state]=\"scaleState\">\r\n                    <span\r\n                        fd-numeric-content-scale-arrow\r\n                        [glyph]=\"scaleArrowIcon\"\r\n                        [class]=\"scaleArrowIcon | sapFontClass\"\r\n                    ></span>\r\n                    <span fd-numeric-content-scale-text>{{ scaleText }}</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"] }, { kind: "directive", type: i1$3.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph"] }, { 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", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i6.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NumericTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-numeric-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\">{{ kpi }}</div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div fd-numeric-content-scale [state]=\"scaleState\">\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                    ></span>\n                    <span fd-numeric-content-scale-text>{{ scaleText }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n" }]
+            args: [{ selector: 'bt-numeric-tile', changeDetection: ChangeDetectionStrategy.OnPush, 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        <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\">{{ kpi }}</div>\r\n            </div>\r\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\r\n                <div fd-numeric-content-scale [state]=\"scaleState\">\r\n                    <span\r\n                        fd-numeric-content-scale-arrow\r\n                        [glyph]=\"scaleArrowIcon\"\r\n                        [class]=\"scaleArrowIcon | sapFontClass\"\r\n                    ></span>\r\n                    <span fd-numeric-content-scale-text>{{ scaleText }}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n" }]
         }] });
 
 class LogoTileComponent extends BaseBtTileComponent {
@@ -2017,10 +2122,10 @@ class LogoTileComponent extends BaseBtTileComponent {
     }
 }
 LogoTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LogoTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LogoTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LogoTileComponent, selector: "bt-logo-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n>\n    <div fd-tile-content>\n        <img fd-tile-logo [src]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\" />\n    </div>\n</bt-tile>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileLogoDirective, selector: "[fdTileLogo], [fd-tile-logo]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i1$2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LogoTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LogoTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-logo-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n>\n    <div fd-tile-content>\n        <img fd-tile-logo [src]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\" />\n    </div>\n</bt-tile>\n" }]
+            args: [{ selector: 'bt-logo-tile', changeDetection: ChangeDetectionStrategy.OnPush, 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>\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 {
@@ -2041,10 +2146,10 @@ class FeedTileComponent extends BaseBtTileComponent {
     }
 }
 FeedTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FeedTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FeedTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FeedTileComponent, selector: "bt-feed-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'feed'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content [twoColumn]=\"twoColumn\">\n        <ng-container *ngIf=\"twoColumn; else oneColumn\">\n            <div fd-tile-section>\n                <div fd-tile-content-text>{{ text | bbbTranslate }}</div>\n                <div fd-tile-content-byline>{{ byline }}</div>\n            </div>\n            <div fd-tile-section>\n                <div fd-numeric-content>\n                    <div fd-numeric-content-kpi-container>\n                        <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #oneColumn>\n            <div fd-numeric-content>\n                <div fd-numeric-content-kpi-container>\n                    <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\n                </div>\n            </div>\n        </ng-template>\n    </div>\n</bt-tile>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$1.TileContentBylineDirective, selector: "[fdTileContentByline], [fd-tile-content-byline]" }, { kind: "directive", type: i1$1.TileContentTextDirective, selector: "[fdTileContentText], [fd-tile-content-text]" }, { kind: "directive", type: i1$1.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$1.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$1.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FeedTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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        <ng-container *ngIf=\"twoColumn; else oneColumn\">\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        </ng-container>\r\n        <ng-template #oneColumn>\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        </ng-template>\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.TileContentBylineDirective, selector: "[fdTileContentByline], [fd-tile-content-byline]" }, { 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", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FeedTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-feed-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'feed'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content [twoColumn]=\"twoColumn\">\n        <ng-container *ngIf=\"twoColumn; else oneColumn\">\n            <div fd-tile-section>\n                <div fd-tile-content-text>{{ text | bbbTranslate }}</div>\n                <div fd-tile-content-byline>{{ byline }}</div>\n            </div>\n            <div fd-tile-section>\n                <div fd-numeric-content>\n                    <div fd-numeric-content-kpi-container>\n                        <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #oneColumn>\n            <div fd-numeric-content>\n                <div fd-numeric-content-kpi-container>\n                    <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\n                </div>\n            </div>\n        </ng-template>\n    </div>\n</bt-tile>\n" }]
+            args: [{ selector: 'bt-feed-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'feed'\"\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 [twoColumn]=\"twoColumn\">\r\n        <ng-container *ngIf=\"twoColumn; else oneColumn\">\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        </ng-container>\r\n        <ng-template #oneColumn>\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        </ng-template>\r\n    </div>\r\n</bt-tile>\r\n" }]
         }] });
 
 class SimpleTileComponent extends BaseBtTileComponent {
@@ -2055,10 +2160,10 @@ class SimpleTileComponent extends BaseBtTileComponent {
     }
 }
 SimpleTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SimpleTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SimpleTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: SimpleTileComponent, selector: "bt-simple-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <fd-icon *ngIf=\"icon\" [glyph]=\"icon\" [font]=\"icon | sapFont\" [style.color]=\"iconColor\"></fd-icon>\n    </div>\n</bt-tile>\n", styles: ["::ng-deep .fd-tile--launch .fd-tile__content{align-items:normal!important}fd-icon{font-size:3rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i6.SapFontPipe, name: "sapFont" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SimpleTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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        <fd-icon *ngIf=\"icon\" [glyph]=\"icon\" [font]=\"icon | sapFont\" [style.color]=\"iconColor\"></fd-icon>\r\n    </div>\r\n</bt-tile>\r\n", styles: ["::ng-deep .fd-tile--launch .fd-tile__content{align-items:normal!important}fd-icon{font-size:3rem}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i6.SapFontPipe, name: "sapFont" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SimpleTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-simple-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <fd-icon *ngIf=\"icon\" [glyph]=\"icon\" [font]=\"icon | sapFont\" [style.color]=\"iconColor\"></fd-icon>\n    </div>\n</bt-tile>\n", styles: ["::ng-deep .fd-tile--launch .fd-tile__content{align-items:normal!important}fd-icon{font-size:3rem}\n"] }]
+            args: [{ selector: 'bt-simple-tile', changeDetection: ChangeDetectionStrategy.OnPush, 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        <fd-icon *ngIf=\"icon\" [glyph]=\"icon\" [font]=\"icon | sapFont\" [style.color]=\"iconColor\"></fd-icon>\r\n    </div>\r\n</bt-tile>\r\n", styles: ["::ng-deep .fd-tile--launch .fd-tile__content{align-items:normal!important}fd-icon{font-size:3rem}\n"] }]
         }] });
 
 class ProfileTileComponent extends BaseBtTileComponent {
@@ -2072,10 +2177,10 @@ class ProfileTileComponent extends BaseBtTileComponent {
     }
 }
 ProfileTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ProfileTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ProfileTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ProfileTileComponent, selector: "bt-profile-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <span\n            *ngIf=\"fileId; else showIcon\"\n            class=\"profile\"\n            fd-tile-profile-img\n            [backgroundImage]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\"\n        ></span>\n        <ng-template #showIcon>\n            <fd-icon\n                *ngIf=\"settings.Icon; else avatar\"\n                [font]=\"settings.Icon | sapFont\"\n                fd-tile-profile-img\n                style=\"font-size: 2rem\"\n                [glyph]=\"settings.Icon\"\n            ></fd-icon>\n        </ng-template>\n        <ng-template #avatar>\n            <fd-icon font=\"SAP-icons-TNT\" fd-tile-profile-img style=\"font-size: 2rem\" glyph=\"user\"></fd-icon>\n        </ng-template>\n    </div>\n</bt-tile>\n", styles: [".profile{background-size:contain;background-repeat:no-repeat}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i1$1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileProfileImgDirective, selector: "[fdTileProfileImg], [fd-tile-profile-img]", inputs: ["id", "ariaLabel", "ariaLabelledby", "backgroundImage"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i1$2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i6.SapFontPipe, name: "sapFont" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProfileTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    [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        <span\r\n            *ngIf=\"fileId; else showIcon\"\r\n            class=\"profile\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\"\r\n        ></span>\r\n        <ng-template #showIcon>\r\n            <fd-icon\r\n                *ngIf=\"settings.Icon; else avatar\"\r\n                [font]=\"settings.Icon | sapFont\"\r\n                fd-tile-profile-img\r\n                style=\"font-size: 2rem\"\r\n                [glyph]=\"settings.Icon\"\r\n            ></fd-icon>\r\n        </ng-template>\r\n        <ng-template #avatar>\r\n            <fd-icon font=\"SAP-icons-TNT\" fd-tile-profile-img style=\"font-size: 2rem\" glyph=\"user\"></fd-icon>\r\n        </ng-template>\r\n    </div>\r\n</bt-tile>\r\n", styles: [".profile{background-size:contain;background-repeat:no-repeat}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { 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", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { 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: "14.2.7", ngImport: i0, type: ProfileTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-profile-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <span\n            *ngIf=\"fileId; else showIcon\"\n            class=\"profile\"\n            fd-tile-profile-img\n            [backgroundImage]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\"\n        ></span>\n        <ng-template #showIcon>\n            <fd-icon\n                *ngIf=\"settings.Icon; else avatar\"\n                [font]=\"settings.Icon | sapFont\"\n                fd-tile-profile-img\n                style=\"font-size: 2rem\"\n                [glyph]=\"settings.Icon\"\n            ></fd-icon>\n        </ng-template>\n        <ng-template #avatar>\n            <fd-icon font=\"SAP-icons-TNT\" fd-tile-profile-img style=\"font-size: 2rem\" glyph=\"user\"></fd-icon>\n        </ng-template>\n    </div>\n</bt-tile>\n", styles: [".profile{background-size:contain;background-repeat:no-repeat}\n"] }]
+            args: [{ selector: 'bt-profile-tile', changeDetection: ChangeDetectionStrategy.OnPush, 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        <span\r\n            *ngIf=\"fileId; else showIcon\"\r\n            class=\"profile\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\"\r\n        ></span>\r\n        <ng-template #showIcon>\r\n            <fd-icon\r\n                *ngIf=\"settings.Icon; else avatar\"\r\n                [font]=\"settings.Icon | sapFont\"\r\n                fd-tile-profile-img\r\n                style=\"font-size: 2rem\"\r\n                [glyph]=\"settings.Icon\"\r\n            ></fd-icon>\r\n        </ng-template>\r\n        <ng-template #avatar>\r\n            <fd-icon font=\"SAP-icons-TNT\" fd-tile-profile-img style=\"font-size: 2rem\" glyph=\"user\"></fd-icon>\r\n        </ng-template>\r\n    </div>\r\n</bt-tile>\r\n", styles: [".profile{background-size:contain;background-repeat:no-repeat}\n"] }]
         }] });
 
 class NotificationGroupHeaderComponent extends BaseComponent {
@@ -2101,7 +2206,7 @@ class NotificationGroupHeaderComponent extends BaseComponent {
     }
 }
 NotificationGroupHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NotificationGroupHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NotificationGroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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 }})\r\n    <strong *ngIf=\"unreadCount !== 0\">{{ 'New' | bbbTranslate }} ({{ unreadCount }})</strong>\r\n</h2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationGroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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 }})\r\n    <strong *ngIf=\"unreadCount !== 0\">{{ 'New' | bbbTranslate }} ({{ unreadCount }})</strong>\r\n</h2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NotificationGroupHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-notification-group-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h2 fd-notification-title [unread]=\"false\">\r\n    {{ title | bbbTranslate }} ({{ notifications.length }})\r\n    <strong *ngIf=\"unreadCount !== 0\">{{ 'New' | bbbTranslate }} ({{ unreadCount }})</strong>\r\n</h2>\r\n" }]
@@ -2190,12 +2295,12 @@ class NotificationGroupComponent extends BaseComponent {
         this._cdr.detectChanges();
     }
 }
-NotificationGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NotificationGroupComponent, deps: [{ token: i1$2.GroupByPipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NotificationGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: { notifications: "notifications", loading: "loading", deviceSize: "deviceSize", notificationCount: "notificationCount" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", show: "show", loadMore: "loadMore" }, host: { properties: { "class": "this._deviceSize" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"notifications && notifications.length > 0; else noData\">\n    <ng-container>\n        <fd-notification-group>\n            <fd-tab-list size=\"s\">\n                <fd-tab\n                    [title]=\"tab.title | bbbTranslate\"\n                    *ngFor=\"let tab of tabList; let index = index; trackBy: _trackByTitle\"\n                >\n                    <fd-notification-group-list\n                        *ngFor=\"let groupItem of tab.groupByItems; let index = index; trackBy: _trackByKey\"\n                    >\n                        <fd-notification-group-header [(expanded)]=\"expanded[groupItem.key]\">\n                            <fd-notification-header>\n                                <bt-notification-group-header\n                                    [notifications]=\"groupItem.value\"\n                                    [title]=\"groupItem.key\"\n                                ></bt-notification-group-header>\n                            </fd-notification-header>\n                            <fd-notification-actions>\n                                <!-- <button fd-button label=\"Accept All\"></button> -->\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [ariaLabel]=\"'DeleteAll' | bbbTranslate\"\n                                    [title]=\"'DeleteAll' | bbbTranslate\"\n                                    glyph=\"decline\"\n                                    (click)=\"remove.emit({ items: groupItem.value, silent: false })\"\n                                ></button>\n                            </fd-notification-actions>\n                        </fd-notification-group-header>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                notificationBody;\n                                context: { $implicit: groupItem.value, expanded: expanded[groupItem.key] }\n                            \"\n                        ></ng-container>\n                        <!-- <fd-notification-limit *ngIf=\"groupItem.value.length - 4 > 0\">\n                            <h1 fd-notification-limit-title>\n                                There are {{ groupItem.value.length - 4 }} more notifications\n                            </h1>\n                            <p fd-notification-limit-description>\n                                You need to close or take action on the listed notifications to display more.\n                            </p>\n                        </fd-notification-limit> -->\n                    </fd-notification-group-list>\n                </fd-tab>\n            </fd-tab-list>\n        </fd-notification-group>\n    </ng-container>\n</ng-container>\n<ng-template #noData>\n    <bsu-no-data *ngIf=\"!loading; else loadingTpl\"></bsu-no-data>\n</ng-template>\n<ng-template #loadingTpl>\n    <div style=\"height: 30px; position: relative\">\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #notificationItem> </ng-template>\n\n<ng-template #notificationBody let-notifications let-exapanded=\"expanded\">\n    <div style=\"max-height: 346px; overflow-y: auto; overflow-x: hidden\">\n        <ng-container *ngFor=\"let mo of notifications; trackBy: _trackMoById; let first = first; let last = last\">\n            <bsu-notification-item\n                [notificationItem]=\"mo\"\n                (viewed)=\"viewed.emit($event)\"\n                (remove)=\"remove.emit($event)\"\n                (show)=\"show.emit($event)\"\n                (actionClick)=\"actionClick.emit($event)\"\n                intersectionObserver\n                [intersectionThreshold]=\"0.5\"\n                [deviceSize]=\"deviceSize\"\n                (visibilityChange)=\"onVisibilityChange($event, mo, last)\"\n            ></bsu-notification-item>\n        </ng-container>\n        <ng-container *ngIf=\"loading\">\n            <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i4$2.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i4$2.NotificationGroupHeaderComponent, selector: "fd-notification-group-header", inputs: ["expandCompact", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: i4$2.NotificationGroupComponent, selector: "fd-notification-group", inputs: ["class", "mobile", "width"] }, { kind: "component", type: i4$2.NotificationGroupListComponent, selector: "fd-notification-group-list" }, { kind: "component", type: i8$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i8$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "directive", type: i1$2.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" }, { kind: "component", type: i6.NotificationItemComponent, selector: "bsu-notification-item", inputs: ["option", "notificationItem", "showCloseButton", "deviceSize"], outputs: ["viewed", "remove", "actionClick", "show", "close"] }, { kind: "component", type: NotificationGroupHeaderComponent, selector: "bt-notification-group-header", inputs: ["notifications", "title"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NotificationGroupComponent, deps: [{ token: i1.GroupByPipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NotificationGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: { notifications: "notifications", loading: "loading", deviceSize: "deviceSize", notificationCount: "notificationCount" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", show: "show", loadMore: "loadMore" }, host: { properties: { "class": "this._deviceSize" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"notifications && notifications.length > 0; else noData\">\n    <ng-container>\n        <fd-notification-group>\n            <fd-tab-list size=\"s\">\n                <fd-tab\n                    [title]=\"tab.title | bbbTranslate\"\n                    *ngFor=\"let tab of tabList; let index = index; trackBy: _trackByTitle\"\n                >\n                    <fd-notification-group-list\n                        *ngFor=\"let groupItem of tab.groupByItems; let index = index; trackBy: _trackByKey\"\n                    >\n                        <fd-notification-group-header [(expanded)]=\"expanded[groupItem.key]\">\n                            <fd-notification-header>\n                                <bt-notification-group-header\n                                    [notifications]=\"groupItem.value\"\n                                    [title]=\"groupItem.key\"\n                                ></bt-notification-group-header>\n                            </fd-notification-header>\n                            <fd-notification-actions>\n                                <!-- <button fd-button label=\"Accept All\"></button> -->\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [ariaLabel]=\"'DeleteAll' | bbbTranslate\"\n                                    [title]=\"'DeleteAll' | bbbTranslate\"\n                                    glyph=\"decline\"\n                                    (click)=\"remove.emit({ items: groupItem.value, silent: false })\"\n                                ></button>\n                            </fd-notification-actions>\n                        </fd-notification-group-header>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                notificationBody;\n                                context: { $implicit: groupItem.value, expanded: expanded[groupItem.key] }\n                            \"\n                        ></ng-container>\n                        <!-- <fd-notification-limit *ngIf=\"groupItem.value.length - 4 > 0\">\n                            <h1 fd-notification-limit-title>\n                                There are {{ groupItem.value.length - 4 }} more notifications\n                            </h1>\n                            <p fd-notification-limit-description>\n                                You need to close or take action on the listed notifications to display more.\n                            </p>\n                        </fd-notification-limit> -->\n                    </fd-notification-group-list>\n                </fd-tab>\n            </fd-tab-list>\n        </fd-notification-group>\n    </ng-container>\n</ng-container>\n<ng-template #noData>\n    <bsu-no-data *ngIf=\"!loading; else loadingTpl\"></bsu-no-data>\n</ng-template>\n<ng-template #loadingTpl>\n    <div style=\"height: 30px; position: relative\">\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #notificationItem> </ng-template>\n\n<ng-template #notificationBody let-notifications let-exapanded=\"expanded\">\n    <div style=\"max-height: 346px; overflow-y: auto; overflow-x: hidden\">\n        <ng-container *ngFor=\"let mo of notifications; trackBy: _trackMoById; let first = first; let last = last\">\n            <bsu-notification-item\n                [notificationItem]=\"mo\"\n                (viewed)=\"viewed.emit($event)\"\n                (remove)=\"remove.emit($event)\"\n                (show)=\"show.emit($event)\"\n                (actionClick)=\"actionClick.emit($event)\"\n                intersectionObserver\n                [intersectionThreshold]=\"0.5\"\n                [deviceSize]=\"deviceSize\"\n                (visibilityChange)=\"onVisibilityChange($event, mo, last)\"\n            ></bsu-notification-item>\n        </ng-container>\n        <ng-container *ngIf=\"loading\">\n            <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i4$2.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i4$2.NotificationGroupHeaderComponent, selector: "fd-notification-group-header", inputs: ["expandCompact", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: i4$2.NotificationGroupComponent, selector: "fd-notification-group", inputs: ["class", "mobile", "width"] }, { kind: "component", type: i4$2.NotificationGroupListComponent, selector: "fd-notification-group-list" }, { kind: "component", type: i8$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i8$2.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" }, { kind: "component", type: i6.NotificationItemComponent, selector: "bsu-notification-item", inputs: ["option", "notificationItem", "showCloseButton", "deviceSize"], outputs: ["viewed", "remove", "actionClick", "show", "close"] }, { 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: "14.2.7", ngImport: i0, type: NotificationGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-notification-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"notifications && notifications.length > 0; else noData\">\n    <ng-container>\n        <fd-notification-group>\n            <fd-tab-list size=\"s\">\n                <fd-tab\n                    [title]=\"tab.title | bbbTranslate\"\n                    *ngFor=\"let tab of tabList; let index = index; trackBy: _trackByTitle\"\n                >\n                    <fd-notification-group-list\n                        *ngFor=\"let groupItem of tab.groupByItems; let index = index; trackBy: _trackByKey\"\n                    >\n                        <fd-notification-group-header [(expanded)]=\"expanded[groupItem.key]\">\n                            <fd-notification-header>\n                                <bt-notification-group-header\n                                    [notifications]=\"groupItem.value\"\n                                    [title]=\"groupItem.key\"\n                                ></bt-notification-group-header>\n                            </fd-notification-header>\n                            <fd-notification-actions>\n                                <!-- <button fd-button label=\"Accept All\"></button> -->\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [ariaLabel]=\"'DeleteAll' | bbbTranslate\"\n                                    [title]=\"'DeleteAll' | bbbTranslate\"\n                                    glyph=\"decline\"\n                                    (click)=\"remove.emit({ items: groupItem.value, silent: false })\"\n                                ></button>\n                            </fd-notification-actions>\n                        </fd-notification-group-header>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                notificationBody;\n                                context: { $implicit: groupItem.value, expanded: expanded[groupItem.key] }\n                            \"\n                        ></ng-container>\n                        <!-- <fd-notification-limit *ngIf=\"groupItem.value.length - 4 > 0\">\n                            <h1 fd-notification-limit-title>\n                                There are {{ groupItem.value.length - 4 }} more notifications\n                            </h1>\n                            <p fd-notification-limit-description>\n                                You need to close or take action on the listed notifications to display more.\n                            </p>\n                        </fd-notification-limit> -->\n                    </fd-notification-group-list>\n                </fd-tab>\n            </fd-tab-list>\n        </fd-notification-group>\n    </ng-container>\n</ng-container>\n<ng-template #noData>\n    <bsu-no-data *ngIf=\"!loading; else loadingTpl\"></bsu-no-data>\n</ng-template>\n<ng-template #loadingTpl>\n    <div style=\"height: 30px; position: relative\">\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #notificationItem> </ng-template>\n\n<ng-template #notificationBody let-notifications let-exapanded=\"expanded\">\n    <div style=\"max-height: 346px; overflow-y: auto; overflow-x: hidden\">\n        <ng-container *ngFor=\"let mo of notifications; trackBy: _trackMoById; let first = first; let last = last\">\n            <bsu-notification-item\n                [notificationItem]=\"mo\"\n                (viewed)=\"viewed.emit($event)\"\n                (remove)=\"remove.emit($event)\"\n                (show)=\"show.emit($event)\"\n                (actionClick)=\"actionClick.emit($event)\"\n                intersectionObserver\n                [intersectionThreshold]=\"0.5\"\n                [deviceSize]=\"deviceSize\"\n                (visibilityChange)=\"onVisibilityChange($event, mo, last)\"\n            ></bsu-notification-item>\n        </ng-container>\n        <ng-container *ngIf=\"loading\">\n            <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\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: function () { return [{ type: i1$2.GroupByPipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { notifications: [{
+        }], ctorParameters: function () { return [{ type: i1.GroupByPipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { notifications: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -2420,13 +2525,13 @@ class ShellbarComponent extends BaseComponent {
         BarsaApi.Bw.NavigateTo('/');
     }
 }
-ShellbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ShellbarComponent, deps: [{ token: i1$2.PortalService }, { token: i1$2.BreadcrumbService }, { token: TilesService }, { token: i0.ChangeDetectorRef }, { token: i1$2.BbbTranslatePipe }, { token: i3$3.DomSanitizer }, { token: i1$2.NotificationService }, { token: i1$4.DialogService }, { token: DOCUMENT }, { token: APP_VERSION }], target: i0.ɵɵFactoryTarget.Component });
-ShellbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: "<link *ngIf=\"cssUrl$ | async as cssUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n<link *ngIf=\"cssCustomUrl$ | async as cssCustomUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n\n<fd-shellbar *ngIf=\"(userLoggedIn$ | async) || allowAnonymous\" [size]=\"deviceSize\">\n    <fd-shellbar-logo *ngIf=\"logo\">\n        <a\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\n            href=\"/\"\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\n            aria-label=\"Barsa Novin Ray\"\n        ></a>\n    </fd-shellbar-logo>\n\n    <fd-product-menu\n        *ngIf=\"!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0\"\n        [control]=\"productMenuControl\"\n        [closePopoverOnSelect]=\"true\"\n        [items]=\"productMenuItems1\"\n    >\n    </fd-product-menu>\n\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }} </fd-shellbar-subtitle>\n    <fd-shellbar-actions\n        *ngIf=\"user && (userMenu?.length || !settings?.HideLanguage)\"\n        [user]=\"user\"\n        [userMenu]=\"userMenu\"\n        #langRef\n    >\n        <fd-shellbar-action\n            *ngFor=\"let action of actions\"\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n        >\n        </fd-shellbar-action>\n        <fd-shellbar-action\n            *ngIf=\"deviceSize === 's'\"\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"(notificationsCount$ | async)?.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        <fd-popover\n            *ngIf=\"!settings?.HideNotifications && (notificationsCount$ | async) as notificationCount\"\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n\n        <fd-shellbar-action\n            *ngIf=\"!settings?.HideLanguage && deviceSize !== 's'\"\n            [glyph]=\"'world'\"\n            [label]=\"'language'\"\n            [fdMenuTrigger]=\"menu\"\n            (callback)=\"(onLanguage)\"\n        >\n        </fd-shellbar-action>\n        <ng-container *ngIf=\"!settings?.HideLanguage && deviceSize === 's'\">\n            <fd-shellbar-action\n                *ngFor=\"let culture of cultures | keyvalue\"\n                [label]=\"culture.value\"\n                [callback]=\"onLanguage\"\n                class=\"culture-abbrivation\"\n                [ngClass]=\"culture.key\"\n            >\n            </fd-shellbar-action>\n        </ng-container>\n\n        <fd-product-switch *ngIf=\"productSwitcher.length > 0\">\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        <!-- <fd-combobox\n            [(ngModel)]=\"searchTerm\"\n            [dropdownValues]=\"searchTerms\"\n            [placeholder]=\"('EnterSearchCriteria' | bbbTranslate) + ' ...'\"\n            [compact]=\"true\"\n        >\n        </fd-combobox> -->\n    </fd-shellbar-actions>\n</fd-shellbar>\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<fd-menu #menu>\n    <ul fd-list>\n        <li fd-list-item *ngFor=\"let culture of cultures | keyvalue\">\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                    {{ culture.value }}\n                </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    <div\n        style=\"position: relative; height: 100px\"\n        *ngIf=\"!notifcationLoaded && (notificationLoading$ | async) === true\"\n    >\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    <bt-notification-group\n        [notifications]=\"notifications$ | async\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"(notificationLoading$ | async) === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (show)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsCount$ | async }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display:block}: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 .fd-shellbar__subtitle{display:block}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$2.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10$1.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "ariaLabel", "disabled"] }, { kind: "component", type: i10$1.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i11.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i11.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i11.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i12.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "sideNav"] }, { 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", "collapsedItemMenuLabel"] }, { kind: "component", type: i12.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i12.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i1$2.MobileDirective, selector: "[mobile]" }, { 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", "show", "loadMore"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1$2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ShellbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ShellbarComponent, deps: [{ token: i1.PortalService }, { token: i1.BreadcrumbService }, { token: TilesService }, { token: i0.ChangeDetectorRef }, { token: i1.BbbTranslatePipe }, { token: i3$3.DomSanitizer }, { token: i1.NotificationService }, { token: i1$1.DialogService }, { token: DOCUMENT }, { token: APP_VERSION }], target: i0.ɵɵFactoryTarget.Component });
+ShellbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: "<link *ngIf=\"cssUrl$ | async as cssUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n<link *ngIf=\"cssCustomUrl$ | async as cssCustomUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n\n<fd-shellbar *ngIf=\"(userLoggedIn$ | async) || allowAnonymous\" [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    <fd-shellbar-logo *ngIf=\"logo\">\n        <a\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\n            href=\"/\"\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\n            aria-label=\"Barsa Novin Ray\"\n        ></a>\n    </fd-shellbar-logo>\n\n    <fd-product-menu\n        *ngIf=\"!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0\"\n        [control]=\"productMenuControl\"\n        [closePopoverOnSelect]=\"true\"\n        [items]=\"productMenuItems1\"\n    >\n    </fd-product-menu>\n\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }} </fd-shellbar-subtitle>\n    <fd-shellbar-actions\n        *ngIf=\"user && (userMenu?.length || !settings?.HideLanguage)\"\n        [user]=\"user\"\n        [userMenu]=\"userMenu\"\n        #langRef\n    >\n        <fd-shellbar-action\n            *ngFor=\"let action of actions\"\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n        >\n        </fd-shellbar-action>\n        <fd-shellbar-action\n            *ngIf=\"deviceSize === 's'\"\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"(notificationsCount$ | async)?.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        <fd-popover\n            *ngIf=\"!settings?.HideNotifications && (notificationsCount$ | async) as notificationCount\"\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n\n        <fd-shellbar-action\n            *ngIf=\"!settings?.HideLanguage && deviceSize !== 's'\"\n            [glyph]=\"'world'\"\n            [label]=\"'language'\"\n            [fdMenuTrigger]=\"menu\"\n            (callback)=\"(onLanguage)\"\n        >\n        </fd-shellbar-action>\n        <ng-container *ngIf=\"!settings?.HideLanguage && deviceSize === 's'\">\n            <fd-shellbar-action\n                *ngFor=\"let culture of cultures | keyvalue\"\n                [label]=\"culture.value\"\n                [callback]=\"onLanguage\"\n                class=\"culture-abbrivation\"\n                [ngClass]=\"culture.key\"\n            >\n            </fd-shellbar-action>\n        </ng-container>\n\n        <fd-product-switch *ngIf=\"productSwitcher.length > 0\">\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        <!-- <fd-combobox\n            [(ngModel)]=\"searchTerm\"\n            [dropdownValues]=\"searchTerms\"\n            [placeholder]=\"('EnterSearchCriteria' | bbbTranslate) + ' ...'\"\n            [compact]=\"true\"\n        >\n        </fd-combobox> -->\n    </fd-shellbar-actions>\n</fd-shellbar>\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<fd-menu #menu>\n    <ul fd-list>\n        <li fd-list-item *ngFor=\"let culture of cultures | keyvalue\">\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                    {{ culture.value }}\n                </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    <div\n        style=\"position: relative; height: 100px\"\n        *ngIf=\"!notifcationLoaded && (notificationLoading$ | async) === true\"\n    >\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    <bt-notification-group\n        [notifications]=\"notifications$ | async\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"(notificationLoading$ | async) === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (show)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsCount$ | async }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display:block}: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 .fd-shellbar__subtitle{display:block}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}.fd-shellbar--s{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$2.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10$1.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "ariaLabel", "disabled"] }, { kind: "component", type: i10$1.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i11.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i11.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i11.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i12.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "sideNav"] }, { 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", "collapsedItemMenuLabel"] }, { kind: "component", type: i12.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i12.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { 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", "show", "loadMore"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.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: "14.2.7", ngImport: i0, type: ShellbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<link *ngIf=\"cssUrl$ | async as cssUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n<link *ngIf=\"cssCustomUrl$ | async as cssCustomUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n\n<fd-shellbar *ngIf=\"(userLoggedIn$ | async) || allowAnonymous\" [size]=\"deviceSize\">\n    <fd-shellbar-logo *ngIf=\"logo\">\n        <a\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\n            href=\"/\"\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\n            aria-label=\"Barsa Novin Ray\"\n        ></a>\n    </fd-shellbar-logo>\n\n    <fd-product-menu\n        *ngIf=\"!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0\"\n        [control]=\"productMenuControl\"\n        [closePopoverOnSelect]=\"true\"\n        [items]=\"productMenuItems1\"\n    >\n    </fd-product-menu>\n\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }} </fd-shellbar-subtitle>\n    <fd-shellbar-actions\n        *ngIf=\"user && (userMenu?.length || !settings?.HideLanguage)\"\n        [user]=\"user\"\n        [userMenu]=\"userMenu\"\n        #langRef\n    >\n        <fd-shellbar-action\n            *ngFor=\"let action of actions\"\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n        >\n        </fd-shellbar-action>\n        <fd-shellbar-action\n            *ngIf=\"deviceSize === 's'\"\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"(notificationsCount$ | async)?.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        <fd-popover\n            *ngIf=\"!settings?.HideNotifications && (notificationsCount$ | async) as notificationCount\"\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n\n        <fd-shellbar-action\n            *ngIf=\"!settings?.HideLanguage && deviceSize !== 's'\"\n            [glyph]=\"'world'\"\n            [label]=\"'language'\"\n            [fdMenuTrigger]=\"menu\"\n            (callback)=\"(onLanguage)\"\n        >\n        </fd-shellbar-action>\n        <ng-container *ngIf=\"!settings?.HideLanguage && deviceSize === 's'\">\n            <fd-shellbar-action\n                *ngFor=\"let culture of cultures | keyvalue\"\n                [label]=\"culture.value\"\n                [callback]=\"onLanguage\"\n                class=\"culture-abbrivation\"\n                [ngClass]=\"culture.key\"\n            >\n            </fd-shellbar-action>\n        </ng-container>\n\n        <fd-product-switch *ngIf=\"productSwitcher.length > 0\">\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        <!-- <fd-combobox\n            [(ngModel)]=\"searchTerm\"\n            [dropdownValues]=\"searchTerms\"\n            [placeholder]=\"('EnterSearchCriteria' | bbbTranslate) + ' ...'\"\n            [compact]=\"true\"\n        >\n        </fd-combobox> -->\n    </fd-shellbar-actions>\n</fd-shellbar>\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<fd-menu #menu>\n    <ul fd-list>\n        <li fd-list-item *ngFor=\"let culture of cultures | keyvalue\">\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                    {{ culture.value }}\n                </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    <div\n        style=\"position: relative; height: 100px\"\n        *ngIf=\"!notifcationLoaded && (notificationLoading$ | async) === true\"\n    >\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    <bt-notification-group\n        [notifications]=\"notifications$ | async\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"(notificationLoading$ | async) === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (show)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsCount$ | async }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display:block}: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 .fd-shellbar__subtitle{display:block}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}\n"] }]
+            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<link *ngIf=\"cssUrl$ | async as cssUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n<link *ngIf=\"cssCustomUrl$ | async as cssCustomUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n\n<fd-shellbar *ngIf=\"(userLoggedIn$ | async) || allowAnonymous\" [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    <fd-shellbar-logo *ngIf=\"logo\">\n        <a\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\n            href=\"/\"\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\n            aria-label=\"Barsa Novin Ray\"\n        ></a>\n    </fd-shellbar-logo>\n\n    <fd-product-menu\n        *ngIf=\"!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0\"\n        [control]=\"productMenuControl\"\n        [closePopoverOnSelect]=\"true\"\n        [items]=\"productMenuItems1\"\n    >\n    </fd-product-menu>\n\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }} </fd-shellbar-subtitle>\n    <fd-shellbar-actions\n        *ngIf=\"user && (userMenu?.length || !settings?.HideLanguage)\"\n        [user]=\"user\"\n        [userMenu]=\"userMenu\"\n        #langRef\n    >\n        <fd-shellbar-action\n            *ngFor=\"let action of actions\"\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n        >\n        </fd-shellbar-action>\n        <fd-shellbar-action\n            *ngIf=\"deviceSize === 's'\"\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"(notificationsCount$ | async)?.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        <fd-popover\n            *ngIf=\"!settings?.HideNotifications && (notificationsCount$ | async) as notificationCount\"\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n\n        <fd-shellbar-action\n            *ngIf=\"!settings?.HideLanguage && deviceSize !== 's'\"\n            [glyph]=\"'world'\"\n            [label]=\"'language'\"\n            [fdMenuTrigger]=\"menu\"\n            (callback)=\"(onLanguage)\"\n        >\n        </fd-shellbar-action>\n        <ng-container *ngIf=\"!settings?.HideLanguage && deviceSize === 's'\">\n            <fd-shellbar-action\n                *ngFor=\"let culture of cultures | keyvalue\"\n                [label]=\"culture.value\"\n                [callback]=\"onLanguage\"\n                class=\"culture-abbrivation\"\n                [ngClass]=\"culture.key\"\n            >\n            </fd-shellbar-action>\n        </ng-container>\n\n        <fd-product-switch *ngIf=\"productSwitcher.length > 0\">\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        <!-- <fd-combobox\n            [(ngModel)]=\"searchTerm\"\n            [dropdownValues]=\"searchTerms\"\n            [placeholder]=\"('EnterSearchCriteria' | bbbTranslate) + ' ...'\"\n            [compact]=\"true\"\n        >\n        </fd-combobox> -->\n    </fd-shellbar-actions>\n</fd-shellbar>\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<fd-menu #menu>\n    <ul fd-list>\n        <li fd-list-item *ngFor=\"let culture of cultures | keyvalue\">\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                    {{ culture.value }}\n                </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    <div\n        style=\"position: relative; height: 100px\"\n        *ngIf=\"!notifcationLoaded && (notificationLoading$ | async) === true\"\n    >\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    <bt-notification-group\n        [notifications]=\"notifications$ | async\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"(notificationLoading$ | async) === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (show)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsCount$ | async }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display:block}: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 .fd-shellbar__subtitle{display:block}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}.fd-shellbar--s{padding:0}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.PortalService }, { type: i1$2.BreadcrumbService }, { type: TilesService }, { type: i0.ChangeDetectorRef }, { type: i1$2.BbbTranslatePipe }, { type: i3$3.DomSanitizer }, { type: i1$2.NotificationService }, { type: i1$4.DialogService }, { type: Document, decorators: [{
+        return [{ type: i1.PortalService }, { type: i1.BreadcrumbService }, { type: TilesService }, { type: i0.ChangeDetectorRef }, { type: i1.BbbTranslatePipe }, { type: i3$3.DomSanitizer }, { type: i1.NotificationService }, { type: i1$1.DialogService }, { type: Document, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
                     }] }, { type: undefined, decorators: [{
@@ -2567,7 +2672,7 @@ class BarsaTilesModule extends BaseModule {
         this.dynamicComponents = [...components];
     }
 }
-BarsaTilesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTilesModule, deps: [{ token: i1$2.DynamicComponentService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.NgModule });
+BarsaTilesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTilesModule, deps: [{ token: i1.DynamicComponentService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.NgModule });
 BarsaTilesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: BarsaTilesModule, declarations: [ShellbarComponent,
         SimpleTileComponent,
         TilesViewerComponent,
@@ -2676,7 +2781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                     ],
                     exports: [...components]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.DynamicComponentService }, { type: i0.ComponentFactoryResolver }]; } });
+        }], ctorParameters: function () { return [{ type: i1.DynamicComponentService }, { type: i0.ComponentFactoryResolver }]; } });
 
 /**
  * Generated bundle index. Do not edit.