barsa-tiles 1.0.251 → 1.0.253

package/fesm2015/barsa-tiles.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, Directive, Injectable, ViewChild, HostBinding, Inject, Pipe, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i1$2 from 'barsa-novin-ray-core';
-import { BaseComponent, BarsaApi, BaseDirective, APP_VERSION, BaseModule, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
+import { BaseComponent, BarsaApi, BaseDirective, IntersectionStatus, APP_VERSION, BaseModule, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@fundamental-ngx/core/tile';
@@ -21,32 +21,33 @@ import { takeUntil, startWith, shareReplay, distinctUntilChanged, filter, tap, c
 import * as i2$3 from '@fundamental-ngx/core/avatar';
 import * as i4$1 from '@fundamental-ngx/core/card';
 import * as i5$1 from '@fundamental-ngx/core/fixed-card-layout';
-import * as i7 from '@fundamental-ngx/core/list';
-import * as i5$2 from '@fundamental-ngx/platform/shared';
+import * as i5$2 from '@fundamental-ngx/core/list';
+import * as i5$3 from '@fundamental-ngx/platform/shared';
 import * as i6$1 from '@fundamental-ngx/platform/search-field';
 import { Subject, BehaviorSubject, of, from, interval, combineLatest, forkJoin } from 'rxjs';
 import * as i1$3 from '@angular/forms';
 import { UntypedFormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$4 from '@fundamental-ngx/core';
 import { TabListComponent, CarouselComponent, ComboboxComponent, FundamentalNgxCoreModule, GridListModule } from '@fundamental-ngx/core';
-import * as i5$3 from '@fundamental-ngx/core/bar';
+import * as i5$4 from '@fundamental-ngx/core/bar';
 import * as i6$2 from '@fundamental-ngx/core/form';
-import * as i7$1 from '@fundamental-ngx/core/input-group';
+import * as i7 from '@fundamental-ngx/core/input-group';
 import * as i8$1 from '@fundamental-ngx/core/dialog';
 import * as i10 from '@fundamental-ngx/core/utils';
-import * as i5$4 from '@fundamental-ngx/core/dynamic-page';
-import * as i7$2 from '@fundamental-ngx/core/switch';
+import * as i5$5 from '@fundamental-ngx/core/dynamic-page';
+import * as i7$1 from '@fundamental-ngx/core/switch';
 import * as i8$2 from '@fundamental-ngx/core/tabs';
 import * as i2$4 from 'barsa-echarts';
 import { BarsaEchartsModule } from 'barsa-echarts';
 import * as i3$2 from '@fundamental-ngx/core/carousel';
 import * as i6$3 from '@fundamental-ngx/core/checkbox';
 import { __awaiter } from 'tslib';
-import * as i4$2 from '@fundamental-ngx/core/content-density';
-import * as i9$1 from '@fundamental-ngx/core/notification';
-import * as i10$1 from '@fundamental-ngx/core/product-switch';
-import * as i11 from '@fundamental-ngx/core/popover';
-import * as i12 from '@fundamental-ngx/core/shellbar';
+import * as i3$4 from '@angular/platform-browser';
+import * as i7$2 from '@fundamental-ngx/core/product-switch';
+import * as i8$3 from '@fundamental-ngx/core/popover';
+import * as i9$1 from '@fundamental-ngx/core/shellbar';
+import * as i3$3 from '@fundamental-ngx/core/content-density';
+import * as i6$4 from '@fundamental-ngx/core/notification';
 import { CdkTableModule } from '@angular/cdk/table';
 import { FundamentalNgxPlatformModule } from '@fundamental-ngx/platform';
 
@@ -434,7 +435,7 @@ 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\">\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 });
+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: i5$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i5$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i5$2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i3.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AppFinderGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-app-finder-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"listMode; else menuTpl\">\r\n    <div class=\"app-groups\">\r\n        <ul fd-list [selection]=\"true\">\r\n            <li\r\n                fd-list-item\r\n                *ngFor=\"let group of appGroups; let i = index\"\r\n                [selected]=\"group.Id === selectedId\"\r\n                (click)=\"OnGroupClick(group)\"\r\n            >\r\n                <span fd-list-title>\r\n                    {{ group.Title }}\r\n                </span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-container>\r\n<ng-template #menuTpl>\r\n    <li *ngFor=\"let group of appGroups; let i = index\" fd-menu-item [selected]=\"group.Id === selectedId\">\r\n        <a fd-menu-interactive (click)=\"OnMenuGroupClick(group)\">\r\n            <span fd-menu-title>\r\n                {{ group.Title }}\r\n            </span>\r\n        </a>\r\n    </li>\r\n</ng-template>\r\n", styles: [".app-groups{width:25vw;border-left:.0625rem solid var(--sapGroup_TitleBorderColor, #d9d9d9)}\n"] }]
@@ -460,7 +461,7 @@ 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\">\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 });
+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$3.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\">\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"] }]
@@ -515,7 +516,7 @@ class ChangeAppTileComponent extends BaseComponent {
     }
 }
 ChangeAppTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChangeAppTileComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i1$4.DialogRef }, { token: i1$2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-ChangeAppTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ChangeAppTileComponent, selector: "bt-change-app-tile", usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.$Caption }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body [formGroup]=\"appGroupForm\">\r\n        <div fd-form-item>\r\n            <label fd-form-label [required]=\"true\">{{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n        <br />\r\n        <div fd-form-item>\r\n            <label fd-form-label>{{ 'Subtitle' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group formControlName=\"subtitle\" form-control [button]=\"true\" [(ngModel)]=\"subtitle\">\r\n                </fd-input-group>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.close()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { 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: i6$2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i6$2.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i7$1.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChangeAppTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ChangeAppTileComponent, selector: "bt-change-app-tile", usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.$Caption }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body [formGroup]=\"appGroupForm\">\r\n        <div fd-form-item>\r\n            <label fd-form-label [required]=\"true\">{{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n        <br />\r\n        <div fd-form-item>\r\n            <label fd-form-label>{{ 'Subtitle' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group formControlName=\"subtitle\" form-control [button]=\"true\" [(ngModel)]=\"subtitle\">\r\n                </fd-input-group>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.close()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { 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: i6$2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i6$2.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChangeAppTileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-change-app-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.$Caption }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body [formGroup]=\"appGroupForm\">\r\n        <div fd-form-item>\r\n            <label fd-form-label [required]=\"true\">{{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n        <br />\r\n        <div fd-form-item>\r\n            <label fd-form-label>{{ 'Subtitle' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group formControlName=\"subtitle\" form-control [button]=\"true\" [(ngModel)]=\"subtitle\">\r\n                </fd-input-group>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.close()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n" }]
