barsa-tiles 0.0.1 → 0.0.2

package/fesm2015/barsa-tiles.mjs

@@ -162,10 +162,10 @@ class TileComponent extends BaseTileComponent {
     }
 }
 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", disableClick: "disableClick" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<fd-tile [type]=\"type\" [double]=\"double\" [action]=\"editHome\">\n    <ng-container *ngIf=\"editHome && !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\" *ngIf=\"footerTemplate; else 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: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "component", type: FooterTileComponent, selector: "bt-footer-tile", inputs: ["settings"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TileComponent, selector: "bt-tile", inputs: { type: "type", footerTemplate: "footerTemplate", disableClick: "disableClick" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<fd-tile [type]=\"type\" [double]=\"double\" [action]=\"editHome\">\r\n    <ng-container *ngIf=\"editHome && !data.Locked\">\r\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    </ng-container>\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title>\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate\" *ngIf=\"footerTemplate; else defaultFooter\"></ng-container>\r\n</fd-tile>\r\n<ng-template #defaultFooter>\r\n    <bt-footer-tile *ngIf=\"footer\" [settings]=\"footer\"></bt-footer-tile>\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<bsu-mask *ngIf=\"runningCommand\"></bsu-mask>\r\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: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { 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]=\"double\" [action]=\"editHome\">\n    <ng-container *ngIf=\"editHome && !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\" *ngIf=\"footerTemplate; else 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"] }]
+            args: [{ selector: 'bt-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-tile [type]=\"type\" [double]=\"double\" [action]=\"editHome\">\r\n    <ng-container *ngIf=\"editHome && !data.Locked\">\r\n        <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n        <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    </ng-container>\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title>\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate\" *ngIf=\"footerTemplate; else defaultFooter\"></ng-container>\r\n</fd-tile>\r\n<ng-template #defaultFooter>\r\n    <bt-footer-tile *ngIf=\"footer\" [settings]=\"footer\"></bt-footer-tile>\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<bsu-mask *ngIf=\"runningCommand\"></bsu-mask>\r\n", styles: [":host,fd-tile{display:block}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], footerTemplate: [{
@@ -215,10 +215,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
 class ActionsLinkComponent extends BaseComponent {
 }
 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", editHome: "editHome" }, usesInheritance: true, ngImport: i0, template: "<bt-action-item\n    *ngFor=\"let actionItem of actionsLink\"\n    cdkDrag\n    [data]=\"actionItem\"\n    [editHome]=\"editHome\"\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n    [mo]=\"actionItem\"\n>\n</bt-action-item>\n", styles: [":host{display:flex;width:100%;row-gap:5px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:10px;padding:1px 10px}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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ActionsLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", editHome: "editHome" }, usesInheritance: true, ngImport: i0, template: "<bt-action-item\r\n    *ngFor=\"let actionItem of actionsLink\"\r\n    cdkDrag\r\n    [data]=\"actionItem\"\r\n    [editHome]=\"editHome\"\r\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\r\n    [mo]=\"actionItem\"\r\n>\r\n</bt-action-item>\r\n", styles: [":host{display:flex;width:100%;row-gap:5px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:10px;padding:1px 10px}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" }], 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    [editHome]=\"editHome\"\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n    [mo]=\"actionItem\"\n>\n</bt-action-item>\n", styles: [":host{display:flex;width:100%;row-gap:5px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:10px;padding:1px 10px}bt-action-item{margin-top:auto;margin-bottom:auto}\n"] }]
