barsa-tiles 2.3.101 → 2.3.103

package/fesm2022/barsa-tiles.mjs

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, ChangeDetectionStrategy, Component, Input, Directive, ChangeDetectorRef, ViewContainerRef, HostListener, Pipe, EventEmitter, Output, HostBinding, Injector, input, Renderer2, TemplateRef, ViewChild, signal, DOCUMENT, NgModule, ComponentFactoryResolver, provideAppInitializer, NO_ERRORS_SCHEMA } from '@angular/core';
+import { inject, Injectable, ChangeDetectionStrategy, Component, Input, Directive, ChangeDetectorRef, ViewContainerRef, HostListener, ElementRef, ViewChild, Pipe, EventEmitter, Output, HostBinding, Injector, input, Renderer2, TemplateRef, signal, DOCUMENT, NgModule, ComponentFactoryResolver, provideAppInitializer, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i5 from 'barsa-novin-ray-core';
-import { PortalService, BbbTranslatePipe, BarsaApi, TilePropsComponent, BaseComponent, BaseDirective, IsDarkMode, LocalStorageService, PreventDefaulEvent, getDeviceIsMobile, SaveScrollPositionService, ExecuteDynamicCommand, ShellbarHeightService, GroupByService, APP_VERSION, getDeviceIsDesktop, getDeviceIsTablet, ApplicationCtrlrService, BreadcrumbService, NotificationService, SortDirection, LogService, RoutingService, EmptyPageComponent, TileGroupBreadcrumResolver, PortalPageResolver, AuthGuard, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
+import { PortalService, BbbTranslatePipe, BarsaApi, TilePropsComponent, BaseComponent, BaseDirective, IsDarkMode, LocalStorageService, PreventDefaulEvent, getDeviceIsMobile, SaveScrollPositionService, ExecuteDynamicCommand, ShellbarHeightService, GroupByService, APP_VERSION, getDeviceIsDesktop, getDeviceIsTablet, ApplicationCtrlrService, BreadcrumbService, NotificationService, SortDirection, LogService, RoutingService, EmptyPageComponent, ReportNavigatorComponent, TileGroupBreadcrumResolver, PortalPageResolver, AuthGuard, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
 import { Subject, BehaviorSubject, of, from, takeUntil as takeUntil$1, filter as filter$1, interval, combineLatest, fromEvent, map as map$1, forkJoin } from 'rxjs';
 import { startWith, shareReplay, takeUntil, distinctUntilChanged, filter, tap, map, concatMap, debounceTime, exhaustMap, finalize, withLatestFrom } from 'rxjs/operators';
 import { ThemingService, RtlService, DialogRef, DialogService, CarouselComponent, ContentDensityService, ShellbarComponent as ShellbarComponent$1, ComboboxComponent, FundamentalNgxCoreModule, GridListModule, ShellbarUserMenuComponent } from '@fundamental-ngx/core';
-import * as i1$1 from '@fundamental-ngx/core/tile';
 import * as i1$2 from '@angular/common';
 import { CommonModule, LowerCasePipe } from '@angular/common';
 import * as i2 from '@fundamental-ngx/core/button';
 import * as i5$1 from '@fundamental-ngx/core/list';
 import * as i4 from '@fundamental-ngx/core/menu';
+import * as i1$1 from '@fundamental-ngx/core/tile';
 import * as i1 from '@fundamental-ngx/core/icon';
 import * as i3 from 'barsa-sap-ui';
-import { MaskComponent, BarsaTreeItemComponent, ReportNavigatorComponent, BarsaSapUiModule } from 'barsa-sap-ui';
+import { MaskComponent, BarsaTreeItemComponent, BarsaSapUiModule } from 'barsa-sap-ui';
 import * as i1$3 from '@angular/router';
 import { Router, ActivatedRoute, NavigationEnd, RouterEvent, RouterModule } from '@angular/router';
 import * as i3$1 from '@angular/cdk/drag-drop';
@@ -69,6 +69,7 @@ class TilesService {
         this._portalService = inject(PortalService);
         this._rtlService = inject(RtlService);
         this._bbbTranslatePipe = inject(BbbTranslatePipe);
+        this._appTileGroupLoaded = {};
         BarsaApi.Bw.TilesService = this;
         this.userInfo$ = this._userInfo$.asObservable();
         this.homeAppTileGroups$ = this._homeAppTileGroupsSource.asObservable();
@@ -121,7 +122,7 @@ class TilesService {
         });
     }
     loadAppTileGroups(appTileGroup) {
-        if (!appTileGroup || appTileGroup.$TilesLoaded) {
+        if (!appTileGroup || this._appTileGroupLoaded[appTileGroup.Id]) {
             return;
         }
         const allApps = this._appTileGroupsSource.getValue();
@@ -376,7 +377,7 @@ class TilesService {
                     selectedAppGroup = c.$Children?.find((child) => child.Id === appGroupId);
                 }
             });
-            if (selectedAppGroup && selectedAppGroup.$TilesLoaded) {
+            if (selectedAppGroup && this._appTileGroupLoaded[selectedAppGroup.Id]) {
                 // let moDataList = selectedAppGroup.AppTiles.MoDataList;
                 // if (appTileGroups[i].visible)
                 //   selectedAppGroup.AppTiles.MoDataList = [...moDataList, settings[i]];
@@ -474,6 +475,7 @@ class TilesService {
         }
     }
     _loadAppTilesByAppTileGroup(appGroup, callback) {
+        this._appTileGroupLoaded[appGroup.Id] = true;
         BarsaApi.Bw.RunBlMethodAsync({
             Parameters: [appGroup.Id],
             Method: 'LoadAllAppTilesByAppTileGroup',
@@ -729,33 +731,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 }]
         }] });
 