@@ -1201,7 +1202,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", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TilesViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", 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$4.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i5$4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5$4.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$5.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i5$5.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i5$5.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i5$5.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i5$5.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i5$5.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$1.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "disabled", "id", "name", "required", "checked", "semantic", "ariaLabel", "ariaLabelledby", "ariaLabelledBy", "semanticAcceptLabel", "semanticDeclineLabel"], outputs: ["checkedChange"] }, { kind: "component", type: i8$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i8$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i4.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: 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"] }]
@@ -1625,7 +1626,7 @@ class CreateAppGroupComponent extends BaseComponent {
     }
 }
 CreateAppGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CreateAppGroupComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i1$4.DialogRef }, { token: i1$2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-CreateAppGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CreateAppGroupComponent, selector: "bt-create-app-group", usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.title }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n\r\n    <fd-dialog-body>\r\n        <div fd-form-item [formGroup]=\"appGroupForm\">\r\n            <label fd-form-label [required]=\"true\"> {{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.dismiss()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { 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: i6$2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i6$2.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i7$1.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CreateAppGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CreateAppGroupComponent, selector: "bt-create-app-group", usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.title }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n\r\n    <fd-dialog-body>\r\n        <div fd-form-item [formGroup]=\"appGroupForm\">\r\n            <label fd-form-label [required]=\"true\"> {{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.dismiss()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { 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: i6$2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i6$2.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CreateAppGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-create-app-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ dialogRef.data.title }}</h1>\r\n        <button fd-dialog-close-button (click)=\"dialogRef.dismiss()\"></button>\r\n    </fd-dialog-header>\r\n\r\n    <fd-dialog-body>\r\n        <div fd-form-item [formGroup]=\"appGroupForm\">\r\n            <label fd-form-label [required]=\"true\"> {{ 'Title' | bbbTranslate }}</label>\r\n            <fd-form-input-message-group>\r\n                <fd-input-group\r\n                    class=\"form-control\"\r\n                    formControlName=\"title\"\r\n                    form-control\r\n                    [button]=\"true\"\r\n                    [(ngModel)]=\"title\"\r\n                    [state]=\"submitted && appGroupForm.controls.title.errors ? 'error' : 'information'\"\r\n                >\r\n                </fd-input-group>\r\n                <fd-form-message *ngIf=\"submitted && appGroupForm.controls.title.errors\" type=\"error\">\r\n                    {{ RequiredText }}\r\n                </fd-form-message>\r\n            </fd-form-input-message-group>\r\n        </div>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <fd-button-bar [label]=\"'Save' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onSave()\"> </fd-button-bar>\r\n        <fd-button-bar\r\n            [label]=\"'Cancel' | bbbTranslate\"\r\n            fdInitialFocus\r\n            fdType=\"transparent\"\r\n            (click)=\"this.dialogRef.dismiss()\"\r\n        >\r\n        </fd-button-bar>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n" }]
@@ -1715,7 +1716,7 @@ class PinTileComponent extends BaseComponent {
     }
 }
 PinTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PinTileComponent, deps: [{ token: i1$4.DialogService }, { token: i1$4.DialogRef }, { token: i1$2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-PinTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PinTileComponent, selector: "bt-pin-tile", inputs: { app: "app", appTileGroups: "appTileGroups", mobile: "mobile", pin: "pin" }, usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ 'AddToList' | bbbTranslate }}</h1>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body>\r\n        <ul fd-list [navigationIndicator]=\"true\" style=\"margin-bottom: 1rem\">\r\n            <li fd-list-item [navigationIndicator]=\"true\" (click)=\"onNewGroup()\">\r\n                <fd-icon glyph=\"add\"></fd-icon><span fd-list-title>{{ newGroupText }}</span>\r\n            </li>\r\n            <ng-container *ngFor=\"let appTileGroup of appTileGroups\">\r\n                <li *ngIf=\"!appTileGroup.$Disabledpin\" fd-list-item [selected]=\"appTileGroup.$PinTile\">\r\n                    <fd-checkbox [(ngModel)]=\"appTileGroup.$PinTile\"></fd-checkbox>\r\n                    <span fd-list-title>{{ appTileGroup.navigatorTitle || appTileGroup.Title }}</span>\r\n                </li>\r\n                <ng-container *ngFor=\"let subGroup of appTileGroup.$Children\">\r\n                    <li *ngIf=\"!subGroup.$Disabledpin\" fd-list-item [selected]=\"subGroup.$PinTile\">\r\n                        <fd-checkbox [(ngModel)]=\"subGroup.$PinTile\"></fd-checkbox>\r\n                        <span fd-list-title>{{ subGroup.navigatorTitle || subGroup.Title }}</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <ng-template fdTemplate=\"footer\">\r\n            <div fd-bar-left></div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar fd-initial-focus fdType=\"emphasized\" [label]=\"'OK' | bbbTranslate\" (click)=\"onAccept()\">\r\n                </fd-button-bar>\r\n                <fd-button-bar\r\n                    fd-initial-focus\r\n                    fdType=\"transparent\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                    (click)=\"onClose()\"\r\n                >\r\n                </fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [":host ::ng-deep .cdk-drag{cursor:default!important}:host *{cursor:default!important}li{cursor:pointer}fd-dialog-body,fd-dialog-footer,fd-dialog-header{cursor:default}fd-icon{padding:0 5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$3.BarLeftDirective, selector: "[fd-bar-left]" }, { 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: i6$3.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: 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: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PinTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PinTileComponent, selector: "bt-pin-tile", inputs: { app: "app", appTileGroups: "appTileGroups", mobile: "mobile", pin: "pin" }, usesInheritance: true, ngImport: i0, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ 'AddToList' | bbbTranslate }}</h1>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body>\r\n        <ul fd-list [navigationIndicator]=\"true\" style=\"margin-bottom: 1rem\">\r\n            <li fd-list-item [navigationIndicator]=\"true\" (click)=\"onNewGroup()\">\r\n                <fd-icon glyph=\"add\"></fd-icon><span fd-list-title>{{ newGroupText }}</span>\r\n            </li>\r\n            <ng-container *ngFor=\"let appTileGroup of appTileGroups\">\r\n                <li *ngIf=\"!appTileGroup.$Disabledpin\" fd-list-item [selected]=\"appTileGroup.$PinTile\">\r\n                    <fd-checkbox [(ngModel)]=\"appTileGroup.$PinTile\"></fd-checkbox>\r\n                    <span fd-list-title>{{ appTileGroup.navigatorTitle || appTileGroup.Title }}</span>\r\n                </li>\r\n                <ng-container *ngFor=\"let subGroup of appTileGroup.$Children\">\r\n                    <li *ngIf=\"!subGroup.$Disabledpin\" fd-list-item [selected]=\"subGroup.$PinTile\">\r\n                        <fd-checkbox [(ngModel)]=\"subGroup.$PinTile\"></fd-checkbox>\r\n                        <span fd-list-title>{{ subGroup.navigatorTitle || subGroup.Title }}</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <ng-template fdTemplate=\"footer\">\r\n            <div fd-bar-left></div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar fd-initial-focus fdType=\"emphasized\" [label]=\"'OK' | bbbTranslate\" (click)=\"onAccept()\">\r\n                </fd-button-bar>\r\n                <fd-button-bar\r\n                    fd-initial-focus\r\n                    fdType=\"transparent\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                    (click)=\"onClose()\"\r\n                >\r\n                </fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [":host ::ng-deep .cdk-drag{cursor:default!important}:host *{cursor:default!important}li{cursor:pointer}fd-dialog-body,fd-dialog-footer,fd-dialog-header{cursor:default}fd-icon{padding:0 5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i5$4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5$4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i6$3.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i5$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i5$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i5$2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i10.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "directive", type: i10.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PinTileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-pin-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog>\r\n    <fd-dialog-header>\r\n        <h1 fd-title>{{ 'AddToList' | bbbTranslate }}</h1>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body>\r\n        <ul fd-list [navigationIndicator]=\"true\" style=\"margin-bottom: 1rem\">\r\n            <li fd-list-item [navigationIndicator]=\"true\" (click)=\"onNewGroup()\">\r\n                <fd-icon glyph=\"add\"></fd-icon><span fd-list-title>{{ newGroupText }}</span>\r\n            </li>\r\n            <ng-container *ngFor=\"let appTileGroup of appTileGroups\">\r\n                <li *ngIf=\"!appTileGroup.$Disabledpin\" fd-list-item [selected]=\"appTileGroup.$PinTile\">\r\n                    <fd-checkbox [(ngModel)]=\"appTileGroup.$PinTile\"></fd-checkbox>\r\n                    <span fd-list-title>{{ appTileGroup.navigatorTitle || appTileGroup.Title }}</span>\r\n                </li>\r\n                <ng-container *ngFor=\"let subGroup of appTileGroup.$Children\">\r\n                    <li *ngIf=\"!subGroup.$Disabledpin\" fd-list-item [selected]=\"subGroup.$PinTile\">\r\n                        <fd-checkbox [(ngModel)]=\"subGroup.$PinTile\"></fd-checkbox>\r\n                        <span fd-list-title>{{ subGroup.navigatorTitle || subGroup.Title }}</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </fd-dialog-body>\r\n\r\n    <fd-dialog-footer>\r\n        <ng-template fdTemplate=\"footer\">\r\n            <div fd-bar-left></div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar fd-initial-focus fdType=\"emphasized\" [label]=\"'OK' | bbbTranslate\" (click)=\"onAccept()\">\r\n                </fd-button-bar>\r\n                <fd-button-bar\r\n                    fd-initial-focus\r\n                    fdType=\"transparent\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                    (click)=\"onClose()\"\r\n                >\r\n                </fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-footer>\r\n</fd-dialog>\r\n", styles: [":host ::ng-deep .cdk-drag{cursor:default!important}:host *{cursor:default!important}li{cursor:pointer}fd-dialog-body,fd-dialog-footer,fd-dialog-header{cursor:default}fd-icon{padding:0 5px}\n"] }]
