barsa-tiles 2.0.6 → 2.0.7

package/fesm2022/barsa-tiles.mjs

@@ -43,8 +43,8 @@ import * as i3$4 from '@angular/platform-browser';
 import * as i9$3 from '@fundamental-ngx/core/product-switch';
 import * as i10$1 from '@fundamental-ngx/core/popover';
 import * as i11 from '@fundamental-ngx/core/shellbar';
-import * as i4$3 from '@fundamental-ngx/core/content-density';
-import * as i4$4 from '@fundamental-ngx/core/notification';
+import * as i4$3 from '@fundamental-ngx/core/notification';
+import * as i4$4 from '@fundamental-ngx/core/content-density';
 import { CdkTableModule } from '@angular/cdk/table';
 import { IconTabBarComponent, IconTabBarTabComponent, IconTabBarTabContentDirective } from '@fundamental-ngx/platform';
 
@@ -2302,135 +2302,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             args: [{ selector: 'bt-profile-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [edit]=\"edit\"\n    [backColor]=\"backColor\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content>\n        @if (fileId) {\n        <span\n            class=\"profile\"\n            fd-tile-profile-img\n            [backgroundImage]=\"fileId | picFieldSrc: 'GetPictureFromFileInfo':null\"\n        ></span>\n        } @else { @if (settings.Icon) {\n        <fd-icon\n            [font]=\"settings.Icon | sapFont\"\n            fd-tile-profile-img\n            style=\"font-size: 2rem\"\n            [glyph]=\"settings.Icon\"\n        ></fd-icon>\n        } @else {\n        <fd-icon font=\"SAP-icons-TNT\" fd-tile-profile-img style=\"font-size: 2rem\" glyph=\"user\"></fd-icon>\n        } }\n    </div>\n</bt-tile>\n", styles: [".profile{background-size:contain;background-repeat:no-repeat}\n"] }]
         }] });
 