-class BaseBtTileComponent extends BaseTileComponent {
-    constructor() {
-        super(...arguments);
-        this.isDark$ = this._tilesService.isDark$;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this._tilesService.componentSettings$
-            .pipe(takeUntil$1(this._onDestroy$), filter$1((c) => c.Id === this.settings.Id))
-            .subscribe((_c) => {
-            this._cdr.detectChanges();
-        });
-        this._renderer2.addClass(this.el.nativeElement, 'barsa-tile');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BaseBtTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BaseBtTileComponent, isStandalone: false, selector: "bt-base-bt-tile", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BaseBtTileComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'bt-base-bt-tile',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: false
-                }]
-        }] });
-
 class FooterTileComponent extends BaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FooterTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FooterTileComponent, isStandalone: false, selector: "bt-footer-tile,div[bt-footer-tile]", inputs: { firstSection: "firstSection", secondSection: "secondSection", twoColumn: "twoColumn" }, usesInheritance: true, ngImport: i0, template: "@if (twoColumn) {\r\n<div fd-tile-section>\r\n    <fd-icon fd-tile-refresh [font]=\"firstSection.Icon | sapFont\" [glyph]=\"firstSection.Icon\"></fd-icon>\r\n    <span fd-tile-footer-text>{{ firstSection.Text | bbbTranslate }}</span>\r\n</div>\r\n<div fd-tile-section>\r\n    <fd-icon fd-tile-refresh [font]=\"secondSection.Icon | sapFont\" [glyph]=\"secondSection.Icon\"></fd-icon>\r\n    <span fd-tile-footer-text>{{ secondSection.Text | bbbTranslate }}</span>\r\n</div>\r\n} @else {\r\n<fd-icon fd-tile-refresh [font]=\"firstSection.Icon | sapFont\" [glyph]=\"firstSection.Icon\"></fd-icon>\r\n<span fd-tile-footer-text>{{ firstSection.Text | bbbTranslate }}</span>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i1$1.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$1.TileRefreshDirective, selector: "[fdTileRefresh], [fd-tile-refresh]", inputs: ["glyph", "glyphFont", "class", "ariaLabel"] }, { kind: "directive", type: i1$1.TileFooterTextDirective, selector: "[fdTileFooterText], [fd-tile-footer-text]" }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i3.SapFontPipe, name: "sapFont" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -875,11 +850,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 class TileComponent extends TilePropsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TileComponent, isStandalone: false, selector: "bt-tile", inputs: { type: "type", footerTemplate: "footerTemplate", footer: "footer", title: "title", icon: "icon", subtitle: "subtitle", isDouble: "isDouble", darkMode: "darkMode", disableClick: "disableClick", edit: "edit", dynamicCommand: "dynamicCommand", backColor: "backColor", hideHeader: "hideHeader", setToStorage: "setToStorage", listMode: "listMode", navigateBackOnClick: "navigateBackOnClick" }, usesInheritance: true, ngImport: i0, template: "@if(!listMode) {\r\n<fd-tile\r\n    [type]=\"type\"\r\n    [double]=\"isDouble && deviceSize !== 's' && deviceSize !== 'm'\"\r\n    [action]=\"edit\"\r\n    tileStyle\r\n    [backColor]=\"darkMode ? '' : backColor\"\r\n    [size]=\"'s'\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"title\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"dynamicCommand\"\r\n>\r\n    @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n    } @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    } @if(!hideHeader){\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title [overflowText]=\"title | bbbTranslate\">\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    }\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\r\n</fd-tile>\r\n}@else{\r\n<span fd-list-title> {{ title | bbbTranslate }} </span>\r\n<span fd-list-secondary> {{ subtitle | bbbTranslate }} </span>\r\n@if(icon){ <i fd-list-icon [glyph]=\"icon\"></i>} }\r\n<ng-template #defaultFooter>\r\n    @if (footer) {\r\n    <div\r\n        fd-tile-footer\r\n        bt-footer-tile\r\n        [secondSection]=\"footer.SecondSection\"\r\n        [twoColumn]=\"footer.twoColumn\"\r\n        [firstSection]=\"footer.FirstSection\"\r\n    ></div>\r\n\r\n    }\r\n</ng-template>\r\n<fd-menu #menu>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host,fd-tile{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i5$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i5$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "component", type: i4.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i4.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i4.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i4.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "directive", type: i1$1.TileHeaderDirective, selector: "[fdTileHeader], [fd-tile-header]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileTitleDirective, selector: "[fdTileTitle], [fd-tile-title]" }, { kind: "directive", type: i1$1.TileSubtitleDirective, selector: "[fdTileTitle], [fd-tile-subtitle]" }, { kind: "directive", type: i1$1.TileActionCloseDirective, selector: "[fdTileActionClose], [fd-tile-action-close]", inputs: ["class"] }, { kind: "directive", type: i1$1.TileActionIndicatorDirective, selector: "[fdTileActionIndicator], [fd-tile-action-indicator]", inputs: ["class"] }, { kind: "directive", type: i5.OverflowTextDirective, selector: "[overflowText]", exportAs: ["overflowText"] }, { kind: "component", type: FooterTileComponent, selector: "bt-footer-tile,div[bt-footer-tile]", inputs: ["firstSection", "secondSection", "twoColumn"] }, { kind: "directive", type: TileStyleDirective, selector: "[tileStyle]", inputs: ["backColor"] }, { kind: "directive", type: TileDynamicCommandDirective, selector: "[tileDynCommand]", inputs: ["disableClick", "edit", "dynamicCommand", "title", "setToStorage", "navigateBackOnClick"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TileComponent, isStandalone: false, selector: "bt-tile", inputs: { type: "type", footerTemplate: "footerTemplate", footer: "footer", title: "title", icon: "icon", subtitle: "subtitle", isDouble: "isDouble", darkMode: "darkMode", disableClick: "disableClick", edit: "edit", dynamicCommand: "dynamicCommand", backColor: "backColor", hideHeader: "hideHeader", setToStorage: "setToStorage", listMode: "listMode", navigateBackOnClick: "navigateBackOnClick" }, usesInheritance: true, ngImport: i0, template: "@if(!listMode) {\r\n<fd-tile\r\n    [type]=\"type\"\r\n    [double]=\"isDouble\"\r\n    [action]=\"edit\"\r\n    tileStyle\r\n    [backColor]=\"darkMode ? '' : backColor\"\r\n    [size]=\"'s'\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"title\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"dynamicCommand\"\r\n>\r\n    @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n    } @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    } @if(!hideHeader){\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title [overflowText]=\"title | bbbTranslate\">\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    }\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\r\n</fd-tile>\r\n}@else{\r\n<span fd-list-title> {{ title | bbbTranslate }} </span>\r\n<span fd-list-secondary> {{ subtitle | bbbTranslate }} </span>\r\n@if(icon){ <i fd-list-icon [glyph]=\"icon\"></i>} }\r\n<ng-template #defaultFooter>\r\n    @if (footer) {\r\n    <div\r\n        fd-tile-footer\r\n        bt-footer-tile\r\n        [secondSection]=\"footer.SecondSection\"\r\n        [twoColumn]=\"footer.twoColumn\"\r\n        [firstSection]=\"footer.FirstSection\"\r\n    ></div>\r\n\r\n    }\r\n</ng-template>\r\n<fd-menu #menu>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host,fd-tile{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i5$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i5$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "component", type: i4.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i4.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i4.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i4.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "directive", type: i1$1.TileHeaderDirective, selector: "[fdTileHeader], [fd-tile-header]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$1.TileTitleDirective, selector: "[fdTileTitle], [fd-tile-title]" }, { kind: "directive", type: i1$1.TileSubtitleDirective, selector: "[fdTileTitle], [fd-tile-subtitle]" }, { kind: "directive", type: i1$1.TileActionCloseDirective, selector: "[fdTileActionClose], [fd-tile-action-close]", inputs: ["class"] }, { kind: "directive", type: i1$1.TileActionIndicatorDirective, selector: "[fdTileActionIndicator], [fd-tile-action-indicator]", inputs: ["class"] }, { kind: "directive", type: i5.OverflowTextDirective, selector: "[overflowText]", exportAs: ["overflowText"] }, { kind: "component", type: FooterTileComponent, selector: "bt-footer-tile,div[bt-footer-tile]", inputs: ["firstSection", "secondSection", "twoColumn"] }, { kind: "directive", type: TileStyleDirective, selector: "[tileStyle]", inputs: ["backColor"] }, { kind: "directive", type: TileDynamicCommandDirective, selector: "[tileDynCommand]", inputs: ["disableClick", "edit", "dynamicCommand", "title", "setToStorage", "navigateBackOnClick"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if(!listMode) {\r\n<fd-tile\r\n    [type]=\"type\"\r\n    [double]=\"isDouble && deviceSize !== 's' && deviceSize !== 'm'\"\r\n    [action]=\"edit\"\r\n    tileStyle\r\n    [backColor]=\"darkMode ? '' : backColor\"\r\n    [size]=\"'s'\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"title\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"dynamicCommand\"\r\n>\r\n    @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n    } @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    } @if(!hideHeader){\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title [overflowText]=\"title | bbbTranslate\">\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    }\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\r\n</fd-tile>\r\n}@else{\r\n<span fd-list-title> {{ title | bbbTranslate }} </span>\r\n<span fd-list-secondary> {{ subtitle | bbbTranslate }} </span>\r\n@if(icon){ <i fd-list-icon [glyph]=\"icon\"></i>} }\r\n<ng-template #defaultFooter>\r\n    @if (footer) {\r\n    <div\r\n        fd-tile-footer\r\n        bt-footer-tile\r\n        [secondSection]=\"footer.SecondSection\"\r\n        [twoColumn]=\"footer.twoColumn\"\r\n        [firstSection]=\"footer.FirstSection\"\r\n    ></div>\r\n\r\n    }\r\n</ng-template>\r\n<fd-menu #menu>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host,fd-tile{display:block}\n"] }]
+            args: [{ selector: 'bt-tile', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if(!listMode) {\r\n<fd-tile\r\n    [type]=\"type\"\r\n    [double]=\"isDouble\"\r\n    [action]=\"edit\"\r\n    tileStyle\r\n    [backColor]=\"darkMode ? '' : backColor\"\r\n    [size]=\"'s'\"\r\n    tileDynCommand\r\n    [edit]=\"edit\"\r\n    [navigateBackOnClick]=\"navigateBackOnClick\"\r\n    [title]=\"title\"\r\n    [setToStorage]=\"setToStorage\"\r\n    [dynamicCommand]=\"dynamicCommand\"\r\n>\r\n    @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n    } @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    } @if(!hideHeader){\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title [overflowText]=\"title | bbbTranslate\">\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    }\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\r\n</fd-tile>\r\n}@else{\r\n<span fd-list-title> {{ title | bbbTranslate }} </span>\r\n<span fd-list-secondary> {{ subtitle | bbbTranslate }} </span>\r\n@if(icon){ <i fd-list-icon [glyph]=\"icon\"></i>} }\r\n<ng-template #defaultFooter>\r\n    @if (footer) {\r\n    <div\r\n        fd-tile-footer\r\n        bt-footer-tile\r\n        [secondSection]=\"footer.SecondSection\"\r\n        [twoColumn]=\"footer.twoColumn\"\r\n        [firstSection]=\"footer.FirstSection\"\r\n    ></div>\r\n\r\n    }\r\n</ng-template>\r\n<fd-menu #menu>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host,fd-tile{display:block}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], footerTemplate: [{
@@ -914,6 +889,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Input
             }] } });
 
