barsa-tiles 2.0.1 → 2.0.3

package/fesm2022/barsa-tiles.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, ChangeDetectionStrategy, Input, Directive, HostListener, Pipe, HostBinding, EventEmitter, Output, ElementRef, ViewChild, inject, ChangeDetectorRef, TemplateRef, Inject, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i1 from 'barsa-novin-ray-core';
-import { BarsaApi, TilePropsComponent, BaseComponent, BaseDirective, PreventDefaulEvent, fromIntersectionObserver, IntersectionStatus, APP_VERSION, getDeviceIsMobile, BaseModule, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
+import { BarsaApi, TilePropsComponent, BaseComponent, BaseDirective, PreventDefaulEvent, fromIntersectionObserver, IntersectionStatus, APP_VERSION, getDeviceIsMobile, getDeviceIsDesktop, getDeviceIsTablet, BaseModule, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
 import { Subject, BehaviorSubject, of, from, takeUntil as takeUntil$1, filter as filter$1, interval, combineLatest, forkJoin } from 'rxjs';
 import { startWith, shareReplay, takeUntil, distinctUntilChanged, filter, tap, concatMap, debounceTime, exhaustMap, finalize, map, withLatestFrom } from 'rxjs/operators';
 import * as i1$1 from '@fundamental-ngx/core';
@@ -1433,11 +1433,11 @@ class TilesViewerComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TilesViewerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SaveScrollPositionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", rtl: "rtl", defaultTab: "defaultTab", 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 }, { propertyName: "contentPageRef", first: true, predicate: ["contentPage"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<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    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar 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            }\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    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\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        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\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            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\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        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.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: i4$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i6$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap"] }, { kind: "component", type: i6$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i6$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i6$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i6$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i5.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i8$2.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "component", type: i9$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i9$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i10.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i10.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", rtl: "rtl", defaultTab: "defaultTab", 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 }, { propertyName: "contentPageRef", first: true, predicate: ["contentPage"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<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    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar 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            }\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    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\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        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\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            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\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        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\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 article{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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.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: i4$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i6$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap"] }, { kind: "component", type: i6$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i6$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i6$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i6$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i5.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i8$2.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "component", type: i9$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i9$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i10.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i10.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TilesViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar 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            }\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    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\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        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\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            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\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        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\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"] }]
+            args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar 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            }\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    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\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        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\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            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\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        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\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 article{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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SaveScrollPositionService }], propDecorators: { tabListComponent: [{
                 type: ViewChild,
                 args: [TabListComponent]
@@ -2176,6 +2176,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
         }] });
 
 class NumericTileComponent extends BaseBtTileComponent {
+    constructor() {
+        super(...arguments);
+        this.kpiStateIsColor = false;
+        this.scalseStateIsColor = false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        switch (this.kpiState) {
+            case 'positive':
+            case 'negative':
+            case 'informative':
+            case 'critical':
+            case 'neutral':
+                break;
+            default:
+                this.kpiStateIsColor = this.kpiState !== '';
+                break;
+        }
+        switch (this.scaleState) {
+            case 'positive':
+            case 'negative':
+            case 'informative':
+            case 'critical':
+            case 'neutral':
+                break;
+            default:
+                this.scalseStateIsColor = this.scaleState !== '';
+                break;
+        }
+    }
     get launchIcon() {
         return this.settings.LaunchIcon;
     }
@@ -2195,11 +2225,11 @@ class NumericTileComponent extends BaseBtTileComponent {
         return this.settings.ScaleArrowIcon;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NumericTileComponent, selector: "bt-numeric-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [backColor]=\"backColor\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\">{{ kpi }}</div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div fd-numeric-content-scale [state]=\"scaleState\">\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                    ></span>\n                    <span fd-numeric-content-scale-text>{{ scaleText }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$3.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$3.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "directive", type: i1$3.NumericContentLaunchIconContainerDirective, selector: "[fd-numeric-content-launch-icon-container]" }, { kind: "directive", type: i1$3.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$3.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$3.NumericContentScaleContainerDirective, selector: "[fd-numeric-content-scale-container]" }, { kind: "directive", type: i1$3.NumericContentScaleDirective, selector: "[fd-numeric-content-scale]", inputs: ["state", "class"] }, { kind: "directive", type: i1$3.NumericContentScaleTextDirective, selector: "[fd-numeric-content-scale-text]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand"] }, { kind: "pipe", type: i4.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NumericTileComponent, selector: "bt-numeric-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [backColor]=\"backColor\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\" [style.color]=\"kpiStateIsColor ? kpiState : null\">\n                    {{ kpi }}\n                </div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div\n                    fd-numeric-content-scale\n                    [state]=\"scaleState\"\n                    [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                >\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                        [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                    ></span>\n                    <span fd-numeric-content-scale-text [style.color]=\"scalseStateIsColor ? scaleState : null\">{{\n                        scaleText\n                    }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$3.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$3.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "directive", type: i1$3.NumericContentLaunchIconContainerDirective, selector: "[fd-numeric-content-launch-icon-container]" }, { kind: "directive", type: i1$3.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$3.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$3.NumericContentScaleContainerDirective, selector: "[fd-numeric-content-scale-container]" }, { kind: "directive", type: i1$3.NumericContentScaleDirective, selector: "[fd-numeric-content-scale]", inputs: ["state", "class"] }, { kind: "directive", type: i1$3.NumericContentScaleTextDirective, selector: "[fd-numeric-content-scale-text]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand"] }, { kind: "pipe", type: i4.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-numeric-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [backColor]=\"backColor\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\">{{ kpi }}</div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div fd-numeric-content-scale [state]=\"scaleState\">\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                    ></span>\n                    <span fd-numeric-content-scale-text>{{ scaleText }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n" }]