+            args: [{ selector: 'bt-actions-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-action-item\r\n    *ngFor=\"let actionItem of actionsLink\"\r\n    cdkDrag\r\n    [data]=\"actionItem\"\r\n    [editHome]=\"editHome\"\r\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\r\n    [mo]=\"actionItem\"\r\n>\r\n</bt-action-item>\r\n", styles: [":host{display:flex;width:100%;row-gap:5px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:10px;padding:1px 10px}bt-action-item{margin-top:auto;margin-bottom:auto}\n"] }]
         }], propDecorators: { actionsLink: [{
                 type: Input
             }], editHome: [{
@@ -322,10 +322,10 @@ class TilesViewerGroupComponent extends BaseComponent {
     }
 }
 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", editHome: "editHome", isAppTileSubGroup: "isAppTileSubGroup" }, 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]=\"editHome\" cdkDrag [cdkDragDisabled]=\"!editHome || !stackContent\">\r\n    <fd-layout-panel-header *ngIf=\"editHome || stackContent || isAppTileSubGroup\">\r\n        <fd-layout-panel-head>\r\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\r\n        </fd-layout-panel-head>\r\n        <fd-layout-panel-actions *ngIf=\"editHome\" 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                <button\r\n                    fd-button\r\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\r\n                    [label]=\"'Refresh' | bbbTranslate\"\r\n                    (click)=\"onReset(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"!appTileGroup.Predefined\"\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n    </fd-layout-panel-header>\r\n    <fd-layout-panel-body [bleed]=\"!stackContent\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            fd-panel-content\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            <ng-container *ngIf=\"!editHome\">\r\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\r\n\r\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\r\n            </ng-container>\r\n            <div\r\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\r\n                [class.edit-home]=\"editHome\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!editHome || appTileGroup.Locked\"\r\n                [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                [enableCommand]=\"!editHome && appTile.Component\"\r\n                tileRenderer\r\n                [data]=\"appTile\"\r\n                [editHome]=\"editHome\"\r\n                [component]=\"appTile.Component\"\r\n                (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n            ></div>\r\n            <fd-tile class=\"add-tile\" *ngIf=\"editHome\" [routerLink]=\"['/home/appfinder']\">\r\n                <div>\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n        </div>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<bt-actions-link\r\n    [class.actions-link-edit-home]=\"editHome\"\r\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n    [editHome]=\"editHome\"\r\n    [style.min-height]=\"editHome ? '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<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileSubGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"true\"\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</ng-container>\r\n", styles: [":host{display:block}fd-layout-panel{margin-top:1rem;box-shadow:none}fd-layout-panel fd-layout-panel-body{padding:0}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{--gap: 12px;display:inline-flex;flex-wrap:wrap}.tile-wrapper ::ng-deep .barsa-tile{margin:10px}.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.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i6.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i6.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i6.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i6.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i6.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", "editHome"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "editHome", "isAppTileSubGroup"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "editHome"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TilesViewerGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: { appTileGroup: "appTileGroup", stackContent: "stackContent", editHome: "editHome", 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]=\"editHome\" cdkDrag [cdkDragDisabled]=\"!editHome || !stackContent\">\r\n    <fd-layout-panel-header *ngIf=\"editHome || stackContent || isAppTileSubGroup\">\r\n        <fd-layout-panel-head>\r\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\r\n        </fd-layout-panel-head>\r\n        <fd-layout-panel-actions *ngIf=\"editHome\" 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                <button\r\n                    fd-button\r\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\r\n                    [label]=\"'Refresh' | bbbTranslate\"\r\n                    (click)=\"onReset(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"!appTileGroup.Predefined\"\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n    </fd-layout-panel-header>\r\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            fd-panel-content\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            <ng-container *ngIf=\"!editHome\">\r\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\r\n\r\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\r\n            </ng-container>\r\n            <div\r\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\r\n                [class.edit-home]=\"editHome\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!editHome || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [enableCommand]=\"!editHome && appTile.Component\"\r\n                    tileRenderer\r\n                    [data]=\"appTile\"\r\n                    [editHome]=\"editHome\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            <fd-tile class=\"add-tile\" *ngIf=\"editHome\" [routerLink]=\"['/home/appfinder']\">\r\n                <div>\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n        </div>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<bt-actions-link\r\n    [class.actions-link-edit-home]=\"editHome\"\r\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n    [editHome]=\"editHome\"\r\n    [style.min-height]=\"editHome ? '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<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileSubGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"true\"\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</ng-container>\r\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}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.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i6.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i6.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i6.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i6.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i6.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", "editHome"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "editHome", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "editHome"], 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]=\"editHome\" cdkDrag [cdkDragDisabled]=\"!editHome || !stackContent\">\r\n    <fd-layout-panel-header *ngIf=\"editHome || stackContent || isAppTileSubGroup\">\r\n        <fd-layout-panel-head>\r\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\r\n        </fd-layout-panel-head>\r\n        <fd-layout-panel-actions *ngIf=\"editHome\" 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                <button\r\n                    fd-button\r\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\r\n                    [label]=\"'Refresh' | bbbTranslate\"\r\n                    (click)=\"onReset(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"!appTileGroup.Predefined\"\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n    </fd-layout-panel-header>\r\n    <fd-layout-panel-body [bleed]=\"!stackContent\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            fd-panel-content\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            <ng-container *ngIf=\"!editHome\">\r\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\r\n\r\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\r\n            </ng-container>\r\n            <div\r\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\r\n                [class.edit-home]=\"editHome\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!editHome || appTileGroup.Locked\"\r\n                [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                [enableCommand]=\"!editHome && appTile.Component\"\r\n                tileRenderer\r\n                [data]=\"appTile\"\r\n                [editHome]=\"editHome\"\r\n                [component]=\"appTile.Component\"\r\n                (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n            ></div>\r\n            <fd-tile class=\"add-tile\" *ngIf=\"editHome\" [routerLink]=\"['/home/appfinder']\">\r\n                <div>\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n        </div>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<bt-actions-link\r\n    [class.actions-link-edit-home]=\"editHome\"\r\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n    [editHome]=\"editHome\"\r\n    [style.min-height]=\"editHome ? '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<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileSubGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"true\"\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</ng-container>\r\n", styles: [":host{display:block}fd-layout-panel{margin-top:1rem;box-shadow:none}fd-layout-panel fd-layout-panel-body{padding:0}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{--gap: 12px;display:inline-flex;flex-wrap:wrap}.tile-wrapper ::ng-deep .barsa-tile{margin:10px}.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"] }]