+class BaseBtTileComponent extends BaseTileComponent {
+    constructor() {
+        super(...arguments);
+        this.isDark$ = this._tilesService.isDark$;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const componentName = BarsaApi.Common.Util.TryGetValue(this, 'data.Component.Name', null);
+        if ((componentName && componentName.indexOf('Chart') > -1) || componentName.indexOf('News') > -1) {
+            this._renderer2.addClass(this._btTitleElementRef.nativeElement, 'disable-tile-resize');
+        }
+        this._tilesService.componentSettings$
+            .pipe(takeUntil$1(this._onDestroy$), filter$1((c) => c.Id === this.settings.Id))
+            .subscribe((_c) => {
+            this._cdr.detectChanges();
+        });
+        this._renderer2.addClass(this.el.nativeElement, 'barsa-tile');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BaseBtTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BaseBtTileComponent, isStandalone: false, selector: "bt-base-bt-tile", viewQueries: [{ propertyName: "_btTitleElementRef", first: true, predicate: TileComponent, descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BaseBtTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bt-base-bt-tile',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false
+                }]
+        }], propDecorators: { _btTitleElementRef: [{
+                type: ViewChild,
+                args: [TileComponent, { read: ElementRef, static: true }]
+            }] } });
+
 class TilePropPipe {
     transform(data, prop, parameters) {
         if (data) {
@@ -1268,11 +1277,11 @@ class TilesViewerGroupComponent extends TileGroupBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TilesViewerGroupComponent, isStandalone: false, selector: "bt-tiles-viewer-group", usesInheritance: true, ngImport: i0, template: "<fd-layout-panel\r\n    [attr.editHome]=\"edit\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!edit || !stackContent\"\r\n    [ngClass]=\"appTileGroup.TileGroupType$Caption\"\r\n    [class.hide-header]=\"appTileGroup.HideHeader\"\r\n    [style.background-color]=\"appTileGroup.BackgroundColor ? appTileGroup.BackgroundColor : null\"\r\n    [class.custom-color]=\"appTileGroup.BackgroundColor\"\r\n    [class.tw-pb-2]=\"isLast\"\r\n    [class.hide]=\"!appTileGroup?.navigatorTiles.length && !appTileGroup.navigatorActionLinks.length\"\r\n>\r\n    @if (edit || stackContent || isAppTileSubGroup || appTileGroup.HideHeader) {\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-head>\r\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle | bbbTranslate }}</h5>\r\n        </fd-layout-panel-head>\r\n        @if (edit) {\r\n        <fd-layout-panel-actions class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\r\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\r\n                } @if (!appTileGroup.Predefined) {\r\n                <button\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n                }\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n        }\r\n    </fd-layout-panel-header>\r\n    }\r\n    <fd-layout-panel-body [class.small-size]=\"deviceSize === 's' || deviceSize === 'm'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            tilesCls\r\n            [class.!tw-hidden]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [class.!tw-justify-start]=\"appTileGroup.navigatorTiles?.length % 3 !== 0\"\r\n            [rtl]=\"rtl\"\r\n            [appTileGroup]=\"appTileGroup\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [ngClass]=\"deviceSize\"\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\r\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\r\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\r\n            <h5 fd-title></h5>\r\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\r\n            <div\r\n                [class.edit-home]=\"edit\"\r\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [setToStorage]=\"true\"\r\n                    [enableCommand]=\"!edit && appTile.Component\"\r\n                    tileRenderer\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [data]=\"appTile\"\r\n                    [groupType]=\"appTileGroup.TileGroupType$Caption\"\r\n                    [edit]=\"edit\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            } @if (edit) {\r\n            <fd-tile class=\"add-tile\" [routerLink]=\"['/home/appfinder']\">\r\n                <div style=\"margin: 0\">\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n            }\r\n        </div>\r\n        <bt-actions-link\r\n            [class.actions-link-edit-home]=\"edit\"\r\n            [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n            [class.!tw-p-0]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [edit]=\"edit\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [style.min-height]=\"edit ? '4rem' : 'auto'\"\r\n            cdkDropList\r\n            #actionLinks=\"cdkDropList\"\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListConnectedTo]=\"tiles\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListData]=\"{\r\n                isTile: false,\r\n                items: appTileGroup.navigatorActionLinks || []\r\n            }\"\r\n        >\r\n        </bt-actions-link>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n@for (appTileSubGroup of appTileGroup.$Children; track appTileSubGroup.Id;let last=$last) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\r\n    [isLast]=\"last\"\r\n    [edit]=\"edit\"\r\n    [rtl]=\"rtl\"\r\n    [stackContent]=\"stackContent\"\r\n    [cssStyle]=\"appTileSubGroup.CssStyles\"\r\n    [isAppTileSubGroup]=\"true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    (tilesDropped)=\"tilesDropped.emit($event)\"\r\n    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n    (resetGroup)=\"resetGroup.emit($event)\"\r\n    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n></bt-tiles-viewer-group>\r\n}\r\n", styles: [":host{display:block}:host[islast=true]{margin-bottom:1rem}:host ::ng-deep>fd-layout-panel>fd-layout-panel-header .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}fd-layout-panel.custom-color{margin-top:1rem}fd-layout-panel.empty-tiles-group:not([edithome=true]){display:none}fd-layout-panel fd-layout-panel-header fd-layout-panel-head h5{font-weight:500}fd-layout-panel.hide-header fd-layout-panel-header{display:none}fd-layout-panel[editHome=false]{background-color:transparent}.tile-wrapper.TilesGroup{column-gap:.5rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup{display:flex;row-gap:.5rem;column-gap:.5rem;justify-content:start;width:calc(99.9999999999svw - 4rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.news-tile) .fd-tile--s{max-height:7.25rem;min-height:6.25rem;min-width:8.25rem;max-width:8.25rem;display:flex;flex-direction:column-reverse;justify-content:space-between}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__header{height:1.2rem;max-height:1.2rem;min-height:1.2rem;text-align:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__header.child-has-overflow-text{position:relative}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__subtitle{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__footer{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-tile--launch .fd-tile__content{align-items:center;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content{justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content .fd-numeric-content__launch-icon-container{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile:not(.news-tile) .fd-tile--s{--sapFontHeader6Size: .75rem;max-height:5rem;min-height:5rem;min-width:calc(33.3333333333svw - 2rem);max-width:calc(33.3333333333svw - 2rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-numeric-content__kpi{font-size:1.2rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile:not(.news-tile) .fd-tile--s span.fd-numeric-content__scale-text{font-size:.8rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__title{white-space:nowrap}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__content{height:3rem;max-height:3rem;min-height:3rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile.news-tile{min-width:calc(99.9999999999svw - 4rem);max-width:calc(99.9999999999svw - 4rem)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i7.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i7.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i7.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i7.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i7.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i5$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i5.DynamicStyleDirective, selector: "[cssStyle]", inputs: ["cssStyle"] }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit", "deviceSize"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group" }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "groupType", "edit", "deviceSize", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["hideClick", "renameClick"] }, { kind: "directive", type: TileClassDirective, selector: "[tilesCls]", inputs: ["rtl", "deviceSize", "appTileGroup"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TilesViewerGroupComponent, isStandalone: false, selector: "bt-tiles-viewer-group", usesInheritance: true, ngImport: i0, template: "<fd-layout-panel\r\n    [attr.editHome]=\"edit\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!edit || !stackContent\"\r\n    [ngClass]=\"appTileGroup.TileGroupType$Caption\"\r\n    [class.hide-header]=\"appTileGroup.HideHeader\"\r\n    [style.background-color]=\"appTileGroup.BackgroundColor ? appTileGroup.BackgroundColor : null\"\r\n    [class.custom-color]=\"appTileGroup.BackgroundColor\"\r\n    [class.tw-pb-2]=\"isLast\"\r\n    [class.hide]=\"!appTileGroup?.navigatorTiles.length && !appTileGroup.navigatorActionLinks.length\"\r\n>\r\n    @if (edit || stackContent || isAppTileSubGroup || appTileGroup.HideHeader) {\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-head>\r\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle | bbbTranslate }}</h5>\r\n        </fd-layout-panel-head>\r\n        @if (edit) {\r\n        <fd-layout-panel-actions class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\r\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\r\n                } @if (!appTileGroup.Predefined) {\r\n                <button\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n                }\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n        }\r\n    </fd-layout-panel-header>\r\n    }\r\n    <fd-layout-panel-body [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            tilesCls\r\n            [class.!tw-hidden]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [class.!tw-justify-start]=\"appTileGroup.navigatorTiles?.length % 3 !== 0\"\r\n            [rtl]=\"rtl\"\r\n            [appTileGroup]=\"appTileGroup\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [ngClass]=\"deviceSize\"\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\r\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\r\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\r\n            <h5 fd-title></h5>\r\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\r\n            <div\r\n                [class.edit-home]=\"edit\"\r\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [setToStorage]=\"true\"\r\n                    [enableCommand]=\"!edit && appTile.Component\"\r\n                    tileRenderer\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [data]=\"appTile\"\r\n                    [groupType]=\"appTileGroup.TileGroupType$Caption\"\r\n                    [edit]=\"edit\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            } @if (edit) {\r\n            <fd-tile class=\"add-tile\" [routerLink]=\"['/home/appfinder']\">\r\n                <div style=\"margin: 0\">\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n            }\r\n        </div>\r\n        <bt-actions-link\r\n            [class.actions-link-edit-home]=\"edit\"\r\n            [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n            [class.!tw-p-0]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [edit]=\"edit\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [style.min-height]=\"edit ? '4rem' : 'auto'\"\r\n            cdkDropList\r\n            #actionLinks=\"cdkDropList\"\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListConnectedTo]=\"tiles\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListData]=\"{\r\n                isTile: false,\r\n                items: appTileGroup.navigatorActionLinks || []\r\n            }\"\r\n        >\r\n        </bt-actions-link>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n@for (appTileSubGroup of appTileGroup.$Children; track appTileSubGroup.Id;let last=$last) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\r\n    [isLast]=\"last\"\r\n    [edit]=\"edit\"\r\n    [rtl]=\"rtl\"\r\n    [stackContent]=\"stackContent\"\r\n    [cssStyle]=\"appTileSubGroup.CssStyles\"\r\n    [isAppTileSubGroup]=\"true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    (tilesDropped)=\"tilesDropped.emit($event)\"\r\n    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n    (resetGroup)=\"resetGroup.emit($event)\"\r\n    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n></bt-tiles-viewer-group>\r\n}\r\n", styles: [":host{display:block}:host[islast=true]{margin-bottom:var(--footer-height)}:host.s{padding:0 1rem}:host ::ng-deep>fd-layout-panel>fd-layout-panel-header .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}fd-layout-panel.custom-color{margin-top:1rem}fd-layout-panel.empty-tiles-group:not([edithome=true]){display:none}fd-layout-panel fd-layout-panel-header fd-layout-panel-head h5{font-weight:500}fd-layout-panel.hide-header fd-layout-panel-header{display:none}fd-layout-panel[editHome=false]{background-color:transparent}.tile-wrapper.TilesGroup{column-gap:.5rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center;flex-direction:column}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup{display:flex;row-gap:.5rem;column-gap:.5rem;justify-content:start;width:calc(99.9999999999svw - 4rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s{max-height:7.25rem;min-height:6.25rem;min-width:8.25rem;max-width:8.25rem;display:flex;flex-direction:column-reverse;justify-content:space-between}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header{height:1.2rem;max-height:1.2rem;min-height:1.2rem;text-align:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header.child-has-overflow-text{position:relative}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__subtitle{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__footer{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-tile--launch .fd-tile__content{align-items:center;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content{justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content .fd-numeric-content__launch-icon-container{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s{--sapFontHeader6Size: .75rem;min-width:calc(33.3333333333svw - 2rem);max-width:calc(33.3333333333svw - 2rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-numeric-content__kpi{font-size:1.2rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s span.fd-numeric-content__scale-text{font-size:.8rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__title{white-space:nowrap}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__content{height:3rem;max-height:3rem;min-height:3rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile.disable-tile-resize .fd-tile--double{min-width:calc(99.9999999999svw - 6rem + 1rem);max-width:calc(99.9999999999svw - 6rem + 1rem)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i7.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i7.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i7.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i7.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i7.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i5$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i5.DynamicStyleDirective, selector: "[cssStyle]", inputs: ["cssStyle"] }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit", "deviceSize"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group" }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "groupType", "edit", "deviceSize", "setToStorage", "listMode", "navigateBackOnClick"], outputs: ["hideClick", "renameClick"] }, { kind: "directive", type: TileClassDirective, selector: "[tilesCls]", inputs: ["rtl", "deviceSize", "appTileGroup"] }, { kind: "pipe", type: i5.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TilesViewerGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-layout-panel\r\n    [attr.editHome]=\"edit\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!edit || !stackContent\"\r\n    [ngClass]=\"appTileGroup.TileGroupType$Caption\"\r\n    [class.hide-header]=\"appTileGroup.HideHeader\"\r\n    [style.background-color]=\"appTileGroup.BackgroundColor ? appTileGroup.BackgroundColor : null\"\r\n    [class.custom-color]=\"appTileGroup.BackgroundColor\"\r\n    [class.tw-pb-2]=\"isLast\"\r\n    [class.hide]=\"!appTileGroup?.navigatorTiles.length && !appTileGroup.navigatorActionLinks.length\"\r\n>\r\n    @if (edit || stackContent || isAppTileSubGroup || appTileGroup.HideHeader) {\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-head>\r\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle | bbbTranslate }}</h5>\r\n        </fd-layout-panel-head>\r\n        @if (edit) {\r\n        <fd-layout-panel-actions class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\r\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\r\n                } @if (!appTileGroup.Predefined) {\r\n                <button\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n                }\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n        }\r\n    </fd-layout-panel-header>\r\n    }\r\n    <fd-layout-panel-body [class.small-size]=\"deviceSize === 's' || deviceSize === 'm'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            tilesCls\r\n            [class.!tw-hidden]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [class.!tw-justify-start]=\"appTileGroup.navigatorTiles?.length % 3 !== 0\"\r\n            [rtl]=\"rtl\"\r\n            [appTileGroup]=\"appTileGroup\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [ngClass]=\"deviceSize\"\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\r\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\r\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\r\n            <h5 fd-title></h5>\r\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\r\n            <div\r\n                [class.edit-home]=\"edit\"\r\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [setToStorage]=\"true\"\r\n                    [enableCommand]=\"!edit && appTile.Component\"\r\n                    tileRenderer\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [data]=\"appTile\"\r\n                    [groupType]=\"appTileGroup.TileGroupType$Caption\"\r\n                    [edit]=\"edit\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            } @if (edit) {\r\n            <fd-tile class=\"add-tile\" [routerLink]=\"['/home/appfinder']\">\r\n                <div style=\"margin: 0\">\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n            }\r\n        </div>\r\n        <bt-actions-link\r\n            [class.actions-link-edit-home]=\"edit\"\r\n            [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n            [class.!tw-p-0]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [edit]=\"edit\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [style.min-height]=\"edit ? '4rem' : 'auto'\"\r\n            cdkDropList\r\n            #actionLinks=\"cdkDropList\"\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListConnectedTo]=\"tiles\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListData]=\"{\r\n                isTile: false,\r\n                items: appTileGroup.navigatorActionLinks || []\r\n            }\"\r\n        >\r\n        </bt-actions-link>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n@for (appTileSubGroup of appTileGroup.$Children; track appTileSubGroup.Id;let last=$last) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\r\n    [isLast]=\"last\"\r\n    [edit]=\"edit\"\r\n    [rtl]=\"rtl\"\r\n    [stackContent]=\"stackContent\"\r\n    [cssStyle]=\"appTileSubGroup.CssStyles\"\r\n    [isAppTileSubGroup]=\"true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    (tilesDropped)=\"tilesDropped.emit($event)\"\r\n    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n    (resetGroup)=\"resetGroup.emit($event)\"\r\n    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n></bt-tiles-viewer-group>\r\n}\r\n", styles: [":host{display:block}:host[islast=true]{margin-bottom:1rem}:host ::ng-deep>fd-layout-panel>fd-layout-panel-header .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}fd-layout-panel.custom-color{margin-top:1rem}fd-layout-panel.empty-tiles-group:not([edithome=true]){display:none}fd-layout-panel fd-layout-panel-header fd-layout-panel-head h5{font-weight:500}fd-layout-panel.hide-header fd-layout-panel-header{display:none}fd-layout-panel[editHome=false]{background-color:transparent}.tile-wrapper.TilesGroup{column-gap:.5rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup{display:flex;row-gap:.5rem;column-gap:.5rem;justify-content:start;width:calc(99.9999999999svw - 4rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.news-tile) .fd-tile--s{max-height:7.25rem;min-height:6.25rem;min-width:8.25rem;max-width:8.25rem;display:flex;flex-direction:column-reverse;justify-content:space-between}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__header{height:1.2rem;max-height:1.2rem;min-height:1.2rem;text-align:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__header.child-has-overflow-text{position:relative}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__subtitle{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__footer{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-tile--launch .fd-tile__content{align-items:center;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content{justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content .fd-numeric-content__launch-icon-container{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile:not(.news-tile) .fd-tile--s{--sapFontHeader6Size: .75rem;max-height:5rem;min-height:5rem;min-width:calc(33.3333333333svw - 2rem);max-width:calc(33.3333333333svw - 2rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-numeric-content__kpi{font-size:1.2rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile:not(.news-tile) .fd-tile--s span.fd-numeric-content__scale-text{font-size:.8rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__title{white-space:nowrap}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile:not(.news-tile) .fd-tile--s .fd-tile__content{height:3rem;max-height:3rem;min-height:3rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile.news-tile{min-width:calc(99.9999999999svw - 4rem);max-width:calc(99.9999999999svw - 4rem)}\n"] }]
+            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-layout-panel\r\n    [attr.editHome]=\"edit\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!edit || !stackContent\"\r\n    [ngClass]=\"appTileGroup.TileGroupType$Caption\"\r\n    [class.hide-header]=\"appTileGroup.HideHeader\"\r\n    [style.background-color]=\"appTileGroup.BackgroundColor ? appTileGroup.BackgroundColor : null\"\r\n    [class.custom-color]=\"appTileGroup.BackgroundColor\"\r\n    [class.tw-pb-2]=\"isLast\"\r\n    [class.hide]=\"!appTileGroup?.navigatorTiles.length && !appTileGroup.navigatorActionLinks.length\"\r\n>\r\n    @if (edit || stackContent || isAppTileSubGroup || appTileGroup.HideHeader) {\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-head>\r\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle | bbbTranslate }}</h5>\r\n        </fd-layout-panel-head>\r\n        @if (edit) {\r\n        <fd-layout-panel-actions class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\r\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\r\n                } @if (!appTileGroup.Predefined) {\r\n                <button\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n                }\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n        }\r\n    </fd-layout-panel-header>\r\n    }\r\n    <fd-layout-panel-body [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            tilesCls\r\n            [class.!tw-hidden]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [class.!tw-justify-start]=\"appTileGroup.navigatorTiles?.length % 3 !== 0\"\r\n            [rtl]=\"rtl\"\r\n            [appTileGroup]=\"appTileGroup\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [ngClass]=\"deviceSize\"\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\r\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\r\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\r\n            <h5 fd-title></h5>\r\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\r\n            <div\r\n                [class.edit-home]=\"edit\"\r\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [setToStorage]=\"true\"\r\n                    [enableCommand]=\"!edit && appTile.Component\"\r\n                    tileRenderer\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [data]=\"appTile\"\r\n                    [groupType]=\"appTileGroup.TileGroupType$Caption\"\r\n                    [edit]=\"edit\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            } @if (edit) {\r\n            <fd-tile class=\"add-tile\" [routerLink]=\"['/home/appfinder']\">\r\n                <div style=\"margin: 0\">\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n            }\r\n        </div>\r\n        <bt-actions-link\r\n            [class.actions-link-edit-home]=\"edit\"\r\n            [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n            [class.!tw-p-0]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\r\n            [edit]=\"edit\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [style.min-height]=\"edit ? '4rem' : 'auto'\"\r\n            cdkDropList\r\n            #actionLinks=\"cdkDropList\"\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListConnectedTo]=\"tiles\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListData]=\"{\r\n                isTile: false,\r\n                items: appTileGroup.navigatorActionLinks || []\r\n            }\"\r\n        >\r\n        </bt-actions-link>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n@for (appTileSubGroup of appTileGroup.$Children; track appTileSubGroup.Id;let last=$last) {\r\n<bt-tiles-viewer-group\r\n    [class]=\"deviceSize\"\r\n    [appTileGroup]=\"appTileSubGroup\"\r\n    [isLast]=\"last\"\r\n    [edit]=\"edit\"\r\n    [rtl]=\"rtl\"\r\n    [stackContent]=\"stackContent\"\r\n    [cssStyle]=\"appTileSubGroup.CssStyles\"\r\n    [isAppTileSubGroup]=\"true\"\r\n    [deviceSize]=\"deviceSize\"\r\n    (tilesDropped)=\"tilesDropped.emit($event)\"\r\n    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n    (resetGroup)=\"resetGroup.emit($event)\"\r\n    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n></bt-tiles-viewer-group>\r\n}\r\n", styles: [":host{display:block}:host[islast=true]{margin-bottom:var(--footer-height)}:host.s{padding:0 1rem}:host ::ng-deep>fd-layout-panel>fd-layout-panel-header .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}fd-layout-panel.custom-color{margin-top:1rem}fd-layout-panel.empty-tiles-group:not([edithome=true]){display:none}fd-layout-panel fd-layout-panel-header fd-layout-panel-head h5{font-weight:500}fd-layout-panel.hide-header fd-layout-panel-header{display:none}fd-layout-panel[editHome=false]{background-color:transparent}.tile-wrapper.TilesGroup{column-gap:.5rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center;flex-direction:column}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup{display:flex;row-gap:.5rem;column-gap:.5rem;justify-content:start;width:calc(99.9999999999svw - 4rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s{max-height:7.25rem;min-height:6.25rem;min-width:8.25rem;max-width:8.25rem;display:flex;flex-direction:column-reverse;justify-content:space-between}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header{height:1.2rem;max-height:1.2rem;min-height:1.2rem;text-align:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__header.child-has-overflow-text{position:relative}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__subtitle{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep bt-tile:not(.disable-tile-resize) .fd-tile--s .fd-tile__footer{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-tile--launch .fd-tile__content{align-items:center;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content{justify-content:center}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup ::ng-deep .fd-numeric-content .fd-numeric-content__launch-icon-container{display:none}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s{--sapFontHeader6Size: .75rem;min-width:calc(33.3333333333svw - 2rem);max-width:calc(33.3333333333svw - 2rem)}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-numeric-content__kpi{font-size:1.2rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s span.fd-numeric-content__scale-text{font-size:.8rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__title{white-space:nowrap}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile .fd-tile--s .fd-tile__content{height:3rem;max-height:3rem;min-height:3rem}fd-layout-panel-body.small-size .tile-wrapper.TilesGroup.s ::ng-deep bt-tile.disable-tile-resize .fd-tile--double{min-width:calc(99.9999999999svw - 6rem + 1rem);max-width:calc(99.9999999999svw - 6rem + 1rem)}\n"] }]
         }] });
 
 class EmptyListDirective {
@@ -2351,10 +2360,11 @@ class AppFinderService {
         this._appGroupsSource = new BehaviorSubject([]);
         this._OnDestroy$ = new Subject();
         this._portalService = inject(PortalService);
-        this._tileService = inject(TilesService);
+        this._tileService = inject(TilesService, { self: true });
         this._selectedAppGroupIdSource = new Subject();
         this._pinnedAppInAppTileGroupsSource = new BehaviorSubject({});
         this.loadAppGroups();
+        this._tileService.loadAllAppTileGroups();
         this.deviceSize$ = this._tileService.deviceSize$;
         this.pinnedAppInAppTileGroups$ = this._pinnedAppInAppTileGroupsSource.asObservable();
         this.appGroups$ = this._appGroupsSource.asObservable();
@@ -2538,11 +2548,11 @@ class FormAppFinderComponent extends BaseComponent {
         this._cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormAppFinderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: FormAppFinderComponent, isStandalone: false, 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    (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: i5.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i3.ContentDensityDirective, selector: "[contentDensity]" }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: FormAppFinderComponent, isStandalone: false, selector: "bt-form-app-finder", providers: [TilesService], 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    (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: i5.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i3.ContentDensityDirective, selector: "[contentDensity]" }, { 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: "20.0.6", ngImport: i0, type: FormAppFinderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-form-app-finder', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bt-app-finder\r\n    [appGroups]=\"(appGroups$ | async)!!\"\r\n    [selectedAppGroupId]=\"(selectedAppGroupId$ | async)!!\"\r\n    [selectedAppGroup]=\"(selectedAppGroup$ | async)!!\"\r\n    [mobile]=\"(mobile$ | async)!!\"\r\n    [sideContentSize]=\"(sideContentSize$ | async)!!\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [contentDensity]=\"(contentDensity$ | async) ?? 'compact'\"\r\n    [pinnedAppInAppTileGroups]=\"(pinnedAppInAppTileGroups$ | async)!!\"\r\n    (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"] }]
+            args: [{ selector: 'bt-form-app-finder', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TilesService], standalone: false, template: "<bt-app-finder\r\n    [appGroups]=\"(appGroups$ | async)!!\"\r\n    [selectedAppGroupId]=\"(selectedAppGroupId$ | async)!!\"\r\n    [selectedAppGroup]=\"(selectedAppGroup$ | async)!!\"\r\n    [mobile]=\"(mobile$ | async)!!\"\r\n    [sideContentSize]=\"(sideContentSize$ | async)!!\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [contentDensity]=\"(contentDensity$ | async) ?? 'compact'\"\r\n    [pinnedAppInAppTileGroups]=\"(pinnedAppInAppTileGroups$ | async)!!\"\r\n    (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: () => [] });
 
 class FooterEditTileComponent extends BaseComponent {