barsa-tiles 1.0.249 → 1.0.251

package/fesm2015/barsa-tiles.mjs

@@ -215,10 +215,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
 class ActionsLinkComponent extends BaseComponent {
 }
 ActionsLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionsLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionsLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", editHome: "editHome" }, usesInheritance: true, ngImport: i0, template: "<bt-action-item\r\n    *ngFor=\"let actionItem of actionsLink\"\r\n    cdkDrag\r\n    [data]=\"actionItem\"\r\n    [editHome]=\"editHome\"\r\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\r\n    [mo]=\"actionItem\"\r\n>\r\n</bt-action-item>\r\n", styles: [":host{display:flex;width:100%;row-gap:5px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:10px;padding:1px 10px}bt-action-item{margin-top:auto;margin-bottom:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ActionItemComponent, selector: "bt-action-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ActionsLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", editHome: "editHome" }, usesInheritance: true, ngImport: i0, template: "<bt-action-item\r\n    *ngFor=\"let actionItem of actionsLink\"\r\n    cdkDrag\r\n    [data]=\"actionItem\"\r\n    [editHome]=\"editHome\"\r\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\r\n    [mo]=\"actionItem\"\r\n>\r\n</bt-action-item>\r\n", styles: [":host{display:flex;width:100%;row-gap:3px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:3px;padding:1rem 0}bt-action-item{margin-top:auto;margin-bottom:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ActionItemComponent, selector: "bt-action-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionsLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-actions-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-action-item\r\n    *ngFor=\"let actionItem of actionsLink\"\r\n    cdkDrag\r\n    [data]=\"actionItem\"\r\n    [editHome]=\"editHome\"\r\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\r\n    [mo]=\"actionItem\"\r\n>\r\n</bt-action-item>\r\n", styles: [":host{display:flex;width:100%;row-gap:5px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:10px;padding:1px 10px}bt-action-item{margin-top:auto;margin-bottom:auto}\n"] }]