+            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"editHome\" cdkDrag [cdkDragDisabled]=\"!editHome || !stackContent\">\r\n    <fd-layout-panel-header *ngIf=\"editHome || stackContent || isAppTileSubGroup\">\r\n        <fd-layout-panel-head>\r\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\r\n        </fd-layout-panel-head>\r\n        <fd-layout-panel-actions *ngIf=\"editHome\" 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                <button\r\n                    fd-button\r\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\r\n                    [label]=\"'Refresh' | bbbTranslate\"\r\n                    (click)=\"onReset(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"!appTileGroup.Predefined\"\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n    </fd-layout-panel-header>\r\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            fd-panel-content\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            <ng-container *ngIf=\"!editHome\">\r\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\r\n\r\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\r\n            </ng-container>\r\n            <div\r\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\r\n                [class.edit-home]=\"editHome\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!editHome || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [enableCommand]=\"!editHome && appTile.Component\"\r\n                    tileRenderer\r\n                    [data]=\"appTile\"\r\n                    [editHome]=\"editHome\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            <fd-tile class=\"add-tile\" *ngIf=\"editHome\" [routerLink]=\"['/home/appfinder']\">\r\n                <div>\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n        </div>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<bt-actions-link\r\n    [class.actions-link-edit-home]=\"editHome\"\r\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n    [editHome]=\"editHome\"\r\n    [style.min-height]=\"editHome ? '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<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileSubGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"true\"\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</ng-container>\r\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}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: [{
@@ -334,6 +334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }], isAppTileSubGroup: [{
                 type: Input
+            }], deviceSize: [{
+                type: Input
             }], tilesDropped: [{
                 type: Output
             }], hideAppTileClick: [{
@@ -432,10 +434,10 @@ class AppFinderGroupComponent extends BaseComponent {
     }
 }
 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\">\n    <div class=\"app-groups\">\n        <ul fd-list [selection]=\"true\">\n            <li\n                fd-list-item\n                *ngFor=\"let group of appGroups; let i = index\"\n                [selected]=\"group.Id === selectedId\"\n                (click)=\"OnGroupClick(group)\"\n            >\n                <span fd-list-title>\n                    {{ group.Title }}\n                </span>\n            </li>\n        </ul>\n    </div>\n</ng-container>\n<ng-template #menuTpl>\n    <li *ngFor=\"let group of appGroups; let i = index\" fd-menu-item [selected]=\"group.Id === selectedId\">\n        <a fd-menu-interactive (click)=\"OnMenuGroupClick(group)\">\n            <span fd-menu-title>\n                {{ group.Title }}\n            </span>\n        </a>\n    </li>\n</ng-template>\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: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i7.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 });
+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: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i7.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\">\n    <div class=\"app-groups\">\n        <ul fd-list [selection]=\"true\">\n            <li\n                fd-list-item\n                *ngFor=\"let group of appGroups; let i = index\"\n                [selected]=\"group.Id === selectedId\"\n                (click)=\"OnGroupClick(group)\"\n            >\n                <span fd-list-title>\n                    {{ group.Title }}\n                </span>\n            </li>\n        </ul>\n    </div>\n</ng-container>\n<ng-template #menuTpl>\n    <li *ngFor=\"let group of appGroups; let i = index\" fd-menu-item [selected]=\"group.Id === selectedId\">\n        <a fd-menu-interactive (click)=\"OnMenuGroupClick(group)\">\n            <span fd-menu-title>\n                {{ group.Title }}\n            </span>\n        </a>\n    </li>\n</ng-template>\n", styles: [".app-groups{width:25vw;border-left:.0625rem solid var(--sapGroup_TitleBorderColor, #d9d9d9)}\n"] }]
+            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: [{
@@ -458,10 +460,10 @@ class AppFinderComponent extends BaseComponent {
     }
 }
 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\">\n    <ng-container *ngIf=\"appGroups; else loading\">\n        <fd-toolbar [fdType]=\"'solid'\">\n            <button\n                fd-toolbar-item\n                fd-button\n                [fdMenu]=\"true\"\n                [glyph]=\"'menu2'\"\n                [fdType]=\"'transparent'\"\n                [fdMenuTrigger]=\"menu\"\n                [label]=\"selectedAppGroup?.Title\"\n                *ngIf=\"deviceSize === 's'\"\n            ></button>\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n            <fdp-search-field\n                fd-toolbar-item\n                [contentDensity]=\"contentDensity\"\n                [placeholder]=\"'Search' | bbbTranslate\"\n                (searchSubmit)=\"onSearchSubmit($event)\"\n                [suggestions]=\"[]\"\n            ></fdp-search-field>\n        </fd-toolbar>\n        <div style=\"display: flex; overflow-y: auto\" [style.height]=\"contentHeight\">\n            <div class=\"app-groups\">\n                <bt-app-finder-group\n                    *ngIf=\"deviceSize !== 's'\"\n                    [appGroups]=\"appGroups\"\n                    [listMode]=\"true\"\n                    [selectedId]=\"selectedAppGroupId\"\n                    (selectedIdChange)=\"selectedAppGroupIdChange.emit($event)\"\n                >\n                </bt-app-finder-group>\n            </div>\n            <bt-app-finder-app-list\n                [appGroup]=\"selectedAppGroup\"\n                [mobile]=\"mobile\"\n                [searchTerm]=\"searchTerm\"\n                [pinnedAppInAppTileGroups]=\"pinnedAppInAppTileGroups\"\n                (pinClick)=\"pinClick.emit($event)\"\n            ></bt-app-finder-app-list>\n        </div>\n        <fd-menu\n            #menu\n            [mobile]=\"deviceSize === 's'\"\n            [mobileConfig]=\"{ title: 'Groups' | bbbTranslate, hasCloseButton: true }\"\n        >\n            <bt-app-finder-group\n                *ngIf=\"deviceSize === 's'\"\n                [appGroups]=\"appGroups\"\n                [selectedId]=\"selectedAppGroupId\"\n                (selectedIdChange)=\"menu.close(); selectedAppGroupIdChange.emit($event)\"\n            >\n            </bt-app-finder-group>\n        </fd-menu>\n    </ng-container>\n    <ng-template #loading>\n        <bsu-mask></bsu-mask>\n    </ng-template>\n</div>\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$2.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$1.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: "component", type: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { 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 });
+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$2.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$1.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: "component", type: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { 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\">\n    <ng-container *ngIf=\"appGroups; else loading\">\n        <fd-toolbar [fdType]=\"'solid'\">\n            <button\n                fd-toolbar-item\n                fd-button\n                [fdMenu]=\"true\"\n                [glyph]=\"'menu2'\"\n                [fdType]=\"'transparent'\"\n                [fdMenuTrigger]=\"menu\"\n                [label]=\"selectedAppGroup?.Title\"\n                *ngIf=\"deviceSize === 's'\"\n            ></button>\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n            <fdp-search-field\n                fd-toolbar-item\n                [contentDensity]=\"contentDensity\"\n                [placeholder]=\"'Search' | bbbTranslate\"\n                (searchSubmit)=\"onSearchSubmit($event)\"\n                [suggestions]=\"[]\"\n            ></fdp-search-field>\n        </fd-toolbar>\n        <div style=\"display: flex; overflow-y: auto\" [style.height]=\"contentHeight\">\n            <div class=\"app-groups\">\n                <bt-app-finder-group\n                    *ngIf=\"deviceSize !== 's'\"\n                    [appGroups]=\"appGroups\"\n                    [listMode]=\"true\"\n                    [selectedId]=\"selectedAppGroupId\"\n                    (selectedIdChange)=\"selectedAppGroupIdChange.emit($event)\"\n                >\n                </bt-app-finder-group>\n            </div>\n            <bt-app-finder-app-list\n                [appGroup]=\"selectedAppGroup\"\n                [mobile]=\"mobile\"\n                [searchTerm]=\"searchTerm\"\n                [pinnedAppInAppTileGroups]=\"pinnedAppInAppTileGroups\"\n                (pinClick)=\"pinClick.emit($event)\"\n            ></bt-app-finder-app-list>\n        </div>\n        <fd-menu\n            #menu\n            [mobile]=\"deviceSize === 's'\"\n            [mobileConfig]=\"{ title: 'Groups' | bbbTranslate, hasCloseButton: true }\"\n        >\n            <bt-app-finder-group\n                *ngIf=\"deviceSize === 's'\"\n                [appGroups]=\"appGroups\"\n                [selectedId]=\"selectedAppGroupId\"\n                (selectedIdChange)=\"menu.close(); selectedAppGroupIdChange.emit($event)\"\n            >\n            </bt-app-finder-group>\n        </fd-menu>\n    </ng-container>\n    <ng-template #loading>\n        <bsu-mask></bsu-mask>\n    </ng-template>\n</div>\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"] }]
+            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: [{
@@ -1161,14 +1163,19 @@ class TilesViewerComponent extends BaseComponent {
         this.rtl = BarsaApi.LoginFormData.IsRtl;
     }
     onSelectedTabChange(selectedTab, appTileGroups) {
-        this.selectedTabTitle = selectedTab.title;
-        if (!this.tabListComponent) {
-            return;
+        let firstSelected = false;
+        if (!this.selectedTabTitle) {
+            firstSelected = true;
         }
-        this.tabChanged.emit({
-            tabPanels: this.tabListComponent.tabPanels.toArray(),
-            selectedTab,
-            appTileGroups
+        const selectedTabTitle = selectedTab.title || '';
+        this.selectedTabTitle = selectedTabTitle;
+        setTimeout(() => {
+            this.tabChanged.emit({
+                firstSelected,
+                selectedTabTitle,
+                tabPanels: this.tabListComponent.tabPanels.toArray(),
+                appTileGroups
+            });
         });
     }
     onDropGroup(appTileGroups, event) {
@@ -1194,7 +1201,7 @@ 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", editHome: "editHome", 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\">\r\n    <bsu-mask *ngIf=\"loading\"></bsu-mask>\r\n    <fd-dynamic-page\r\n        size=\"large\"\r\n        [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n        [autoResponsive]=\"true\"\r\n        [class.stack-mode]=\"stackContent\"\r\n    >\r\n        <fd-dynamic-page-header *ngIf=\"editHome\" [title]=\"'HomeEdit' | bbbTranslate\">\r\n            <fd-dynamic-page-global-actions>\r\n                <fd-toolbar *ngIf=\"editHome\" fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                    <fd-switch\r\n                        fd-toolbar-item\r\n                        [checked]=\"stackContent\"\r\n                        (checkedChange)=\"onStackContentChanged($event)\"\r\n                    ></fd-switch>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                        <i class=\"sap-icon--decline\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        <fd-dynamic-page-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    stackContent ? renderTabsStacked : renderTabs;\r\n                    context: {\r\n                        $implicit: appTileGroups,\r\n                        stackContent: stackContent,\r\n                        editHome: editHome\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n        <fd-dynamic-page-footer>\r\n            <div fd-bar barDesign=\"footer\" *ngIf=\"editHome\">\r\n                <div fd-bar-right>\r\n                    <fd-button-bar\r\n                        [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                        fdType=\"emphasized\"\r\n                        (click)=\"onExitEditHome(appTileGroups)\"\r\n                    ></fd-button-bar>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n    </fd-dynamic-page>\r\n</ng-container>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template #renderTabs let-appTileGroups let-stackContent=\"stackContent\" let-editHome=\"editHome\">\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n    >\r\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\r\n            <fd-tab\r\n                *ngIf=\"editHome || appTileGroup.navigatorVisible\"\r\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n                [class.is-expanded]=\"selectedTabTitle === (appTileGroup.navigatorTitle | bbbTranslate)\"\r\n            >\r\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderGroup;\r\n                            context: {\r\n                                $implicit: appTileGroup,\r\n                                stackContent: stackContent,\r\n                                editHome: editHome,\r\n                                isAppTileSubGroup: false\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </fd-dynamic-page-content>\r\n            </fd-tab>\r\n        </ng-container>\r\n    </fd-tab-list>\r\n</ng-template>\r\n<ng-template #renderTabsStacked let-appTileGroups let-stackContent=\"stackContent\" let-editHome=\"editHome\">\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [stackContent]=\"true\"\r\n        [maxContentHeight]=\"stackContent ? 'calc(99vh - 2.75rem - 44px)' : 'calc(100vh - 44px)'\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n    >\r\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\r\n            <fd-tab\r\n                *ngIf=\"editHome || appTileGroup.navigatorVisible\"\r\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n                [count]=\"appTileGroup.$Children?.length\"\r\n            >\r\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderGroup;\r\n                            context: {\r\n                                $implicit: appTileGroup,\r\n                                stackContent: stackContent,\r\n                                editHome: editHome,\r\n                                isAppTileSubGroup: false\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </fd-dynamic-page-content>\r\n            </fd-tab>\r\n        </ng-container>\r\n    </fd-tab-list>\r\n</ng-template>\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-editHome=\"editHome\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page 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$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i5$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5$3.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$4.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i5$4.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i5$4.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i5$4.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i5$4.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i5$4.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i6$2.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i7$2.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: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "editHome", "isAppTileSubGroup"], 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", editHome: "editHome", 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\">\r\n    <bsu-mask *ngIf=\"loading\"></bsu-mask>\r\n    <fd-dynamic-page\r\n        size=\"large\"\r\n        [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n        [autoResponsive]=\"true\"\r\n        [class.stack-mode]=\"stackContent\"\r\n    >\r\n        <fd-dynamic-page-header *ngIf=\"editHome\" [title]=\"'HomeEdit' | bbbTranslate\">\r\n            <fd-dynamic-page-global-actions>\r\n                <fd-toolbar *ngIf=\"editHome\" fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                    <fd-switch\r\n                        fd-toolbar-item\r\n                        [checked]=\"stackContent\"\r\n                        (checkedChange)=\"onStackContentChanged($event)\"\r\n                    ></fd-switch>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                        <i class=\"sap-icon--decline\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        <fd-dynamic-page-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    stackContent ? renderTabsStacked : renderTabs;\r\n                    context: {\r\n                        $implicit: appTileGroups,\r\n                        stackContent: stackContent,\r\n                        editHome: editHome\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n        <fd-dynamic-page-footer>\r\n            <div fd-bar barDesign=\"footer\" *ngIf=\"editHome\">\r\n                <div fd-bar-right>\r\n                    <fd-button-bar\r\n                        [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                        fdType=\"emphasized\"\r\n                        (click)=\"onExitEditHome(appTileGroups)\"\r\n                    ></fd-button-bar>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n    </fd-dynamic-page>\r\n</ng-container>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template #renderTabs let-appTileGroups let-stackContent=\"stackContent\" let-editHome=\"editHome\">\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n    >\r\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\r\n            <fd-tab\r\n                *ngIf=\"editHome || appTileGroup.navigatorVisible\"\r\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n                [class.is-expanded]=\"selectedTabTitle === (appTileGroup.navigatorTitle | bbbTranslate)\"\r\n            >\r\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderGroup;\r\n                            context: {\r\n                                $implicit: appTileGroup,\r\n                                stackContent: stackContent,\r\n                                editHome: editHome,\r\n                                isAppTileSubGroup: false\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </fd-dynamic-page-content>\r\n            </fd-tab>\r\n        </ng-container>\r\n    </fd-tab-list>\r\n</ng-template>\r\n<ng-template #renderTabsStacked let-appTileGroups let-stackContent=\"stackContent\" let-editHome=\"editHome\">\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [stackContent]=\"true\"\r\n        [maxContentHeight]=\"stackContent ? 'calc(99vh - 2.75rem - 44px)' : 'calc(100vh - 44px)'\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n    >\r\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\r\n            <fd-tab\r\n                *ngIf=\"editHome || appTileGroup.navigatorVisible\"\r\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n                [count]=\"appTileGroup.$Children?.length\"\r\n            >\r\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderGroup;\r\n                            context: {\r\n                                $implicit: appTileGroup,\r\n                                stackContent: stackContent,\r\n                                editHome: editHome,\r\n                                isAppTileSubGroup: false\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </fd-dynamic-page-content>\r\n            </fd-tab>\r\n        </ng-container>\r\n    </fd-tab-list>\r\n</ng-template>\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-editHome=\"editHome\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page 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$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i5$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5$3.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$4.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i5$4.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i5$4.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i5$4.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i5$4.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i5$4.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i6$2.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i7$2.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: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "editHome", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { 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: TilesViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"appTileGroups; else loadingTpl\">\r\n    <bsu-mask *ngIf=\"loading\"></bsu-mask>\r\n    <fd-dynamic-page\r\n        size=\"large\"\r\n        [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n        [autoResponsive]=\"true\"\r\n        [class.stack-mode]=\"stackContent\"\r\n    >\r\n        <fd-dynamic-page-header *ngIf=\"editHome\" [title]=\"'HomeEdit' | bbbTranslate\">\r\n            <fd-dynamic-page-global-actions>\r\n                <fd-toolbar *ngIf=\"editHome\" fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                    <fd-switch\r\n                        fd-toolbar-item\r\n                        [checked]=\"stackContent\"\r\n                        (checkedChange)=\"onStackContentChanged($event)\"\r\n                    ></fd-switch>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                        <i class=\"sap-icon--decline\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        <fd-dynamic-page-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    stackContent ? renderTabsStacked : renderTabs;\r\n                    context: {\r\n                        $implicit: appTileGroups,\r\n                        stackContent: stackContent,\r\n                        editHome: editHome\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n        <fd-dynamic-page-footer>\r\n            <div fd-bar barDesign=\"footer\" *ngIf=\"editHome\">\r\n                <div fd-bar-right>\r\n                    <fd-button-bar\r\n                        [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                        fdType=\"emphasized\"\r\n                        (click)=\"onExitEditHome(appTileGroups)\"\r\n                    ></fd-button-bar>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n    </fd-dynamic-page>\r\n</ng-container>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template #renderTabs let-appTileGroups let-stackContent=\"stackContent\" let-editHome=\"editHome\">\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n    >\r\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\r\n            <fd-tab\r\n                *ngIf=\"editHome || appTileGroup.navigatorVisible\"\r\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n                [class.is-expanded]=\"selectedTabTitle === (appTileGroup.navigatorTitle | bbbTranslate)\"\r\n            >\r\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderGroup;\r\n                            context: {\r\n                                $implicit: appTileGroup,\r\n                                stackContent: stackContent,\r\n                                editHome: editHome,\r\n                                isAppTileSubGroup: false\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </fd-dynamic-page-content>\r\n            </fd-tab>\r\n        </ng-container>\r\n    </fd-tab-list>\r\n</ng-template>\r\n<ng-template #renderTabsStacked let-appTileGroups let-stackContent=\"stackContent\" let-editHome=\"editHome\">\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [stackContent]=\"true\"\r\n        [maxContentHeight]=\"stackContent ? 'calc(99vh - 2.75rem - 44px)' : 'calc(100vh - 44px)'\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n    >\r\n        <ng-container *ngFor=\"let appTileGroup of appTileGroups; let i = index; trackBy: _trackById\">\r\n            <fd-tab\r\n                *ngIf=\"editHome || appTileGroup.navigatorVisible\"\r\n                [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n                [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n                [count]=\"appTileGroup.$Children?.length\"\r\n            >\r\n                <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderGroup;\r\n                            context: {\r\n                                $implicit: appTileGroup,\r\n                                stackContent: stackContent,\r\n                                editHome: editHome,\r\n                                isAppTileSubGroup: false\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </fd-dynamic-page-content>\r\n            </fd-tab>\r\n        </ng-container>\r\n    </fd-tab-list>\r\n</ng-template>\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-editHome=\"editHome\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page 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"] }]
@@ -1281,11 +1288,9 @@ class TilesViewerContainerComponent extends BaseComponent {
         this._tilesService.setEditHome(false);
     }
     onSelectedTabChange(e) {
-        const { selectedTab, appTileGroups: appGroups, tabPanels } = e;
-        const appTileGroupTitle = selectedTab.title;
+        const { firstSelected, selectedTabTitle, appTileGroups: appGroups, tabPanels } = e;
         let appTileGroup;
-        if (!this.firstSelected) {
-            this.firstSelected = true;
+        if (firstSelected) {
             const lastSelectedAppGroupId = this._tilesViewerService.selectedAppGroupId;
             if (lastSelectedAppGroupId) {
                 appTileGroup = appGroups.find((c) => c.Id === lastSelectedAppGroupId);
@@ -1299,7 +1304,7 @@ class TilesViewerContainerComponent extends BaseComponent {
             }
         }
         if (!appTileGroup) {
-            appTileGroup = appGroups.find((c) => c.navigatorTitle === appTileGroupTitle);
+            appTileGroup = appGroups.find((c) => c.navigatorTitle === selectedTabTitle);
         }
         if (appTileGroup) {
             this._tilesViewerService.setSelectedTab(appTileGroup);
@@ -1450,10 +1455,10 @@ class NewsTileComponent extends BaseBtTileComponent {
     }
 }
 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 [data]=\"data\" [type]=\"'launch'\" [footerTemplate]=\"newsFooter\" [editHome]=\"editHome\">\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 *ngIf=\"isStop; else stop\" fd-button fdType=\"transparent\" glyph=\"play\" (click)=\"trigger()\"></button>\n            <ng-template #stop>\n                <button fd-button fdType=\"transparent\" glyph=\"pause\" (click)=\"trigger()\"></button>\n            </ng-template>\n            <fd-carousel\n                *ngIf=\"slides && slides.length\"\n                carouselIndicatorsOrientation=\"top\"\n                [slideTransitionDuration]=\"1000\"\n                (slideChange)=\"slideChange($event)\"\n                [loop]=\"true\"\n                [navigation]=\"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", "disableClick"] }, { kind: "pipe", type: i1$2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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 [data]=\"data\" [type]=\"'launch'\" [footerTemplate]=\"newsFooter\" [editHome]=\"editHome\">\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 *ngIf=\"isStop; else stop\" fd-button fdType=\"transparent\" glyph=\"play\" (click)=\"trigger()\"></button>\r\n            <ng-template #stop>\r\n                <button fd-button fdType=\"transparent\" glyph=\"pause\" (click)=\"trigger()\"></button>\r\n            </ng-template>\r\n            <fd-carousel\r\n                *ngIf=\"slides && slides.length\"\r\n                carouselIndicatorsOrientation=\"top\"\r\n                [slideTransitionDuration]=\"1000\"\r\n                (slideChange)=\"slideChange($event)\"\r\n                [loop]=\"true\"\r\n                [navigation]=\"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.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", "disableClick"] }, { kind: "pipe", type: i1$2.PictureFieldSourcePipe, name: "picFieldSrc" }], 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 [data]=\"data\" [type]=\"'launch'\" [footerTemplate]=\"newsFooter\" [editHome]=\"editHome\">\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 *ngIf=\"isStop; else stop\" fd-button fdType=\"transparent\" glyph=\"play\" (click)=\"trigger()\"></button>\n            <ng-template #stop>\n                <button fd-button fdType=\"transparent\" glyph=\"pause\" (click)=\"trigger()\"></button>\n            </ng-template>\n            <fd-carousel\n                *ngIf=\"slides && slides.length\"\n                carouselIndicatorsOrientation=\"top\"\n                [slideTransitionDuration]=\"1000\"\n                (slideChange)=\"slideChange($event)\"\n                [loop]=\"true\"\n                [navigation]=\"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"] }]
