barsa-tiles 2.0.19 → 2.0.20

package/esm2022/lib/barsa-shellbar/barsa-shellbar.component.mjs

@@ -113,11 +113,11 @@ export 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: i2.DialogService }, { token: i3.Router }, { token: i1.PortalService }, { 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", hideShellbarActions: "hideShellbarActions", showExtraButton: "showExtraButton", isTablet: "isTablet", isDesktop: "isDesktop", isServiceDesk: "isServiceDesk", isOpenQuickAccess: "isOpenQuickAccess", sideMenuTemplate: "sideMenuTemplate" }, outputs: { isOpenQuickAccessChanged: "isOpenQuickAccessChanged", 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 (sideMenuTemplate) {\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 (sideMenuTemplate) {\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(); isOpenQuickAccessChanged.emit(!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(showExtraButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"extra-button-wrapper\"\n    [class.service-desk]=\"isServiceDesk\"\n>\n    <ng-content select=\"button\"></ng-content>\n</div>\n}\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<div\n    *ngIf=\"sideMenuTemplate\"\n    class=\"sidemenu tw-fixed tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.tw-w-screen]=\"isMobile\"\n    [class.-tw-right-full]=\"isMobile\"\n    [class.tw-w-96]=\"!isMobile\"\n    [class.-tw-right-96]=\"!isMobile\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></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)=\"isOpenQuickAccessChanged.emit(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\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:block;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 ::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}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.sidemenu{top:var(--fdShellbar_Height);height:calc(100vh- var(--fdShellbar_Height))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i7.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i7.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i9.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i10.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i11.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i11.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i11.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i12.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex"] }, { kind: "component", type: i12.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i12.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i12.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect"], outputs: ["searchOpen"] }, { kind: "component", type: i12.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i12.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i12.ShellbarSidenavDirective, selector: "[fdShellbarSidenav], [fd-shellbar-side-nav]" }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i13.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i14.NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i4.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", showExtraButton: "showExtraButton", isTablet: "isTablet", isDesktop: "isDesktop", isServiceDesk: "isServiceDesk", isOpenQuickAccess: "isOpenQuickAccess", sideMenuTemplate: "sideMenuTemplate" }, outputs: { isOpenQuickAccessChanged: "isOpenQuickAccessChanged", 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 (sideMenuTemplate) {\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 (sideMenuTemplate) {\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(); isOpenQuickAccessChanged.emit(!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(showExtraButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"extra-button-wrapper\"\n    [class.service-desk]=\"isServiceDesk\"\n>\n    <ng-content select=\"button\"></ng-content>\n</div>\n}\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<div\n    *ngIf=\"sideMenuTemplate\"\n    class=\"sidemenu tw-fixed tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.tw-w-screen]=\"isMobile\"\n    [class.-tw-right-full]=\"isMobile\"\n    [class.tw-w-96]=\"!isMobile\"\n    [class.-tw-right-96]=\"!isMobile\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></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)=\"isOpenQuickAccessChanged.emit(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\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:block;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 ::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}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.sidemenu{top:var(--fdShellbar_Height);height:calc(100vh - var(--fdShellbar_Height))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i7.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i7.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i9.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i10.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i11.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i11.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i11.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i12.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex"] }, { kind: "component", type: i12.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i12.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i12.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect"], outputs: ["searchOpen"] }, { kind: "component", type: i12.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i12.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i12.ShellbarSidenavDirective, selector: "[fdShellbarSidenav], [fd-shellbar-side-nav]" }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i13.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i14.NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i4.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) {\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 (sideMenuTemplate) {\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 (sideMenuTemplate) {\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(); isOpenQuickAccessChanged.emit(!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(showExtraButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"extra-button-wrapper\"\n    [class.service-desk]=\"isServiceDesk\"\n>\n    <ng-content select=\"button\"></ng-content>\n</div>\n}\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<div\n    *ngIf=\"sideMenuTemplate\"\n    class=\"sidemenu tw-fixed tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.tw-w-screen]=\"isMobile\"\n    [class.-tw-right-full]=\"isMobile\"\n    [class.tw-w-96]=\"!isMobile\"\n    [class.-tw-right-96]=\"!isMobile\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></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)=\"isOpenQuickAccessChanged.emit(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\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:block;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 ::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}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.sidemenu{top:var(--fdShellbar_Height);height:calc(100vh- var(--fdShellbar_Height))}\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 (sideMenuTemplate) {\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 (sideMenuTemplate) {\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(); isOpenQuickAccessChanged.emit(!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(showExtraButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"extra-button-wrapper\"\n    [class.service-desk]=\"isServiceDesk\"\n>\n    <ng-content select=\"button\"></ng-content>\n</div>\n}\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<div\n    *ngIf=\"sideMenuTemplate\"\n    class=\"sidemenu tw-fixed tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.tw-w-screen]=\"isMobile\"\n    [class.-tw-right-full]=\"isMobile\"\n    [class.tw-w-96]=\"!isMobile\"\n    [class.-tw-right-96]=\"!isMobile\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></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)=\"isOpenQuickAccessChanged.emit(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\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:block;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 ::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}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.sidemenu{top:var(--fdShellbar_Height);height:calc(100vh - var(--fdShellbar_Height))}\n"] }]
         }], ctorParameters: () => [{ type: i1.NotificationService }, { type: i2.DialogService }, { type: i3.Router }, { type: i1.PortalService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]

package/fesm2022/barsa-tiles.mjs

@@ -2535,11 +2535,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: i3$3.Router }, { token: i1.PortalService }, { 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", hideShellbarActions: "hideShellbarActions", showExtraButton: "showExtraButton", isTablet: "isTablet", isDesktop: "isDesktop", isServiceDesk: "isServiceDesk", isOpenQuickAccess: "isOpenQuickAccess", sideMenuTemplate: "sideMenuTemplate" }, outputs: { isOpenQuickAccessChanged: "isOpenQuickAccessChanged", 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 (sideMenuTemplate) {\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 (sideMenuTemplate) {\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(); isOpenQuickAccessChanged.emit(!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(showExtraButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"extra-button-wrapper\"\n    [class.service-desk]=\"isServiceDesk\"\n>\n    <ng-content select=\"button\"></ng-content>\n</div>\n}\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<div\n    *ngIf=\"sideMenuTemplate\"\n    class=\"sidemenu tw-fixed tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.tw-w-screen]=\"isMobile\"\n    [class.-tw-right-full]=\"isMobile\"\n    [class.tw-w-96]=\"!isMobile\"\n    [class.-tw-right-96]=\"!isMobile\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></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)=\"isOpenQuickAccessChanged.emit(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\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:block;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 ::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}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.sidemenu{top:var(--fdShellbar_Height);height:calc(100vh- var(--fdShellbar_Height))}\n"], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.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: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3.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: i10$1.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i10$1.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i11.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i11.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i11.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i12.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex"] }, { kind: "component", type: i12.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i12.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i12.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect"], outputs: ["searchOpen"] }, { kind: "component", type: i12.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i12.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i12.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: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i4$1.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", showExtraButton: "showExtraButton", isTablet: "isTablet", isDesktop: "isDesktop", isServiceDesk: "isServiceDesk", isOpenQuickAccess: "isOpenQuickAccess", sideMenuTemplate: "sideMenuTemplate" }, outputs: { isOpenQuickAccessChanged: "isOpenQuickAccessChanged", 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 (sideMenuTemplate) {\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 (sideMenuTemplate) {\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(); isOpenQuickAccessChanged.emit(!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(showExtraButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"extra-button-wrapper\"\n    [class.service-desk]=\"isServiceDesk\"\n>\n    <ng-content select=\"button\"></ng-content>\n</div>\n}\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<div\n    *ngIf=\"sideMenuTemplate\"\n    class=\"sidemenu tw-fixed tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.tw-w-screen]=\"isMobile\"\n    [class.-tw-right-full]=\"isMobile\"\n    [class.tw-w-96]=\"!isMobile\"\n    [class.-tw-right-96]=\"!isMobile\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></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)=\"isOpenQuickAccessChanged.emit(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\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:block;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 ::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}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.sidemenu{top:var(--fdShellbar_Height);height:calc(100vh - var(--fdShellbar_Height))}\n"], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.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: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3.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: i10$1.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i10$1.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i11.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i11.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i11.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i12.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex"] }, { kind: "component", type: i12.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i12.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i12.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect"], outputs: ["searchOpen"] }, { kind: "component", type: i12.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i12.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i12.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: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i4$1.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) {\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 (sideMenuTemplate) {\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 (sideMenuTemplate) {\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(); isOpenQuickAccessChanged.emit(!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(showExtraButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"extra-button-wrapper\"\n    [class.service-desk]=\"isServiceDesk\"\n>\n    <ng-content select=\"button\"></ng-content>\n</div>\n}\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<div\n    *ngIf=\"sideMenuTemplate\"\n    class=\"sidemenu tw-fixed tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.tw-w-screen]=\"isMobile\"\n    [class.-tw-right-full]=\"isMobile\"\n    [class.tw-w-96]=\"!isMobile\"\n    [class.-tw-right-96]=\"!isMobile\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></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)=\"isOpenQuickAccessChanged.emit(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\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:block;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 ::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}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.sidemenu{top:var(--fdShellbar_Height);height:calc(100vh- var(--fdShellbar_Height))}\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 (sideMenuTemplate) {\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 (sideMenuTemplate) {\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(); isOpenQuickAccessChanged.emit(!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(showExtraButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"extra-button-wrapper\"\n    [class.service-desk]=\"isServiceDesk\"\n>\n    <ng-content select=\"button\"></ng-content>\n</div>\n}\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<div\n    *ngIf=\"sideMenuTemplate\"\n    class=\"sidemenu tw-fixed tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.tw-w-screen]=\"isMobile\"\n    [class.-tw-right-full]=\"isMobile\"\n    [class.tw-w-96]=\"!isMobile\"\n    [class.-tw-right-96]=\"!isMobile\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"sideMenuTemplate\"></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)=\"isOpenQuickAccessChanged.emit(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\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:block;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 ::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}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}.sidemenu{top:var(--fdShellbar_Height);height:calc(100vh - var(--fdShellbar_Height))}\n"] }]
         }], ctorParameters: () => [{ type: i1.NotificationService }, { type: i1$1.DialogService }, { type: i3$3.Router }, { type: i1.PortalService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]