+            args: [{ selector: 'bt-actions-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-action-item\r\n    *ngFor=\"let actionItem of actionsLink\"\r\n    cdkDrag\r\n    [data]=\"actionItem\"\r\n    [editHome]=\"editHome\"\r\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\r\n    [mo]=\"actionItem\"\r\n>\r\n</bt-action-item>\r\n", styles: [":host{display:flex;width:100%;row-gap:3px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:3px;padding:1rem 0}bt-action-item{margin-top:auto;margin-bottom:auto}\n"] }]
         }], propDecorators: { actionsLink: [{
                 type: Input
             }], editHome: [{
@@ -322,10 +322,10 @@ class TilesViewerGroupComponent extends BaseComponent {
     }
 }
 TilesViewerGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TilesViewerGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: { appTileGroup: "appTileGroup", stackContent: "stackContent", editHome: "editHome", isAppTileSubGroup: "isAppTileSubGroup", deviceSize: "deviceSize" }, outputs: { tilesDropped: "tilesDropped", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"editHome\" cdkDrag [cdkDragDisabled]=\"!editHome || !stackContent\">\r\n    <fd-layout-panel-header *ngIf=\"editHome || stackContent || isAppTileSubGroup\">\r\n        <fd-layout-panel-head>\r\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\r\n        </fd-layout-panel-head>\r\n        <fd-layout-panel-actions *ngIf=\"editHome\" class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    fd-button\r\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\r\n                    [label]=\"'Refresh' | bbbTranslate\"\r\n                    (click)=\"onReset(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"!appTileGroup.Predefined\"\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n    </fd-layout-panel-header>\r\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            fd-panel-content\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            <ng-container *ngIf=\"!editHome\">\r\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\r\n\r\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\r\n            </ng-container>\r\n            <div\r\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\r\n                [class.edit-home]=\"editHome\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!editHome || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [enableCommand]=\"!editHome && appTile.Component\"\r\n                    tileRenderer\r\n                    [data]=\"appTile\"\r\n                    [editHome]=\"editHome\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            <fd-tile class=\"add-tile\" *ngIf=\"editHome\" [routerLink]=\"['/home/appfinder']\">\r\n                <div>\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n        </div>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<bt-actions-link\r\n    [class.actions-link-edit-home]=\"editHome\"\r\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n    [editHome]=\"editHome\"\r\n    [style.min-height]=\"editHome ? '4rem' : 'auto'\"\r\n    cdkDropList\r\n    #actionLinks=\"cdkDropList\"\r\n    cdkDropListOrientation=\"horizontal\"\r\n    [cdkDropListConnectedTo]=\"tiles\"\r\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n    [cdkDropListData]=\"{\r\n        isTile: false,\r\n        items: appTileGroup.navigatorActionLinks || []\r\n    }\"\r\n>\r\n</bt-actions-link>\r\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileSubGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"true\"\r\n        (tilesDropped)=\"tilesDropped.emit($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-container>\r\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:3px;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i6.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i6.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i6.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i6.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i6.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "component", type: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i4.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "editHome"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "editHome", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "editHome"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TilesViewerGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: { appTileGroup: "appTileGroup", stackContent: "stackContent", editHome: "editHome", isAppTileSubGroup: "isAppTileSubGroup", deviceSize: "deviceSize" }, outputs: { tilesDropped: "tilesDropped", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"editHome\" cdkDrag [cdkDragDisabled]=\"!editHome || !stackContent\">\r\n    <fd-layout-panel-header *ngIf=\"editHome || stackContent || isAppTileSubGroup\">\r\n        <fd-layout-panel-head>\r\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\r\n        </fd-layout-panel-head>\r\n        <fd-layout-panel-actions *ngIf=\"editHome\" class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    fd-button\r\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\r\n                    [label]=\"'Refresh' | bbbTranslate\"\r\n                    (click)=\"onReset(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"!appTileGroup.Predefined\"\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n    </fd-layout-panel-header>\r\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            fd-panel-content\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            <ng-container *ngIf=\"!editHome\">\r\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\r\n\r\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\r\n            </ng-container>\r\n            <div\r\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\r\n                [class.edit-home]=\"editHome\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!editHome || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [enableCommand]=\"!editHome && appTile.Component\"\r\n                    tileRenderer\r\n                    [data]=\"appTile\"\r\n                    [editHome]=\"editHome\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            <fd-tile class=\"add-tile\" *ngIf=\"editHome\" [routerLink]=\"['/home/appfinder']\">\r\n                <div>\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n        </div>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<bt-actions-link\r\n    [class.actions-link-edit-home]=\"editHome\"\r\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n    [editHome]=\"editHome\"\r\n    [style.min-height]=\"editHome ? '4rem' : 'auto'\"\r\n    cdkDropList\r\n    #actionLinks=\"cdkDropList\"\r\n    cdkDropListOrientation=\"horizontal\"\r\n    [cdkDropListConnectedTo]=\"tiles\"\r\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n    [cdkDropListData]=\"{\r\n        isTile: false,\r\n        items: appTileGroup.navigatorActionLinks || []\r\n    }\"\r\n>\r\n</bt-actions-link>\r\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileSubGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"true\"\r\n        (tilesDropped)=\"tilesDropped.emit($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-container>\r\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:3px;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i6.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i6.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i6.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i6.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i6.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "component", type: i1$1.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i4.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "editHome"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "editHome", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "editHome"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i1$2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"editHome\" cdkDrag [cdkDragDisabled]=\"!editHome || !stackContent\">\r\n    <fd-layout-panel-header *ngIf=\"editHome || stackContent || isAppTileSubGroup\">\r\n        <fd-layout-panel-head>\r\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\r\n        </fd-layout-panel-head>\r\n        <fd-layout-panel-actions *ngIf=\"editHome\" class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    fd-button\r\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\r\n                    [label]=\"'Refresh' | bbbTranslate\"\r\n                    (click)=\"onReset(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"!appTileGroup.Predefined\"\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n    </fd-layout-panel-header>\r\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            fd-panel-content\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            <ng-container *ngIf=\"!editHome\">\r\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\r\n\r\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\r\n            </ng-container>\r\n            <div\r\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\r\n                [class.edit-home]=\"editHome\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!editHome || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [enableCommand]=\"!editHome && appTile.Component\"\r\n                    tileRenderer\r\n                    [data]=\"appTile\"\r\n                    [editHome]=\"editHome\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            <fd-tile class=\"add-tile\" *ngIf=\"editHome\" [routerLink]=\"['/home/appfinder']\">\r\n                <div>\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n        </div>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<bt-actions-link\r\n    [class.actions-link-edit-home]=\"editHome\"\r\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n    [editHome]=\"editHome\"\r\n    [style.min-height]=\"editHome ? '4rem' : 'auto'\"\r\n    cdkDropList\r\n    #actionLinks=\"cdkDropList\"\r\n    cdkDropListOrientation=\"horizontal\"\r\n    [cdkDropListConnectedTo]=\"tiles\"\r\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n    [cdkDropListData]=\"{\r\n        isTile: false,\r\n        items: appTileGroup.navigatorActionLinks || []\r\n    }\"\r\n>\r\n</bt-actions-link>\r\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileSubGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"true\"\r\n        (tilesDropped)=\"tilesDropped.emit($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-container>\r\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:3px;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}\n"] }]