@@ -2037,14 +2038,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
             args: [{ selector: 'bt-profile-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [editHome]=\"editHome\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n>\r\n    <div fd-tile-content>\r\n        <span\r\n            *ngIf=\"fileId; else showIcon\"\r\n            class=\"profile\"\r\n            fd-tile-profile-img\r\n            [backgroundImage]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\"\r\n        ></span>\r\n        <ng-template #showIcon>\r\n            <fd-icon\r\n                *ngIf=\"settings.Icon; else avatar\"\r\n                [font]=\"settings.Icon | sapFont\"\r\n                fd-tile-profile-img\r\n                style=\"font-size: 2rem\"\r\n                [glyph]=\"settings.Icon\"\r\n            ></fd-icon>\r\n        </ng-template>\r\n        <ng-template #avatar>\r\n            <fd-icon font=\"SAP-icons-TNT\" fd-tile-profile-img style=\"font-size: 2rem\" glyph=\"user\"></fd-icon>\r\n        </ng-template>\r\n    </div>\r\n</bt-tile>\r\n", styles: [".profile{background-size:contain;background-repeat:no-repeat}\n"] }]
         }] });
 
+class NotificationGroupHeaderComponent extends BaseComponent {
+    constructor(_cdr) {
+        super();
+        this._cdr = _cdr;
+        this.unreadCount = 0;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.setUnreadCount(this.notifications);
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const { notifications } = changes;
+        if (notifications && !notifications.firstChange) {
+            this.setUnreadCount(notifications.currentValue);
+            this._cdr.detectChanges();
+        }
+    }
+    setUnreadCount(notifications) {
+        this.unreadCount = notifications.filter((c) => c.Unread).length;
+    }
+}
+NotificationGroupHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NotificationGroupHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NotificationGroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NotificationGroupHeaderComponent, selector: "bt-notification-group-header", inputs: { notifications: "notifications", title: "title" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<h2 fd-notification-title [unread]=\"false\">\r\n    {{ title | bbbTranslate }} ({{ notifications.length }})\r\n    <strong *ngIf=\"unreadCount !== 0\">{{ 'New' | bbbTranslate }} ({{ unreadCount }})</strong>\r\n</h2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$4.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { 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: NotificationGroupHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-notification-group-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h2 fd-notification-title [unread]=\"false\">\r\n    {{ title | bbbTranslate }} ({{ notifications.length }})\r\n    <strong *ngIf=\"unreadCount !== 0\">{{ 'New' | bbbTranslate }} ({{ unreadCount }})</strong>\r\n</h2>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { notifications: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class NotificationGroupComponent extends BaseComponent {
+    constructor(_groupByPipe) {
+        super();
+        this._groupByPipe = _groupByPipe;
+        this.viewed = new EventEmitter();
+        this.remove = new EventEmitter();
+        this.actionClick = new EventEmitter();
+        this.show = new EventEmitter();
+        this.loadMore = new EventEmitter();
+        this.expanded = {};
+        this.tabList = [
+            { title: 'By Date', groupByItems: [] },
+            { title: 'By Type', groupByItems: [] },
+            { title: 'By Priority', groupByItems: [] }
+        ];
+        this.viewedNotifications = [];
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.applyGroupByItems(this.notifications);
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const { notifications } = changes;
+        if (notifications && !notifications.firstChange) {
+            this.applyGroupByItems(notifications.currentValue);
+        }
+    }
+    applyGroupByItems(notifications) {
+        if (!(notifications === null || notifications === void 0 ? void 0 : notifications.length)) {
+            return;
+        }
+        this.tabList[0].groupByItems = this._groupByPipe.transform(notifications, 'CreationDate');
+        this.tabList[1].groupByItems = this._groupByPipe.transform(notifications, 'Subject');
+        this.tabList[2].groupByItems = this._groupByPipe.transform(notifications, 'Priority');
+    }
+    _trackByTitle(_index, tab) {
+        return tab.title;
+    }
+    _trackByKey(_index, item) {
+        return item.key;
+    }
+    _trackMoById(_index, mo) {
+        return mo.Id;
+    }
+    onVisibilityChange(e, mo, isLast) {
+        console.log(e, this.viewedNotifications);
+        if (e === IntersectionStatus.Visible) {
+            if (mo.Unread) {
+                this.viewedNotifications = [...this.viewedNotifications.filter((c) => c.Unread), mo];
+                this.viewed.emit(this.viewedNotifications);
+            }
+            if (isLast) {
+                this.loadMore.emit();
+            }
+        }
+    }
+}
+NotificationGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NotificationGroupComponent, deps: [{ token: i1$2.GroupByPipe }], target: i0.ɵɵFactoryTarget.Component });
+NotificationGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: { notifications: "notifications", loading: "loading", notificationCount: "notificationCount" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", show: "show", loadMore: "loadMore" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"notifications && notifications.length > 0; else noData\">\r\n    <ng-container>\r\n        <fd-notification-group width=\"40rem\" style=\"display: block\">\r\n            <fd-tab-list size=\"s\">\r\n                <fd-tab [title]=\"tab.title\" *ngFor=\"let tab of tabList; let index = index; trackBy: _trackByTitle\">\r\n                    <fd-notification-group-list\r\n                        *ngFor=\"let groupItem of tab.groupByItems; let index = index; trackBy: _trackByKey\"\r\n                    >\r\n                        <fd-notification-group-header [(expanded)]=\"expanded[groupItem.key]\">\r\n                            <fd-notification-header>\r\n                                <bt-notification-group-header\r\n                                    [notifications]=\"groupItem.value\"\r\n                                    [title]=\"groupItem.key\"\r\n                                ></bt-notification-group-header>\r\n                            </fd-notification-header>\r\n                            <fd-notification-actions>\r\n                                <!-- <button fd-button label=\"Accept All\"></button> -->\r\n                                <button\r\n                                    fd-button\r\n                                    fdType=\"transparent\"\r\n                                    ariaLabel=\"Close\"\r\n                                    glyph=\"decline\"\r\n                                    title=\"close\"\r\n                                    (click)=\"remove.emit(groupItem.value)\"\r\n                                ></button>\r\n                            </fd-notification-actions>\r\n                        </fd-notification-group-header>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"notificationBody; context: { $implicit: groupItem.value }\"\r\n                        ></ng-container>\r\n                        <!-- <fd-notification-limit *ngIf=\"groupItem.value.length - 4 > 0\">\r\n                            <h1 fd-notification-limit-title>\r\n                                There are {{ groupItem.value.length - 4 }} more notifications\r\n                            </h1>\r\n                            <p fd-notification-limit-description>\r\n                                You need to close or take action on the listed notifications to display more.\r\n                            </p>\r\n                        </fd-notification-limit> -->\r\n                    </fd-notification-group-list>\r\n                </fd-tab>\r\n            </fd-tab-list>\r\n        </fd-notification-group>\r\n    </ng-container>\r\n</ng-container>\r\n<ng-template #noData>\r\n    <bsu-no-data *ngIf=\"!loading; else loadingTpl\"></bsu-no-data>\r\n</ng-template>\r\n<ng-template #loadingTpl>\r\n    <div style=\"height: 30px; position: relative\">\r\n        <bsu-mask [marginTop]=\"'10px'\"></bsu-mask>\r\n    </div>\r\n</ng-template>\r\n<ng-template #notificationItem> </ng-template>\r\n\r\n<ng-template #notificationBody let-notifications>\r\n    <div style=\"max-height: 346px; overflow: auto\">\r\n        <fd-notification *ngFor=\"let mo of notifications; trackBy: _trackMoById; let first = first; let last = last\">\r\n            <fd-notification-body>\r\n                <ng-container *ngIf=\"mo.$NotificatoinLoading\">\r\n                    <bsu-mask [marginTop]=\"'10px'\"></bsu-mask>\r\n                </ng-container>\r\n\r\n                <fd-avatar\r\n                    [circle]=\"true\"\r\n                    size=\"xs\"\r\n                    [glyph]=\"mo.Icon ? mo.Icon : 'bell'\"\r\n                    [image]=\"mo.Picture ? mo.Picture : null\"\r\n                ></fd-avatar>\r\n                <fd-notification-content style=\"min-width: 320px; overflow: hidden\">\r\n                    <fd-notification-header>\r\n                        <div fd-notification-indicator [type]=\"mo.Status$Caption\"></div>\r\n                        <h2 fd-notification-title [unread]=\"mo.Unread\">{{ mo.Title }}</h2>\r\n                    </fd-notification-header>\r\n                    <p\r\n                        #content\r\n                        fd-notification-paragraph\r\n                        intersectionObserver\r\n                        [intersectionThreshold]=\"0.1\"\r\n                        (visibilityChange)=\"onVisibilityChange($event, mo, last)\"\r\n                    >\r\n                        {{ mo.IMessage?.Content }}\r\n                    </p>\r\n                    <fd-notification-footer>\r\n                        <span fd-notification-footer-content>{{ mo.IMessage?.CreatorUser$Caption }}</span>\r\n                        <span fd-notification-separator></span>\r\n                        <span fd-notification-footer-content>{{ mo.IMessage?.CreationDate$Caption }}</span>\r\n                    </fd-notification-footer>\r\n                </fd-notification-content>\r\n                <fd-notification-actions>\r\n                    <button\r\n                        *ngFor=\"let btn of mo.Actions?.MoDataList\"\r\n                        [dynCommand]=\"btn\"\r\n                        [mo]=\"mo.RelatedMo\"\r\n                        fd-button\r\n                        [label]=\"btn.$Caption | bbbTranslate\"\r\n                        fdCompact\r\n                        (click)=\"actionClick.emit(btn)\"\r\n                    ></button>\r\n                    <!-- <button\r\n                        *ngIf=\"mo.RelatedMo\"\r\n                        fd-button\r\n                        (click)=\"show.emit({ mo: mo.RelatedMo, nama: mo.NamaRelatedMo })\"\r\n                        [label]=\"'View' | bbbTranslate\"\r\n                        fdCompact\r\n                    ></button> -->\r\n                    <button\r\n                        fd-button\r\n                        fdType=\"transparent\"\r\n                        ariaLabel=\"Close\"\r\n                        glyph=\"decline\"\r\n                        title=\"close\"\r\n                        (click)=\"remove.emit([mo])\"\r\n                        fdCompact\r\n                    ></button>\r\n                </fd-notification-actions>\r\n            </fd-notification-body>\r\n        </fd-notification>\r\n        <ng-container *ngIf=\"loading\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-tabs__content{overflow:hidden}:host ::ng-deep .fd-notification{padding:0;box-shadow:none}fd-notification{margin:0}fd-notification-body{position:relative}.noloading{visibility:hidden;height:0;width:0}.loading{visibility:visible;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$3.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: i6$4.NotificationComponent, selector: "fd-notification", inputs: ["width", "mobile"] }, { kind: "component", type: i6$4.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i6$4.NotificationFooterComponent, selector: "fd-notification-footer" }, { kind: "component", type: i6$4.NotificationBodyComponent, selector: "fd-notification-body" }, { kind: "component", type: i6$4.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i6$4.NotificationContentComponent, selector: "fd-notification-content" }, { kind: "component", type: i6$4.NotificationGroupHeaderComponent, selector: "fd-notification-group-header", inputs: ["expandCompact", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: i6$4.NotificationGroupComponent, selector: "fd-notification-group", inputs: ["class", "mobile", "width"] }, { kind: "component", type: i6$4.NotificationGroupListComponent, selector: "fd-notification-group-list" }, { kind: "directive", type: i6$4.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { kind: "directive", type: i6$4.NotificationIndicatorDirective, selector: "[fdNotificationIndicator], [fd-notification-indicator]", inputs: ["type", "class"] }, { kind: "directive", type: i6$4.NotificationParagraphDirective, selector: "[fdNotificationParagraph], [fd-notification-paragraph]" }, { kind: "directive", type: i6$4.NotificationFooterContentDirective, selector: "[fdNotificationFooterContent], [fd-notification-footer-content]" }, { kind: "directive", type: i6$4.NotificationSeparatorDirective, selector: "[fdNotificationSeparator], [fd-notification-separator]" }, { kind: "component", type: i8$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i8$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "directive", type: i1$2.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: i1$2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "component", type: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "component", type: i5.NoDataComponent, selector: "bsu-no-data" }, { kind: "component", type: NotificationGroupHeaderComponent, selector: "bt-notification-group-header", inputs: ["notifications", "title"] }, { 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: NotificationGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-notification-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"notifications && notifications.length > 0; else noData\">\r\n    <ng-container>\r\n        <fd-notification-group width=\"40rem\" style=\"display: block\">\r\n            <fd-tab-list size=\"s\">\r\n                <fd-tab [title]=\"tab.title\" *ngFor=\"let tab of tabList; let index = index; trackBy: _trackByTitle\">\r\n                    <fd-notification-group-list\r\n                        *ngFor=\"let groupItem of tab.groupByItems; let index = index; trackBy: _trackByKey\"\r\n                    >\r\n                        <fd-notification-group-header [(expanded)]=\"expanded[groupItem.key]\">\r\n                            <fd-notification-header>\r\n                                <bt-notification-group-header\r\n                                    [notifications]=\"groupItem.value\"\r\n                                    [title]=\"groupItem.key\"\r\n                                ></bt-notification-group-header>\r\n                            </fd-notification-header>\r\n                            <fd-notification-actions>\r\n                                <!-- <button fd-button label=\"Accept All\"></button> -->\r\n                                <button\r\n                                    fd-button\r\n                                    fdType=\"transparent\"\r\n                                    ariaLabel=\"Close\"\r\n                                    glyph=\"decline\"\r\n                                    title=\"close\"\r\n                                    (click)=\"remove.emit(groupItem.value)\"\r\n                                ></button>\r\n                            </fd-notification-actions>\r\n                        </fd-notification-group-header>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"notificationBody; context: { $implicit: groupItem.value }\"\r\n                        ></ng-container>\r\n                        <!-- <fd-notification-limit *ngIf=\"groupItem.value.length - 4 > 0\">\r\n                            <h1 fd-notification-limit-title>\r\n                                There are {{ groupItem.value.length - 4 }} more notifications\r\n                            </h1>\r\n                            <p fd-notification-limit-description>\r\n                                You need to close or take action on the listed notifications to display more.\r\n                            </p>\r\n                        </fd-notification-limit> -->\r\n                    </fd-notification-group-list>\r\n                </fd-tab>\r\n            </fd-tab-list>\r\n        </fd-notification-group>\r\n    </ng-container>\r\n</ng-container>\r\n<ng-template #noData>\r\n    <bsu-no-data *ngIf=\"!loading; else loadingTpl\"></bsu-no-data>\r\n</ng-template>\r\n<ng-template #loadingTpl>\r\n    <div style=\"height: 30px; position: relative\">\r\n        <bsu-mask [marginTop]=\"'10px'\"></bsu-mask>\r\n    </div>\r\n</ng-template>\r\n<ng-template #notificationItem> </ng-template>\r\n\r\n<ng-template #notificationBody let-notifications>\r\n    <div style=\"max-height: 346px; overflow: auto\">\r\n        <fd-notification *ngFor=\"let mo of notifications; trackBy: _trackMoById; let first = first; let last = last\">\r\n            <fd-notification-body>\r\n                <ng-container *ngIf=\"mo.$NotificatoinLoading\">\r\n                    <bsu-mask [marginTop]=\"'10px'\"></bsu-mask>\r\n                </ng-container>\r\n\r\n                <fd-avatar\r\n                    [circle]=\"true\"\r\n                    size=\"xs\"\r\n                    [glyph]=\"mo.Icon ? mo.Icon : 'bell'\"\r\n                    [image]=\"mo.Picture ? mo.Picture : null\"\r\n                ></fd-avatar>\r\n                <fd-notification-content style=\"min-width: 320px; overflow: hidden\">\r\n                    <fd-notification-header>\r\n                        <div fd-notification-indicator [type]=\"mo.Status$Caption\"></div>\r\n                        <h2 fd-notification-title [unread]=\"mo.Unread\">{{ mo.Title }}</h2>\r\n                    </fd-notification-header>\r\n                    <p\r\n                        #content\r\n                        fd-notification-paragraph\r\n                        intersectionObserver\r\n                        [intersectionThreshold]=\"0.1\"\r\n                        (visibilityChange)=\"onVisibilityChange($event, mo, last)\"\r\n                    >\r\n                        {{ mo.IMessage?.Content }}\r\n                    </p>\r\n                    <fd-notification-footer>\r\n                        <span fd-notification-footer-content>{{ mo.IMessage?.CreatorUser$Caption }}</span>\r\n                        <span fd-notification-separator></span>\r\n                        <span fd-notification-footer-content>{{ mo.IMessage?.CreationDate$Caption }}</span>\r\n                    </fd-notification-footer>\r\n                </fd-notification-content>\r\n                <fd-notification-actions>\r\n                    <button\r\n                        *ngFor=\"let btn of mo.Actions?.MoDataList\"\r\n                        [dynCommand]=\"btn\"\r\n                        [mo]=\"mo.RelatedMo\"\r\n                        fd-button\r\n                        [label]=\"btn.$Caption | bbbTranslate\"\r\n                        fdCompact\r\n                        (click)=\"actionClick.emit(btn)\"\r\n                    ></button>\r\n                    <!-- <button\r\n                        *ngIf=\"mo.RelatedMo\"\r\n                        fd-button\r\n                        (click)=\"show.emit({ mo: mo.RelatedMo, nama: mo.NamaRelatedMo })\"\r\n                        [label]=\"'View' | bbbTranslate\"\r\n                        fdCompact\r\n                    ></button> -->\r\n                    <button\r\n                        fd-button\r\n                        fdType=\"transparent\"\r\n                        ariaLabel=\"Close\"\r\n                        glyph=\"decline\"\r\n                        title=\"close\"\r\n                        (click)=\"remove.emit([mo])\"\r\n                        fdCompact\r\n                    ></button>\r\n                </fd-notification-actions>\r\n            </fd-notification-body>\r\n        </fd-notification>\r\n        <ng-container *ngIf=\"loading\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-tabs__content{overflow:hidden}:host ::ng-deep .fd-notification{padding:0;box-shadow:none}fd-notification{margin:0}fd-notification-body{position:relative}.noloading{visibility:hidden;height:0;width:0}.loading{visibility:visible;height:100%;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.GroupByPipe }]; }, propDecorators: { notifications: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], notificationCount: [{
+                type: Input
+            }], viewed: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], actionClick: [{
+                type: Output
+            }], show: [{
+                type: Output
+            }], loadMore: [{
+                type: Output
+            }] } });
+
 class ShellbarComponent extends BaseComponent {
-    constructor(_portalService, _breadCrumbService, _tilesService, _cdr, _bbbTranslatePipe, appVersion) {
+    constructor(_portalService, _breadCrumbService, _tilesService, _cdr, _bbbTranslatePipe, _domSanitizer, _notificationService, appVersion) {
         super();
         this._portalService = _portalService;
         this._breadCrumbService = _breadCrumbService;
         this._tilesService = _tilesService;
         this._cdr = _cdr;
         this._bbbTranslatePipe = _bbbTranslatePipe;
+        this._domSanitizer = _domSanitizer;
+        this._notificationService = _notificationService;
         this.appVersion = appVersion;
         this.isOpenNotificatoin = false;
         this.deviceSize = 'xl';
@@ -2055,9 +2172,16 @@ class ShellbarComponent extends BaseComponent {
         this.searchTerms = ['مرخصی', 'ماموریت', 'تیکت', 'پروژه'];
         this.allowAnonymous = true;
         this.showVersion = false;
+        this.notifcationLoaded = false;
+        this.viewedNotifications$ = new Subject();
         this.onOpenNotification = () => {
             this.isOpenNotificatoin = true;
-            this._portalService.loadNotifications();
+            if (this.notifcationLoaded) {
+                this._notificationService.loadNewNotifications();
+                return;
+            }
+            this.notifcationLoaded = true;
+            this._notificationService.loadNotifications();
         };
         this.onLanguage = (e) => {
             const culture = e.currentTarget.textContent.trim();
@@ -2065,6 +2189,11 @@ class ShellbarComponent extends BaseComponent {
         };
         this.userLoggedIn$ = this._portalService.userLoggedIn$;
         this.showVersion = !BarsaApi.LoginFormData.IsServiceDesk;
+        this.viewedNotifications$
+            .pipe(takeUntil(this._onDestroy$), debounceTime(1000), map((items) => items.map((item) => item.Id)))
+            .subscribe((items) => {
+            this._notificationService.setNotificationViewed(items);
+        });
     }
     get subtitle() {
         var _a, _b, _c;
@@ -2114,9 +2243,9 @@ class ShellbarComponent extends BaseComponent {
         this.cultures = BarsaApi.LoginFormData.Cultures;
         this.cssUrl$ = this._portalService.cssUrl$;
         this.cssCustomUrl$ = this._portalService.cssCustomUrl$;
-        this.notificationsCount$ = this._portalService.notificationCount$;
-        this.notificationLoading$ = this._portalService.notificationLoading$;
-        this.notifications$ = this._portalService.notifications$;
+        this.notificationsCount$ = this._notificationService.notificationCount$;
+        this.notificationLoading$ = this._notificationService.notificationLoading$;
+        this.notifications$ = this._notificationService.notifications$.pipe(takeUntil(this._onDestroy$), map((notifications) => this._mapNotifications(notifications)));
         BarsaApi.Bw.SetUserPortalSettings = (userPortalSettings) => {
             this._portalService.setUserPortalSettings(userPortalSettings);
         };
@@ -2155,45 +2284,63 @@ class ShellbarComponent extends BaseComponent {
                 return;
             }
             this._tilesService.loadShellbar();
-            this._portalService.loadNotificationCount();
+            this._notificationService.loadUnreadNotificationCount();
         });
     }
     onCultureChange(culture) {
         this._changeCulture(culture);
     }
-    onNotificationRelatedClick(mo, nama) {
+    onShowNotification(e) {
         this.isOpenNotificatoin = false;
         BarsaApi.Bw.Form.Show({
-            Mo: mo,
+            Mo: e.mo,
             MoContext: {
-                ViewName: nama
+                ViewName: e.nama
             }
         });
     }
-    onRemoveNotifiation(mo) {
-        this._portalService.removeNotification(mo);
+    onNotificationItemViewed(viewedMoList) {
+        this.viewedNotifications$.next(viewedMoList);
+    }
+    onRemoveNotifications(molist) {
+        this._notificationService.removeNotification(molist);
     }
-    _increaseNotificationCount() {
-        this._portalService.IncreaseNotifcationCount(1);
+    onNotificationLoadMore() {
+        this._notificationService.loadMore();
+    }
+    _mapNotifications(notifications) {
+        return notifications.map((notification) => (Object.assign(Object.assign({}, notification), { contentSafeHtml: notification.Content
+                ? this._domSanitizer.bypassSecurityTrustHtml(notification.Content)
+                : '' })));
+    }
+    _increaseNotificationCount(msg, title, type, image, mo, uiOptions, otherOptions) {
+        this._notificationService.IncreaseNotifcationCount(1);
+        if (otherOptions) {
+            const { MoId, TypeDefId } = otherOptions;
+            this._notificationService.addNotification(msg, title, type, image, MoId, TypeDefId);
+        }
     }
     _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 style=\"max-height: 400px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\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 });
+ShellbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ShellbarComponent, deps: [{ token: i1$2.PortalService }, { token: i1$2.BreadcrumbService }, { token: TilesService }, { token: i0.ChangeDetectorRef }, { token: i1$2.BbbTranslatePipe }, { token: i3$4.DomSanitizer }, { token: i1$2.NotificationService }, { token: APP_VERSION }], target: i0.ɵɵFactoryTarget.Component });
+ShellbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ShellbarComponent, selector: "bt-shellbar", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<link *ngIf=\"cssUrl$ | async as cssUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\r\n<link *ngIf=\"cssCustomUrl$ | async as cssCustomUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\r\n\r\n<fd-shellbar *ngIf=\"(userLoggedIn$ | async) || allowAnonymous\" [size]=\"deviceSize\">\r\n    <fd-shellbar-logo *ngIf=\"logo\">\r\n        <a\r\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\r\n            href=\"/\"\r\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\r\n            aria-label=\"Barsa Novin Ray\"\r\n        ></a>\r\n    </fd-shellbar-logo>\r\n\r\n    <fd-product-menu\r\n        *ngIf=\"!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0\"\r\n        [control]=\"productMenuControl\"\r\n        [closePopoverOnSelect]=\"true\"\r\n        [items]=\"productMenuItems1\"\r\n    >\r\n    </fd-product-menu>\r\n\r\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }} </fd-shellbar-subtitle>\r\n    <fd-shellbar-actions\r\n        *ngIf=\"user && (userMenu?.length || !settings?.HideLanguage)\"\r\n        [user]=\"user\"\r\n        [userMenu]=\"userMenu\"\r\n        #langRef\r\n    >\r\n        <fd-shellbar-action\r\n            *ngFor=\"let action of actions\"\r\n            [glyph]=\"action.Icon\"\r\n            [callback]=\"action.Callback\"\r\n            [label]=\"action.Label\"\r\n        >\r\n        </fd-shellbar-action>\r\n\r\n        <fd-popover\r\n            *ngIf=\"!settings?.HideNotifications && (notificationsCount$ | async) as notificationCount\"\r\n            [(isOpen)]=\"isOpenNotificatoin\"\r\n            [triggers]=\"[]\"\r\n            [focusTrapped]=\"true\"\r\n            [closeOnOutsideClick]=\"true\"\r\n            [noArrow]=\"false\"\r\n            placement=\"bottom\"\r\n            title=\"Notification Popover\"\r\n            [focusAutoCapture]=\"true\"\r\n            #popoverComponent\r\n        >\r\n            <fd-popover-control>\r\n                <fd-shellbar-action\r\n                    [glyph]=\"'bell'\"\r\n                    [label]=\"'Notification'\"\r\n                    [notificationCount]=\"notificationCount.unread\"\r\n                    [notificationLabel]=\"'Notification Label'\"\r\n                    [callback]=\"onOpenNotification\"\r\n                >\r\n                </fd-shellbar-action>\r\n            </fd-popover-control>\r\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\r\n                <div\r\n                    style=\"position: relative; height: 100px\"\r\n                    *ngIf=\"!notifcationLoaded && (notificationLoading$ | async) === true\"\r\n                >\r\n                    <bsu-mask size=\"s\"></bsu-mask>\r\n                </div>\r\n                <bt-notification-group\r\n                    [notifications]=\"notifications$ | async\"\r\n                    [notificationCount]=\"notificationCount\"\r\n                    [loading]=\"(notificationLoading$ | async) === true\"\r\n                    (remove)=\"onRemoveNotifications($event)\"\r\n                    (show)=\"onShowNotification($event)\"\r\n                    (viewed)=\"onNotificationItemViewed($event)\"\r\n                    (actionClick)=\"popoverComponent.close()\"\r\n                    (loadMore)=\"onNotificationLoadMore()\"\r\n                ></bt-notification-group>\r\n            </fd-popover-body>\r\n        </fd-popover>\r\n\r\n        <fd-shellbar-action\r\n            *ngIf=\"!settings?.HideLanguage && deviceSize !== 's'\"\r\n            [glyph]=\"'world'\"\r\n            [label]=\"'language'\"\r\n            [fdMenuTrigger]=\"menu\"\r\n            (callback)=\"(onLanguage)\"\r\n        >\r\n        </fd-shellbar-action>\r\n        <ng-container *ngIf=\"!settings?.HideLanguage && deviceSize === 's'\">\r\n            <fd-shellbar-action\r\n                *ngFor=\"let culture of cultures | keyvalue\"\r\n                [label]=\"culture.value\"\r\n                [callback]=\"onLanguage\"\r\n            >\r\n            </fd-shellbar-action>\r\n        </ng-container>\r\n\r\n        <fd-product-switch *ngIf=\"productSwitcher.length > 0\">\r\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\r\n            </fd-product-switch-body>\r\n        </fd-product-switch>\r\n        <!-- <fd-combobox\r\n            [(ngModel)]=\"searchTerm\"\r\n            [dropdownValues]=\"searchTerms\"\r\n            [placeholder]=\"('EnterSearchCriteria' | bbbTranslate) + ' ...'\"\r\n            [compact]=\"true\"\r\n        >\r\n        </fd-combobox> -->\r\n    </fd-shellbar-actions>\r\n</fd-shellbar>\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<fd-menu #menu>\r\n    <ul fd-list>\r\n        <li fd-list-item *ngFor=\"let culture of cultures | keyvalue\">\r\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\r\n                <span fd-list-title>{{ culture.value }} </span>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</fd-menu>\r\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: "component", type: i5$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i5$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i5$2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i5$2.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i7$2.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "ariaLabel", "disabled"] }, { kind: "component", type: i7$2.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i8$3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i8$3.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i8$3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i9$1.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "sideNav"] }, { kind: "component", type: i9$1.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i9$1.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i9$1.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect", "collapsedItemMenuLabel"] }, { kind: "component", type: i9$1.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i9$1.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "component", type: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "component", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "show", "loadMore"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1$2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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 style=\"max-height: 400px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\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"] }]
+            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<link *ngIf=\"cssUrl$ | async as cssUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\r\n<link *ngIf=\"cssCustomUrl$ | async as cssCustomUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\r\n\r\n<fd-shellbar *ngIf=\"(userLoggedIn$ | async) || allowAnonymous\" [size]=\"deviceSize\">\r\n    <fd-shellbar-logo *ngIf=\"logo\">\r\n        <a\r\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\r\n            href=\"/\"\r\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\r\n            aria-label=\"Barsa Novin Ray\"\r\n        ></a>\r\n    </fd-shellbar-logo>\r\n\r\n    <fd-product-menu\r\n        *ngIf=\"!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0\"\r\n        [control]=\"productMenuControl\"\r\n        [closePopoverOnSelect]=\"true\"\r\n        [items]=\"productMenuItems1\"\r\n    >\r\n    </fd-product-menu>\r\n\r\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }} </fd-shellbar-subtitle>\r\n    <fd-shellbar-actions\r\n        *ngIf=\"user && (userMenu?.length || !settings?.HideLanguage)\"\r\n        [user]=\"user\"\r\n        [userMenu]=\"userMenu\"\r\n        #langRef\r\n    >\r\n        <fd-shellbar-action\r\n            *ngFor=\"let action of actions\"\r\n            [glyph]=\"action.Icon\"\r\n            [callback]=\"action.Callback\"\r\n            [label]=\"action.Label\"\r\n        >\r\n        </fd-shellbar-action>\r\n\r\n        <fd-popover\r\n            *ngIf=\"!settings?.HideNotifications && (notificationsCount$ | async) as notificationCount\"\r\n            [(isOpen)]=\"isOpenNotificatoin\"\r\n            [triggers]=\"[]\"\r\n            [focusTrapped]=\"true\"\r\n            [closeOnOutsideClick]=\"true\"\r\n            [noArrow]=\"false\"\r\n            placement=\"bottom\"\r\n            title=\"Notification Popover\"\r\n            [focusAutoCapture]=\"true\"\r\n            #popoverComponent\r\n        >\r\n            <fd-popover-control>\r\n                <fd-shellbar-action\r\n                    [glyph]=\"'bell'\"\r\n                    [label]=\"'Notification'\"\r\n                    [notificationCount]=\"notificationCount.unread\"\r\n                    [notificationLabel]=\"'Notification Label'\"\r\n                    [callback]=\"onOpenNotification\"\r\n                >\r\n                </fd-shellbar-action>\r\n            </fd-popover-control>\r\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\r\n                <div\r\n                    style=\"position: relative; height: 100px\"\r\n                    *ngIf=\"!notifcationLoaded && (notificationLoading$ | async) === true\"\r\n                >\r\n                    <bsu-mask size=\"s\"></bsu-mask>\r\n                </div>\r\n                <bt-notification-group\r\n                    [notifications]=\"notifications$ | async\"\r\n                    [notificationCount]=\"notificationCount\"\r\n                    [loading]=\"(notificationLoading$ | async) === true\"\r\n                    (remove)=\"onRemoveNotifications($event)\"\r\n                    (show)=\"onShowNotification($event)\"\r\n                    (viewed)=\"onNotificationItemViewed($event)\"\r\n                    (actionClick)=\"popoverComponent.close()\"\r\n                    (loadMore)=\"onNotificationLoadMore()\"\r\n                ></bt-notification-group>\r\n            </fd-popover-body>\r\n        </fd-popover>\r\n\r\n        <fd-shellbar-action\r\n            *ngIf=\"!settings?.HideLanguage && deviceSize !== 's'\"\r\n            [glyph]=\"'world'\"\r\n            [label]=\"'language'\"\r\n            [fdMenuTrigger]=\"menu\"\r\n            (callback)=\"(onLanguage)\"\r\n        >\r\n        </fd-shellbar-action>\r\n        <ng-container *ngIf=\"!settings?.HideLanguage && deviceSize === 's'\">\r\n            <fd-shellbar-action\r\n                *ngFor=\"let culture of cultures | keyvalue\"\r\n                [label]=\"culture.value\"\r\n                [callback]=\"onLanguage\"\r\n            >\r\n            </fd-shellbar-action>\r\n        </ng-container>\r\n\r\n        <fd-product-switch *ngIf=\"productSwitcher.length > 0\">\r\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\r\n            </fd-product-switch-body>\r\n        </fd-product-switch>\r\n        <!-- <fd-combobox\r\n            [(ngModel)]=\"searchTerm\"\r\n            [dropdownValues]=\"searchTerms\"\r\n            [placeholder]=\"('EnterSearchCriteria' | bbbTranslate) + ' ...'\"\r\n            [compact]=\"true\"\r\n        >\r\n        </fd-combobox> -->\r\n    </fd-shellbar-actions>\r\n</fd-shellbar>\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<fd-menu #menu>\r\n    <ul fd-list>\r\n        <li fd-list-item *ngFor=\"let culture of cultures | keyvalue\">\r\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\r\n                <span fd-list-title>{{ culture.value }} </span>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</fd-menu>\r\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: [{
+        return [{ type: i1$2.PortalService }, { type: i1$2.BreadcrumbService }, { type: TilesService }, { type: i0.ChangeDetectorRef }, { type: i1$2.BbbTranslatePipe }, { type: i3$4.DomSanitizer }, { type: i1$2.NotificationService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [APP_VERSION]
                     }] }];
     }, propDecorators: { comboboxComponent: [{
                 type: ViewChild,
                 args: [ComboboxComponent]
+            }], popoverComponent: [{
+                type: ViewChild,
+                args: ['popoverComponent', { static: false }]
             }] } });
 
 class TileHomeFilterPipe {
@@ -2349,7 +2496,8 @@ BarsaTilesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         AppFinderGroupComponent,
         AppFinderAppListComponent,
         TilesViewerGroupComponent,
-        FormTileComponent, GroupTilesPipe, TileHomeFilterPipe, HomeGroupPipe, ActionLinksPipe, EmptyListDirective, TileRendererDirective], imports: [CommonModule,
+        FormTileComponent, GroupTilesPipe, TileHomeFilterPipe, HomeGroupPipe, ActionLinksPipe, EmptyListDirective, TileRendererDirective, NotificationGroupComponent,
+        NotificationGroupHeaderComponent], imports: [CommonModule,
         FormsModule,
         DragDropModule,
         CdkTableModule,
@@ -2418,7 +2566,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                         BarsaEchartsModule
                     ],
                     providers: [TilesService, AppFinderService],
-                    declarations: [...components, ...pipes, ...directives],
+                    declarations: [
+                        ...components,
+                        ...pipes,
+                        ...directives,
+                        NotificationGroupComponent,
+                        NotificationGroupHeaderComponent
+                    ],
                     exports: [...components]
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.DynamicComponentService }, { type: i0.ComponentFactoryResolver }]; } });