+            args: [{ selector: 'bt-numeric-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [backColor]=\"backColor\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\" [style.color]=\"kpiStateIsColor ? kpiState : null\">\n                    {{ kpi }}\n                </div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div\n                    fd-numeric-content-scale\n                    [state]=\"scaleState\"\n                    [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                >\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                        [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                    ></span>\n                    <span fd-numeric-content-scale-text [style.color]=\"scalseStateIsColor ? scaleState : null\">{{\n                        scaleText\n                    }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n" }]
         }] });
 
 class LogoTileComponent extends BaseBtTileComponent {
@@ -2564,6 +2594,7 @@ class BarsaShellbarComponent extends BaseComponent {
         };
         this.searchTerms = ['مرخصی', 'ماموریت', 'تیکت', 'پروژه'];
         this.showVersion = false;
+        this.isServiceDesk = false;
         this._viewedNotifications$ = new Subject();
         this.onBellNotification = () => {
             this._document?.body && this._document.body.click();
@@ -2590,7 +2621,7 @@ class BarsaShellbarComponent extends BaseComponent {
             const culture = e.currentTarget.textContent.trim();
             this._changeCulture(culture);
         };
-        this.showVersion = !BarsaApi.LoginFormData.IsServiceDesk;
+        this.isServiceDesk = BarsaApi.LoginFormData.IsServiceDesk;
         this.showVersion = false;
         document.body.addEventListener('click', () => {
             this.isOpenQuickAccess = false;
@@ -2623,11 +2654,11 @@ class BarsaShellbarComponent extends BaseComponent {
         this.cultureChanged.emit(culture);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaShellbarComponent, deps: [{ token: i1.NotificationService }, { token: i1$1.DialogService }, { token: DOCUMENT }, { token: APP_VERSION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: { cssCustomUrl: "cssCustomUrl", cssUrl: "cssUrl", allowAnonymous: "allowAnonymous", multiLanguages: "multiLanguages", userLoggedIn: "userLoggedIn", settings: "settings", productMenuControl: "productMenuControl", deviceSize: "deviceSize", cultures: "cultures", shellbarData: "shellbarData", notificationCount: "notificationCount", notifcationLoaded: "notifcationLoaded", notificationLoading: "notificationLoading", notifications: "notifications", productMenuItems1: "productMenuItems1", bodyClick: "bodyClick", logo: "logo", actions: "actions", userMenu: "userMenu", productSwitcher: "productSwitcher", subtitle: "subtitle", isMobile: "isMobile" }, outputs: { openNotificationPanel: "openNotificationPanel", openQuickAccessPanel: "openQuickAccessPanel", cultureChanged: "cultureChanged", notificationLoadMore: "notificationLoadMore", removeNotification: "removeNotification", notifiationActionClick: "notifiationActionClick", notificationViewed: "notificationViewed" }, viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (cssUrl) {\r\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\r\n} @if (cssCustomUrl) {\r\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\r\n} @if (userLoggedIn || allowAnonymous) {\r\n<fd-shellbar [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\r\n    @if (deviceSize === 's' && userLoggedIn && !settings?.HideQuickAccess) {\r\n    <fd-shellbar-action\r\n        [glyph]=\"'apps'\"\r\n        [label]=\"'Quick Access' | bbbTranslate\"\r\n        [notificationCount]=\"notificationCount.unread ?? 0\"\r\n        [notificationLabel]=\"'Quick Access' | bbbTranslate\"\r\n        [callback]=\"onOpenQuickAccess\"\r\n    >\r\n    </fd-shellbar-action>\r\n    }\r\n    <!--        @if (userLoggedIn && !settings?.HideQuickAccess) {-->\r\n    <!--            <fd-popover-->\r\n    <!--                [(isOpen)]=\"isOpenQuickAccess\"-->\r\n    <!--                [triggers]=\"[]\"-->\r\n    <!--                [focusTrapped]=\"true\"-->\r\n    <!--                [noArrow]=\"true\"-->\r\n    <!--                placement=\"bottom\"-->\r\n    <!--                title=\"Quick Access Popover\"-->\r\n    <!--                [focusAutoCapture]=\"true\"-->\r\n    <!--                [mobile]=\"deviceSize === 's'\"-->\r\n    <!--                #popoverComponent-->\r\n    <!--            >-->\r\n    <!--                <fd-popover-control>-->\r\n    <!--                    <fd-shellbar-action-->\r\n    <!--                        [glyph]=\"'grid'\"-->\r\n    <!--                        [label]=\"'Quick Access'\"-->\r\n    <!--                        [callback]=\"onOpenQuickAccess\"-->\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(&#45;&#45;sapContent_Shadow0)\">-->\r\n    <!--                    <ng-container-->\r\n    <!--                        *ngTemplateOutlet=\"QuickAccessTemplate\"-->\r\n    <!--                    ></ng-container>-->\r\n    <!--                </fd-popover-body>-->\r\n    <!--            </fd-popover>-->\r\n    <!--        }-->\r\n    @if (userLoggedIn && !settings?.HideQuickAccess) {\r\n    <button\r\n        fd-shellbar-side-nav\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        glyph=\"menu2\"\r\n        style=\"width: 2.75rem\"\r\n        (click)=\"$event.stopPropagation(); isOpenQuickAccess = !isOpenQuickAccess\"\r\n    ></button>\r\n    } @if (logo) {\r\n    <fd-shellbar-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    } @if (!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0) {\r\n    <fd-product-menu [control]=\"productMenuControl\" [closePopoverOnSelect]=\"true\" [items]=\"productMenuItems1\">\r\n    </fd-product-menu>\r\n    }\r\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }}</fd-shellbar-subtitle>\r\n    @if (user && (userMenu?.length || !settings?.HideLanguage)) {\r\n    <fd-shellbar-actions [user]=\"user\" [userMenu]=\"userMenu\" #langRef>\r\n        @for (action of actions; track action) {\r\n        <fd-shellbar-action [glyph]=\"action.Icon\" [callback]=\"action.Callback\" [label]=\"action.Label\">\r\n        </fd-shellbar-action>\r\n        } @if (deviceSize === 's' && userLoggedIn && !settings?.HideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notifications' | bbbTranslate\"\r\n            [notificationCount]=\"notificationCount.unread ?? 0\"\r\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\r\n            [callback]=\"onBellNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if (!settings?.HideNotifications && userLoggedIn) {\r\n        <fd-popover\r\n            [(isOpen)]=\"isOpenNotificatoin\"\r\n            [triggers]=\"[]\"\r\n            [focusTrapped]=\"true\"\r\n            [noArrow]=\"true\"\r\n            placement=\"bottom\"\r\n            title=\"Notification Popover\"\r\n            [focusAutoCapture]=\"true\"\r\n            [mobile]=\"deviceSize === 's'\"\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                <ng-container\r\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\r\n                ></ng-container>\r\n            </fd-popover-body>\r\n        </fd-popover>\r\n        } @if (!settings?.HideLanguage && deviceSize !== 's' && multiLanguages) {\r\n        <fd-shellbar-action [glyph]=\"'world'\" [label]=\"'language'\" [fdMenuTrigger]=\"menu\" (callback)=\"(onLanguage)\">\r\n        </fd-shellbar-action>\r\n        } @if (!settings?.HideLanguage && deviceSize === 's' && multiLanguages) { @for (culture of cultures | keyvalue;\r\n        track culture) {\r\n        <fd-shellbar-action\r\n            [label]=\"culture.value\"\r\n            [callback]=\"onLanguage\"\r\n            class=\"culture-abbrivation\"\r\n            [glyph]=\"culture.key\"\r\n            [ngClass]=\"'flags'\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } } @if (productSwitcher?.length) {\r\n        <fd-product-switch>\r\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\r\n            </fd-product-switch-body>\r\n        </fd-product-switch>\r\n        }\r\n    </fd-shellbar-actions>\r\n    }\r\n</fd-shellbar>\r\n}\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<div\r\n    class=\"tw-fixed tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\r\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\r\n    [ngClass]=\"isMobile ? 'tw-w-screen -tw-right-full' : 'tw-w-80 -tw-right-80'\"\r\n    (click)=\"$event.stopPropagation()\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"QuickAccessTemplate\"></ng-container>\r\n</div>\r\n\r\n@if(isOpenQuickAccess) {\r\n<div\r\n    class=\"tw-fixed tw-right-0 tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-slate-800/[.5] tw-z-[90] tw-w-screen tw-backdrop-blur-sm\"\r\n    (click)=\"isOpenQuickAccess = false\"\r\n></div>\r\n}\r\n<fd-menu #menu>\r\n    <ul fd-list>\r\n        @for (culture of cultures | keyvalue; track culture) {\r\n        <li fd-list-item>\r\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\r\n                <span fd-list-title>\r\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" />\r\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\r\n                </span>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</fd-menu>\r\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\r\n    @if (!notifcationLoaded && notificationLoading === true) {\r\n    <div style=\"position: relative; height: 100px\">\r\n        <bsu-mask size=\"s\"></bsu-mask>\r\n    </div>\r\n    }\r\n    <bt-notification-group\r\n        [notifications]=\"notifications\"\r\n        [notificationCount]=\"notificationCount\"\r\n        [loading]=\"notificationLoading === true\"\r\n        (viewed)=\"onNotificationItemViewed($event)\"\r\n        (remove)=\"onRemoveNotifications($event)\"\r\n        (showEvent)=\"popoverComponent.close(); onShowNotification($event)\"\r\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\r\n        (loadMore)=\"onNotificationLoadMore()\"\r\n        [deviceSize]=\"deviceSize\"\r\n    ></bt-notification-group>\r\n</ng-template>\r\n<ng-template #QuickAccessTemplate>\r\n    @if (!notifcationLoaded && notificationLoading === true) {\r\n    <div style=\"position: relative; height: 100px\">\r\n        <bsu-mask size=\"s\"></bsu-mask>\r\n    </div>\r\n    }\r\n    <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder>\r\n</ng-template>\r\n\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body class=\"mobile\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\r\n            ></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:contents}: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{padding:0}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i8$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i8$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i8$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i3$1.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3$1.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i7.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i7.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i7.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i7.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i9$3.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i9$3.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i10$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i10$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i10$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i11.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex"] }, { kind: "component", type: i11.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i11.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i11.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect"], outputs: ["searchOpen"] }, { kind: "component", type: i11.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i11.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i11.ShellbarSidenavDirective, selector: "[fdShellbarSidenav], [fd-shellbar-side-nav]" }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: PopoverAppFinderComponent, selector: "bt-popover-app-finder", outputs: ["closeMenu"] }, { kind: "component", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: { cssCustomUrl: "cssCustomUrl", cssUrl: "cssUrl", allowAnonymous: "allowAnonymous", multiLanguages: "multiLanguages", userLoggedIn: "userLoggedIn", settings: "settings", productMenuControl: "productMenuControl", deviceSize: "deviceSize", cultures: "cultures", shellbarData: "shellbarData", notificationCount: "notificationCount", notifcationLoaded: "notifcationLoaded", notificationLoading: "notificationLoading", notifications: "notifications", productMenuItems1: "productMenuItems1", bodyClick: "bodyClick", logo: "logo", actions: "actions", userMenu: "userMenu", productSwitcher: "productSwitcher", subtitle: "subtitle", isMobile: "isMobile", hideShellbarActions: "hideShellbarActions", showLoginButton: "showLoginButton", isTablet: "isTablet", isDesktop: "isDesktop" }, outputs: { openNotificationPanel: "openNotificationPanel", openQuickAccessPanel: "openQuickAccessPanel", cultureChanged: "cultureChanged", notificationLoadMore: "notificationLoadMore", removeNotification: "removeNotification", notifiationActionClick: "notifiationActionClick", notificationViewed: "notificationViewed" }, viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (cssUrl) {\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n} @if (cssCustomUrl) {\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n} @if (userLoggedIn || allowAnonymous) {\n<fd-shellbar [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    @if (deviceSize === 's' && userLoggedIn && !settings?.HideQuickAccess) {\n    <fd-shellbar-action\n        [glyph]=\"'apps'\"\n        [label]=\"'Quick Access' | bbbTranslate\"\n        [notificationCount]=\"notificationCount.unread ?? 0\"\n        [notificationLabel]=\"'Quick Access' | bbbTranslate\"\n        [callback]=\"onOpenQuickAccess\"\n    >\n    </fd-shellbar-action>\n    } @if (userLoggedIn && !settings?.HideQuickAccess) {\n    <button\n        fd-shellbar-side-nav\n        fd-button\n        fdType=\"transparent\"\n        glyph=\"menu2\"\n        style=\"width: 2.75rem\"\n        (click)=\"$event.stopPropagation(); isOpenQuickAccess = !isOpenQuickAccess\"\n    ></button>\n    } @if (logo) {\n    <fd-shellbar-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    } @if (!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0) {\n    <fd-product-menu [control]=\"productMenuControl\" [closePopoverOnSelect]=\"true\" [items]=\"productMenuItems1\">\n    </fd-product-menu>\n    }\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }}</fd-shellbar-subtitle>\n    @if (!hideShellbarActions&& user && (userMenu?.length || !settings?.HideLanguage)) {\n    <fd-shellbar-actions [user]=\"user\" [userMenu]=\"userMenu\" #langRef>\n        @for (action of actions; track action) {\n        <fd-shellbar-action\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n            notificationLabel=\"login\"\n        >\n        </fd-shellbar-action>\n        } @if (deviceSize === 's' && userLoggedIn && !settings?.HideNotifications) {\n        <fd-shellbar-action\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"notificationCount.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        } @if (!settings?.HideNotifications && userLoggedIn) {\n        <fd-popover\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n        } @if (!settings?.HideLanguage && deviceSize !== 's' && multiLanguages) {\n        <fd-shellbar-action [glyph]=\"'world'\" [label]=\"'language'\" [fdMenuTrigger]=\"menu\" (callback)=\"(onLanguage)\">\n        </fd-shellbar-action>\n        } @if (!settings?.HideLanguage && deviceSize === 's' && multiLanguages) { @for (culture of cultures | keyvalue;\n        track culture) {\n        <fd-shellbar-action\n            [label]=\"culture.value\"\n            [callback]=\"onLanguage\"\n            class=\"culture-abbrivation\"\n            [glyph]=\"culture.key\"\n            [ngClass]=\"'flags'\"\n        >\n        </fd-shellbar-action>\n        } } @if (productSwitcher?.length) {\n        <fd-product-switch>\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        }\n    </fd-shellbar-actions>\n    }\n</fd-shellbar>\n} @if(showLoginButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"login-wrapper\"\n    [class.service-desk]=\"isServiceDesk\"\n>\n    <button\n        fd-button\n        [label]=\"'\u0648\u0631\u0648\u062F' | bbbTranslate\"\n        glyph=\"person-placeholder\"\n        [routerLink]=\"['/login']\"\n        fdType=\"emphasized\"\n    ></button>\n</div>\n}\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<div\n    class=\"tw-fixed tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    [ngClass]=\"isMobile ? 'tw-w-screen -tw-right-full' : 'tw-w-80 -tw-right-80'\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"QuickAccessTemplate\"></ng-container>\n</div>\n\n@if(isOpenQuickAccess) {\n<div\n    class=\"tw-fixed tw-right-0 tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-slate-800/[.5] tw-z-[90] tw-w-screen tw-backdrop-blur-sm\"\n    (click)=\"isOpenQuickAccess = false\"\n></div>\n}\n<fd-menu #menu>\n    <ul fd-list>\n        @for (culture of cultures | keyvalue; track culture) {\n        <li fd-list-item>\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" />\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                </span>\n            </a>\n        </li>\n        }\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    @if (!notifcationLoaded && notificationLoading === true) {\n    <div style=\"position: relative; height: 100px\">\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    }\n    <bt-notification-group\n        [notifications]=\"notifications\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"notificationLoading === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (showEvent)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n<ng-template #QuickAccessTemplate>\n    @if (!notifcationLoaded && notificationLoading === true) {\n    <div style=\"position: relative; height: 100px\">\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    }\n    <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display:contents;position:relative}: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{padding:0}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}.login-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0}.login-wrapper button{background-color:var(--sapShellColor);border-color:var(--sapButton_Emphasized_TextColor)}.login-wrapper.service-desk button{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i8$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i8$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i8$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i3$1.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3$1.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i7.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i7.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i7.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i7.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i9$3.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i9$3.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i10$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i10$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i10$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i11.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex"] }, { kind: "component", type: i11.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i11.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i11.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect"], outputs: ["searchOpen"] }, { kind: "component", type: i11.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i11.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i11.ShellbarSidenavDirective, selector: "[fdShellbarSidenav], [fd-shellbar-side-nav]" }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: PopoverAppFinderComponent, selector: "bt-popover-app-finder", outputs: ["closeMenu"] }, { kind: "component", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaShellbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-barsa-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (cssUrl) {\r\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\r\n} @if (cssCustomUrl) {\r\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\r\n} @if (userLoggedIn || allowAnonymous) {\r\n<fd-shellbar [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\r\n    @if (deviceSize === 's' && userLoggedIn && !settings?.HideQuickAccess) {\r\n    <fd-shellbar-action\r\n        [glyph]=\"'apps'\"\r\n        [label]=\"'Quick Access' | bbbTranslate\"\r\n        [notificationCount]=\"notificationCount.unread ?? 0\"\r\n        [notificationLabel]=\"'Quick Access' | bbbTranslate\"\r\n        [callback]=\"onOpenQuickAccess\"\r\n    >\r\n    </fd-shellbar-action>\r\n    }\r\n    <!--        @if (userLoggedIn && !settings?.HideQuickAccess) {-->\r\n    <!--            <fd-popover-->\r\n    <!--                [(isOpen)]=\"isOpenQuickAccess\"-->\r\n    <!--                [triggers]=\"[]\"-->\r\n    <!--                [focusTrapped]=\"true\"-->\r\n    <!--                [noArrow]=\"true\"-->\r\n    <!--                placement=\"bottom\"-->\r\n    <!--                title=\"Quick Access Popover\"-->\r\n    <!--                [focusAutoCapture]=\"true\"-->\r\n    <!--                [mobile]=\"deviceSize === 's'\"-->\r\n    <!--                #popoverComponent-->\r\n    <!--            >-->\r\n    <!--                <fd-popover-control>-->\r\n    <!--                    <fd-shellbar-action-->\r\n    <!--                        [glyph]=\"'grid'\"-->\r\n    <!--                        [label]=\"'Quick Access'\"-->\r\n    <!--                        [callback]=\"onOpenQuickAccess\"-->\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(&#45;&#45;sapContent_Shadow0)\">-->\r\n    <!--                    <ng-container-->\r\n    <!--                        *ngTemplateOutlet=\"QuickAccessTemplate\"-->\r\n    <!--                    ></ng-container>-->\r\n    <!--                </fd-popover-body>-->\r\n    <!--            </fd-popover>-->\r\n    <!--        }-->\r\n    @if (userLoggedIn && !settings?.HideQuickAccess) {\r\n    <button\r\n        fd-shellbar-side-nav\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        glyph=\"menu2\"\r\n        style=\"width: 2.75rem\"\r\n        (click)=\"$event.stopPropagation(); isOpenQuickAccess = !isOpenQuickAccess\"\r\n    ></button>\r\n    } @if (logo) {\r\n    <fd-shellbar-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    } @if (!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0) {\r\n    <fd-product-menu [control]=\"productMenuControl\" [closePopoverOnSelect]=\"true\" [items]=\"productMenuItems1\">\r\n    </fd-product-menu>\r\n    }\r\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }}</fd-shellbar-subtitle>\r\n    @if (user && (userMenu?.length || !settings?.HideLanguage)) {\r\n    <fd-shellbar-actions [user]=\"user\" [userMenu]=\"userMenu\" #langRef>\r\n        @for (action of actions; track action) {\r\n        <fd-shellbar-action [glyph]=\"action.Icon\" [callback]=\"action.Callback\" [label]=\"action.Label\">\r\n        </fd-shellbar-action>\r\n        } @if (deviceSize === 's' && userLoggedIn && !settings?.HideNotifications) {\r\n        <fd-shellbar-action\r\n            [glyph]=\"'bell'\"\r\n            [label]=\"'Notifications' | bbbTranslate\"\r\n            [notificationCount]=\"notificationCount.unread ?? 0\"\r\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\r\n            [callback]=\"onBellNotification\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } @if (!settings?.HideNotifications && userLoggedIn) {\r\n        <fd-popover\r\n            [(isOpen)]=\"isOpenNotificatoin\"\r\n            [triggers]=\"[]\"\r\n            [focusTrapped]=\"true\"\r\n            [noArrow]=\"true\"\r\n            placement=\"bottom\"\r\n            title=\"Notification Popover\"\r\n            [focusAutoCapture]=\"true\"\r\n            [mobile]=\"deviceSize === 's'\"\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                <ng-container\r\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\r\n                ></ng-container>\r\n            </fd-popover-body>\r\n        </fd-popover>\r\n        } @if (!settings?.HideLanguage && deviceSize !== 's' && multiLanguages) {\r\n        <fd-shellbar-action [glyph]=\"'world'\" [label]=\"'language'\" [fdMenuTrigger]=\"menu\" (callback)=\"(onLanguage)\">\r\n        </fd-shellbar-action>\r\n        } @if (!settings?.HideLanguage && deviceSize === 's' && multiLanguages) { @for (culture of cultures | keyvalue;\r\n        track culture) {\r\n        <fd-shellbar-action\r\n            [label]=\"culture.value\"\r\n            [callback]=\"onLanguage\"\r\n            class=\"culture-abbrivation\"\r\n            [glyph]=\"culture.key\"\r\n            [ngClass]=\"'flags'\"\r\n        >\r\n        </fd-shellbar-action>\r\n        } } @if (productSwitcher?.length) {\r\n        <fd-product-switch>\r\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\r\n            </fd-product-switch-body>\r\n        </fd-product-switch>\r\n        }\r\n    </fd-shellbar-actions>\r\n    }\r\n</fd-shellbar>\r\n}\r\n<ng-template #loading>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<div\r\n    class=\"tw-fixed tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\r\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\r\n    [ngClass]=\"isMobile ? 'tw-w-screen -tw-right-full' : 'tw-w-80 -tw-right-80'\"\r\n    (click)=\"$event.stopPropagation()\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"QuickAccessTemplate\"></ng-container>\r\n</div>\r\n\r\n@if(isOpenQuickAccess) {\r\n<div\r\n    class=\"tw-fixed tw-right-0 tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-slate-800/[.5] tw-z-[90] tw-w-screen tw-backdrop-blur-sm\"\r\n    (click)=\"isOpenQuickAccess = false\"\r\n></div>\r\n}\r\n<fd-menu #menu>\r\n    <ul fd-list>\r\n        @for (culture of cultures | keyvalue; track culture) {\r\n        <li fd-list-item>\r\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\r\n                <span fd-list-title>\r\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" />\r\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\r\n                </span>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</fd-menu>\r\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\r\n    @if (!notifcationLoaded && notificationLoading === true) {\r\n    <div style=\"position: relative; height: 100px\">\r\n        <bsu-mask size=\"s\"></bsu-mask>\r\n    </div>\r\n    }\r\n    <bt-notification-group\r\n        [notifications]=\"notifications\"\r\n        [notificationCount]=\"notificationCount\"\r\n        [loading]=\"notificationLoading === true\"\r\n        (viewed)=\"onNotificationItemViewed($event)\"\r\n        (remove)=\"onRemoveNotifications($event)\"\r\n        (showEvent)=\"popoverComponent.close(); onShowNotification($event)\"\r\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\r\n        (loadMore)=\"onNotificationLoadMore()\"\r\n        [deviceSize]=\"deviceSize\"\r\n    ></bt-notification-group>\r\n</ng-template>\r\n<ng-template #QuickAccessTemplate>\r\n    @if (!notifcationLoaded && notificationLoading === true) {\r\n    <div style=\"position: relative; height: 100px\">\r\n        <bsu-mask size=\"s\"></bsu-mask>\r\n    </div>\r\n    }\r\n    <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder>\r\n</ng-template>\r\n\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body class=\"mobile\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\r\n            ></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:contents}: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{padding:0}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}\n"] }]
+            args: [{ selector: 'bt-barsa-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (cssUrl) {\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n} @if (cssCustomUrl) {\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n} @if (userLoggedIn || allowAnonymous) {\n<fd-shellbar [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    @if (deviceSize === 's' && userLoggedIn && !settings?.HideQuickAccess) {\n    <fd-shellbar-action\n        [glyph]=\"'apps'\"\n        [label]=\"'Quick Access' | bbbTranslate\"\n        [notificationCount]=\"notificationCount.unread ?? 0\"\n        [notificationLabel]=\"'Quick Access' | bbbTranslate\"\n        [callback]=\"onOpenQuickAccess\"\n    >\n    </fd-shellbar-action>\n    } @if (userLoggedIn && !settings?.HideQuickAccess) {\n    <button\n        fd-shellbar-side-nav\n        fd-button\n        fdType=\"transparent\"\n        glyph=\"menu2\"\n        style=\"width: 2.75rem\"\n        (click)=\"$event.stopPropagation(); isOpenQuickAccess = !isOpenQuickAccess\"\n    ></button>\n    } @if (logo) {\n    <fd-shellbar-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    } @if (!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0) {\n    <fd-product-menu [control]=\"productMenuControl\" [closePopoverOnSelect]=\"true\" [items]=\"productMenuItems1\">\n    </fd-product-menu>\n    }\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }}</fd-shellbar-subtitle>\n    @if (!hideShellbarActions&& user && (userMenu?.length || !settings?.HideLanguage)) {\n    <fd-shellbar-actions [user]=\"user\" [userMenu]=\"userMenu\" #langRef>\n        @for (action of actions; track action) {\n        <fd-shellbar-action\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n            notificationLabel=\"login\"\n        >\n        </fd-shellbar-action>\n        } @if (deviceSize === 's' && userLoggedIn && !settings?.HideNotifications) {\n        <fd-shellbar-action\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"notificationCount.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        } @if (!settings?.HideNotifications && userLoggedIn) {\n        <fd-popover\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n        } @if (!settings?.HideLanguage && deviceSize !== 's' && multiLanguages) {\n        <fd-shellbar-action [glyph]=\"'world'\" [label]=\"'language'\" [fdMenuTrigger]=\"menu\" (callback)=\"(onLanguage)\">\n        </fd-shellbar-action>\n        } @if (!settings?.HideLanguage && deviceSize === 's' && multiLanguages) { @for (culture of cultures | keyvalue;\n        track culture) {\n        <fd-shellbar-action\n            [label]=\"culture.value\"\n            [callback]=\"onLanguage\"\n            class=\"culture-abbrivation\"\n            [glyph]=\"culture.key\"\n            [ngClass]=\"'flags'\"\n        >\n        </fd-shellbar-action>\n        } } @if (productSwitcher?.length) {\n        <fd-product-switch>\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        }\n    </fd-shellbar-actions>\n    }\n</fd-shellbar>\n} @if(showLoginButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"login-wrapper\"\n    [class.service-desk]=\"isServiceDesk\"\n>\n    <button\n        fd-button\n        [label]=\"'\u0648\u0631\u0648\u062F' | bbbTranslate\"\n        glyph=\"person-placeholder\"\n        [routerLink]=\"['/login']\"\n        fdType=\"emphasized\"\n    ></button>\n</div>\n}\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<div\n    class=\"tw-fixed tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    [ngClass]=\"isMobile ? 'tw-w-screen -tw-right-full' : 'tw-w-80 -tw-right-80'\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"QuickAccessTemplate\"></ng-container>\n</div>\n\n@if(isOpenQuickAccess) {\n<div\n    class=\"tw-fixed tw-right-0 tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-slate-800/[.5] tw-z-[90] tw-w-screen tw-backdrop-blur-sm\"\n    (click)=\"isOpenQuickAccess = false\"\n></div>\n}\n<fd-menu #menu>\n    <ul fd-list>\n        @for (culture of cultures | keyvalue; track culture) {\n        <li fd-list-item>\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" />\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                </span>\n            </a>\n        </li>\n        }\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    @if (!notifcationLoaded && notificationLoading === true) {\n    <div style=\"position: relative; height: 100px\">\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    }\n    <bt-notification-group\n        [notifications]=\"notifications\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"notificationLoading === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (showEvent)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n<ng-template #QuickAccessTemplate>\n    @if (!notifcationLoaded && notificationLoading === true) {\n    <div style=\"position: relative; height: 100px\">\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    }\n    <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display:contents;position:relative}: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{padding:0}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}.login-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0}.login-wrapper button{background-color:var(--sapShellColor);border-color:var(--sapButton_Emphasized_TextColor)}.login-wrapper.service-desk button{background-color:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i1.NotificationService }, { type: i1$1.DialogService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2678,6 +2709,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Input
             }], isMobile: [{
                 type: Input
+            }], hideShellbarActions: [{
+                type: Input
+            }], showLoginButton: [{
+                type: Input
+            }], isTablet: [{
+                type: Input
+            }], isDesktop: [{
+                type: Input
             }], openNotificationPanel: [{
                 type: Output
             }], openQuickAccessPanel: [{
@@ -2770,6 +2809,8 @@ class ShellbarComponent extends BaseComponent {
         this._viewedNotifications = [];
         this.bodyClick = ';$("body").click()';
         this.isMobile = getDeviceIsMobile();
+        this.isDesktop = getDeviceIsDesktop();
+        this.isTablet = getDeviceIsTablet();
         this.onOpenNotification = () => {
             this.isOpenNotificatoin = true;
             this._handleOpenNotificationPanel();
@@ -2874,11 +2915,11 @@ class ShellbarComponent extends BaseComponent {
         BarsaApi.Bw.NavigateTo('/');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ShellbarComponent, deps: [{ token: i1.BbbTranslatePipe }, { token: i1.PortalService }, { token: i1.BreadcrumbService }, { token: TilesService }, { token: i0.ChangeDetectorRef }, { token: i3$4.DomSanitizer }, { token: i1.NotificationService }, { token: APP_VERSION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ShellbarComponent, selector: "bt-shellbar", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notifiationCountLoaded$ | async; as notifiationCountLoaded) { @if\r\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\r\n<bt-barsa-shellbar\r\n    [cssUrl]=\"cssUrl$ | async\"\r\n    [cssCustomUrl]=\"cssCustomUrl$ | async\"\r\n    [userLoggedIn]=\"true\"\r\n    [allowAnonymous]=\"allowAnonymous\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [settings]=\"settings\"\r\n    [isMobile]=\"isMobile\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [notificationCount]=\"(notificationsCount$ | async)!!\"\r\n    [notifications]=\"(notifications$ | async) ?? []\"\r\n    [notifcationLoaded]=\"notifcationLoaded\"\r\n    [notificationLoading]=\"(notificationLoading$ | async) === true\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [actions]=\"actions\"\r\n    [userMenu]=\"userMenu\"\r\n    [productSwitcher]=\"productSwitcher\"\r\n    [subtitle]=\"subtitle\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n    (notificationViewed)=\"onNotificationItemViewed($event)\"\r\n    (notifiationActionClick)=\"onNotificationAction($event)\"\r\n    (removeNotification)=\"onRemoveNotifications($event)\"\r\n    (notificationLoadMore)=\"onNotificationLoadMore()\"\r\n    (openNotificationPanel)=\"onHandleOpenNotificationPanel()\"\r\n>\r\n</bt-barsa-shellbar>\r\n} } } } @else { @if (notificationsCount$ | async; as notificationCount) {\r\n<bt-barsa-shellbar\r\n    [cssUrl]=\"''\"\r\n    [cssCustomUr]=\"''\"\r\n    [userLoggedIn]=\"false\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [userMenu]=\"userMenu\"\r\n    [logo]=\"logo\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [allowAnonymous]=\"allowAnonymous\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [actions]=\"actions\"\r\n    [userMenu]=\"userMenu\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [productSwitcher]=\"productSwitcher\"\r\n    [subtitle]=\"subtitle\"\r\n    [settings]=\"settings\"\r\n    [notificationCount]=\"{ unread: 0, all: 0 }\"\r\n    [notifications]=\"[]\"\r\n    [notifcationLoaded]=\"true\"\r\n    [notificationLoading]=\"false\"\r\n    [cultures]=\"cultures\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n>\r\n</bt-barsa-shellbar>\r\n} }\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: ["cssCustomUrl", "cssUrl", "allowAnonymous", "multiLanguages", "userLoggedIn", "settings", "productMenuControl", "deviceSize", "cultures", "shellbarData", "notificationCount", "notifcationLoaded", "notificationLoading", "notifications", "productMenuItems1", "bodyClick", "logo", "actions", "userMenu", "productSwitcher", "subtitle", "isMobile"], outputs: ["openNotificationPanel", "openQuickAccessPanel", "cultureChanged", "notificationLoadMore", "removeNotification", "notifiationActionClick", "notificationViewed"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ShellbarComponent, selector: "bt-shellbar", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notifiationCountLoaded$ | async; as notifiationCountLoaded) { @if\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\n<bt-barsa-shellbar\n    [cssUrl]=\"cssUrl$ | async\"\n    [cssCustomUrl]=\"cssCustomUrl$ | async\"\n    [userLoggedIn]=\"true\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"deviceSize\"\n    [shellbarData]=\"shellbarData\"\n    [productMenuControl]=\"productMenuControl\"\n    [settings]=\"settings\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [multiLanguages]=\"multiLanguages\"\n    [notificationCount]=\"(notificationsCount$ | async)!!\"\n    [notifications]=\"(notifications$ | async) ?? []\"\n    [notifcationLoaded]=\"notifcationLoaded\"\n    [notificationLoading]=\"(notificationLoading$ | async) === true\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [productMenuItems1]=\"productMenuItems1\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n    (notificationViewed)=\"onNotificationItemViewed($event)\"\n    (notifiationActionClick)=\"onNotificationAction($event)\"\n    (removeNotification)=\"onRemoveNotifications($event)\"\n    (notificationLoadMore)=\"onNotificationLoadMore()\"\n    (openNotificationPanel)=\"onHandleOpenNotificationPanel()\"\n>\n</bt-barsa-shellbar>\n} } } } @else { @if (notificationsCount$ | async; as notificationCount) {\n<bt-barsa-shellbar\n    [cssUrl]=\"''\"\n    [cssCustomUr]=\"''\"\n    [userLoggedIn]=\"false\"\n    [multiLanguages]=\"multiLanguages\"\n    [userMenu]=\"userMenu\"\n    [logo]=\"logo\"\n    [productMenuItems1]=\"productMenuItems1\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    [shellbarData]=\"shellbarData\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productMenuControl]=\"productMenuControl\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [settings]=\"settings\"\n    [notificationCount]=\"{ unread: 0, all: 0 }\"\n    [notifications]=\"[]\"\n    [notifcationLoaded]=\"true\"\n    [notificationLoading]=\"false\"\n    [hideShellbarActions]=\"true\"\n    [showLoginButton]=\"true\"\n    [cultures]=\"cultures\"\n    [productMenuItems1]=\"productMenuItems1\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n>\n</bt-barsa-shellbar>\n} }\n", styles: [":host{display:block;position:relative}\n"], dependencies: [{ kind: "component", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: ["cssCustomUrl", "cssUrl", "allowAnonymous", "multiLanguages", "userLoggedIn", "settings", "productMenuControl", "deviceSize", "cultures", "shellbarData", "notificationCount", "notifcationLoaded", "notificationLoading", "notifications", "productMenuItems1", "bodyClick", "logo", "actions", "userMenu", "productSwitcher", "subtitle", "isMobile", "hideShellbarActions", "showLoginButton", "isTablet", "isDesktop"], outputs: ["openNotificationPanel", "openQuickAccessPanel", "cultureChanged", "notificationLoadMore", "removeNotification", "notifiationActionClick", "notificationViewed"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ShellbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notifiationCountLoaded$ | async; as notifiationCountLoaded) { @if\r\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\r\n<bt-barsa-shellbar\r\n    [cssUrl]=\"cssUrl$ | async\"\r\n    [cssCustomUrl]=\"cssCustomUrl$ | async\"\r\n    [userLoggedIn]=\"true\"\r\n    [allowAnonymous]=\"allowAnonymous\"\r\n    [deviceSize]=\"deviceSize\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [settings]=\"settings\"\r\n    [isMobile]=\"isMobile\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [notificationCount]=\"(notificationsCount$ | async)!!\"\r\n    [notifications]=\"(notifications$ | async) ?? []\"\r\n    [notifcationLoaded]=\"notifcationLoaded\"\r\n    [notificationLoading]=\"(notificationLoading$ | async) === true\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [actions]=\"actions\"\r\n    [userMenu]=\"userMenu\"\r\n    [productSwitcher]=\"productSwitcher\"\r\n    [subtitle]=\"subtitle\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n    (notificationViewed)=\"onNotificationItemViewed($event)\"\r\n    (notifiationActionClick)=\"onNotificationAction($event)\"\r\n    (removeNotification)=\"onRemoveNotifications($event)\"\r\n    (notificationLoadMore)=\"onNotificationLoadMore()\"\r\n    (openNotificationPanel)=\"onHandleOpenNotificationPanel()\"\r\n>\r\n</bt-barsa-shellbar>\r\n} } } } @else { @if (notificationsCount$ | async; as notificationCount) {\r\n<bt-barsa-shellbar\r\n    [cssUrl]=\"''\"\r\n    [cssCustomUr]=\"''\"\r\n    [userLoggedIn]=\"false\"\r\n    [multiLanguages]=\"multiLanguages\"\r\n    [userMenu]=\"userMenu\"\r\n    [logo]=\"logo\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    [allowAnonymous]=\"allowAnonymous\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [shellbarData]=\"shellbarData\"\r\n    [cultures]=\"cultures\"\r\n    [logo]=\"logo\"\r\n    [actions]=\"actions\"\r\n    [userMenu]=\"userMenu\"\r\n    [productMenuControl]=\"productMenuControl\"\r\n    [productSwitcher]=\"productSwitcher\"\r\n    [subtitle]=\"subtitle\"\r\n    [settings]=\"settings\"\r\n    [notificationCount]=\"{ unread: 0, all: 0 }\"\r\n    [notifications]=\"[]\"\r\n    [notifcationLoaded]=\"true\"\r\n    [notificationLoading]=\"false\"\r\n    [cultures]=\"cultures\"\r\n    [productMenuItems1]=\"productMenuItems1\"\r\n    (cultureChanged)=\"onCultureChanged($event)\"\r\n>\r\n</bt-barsa-shellbar>\r\n} }\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notifiationCountLoaded$ | async; as notifiationCountLoaded) { @if\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\n<bt-barsa-shellbar\n    [cssUrl]=\"cssUrl$ | async\"\n    [cssCustomUrl]=\"cssCustomUrl$ | async\"\n    [userLoggedIn]=\"true\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"deviceSize\"\n    [shellbarData]=\"shellbarData\"\n    [productMenuControl]=\"productMenuControl\"\n    [settings]=\"settings\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [multiLanguages]=\"multiLanguages\"\n    [notificationCount]=\"(notificationsCount$ | async)!!\"\n    [notifications]=\"(notifications$ | async) ?? []\"\n    [notifcationLoaded]=\"notifcationLoaded\"\n    [notificationLoading]=\"(notificationLoading$ | async) === true\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [productMenuItems1]=\"productMenuItems1\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n    (notificationViewed)=\"onNotificationItemViewed($event)\"\n    (notifiationActionClick)=\"onNotificationAction($event)\"\n    (removeNotification)=\"onRemoveNotifications($event)\"\n    (notificationLoadMore)=\"onNotificationLoadMore()\"\n    (openNotificationPanel)=\"onHandleOpenNotificationPanel()\"\n>\n</bt-barsa-shellbar>\n} } } } @else { @if (notificationsCount$ | async; as notificationCount) {\n<bt-barsa-shellbar\n    [cssUrl]=\"''\"\n    [cssCustomUr]=\"''\"\n    [userLoggedIn]=\"false\"\n    [multiLanguages]=\"multiLanguages\"\n    [userMenu]=\"userMenu\"\n    [logo]=\"logo\"\n    [productMenuItems1]=\"productMenuItems1\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    [shellbarData]=\"shellbarData\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productMenuControl]=\"productMenuControl\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [settings]=\"settings\"\n    [notificationCount]=\"{ unread: 0, all: 0 }\"\n    [notifications]=\"[]\"\n    [notifcationLoaded]=\"true\"\n    [notificationLoading]=\"false\"\n    [hideShellbarActions]=\"true\"\n    [showLoginButton]=\"true\"\n    [cultures]=\"cultures\"\n    [productMenuItems1]=\"productMenuItems1\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n>\n</bt-barsa-shellbar>\n} }\n", styles: [":host{display:block;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: i1.BbbTranslatePipe }, { type: i1.PortalService }, { type: i1.BreadcrumbService }, { type: TilesService }, { type: i0.ChangeDetectorRef }, { type: i3$4.DomSanitizer }, { type: i1.NotificationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_VERSION]