+            args: [{ selector: 'bt-news-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile [data]=\"data\" [type]=\"'launch'\" [footerTemplate]=\"newsFooter\" [editHome]=\"editHome\">\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 *ngIf=\"isStop; else stop\" fd-button fdType=\"transparent\" glyph=\"play\" (click)=\"trigger()\"></button>\r\n            <ng-template #stop>\r\n                <button fd-button fdType=\"transparent\" glyph=\"pause\" (click)=\"trigger()\"></button>\r\n            </ng-template>\r\n            <fd-carousel\r\n                *ngIf=\"slides && slides.length\"\r\n                carouselIndicatorsOrientation=\"top\"\r\n                [slideTransitionDuration]=\"1000\"\r\n                (slideChange)=\"slideChange($event)\"\r\n                [loop]=\"true\"\r\n                [navigation]=\"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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { carouselComponent: [{
                 type: ViewChild,
                 args: [CarouselComponent]
@@ -1923,10 +1928,10 @@ class FormAppFinderComponent extends BaseComponent {
     }
 }
 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\n    [appGroups]=\"(appGroups$ | async)!!\"\n    [selectedAppGroupId]=\"(selectedAppGroupId$ | async)!!\"\n    [selectedAppGroup]=\"(selectedAppGroup$ | async)!!\"\n    [mobile]=\"(mobile$ | async)!!\"\n    [sideContentSize]=\"(sideContentSize$ | async)!!\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    [contentDensity]=\"(contentDensity$ | async) ?? 'compact'\"\n    [pinnedAppInAppTileGroups]=\"(pinnedAppInAppTileGroups$ | async)!!\"\n    [contentHeight]=\"contentHeight\"\n    (selectedAppGroupIdChange)=\"onSelectedAppGroupChange($event)\"\n    (pinClick)=\"onPinClick($event)\"\n>\n</bt-app-finder>\n", styles: [":host{display:block;min-height:100vh}\n"], dependencies: [{ 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.ɵ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: "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 });
 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\n    [appGroups]=\"(appGroups$ | async)!!\"\n    [selectedAppGroupId]=\"(selectedAppGroupId$ | async)!!\"\n    [selectedAppGroup]=\"(selectedAppGroup$ | async)!!\"\n    [mobile]=\"(mobile$ | async)!!\"\n    [sideContentSize]=\"(sideContentSize$ | async)!!\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    [contentDensity]=\"(contentDensity$ | async) ?? 'compact'\"\n    [pinnedAppInAppTileGroups]=\"(pinnedAppInAppTileGroups$ | async)!!\"\n    [contentHeight]=\"contentHeight\"\n    (selectedAppGroupIdChange)=\"onSelectedAppGroupChange($event)\"\n    (pinClick)=\"onPinClick($event)\"\n>\n</bt-app-finder>\n", styles: [":host{display:block;min-height:100vh}\n"] }]
+            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 }]; } });
 
 class FooterEditTileComponent extends BaseComponent {
@@ -2000,10 +2005,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    [editHome]=\"editHome\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\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", "disableClick"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], 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    [editHome]=\"editHome\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\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.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", "disableClick"] }, { 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: FeedTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-feed-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'feed'\"\n    [editHome]=\"editHome\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\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    [editHome]=\"editHome\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\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 {
@@ -2108,7 +2113,8 @@ class ShellbarComponent extends BaseComponent {
         this.cultures = BarsaApi.LoginFormData.Cultures;
         this.cssUrl$ = this._portalService.cssUrl$;
         this.cssCustomUrl$ = this._portalService.cssCustomUrl$;
-        this.notificationsCount$ = this._portalService.notificationsCount$.pipe();
+        this.notificationsCount$ = this._portalService.notificationsCount$;
+        this.notificationLoading$ = this._portalService.notificationLoading$;
         this.notifications$ = this._portalService.notifications$;
         BarsaApi.Bw.SetUserPortalSettings = (userPortalSettings) => {
             this._portalService.setUserPortalSettings(userPortalSettings);
@@ -2160,16 +2166,19 @@ class ShellbarComponent extends BaseComponent {
             }
         });
     }