+            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"editHome\" cdkDrag [cdkDragDisabled]=\"!editHome || !stackContent\">\r\n    <fd-layout-panel-header *ngIf=\"editHome || stackContent || isAppTileSubGroup\">\r\n        <fd-layout-panel-head>\r\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\r\n        </fd-layout-panel-head>\r\n        <fd-layout-panel-actions *ngIf=\"editHome\" class=\"group-btns\">\r\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                <button\r\n                    fd-button\r\n                    fd-toolbar-item\r\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                    (click)=\"onToggleShowHide(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    fd-button\r\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\r\n                    [label]=\"'Refresh' | bbbTranslate\"\r\n                    (click)=\"onReset(appTileGroup)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"!appTileGroup.Predefined\"\r\n                    fd-button\r\n                    [label]=\"'Delete' | bbbTranslate\"\r\n                    [fdType]=\"'negative'\"\r\n                    (click)=\"onDelete(appTileGroup)\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n    </fd-layout-panel-header>\r\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\r\n        <div\r\n            class=\"tile-wrapper\"\r\n            fd-panel-content\r\n            #tiles=\"cdkDropList\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n            [cdkDropListConnectedTo]=\"actionLinks\"\r\n            [cdkDropListData]=\"{\r\n                isTile: true,\r\n                items: appTileGroup.navigatorTiles || []\r\n            }\"\r\n        >\r\n            <ng-container *ngIf=\"!editHome\">\r\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\r\n\r\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\r\n            </ng-container>\r\n            <div\r\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\r\n                [class.edit-home]=\"editHome\"\r\n                cdkDrag\r\n                [cdkDragDisabled]=\"!editHome || appTileGroup.Locked\"\r\n            >\r\n                <span\r\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\r\n                    [enableCommand]=\"!editHome && appTile.Component\"\r\n                    tileRenderer\r\n                    [data]=\"appTile\"\r\n                    [editHome]=\"editHome\"\r\n                    [component]=\"appTile.Component\"\r\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\r\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\r\n                ></span>\r\n            </div>\r\n            <fd-tile class=\"add-tile\" *ngIf=\"editHome\" [routerLink]=\"['/home/appfinder']\">\r\n                <div>\r\n                    <fd-icon glyph=\"add\"></fd-icon>\r\n                </div>\r\n            </fd-tile>\r\n        </div>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<bt-actions-link\r\n    [class.actions-link-edit-home]=\"editHome\"\r\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\r\n    [editHome]=\"editHome\"\r\n    [style.min-height]=\"editHome ? '4rem' : 'auto'\"\r\n    cdkDropList\r\n    #actionLinks=\"cdkDropList\"\r\n    cdkDropListOrientation=\"horizontal\"\r\n    [cdkDropListConnectedTo]=\"tiles\"\r\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\r\n    [cdkDropListData]=\"{\r\n        isTile: false,\r\n        items: appTileGroup.navigatorActionLinks || []\r\n    }\"\r\n>\r\n</bt-actions-link>\r\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileSubGroup\"\r\n        [editHome]=\"editHome\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"true\"\r\n        (tilesDropped)=\"tilesDropped.emit($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-container>\r\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:3px;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { appTileGroup: [{
                 type: Input
             }], stackContent: [{
@@ -2057,6 +2057,7 @@ class ShellbarComponent extends BaseComponent {
         this.showVersion = false;
         this.onOpenNotification = () => {
             this.isOpenNotificatoin = true;
+            this._portalService.loadNotifications();
         };
         this.onLanguage = (e) => {
             const culture = e.currentTarget.textContent.trim();
@@ -2113,7 +2114,7 @@ class ShellbarComponent extends BaseComponent {
         this.cultures = BarsaApi.LoginFormData.Cultures;
         this.cssUrl$ = this._portalService.cssUrl$;
         this.cssCustomUrl$ = this._portalService.cssCustomUrl$;
-        this.notificationsCount$ = this._portalService.notificationsCount$;
+        this.notificationsCount$ = this._portalService.notificationCount$;
         this.notificationLoading$ = this._portalService.notificationLoading$;
         this.notifications$ = this._portalService.notifications$;
         BarsaApi.Bw.SetUserPortalSettings = (userPortalSettings) => {
@@ -2127,6 +2128,9 @@ class ShellbarComponent extends BaseComponent {
             this.deviceSize = c;
             this._cdr.detectChanges();
         });
+        BarsaApi.Ul.NotificationManager.on({
+            ShowPopup: this._increaseNotificationCount.bind(this)
+        });
         this._breadCrumbService.breadcrumbs$.pipe(takeUntil(this._onDestroy$)).subscribe((breadCrumbs) => {
             if (breadCrumbs.length > 0) {
                 this.productMenuControl = breadCrumbs[breadCrumbs.length - 1].label;
@@ -2151,7 +2155,7 @@ class ShellbarComponent extends BaseComponent {
                 return;
             }
             this._tilesService.loadShellbar();
-            this._portalService.loadNotifications();
+            this._portalService.loadNotificationCount();
         });
     }
     onCultureChange(culture) {
@@ -2169,16 +2173,19 @@ class ShellbarComponent extends BaseComponent {
     onRemoveNotifiation(mo) {
         this._portalService.removeNotification(mo);
     }
+    _increaseNotificationCount() {
+        this._portalService.IncreaseNotifcationCount(1);
+    }
     _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\">\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.ɵ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 });
 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\">\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\" />\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"] }]
         }], ctorParameters: function () {
         return [{ type: i1$2.PortalService }, { type: i1$2.BreadcrumbService }, { type: TilesService }, { type: i0.ChangeDetectorRef }, { type: i1$2.BbbTranslatePipe }, { type: undefined, decorators: [{
                         type: Inject,