-class FilterAppsGroupedPipe {
-    transform(value, term) {
-        return value?.filter((cat) => !!cat.Apps.filter((app) => app.$Caption.includes(term ?? ''))?.length);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsGroupedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsGroupedPipe, isStandalone: true, name: "filterAppsGrouped", pure: false }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsGroupedPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'filterAppsGrouped',
-                    standalone: true,
-                    pure: false
-                }]
-        }] });
-class FilterAppsPipe {
-    transform(value, term) {
-        if (!Array.isArray(value) || !term) {
-            return value;
-        }
-        return value?.filter((app) => app.$Caption.includes(term));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsPipe, isStandalone: true, name: "filterApps", pure: false }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'filterApps',
-                    standalone: true,
-                    pure: false
-                }]
-        }] });
-
-class PopoverAppFinderComponent extends BaseComponent {
-    constructor(_cdr, _dialogService, _appFinderService, _el, _contentDensityService) {
-        super();
-        this._cdr = _cdr;
-        this._dialogService = _dialogService;
-        this._appFinderService = _appFinderService;
-        this._el = _el;
-        this.closeMenu = new EventEmitter();
-        this.isAllSelected = true;
-        this.contentDensity$ = _contentDensityService.contentDensity.asObservable();
-        this.appGroups$ = this._appFinderService.appGroups$.pipe(map((appGroups) => {
-            appGroups.forEach((cat) => {
-                this._appFinderService.loadAppsByAppGroup(appGroups, cat);
-            });
-            return appGroups;
-        }));
-        this.selectedAppGroup$ = this._appFinderService.selectedAppGroup$;
-        this.selectedAppGroupId$ = this._appFinderService.selectedAppGroupId$;
-        this.deviceSize$ = this._appFinderService.deviceSize$;
-        this.pinnedAppInAppTileGroups$ = this._appFinderService.pinnedAppInAppTileGroups$;
-        this.mobile$ = this.deviceSize$.pipe(map((c) => c === 's'));
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.contentHeight = 'calc(' + this._el.nativeElement.offsetHeight + 'px - 2.75rem)';
-        this.sideContentSize$ = this.deviceSize$.pipe(takeUntil(this._onDestroy$), map((deviceSize) => {
-            switch (deviceSize) {
-                case 's':
-                    return 'sm';
-                case 'm':
-                    return 'md';
-                case 'l':
-                    return 'lg';
-                case 'xl':
-                    return 'xl';
-                default:
-                    return 'l';
-            }
-        }));
-    }
-    onSelectedAppGroupChange(appGroupId) {
-        this._changeGroup(appGroupId);
-    }
-    onPinClick(app) {
-        const pinnedAppInTileGroups = this._appFinderService.loadPinnedAppInTileGroups(app);
-        const appTileGroups = this._appFinderService.appTileGroups;
-        const deviceSize = this._appFinderService.deviceSize;
-        const mobile = deviceSize === 's';
-        this._dialogService
-            .open(PinTileComponent, {
-            data: { app, pinnedAppInTileGroups, appTileGroups },
-            minWidth: '350px',
-            minHeight: '420px',
-            draggable: false,
-            mobile,
-            resizable: false,
-            verticalPadding: false,
-            backdropClickCloseable: false
-        })
-            .afterClosed.subscribe((result) => {
-            this._appTileGroupsPinChange(result);
-        });
-    }
-    onRefresh() { }
-    async _appTileGroupsPinChange(result) {
-        try {
-            // Will try to ask for permission
-            this._appFinderService.pinTileChanged(result.appTileGroupsPin, result.app, () => {
-                this._cdr.detectChanges();
-            });
-        }
-        catch (err) {
-            // show msg error
-        }
-        finally {
-            // show toast successful
-        }
-    }
-    _changeGroup(appGroupId) {
-        this.isAllSelected = false;
-        this._appFinderService.selectAppGroup(appGroupId);
-        this._cdr.detectChanges();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: PopoverAppFinderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DialogService }, { token: AppFinderService }, { token: i0.ElementRef }, { token: i1$1.ContentDensityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: PopoverAppFinderComponent, selector: "bt-popover-app-finder", outputs: { closeMenu: "closeMenu" }, host: { classAttribute: "!tw-min-h-min" }, usesInheritance: true, ngImport: i0, template: "<!--@for (cat of appGroups$ | async; track cat.Id) {-->\n<!--    <div class=\"px-4 py-2 font-lg\">-->\n<!--        <p class=\"font-bold\">{{ cat.$Caption }}</p>-->\n<!--    </div>-->\n<!--    <div class=\"grid grid-cols-4 gap-2 p-2\">-->\n<!--        @for (app of cat.Apps; track app.Id) {-->\n<!--            <div class=\"flex flex-col items-center w-24 gap-1 border border-transparent hover:border-gray-300 bg-transparent hover:bg-gray-100 transition-all rounded-lg p-2 cursor-pointer\">-->\n<!--                <div class=\"size-12 rounded-full bg-gray-300\"></div>-->\n<!--                <span class=\"truncate w-20 text-center\">-->\n<!--                {{ app.$Caption }}</span>-->\n<!--            </div>-->\n<!--        }-->\n<!--    </div>-->\n<!--}-->\n<div>\n    <div class=\"!tw-px-4 !tw-pt-2\" fd-form-item>\n        <fd-input-group\n            glyph=\"decline\"\n            glyphAriaLabel=\"Clear\"\n            placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\n            [button]=\"true\"\n            [disabled]=\"false\"\n            [(ngModel)]=\"searchTerm\"\n            (addOnButtonClicked)=\"searchTerm = ''\"\n        >\n        </fd-input-group>\n    </div>\n    @for (cat of appGroups$ | async | filterAppsGrouped:searchTerm; track cat.Id) {\n    <fd-panel\n        fdCompact\n        expandAriaLabel=\"Panel Expand\"\n        expandAriaLabelledBy=\"panel-compact-1\"\n        [expanded]=\"!!searchTerm?.length\"\n    >\n        <h5 fd-panel-title id=\"panel-compact-1\">{{ cat.Title }}</h5>\n        <div fd-panel-content ariaLabel=\"Panel Content\" id=\"panel-content-3\" class=\"!p-0\">\n            <ul fd-list [noBorder]=\"false\">\n                @for (app of cat.Apps | filterApps:searchTerm; track app.Id) {\n                <li fd-list-item>\n                    <a fd-list-link [navigated]=\"true\" [dynCommand]=\"app.DynamicCommand\" (click)=\"closeMenu.emit()\">\n                        <i fd-list-icon glyph=\"history\"></i>\n                        <span fd-list-title>{{ app.Title }}</span>\n                        <span fd-list-secondary>\n                            @if(pinnedAppInAppTileGroups$ | async; as pinnedAppInAppTileGroups) {\n                            <button\n                                ariaLabel=\"Bookmark\"\n                                fdType=\"transparent\"\n                                title=\"Bookmark\"\n                                fd-button\n                                [glyph]=\"'pushpin-off'\"\n                                [fdType]=\"\n                                    pinnedAppInAppTileGroups[app.Id]\n                                        ? pinnedAppInAppTileGroups[app.Id].length\n                                            ? 'emphasized'\n                                            : 'transparent'\n                                        : app.$HasPinned\n                                        ? 'emphasized'\n                                        : 'transparent'\n                                \"\n                                (click)=\"$event.stopPropagation(); onPinClick(app)\"\n                            ></button>\n                            }\n                        </span>\n                    </a>\n                </li>\n                }\n            </ul>\n        </div>\n    </fd-panel>\n    }\n</div>\n", styles: [":host{display:block;min-height:100vh}\n"], dependencies: [{ kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i6$1.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i8$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i8$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i8$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i8$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role"] }, { kind: "directive", type: i8$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i9.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i9.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i9.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "directive", type: i1.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterAppsGroupedPipe, name: "filterAppsGrouped" }, { kind: "pipe", type: FilterAppsPipe, name: "filterApps" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: PopoverAppFinderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bt-popover-app-finder', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: '!tw-min-h-min'
-                    }, template: "<!--@for (cat of appGroups$ | async; track cat.Id) {-->\n<!--    <div class=\"px-4 py-2 font-lg\">-->\n<!--        <p class=\"font-bold\">{{ cat.$Caption }}</p>-->\n<!--    </div>-->\n<!--    <div class=\"grid grid-cols-4 gap-2 p-2\">-->\n<!--        @for (app of cat.Apps; track app.Id) {-->\n<!--            <div class=\"flex flex-col items-center w-24 gap-1 border border-transparent hover:border-gray-300 bg-transparent hover:bg-gray-100 transition-all rounded-lg p-2 cursor-pointer\">-->\n<!--                <div class=\"size-12 rounded-full bg-gray-300\"></div>-->\n<!--                <span class=\"truncate w-20 text-center\">-->\n<!--                {{ app.$Caption }}</span>-->\n<!--            </div>-->\n<!--        }-->\n<!--    </div>-->\n<!--}-->\n<div>\n    <div class=\"!tw-px-4 !tw-pt-2\" fd-form-item>\n        <fd-input-group\n            glyph=\"decline\"\n            glyphAriaLabel=\"Clear\"\n            placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\n            [button]=\"true\"\n            [disabled]=\"false\"\n            [(ngModel)]=\"searchTerm\"\n            (addOnButtonClicked)=\"searchTerm = ''\"\n        >\n        </fd-input-group>\n    </div>\n    @for (cat of appGroups$ | async | filterAppsGrouped:searchTerm; track cat.Id) {\n    <fd-panel\n        fdCompact\n        expandAriaLabel=\"Panel Expand\"\n        expandAriaLabelledBy=\"panel-compact-1\"\n        [expanded]=\"!!searchTerm?.length\"\n    >\n        <h5 fd-panel-title id=\"panel-compact-1\">{{ cat.Title }}</h5>\n        <div fd-panel-content ariaLabel=\"Panel Content\" id=\"panel-content-3\" class=\"!p-0\">\n            <ul fd-list [noBorder]=\"false\">\n                @for (app of cat.Apps | filterApps:searchTerm; track app.Id) {\n                <li fd-list-item>\n                    <a fd-list-link [navigated]=\"true\" [dynCommand]=\"app.DynamicCommand\" (click)=\"closeMenu.emit()\">\n                        <i fd-list-icon glyph=\"history\"></i>\n                        <span fd-list-title>{{ app.Title }}</span>\n                        <span fd-list-secondary>\n                            @if(pinnedAppInAppTileGroups$ | async; as pinnedAppInAppTileGroups) {\n                            <button\n                                ariaLabel=\"Bookmark\"\n                                fdType=\"transparent\"\n                                title=\"Bookmark\"\n                                fd-button\n                                [glyph]=\"'pushpin-off'\"\n                                [fdType]=\"\n                                    pinnedAppInAppTileGroups[app.Id]\n                                        ? pinnedAppInAppTileGroups[app.Id].length\n                                            ? 'emphasized'\n                                            : 'transparent'\n                                        : app.$HasPinned\n                                        ? 'emphasized'\n                                        : 'transparent'\n                                \"\n                                (click)=\"$event.stopPropagation(); onPinClick(app)\"\n                            ></button>\n                            }\n                        </span>\n                    </a>\n                </li>\n                }\n            </ul>\n        </div>\n    </fd-panel>\n    }\n</div>\n", styles: [":host{display:block;min-height:100vh}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.DialogService }, { type: AppFinderService }, { type: i0.ElementRef }, { type: i1$1.ContentDensityService }], propDecorators: { closeMenu: [{
-                type: Output
-            }] } });
-
 class NotificationGroupHeaderComponent extends BaseComponent {
     constructor(_cdr) {
         super();
@@ -2453,7 +2324,7 @@ class NotificationGroupHeaderComponent extends BaseComponent {
         this.unreadCount = notifications.filter((c) => c.Unread).length;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NotificationGroupHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NotificationGroupHeaderComponent, selector: "bt-notification-group-header", inputs: { notifications: "notifications", title: "title" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<h2 fd-notification-title [unread]=\"false\">\r\n    {{ title | bbbTranslate }} ({{ notifications.length }}) @if (unreadCount !== 0) {\r\n    <strong>{{ 'New' | bbbTranslate }} ({{ unreadCount }})</strong>\r\n    }\r\n</h2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$4.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { 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: NotificationGroupHeaderComponent, selector: "bt-notification-group-header", inputs: { notifications: "notifications", title: "title" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<h2 fd-notification-title [unread]=\"false\">\r\n    {{ title | bbbTranslate }} ({{ notifications.length }}) @if (unreadCount !== 0) {\r\n    <strong>{{ 'New' | bbbTranslate }} ({{ unreadCount }})</strong>\r\n    }\r\n</h2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$3.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NotificationGroupHeaderComponent, decorators: [{
             type: Component,
@@ -2542,7 +2413,7 @@ class NotificationGroupComponent extends BaseComponent {
         this._cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NotificationGroupComponent, deps: [{ token: i1.GroupByPipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: { notifications: "notifications", loading: "loading", deviceSize: "deviceSize", notificationCount: "notificationCount" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", showEvent: "showEvent", loadMore: "loadMore" }, host: { properties: { "class": "this._deviceSize" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (notifications && notifications.length > 0) {\n<ng-container>\n    <fd-notification-group>\n        <fd-tab-list size=\"s\" [expandOverflowText]=\"'More' | bbbTranslate\">\n            @for (tab of tabList; track _trackByTitle(index, tab); let index = $index) {\n            <fd-tab [title]=\"tab.title | bbbTranslate\">\n                @for (groupItem of tab.groupByItems; track _trackByKey(index, groupItem); let index = $index) {\n                <fd-notification-group-list>\n                    <fd-notification-group-header [(expanded)]=\"expanded[groupItem.key]\">\n                        <fd-notification-header>\n                            <bt-notification-group-header\n                                [notifications]=\"groupItem.value\"\n                                [title]=\"groupItem.key\"\n                            ></bt-notification-group-header>\n                        </fd-notification-header>\n                        <fd-notification-actions>\n                            <!-- <button fd-button label=\"Accept All\"></button> -->\n                            <button\n                                fd-button\n                                fdType=\"transparent\"\n                                [ariaLabel]=\"'DeleteAll' | bbbTranslate\"\n                                [title]=\"'DeleteAll' | bbbTranslate\"\n                                glyph=\"decline\"\n                                (click)=\"remove.emit({ items: groupItem.value, silent: false })\"\n                            ></button>\n                        </fd-notification-actions>\n                    </fd-notification-group-header>\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            notificationBody;\n                            context: { $implicit: groupItem.value, expanded: expanded[groupItem.key] }\n                        \"\n                    ></ng-container>\n                    <!-- <fd-notification-limit *ngIf=\"groupItem.value.length - 4 > 0\">\n                <h1 fd-notification-limit-title>\n                  There are {{ groupItem.value.length - 4 }} more notifications\n                </h1>\n                <p fd-notification-limit-description>\n                  You need to close or take action on the listed notifications to display more.\n                </p>\n              </fd-notification-limit> -->\n                </fd-notification-group-list>\n                }\n            </fd-tab>\n            }\n        </fd-tab-list>\n    </fd-notification-group>\n</ng-container>\n} @else { @if (!loading) {\n<bsu-no-data [simple]=\"true\" style=\"height: 3rem\"></bsu-no-data>\n} @else {\n<div style=\"height: 30px; position: relative\">\n    <bsu-mask [top]=\"'10px'\"></bsu-mask>\n</div>\n} }\n<ng-template #loadingTpl>\n    <div style=\"height: 30px; position: relative\">\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #notificationItem> </ng-template>\n\n<ng-template #notificationBody let-notifications let-exapanded=\"expanded\">\n    <div style=\"max-height: 346px; overflow-y: auto; overflow-x: hidden\">\n        @for (mo of notifications; track _trackMoById($index, mo); let first = $first; let last = $last) {\n        <bsu-notification-item\n            [notificationItem]=\"mo\"\n            (viewed)=\"viewed.emit($event)\"\n            (remove)=\"remove.emit($event)\"\n            (showEvent)=\"showEvent.emit($event)\"\n            (actionClick)=\"actionClick.emit($event)\"\n            intersectionObserver\n            [intersectionThreshold]=\"0.5\"\n            [deviceSize]=\"deviceSize\"\n            (visibilityChange)=\"onVisibilityChange($event, mo, last)\"\n        ></bsu-notification-item>\n        } @if (loading) {\n        <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:block;min-width:600px}:host ::ng-deep .fd-tabs__content{overflow:hidden}:host ::ng-deep .fd-notification{padding:0;box-shadow:none}fd-notification{margin:0;padding-left:0rem!important;padding-right:0rem!important}fd-notification-body{position:relative}.noloading{visibility:hidden;height:0;width:0}.loading{visibility:visible;height:100%;width:100%}:host.s{min-width:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$4.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i4$4.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i4$4.NotificationGroupHeaderComponent, selector: "fd-notification-group-header", inputs: ["expandCompact", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: i4$4.NotificationGroupComponent, selector: "fd-notification-group", inputs: ["class", "mobile", "width"] }, { kind: "component", type: i4$4.NotificationGroupListComponent, selector: "fd-notification-group-list" }, { kind: "component", type: i9$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i9$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "directive", type: i1.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "component", type: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i4.NoDataComponent, selector: "bsu-no-data", inputs: ["simple"] }, { kind: "component", type: i4.NotificationItemComponent, selector: "bsu-notification-item", inputs: ["option", "notificationItem", "showCloseButton", "deviceSize"], outputs: ["viewed", "remove", "actionClick", "showEvent", "closeEvent"] }, { kind: "component", type: NotificationGroupHeaderComponent, selector: "bt-notification-group-header", inputs: ["notifications", "title"] }, { 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: NotificationGroupComponent, selector: "bt-notification-group", inputs: { notifications: "notifications", loading: "loading", deviceSize: "deviceSize", notificationCount: "notificationCount" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", showEvent: "showEvent", loadMore: "loadMore" }, host: { properties: { "class": "this._deviceSize" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (notifications && notifications.length > 0) {\n<ng-container>\n    <fd-notification-group>\n        <fd-tab-list size=\"s\" [expandOverflowText]=\"'More' | bbbTranslate\">\n            @for (tab of tabList; track _trackByTitle(index, tab); let index = $index) {\n            <fd-tab [title]=\"tab.title | bbbTranslate\">\n                @for (groupItem of tab.groupByItems; track _trackByKey(index, groupItem); let index = $index) {\n                <fd-notification-group-list>\n                    <fd-notification-group-header [(expanded)]=\"expanded[groupItem.key]\">\n                        <fd-notification-header>\n                            <bt-notification-group-header\n                                [notifications]=\"groupItem.value\"\n                                [title]=\"groupItem.key\"\n                            ></bt-notification-group-header>\n                        </fd-notification-header>\n                        <fd-notification-actions>\n                            <!-- <button fd-button label=\"Accept All\"></button> -->\n                            <button\n                                fd-button\n                                fdType=\"transparent\"\n                                [ariaLabel]=\"'DeleteAll' | bbbTranslate\"\n                                [title]=\"'DeleteAll' | bbbTranslate\"\n                                glyph=\"decline\"\n                                (click)=\"remove.emit({ items: groupItem.value, silent: false })\"\n                            ></button>\n                        </fd-notification-actions>\n                    </fd-notification-group-header>\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            notificationBody;\n                            context: { $implicit: groupItem.value, expanded: expanded[groupItem.key] }\n                        \"\n                    ></ng-container>\n                    <!-- <fd-notification-limit *ngIf=\"groupItem.value.length - 4 > 0\">\n                <h1 fd-notification-limit-title>\n                  There are {{ groupItem.value.length - 4 }} more notifications\n                </h1>\n                <p fd-notification-limit-description>\n                  You need to close or take action on the listed notifications to display more.\n                </p>\n              </fd-notification-limit> -->\n                </fd-notification-group-list>\n                }\n            </fd-tab>\n            }\n        </fd-tab-list>\n    </fd-notification-group>\n</ng-container>\n} @else { @if (!loading) {\n<bsu-no-data [simple]=\"true\" style=\"height: 3rem\"></bsu-no-data>\n} @else {\n<div style=\"height: 30px; position: relative\">\n    <bsu-mask [top]=\"'10px'\"></bsu-mask>\n</div>\n} }\n<ng-template #loadingTpl>\n    <div style=\"height: 30px; position: relative\">\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #notificationItem> </ng-template>\n\n<ng-template #notificationBody let-notifications let-exapanded=\"expanded\">\n    <div style=\"max-height: 346px; overflow-y: auto; overflow-x: hidden\">\n        @for (mo of notifications; track _trackMoById($index, mo); let first = $first; let last = $last) {\n        <bsu-notification-item\n            [notificationItem]=\"mo\"\n            (viewed)=\"viewed.emit($event)\"\n            (remove)=\"remove.emit($event)\"\n            (showEvent)=\"showEvent.emit($event)\"\n            (actionClick)=\"actionClick.emit($event)\"\n            intersectionObserver\n            [intersectionThreshold]=\"0.5\"\n            [deviceSize]=\"deviceSize\"\n            (visibilityChange)=\"onVisibilityChange($event, mo, last)\"\n        ></bsu-notification-item>\n        } @if (loading) {\n        <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:block;min-width:600px}:host ::ng-deep .fd-tabs__content{overflow:hidden}:host ::ng-deep .fd-notification{padding:0;box-shadow:none}fd-notification{margin:0;padding-left:0rem!important;padding-right:0rem!important}fd-notification-body{position:relative}.noloading{visibility:hidden;height:0;width:0}.loading{visibility:visible;height:100%;width:100%}:host.s{min-width:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$3.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i4$3.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i4$3.NotificationGroupHeaderComponent, selector: "fd-notification-group-header", inputs: ["expandCompact", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: i4$3.NotificationGroupComponent, selector: "fd-notification-group", inputs: ["class", "mobile", "width"] }, { kind: "component", type: i4$3.NotificationGroupListComponent, selector: "fd-notification-group-list" }, { kind: "component", type: i9$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i9$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "directive", type: i1.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "component", type: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i4.NoDataComponent, selector: "bsu-no-data", inputs: ["simple"] }, { kind: "component", type: i4.NotificationItemComponent, selector: "bsu-notification-item", inputs: ["option", "notificationItem", "showCloseButton", "deviceSize"], outputs: ["viewed", "remove", "actionClick", "showEvent", "closeEvent"] }, { kind: "component", type: NotificationGroupHeaderComponent, selector: "bt-notification-group-header", inputs: ["notifications", "title"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NotificationGroupComponent, decorators: [{
             type: Component,
@@ -2578,6 +2449,7 @@ class BarsaShellbarComponent extends BaseComponent {
         this._document = _document;
         this.appVersion = appVersion;
         this.isServiceDesk = false;
+        this.isOpenQuickAccessChanged = new EventEmitter(false);
         this.openNotificationPanel = new EventEmitter();
         this.openQuickAccessPanel = new EventEmitter();
         this.cultureChanged = new EventEmitter();
@@ -2588,7 +2460,6 @@ class BarsaShellbarComponent extends BaseComponent {
         this._cdr = inject(ChangeDetectorRef);
         this.Array = Array;
         this.isOpenNotificatoin = false;
-        this.isOpenQuickAccess = false;
         this.user = {
             initials: 'WW',
             colorAccent: 1
@@ -2610,7 +2481,7 @@ class BarsaShellbarComponent extends BaseComponent {
         };
         this._viewedNotifications = [];
         this.onOpenQuickAccess = () => {
-            this.isOpenQuickAccess = true;
+            this.isOpenQuickAccessChanged.emit(true);
             this.openQuickAccessPanel.emit();
         };
         this.onOpenNotification = () => {
@@ -2623,7 +2494,7 @@ class BarsaShellbarComponent extends BaseComponent {
         };
         this.showVersion = false;
         document.body.addEventListener('click', () => {
-            this.isOpenQuickAccess = false;
+            this.isOpenQuickAccessChanged.emit(false);
             this._cdr.detectChanges();
         });
     }
@@ -2653,11 +2524,11 @@ class BarsaShellbarComponent extends BaseComponent {
         this.cultureChanged.emit(culture);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaShellbarComponent, deps: [{ token: i1.NotificationService }, { token: i1$1.DialogService }, { token: DOCUMENT }, { token: APP_VERSION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: { cssCustomUrl: "cssCustomUrl", cssUrl: "cssUrl", allowAnonymous: "allowAnonymous", multiLanguages: "multiLanguages", userLoggedIn: "userLoggedIn", settings: "settings", productMenuControl: "productMenuControl", deviceSize: "deviceSize", cultures: "cultures", shellbarData: "shellbarData", notificationCount: "notificationCount", notifcationLoaded: "notifcationLoaded", notificationLoading: "notificationLoading", notifications: "notifications", productMenuItems1: "productMenuItems1", bodyClick: "bodyClick", logo: "logo", actions: "actions", userMenu: "userMenu", productSwitcher: "productSwitcher", subtitle: "subtitle", isMobile: "isMobile", hideShellbarActions: "hideShellbarActions", showLoginButton: "showLoginButton", isTablet: "isTablet", isDesktop: "isDesktop", isServiceDesk: "isServiceDesk" }, outputs: { openNotificationPanel: "openNotificationPanel", openQuickAccessPanel: "openQuickAccessPanel", cultureChanged: "cultureChanged", notificationLoadMore: "notificationLoadMore", removeNotification: "removeNotification", notifiationActionClick: "notifiationActionClick", notificationViewed: "notificationViewed" }, viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (cssUrl) {\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n} @if (cssCustomUrl) {\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n} @if (userLoggedIn || allowAnonymous) {\n<fd-shellbar [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    @if (deviceSize === 's' && userLoggedIn && !settings?.HideQuickAccess) {\n    <fd-shellbar-action\n        [glyph]=\"'apps'\"\n        [label]=\"'Quick Access' | bbbTranslate\"\n        [notificationCount]=\"notificationCount.unread ?? 0\"\n        [notificationLabel]=\"'Quick Access' | bbbTranslate\"\n        [callback]=\"onOpenQuickAccess\"\n    >\n    </fd-shellbar-action>\n    } @if (userLoggedIn && !settings?.HideQuickAccess) {\n    <button\n        fd-shellbar-side-nav\n        fd-button\n        fdType=\"transparent\"\n        glyph=\"menu2\"\n        style=\"width: 2.75rem\"\n        (click)=\"$event.stopPropagation(); isOpenQuickAccess = !isOpenQuickAccess\"\n    ></button>\n    } @if (logo) {\n    <fd-shellbar-logo>\n        <a\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\n            href=\"/\"\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\n            aria-label=\"Barsa Novin Ray\"\n        ></a>\n    </fd-shellbar-logo>\n    } @if (!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0) {\n    <fd-product-menu [control]=\"productMenuControl\" [closePopoverOnSelect]=\"true\" [items]=\"productMenuItems1\">\n    </fd-product-menu>\n    }\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }}</fd-shellbar-subtitle>\n    @if (!hideShellbarActions&& user && (userMenu?.length || !settings?.HideLanguage)) {\n    <fd-shellbar-actions [user]=\"user\" [userMenu]=\"userMenu\" #langRef>\n        @for (action of actions; track action) {\n        <fd-shellbar-action\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n            notificationLabel=\"login\"\n        >\n        </fd-shellbar-action>\n        } @if (deviceSize === 's' && userLoggedIn && !settings?.HideNotifications) {\n        <fd-shellbar-action\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"notificationCount.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        } @if (!settings?.HideNotifications && userLoggedIn) {\n        <fd-popover\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n        } @if (!settings?.HideLanguage && deviceSize !== 's' && multiLanguages) {\n        <fd-shellbar-action [glyph]=\"'world'\" [label]=\"'language'\" [fdMenuTrigger]=\"menu\" (callback)=\"(onLanguage)\">\n        </fd-shellbar-action>\n        } @if (!settings?.HideLanguage && deviceSize === 's' && multiLanguages) { @for (culture of cultures | keyvalue;\n        track culture) {\n        <fd-shellbar-action\n            [label]=\"culture.value\"\n            [callback]=\"onLanguage\"\n            class=\"culture-abbrivation\"\n            [glyph]=\"culture.key\"\n            [ngClass]=\"'flags'\"\n        >\n        </fd-shellbar-action>\n        } } @if (productSwitcher?.length) {\n        <fd-product-switch>\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        }\n    </fd-shellbar-actions>\n    }\n</fd-shellbar>\n} @if(showLoginButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"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    class=\"tw-fixed tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    [ngClass]=\"isMobile ? 'tw-w-screen -tw-right-full' : 'tw-w-80 -tw-right-80'\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"QuickAccessTemplate\"></ng-container>\n</div>\n\n@if(isOpenQuickAccess) {\n<div\n    class=\"tw-fixed tw-right-0 tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-slate-800/[.5] tw-z-[90] tw-w-screen tw-backdrop-blur-sm\"\n    (click)=\"isOpenQuickAccess = false\"\n></div>\n}\n<fd-menu #menu>\n    <ul fd-list>\n        @for (culture of cultures | keyvalue; track culture) {\n        <li fd-list-item>\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" />\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                </span>\n            </a>\n        </li>\n        }\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    @if (!notifcationLoaded && notificationLoading === true) {\n    <div style=\"position: relative; height: 100px\">\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    }\n    <bt-notification-group\n        [notifications]=\"notifications\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"notificationLoading === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (showEvent)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n<ng-template #QuickAccessTemplate>\n    @if (!notifcationLoaded && notificationLoading === true) {\n    <div style=\"position: relative; height: 100px\">\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    }\n    <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display: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{padding:0}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i8$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i8$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i8$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i3$1.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3$1.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i7.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i7.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i7.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i7.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i9$3.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i9$3.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i10$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i10$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i10$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i11.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex"] }, { kind: "component", type: i11.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i11.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i11.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect"], outputs: ["searchOpen"] }, { kind: "component", type: i11.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i11.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i11.ShellbarSidenavDirective, selector: "[fdShellbarSidenav], [fd-shellbar-side-nav]" }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: PopoverAppFinderComponent, selector: "bt-popover-app-finder", outputs: ["closeMenu"] }, { kind: "component", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: { cssCustomUrl: "cssCustomUrl", cssUrl: "cssUrl", allowAnonymous: "allowAnonymous", multiLanguages: "multiLanguages", userLoggedIn: "userLoggedIn", settings: "settings", productMenuControl: "productMenuControl", deviceSize: "deviceSize", cultures: "cultures", shellbarData: "shellbarData", notificationCount: "notificationCount", notifcationLoaded: "notifcationLoaded", notificationLoading: "notificationLoading", notifications: "notifications", productMenuItems1: "productMenuItems1", bodyClick: "bodyClick", logo: "logo", actions: "actions", userMenu: "userMenu", productSwitcher: "productSwitcher", subtitle: "subtitle", isMobile: "isMobile", hideShellbarActions: "hideShellbarActions", showExtraButton: "showExtraButton", isTablet: "isTablet", isDesktop: "isDesktop", isServiceDesk: "isServiceDesk", isOpenQuickAccess: "isOpenQuickAccess" }, 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 (deviceSize === 's' && userLoggedIn && !settings?.HideQuickAccess) {\n    <fd-shellbar-action\n        [glyph]=\"'apps'\"\n        [label]=\"'Quick Access' | bbbTranslate\"\n        [notificationCount]=\"notificationCount.unread ?? 0\"\n        [notificationLabel]=\"'Quick Access' | bbbTranslate\"\n        [callback]=\"onOpenQuickAccess\"\n    >\n    </fd-shellbar-action>\n    } @if (userLoggedIn && !settings?.HideQuickAccess) {\n    <button\n        fd-shellbar-side-nav\n        fd-button\n        fdType=\"transparent\"\n        glyph=\"menu2\"\n        style=\"width: 2.75rem\"\n        (click)=\"$event.stopPropagation(); 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    class=\"tw-fixed tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.tw-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=\"QuickAccessTemplate\"></ng-container>\n</div>\n\n@if(isOpenQuickAccess) {\n<div\n    class=\"tw-fixed tw-right-0 tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-slate-800/[.5] tw-z-[90] tw-w-screen tw-backdrop-blur-sm\"\n    (click)=\"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<ng-template #QuickAccessTemplate>\n    @if (!notifcationLoaded && notificationLoading === true) {\n    <div style=\"position: relative; height: 100px\">\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    }\n    <ng-content select=\".side-menu\"></ng-content>\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{padding:0}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i8$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i8$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i8$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i3$1.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3$1.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i7.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i7.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i7.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i7.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i9$3.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "component", type: i9$3.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i10$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i10$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i10$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i11.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "breakpoints", "sideNav", "groupFlex"] }, { kind: "component", type: i11.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i11.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i11.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect"], outputs: ["searchOpen"] }, { kind: "component", type: i11.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i11.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i11.ShellbarSidenavDirective, selector: "[fdShellbarSidenav], [fd-shellbar-side-nav]" }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "showEvent", "loadMore"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaShellbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-barsa-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (cssUrl) {\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n} @if (cssCustomUrl) {\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n} @if (userLoggedIn || allowAnonymous) {\n<fd-shellbar [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    @if (deviceSize === 's' && userLoggedIn && !settings?.HideQuickAccess) {\n    <fd-shellbar-action\n        [glyph]=\"'apps'\"\n        [label]=\"'Quick Access' | bbbTranslate\"\n        [notificationCount]=\"notificationCount.unread ?? 0\"\n        [notificationLabel]=\"'Quick Access' | bbbTranslate\"\n        [callback]=\"onOpenQuickAccess\"\n    >\n    </fd-shellbar-action>\n    } @if (userLoggedIn && !settings?.HideQuickAccess) {\n    <button\n        fd-shellbar-side-nav\n        fd-button\n        fdType=\"transparent\"\n        glyph=\"menu2\"\n        style=\"width: 2.75rem\"\n        (click)=\"$event.stopPropagation(); isOpenQuickAccess = !isOpenQuickAccess\"\n    ></button>\n    } @if (logo) {\n    <fd-shellbar-logo>\n        <a\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\n            href=\"/\"\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\n            aria-label=\"Barsa Novin Ray\"\n        ></a>\n    </fd-shellbar-logo>\n    } @if (!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0) {\n    <fd-product-menu [control]=\"productMenuControl\" [closePopoverOnSelect]=\"true\" [items]=\"productMenuItems1\">\n    </fd-product-menu>\n    }\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }}</fd-shellbar-subtitle>\n    @if (!hideShellbarActions&& user && (userMenu?.length || !settings?.HideLanguage)) {\n    <fd-shellbar-actions [user]=\"user\" [userMenu]=\"userMenu\" #langRef>\n        @for (action of actions; track action) {\n        <fd-shellbar-action\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n            notificationLabel=\"login\"\n        >\n        </fd-shellbar-action>\n        } @if (deviceSize === 's' && userLoggedIn && !settings?.HideNotifications) {\n        <fd-shellbar-action\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"notificationCount.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        } @if (!settings?.HideNotifications && userLoggedIn) {\n        <fd-popover\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n        } @if (!settings?.HideLanguage && deviceSize !== 's' && multiLanguages) {\n        <fd-shellbar-action [glyph]=\"'world'\" [label]=\"'language'\" [fdMenuTrigger]=\"menu\" (callback)=\"(onLanguage)\">\n        </fd-shellbar-action>\n        } @if (!settings?.HideLanguage && deviceSize === 's' && multiLanguages) { @for (culture of cultures | keyvalue;\n        track culture) {\n        <fd-shellbar-action\n            [label]=\"culture.value\"\n            [callback]=\"onLanguage\"\n            class=\"culture-abbrivation\"\n            [glyph]=\"culture.key\"\n            [ngClass]=\"'flags'\"\n        >\n        </fd-shellbar-action>\n        } } @if (productSwitcher?.length) {\n        <fd-product-switch>\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        }\n    </fd-shellbar-actions>\n    }\n</fd-shellbar>\n} @if(showLoginButton){\n<div\n    [class.fd-shellbar--xl]=\"isDesktop\"\n    [class.fd-shellbar--m]=\"isTablet\"\n    [class.fd-shellbar--s]=\"isMobile\"\n    class=\"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    class=\"tw-fixed tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.!tw-right-0]=\"isOpenQuickAccess\"\n    [ngClass]=\"isMobile ? 'tw-w-screen -tw-right-full' : 'tw-w-80 -tw-right-80'\"\n    (click)=\"$event.stopPropagation()\"\n>\n    <ng-container *ngTemplateOutlet=\"QuickAccessTemplate\"></ng-container>\n</div>\n\n@if(isOpenQuickAccess) {\n<div\n    class=\"tw-fixed tw-right-0 tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-slate-800/[.5] tw-z-[90] tw-w-screen tw-backdrop-blur-sm\"\n    (click)=\"isOpenQuickAccess = false\"\n></div>\n}\n<fd-menu #menu>\n    <ul fd-list>\n        @for (culture of cultures | keyvalue; track culture) {\n        <li fd-list-item>\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" />\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                </span>\n            </a>\n        </li>\n        }\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    @if (!notifcationLoaded && notificationLoading === true) {\n    <div style=\"position: relative; height: 100px\">\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    }\n    <bt-notification-group\n        [notifications]=\"notifications\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"notificationLoading === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (showEvent)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n<ng-template #QuickAccessTemplate>\n    @if (!notifcationLoaded && notificationLoading === true) {\n    <div style=\"position: relative; height: 100px\">\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    }\n    <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display: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{padding:0}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}\n"] }]
+            args: [{ selector: 'bt-barsa-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (cssUrl) {\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n} @if (cssCustomUrl) {\n<link type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n} @if (userLoggedIn || allowAnonymous) {\n<fd-shellbar [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    @if (deviceSize === 's' && userLoggedIn && !settings?.HideQuickAccess) {\n    <fd-shellbar-action\n        [glyph]=\"'apps'\"\n        [label]=\"'Quick Access' | bbbTranslate\"\n        [notificationCount]=\"notificationCount.unread ?? 0\"\n        [notificationLabel]=\"'Quick Access' | bbbTranslate\"\n        [callback]=\"onOpenQuickAccess\"\n    >\n    </fd-shellbar-action>\n    } @if (userLoggedIn && !settings?.HideQuickAccess) {\n    <button\n        fd-shellbar-side-nav\n        fd-button\n        fdType=\"transparent\"\n        glyph=\"menu2\"\n        style=\"width: 2.75rem\"\n        (click)=\"$event.stopPropagation(); 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    class=\"tw-fixed tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-white tw-transition-all tw-z-[100] tw-shadow-2xl tw-overflow-auto\"\n    [class.tw-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=\"QuickAccessTemplate\"></ng-container>\n</div>\n\n@if(isOpenQuickAccess) {\n<div\n    class=\"tw-fixed tw-right-0 tw-top-[38.5px] tw-h-[calc(100vh-38.5px)] tw-bg-slate-800/[.5] tw-z-[90] tw-w-screen tw-backdrop-blur-sm\"\n    (click)=\"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<ng-template #QuickAccessTemplate>\n    @if (!notifcationLoaded && notificationLoading === true) {\n    <div style=\"position: relative; height: 100px\">\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    }\n    <ng-content select=\".side-menu\"></ng-content>\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{padding:0}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}.extra-button-wrapper{display:flex;height:100%;align-items:center;position:absolute;left:10px;top:0;gap:.285rem}\n"] }]
         }], ctorParameters: () => [{ type: i1.NotificationService }, { type: i1$1.DialogService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2710,7 +2581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Input
             }], hideShellbarActions: [{
                 type: Input
-            }], showLoginButton: [{
+            }], showExtraButton: [{
                 type: Input
             }], isTablet: [{
                 type: Input
@@ -2718,6 +2589,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Input
             }], isServiceDesk: [{
                 type: Input
+            }], isOpenQuickAccess: [{
+                type: Input
+            }], isOpenQuickAccessChanged: [{
+                type: Output
             }], openNotificationPanel: [{
                 type: Output
             }], openQuickAccessPanel: [{
@@ -2743,6 +2618,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 args: ['notificationsDialog', { static: true, read: TemplateRef }]
             }] } });
 
+class FilterAppsGroupedPipe {
+    transform(value, term) {
+        return value?.filter((cat) => !!cat.Apps.filter((app) => app.$Caption.includes(term ?? ''))?.length);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsGroupedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsGroupedPipe, isStandalone: true, name: "filterAppsGrouped", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsGroupedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterAppsGrouped',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+class FilterAppsPipe {
+    transform(value, term) {
+        if (!Array.isArray(value) || !term) {
+            return value;
+        }
+        return value?.filter((app) => app.$Caption.includes(term));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsPipe, isStandalone: true, name: "filterApps", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FilterAppsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterApps',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+
+class PopoverAppFinderComponent extends BaseComponent {
+    constructor(_cdr, _dialogService, _appFinderService, _el, _contentDensityService) {
+        super();
+        this._cdr = _cdr;
+        this._dialogService = _dialogService;
+        this._appFinderService = _appFinderService;
+        this._el = _el;
+        this.closeMenu = new EventEmitter();
+        this.isAllSelected = true;
+        this.contentDensity$ = _contentDensityService.contentDensity.asObservable();
+        this.appGroups$ = this._appFinderService.appGroups$.pipe(map((appGroups) => {
+            appGroups.forEach((cat) => {
+                this._appFinderService.loadAppsByAppGroup(appGroups, cat);
+            });
+            return appGroups;
+        }));
+        this.selectedAppGroup$ = this._appFinderService.selectedAppGroup$;
+        this.selectedAppGroupId$ = this._appFinderService.selectedAppGroupId$;
+        this.deviceSize$ = this._appFinderService.deviceSize$;
+        this.pinnedAppInAppTileGroups$ = this._appFinderService.pinnedAppInAppTileGroups$;
+        this.mobile$ = this.deviceSize$.pipe(map((c) => c === 's'));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.contentHeight = 'calc(' + this._el.nativeElement.offsetHeight + 'px - 2.75rem)';
+        this.sideContentSize$ = this.deviceSize$.pipe(takeUntil(this._onDestroy$), map((deviceSize) => {
+            switch (deviceSize) {
+                case 's':
+                    return 'sm';
+                case 'm':
+                    return 'md';
+                case 'l':
+                    return 'lg';
+                case 'xl':
+                    return 'xl';
+                default:
+                    return 'l';
+            }
+        }));
+    }
+    onSelectedAppGroupChange(appGroupId) {
+        this._changeGroup(appGroupId);
+    }
+    onPinClick(app) {
+        const pinnedAppInTileGroups = this._appFinderService.loadPinnedAppInTileGroups(app);
+        const appTileGroups = this._appFinderService.appTileGroups;
+        const deviceSize = this._appFinderService.deviceSize;
+        const mobile = deviceSize === 's';
+        this._dialogService
+            .open(PinTileComponent, {
+            data: { app, pinnedAppInTileGroups, appTileGroups },
+            minWidth: '350px',
+            minHeight: '420px',
+            draggable: false,
+            mobile,
+            resizable: false,
+            verticalPadding: false,
+            backdropClickCloseable: false
+        })
+            .afterClosed.subscribe((result) => {
+            this._appTileGroupsPinChange(result);
+        });
+    }
+    onRefresh() { }
+    async _appTileGroupsPinChange(result) {
+        try {
+            // Will try to ask for permission
+            this._appFinderService.pinTileChanged(result.appTileGroupsPin, result.app, () => {
+                this._cdr.detectChanges();
+            });
+        }
+        catch (err) {
+            // show msg error
+        }
+        finally {
+            // show toast successful
+        }
+    }
+    _changeGroup(appGroupId) {
+        this.isAllSelected = false;
+        this._appFinderService.selectAppGroup(appGroupId);
+        this._cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: PopoverAppFinderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DialogService }, { token: AppFinderService }, { token: i0.ElementRef }, { token: i1$1.ContentDensityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: PopoverAppFinderComponent, selector: "bt-popover-app-finder", outputs: { closeMenu: "closeMenu" }, host: { classAttribute: "!tw-min-h-min" }, usesInheritance: true, ngImport: i0, template: "<!--@for (cat of appGroups$ | async; track cat.Id) {-->\n<!--    <div class=\"px-4 py-2 font-lg\">-->\n<!--        <p class=\"font-bold\">{{ cat.$Caption }}</p>-->\n<!--    </div>-->\n<!--    <div class=\"grid grid-cols-4 gap-2 p-2\">-->\n<!--        @for (app of cat.Apps; track app.Id) {-->\n<!--            <div class=\"flex flex-col items-center w-24 gap-1 border border-transparent hover:border-gray-300 bg-transparent hover:bg-gray-100 transition-all rounded-lg p-2 cursor-pointer\">-->\n<!--                <div class=\"size-12 rounded-full bg-gray-300\"></div>-->\n<!--                <span class=\"truncate w-20 text-center\">-->\n<!--                {{ app.$Caption }}</span>-->\n<!--            </div>-->\n<!--        }-->\n<!--    </div>-->\n<!--}-->\n<div>\n    <div class=\"!tw-px-4 !tw-pt-2\" fd-form-item>\n        <fd-input-group\n            glyph=\"decline\"\n            glyphAriaLabel=\"Clear\"\n            placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\n            [button]=\"true\"\n            [disabled]=\"false\"\n            [(ngModel)]=\"searchTerm\"\n            (addOnButtonClicked)=\"searchTerm = ''\"\n        >\n        </fd-input-group>\n    </div>\n    @for (cat of appGroups$ | async | filterAppsGrouped:searchTerm; track cat.Id) {\n    <fd-panel\n        fdCompact\n        expandAriaLabel=\"Panel Expand\"\n        expandAriaLabelledBy=\"panel-compact-1\"\n        [expanded]=\"!!searchTerm?.length\"\n    >\n        <h5 fd-panel-title id=\"panel-compact-1\">{{ cat.Title }}</h5>\n        <div fd-panel-content ariaLabel=\"Panel Content\" id=\"panel-content-3\" class=\"!p-0\">\n            <ul fd-list [noBorder]=\"false\">\n                @for (app of cat.Apps | filterApps:searchTerm; track app.Id) {\n                <li fd-list-item>\n                    <a fd-list-link [navigated]=\"true\" [dynCommand]=\"app.DynamicCommand\" (click)=\"closeMenu.emit()\">\n                        <i fd-list-icon glyph=\"history\"></i>\n                        <span fd-list-title>{{ app.Title }}</span>\n                        <span fd-list-secondary>\n                            @if(pinnedAppInAppTileGroups$ | async; as pinnedAppInAppTileGroups) {\n                            <button\n                                ariaLabel=\"Bookmark\"\n                                fdType=\"transparent\"\n                                title=\"Bookmark\"\n                                fd-button\n                                [glyph]=\"'pushpin-off'\"\n                                [fdType]=\"\n                                    pinnedAppInAppTileGroups[app.Id]\n                                        ? pinnedAppInAppTileGroups[app.Id].length\n                                            ? 'emphasized'\n                                            : 'transparent'\n                                        : app.$HasPinned\n                                        ? 'emphasized'\n                                        : 'transparent'\n                                \"\n                                (click)=\"$event.stopPropagation(); onPinClick(app)\"\n                            ></button>\n                            }\n                        </span>\n                    </a>\n                </li>\n                }\n            </ul>\n        </div>\n    </fd-panel>\n    }\n</div>\n", styles: [":host{display:block;min-height:100vh}\n"], dependencies: [{ kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$4.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i6$1.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i8$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i8$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i8$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i8$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i8$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role"] }, { kind: "directive", type: i8$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i9.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i9.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i9.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "directive", type: i1.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterAppsGroupedPipe, name: "filterAppsGrouped" }, { kind: "pipe", type: FilterAppsPipe, name: "filterApps" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: PopoverAppFinderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bt-popover-app-finder', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: '!tw-min-h-min'
+                    }, template: "<!--@for (cat of appGroups$ | async; track cat.Id) {-->\n<!--    <div class=\"px-4 py-2 font-lg\">-->\n<!--        <p class=\"font-bold\">{{ cat.$Caption }}</p>-->\n<!--    </div>-->\n<!--    <div class=\"grid grid-cols-4 gap-2 p-2\">-->\n<!--        @for (app of cat.Apps; track app.Id) {-->\n<!--            <div class=\"flex flex-col items-center w-24 gap-1 border border-transparent hover:border-gray-300 bg-transparent hover:bg-gray-100 transition-all rounded-lg p-2 cursor-pointer\">-->\n<!--                <div class=\"size-12 rounded-full bg-gray-300\"></div>-->\n<!--                <span class=\"truncate w-20 text-center\">-->\n<!--                {{ app.$Caption }}</span>-->\n<!--            </div>-->\n<!--        }-->\n<!--    </div>-->\n<!--}-->\n<div>\n    <div class=\"!tw-px-4 !tw-pt-2\" fd-form-item>\n        <fd-input-group\n            glyph=\"decline\"\n            glyphAriaLabel=\"Clear\"\n            placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\n            [button]=\"true\"\n            [disabled]=\"false\"\n            [(ngModel)]=\"searchTerm\"\n            (addOnButtonClicked)=\"searchTerm = ''\"\n        >\n        </fd-input-group>\n    </div>\n    @for (cat of appGroups$ | async | filterAppsGrouped:searchTerm; track cat.Id) {\n    <fd-panel\n        fdCompact\n        expandAriaLabel=\"Panel Expand\"\n        expandAriaLabelledBy=\"panel-compact-1\"\n        [expanded]=\"!!searchTerm?.length\"\n    >\n        <h5 fd-panel-title id=\"panel-compact-1\">{{ cat.Title }}</h5>\n        <div fd-panel-content ariaLabel=\"Panel Content\" id=\"panel-content-3\" class=\"!p-0\">\n            <ul fd-list [noBorder]=\"false\">\n                @for (app of cat.Apps | filterApps:searchTerm; track app.Id) {\n                <li fd-list-item>\n                    <a fd-list-link [navigated]=\"true\" [dynCommand]=\"app.DynamicCommand\" (click)=\"closeMenu.emit()\">\n                        <i fd-list-icon glyph=\"history\"></i>\n                        <span fd-list-title>{{ app.Title }}</span>\n                        <span fd-list-secondary>\n                            @if(pinnedAppInAppTileGroups$ | async; as pinnedAppInAppTileGroups) {\n                            <button\n                                ariaLabel=\"Bookmark\"\n                                fdType=\"transparent\"\n                                title=\"Bookmark\"\n                                fd-button\n                                [glyph]=\"'pushpin-off'\"\n                                [fdType]=\"\n                                    pinnedAppInAppTileGroups[app.Id]\n                                        ? pinnedAppInAppTileGroups[app.Id].length\n                                            ? 'emphasized'\n                                            : 'transparent'\n                                        : app.$HasPinned\n                                        ? 'emphasized'\n                                        : 'transparent'\n                                \"\n                                (click)=\"$event.stopPropagation(); onPinClick(app)\"\n                            ></button>\n                            }\n                        </span>\n                    </a>\n                </li>\n                }\n            </ul>\n        </div>\n    </fd-panel>\n    }\n</div>\n", styles: [":host{display:block;min-height:100vh}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.DialogService }, { type: AppFinderService }, { type: i0.ElementRef }, { type: i1$1.ContentDensityService }], propDecorators: { closeMenu: [{
+                type: Output
+            }] } });
+
 class ShellbarComponent extends BaseComponent {
     get subtitle() {
         if (!this.shellbarData) {
@@ -2813,6 +2817,7 @@ class ShellbarComponent extends BaseComponent {
         this.isDesktop = getDeviceIsDesktop();
         this.isTablet = getDeviceIsTablet();
         this.isServiceDesk = false;
+        this.isOpenQuickAccess = false;
         this.onOpenNotification = () => {
             this.isOpenNotificatoin = true;
             this._handleOpenNotificationPanel();
@@ -2919,11 +2924,11 @@ class ShellbarComponent extends BaseComponent {
         BarsaApi.Bw.NavigateTo('/');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ShellbarComponent, deps: [{ token: i1.BbbTranslatePipe }, { token: i1.PortalService }, { token: i1.BreadcrumbService }, { token: TilesService }, { token: i0.ChangeDetectorRef }, { token: i3$4.DomSanitizer }, { token: i1.NotificationService }, { token: APP_VERSION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ShellbarComponent, selector: "bt-shellbar", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notifiationCountLoaded$ | async; as notifiationCountLoaded) { @if\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\n<bt-barsa-shellbar\n    [class.service-desk]=\"isServiceDesk\"\n    [cssUrl]=\"cssUrl$ | async\"\n    [cssCustomUrl]=\"cssCustomUrl$ | async\"\n    [userLoggedIn]=\"true\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"deviceSize\"\n    [shellbarData]=\"shellbarData\"\n    [productMenuControl]=\"productMenuControl\"\n    [settings]=\"settings\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [multiLanguages]=\"multiLanguages\"\n    [notificationCount]=\"(notificationsCount$ | async)!!\"\n    [notifications]=\"(notifications$ | async) ?? []\"\n    [notifcationLoaded]=\"notifcationLoaded\"\n    [notificationLoading]=\"(notificationLoading$ | async) === true\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [isServiceDesk]=\"isServiceDesk\"\n    [productMenuItems1]=\"productMenuItems1\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n    (notificationViewed)=\"onNotificationItemViewed($event)\"\n    (notifiationActionClick)=\"onNotificationAction($event)\"\n    (removeNotification)=\"onRemoveNotifications($event)\"\n    (notificationLoadMore)=\"onNotificationLoadMore()\"\n    (openNotificationPanel)=\"onHandleOpenNotificationPanel()\"\n>\n</bt-barsa-shellbar>\n} } } } @else { @if (notificationsCount$ | async; as notificationCount) {\n<bt-barsa-shellbar\n    [class.service-desk]=\"isServiceDesk\"\n    [cssUrl]=\"''\"\n    [cssCustomUr]=\"''\"\n    [userLoggedIn]=\"false\"\n    [multiLanguages]=\"multiLanguages\"\n    [userMenu]=\"userMenu\"\n    [logo]=\"logo\"\n    [productMenuItems1]=\"productMenuItems1\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    [shellbarData]=\"shellbarData\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [isServiceDesk]=\"isServiceDesk\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productMenuControl]=\"productMenuControl\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [settings]=\"settings\"\n    [notificationCount]=\"{ unread: 0, all: 0 }\"\n    [notifications]=\"[]\"\n    [notifcationLoaded]=\"true\"\n    [notificationLoading]=\"false\"\n    [hideShellbarActions]=\"true\"\n    [cultures]=\"cultures\"\n    [productMenuItems1]=\"productMenuItems1\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n>\n    <button\n        id=\"login_btn\"\n        fd-button\n        [label]=\"'\u0648\u0631\u0648\u062F' | bbbTranslate\"\n        glyph=\"person-placeholder\"\n        [routerLink]=\"[loginRouterLink$ | async]\"\n        fdType=\"emphasized\"\n    ></button>\n</bt-barsa-shellbar>\n} }\n", styles: [":host{display:block;position:relative}#login_btn{background-color:var(--sapShellColor);border-color:var(--sapButton_Emphasized_TextColor)}bt-barsa-shellbar.service-desk #login-btn{background-color:transparent}\n"], dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: ["cssCustomUrl", "cssUrl", "allowAnonymous", "multiLanguages", "userLoggedIn", "settings", "productMenuControl", "deviceSize", "cultures", "shellbarData", "notificationCount", "notifcationLoaded", "notificationLoading", "notifications", "productMenuItems1", "bodyClick", "logo", "actions", "userMenu", "productSwitcher", "subtitle", "isMobile", "hideShellbarActions", "showLoginButton", "isTablet", "isDesktop", "isServiceDesk"], outputs: ["openNotificationPanel", "openQuickAccessPanel", "cultureChanged", "notificationLoadMore", "removeNotification", "notifiationActionClick", "notificationViewed"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { 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: ShellbarComponent, selector: "bt-shellbar", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notifiationCountLoaded$ | async; as notifiationCountLoaded) { @if\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\n<bt-barsa-shellbar\n    [class.service-desk]=\"isServiceDesk\"\n    [cssUrl]=\"cssUrl$ | async\"\n    [cssCustomUrl]=\"cssCustomUrl$ | async\"\n    [userLoggedIn]=\"true\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"deviceSize\"\n    [shellbarData]=\"shellbarData\"\n    [productMenuControl]=\"productMenuControl\"\n    [settings]=\"settings\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [multiLanguages]=\"multiLanguages\"\n    [notificationCount]=\"(notificationsCount$ | async)!!\"\n    [notifications]=\"(notifications$ | async) ?? []\"\n    [notifcationLoaded]=\"notifcationLoaded\"\n    [notificationLoading]=\"(notificationLoading$ | async) === true\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [isServiceDesk]=\"isServiceDesk\"\n    [productMenuItems1]=\"productMenuItems1\"\n    [isOpenQuickAccess]=\"isOpenQuickAccess\"\n    (isOpenQuickAccessChanged)=\"isOpenQuickAccess = $event\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n    (notificationViewed)=\"onNotificationItemViewed($event)\"\n    (notifiationActionClick)=\"onNotificationAction($event)\"\n    (removeNotification)=\"onRemoveNotifications($event)\"\n    (notificationLoadMore)=\"onNotificationLoadMore()\"\n    (openNotificationPanel)=\"onHandleOpenNotificationPanel()\"\n>\n    <div class=\"side-menu\">\n        <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder>\n    </div>\n</bt-barsa-shellbar>\n} } } } @else { @if (notificationsCount$ | async; as notificationCount) {\n<bt-barsa-shellbar\n    [class.service-desk]=\"isServiceDesk\"\n    [cssUrl]=\"''\"\n    [cssCustomUr]=\"''\"\n    [userLoggedIn]=\"false\"\n    [multiLanguages]=\"multiLanguages\"\n    [userMenu]=\"userMenu\"\n    [logo]=\"logo\"\n    [productMenuItems1]=\"productMenuItems1\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    [shellbarData]=\"shellbarData\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [isServiceDesk]=\"isServiceDesk\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productMenuControl]=\"productMenuControl\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [settings]=\"settings\"\n    [notificationCount]=\"{ unread: 0, all: 0 }\"\n    [notifications]=\"[]\"\n    [notifcationLoaded]=\"true\"\n    [notificationLoading]=\"false\"\n    [hideShellbarActions]=\"true\"\n    [cultures]=\"cultures\"\n    [productMenuItems1]=\"productMenuItems1\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n>\n    <button\n        id=\"login_btn\"\n        fd-button\n        [label]=\"'\u0648\u0631\u0648\u062F' | bbbTranslate\"\n        glyph=\"person-placeholder\"\n        [routerLink]=\"[loginRouterLink$ | async]\"\n        fdType=\"emphasized\"\n    ></button>\n</bt-barsa-shellbar>\n} }\n", styles: [":host{display:block;position:relative}:host #login_btn{background-color:transparent;border-color:transparent}:host #menu_btn{background-color:transparent;border-color:transparent}\n"], dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: BarsaShellbarComponent, selector: "bt-barsa-shellbar", inputs: ["cssCustomUrl", "cssUrl", "allowAnonymous", "multiLanguages", "userLoggedIn", "settings", "productMenuControl", "deviceSize", "cultures", "shellbarData", "notificationCount", "notifcationLoaded", "notificationLoading", "notifications", "productMenuItems1", "bodyClick", "logo", "actions", "userMenu", "productSwitcher", "subtitle", "isMobile", "hideShellbarActions", "showExtraButton", "isTablet", "isDesktop", "isServiceDesk", "isOpenQuickAccess"], outputs: ["isOpenQuickAccessChanged", "openNotificationPanel", "openQuickAccessPanel", "cultureChanged", "notificationLoadMore", "removeNotification", "notifiationActionClick", "notificationViewed"] }, { kind: "component", type: PopoverAppFinderComponent, selector: "bt-popover-app-finder", outputs: ["closeMenu"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ShellbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notifiationCountLoaded$ | async; as notifiationCountLoaded) { @if\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\n<bt-barsa-shellbar\n    [class.service-desk]=\"isServiceDesk\"\n    [cssUrl]=\"cssUrl$ | async\"\n    [cssCustomUrl]=\"cssCustomUrl$ | async\"\n    [userLoggedIn]=\"true\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"deviceSize\"\n    [shellbarData]=\"shellbarData\"\n    [productMenuControl]=\"productMenuControl\"\n    [settings]=\"settings\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [multiLanguages]=\"multiLanguages\"\n    [notificationCount]=\"(notificationsCount$ | async)!!\"\n    [notifications]=\"(notifications$ | async) ?? []\"\n    [notifcationLoaded]=\"notifcationLoaded\"\n    [notificationLoading]=\"(notificationLoading$ | async) === true\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [isServiceDesk]=\"isServiceDesk\"\n    [productMenuItems1]=\"productMenuItems1\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n    (notificationViewed)=\"onNotificationItemViewed($event)\"\n    (notifiationActionClick)=\"onNotificationAction($event)\"\n    (removeNotification)=\"onRemoveNotifications($event)\"\n    (notificationLoadMore)=\"onNotificationLoadMore()\"\n    (openNotificationPanel)=\"onHandleOpenNotificationPanel()\"\n>\n</bt-barsa-shellbar>\n} } } } @else { @if (notificationsCount$ | async; as notificationCount) {\n<bt-barsa-shellbar\n    [class.service-desk]=\"isServiceDesk\"\n    [cssUrl]=\"''\"\n    [cssCustomUr]=\"''\"\n    [userLoggedIn]=\"false\"\n    [multiLanguages]=\"multiLanguages\"\n    [userMenu]=\"userMenu\"\n    [logo]=\"logo\"\n    [productMenuItems1]=\"productMenuItems1\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    [shellbarData]=\"shellbarData\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [isServiceDesk]=\"isServiceDesk\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productMenuControl]=\"productMenuControl\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [settings]=\"settings\"\n    [notificationCount]=\"{ unread: 0, all: 0 }\"\n    [notifications]=\"[]\"\n    [notifcationLoaded]=\"true\"\n    [notificationLoading]=\"false\"\n    [hideShellbarActions]=\"true\"\n    [cultures]=\"cultures\"\n    [productMenuItems1]=\"productMenuItems1\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n>\n    <button\n        id=\"login_btn\"\n        fd-button\n        [label]=\"'\u0648\u0631\u0648\u062F' | bbbTranslate\"\n        glyph=\"person-placeholder\"\n        [routerLink]=\"[loginRouterLink$ | async]\"\n        fdType=\"emphasized\"\n    ></button>\n</bt-barsa-shellbar>\n} }\n", styles: [":host{display:block;position:relative}#login_btn{background-color:var(--sapShellColor);border-color:var(--sapButton_Emphasized_TextColor)}bt-barsa-shellbar.service-desk #login-btn{background-color:transparent}\n"] }]
+            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (userLoggedIn$ | async; as userloggend) { @if (notifiationCountLoaded$ | async; as notifiationCountLoaded) { @if\n(deviceSize$ | async; as deviceSize) { @if (shellbarData) {\n<bt-barsa-shellbar\n    [class.service-desk]=\"isServiceDesk\"\n    [cssUrl]=\"cssUrl$ | async\"\n    [cssCustomUrl]=\"cssCustomUrl$ | async\"\n    [userLoggedIn]=\"true\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"deviceSize\"\n    [shellbarData]=\"shellbarData\"\n    [productMenuControl]=\"productMenuControl\"\n    [settings]=\"settings\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [multiLanguages]=\"multiLanguages\"\n    [notificationCount]=\"(notificationsCount$ | async)!!\"\n    [notifications]=\"(notifications$ | async) ?? []\"\n    [notifcationLoaded]=\"notifcationLoaded\"\n    [notificationLoading]=\"(notificationLoading$ | async) === true\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [isServiceDesk]=\"isServiceDesk\"\n    [productMenuItems1]=\"productMenuItems1\"\n    [isOpenQuickAccess]=\"isOpenQuickAccess\"\n    (isOpenQuickAccessChanged)=\"isOpenQuickAccess = $event\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n    (notificationViewed)=\"onNotificationItemViewed($event)\"\n    (notifiationActionClick)=\"onNotificationAction($event)\"\n    (removeNotification)=\"onRemoveNotifications($event)\"\n    (notificationLoadMore)=\"onNotificationLoadMore()\"\n    (openNotificationPanel)=\"onHandleOpenNotificationPanel()\"\n>\n    <div class=\"side-menu\">\n        <bt-popover-app-finder (closeMenu)=\"isOpenQuickAccess = false\"></bt-popover-app-finder>\n    </div>\n</bt-barsa-shellbar>\n} } } } @else { @if (notificationsCount$ | async; as notificationCount) {\n<bt-barsa-shellbar\n    [class.service-desk]=\"isServiceDesk\"\n    [cssUrl]=\"''\"\n    [cssCustomUr]=\"''\"\n    [userLoggedIn]=\"false\"\n    [multiLanguages]=\"multiLanguages\"\n    [userMenu]=\"userMenu\"\n    [logo]=\"logo\"\n    [productMenuItems1]=\"productMenuItems1\"\n    [allowAnonymous]=\"allowAnonymous\"\n    [deviceSize]=\"(deviceSize$ | async)!!\"\n    [shellbarData]=\"shellbarData\"\n    [cultures]=\"cultures\"\n    [logo]=\"logo\"\n    [isMobile]=\"isMobile\"\n    [isTablet]=\"isTablet\"\n    [isDesktop]=\"isDesktop\"\n    [isServiceDesk]=\"isServiceDesk\"\n    [actions]=\"actions\"\n    [userMenu]=\"userMenu\"\n    [productMenuControl]=\"productMenuControl\"\n    [productSwitcher]=\"productSwitcher\"\n    [subtitle]=\"subtitle\"\n    [settings]=\"settings\"\n    [notificationCount]=\"{ unread: 0, all: 0 }\"\n    [notifications]=\"[]\"\n    [notifcationLoaded]=\"true\"\n    [notificationLoading]=\"false\"\n    [hideShellbarActions]=\"true\"\n    [cultures]=\"cultures\"\n    [productMenuItems1]=\"productMenuItems1\"\n    (cultureChanged)=\"onCultureChanged($event)\"\n>\n    <button\n        id=\"login_btn\"\n        fd-button\n        [label]=\"'\u0648\u0631\u0648\u062F' | bbbTranslate\"\n        glyph=\"person-placeholder\"\n        [routerLink]=\"[loginRouterLink$ | async]\"\n        fdType=\"emphasized\"\n    ></button>\n</bt-barsa-shellbar>\n} }\n", styles: [":host{display:block;position:relative}:host #login_btn{background-color:transparent;border-color:transparent}:host #menu_btn{background-color:transparent;border-color:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i1.BbbTranslatePipe }, { type: i1.PortalService }, { type: i1.BreadcrumbService }, { type: TilesService }, { type: i0.ChangeDetectorRef }, { type: i3$4.DomSanitizer }, { type: i1.NotificationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_VERSION]