+    onRemoveNotifiation(mo) {
+        this._portalService.removeNotification(mo);
+    }
     _changeCulture(culture /* culture sample :English */) {
         BarsaApi.Bw.SetCultureByDisplayName(culture);
         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: 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 }], 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\n        <fd-popover\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [closeOnOutsideClick]=\"true\"\n            [noArrow]=\"false\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"(notificationsCount$ | async)!!\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body>\n                <fd-notification\n                    *ngFor=\"let mo of notifications$ | async; let first = first; let last = last\"\n                    style=\"margin-bottom: 1px\"\n                    [style.border-bottom-left-radius]=\"!last ? 0 : null\"\n                    [style.border-bottom-right-radius]=\"!last ? 0 : null\"\n                    [style.border-top-right-radius]=\"!first ? 0 : null\"\n                    [style.border-top-left-radius]=\"!first ? 0 : null\"\n                >\n                    <fd-notification-body>\n                        <fd-avatar\n                            [circle]=\"true\"\n                            size=\"xs\"\n                            [glyph]=\"mo.Icon ? mo.Icon : 'bell'\"\n                            [image]=\"mo.Picture ? mo.Picture : null\"\n                        ></fd-avatar>\n                        <fd-notification-content style=\"min-width: 200px; overflow: hidden\">\n                            <fd-notification-header>\n                                <div fd-notification-indicator [type]=\"mo.Type\"></div>\n                                <h2 fd-notification-title [unread]=\"true\">{{ mo.Title }}</h2>\n                            </fd-notification-header>\n                            <p fd-notification-paragraph>\n                                {{ mo.Paragraph }}\n                            </p>\n                            <fd-notification-footer>\n                                <span fd-notification-footer-content>{{ mo.FirstFooterContent }}</span>\n                                <span fd-notification-separator></span>\n                                <span fd-notification-footer-content>{{ mo.SecondFooterContent }}</span>\n                            </fd-notification-footer>\n                        </fd-notification-content>\n                        <fd-notification-actions>\n                            <button\n                                *ngIf=\"mo.RelatedMo\"\n                                fd-button\n                                (click)=\"onNotificationRelatedClick(mo.RelatedMo, mo.NamaRelatedMo)\"\n                                [label]=\"'View' | bbbTranslate\"\n                                fdCompact\n                            ></button>\n                            <button\n                                fd-button\n                                fdType=\"transparent\"\n                                ariaLabel=\"Close\"\n                                glyph=\"decline\"\n                                title=\"close\"\n                                (click)=\"isOpenNotificatoin = false\"\n                                fdCompact\n                            ></button>\n                        </fd-notification-actions>\n                    </fd-notification-body>\n                </fd-notification>\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            >\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>{{ culture.value }} </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\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;font-size:.8rem}@media (max-width: 480px){.fd-shellbar__logo{min-height:1.5rem;height:1.5rem;width:1.5rem}}@media (min-width: 480px){.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}}\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: i4$2.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { 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: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.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: i9$1.NotificationComponent, selector: "fd-notification", inputs: ["width", "mobile"] }, { kind: "component", type: i9$1.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i9$1.NotificationFooterComponent, selector: "fd-notification-footer" }, { kind: "component", type: i9$1.NotificationBodyComponent, selector: "fd-notification-body" }, { kind: "component", type: i9$1.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i9$1.NotificationContentComponent, selector: "fd-notification-content" }, { kind: "directive", type: i9$1.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { kind: "directive", type: i9$1.NotificationIndicatorDirective, selector: "[fdNotificationIndicator], [fd-notification-indicator]", inputs: ["type", "class"] }, { kind: "directive", type: i9$1.NotificationParagraphDirective, selector: "[fdNotificationParagraph], [fd-notification-paragraph]" }, { kind: "directive", type: i9$1.NotificationFooterContentDirective, selector: "[fdNotificationFooterContent], [fd-notification-footer-content]" }, { kind: "directive", type: i9$1.NotificationSeparatorDirective, selector: "[fdNotificationSeparator], [fd-notification-separator]" }, { 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: "component", type: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { 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.ɵ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 }], 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\n        <fd-popover\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [closeOnOutsideClick]=\"true\"\n            [noArrow]=\"false\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"(notificationsCount$ | async)!!\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"max-height: 400px; overflow-x: auto\">\n                <div style=\"position: relative\">\n                    <bsu-mask *ngIf=\"notificationLoading$ | async\" size=\"s\"></bsu-mask>\n                    <fd-notification\n                        *ngFor=\"let mo of notifications$ | async; let first = first; let last = last\"\n                        style=\"margin-bottom: 1px\"\n                        [style.border-bottom-left-radius]=\"!last ? 0 : null\"\n                        [style.border-bottom-right-radius]=\"!last ? 0 : null\"\n                        [style.border-top-right-radius]=\"!first ? 0 : null\"\n                        [style.border-top-left-radius]=\"!first ? 0 : null\"\n                    >\n                        <fd-notification-body>\n                            <fd-avatar\n                                [circle]=\"true\"\n                                size=\"xs\"\n                                [glyph]=\"mo.Icon ? mo.Icon : 'bell'\"\n                                [image]=\"mo.Picture ? mo.Picture : null\"\n                            ></fd-avatar>\n                            <fd-notification-content style=\"min-width: 320px; overflow: hidden\">\n                                <fd-notification-header>\n                                    <div fd-notification-indicator [type]=\"mo.Type\"></div>\n                                    <h2 fd-notification-title [unread]=\"true\">{{ mo.Title }}</h2>\n                                </fd-notification-header>\n                                <p fd-notification-paragraph>\n                                    {{ mo.Paragraph }}\n                                </p>\n                                <fd-notification-footer>\n                                    <span fd-notification-footer-content>{{ mo.FirstFooterContent }}</span>\n                                    <span fd-notification-separator></span>\n                                    <span fd-notification-footer-content>{{ mo.SecondFooterContent }}</span>\n                                </fd-notification-footer>\n                            </fd-notification-content>\n                            <fd-notification-actions>\n                                <button\n                                    *ngIf=\"mo.RelatedMo\"\n                                    fd-button\n                                    (click)=\"onNotificationRelatedClick(mo.RelatedMo, mo.NamaRelatedMo)\"\n                                    [label]=\"'View' | bbbTranslate\"\n                                    fdCompact\n                                ></button>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    ariaLabel=\"Close\"\n                                    glyph=\"decline\"\n                                    title=\"close\"\n                                    (click)=\"onRemoveNotifiation(mo)\"\n                                    fdCompact\n                                ></button>\n                            </fd-notification-actions>\n                        </fd-notification-body>\n                    </fd-notification>\n                </div>\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            >\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>{{ culture.value }} </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { 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: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.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: i9$1.NotificationComponent, selector: "fd-notification", inputs: ["width", "mobile"] }, { kind: "component", type: i9$1.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i9$1.NotificationFooterComponent, selector: "fd-notification-footer" }, { kind: "component", type: i9$1.NotificationBodyComponent, selector: "fd-notification-body" }, { kind: "component", type: i9$1.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i9$1.NotificationContentComponent, selector: "fd-notification-content" }, { kind: "directive", type: i9$1.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { kind: "directive", type: i9$1.NotificationIndicatorDirective, selector: "[fdNotificationIndicator], [fd-notification-indicator]", inputs: ["type", "class"] }, { kind: "directive", type: i9$1.NotificationParagraphDirective, selector: "[fdNotificationParagraph], [fd-notification-paragraph]" }, { kind: "directive", type: i9$1.NotificationFooterContentDirective, selector: "[fdNotificationFooterContent], [fd-notification-footer-content]" }, { kind: "directive", type: i9$1.NotificationSeparatorDirective, selector: "[fdNotificationSeparator], [fd-notification-separator]" }, { 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: "component", type: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { 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 });
 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\n        <fd-popover\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [closeOnOutsideClick]=\"true\"\n            [noArrow]=\"false\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"(notificationsCount$ | async)!!\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body>\n                <fd-notification\n                    *ngFor=\"let mo of notifications$ | async; let first = first; let last = last\"\n                    style=\"margin-bottom: 1px\"\n                    [style.border-bottom-left-radius]=\"!last ? 0 : null\"\n                    [style.border-bottom-right-radius]=\"!last ? 0 : null\"\n                    [style.border-top-right-radius]=\"!first ? 0 : null\"\n                    [style.border-top-left-radius]=\"!first ? 0 : null\"\n                >\n                    <fd-notification-body>\n                        <fd-avatar\n                            [circle]=\"true\"\n                            size=\"xs\"\n                            [glyph]=\"mo.Icon ? mo.Icon : 'bell'\"\n                            [image]=\"mo.Picture ? mo.Picture : null\"\n                        ></fd-avatar>\n                        <fd-notification-content style=\"min-width: 200px; overflow: hidden\">\n                            <fd-notification-header>\n                                <div fd-notification-indicator [type]=\"mo.Type\"></div>\n                                <h2 fd-notification-title [unread]=\"true\">{{ mo.Title }}</h2>\n                            </fd-notification-header>\n                            <p fd-notification-paragraph>\n                                {{ mo.Paragraph }}\n                            </p>\n                            <fd-notification-footer>\n                                <span fd-notification-footer-content>{{ mo.FirstFooterContent }}</span>\n                                <span fd-notification-separator></span>\n                                <span fd-notification-footer-content>{{ mo.SecondFooterContent }}</span>\n                            </fd-notification-footer>\n                        </fd-notification-content>\n                        <fd-notification-actions>\n                            <button\n                                *ngIf=\"mo.RelatedMo\"\n                                fd-button\n                                (click)=\"onNotificationRelatedClick(mo.RelatedMo, mo.NamaRelatedMo)\"\n                                [label]=\"'View' | bbbTranslate\"\n                                fdCompact\n                            ></button>\n                            <button\n                                fd-button\n                                fdType=\"transparent\"\n                                ariaLabel=\"Close\"\n                                glyph=\"decline\"\n                                title=\"close\"\n                                (click)=\"isOpenNotificatoin = false\"\n                                fdCompact\n                            ></button>\n                        </fd-notification-actions>\n                    </fd-notification-body>\n                </fd-notification>\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            >\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>{{ culture.value }} </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\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;font-size:.8rem}@media (max-width: 480px){.fd-shellbar__logo{min-height:1.5rem;height:1.5rem;width:1.5rem}}@media (min-width: 480px){.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\">\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\n        <fd-popover\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [closeOnOutsideClick]=\"true\"\n            [noArrow]=\"false\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"(notificationsCount$ | async)!!\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"max-height: 400px; overflow-x: auto\">\n                <div style=\"position: relative\">\n                    <bsu-mask *ngIf=\"notificationLoading$ | async\" size=\"s\"></bsu-mask>\n                    <fd-notification\n                        *ngFor=\"let mo of notifications$ | async; let first = first; let last = last\"\n                        style=\"margin-bottom: 1px\"\n                        [style.border-bottom-left-radius]=\"!last ? 0 : null\"\n                        [style.border-bottom-right-radius]=\"!last ? 0 : null\"\n                        [style.border-top-right-radius]=\"!first ? 0 : null\"\n                        [style.border-top-left-radius]=\"!first ? 0 : null\"\n                    >\n                        <fd-notification-body>\n                            <fd-avatar\n                                [circle]=\"true\"\n                                size=\"xs\"\n                                [glyph]=\"mo.Icon ? mo.Icon : 'bell'\"\n                                [image]=\"mo.Picture ? mo.Picture : null\"\n                            ></fd-avatar>\n                            <fd-notification-content style=\"min-width: 320px; overflow: hidden\">\n                                <fd-notification-header>\n                                    <div fd-notification-indicator [type]=\"mo.Type\"></div>\n                                    <h2 fd-notification-title [unread]=\"true\">{{ mo.Title }}</h2>\n                                </fd-notification-header>\n                                <p fd-notification-paragraph>\n                                    {{ mo.Paragraph }}\n                                </p>\n                                <fd-notification-footer>\n                                    <span fd-notification-footer-content>{{ mo.FirstFooterContent }}</span>\n                                    <span fd-notification-separator></span>\n                                    <span fd-notification-footer-content>{{ mo.SecondFooterContent }}</span>\n                                </fd-notification-footer>\n                            </fd-notification-content>\n                            <fd-notification-actions>\n                                <button\n                                    *ngIf=\"mo.RelatedMo\"\n                                    fd-button\n                                    (click)=\"onNotificationRelatedClick(mo.RelatedMo, mo.NamaRelatedMo)\"\n                                    [label]=\"'View' | bbbTranslate\"\n                                    fdCompact\n                                ></button>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    ariaLabel=\"Close\"\n                                    glyph=\"decline\"\n                                    title=\"close\"\n                                    (click)=\"onRemoveNotifiation(mo)\"\n                                    fdCompact\n                                ></button>\n                            </fd-notification-actions>\n                        </fd-notification-body>\n                    </fd-notification>\n                </div>\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            >\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>{{ culture.value }} </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\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"] }]
         }], ctorParameters: function () {
         return [{ type: i1$2.PortalService }, { type: i1$2.BreadcrumbService }, { type: TilesService }, { type: i0.ChangeDetectorRef }, { type: i1$2.BbbTranslatePipe }, { type: undefined, decorators: [{
                         type: Inject,