barsa-sap-ui 2.3.51 → 2.3.53

package/fesm2022/barsa-sap-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Input, Pipe, EventEmitter, inject, NgZone, Renderer2, ElementRef, Output, HostBinding, ViewChild, ViewEncapsulation, ChangeDetectorRef, ViewChildren, DOCUMENT, Directive, TemplateRef, HostListener, signal, ViewContainerRef, Injector, ComponentFactoryResolver, NgModule, input, output, Injectable, provideAppInitializer, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, Pipe, EventEmitter, inject, NgZone, Renderer2, ElementRef, Output, HostBinding, ViewChild, ViewEncapsulation, ChangeDetectorRef, ViewChildren, DOCUMENT, Directive, TemplateRef, HostListener, signal, ViewContainerRef, Injector, ComponentFactoryResolver, NgModule, input, output, EnvironmentInjector, afterNextRender, runInInjectionContext, Injectable, provideAppInitializer, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from 'barsa-novin-ray-core';
 import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, BbbTranslatePipe, LayoutService, measureText, getLabelWidth, SortDirection, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, FormPanelService, LayoutMainContentService, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, BaseDirective, PortalService, FieldBaseComponent, getDateService as getDateService$1, DateService, DateMiladiService, DateHijriService, DateShamsiService, DynamicDarkColorPipe, EllipsifyDirective, createGridEditorFormPanel, TabpageService, LocalStorageService, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, PictureFieldSourcePipe, isImage, getIcon, UploadService, LayoutPanelBaseComponent, UlvMainService, BaseColumnPropsComponent, ColumnService, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, setTableThWidth, TableHeaderWidthMode, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, calculateColumnWidth, calculateColumnContent, calculateColumnWidthFitToContainer, calculateFreeColumnSize, NotificationService, DateRanges, LogService, ApplicationCtrlrService, BreadcrumbService, IsDarkMode, isFunction, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, getFieldValue, ContainerComponent, DialogParams, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, FormPropsBaseComponent, UiService, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, NetworkStatusService, isInLocalMode, executeUlvCommandHandler, FillAllLayoutControls, IntersectionStatus, FORM_DIALOG_COMPONENT, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule, ResizableModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
 import moment from 'moment';
@@ -1858,9 +1858,8 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
             }
         });
         const title = this.viewSetting?.Title;
-        if (title) {
-            this._ulvMainService.setTitle(title);
-        }
+        this.viewSetting?.Title && this._ulvMainService.setTitle(title);
+        this._ulvMainService.ulvSetHideViewerLoading(this.viewSetting?.HideViewerLoading);
         this._ulvMainService.reportId$.subscribe((reportId) => (this.reportId = reportId));
         this._layoutService.setRendered(true);
         this.selectionMode = this.context.ViewSetting?.IsCheckList ? this.multipleSelection : this.singleSelection;
@@ -2840,6 +2839,7 @@ class BarsaAspViewerComponent extends BaseComponent {
             return;
         }
         basket.UlvParams.Width = this.el.nativeElement.offsetWidth;
+        basket.UlvParams.Height = this.el.nativeElement.offsetHeight;
         this._submitForm(basket.UlvParams);
     }
     _loadIFrame(handleEvent = true) {
@@ -7037,7 +7037,7 @@ class ReportNavigatorComponent extends BaseComponent {
             ReportId: params.id.split('__').length > 2 ? params.id.split('__')[2] : '',
             ReportId2: params.id.split('__').length > 1 ? params.id.split('__')[1] : '',
             isReportPage: params.id.split('__').length > 3 ? params.id.split('__')[3] : null
-        })), tap((c) => (c.isReportPage ? (this.minheight = 'auto') : '100vh')), tap((_c) => this.containerRef.clear()), tap((navItem) => this._applicationCtrlService.selectNavGroupItem(navItem.Id)), tap((navItem) => this._applicationCtrlService.selectedReportId(navItem.ReportId || navItem.ReportId2)), switchMap((navItem) => this._portalService
+        })), tap((c) => (c.isReportPage ? (this.minheight = 'auto') : '100vh')), tap((c) => (c.ReportId = !c.ReportId ? c.ReportId2 : c.ReportId)), tap((_c) => this.containerRef.clear()), tap((navItem) => this._applicationCtrlService.selectNavGroupItem(navItem.Id)), tap((navItem) => this._applicationCtrlService.selectedReportId(navItem.ReportId || navItem.ReportId2)), switchMap((navItem) => this._portalService
             .renderUlvMainUi(navItem, this.containerRef, this._injector, navItem.isReportPage ? false : true)
             .pipe(catchError((_err) => 
         // this._location.back();
@@ -7356,11 +7356,11 @@ class BarsaUlvMainComponent extends BaseComponent {
         this._customBackground = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaUlvMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaUlvMainComponent, isStandalone: false, selector: "bsu-barsa-ulv-main", inputs: { viewerControl: "viewerControl", loading: "loading", hidePaging: "hidePaging", viewerLoading: "viewerLoading", isReportPage: "isReportPage", cssBackground: "cssBackground", deviceSize: "deviceSize", shortcuts: "shortcuts", title: "title", searchPanelUi: "searchPanelUi", breadCrumbs: "breadCrumbs", allSearchPanelSettings: "allSearchPanelSettings", isAnonymous: "isAnonymous", canSaveGridSetting: "canSaveGridSetting", rtl: "rtl", hideUlvPageTitle: "hideUlvPageTitle", selectedSearchPanelSettings: "selectedSearchPanelSettings", searchPanelMoChanged: "searchPanelMoChanged", selectedSearchPanelSettingsId: "selectedSearchPanelSettingsId", hideSearchPanel: "hideSearchPanel", pagingSetting: "pagingSetting", contentDensity: "contentDensity", context: "context", isMobile: "isMobile", standalone: "standalone", landscape: "landscape", simpleSearchPanel: "simpleSearchPanel", layoutInfo: "layoutInfo" }, outputs: { closeEvent: "closeEvent", searchPanelMoChange: "searchPanelMoChange", openManageFilters: "openManageFilters", collapsedChange: "collapsedChange", hideSearchPanelClick: "hideSearchPanelClick", filterSave: "filterSave", filterSaveAs: "filterSaveAs", pageChange: "pageChange", showFilterFieldsSetting: "showFilterFieldsSetting", manageFilters: "manageFilters", clearSearch: "clearSearch", search: "search", selectSearchPanelSettings: "selectSearchPanelSettings" }, host: { properties: { "style.background-color": "this._backgroundColor", "style.background-image": "this._backgroundUrl", "style.background-repeat": "this._backgroundRepeat", "class.custom-background": "this._customBackground" } }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["searchpanelDialog"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isReportPage ? reportPageTemplate : reportTemplate;\r\n        context: {\r\n            $implicit: viewerControl,\r\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n@if (loading) {\r\n<bsu-mask size=\"m\"></bsu-mask>\r\n}\r\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\r\n    <fd-dynamic-page\r\n        darkClass\r\n        formClose\r\n        mobile\r\n        [attr.isMobile]=\"isMobile ? true : null\"\r\n        [isMobile]=\"isMobile\"\r\n        [size]=\"deviceSize | dynamicPageSize\"\r\n        [attr.tabMode]=\"tabMode\"\r\n        [autoResponsive]=\"false\"\r\n        [class.notitle]=\"title.length < 2 || hideUlvPageTitle\"\r\n        [class.nosearchpanel]=\"!searchPanelUi\"\r\n        [class.hideSearchPanel]=\"hideSearchPanel\"\r\n        [class.sideContentMode]=\"sideContentMode\"\r\n    >\r\n        <fd-dynamic-page-header\r\n            [title]=\"\r\n                (title | bbbTranslate) && !hideUlvPageTitle\r\n                    ? (title | bbbTranslate)\r\n                    : isMobile && breadCrumbs.length\r\n                    ? breadCrumbs[breadCrumbs.length - 1].label\r\n                    : ''\r\n            \"\r\n            class=\"p-b0\"\r\n        >\r\n            <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n                <fd-breadcrumb>\r\n                    @for ( breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track breadCrumb.url; let i =\r\n                    $index; let last = $last) {\r\n                    <fd-breadcrumb-item>\r\n                        <bsu-breadcrumb\r\n                            [index]=\"i\"\r\n                            [isLast]=\"last\"\r\n                            [breadCrumb]=\"breadCrumb\"\r\n                            [allBreadCrumb]=\"breadCrumbs\"\r\n                        ></bsu-breadcrumb>\r\n                    </fd-breadcrumb-item>\r\n                    }\r\n                </fd-breadcrumb>\r\n            </fd-dynamic-page-breadcrumb>\r\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\r\n\r\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\r\n                <fd-toolbar [shouldOverflow]=\"true\" style=\"display: none\"> </fd-toolbar>\r\n                <!-- added this because in mobile landscape toolbar disapper -->\r\n                @if (!hideSearchPanel ||( searchPanelUi && !sideContentMode)) {\r\n                <fd-toolbar\r\n                    class=\"global-actions\"\r\n                    fdType=\"transparent\"\r\n                    [clearBorder]=\"true\"\r\n                    [shouldOverflow]=\"deviceSize === 's'\"\r\n                >\r\n                    @if (isAnonymous === false && canSaveGridSetting) {\r\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\">\r\n                        <fd-popover-control>\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\r\n                                    {{\r\n                                        selectedSearchPanelSettings?.IsStandard\r\n                                            ? ''\r\n                                            : selectedSearchPanelSettings?.Title\r\n                                    }}\r\n                                    @if (searchPanelMoChanged) {\r\n                                    <strong>*</strong>\r\n                                    }\r\n                                </h3>\r\n                                <button\r\n                                    fd-button\r\n                                    glyph=\"slim-arrow-down\"\r\n                                    fdType=\"transparent\"\r\n                                    [fdContentDensity]=\"contentDensity\"\r\n                                ></button>\r\n                            </div>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body mobile>\r\n                            <div fd-popover-body-header>\r\n                                <div fd-bar [fdCozy]>\r\n                                    <div fd-bar-left>\r\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\r\n                                @for (option of allSearchPanelSettings; track option) {\r\n                                <li\r\n                                    fd-list-item\r\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\r\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\r\n                                >\r\n                                    <span fd-list-title>{{ option.Title }}</span>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                            <div fd-popover-body-footer>\r\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\r\n                                    @if (selectedSearchPanelSettings) {\r\n                                    <div fd-bar-right>\r\n                                        @if (!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Save' | bbbTranslate\"\r\n                                            fdType=\"emphasized\"\r\n                                            (click)=\"onFilterSave(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        } @if (searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'SaveAs' | bbbTranslate\"\r\n                                            [fdType]=\"\r\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\r\n                                            \"\r\n                                            (click)=\"onFilterSaveAs(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        }\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Manage' | bbbTranslate\"\r\n                                            fdkInitialFocus\r\n                                            fdType=\"transparent\"\r\n                                            (click)=\"onManageFilters(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if (deviceSize !== 's') {\r\n                    <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                    } @if (isMobile && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        (click)=\"onShowSearchpanelDialog()\"\r\n                        [glyph]=\"'filter'\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && !simpleSearchPanel && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        fdType=\"emphasized\"\r\n                        [label]=\"'Search' | bbbTranslate\"\r\n                        (click)=\"onSearch()\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [label]=\"'Filters' | bbbTranslate\"\r\n                        (click)=\"onShowFilterFieldsSetting()\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [label]=\"'Clear' | bbbTranslate\"\r\n                        (click)=\"onClearSearch()\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                        (click)=\"onHideSearchPanelClick()\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    }\r\n                </fd-toolbar>\r\n                }\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"closeEvent.emit()\" title=\"Close\">\r\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\">\r\n            @if (!isMobile) {\r\n            <bsu-search-panel\r\n                [hideButtons]=\"!simpleSearchPanel\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-dynamic-page-subheader>\r\n        } @if (!tabMode) {\r\n\r\n        <fd-dynamic-page-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    sideContentMode ? sideContentTemplate : viewerTemplate;\r\n                    context: { noRenderPageing: true }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n\r\n        } @if (pagingSetting?.TotalPages) {\r\n        <fd-dynamic-page-footer>\r\n            <!-- page footer content goes here -->\r\n            <div fd-bar [barDesign]=\"'footer'\">\r\n                <div fd-bar-middle>\r\n                    <ng-container\r\n                        [renderUlvPaging]=\"context\"\r\n                        [pagingSetting]=\"pagingSetting\"\r\n                        (pageChange)=\"onPageChange($event)\"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n        }\r\n    </fd-dynamic-page>\r\n    @if (tabMode) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"sideContentMode ? sideContentTemplate : viewerTemplate; context: { noRenderPageing: true }\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #reportTemplate>\r\n    @if (loading) {\r\n    <bsu-mask size=\"s\"></bsu-mask>\r\n    } @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n    <ng-container *ngTemplateOutlet=\"searchpanelTemplate; context: { hideButtons: false }\"></ng-container>\r\n    }\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            sideContentMode ? sideContentTemplate : viewerTemplate;\r\n            context: { simpleReport: 'simpleReport' }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #sideContentTemplate let-simpleReport=\"simpleReport\">\r\n    <fd-dynamic-side-content\r\n        [class.rtl]=\"rtl\"\r\n        [size]=\"deviceSize | sapSize\"\r\n        fillEmptySpace\r\n        [decrement]=\"'2rem'\"\r\n        [disable]=\"isReportPage\"\r\n        [setMinHeight]=\"true\"\r\n        *untilInView=\"el\"\r\n    >\r\n        <fd-dynamic-side-content-side>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"searchpanelTemplate; context: { isSearcPanelInSideContent: true }\"\r\n            ></ng-container>\r\n        </fd-dynamic-side-content-side>\r\n        <fd-dynamic-side-content-main [style.width]=\"deviceSize !== 's' ? mainContentWidth : null\">\r\n            <fd-card>\r\n                <fd-card-content class=\"tw-flex\"> \r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"viewerTemplate; context: { noRenderPageing: isReportPage ? true : false }\"\r\n                    ></ng-container>\r\n                </fd-card-content>\r\n            </fd-card>\r\n        </fd-dynamic-side-content-main>\r\n    </fd-dynamic-side-content>\r\n</ng-template>\r\n<ng-template\r\n    #searchpanelTemplate\r\n    let-isSearcPanelInSideContent=\"isSearcPanelInSideContent\"\r\n    let-hideButtons=\"hideButtons\"\r\n>\r\n    @if (!isSearcPanelInSideContent) { @if (!hideSearchPanel && searchPanelUi) {\r\n    <bsu-search-panel\r\n        darkClass\r\n        [searchPanelUi]=\"searchPanelUi\"\r\n        [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n        [hideButtons]=\"hideButtons\"\r\n        (moChanged)=\"onSearchPanelMoChanged()\"\r\n    ></bsu-search-panel>\r\n    } } @else {\r\n    <fd-card class=\"searchpanel-card\" darkClass>\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <h2 fd-card-title>\r\n                    <fd-icon glyph=\"filter\"></fd-icon><span>{{ 'Filter' | bbbTranslate }}</span>\r\n                </h2>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content style=\"flex-grow: 0\">\r\n            @if (!hideSearchPanel && searchPanelUi) {\r\n            <bsu-search-panel\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                [hideButtons]=\"true\"\r\n                [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-card-content>\r\n        <fd-card-footer style=\"border-bottom: none\">\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"emphasized\"\r\n                [label]=\"'Search' | bbbTranslate\"\r\n                (click)=\"onSearch()\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [label]=\"('Delete' | bbbTranslate) + ' ' + ('Filters' | bbbTranslate)\"\r\n                (click)=\"onClearSearch()\"\r\n                [fdOverflowGroup]=\"1\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n        </fd-card-footer>\r\n    </fd-card>\r\n    }\r\n</ng-template>\r\n<ng-template #viewerTemplate let-noRenderPageing=\"noRenderPageing\">\r\n    <div\r\n        darkClass\r\n        class=\"viewer-container\"\r\n        fillEmptySpace\r\n        [shortcutHandler]=\"shortcuts\"\r\n        [disable]=\"!isReportPage || !fillPage\"\r\n        [decrement]=\"deviceSize !== 's' ? '100px' : '75px'\"\r\n        [style.height]=\"viewerLoading ? '100%' : 'auto'\"\r\n        [style.min-height]=\"isReportPage ? '100%' : null\"\r\n        [style.position]=\"viewerLoading ? 'relative' : null\"\r\n    >\r\n        @if (viewerLoading) {\r\n        <bsu-mask size=\"m\"></bsu-mask>\r\n        } @if (viewerControl) {\r\n        <ng-container\r\n            [renderUlvViewer]=\"viewerControl\"\r\n            [layoutInfo]=\"layoutInfo\"\r\n            [isReportPage]=\"isReportPage\"\r\n        ></ng-container>\r\n        }\r\n    </div>\r\n    @if (!noRenderPageing && pagingSetting?.TotalPages && !hidePageing && !hidePaging) {\r\n    <ng-container\r\n        [renderUlvPaging]=\"context\"\r\n        [pagingSetting]=\"pagingSetting\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #searchpanelDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Filters' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <bsu-search-panel\r\n                [hideButtons]=\"true\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdkInitialFocus\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"dialog.dismiss(); onSearch()\"\r\n                    [label]=\"'Search' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button [label]=\"'Clear' | bbbTranslate\" (click)=\"onClearSearch()\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"dialog.dismiss('Close button')\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%;flex-grow:1}:host .searchpanel-card fd-card-header{pointer-events:none;cursor:default;padding:.5rem}:host .searchpanel-card h2[fd-card-title]{font-size:1rem;display:flex;align-items:center;gap:.5rem}:host .searchpanel-card h2[fd-card-title] fd-icon{font-size:1.2rem}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content{border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-side{border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content.rtl fd-dynamic-side-content-side{border-right:none;border-left:1px solid #ccc!important}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-main fd-card{transition:.25s background-color!important;background-color:var(--sapBackgroundColor, #f7f7f7)}:host.custom-background ::ng-deep article.fd-dynamic-page,:host.custom-background ::ng-deep fd-dynamic-page-content,:host.custom-background ::ng-deep .report-view,:host.custom-background ::ng-deep fd-dynamic-side-content-main>fd-card{background-color:transparent!important}:host>fd-dynamic-page>fd-dynamic-page-header.hide-container ::ng-deep .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile).notitle.sideContentMode ::ng-deep>article>header .fd-dynamic-page__title-container,fd-dynamic-page:not(.mobile).notitle.nosearchpanel ::ng-deep>article>header .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile) ::ng-deep>article>div{display:flex;flex:1}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%}fd-dynamic-page[tabmode=true] ::ng-deep>article{height:auto!important}fd-dynamic-side-content{min-height:100%;height:auto}fd-dynamic-side-content-main fd-card-content ::ng-deep>div{flex:1}fd-dynamic-side-content-main ::ng-deep fd-toolbar{border:none!important}fd-dynamic-side-content-main ::ng-deep bsu-ui-table-view{padding-bottom:0!important;overflow-y:hidden}fd-dynamic-side-content-side fd-card-content{padding:.5rem}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RenderUlvViewerDirective, selector: "[renderUlvViewer]", inputs: ["mask", "isReportPage", "layoutInfo", "renderUlvViewer"] }, { kind: "directive", type: i2.RenderUlvPaginDirective, selector: "[renderUlvPaging]", inputs: ["mask", "pagingSetting", "renderUlvPaging"], outputs: ["pageChange"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i2.ShortcutHandlerDirective, selector: "[shortcutHandler]", inputs: ["shortcutHandler"], outputs: ["shortCutCommand"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size", "role"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i4$6.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i4$6.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { 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: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$3.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$3.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "component", type: i7$3.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$3.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i8$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i8$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i8$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i8$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i8$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i8$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i8$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i8$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i9.DynamicSideContentComponent, selector: "fd-dynamic-side-content", inputs: ["position", "size", "id"] }, { kind: "component", type: i9.DynamicSideContentSideComponent, selector: "fd-dynamic-side-content-side", inputs: ["id"] }, { kind: "component", type: i9.DynamicSideContentMainComponent, selector: "fd-dynamic-side-content-main", inputs: ["id"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i3$3.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i4$2.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: i7$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$2.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i8.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: SearchPanelComponent, selector: "bsu-search-panel", inputs: ["searchPanelUi", "hideButtons", "isSearcPanelInSideContent"], outputs: ["moChanged"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "directive", type: DarkClassDirective, selector: "[darkClass]" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DynamicPageSizePipe, name: "dynamicPageSize" }, { kind: "pipe", type: SapSizePipe, name: "sapSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaUlvMainComponent, isStandalone: false, selector: "bsu-barsa-ulv-main", inputs: { viewerControl: "viewerControl", hideViewerLoading: "hideViewerLoading", loading: "loading", hidePaging: "hidePaging", viewerLoading: "viewerLoading", isReportPage: "isReportPage", cssBackground: "cssBackground", deviceSize: "deviceSize", shortcuts: "shortcuts", title: "title", searchPanelUi: "searchPanelUi", breadCrumbs: "breadCrumbs", allSearchPanelSettings: "allSearchPanelSettings", isAnonymous: "isAnonymous", canSaveGridSetting: "canSaveGridSetting", rtl: "rtl", hideUlvPageTitle: "hideUlvPageTitle", selectedSearchPanelSettings: "selectedSearchPanelSettings", searchPanelMoChanged: "searchPanelMoChanged", selectedSearchPanelSettingsId: "selectedSearchPanelSettingsId", hideSearchPanel: "hideSearchPanel", pagingSetting: "pagingSetting", contentDensity: "contentDensity", context: "context", isMobile: "isMobile", standalone: "standalone", landscape: "landscape", simpleSearchPanel: "simpleSearchPanel", layoutInfo: "layoutInfo" }, outputs: { closeEvent: "closeEvent", searchPanelMoChange: "searchPanelMoChange", openManageFilters: "openManageFilters", collapsedChange: "collapsedChange", hideSearchPanelClick: "hideSearchPanelClick", filterSave: "filterSave", filterSaveAs: "filterSaveAs", pageChange: "pageChange", showFilterFieldsSetting: "showFilterFieldsSetting", manageFilters: "manageFilters", clearSearch: "clearSearch", search: "search", selectSearchPanelSettings: "selectSearchPanelSettings" }, host: { properties: { "style.background-color": "this._backgroundColor", "style.background-image": "this._backgroundUrl", "style.background-repeat": "this._backgroundRepeat", "class.custom-background": "this._customBackground" } }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["searchpanelDialog"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isReportPage ? reportPageTemplate : reportTemplate;\r\n        context: {\r\n            $implicit: viewerControl,\r\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n@if (loading) {\r\n<bsu-mask size=\"m\"></bsu-mask>\r\n}\r\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\r\n    <fd-dynamic-page\r\n        darkClass\r\n        formClose\r\n        mobile\r\n        [attr.isMobile]=\"isMobile ? true : null\"\r\n        [isMobile]=\"isMobile\"\r\n        [size]=\"deviceSize | dynamicPageSize\"\r\n        [attr.tabMode]=\"tabMode\"\r\n        [autoResponsive]=\"false\"\r\n        [class.notitle]=\"title.length < 2 || hideUlvPageTitle\"\r\n        [class.nosearchpanel]=\"!searchPanelUi\"\r\n        [class.hideSearchPanel]=\"hideSearchPanel\"\r\n        [class.sideContentMode]=\"sideContentMode\"\r\n    >\r\n        <fd-dynamic-page-header\r\n            [title]=\"\r\n                (title | bbbTranslate) && !hideUlvPageTitle\r\n                    ? (title | bbbTranslate)\r\n                    : isMobile && breadCrumbs.length\r\n                    ? breadCrumbs[breadCrumbs.length - 1].label\r\n                    : ''\r\n            \"\r\n            class=\"p-b0\"\r\n        >\r\n            <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n                <fd-breadcrumb>\r\n                    @for ( breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track breadCrumb.url; let i =\r\n                    $index; let last = $last) {\r\n                    <fd-breadcrumb-item>\r\n                        <bsu-breadcrumb\r\n                            [index]=\"i\"\r\n                            [isLast]=\"last\"\r\n                            [breadCrumb]=\"breadCrumb\"\r\n                            [allBreadCrumb]=\"breadCrumbs\"\r\n                        ></bsu-breadcrumb>\r\n                    </fd-breadcrumb-item>\r\n                    }\r\n                </fd-breadcrumb>\r\n            </fd-dynamic-page-breadcrumb>\r\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\r\n\r\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\r\n                <fd-toolbar [shouldOverflow]=\"true\" style=\"display: none\"> </fd-toolbar>\r\n                <!-- added this because in mobile landscape toolbar disapper -->\r\n                @if (!hideSearchPanel ||( searchPanelUi && !sideContentMode)) {\r\n                <fd-toolbar\r\n                    class=\"global-actions\"\r\n                    fdType=\"transparent\"\r\n                    [clearBorder]=\"true\"\r\n                    [shouldOverflow]=\"deviceSize === 's'\"\r\n                >\r\n                    @if (isAnonymous === false && canSaveGridSetting) {\r\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\">\r\n                        <fd-popover-control>\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\r\n                                    {{\r\n                                        selectedSearchPanelSettings?.IsStandard\r\n                                            ? ''\r\n                                            : selectedSearchPanelSettings?.Title\r\n                                    }}\r\n                                    @if (searchPanelMoChanged) {\r\n                                    <strong>*</strong>\r\n                                    }\r\n                                </h3>\r\n                                <button\r\n                                    fd-button\r\n                                    glyph=\"slim-arrow-down\"\r\n                                    fdType=\"transparent\"\r\n                                    [fdContentDensity]=\"contentDensity\"\r\n                                ></button>\r\n                            </div>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body mobile>\r\n                            <div fd-popover-body-header>\r\n                                <div fd-bar [fdCozy]>\r\n                                    <div fd-bar-left>\r\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\r\n                                @for (option of allSearchPanelSettings; track option) {\r\n                                <li\r\n                                    fd-list-item\r\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\r\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\r\n                                >\r\n                                    <span fd-list-title>{{ option.Title }}</span>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                            <div fd-popover-body-footer>\r\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\r\n                                    @if (selectedSearchPanelSettings) {\r\n                                    <div fd-bar-right>\r\n                                        @if (!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Save' | bbbTranslate\"\r\n                                            fdType=\"emphasized\"\r\n                                            (click)=\"onFilterSave(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        } @if (searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'SaveAs' | bbbTranslate\"\r\n                                            [fdType]=\"\r\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\r\n                                            \"\r\n                                            (click)=\"onFilterSaveAs(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        }\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Manage' | bbbTranslate\"\r\n                                            fdkInitialFocus\r\n                                            fdType=\"transparent\"\r\n                                            (click)=\"onManageFilters(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if (deviceSize !== 's') {\r\n                    <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                    } @if (isMobile && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        (click)=\"onShowSearchpanelDialog()\"\r\n                        [glyph]=\"'filter'\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && !simpleSearchPanel && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        fdType=\"emphasized\"\r\n                        [label]=\"'Search' | bbbTranslate\"\r\n                        (click)=\"onSearch()\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [label]=\"'Filters' | bbbTranslate\"\r\n                        (click)=\"onShowFilterFieldsSetting()\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [label]=\"'Clear' | bbbTranslate\"\r\n                        (click)=\"onClearSearch()\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                        (click)=\"onHideSearchPanelClick()\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    }\r\n                </fd-toolbar>\r\n                }\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"closeEvent.emit()\" title=\"Close\">\r\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\">\r\n            @if (!isMobile) {\r\n            <bsu-search-panel\r\n                [hideButtons]=\"!simpleSearchPanel\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-dynamic-page-subheader>\r\n        } @if (!tabMode) {\r\n\r\n        <fd-dynamic-page-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    sideContentMode ? sideContentTemplate : viewerTemplate;\r\n                    context: { noRenderPageing: true }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n\r\n        } @if (pagingSetting?.TotalPages) {\r\n        <fd-dynamic-page-footer>\r\n            <!-- page footer content goes here -->\r\n            <div fd-bar [barDesign]=\"'footer'\">\r\n                <div fd-bar-middle>\r\n                    <ng-container\r\n                        [renderUlvPaging]=\"context\"\r\n                        [pagingSetting]=\"pagingSetting\"\r\n                        (pageChange)=\"onPageChange($event)\"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n        }\r\n    </fd-dynamic-page>\r\n    @if (tabMode) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"sideContentMode ? sideContentTemplate : viewerTemplate; context: { noRenderPageing: true }\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #reportTemplate>\r\n    @if (loading) {\r\n    <bsu-mask size=\"s\"></bsu-mask>\r\n    } @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n    <ng-container *ngTemplateOutlet=\"searchpanelTemplate; context: { hideButtons: false }\"></ng-container>\r\n    }\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            sideContentMode ? sideContentTemplate : viewerTemplate;\r\n            context: { simpleReport: 'simpleReport' }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #sideContentTemplate let-simpleReport=\"simpleReport\">\r\n    <fd-dynamic-side-content\r\n        [class.rtl]=\"rtl\"\r\n        [size]=\"deviceSize | sapSize\"\r\n        fillEmptySpace\r\n        [decrement]=\"'2rem'\"\r\n        [disable]=\"isReportPage\"\r\n        [setMinHeight]=\"true\"\r\n        *untilInView=\"el\"\r\n    >\r\n        <fd-dynamic-side-content-side>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"searchpanelTemplate; context: { isSearcPanelInSideContent: true }\"\r\n            ></ng-container>\r\n        </fd-dynamic-side-content-side>\r\n        <fd-dynamic-side-content-main [style.width]=\"deviceSize !== 's' ? mainContentWidth : null\">\r\n            <fd-card>\r\n                <fd-card-content class=\"tw-flex\"> \r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"viewerTemplate; context: { noRenderPageing: isReportPage ? true : false }\"\r\n                    ></ng-container>\r\n                </fd-card-content>\r\n            </fd-card>\r\n        </fd-dynamic-side-content-main>\r\n    </fd-dynamic-side-content>\r\n</ng-template>\r\n<ng-template\r\n    #searchpanelTemplate\r\n    let-isSearcPanelInSideContent=\"isSearcPanelInSideContent\"\r\n    let-hideButtons=\"hideButtons\"\r\n>\r\n    @if (!isSearcPanelInSideContent) { @if (!hideSearchPanel && searchPanelUi) {\r\n    <bsu-search-panel\r\n        darkClass\r\n        [searchPanelUi]=\"searchPanelUi\"\r\n        [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n        [hideButtons]=\"hideButtons\"\r\n        (moChanged)=\"onSearchPanelMoChanged()\"\r\n    ></bsu-search-panel>\r\n    } } @else {\r\n    <fd-card class=\"searchpanel-card\" darkClass>\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <h2 fd-card-title>\r\n                    <fd-icon glyph=\"filter\"></fd-icon><span>{{ 'Filter' | bbbTranslate }}</span>\r\n                </h2>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content style=\"flex-grow: 0\">\r\n            @if (!hideSearchPanel && searchPanelUi) {\r\n            <bsu-search-panel\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                [hideButtons]=\"true\"\r\n                [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-card-content>\r\n        <fd-card-footer style=\"border-bottom: none\">\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"emphasized\"\r\n                [label]=\"'Search' | bbbTranslate\"\r\n                (click)=\"onSearch()\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [label]=\"('Delete' | bbbTranslate) + ' ' + ('Filters' | bbbTranslate)\"\r\n                (click)=\"onClearSearch()\"\r\n                [fdOverflowGroup]=\"1\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n        </fd-card-footer>\r\n    </fd-card>\r\n    }\r\n</ng-template>\r\n<ng-template #viewerTemplate let-noRenderPageing=\"noRenderPageing\">\r\n    <div\r\n        darkClass\r\n        class=\"viewer-container\"\r\n        fillEmptySpace\r\n        [shortcutHandler]=\"shortcuts\"\r\n        [disable]=\"!isReportPage || !fillPage\"\r\n        [decrement]=\"deviceSize !== 's' ? '100px' : '75px'\"\r\n        [style.height]=\"viewerLoading && !hideViewerLoading ? '100%' : 'auto'\"\r\n        [style.min-height]=\"isReportPage ? '100%' : null\"\r\n        [style.position]=\"viewerLoading && !hideViewerLoading? 'relative' : null\"\r\n    >\r\n        @if (viewerLoading) {\r\n        <bsu-mask size=\"m\"></bsu-mask>\r\n        } @if (viewerControl) {\r\n        <ng-container\r\n            [renderUlvViewer]=\"viewerControl\"\r\n            [layoutInfo]=\"layoutInfo\"\r\n            [isReportPage]=\"isReportPage\"\r\n        ></ng-container>\r\n        }\r\n    </div>\r\n    @if (!noRenderPageing && pagingSetting?.TotalPages && !hidePageing && !hidePaging) {\r\n    <ng-container\r\n        [renderUlvPaging]=\"context\"\r\n        [pagingSetting]=\"pagingSetting\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #searchpanelDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Filters' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <bsu-search-panel\r\n                [hideButtons]=\"true\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdkInitialFocus\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"dialog.dismiss(); onSearch()\"\r\n                    [label]=\"'Search' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button [label]=\"'Clear' | bbbTranslate\" (click)=\"onClearSearch()\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"dialog.dismiss('Close button')\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%;flex-grow:1}:host .searchpanel-card fd-card-header{pointer-events:none;cursor:default;padding:.5rem}:host .searchpanel-card h2[fd-card-title]{font-size:1rem;display:flex;align-items:center;gap:.5rem}:host .searchpanel-card h2[fd-card-title] fd-icon{font-size:1.2rem}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content{border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-side{border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content.rtl fd-dynamic-side-content-side{border-right:none;border-left:1px solid #ccc!important}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-main fd-card{transition:.25s background-color!important;background-color:var(--sapBackgroundColor, #f7f7f7)}:host.custom-background ::ng-deep article.fd-dynamic-page,:host.custom-background ::ng-deep fd-dynamic-page-content,:host.custom-background ::ng-deep .report-view,:host.custom-background ::ng-deep fd-dynamic-side-content-main>fd-card{background-color:transparent!important}:host>fd-dynamic-page>fd-dynamic-page-header.hide-container ::ng-deep .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile).notitle.sideContentMode ::ng-deep>article>header .fd-dynamic-page__title-container,fd-dynamic-page:not(.mobile).notitle.nosearchpanel ::ng-deep>article>header .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile) ::ng-deep>article>div{display:flex;flex:1}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%}fd-dynamic-page[tabmode=true] ::ng-deep>article{height:auto!important}fd-dynamic-side-content{min-height:100%;height:auto}fd-dynamic-side-content-main fd-card-content ::ng-deep>div{flex:1}fd-dynamic-side-content-main ::ng-deep fd-toolbar{border:none!important}fd-dynamic-side-content-main ::ng-deep bsu-ui-table-view{padding-bottom:0!important;overflow-y:hidden}fd-dynamic-side-content-side fd-card-content{padding:.5rem}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RenderUlvViewerDirective, selector: "[renderUlvViewer]", inputs: ["mask", "isReportPage", "layoutInfo", "renderUlvViewer"] }, { kind: "directive", type: i2.RenderUlvPaginDirective, selector: "[renderUlvPaging]", inputs: ["mask", "pagingSetting", "renderUlvPaging"], outputs: ["pageChange"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i2.ShortcutHandlerDirective, selector: "[shortcutHandler]", inputs: ["shortcutHandler"], outputs: ["shortCutCommand"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size", "role"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i4$6.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i4$6.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { 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: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$3.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$3.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "component", type: i7$3.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$3.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i8$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i8$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i8$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i8$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i8$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i8$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i8$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i8$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i9.DynamicSideContentComponent, selector: "fd-dynamic-side-content", inputs: ["position", "size", "id"] }, { kind: "component", type: i9.DynamicSideContentSideComponent, selector: "fd-dynamic-side-content-side", inputs: ["id"] }, { kind: "component", type: i9.DynamicSideContentMainComponent, selector: "fd-dynamic-side-content-main", inputs: ["id"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i3$3.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i4$2.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: i7$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$2.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i8.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: SearchPanelComponent, selector: "bsu-search-panel", inputs: ["searchPanelUi", "hideButtons", "isSearcPanelInSideContent"], outputs: ["moChanged"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "directive", type: DarkClassDirective, selector: "[darkClass]" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DynamicPageSizePipe, name: "dynamicPageSize" }, { kind: "pipe", type: SapSizePipe, name: "sapSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaUlvMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-ulv-main', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isReportPage ? reportPageTemplate : reportTemplate;\r\n        context: {\r\n            $implicit: viewerControl,\r\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n@if (loading) {\r\n<bsu-mask size=\"m\"></bsu-mask>\r\n}\r\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\r\n    <fd-dynamic-page\r\n        darkClass\r\n        formClose\r\n        mobile\r\n        [attr.isMobile]=\"isMobile ? true : null\"\r\n        [isMobile]=\"isMobile\"\r\n        [size]=\"deviceSize | dynamicPageSize\"\r\n        [attr.tabMode]=\"tabMode\"\r\n        [autoResponsive]=\"false\"\r\n        [class.notitle]=\"title.length < 2 || hideUlvPageTitle\"\r\n        [class.nosearchpanel]=\"!searchPanelUi\"\r\n        [class.hideSearchPanel]=\"hideSearchPanel\"\r\n        [class.sideContentMode]=\"sideContentMode\"\r\n    >\r\n        <fd-dynamic-page-header\r\n            [title]=\"\r\n                (title | bbbTranslate) && !hideUlvPageTitle\r\n                    ? (title | bbbTranslate)\r\n                    : isMobile && breadCrumbs.length\r\n                    ? breadCrumbs[breadCrumbs.length - 1].label\r\n                    : ''\r\n            \"\r\n            class=\"p-b0\"\r\n        >\r\n            <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n                <fd-breadcrumb>\r\n                    @for ( breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track breadCrumb.url; let i =\r\n                    $index; let last = $last) {\r\n                    <fd-breadcrumb-item>\r\n                        <bsu-breadcrumb\r\n                            [index]=\"i\"\r\n                            [isLast]=\"last\"\r\n                            [breadCrumb]=\"breadCrumb\"\r\n                            [allBreadCrumb]=\"breadCrumbs\"\r\n                        ></bsu-breadcrumb>\r\n                    </fd-breadcrumb-item>\r\n                    }\r\n                </fd-breadcrumb>\r\n            </fd-dynamic-page-breadcrumb>\r\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\r\n\r\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\r\n                <fd-toolbar [shouldOverflow]=\"true\" style=\"display: none\"> </fd-toolbar>\r\n                <!-- added this because in mobile landscape toolbar disapper -->\r\n                @if (!hideSearchPanel ||( searchPanelUi && !sideContentMode)) {\r\n                <fd-toolbar\r\n                    class=\"global-actions\"\r\n                    fdType=\"transparent\"\r\n                    [clearBorder]=\"true\"\r\n                    [shouldOverflow]=\"deviceSize === 's'\"\r\n                >\r\n                    @if (isAnonymous === false && canSaveGridSetting) {\r\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\">\r\n                        <fd-popover-control>\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\r\n                                    {{\r\n                                        selectedSearchPanelSettings?.IsStandard\r\n                                            ? ''\r\n                                            : selectedSearchPanelSettings?.Title\r\n                                    }}\r\n                                    @if (searchPanelMoChanged) {\r\n                                    <strong>*</strong>\r\n                                    }\r\n                                </h3>\r\n                                <button\r\n                                    fd-button\r\n                                    glyph=\"slim-arrow-down\"\r\n                                    fdType=\"transparent\"\r\n                                    [fdContentDensity]=\"contentDensity\"\r\n                                ></button>\r\n                            </div>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body mobile>\r\n                            <div fd-popover-body-header>\r\n                                <div fd-bar [fdCozy]>\r\n                                    <div fd-bar-left>\r\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\r\n                                @for (option of allSearchPanelSettings; track option) {\r\n                                <li\r\n                                    fd-list-item\r\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\r\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\r\n                                >\r\n                                    <span fd-list-title>{{ option.Title }}</span>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                            <div fd-popover-body-footer>\r\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\r\n                                    @if (selectedSearchPanelSettings) {\r\n                                    <div fd-bar-right>\r\n                                        @if (!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Save' | bbbTranslate\"\r\n                                            fdType=\"emphasized\"\r\n                                            (click)=\"onFilterSave(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        } @if (searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'SaveAs' | bbbTranslate\"\r\n                                            [fdType]=\"\r\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\r\n                                            \"\r\n                                            (click)=\"onFilterSaveAs(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        }\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Manage' | bbbTranslate\"\r\n                                            fdkInitialFocus\r\n                                            fdType=\"transparent\"\r\n                                            (click)=\"onManageFilters(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if (deviceSize !== 's') {\r\n                    <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                    } @if (isMobile && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        (click)=\"onShowSearchpanelDialog()\"\r\n                        [glyph]=\"'filter'\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && !simpleSearchPanel && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        fdType=\"emphasized\"\r\n                        [label]=\"'Search' | bbbTranslate\"\r\n                        (click)=\"onSearch()\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [label]=\"'Filters' | bbbTranslate\"\r\n                        (click)=\"onShowFilterFieldsSetting()\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [label]=\"'Clear' | bbbTranslate\"\r\n                        (click)=\"onClearSearch()\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                        (click)=\"onHideSearchPanelClick()\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    }\r\n                </fd-toolbar>\r\n                }\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"closeEvent.emit()\" title=\"Close\">\r\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\">\r\n            @if (!isMobile) {\r\n            <bsu-search-panel\r\n                [hideButtons]=\"!simpleSearchPanel\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-dynamic-page-subheader>\r\n        } @if (!tabMode) {\r\n\r\n        <fd-dynamic-page-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    sideContentMode ? sideContentTemplate : viewerTemplate;\r\n                    context: { noRenderPageing: true }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n\r\n        } @if (pagingSetting?.TotalPages) {\r\n        <fd-dynamic-page-footer>\r\n            <!-- page footer content goes here -->\r\n            <div fd-bar [barDesign]=\"'footer'\">\r\n                <div fd-bar-middle>\r\n                    <ng-container\r\n                        [renderUlvPaging]=\"context\"\r\n                        [pagingSetting]=\"pagingSetting\"\r\n                        (pageChange)=\"onPageChange($event)\"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n        }\r\n    </fd-dynamic-page>\r\n    @if (tabMode) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"sideContentMode ? sideContentTemplate : viewerTemplate; context: { noRenderPageing: true }\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #reportTemplate>\r\n    @if (loading) {\r\n    <bsu-mask size=\"s\"></bsu-mask>\r\n    } @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n    <ng-container *ngTemplateOutlet=\"searchpanelTemplate; context: { hideButtons: false }\"></ng-container>\r\n    }\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            sideContentMode ? sideContentTemplate : viewerTemplate;\r\n            context: { simpleReport: 'simpleReport' }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #sideContentTemplate let-simpleReport=\"simpleReport\">\r\n    <fd-dynamic-side-content\r\n        [class.rtl]=\"rtl\"\r\n        [size]=\"deviceSize | sapSize\"\r\n        fillEmptySpace\r\n        [decrement]=\"'2rem'\"\r\n        [disable]=\"isReportPage\"\r\n        [setMinHeight]=\"true\"\r\n        *untilInView=\"el\"\r\n    >\r\n        <fd-dynamic-side-content-side>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"searchpanelTemplate; context: { isSearcPanelInSideContent: true }\"\r\n            ></ng-container>\r\n        </fd-dynamic-side-content-side>\r\n        <fd-dynamic-side-content-main [style.width]=\"deviceSize !== 's' ? mainContentWidth : null\">\r\n            <fd-card>\r\n                <fd-card-content class=\"tw-flex\"> \r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"viewerTemplate; context: { noRenderPageing: isReportPage ? true : false }\"\r\n                    ></ng-container>\r\n                </fd-card-content>\r\n            </fd-card>\r\n        </fd-dynamic-side-content-main>\r\n    </fd-dynamic-side-content>\r\n</ng-template>\r\n<ng-template\r\n    #searchpanelTemplate\r\n    let-isSearcPanelInSideContent=\"isSearcPanelInSideContent\"\r\n    let-hideButtons=\"hideButtons\"\r\n>\r\n    @if (!isSearcPanelInSideContent) { @if (!hideSearchPanel && searchPanelUi) {\r\n    <bsu-search-panel\r\n        darkClass\r\n        [searchPanelUi]=\"searchPanelUi\"\r\n        [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n        [hideButtons]=\"hideButtons\"\r\n        (moChanged)=\"onSearchPanelMoChanged()\"\r\n    ></bsu-search-panel>\r\n    } } @else {\r\n    <fd-card class=\"searchpanel-card\" darkClass>\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <h2 fd-card-title>\r\n                    <fd-icon glyph=\"filter\"></fd-icon><span>{{ 'Filter' | bbbTranslate }}</span>\r\n                </h2>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content style=\"flex-grow: 0\">\r\n            @if (!hideSearchPanel && searchPanelUi) {\r\n            <bsu-search-panel\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                [hideButtons]=\"true\"\r\n                [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-card-content>\r\n        <fd-card-footer style=\"border-bottom: none\">\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"emphasized\"\r\n                [label]=\"'Search' | bbbTranslate\"\r\n                (click)=\"onSearch()\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [label]=\"('Delete' | bbbTranslate) + ' ' + ('Filters' | bbbTranslate)\"\r\n                (click)=\"onClearSearch()\"\r\n                [fdOverflowGroup]=\"1\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n        </fd-card-footer>\r\n    </fd-card>\r\n    }\r\n</ng-template>\r\n<ng-template #viewerTemplate let-noRenderPageing=\"noRenderPageing\">\r\n    <div\r\n        darkClass\r\n        class=\"viewer-container\"\r\n        fillEmptySpace\r\n        [shortcutHandler]=\"shortcuts\"\r\n        [disable]=\"!isReportPage || !fillPage\"\r\n        [decrement]=\"deviceSize !== 's' ? '100px' : '75px'\"\r\n        [style.height]=\"viewerLoading ? '100%' : 'auto'\"\r\n        [style.min-height]=\"isReportPage ? '100%' : null\"\r\n        [style.position]=\"viewerLoading ? 'relative' : null\"\r\n    >\r\n        @if (viewerLoading) {\r\n        <bsu-mask size=\"m\"></bsu-mask>\r\n        } @if (viewerControl) {\r\n        <ng-container\r\n            [renderUlvViewer]=\"viewerControl\"\r\n            [layoutInfo]=\"layoutInfo\"\r\n            [isReportPage]=\"isReportPage\"\r\n        ></ng-container>\r\n        }\r\n    </div>\r\n    @if (!noRenderPageing && pagingSetting?.TotalPages && !hidePageing && !hidePaging) {\r\n    <ng-container\r\n        [renderUlvPaging]=\"context\"\r\n        [pagingSetting]=\"pagingSetting\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #searchpanelDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Filters' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <bsu-search-panel\r\n                [hideButtons]=\"true\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdkInitialFocus\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"dialog.dismiss(); onSearch()\"\r\n                    [label]=\"'Search' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button [label]=\"'Clear' | bbbTranslate\" (click)=\"onClearSearch()\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"dialog.dismiss('Close button')\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%;flex-grow:1}:host .searchpanel-card fd-card-header{pointer-events:none;cursor:default;padding:.5rem}:host .searchpanel-card h2[fd-card-title]{font-size:1rem;display:flex;align-items:center;gap:.5rem}:host .searchpanel-card h2[fd-card-title] fd-icon{font-size:1.2rem}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content{border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-side{border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content.rtl fd-dynamic-side-content-side{border-right:none;border-left:1px solid #ccc!important}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-main fd-card{transition:.25s background-color!important;background-color:var(--sapBackgroundColor, #f7f7f7)}:host.custom-background ::ng-deep article.fd-dynamic-page,:host.custom-background ::ng-deep fd-dynamic-page-content,:host.custom-background ::ng-deep .report-view,:host.custom-background ::ng-deep fd-dynamic-side-content-main>fd-card{background-color:transparent!important}:host>fd-dynamic-page>fd-dynamic-page-header.hide-container ::ng-deep .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile).notitle.sideContentMode ::ng-deep>article>header .fd-dynamic-page__title-container,fd-dynamic-page:not(.mobile).notitle.nosearchpanel ::ng-deep>article>header .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile) ::ng-deep>article>div{display:flex;flex:1}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%}fd-dynamic-page[tabmode=true] ::ng-deep>article{height:auto!important}fd-dynamic-side-content{min-height:100%;height:auto}fd-dynamic-side-content-main fd-card-content ::ng-deep>div{flex:1}fd-dynamic-side-content-main ::ng-deep fd-toolbar{border:none!important}fd-dynamic-side-content-main ::ng-deep bsu-ui-table-view{padding-bottom:0!important;overflow-y:hidden}fd-dynamic-side-content-side fd-card-content{padding:.5rem}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"] }]
+            args: [{ selector: 'bsu-barsa-ulv-main', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isReportPage ? reportPageTemplate : reportTemplate;\r\n        context: {\r\n            $implicit: viewerControl,\r\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n@if (loading) {\r\n<bsu-mask size=\"m\"></bsu-mask>\r\n}\r\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\r\n    <fd-dynamic-page\r\n        darkClass\r\n        formClose\r\n        mobile\r\n        [attr.isMobile]=\"isMobile ? true : null\"\r\n        [isMobile]=\"isMobile\"\r\n        [size]=\"deviceSize | dynamicPageSize\"\r\n        [attr.tabMode]=\"tabMode\"\r\n        [autoResponsive]=\"false\"\r\n        [class.notitle]=\"title.length < 2 || hideUlvPageTitle\"\r\n        [class.nosearchpanel]=\"!searchPanelUi\"\r\n        [class.hideSearchPanel]=\"hideSearchPanel\"\r\n        [class.sideContentMode]=\"sideContentMode\"\r\n    >\r\n        <fd-dynamic-page-header\r\n            [title]=\"\r\n                (title | bbbTranslate) && !hideUlvPageTitle\r\n                    ? (title | bbbTranslate)\r\n                    : isMobile && breadCrumbs.length\r\n                    ? breadCrumbs[breadCrumbs.length - 1].label\r\n                    : ''\r\n            \"\r\n            class=\"p-b0\"\r\n        >\r\n            <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n                <fd-breadcrumb>\r\n                    @for ( breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track breadCrumb.url; let i =\r\n                    $index; let last = $last) {\r\n                    <fd-breadcrumb-item>\r\n                        <bsu-breadcrumb\r\n                            [index]=\"i\"\r\n                            [isLast]=\"last\"\r\n                            [breadCrumb]=\"breadCrumb\"\r\n                            [allBreadCrumb]=\"breadCrumbs\"\r\n                        ></bsu-breadcrumb>\r\n                    </fd-breadcrumb-item>\r\n                    }\r\n                </fd-breadcrumb>\r\n            </fd-dynamic-page-breadcrumb>\r\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\r\n\r\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\r\n                <fd-toolbar [shouldOverflow]=\"true\" style=\"display: none\"> </fd-toolbar>\r\n                <!-- added this because in mobile landscape toolbar disapper -->\r\n                @if (!hideSearchPanel ||( searchPanelUi && !sideContentMode)) {\r\n                <fd-toolbar\r\n                    class=\"global-actions\"\r\n                    fdType=\"transparent\"\r\n                    [clearBorder]=\"true\"\r\n                    [shouldOverflow]=\"deviceSize === 's'\"\r\n                >\r\n                    @if (isAnonymous === false && canSaveGridSetting) {\r\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\">\r\n                        <fd-popover-control>\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\r\n                                    {{\r\n                                        selectedSearchPanelSettings?.IsStandard\r\n                                            ? ''\r\n                                            : selectedSearchPanelSettings?.Title\r\n                                    }}\r\n                                    @if (searchPanelMoChanged) {\r\n                                    <strong>*</strong>\r\n                                    }\r\n                                </h3>\r\n                                <button\r\n                                    fd-button\r\n                                    glyph=\"slim-arrow-down\"\r\n                                    fdType=\"transparent\"\r\n                                    [fdContentDensity]=\"contentDensity\"\r\n                                ></button>\r\n                            </div>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body mobile>\r\n                            <div fd-popover-body-header>\r\n                                <div fd-bar [fdCozy]>\r\n                                    <div fd-bar-left>\r\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\r\n                                @for (option of allSearchPanelSettings; track option) {\r\n                                <li\r\n                                    fd-list-item\r\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\r\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\r\n                                >\r\n                                    <span fd-list-title>{{ option.Title }}</span>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                            <div fd-popover-body-footer>\r\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\r\n                                    @if (selectedSearchPanelSettings) {\r\n                                    <div fd-bar-right>\r\n                                        @if (!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Save' | bbbTranslate\"\r\n                                            fdType=\"emphasized\"\r\n                                            (click)=\"onFilterSave(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        } @if (searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'SaveAs' | bbbTranslate\"\r\n                                            [fdType]=\"\r\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\r\n                                            \"\r\n                                            (click)=\"onFilterSaveAs(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        }\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Manage' | bbbTranslate\"\r\n                                            fdkInitialFocus\r\n                                            fdType=\"transparent\"\r\n                                            (click)=\"onManageFilters(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if (deviceSize !== 's') {\r\n                    <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                    } @if (isMobile && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        (click)=\"onShowSearchpanelDialog()\"\r\n                        [glyph]=\"'filter'\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && !simpleSearchPanel && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        fdType=\"emphasized\"\r\n                        [label]=\"'Search' | bbbTranslate\"\r\n                        (click)=\"onSearch()\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [label]=\"'Filters' | bbbTranslate\"\r\n                        (click)=\"onShowFilterFieldsSetting()\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [label]=\"'Clear' | bbbTranslate\"\r\n                        (click)=\"onClearSearch()\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    } @if (!isMobile && !sideContentMode && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdType=\"transparent\"\r\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\r\n                        (click)=\"onHideSearchPanelClick()\"\r\n                        fdOverflowPriority=\"low\"\r\n                        [fdOverflowGroup]=\"1\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    }\r\n                </fd-toolbar>\r\n                }\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"closeEvent.emit()\" title=\"Close\">\r\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\">\r\n            @if (!isMobile) {\r\n            <bsu-search-panel\r\n                [hideButtons]=\"!simpleSearchPanel\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-dynamic-page-subheader>\r\n        } @if (!tabMode) {\r\n\r\n        <fd-dynamic-page-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    sideContentMode ? sideContentTemplate : viewerTemplate;\r\n                    context: { noRenderPageing: true }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n\r\n        } @if (pagingSetting?.TotalPages) {\r\n        <fd-dynamic-page-footer>\r\n            <!-- page footer content goes here -->\r\n            <div fd-bar [barDesign]=\"'footer'\">\r\n                <div fd-bar-middle>\r\n                    <ng-container\r\n                        [renderUlvPaging]=\"context\"\r\n                        [pagingSetting]=\"pagingSetting\"\r\n                        (pageChange)=\"onPageChange($event)\"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n        }\r\n    </fd-dynamic-page>\r\n    @if (tabMode) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"sideContentMode ? sideContentTemplate : viewerTemplate; context: { noRenderPageing: true }\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #reportTemplate>\r\n    @if (loading) {\r\n    <bsu-mask size=\"s\"></bsu-mask>\r\n    } @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n    <ng-container *ngTemplateOutlet=\"searchpanelTemplate; context: { hideButtons: false }\"></ng-container>\r\n    }\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            sideContentMode ? sideContentTemplate : viewerTemplate;\r\n            context: { simpleReport: 'simpleReport' }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #sideContentTemplate let-simpleReport=\"simpleReport\">\r\n    <fd-dynamic-side-content\r\n        [class.rtl]=\"rtl\"\r\n        [size]=\"deviceSize | sapSize\"\r\n        fillEmptySpace\r\n        [decrement]=\"'2rem'\"\r\n        [disable]=\"isReportPage\"\r\n        [setMinHeight]=\"true\"\r\n        *untilInView=\"el\"\r\n    >\r\n        <fd-dynamic-side-content-side>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"searchpanelTemplate; context: { isSearcPanelInSideContent: true }\"\r\n            ></ng-container>\r\n        </fd-dynamic-side-content-side>\r\n        <fd-dynamic-side-content-main [style.width]=\"deviceSize !== 's' ? mainContentWidth : null\">\r\n            <fd-card>\r\n                <fd-card-content class=\"tw-flex\"> \r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"viewerTemplate; context: { noRenderPageing: isReportPage ? true : false }\"\r\n                    ></ng-container>\r\n                </fd-card-content>\r\n            </fd-card>\r\n        </fd-dynamic-side-content-main>\r\n    </fd-dynamic-side-content>\r\n</ng-template>\r\n<ng-template\r\n    #searchpanelTemplate\r\n    let-isSearcPanelInSideContent=\"isSearcPanelInSideContent\"\r\n    let-hideButtons=\"hideButtons\"\r\n>\r\n    @if (!isSearcPanelInSideContent) { @if (!hideSearchPanel && searchPanelUi) {\r\n    <bsu-search-panel\r\n        darkClass\r\n        [searchPanelUi]=\"searchPanelUi\"\r\n        [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n        [hideButtons]=\"hideButtons\"\r\n        (moChanged)=\"onSearchPanelMoChanged()\"\r\n    ></bsu-search-panel>\r\n    } } @else {\r\n    <fd-card class=\"searchpanel-card\" darkClass>\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <h2 fd-card-title>\r\n                    <fd-icon glyph=\"filter\"></fd-icon><span>{{ 'Filter' | bbbTranslate }}</span>\r\n                </h2>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content style=\"flex-grow: 0\">\r\n            @if (!hideSearchPanel && searchPanelUi) {\r\n            <bsu-search-panel\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                [hideButtons]=\"true\"\r\n                [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-card-content>\r\n        <fd-card-footer style=\"border-bottom: none\">\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"emphasized\"\r\n                [label]=\"'Search' | bbbTranslate\"\r\n                (click)=\"onSearch()\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [label]=\"('Delete' | bbbTranslate) + ' ' + ('Filters' | bbbTranslate)\"\r\n                (click)=\"onClearSearch()\"\r\n                [fdOverflowGroup]=\"1\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n        </fd-card-footer>\r\n    </fd-card>\r\n    }\r\n</ng-template>\r\n<ng-template #viewerTemplate let-noRenderPageing=\"noRenderPageing\">\r\n    <div\r\n        darkClass\r\n        class=\"viewer-container\"\r\n        fillEmptySpace\r\n        [shortcutHandler]=\"shortcuts\"\r\n        [disable]=\"!isReportPage || !fillPage\"\r\n        [decrement]=\"deviceSize !== 's' ? '100px' : '75px'\"\r\n        [style.height]=\"viewerLoading && !hideViewerLoading ? '100%' : 'auto'\"\r\n        [style.min-height]=\"isReportPage ? '100%' : null\"\r\n        [style.position]=\"viewerLoading && !hideViewerLoading? 'relative' : null\"\r\n    >\r\n        @if (viewerLoading) {\r\n        <bsu-mask size=\"m\"></bsu-mask>\r\n        } @if (viewerControl) {\r\n        <ng-container\r\n            [renderUlvViewer]=\"viewerControl\"\r\n            [layoutInfo]=\"layoutInfo\"\r\n            [isReportPage]=\"isReportPage\"\r\n        ></ng-container>\r\n        }\r\n    </div>\r\n    @if (!noRenderPageing && pagingSetting?.TotalPages && !hidePageing && !hidePaging) {\r\n    <ng-container\r\n        [renderUlvPaging]=\"context\"\r\n        [pagingSetting]=\"pagingSetting\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #searchpanelDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Filters' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <bsu-search-panel\r\n                [hideButtons]=\"true\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdkInitialFocus\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"dialog.dismiss(); onSearch()\"\r\n                    [label]=\"'Search' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button [label]=\"'Clear' | bbbTranslate\" (click)=\"onClearSearch()\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"dialog.dismiss('Close button')\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%;flex-grow:1}:host .searchpanel-card fd-card-header{pointer-events:none;cursor:default;padding:.5rem}:host .searchpanel-card h2[fd-card-title]{font-size:1rem;display:flex;align-items:center;gap:.5rem}:host .searchpanel-card h2[fd-card-title] fd-icon{font-size:1.2rem}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content{border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-side{border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content.rtl fd-dynamic-side-content-side{border-right:none;border-left:1px solid #ccc!important}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-main fd-card{transition:.25s background-color!important;background-color:var(--sapBackgroundColor, #f7f7f7)}:host.custom-background ::ng-deep article.fd-dynamic-page,:host.custom-background ::ng-deep fd-dynamic-page-content,:host.custom-background ::ng-deep .report-view,:host.custom-background ::ng-deep fd-dynamic-side-content-main>fd-card{background-color:transparent!important}:host>fd-dynamic-page>fd-dynamic-page-header.hide-container ::ng-deep .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile).notitle.sideContentMode ::ng-deep>article>header .fd-dynamic-page__title-container,fd-dynamic-page:not(.mobile).notitle.nosearchpanel ::ng-deep>article>header .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile) ::ng-deep>article>div{display:flex;flex:1}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%}fd-dynamic-page[tabmode=true] ::ng-deep>article{height:auto!important}fd-dynamic-side-content{min-height:100%;height:auto}fd-dynamic-side-content-main fd-card-content ::ng-deep>div{flex:1}fd-dynamic-side-content-main ::ng-deep fd-toolbar{border:none!important}fd-dynamic-side-content-main ::ng-deep bsu-ui-table-view{padding-bottom:0!important;overflow-y:hidden}fd-dynamic-side-content-side fd-card-content{padding:.5rem}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _dynamicPageComponent: [{
                 type: ViewChild,
                 args: [DynamicPageComponent]
@@ -7381,6 +7381,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 args: ['class.custom-background']
             }], viewerControl: [{
                 type: Input
+            }], hideViewerLoading: [{
+                type: Input
             }], loading: [{
                 type: Input
             }], hidePaging: [{
@@ -7503,6 +7505,7 @@ class UiUlvMainUiComponent extends BaseComponent {
         this.isMobile = getDeviceIsMobile();
         this._ulvMainService.setInDialog(this.inDialog);
         this.shortCuts$ = this._ulvMainService.shortCuts$;
+        this.hideViewerLoading$ = this._ulvMainService.hideViewerLoading$;
         this.hidePaging$ = this._ulvMainService.hidePaging$;
         this._ulvMainService.setIsMultiSelect(this.isMultiSelect);
         this._ulvMainService.uiViewerSelector$.pipe(takeUntil(this._onDestroy$)).subscribe((c) => {
@@ -7741,11 +7744,11 @@ class UiUlvMainUiComponent extends BaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiUlvMainUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiUlvMainUiComponent, isStandalone: false, selector: "bsu-ui-ulv-main-ui", inputs: { context: "context", isReportPage: "isReportPage", inDialog: "inDialog", isMultiSelect: "isMultiSelect", layoutInfo: "layoutInfo", fullscreen: "fullscreen" }, host: { properties: { "class.control-readonly": "this.readonly", "class.control-disabled": "this.disable", "class.margin-ulv": "this.marginUlv" } }, providers: [UlvMainService], viewQueries: [{ propertyName: "_barsaUlvComponent", first: true, predicate: BarsaUlvMainComponent, descendants: true }, { propertyName: "searchPanelComponent", first: true, predicate: SearchPanelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bsu-barsa-ulv-main\r\n    [shortcutHandler]=\"shortCuts$ | async\"\r\n    [style.style.width]=\"!isMobile ? null : '100%'\"\r\n    [layoutInfo]=\"layoutInfo\"\r\n    [attr.isReportPage]=\"isReportPage\"\r\n    [simpleSearchPanel]=\"simpleSearchPanel\"\r\n    [viewerControl]=\"viewer$ | async\"\r\n    [loading]=\"(mask$ | async) === true\"\r\n    [viewerLoading]=\"(viwerMask$ | async) === true\"\r\n    [cssBackground]=\"cssBackground$ | async\"\r\n    [standalone]=\"(standalone$ | async) === true\"\r\n    [landscape]=\"(landscape$ | async) === true\"\r\n    [hideUlvPageTitle]=\"(hideUlvPageTitle$ | async) === true\"\r\n    [isReportPage]=\"isReportPage\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [title]=\"title\"\r\n    [hidePaging]=\"(hidePaging$ | async) === true\"\r\n    [searchPanelUi]=\"(searchPanelUi$ | async)!!\"\r\n    [breadCrumbs]=\"(breadCrumbs$ | async)!!\"\r\n    [allSearchPanelSettings]=\"(allSearchPanelSettings$ | async)!!\"\r\n    [isAnonymous]=\"(isAnonymous$ | async)!!\"\r\n    [canSaveGridSetting]=\"(canSaveGridSetting$ | async) === true\"\r\n    [rtl]=\"(rtl$ | async)!!\"\r\n    [selectedSearchPanelSettings]=\"(selectedSearchPanelSettings$ | async)!!\"\r\n    [searchPanelMoChanged]=\"(searchPanelMoChanged$ | async)!!\"\r\n    [selectedSearchPanelSettingsId]=\"(selectedSearchPanelSettingsId$ | async)!!\"\r\n    [hideSearchPanel]=\"(hideSearchPanel$ | async)!!\"\r\n    [pagingSetting]=\"(pagingSetting$ | async)!!\"\r\n    [context]=\"context\"\r\n    [contentDensity]=\"contentDensity$ | async\"\r\n    (closeEvent)=\"onClose()\"\r\n    (searchPanelMoChange)=\"onSearchPanelMoChanged()\"\r\n    (openManageFilters)=\"onOpenManageFilters()\"\r\n    (collapsedChange)=\"onCollapsedChange($event)\"\r\n    (hideSearchPanelClick)=\"onHideSearchPanelClick()\"\r\n    (filterSave)=\"onFilterSave()\"\r\n    (filterSaveAs)=\"onFilterSaveAs()\"\r\n    (showFilterFieldsSetting)=\"onShowFilterFieldsSetting()\"\r\n    (manageFilters)=\"onManageFilters()\"\r\n    (clearSearch)=\"onClearSearch()\"\r\n    (search)=\"onSearch()\"\r\n    (pageChange)=\"onPageChange($event)\"\r\n    (selectSearchPanelSettings)=\"onSelectSearchPanelSettings($event)\"\r\n    (shortCutCommand)=\"onShortcutCommand($event)\"\r\n>\r\n</bsu-barsa-ulv-main>\r\n", styles: [":host{width:100%;min-height:100%;height:auto;display:flex;flex-direction:column;cursor:default}.margin-ulv{margin-bottom:.25rem;margin-top:.1875rem}\n"], dependencies: [{ kind: "directive", type: i2.ShortcutHandlerDirective, selector: "[shortcutHandler]", inputs: ["shortcutHandler"], outputs: ["shortCutCommand"] }, { kind: "component", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: ["viewerControl", "loading", "hidePaging", "viewerLoading", "isReportPage", "cssBackground", "deviceSize", "shortcuts", "title", "searchPanelUi", "breadCrumbs", "allSearchPanelSettings", "isAnonymous", "canSaveGridSetting", "rtl", "hideUlvPageTitle", "selectedSearchPanelSettings", "searchPanelMoChanged", "selectedSearchPanelSettingsId", "hideSearchPanel", "pagingSetting", "contentDensity", "context", "isMobile", "standalone", "landscape", "simpleSearchPanel", "layoutInfo"], outputs: ["closeEvent", "searchPanelMoChange", "openManageFilters", "collapsedChange", "hideSearchPanelClick", "filterSave", "filterSaveAs", "pageChange", "showFilterFieldsSetting", "manageFilters", "clearSearch", "search", "selectSearchPanelSettings"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiUlvMainUiComponent, isStandalone: false, selector: "bsu-ui-ulv-main-ui", inputs: { context: "context", isReportPage: "isReportPage", inDialog: "inDialog", isMultiSelect: "isMultiSelect", layoutInfo: "layoutInfo", fullscreen: "fullscreen" }, host: { properties: { "class.control-readonly": "this.readonly", "class.control-disabled": "this.disable", "class.margin-ulv": "this.marginUlv" } }, providers: [UlvMainService], viewQueries: [{ propertyName: "_barsaUlvComponent", first: true, predicate: BarsaUlvMainComponent, descendants: true }, { propertyName: "searchPanelComponent", first: true, predicate: SearchPanelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bsu-barsa-ulv-main\r\n    [shortcutHandler]=\"shortCuts$ | async\"\r\n    [style.style.width]=\"!isMobile ? null : '100%'\"\r\n    [layoutInfo]=\"layoutInfo\"\r\n    [attr.isReportPage]=\"isReportPage\"\r\n    [simpleSearchPanel]=\"simpleSearchPanel\"\r\n    [viewerControl]=\"viewer$ | async\"\r\n    [loading]=\"(mask$ | async) === true\"\r\n    [viewerLoading]=\"(viwerMask$ | async) === true\"\r\n    [hideViewerLoading]=\"(hideViewerLoading$ | async) === true\"\r\n    [cssBackground]=\"cssBackground$ | async\"\r\n    [standalone]=\"(standalone$ | async) === true\"\r\n    [landscape]=\"(landscape$ | async) === true\"\r\n    [hideUlvPageTitle]=\"(hideUlvPageTitle$ | async) === true\"\r\n    [isReportPage]=\"isReportPage\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [title]=\"title\"\r\n    [hidePaging]=\"(hidePaging$ | async) === true\"\r\n    [searchPanelUi]=\"(searchPanelUi$ | async)!!\"\r\n    [breadCrumbs]=\"(breadCrumbs$ | async)!!\"\r\n    [allSearchPanelSettings]=\"(allSearchPanelSettings$ | async)!!\"\r\n    [isAnonymous]=\"(isAnonymous$ | async)!!\"\r\n    [canSaveGridSetting]=\"(canSaveGridSetting$ | async) === true\"\r\n    [rtl]=\"(rtl$ | async)!!\"\r\n    [selectedSearchPanelSettings]=\"(selectedSearchPanelSettings$ | async)!!\"\r\n    [searchPanelMoChanged]=\"(searchPanelMoChanged$ | async)!!\"\r\n    [selectedSearchPanelSettingsId]=\"(selectedSearchPanelSettingsId$ | async)!!\"\r\n    [hideSearchPanel]=\"(hideSearchPanel$ | async)!!\"\r\n    [pagingSetting]=\"(pagingSetting$ | async)!!\"\r\n    [context]=\"context\"\r\n    [contentDensity]=\"contentDensity$ | async\"\r\n    (closeEvent)=\"onClose()\"\r\n    (searchPanelMoChange)=\"onSearchPanelMoChanged()\"\r\n    (openManageFilters)=\"onOpenManageFilters()\"\r\n    (collapsedChange)=\"onCollapsedChange($event)\"\r\n    (hideSearchPanelClick)=\"onHideSearchPanelClick()\"\r\n    (filterSave)=\"onFilterSave()\"\r\n    (filterSaveAs)=\"onFilterSaveAs()\"\r\n    (showFilterFieldsSetting)=\"onShowFilterFieldsSetting()\"\r\n    (manageFilters)=\"onManageFilters()\"\r\n    (clearSearch)=\"onClearSearch()\"\r\n    (search)=\"onSearch()\"\r\n    (pageChange)=\"onPageChange($event)\"\r\n    (selectSearchPanelSettings)=\"onSelectSearchPanelSettings($event)\"\r\n    (shortCutCommand)=\"onShortcutCommand($event)\"\r\n>\r\n</bsu-barsa-ulv-main>\r\n", styles: [":host{width:100%;min-height:100%;height:auto;display:flex;flex-direction:column;cursor:default}.margin-ulv{margin-bottom:.25rem;margin-top:.1875rem}\n"], dependencies: [{ kind: "directive", type: i2.ShortcutHandlerDirective, selector: "[shortcutHandler]", inputs: ["shortcutHandler"], outputs: ["shortCutCommand"] }, { kind: "component", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: ["viewerControl", "hideViewerLoading", "loading", "hidePaging", "viewerLoading", "isReportPage", "cssBackground", "deviceSize", "shortcuts", "title", "searchPanelUi", "breadCrumbs", "allSearchPanelSettings", "isAnonymous", "canSaveGridSetting", "rtl", "hideUlvPageTitle", "selectedSearchPanelSettings", "searchPanelMoChanged", "selectedSearchPanelSettingsId", "hideSearchPanel", "pagingSetting", "contentDensity", "context", "isMobile", "standalone", "landscape", "simpleSearchPanel", "layoutInfo"], outputs: ["closeEvent", "searchPanelMoChange", "openManageFilters", "collapsedChange", "hideSearchPanelClick", "filterSave", "filterSaveAs", "pageChange", "showFilterFieldsSetting", "manageFilters", "clearSearch", "search", "selectSearchPanelSettings"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiUlvMainUiComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-ulv-main-ui', providers: [UlvMainService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bsu-barsa-ulv-main\r\n    [shortcutHandler]=\"shortCuts$ | async\"\r\n    [style.style.width]=\"!isMobile ? null : '100%'\"\r\n    [layoutInfo]=\"layoutInfo\"\r\n    [attr.isReportPage]=\"isReportPage\"\r\n    [simpleSearchPanel]=\"simpleSearchPanel\"\r\n    [viewerControl]=\"viewer$ | async\"\r\n    [loading]=\"(mask$ | async) === true\"\r\n    [viewerLoading]=\"(viwerMask$ | async) === true\"\r\n    [cssBackground]=\"cssBackground$ | async\"\r\n    [standalone]=\"(standalone$ | async) === true\"\r\n    [landscape]=\"(landscape$ | async) === true\"\r\n    [hideUlvPageTitle]=\"(hideUlvPageTitle$ | async) === true\"\r\n    [isReportPage]=\"isReportPage\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [title]=\"title\"\r\n    [hidePaging]=\"(hidePaging$ | async) === true\"\r\n    [searchPanelUi]=\"(searchPanelUi$ | async)!!\"\r\n    [breadCrumbs]=\"(breadCrumbs$ | async)!!\"\r\n    [allSearchPanelSettings]=\"(allSearchPanelSettings$ | async)!!\"\r\n    [isAnonymous]=\"(isAnonymous$ | async)!!\"\r\n    [canSaveGridSetting]=\"(canSaveGridSetting$ | async) === true\"\r\n    [rtl]=\"(rtl$ | async)!!\"\r\n    [selectedSearchPanelSettings]=\"(selectedSearchPanelSettings$ | async)!!\"\r\n    [searchPanelMoChanged]=\"(searchPanelMoChanged$ | async)!!\"\r\n    [selectedSearchPanelSettingsId]=\"(selectedSearchPanelSettingsId$ | async)!!\"\r\n    [hideSearchPanel]=\"(hideSearchPanel$ | async)!!\"\r\n    [pagingSetting]=\"(pagingSetting$ | async)!!\"\r\n    [context]=\"context\"\r\n    [contentDensity]=\"contentDensity$ | async\"\r\n    (closeEvent)=\"onClose()\"\r\n    (searchPanelMoChange)=\"onSearchPanelMoChanged()\"\r\n    (openManageFilters)=\"onOpenManageFilters()\"\r\n    (collapsedChange)=\"onCollapsedChange($event)\"\r\n    (hideSearchPanelClick)=\"onHideSearchPanelClick()\"\r\n    (filterSave)=\"onFilterSave()\"\r\n    (filterSaveAs)=\"onFilterSaveAs()\"\r\n    (showFilterFieldsSetting)=\"onShowFilterFieldsSetting()\"\r\n    (manageFilters)=\"onManageFilters()\"\r\n    (clearSearch)=\"onClearSearch()\"\r\n    (search)=\"onSearch()\"\r\n    (pageChange)=\"onPageChange($event)\"\r\n    (selectSearchPanelSettings)=\"onSelectSearchPanelSettings($event)\"\r\n    (shortCutCommand)=\"onShortcutCommand($event)\"\r\n>\r\n</bsu-barsa-ulv-main>\r\n", styles: [":host{width:100%;min-height:100%;height:auto;display:flex;flex-direction:column;cursor:default}.margin-ulv{margin-bottom:.25rem;margin-top:.1875rem}\n"] }]
+            args: [{ selector: 'bsu-ui-ulv-main-ui', providers: [UlvMainService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bsu-barsa-ulv-main\r\n    [shortcutHandler]=\"shortCuts$ | async\"\r\n    [style.style.width]=\"!isMobile ? null : '100%'\"\r\n    [layoutInfo]=\"layoutInfo\"\r\n    [attr.isReportPage]=\"isReportPage\"\r\n    [simpleSearchPanel]=\"simpleSearchPanel\"\r\n    [viewerControl]=\"viewer$ | async\"\r\n    [loading]=\"(mask$ | async) === true\"\r\n    [viewerLoading]=\"(viwerMask$ | async) === true\"\r\n    [hideViewerLoading]=\"(hideViewerLoading$ | async) === true\"\r\n    [cssBackground]=\"cssBackground$ | async\"\r\n    [standalone]=\"(standalone$ | async) === true\"\r\n    [landscape]=\"(landscape$ | async) === true\"\r\n    [hideUlvPageTitle]=\"(hideUlvPageTitle$ | async) === true\"\r\n    [isReportPage]=\"isReportPage\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [title]=\"title\"\r\n    [hidePaging]=\"(hidePaging$ | async) === true\"\r\n    [searchPanelUi]=\"(searchPanelUi$ | async)!!\"\r\n    [breadCrumbs]=\"(breadCrumbs$ | async)!!\"\r\n    [allSearchPanelSettings]=\"(allSearchPanelSettings$ | async)!!\"\r\n    [isAnonymous]=\"(isAnonymous$ | async)!!\"\r\n    [canSaveGridSetting]=\"(canSaveGridSetting$ | async) === true\"\r\n    [rtl]=\"(rtl$ | async)!!\"\r\n    [selectedSearchPanelSettings]=\"(selectedSearchPanelSettings$ | async)!!\"\r\n    [searchPanelMoChanged]=\"(searchPanelMoChanged$ | async)!!\"\r\n    [selectedSearchPanelSettingsId]=\"(selectedSearchPanelSettingsId$ | async)!!\"\r\n    [hideSearchPanel]=\"(hideSearchPanel$ | async)!!\"\r\n    [pagingSetting]=\"(pagingSetting$ | async)!!\"\r\n    [context]=\"context\"\r\n    [contentDensity]=\"contentDensity$ | async\"\r\n    (closeEvent)=\"onClose()\"\r\n    (searchPanelMoChange)=\"onSearchPanelMoChanged()\"\r\n    (openManageFilters)=\"onOpenManageFilters()\"\r\n    (collapsedChange)=\"onCollapsedChange($event)\"\r\n    (hideSearchPanelClick)=\"onHideSearchPanelClick()\"\r\n    (filterSave)=\"onFilterSave()\"\r\n    (filterSaveAs)=\"onFilterSaveAs()\"\r\n    (showFilterFieldsSetting)=\"onShowFilterFieldsSetting()\"\r\n    (manageFilters)=\"onManageFilters()\"\r\n    (clearSearch)=\"onClearSearch()\"\r\n    (search)=\"onSearch()\"\r\n    (pageChange)=\"onPageChange($event)\"\r\n    (selectSearchPanelSettings)=\"onSelectSearchPanelSettings($event)\"\r\n    (shortCutCommand)=\"onShortcutCommand($event)\"\r\n>\r\n</bsu-barsa-ulv-main>\r\n", styles: [":host{width:100%;min-height:100%;height:auto;display:flex;flex-direction:column;cursor:default}.margin-ulv{margin-bottom:.25rem;margin-top:.1875rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { context: [{
                 type: Input
             }], isReportPage: [{
@@ -11401,11 +11404,11 @@ class UiTextAreaComponent extends FieldBaseComponent {
         this._cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiTextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiTextAreaComponent, isStandalone: false, selector: "bsu-ui-text-area", viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isEmbedHtml) {\r\n<textarea\r\n    #textarea\r\n    fd-form-control\r\n    [id]=\"id\"\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [disabled]=\"(disable$ | async) === true ? true : null\"\r\n    growing=\"true\"\r\n    wrapType=\"hard\"\r\n    [attr.title]=\"value\"\r\n    [value]=\"!value ? '' : value\"\r\n    (input)=\"onValueChange($event)\"\r\n    (keyup)=\"onKeyup()\"\r\n    [style.min-height.px]=\"minHeight\"\r\n    [style.height]=\"fixHeightValue ? fixHeightValue : null\"\r\n    [style.overflow-y]=\"fixHeightValue ? 'auto' : null\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.5\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n></textarea>\r\n} @else {\r\n<textarea fd-form-control [innerHTML]=\"value | sanitizeText\"></textarea>\r\n}\r\n", styles: [":host{display:block}textarea{width:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiTextAreaComponent, isStandalone: false, selector: "bsu-ui-text-area", viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isEmbedHtml) {\r\n<textarea\r\n    #textarea\r\n    fd-form-control\r\n    [id]=\"id\"\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [disabled]=\"(disable$ | async) === true ? true : null\"\r\n    growing=\"true\"\r\n    wrapType=\"hard\"\r\n    [attr.title]=\"value\"\r\n    [value]=\"!value ? '' : value\"\r\n    (input)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    (keyup)=\"onKeyup()\"\r\n    [style.min-height.px]=\"minHeight\"\r\n    [style.height]=\"fixHeightValue ? fixHeightValue : null\"\r\n    [style.overflow-y]=\"fixHeightValue ? 'auto' : null\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.5\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n></textarea>\r\n} @else {\r\n<textarea fd-form-control [innerHTML]=\"value | sanitizeText\"></textarea>\r\n}\r\n", styles: [":host{display:block}textarea{width:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiTextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-text-area', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (!isEmbedHtml) {\r\n<textarea\r\n    #textarea\r\n    fd-form-control\r\n    [id]=\"id\"\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [disabled]=\"(disable$ | async) === true ? true : null\"\r\n    growing=\"true\"\r\n    wrapType=\"hard\"\r\n    [attr.title]=\"value\"\r\n    [value]=\"!value ? '' : value\"\r\n    (input)=\"onValueChange($event)\"\r\n    (keyup)=\"onKeyup()\"\r\n    [style.min-height.px]=\"minHeight\"\r\n    [style.height]=\"fixHeightValue ? fixHeightValue : null\"\r\n    [style.overflow-y]=\"fixHeightValue ? 'auto' : null\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.5\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n></textarea>\r\n} @else {\r\n<textarea fd-form-control [innerHTML]=\"value | sanitizeText\"></textarea>\r\n}\r\n", styles: [":host{display:block}textarea{width:100%;overflow:hidden}\n"] }]
+            args: [{ selector: 'bsu-ui-text-area', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (!isEmbedHtml) {\r\n<textarea\r\n    #textarea\r\n    fd-form-control\r\n    [id]=\"id\"\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [disabled]=\"(disable$ | async) === true ? true : null\"\r\n    growing=\"true\"\r\n    wrapType=\"hard\"\r\n    [attr.title]=\"value\"\r\n    [value]=\"!value ? '' : value\"\r\n    (input)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    (keyup)=\"onKeyup()\"\r\n    [style.min-height.px]=\"minHeight\"\r\n    [style.height]=\"fixHeightValue ? fixHeightValue : null\"\r\n    [style.overflow-y]=\"fixHeightValue ? 'auto' : null\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.5\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n></textarea>\r\n} @else {\r\n<textarea fd-form-control [innerHTML]=\"value | sanitizeText\"></textarea>\r\n}\r\n", styles: [":host{display:block}textarea{width:100%;overflow:hidden}\n"] }]
         }], propDecorators: { textarea: [{
                 type: ViewChild,
                 args: ['textarea', { read: ElementRef }]
@@ -11899,11 +11902,11 @@ class UiDateTimeComponent extends FieldBaseComponent {
         return caption;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiDateTimeComponent, isStandalone: false, selector: "bsu-ui-date-time", inputs: { GetCaption: "GetCaption" }, viewQueries: [{ propertyName: "datetimePickerRef", first: true, predicate: ["datetimePicker"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "durationPickerRef", first: true, predicate: ["durationPicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if ((readonly$ | async) === true) {\r\n<input fd-form-control type=\"text\" [attr.readonly]=\"true\" [value]=\"value ? valueCaption : ''\" />\r\n} @else{\r\n<div\r\n    [class.disabled]=\"(disable$ | async) === true\"\r\n    [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\r\n    [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : 'rtl'\"\r\n>\r\n    <bc-date-time-picker\r\n        [value]=\"value\"\r\n        [buttonMenuMode]=\"parameters?.ButtonMenuMode === true\"\r\n        [culture]=\"culture\"\r\n        [showDate]=\"Setting.ShowDate1\"\r\n        [showTime]=\"Setting.ShowTime1\"\r\n        [placeholder]=\"parameters?.ButtonMenuMode === true ? parameters.Placeholder : formatPattern\"\r\n        [calendarType]=\"Setting.CalendarType\"\r\n        [formatPattern]=\"formatPattern\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"\r\n        [isMobile]=\"isMobile\"\r\n        [daterangeMode]=\"parameters?.DateRangeMode === true\"\r\n        [inlineMode]=\"parameters?.InlineMode === true\"\r\n        [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n        [disabled]=\"(disable$ | async) === true ? true : false\"\r\n        (valueChange)=\"onDateChange2($event)\"\r\n        (rangeChange)=\"onRangeChange($event)\"\r\n    >\r\n    </bc-date-time-picker>\r\n</div>\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i2$4.DateTimePickerComponent, selector: "bc-date-time-picker", inputs: ["placeholder", "calendarType", "formatPattern", "value", "timeValue", "startRangeDate", "endRangeDate", "isRangePicker", "showTime", "showDate", "rtl", "deviceSize", "isMobile", "readonly", "disabled", "buttonMenuMode", "inlineMode", "daterangeMode", "culture"], outputs: ["rangeChange", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiDateTimeComponent, isStandalone: false, selector: "bsu-ui-date-time", inputs: { GetCaption: "GetCaption" }, viewQueries: [{ propertyName: "datetimePickerRef", first: true, predicate: ["datetimePicker"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "durationPickerRef", first: true, predicate: ["durationPicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if ((readonly$ | async) === true) {\r\n<input fd-form-control type=\"text\" [attr.readonly]=\"true\" [value]=\"value ? valueCaption : ''\" />\r\n} @else{\r\n<div\r\n    [class.disabled]=\"(disable$ | async) === true\"\r\n    [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\r\n    [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n>\r\n    <bc-date-time-picker\r\n        [value]=\"value\"\r\n        [buttonMenuMode]=\"parameters?.ButtonMenuMode === true\"\r\n        [culture]=\"culture\"\r\n        [showDate]=\"Setting.ShowDate1\"\r\n        [showTime]=\"Setting.ShowTime1\"\r\n        [placeholder]=\"parameters?.ButtonMenuMode === true ? parameters.Placeholder : formatPattern\"\r\n        [calendarType]=\"Setting.CalendarType\"\r\n        [formatPattern]=\"formatPattern\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"\r\n        [isMobile]=\"isMobile\"\r\n        [daterangeMode]=\"parameters?.DateRangeMode === true\"\r\n        [inlineMode]=\"parameters?.InlineMode === true\"\r\n        [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n        [disabled]=\"(disable$ | async) === true ? true : false\"\r\n        (valueChange)=\"onDateChange2($event)\"\r\n        (rangeChange)=\"onRangeChange($event)\"\r\n    >\r\n    </bc-date-time-picker>\r\n</div>\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i2$4.DateTimePickerComponent, selector: "bc-date-time-picker", inputs: ["placeholder", "calendarType", "formatPattern", "value", "timeValue", "startRangeDate", "endRangeDate", "isRangePicker", "showTime", "showDate", "rtl", "deviceSize", "isMobile", "readonly", "disabled", "buttonMenuMode", "inlineMode", "daterangeMode", "culture"], outputs: ["rangeChange", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiDateTimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-date-time', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if ((readonly$ | async) === true) {\r\n<input fd-form-control type=\"text\" [attr.readonly]=\"true\" [value]=\"value ? valueCaption : ''\" />\r\n} @else{\r\n<div\r\n    [class.disabled]=\"(disable$ | async) === true\"\r\n    [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\r\n    [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : 'rtl'\"\r\n>\r\n    <bc-date-time-picker\r\n        [value]=\"value\"\r\n        [buttonMenuMode]=\"parameters?.ButtonMenuMode === true\"\r\n        [culture]=\"culture\"\r\n        [showDate]=\"Setting.ShowDate1\"\r\n        [showTime]=\"Setting.ShowTime1\"\r\n        [placeholder]=\"parameters?.ButtonMenuMode === true ? parameters.Placeholder : formatPattern\"\r\n        [calendarType]=\"Setting.CalendarType\"\r\n        [formatPattern]=\"formatPattern\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"\r\n        [isMobile]=\"isMobile\"\r\n        [daterangeMode]=\"parameters?.DateRangeMode === true\"\r\n        [inlineMode]=\"parameters?.InlineMode === true\"\r\n        [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n        [disabled]=\"(disable$ | async) === true ? true : false\"\r\n        (valueChange)=\"onDateChange2($event)\"\r\n        (rangeChange)=\"onRangeChange($event)\"\r\n    >\r\n    </bc-date-time-picker>\r\n</div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'bsu-ui-date-time', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if ((readonly$ | async) === true) {\r\n<input fd-form-control type=\"text\" [attr.readonly]=\"true\" [value]=\"value ? valueCaption : ''\" />\r\n} @else{\r\n<div\r\n    [class.disabled]=\"(disable$ | async) === true\"\r\n    [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\r\n    [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n>\r\n    <bc-date-time-picker\r\n        [value]=\"value\"\r\n        [buttonMenuMode]=\"parameters?.ButtonMenuMode === true\"\r\n        [culture]=\"culture\"\r\n        [showDate]=\"Setting.ShowDate1\"\r\n        [showTime]=\"Setting.ShowTime1\"\r\n        [placeholder]=\"parameters?.ButtonMenuMode === true ? parameters.Placeholder : formatPattern\"\r\n        [calendarType]=\"Setting.CalendarType\"\r\n        [formatPattern]=\"formatPattern\"\r\n        [deviceSize]=\"(deviceSize$ | async)!!\"\r\n        [isMobile]=\"isMobile\"\r\n        [daterangeMode]=\"parameters?.DateRangeMode === true\"\r\n        [inlineMode]=\"parameters?.InlineMode === true\"\r\n        [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n        [disabled]=\"(disable$ | async) === true ? true : false\"\r\n        (valueChange)=\"onDateChange2($event)\"\r\n        (rangeChange)=\"onRangeChange($event)\"\r\n    >\r\n    </bc-date-time-picker>\r\n</div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { datetimePickerRef: [{
                 type: ViewChild,
                 args: ['datetimePicker']
@@ -12344,11 +12347,11 @@ class UiNumIntUiComponent extends NumberBaseComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiNumIntUiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiNumIntUiComponent, isStandalone: false, selector: "bsu-ui-num-int-ui", viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<input\r\n    #inputRef\r\n    fd-form-control\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\r\n    [type]=\"hasMask ? 'text' : 'number'\"\r\n    [id]=\"id\"\r\n    [style.direction]=\"'ltr'\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : 'right'\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    (input)=\"onValueChange($event)\"\r\n    \r\n/>\r\n\r\n\r\n", styles: [":host{display:block}.number-input{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiNumIntUiComponent, isStandalone: false, selector: "bsu-ui-num-int-ui", viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<input\r\n    #inputRef\r\n    fd-form-control\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\r\n    [type]=\"hasMask ? 'text' : 'number'\"\r\n    [id]=\"id\"    \r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    (input)=\"onValueChange($event)\"\r\n    \r\n/>\r\n\r\n\r\n", styles: [":host{display:block}.number-input{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiNumIntUiComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-num-int-ui', standalone: false, template: "<input\r\n    #inputRef\r\n    fd-form-control\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\r\n    [type]=\"hasMask ? 'text' : 'number'\"\r\n    [id]=\"id\"\r\n    [style.direction]=\"'ltr'\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : 'right'\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    (input)=\"onValueChange($event)\"\r\n    \r\n/>\r\n\r\n\r\n", styles: [":host{display:block}.number-input{display:block}\n"] }]
+            args: [{ selector: 'bsu-ui-num-int-ui', standalone: false, template: "<input\r\n    #inputRef\r\n    fd-form-control\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\r\n    [type]=\"hasMask ? 'text' : 'number'\"\r\n    [id]=\"id\"    \r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    (input)=\"onValueChange($event)\"\r\n    \r\n/>\r\n\r\n\r\n", styles: [":host{display:block}.number-input{display:block}\n"] }]
         }], propDecorators: { inputRef: [{
                 type: ViewChild,
                 args: ['inputRef', { read: ElementRef, static: true }]
@@ -13260,11 +13263,11 @@ class UiSimpleComboComponent extends FieldBaseComponent {
         this.fireContextEvent('select', this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiSimpleComboComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiSimpleComboComponent, isStandalone: false, selector: "bsu-ui-simple-combo", inputs: { MinSize: "MinSize" }, viewQueries: [{ propertyName: "fdComboRef", first: true, predicate: ComboboxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (Setting.IconDisplayType !== 'Image' && !popupMode) {\r\n<!-- <fd-select\r\n    style=\"width: 100%\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [value]=\"value\"\r\n    [mobile]=\"(deviceSize$ | async) === 's'\"\r\n    [mobileConfig]=\"mobileConfig\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n>\r\n    @for (item of context.store.data[context.store.root]; track item) {\r\n    <fd-option\r\n        [value]=\"item.id\"\r\n        [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n        [class.control-disabled]=\"item.IsEmpty\"\r\n        [class.list-empty-item]=\"item.IsEmpty\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, popupMode: true }\"></ng-container>\r\n    </fd-option>\r\n    }\r\n</fd-select> -->\r\n<fd-combobox\r\n    [inputId]=\"id\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [displayFn]=\"displayFn\"\r\n    [(ngModel)]=\"tvalue\"\r\n    [readOnly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n    [fillOnSelect]=\"true\"\r\n    [dropdownValues]=\"context.store.data[context.store.root]\"\r\n    (itemClicked)=\"onItemClick($event)\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-container *fdComboboxItem=\"let item; use: rowDataOption; inputText as search\">\r\n        <!-- Note that in this case you are responsible for highlighting. -->\r\n        @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n        <img fd-list-icon [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n        } } @if (Setting.IconDisplayType !== 'Image') {\r\n        <span fd-list-title [innerHTML]=\"item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate)\"></span>\r\n        }\r\n    </ng-container>\r\n</fd-combobox>\r\n} @if (Setting.IconDisplayType === 'Image' || popupMode) {\r\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\r\n    <fd-popover-control>\r\n        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n            @if (value && value !== '0') {\r\n            <img [src]=\"value | comboRowImg: context.store.data.Rows\" />\r\n            }\r\n        </button>\r\n    </fd-popover-control>\r\n    <fd-popover-body class=\"combo-popupmode\">\r\n        @for (item of context.store.data[context.store.root]; track item) {\r\n        <button fd-button fdType=\"transparent\" [title]=\"item.txt\" (click)=\"popover.close(); onValueChange(item.id)\">\r\n            @if (item.url) {\r\n            <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n            }\r\n        </button>\r\n        }\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\n<ng-template #itemTemplate let-item let-popupMode=\"popupMode\">\r\n    @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n    <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n    } } @if (Setting.IconDisplayType !== 'Image') {\r\n    {{ item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate) }}\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:flex;align-self:center;align-items:center;width:100%;height:100%}:host ::ng-deep fd-select fd-popover{width:100%}:host fd-combobox{width:100%}:host fd-combobox ::ng-deep fd-popover{width:100%}:host ::ng-deep .fd-popover-custom{width:100%}:host ::ng-deep fd-combobox-mobile fd-dialog-footer{position:absolute;bottom:0;width:100%}:host ::ng-deep fd-combobox-mobile .fd-dialog__content.fd-dialog__content--mobile{width:80svw;height:60svh}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}fd-popover{margin:.25rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$9.ComboboxComponent, selector: "fd-combobox", inputs: ["comboboxId", "inputId", "ariaLabel", "ariaLabelledBy", "required", "dropdownValues", "filterFn", "disabled", "placeholder", "isSearch", "glyph", "glyphFont", "showClearButton", "triggers", "closeOnOutsideClick", "openOnKeyboardEvent", "state", "itemTemplate", "groupFn", "maxHeight", "dropDownMaxWidthPx", "noDropDownMaxWidth", "width", "searchFn", "highlighting", "closeOnSelect", "fillOnSelect", "autoComplete", "fillControlMode", "communicateByObject", "displayFn", "buttonFocusable", "clearButtonFocusable", "readOnly", "mobile", "mobileConfig", "showDropdownButton", "includes", "title", "byline", "tabOutStrategy"], outputs: ["itemClicked", "openChange", "inputTextChange"] }, { kind: "directive", type: i4$9.ComboboxItemDirective, selector: "[fdComboboxItem]", inputs: ["fdComboboxItemUse"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ComboRowImagePipe, name: "comboRowImg" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiSimpleComboComponent, isStandalone: false, selector: "bsu-ui-simple-combo", inputs: { MinSize: "MinSize" }, viewQueries: [{ propertyName: "fdComboRef", first: true, predicate: ComboboxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (Setting.IconDisplayType !== 'Image' && !popupMode) {\r\n<!-- <fd-select\r\n    style=\"width: 100%\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [value]=\"value\"\r\n    [mobile]=\"(deviceSize$ | async) === 's'\"\r\n    [mobileConfig]=\"mobileConfig\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n>\r\n    @for (item of context.store.data[context.store.root]; track item) {\r\n    <fd-option\r\n        [value]=\"item.id\"\r\n        [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n        [class.control-disabled]=\"item.IsEmpty\"\r\n        [class.list-empty-item]=\"item.IsEmpty\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, popupMode: true }\"></ng-container>\r\n    </fd-option>\r\n    }\r\n</fd-select> -->\r\n<fd-combobox\r\n    [inputId]=\"id\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [displayFn]=\"displayFn\"\r\n    [(ngModel)]=\"tvalue\"\r\n    [readOnly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n    [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [class.ltr]=\"Setting.IsLtr === true\"\r\n    [fillOnSelect]=\"true\"\r\n    [dropdownValues]=\"context.store.data[context.store.root]\"\r\n    (itemClicked)=\"onItemClick($event)\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-container *fdComboboxItem=\"let item; use: rowDataOption; inputText as search\">\r\n        <!-- Note that in this case you are responsible for highlighting. -->\r\n        @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n        <img fd-list-icon [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n        } } @if (Setting.IconDisplayType !== 'Image') {\r\n        <span fd-list-title [innerHTML]=\"item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate)\"></span>\r\n        }\r\n    </ng-container>\r\n</fd-combobox>\r\n} @if (Setting.IconDisplayType === 'Image' || popupMode) {\r\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\r\n    <fd-popover-control>\r\n        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n            @if (value && value !== '0') {\r\n            <img [src]=\"value | comboRowImg: context.store.data.Rows\" />\r\n            }\r\n        </button>\r\n    </fd-popover-control>\r\n    <fd-popover-body class=\"combo-popupmode\">\r\n        @for (item of context.store.data[context.store.root]; track item) {\r\n        <button fd-button fdType=\"transparent\" [title]=\"item.txt\" (click)=\"popover.close(); onValueChange(item.id)\">\r\n            @if (item.url) {\r\n            <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n            }\r\n        </button>\r\n        }\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\n<ng-template #itemTemplate let-item let-popupMode=\"popupMode\">\r\n    @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n    <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n    } } @if (Setting.IconDisplayType !== 'Image') {\r\n    {{ item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate) }}\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:flex;align-self:center;align-items:center;width:100%;height:100%}:host ::ng-deep fd-select fd-popover{width:100%}:host fd-combobox{width:100%}:host fd-combobox ::ng-deep fd-popover{width:100%}:host fd-combobox ::ng-deep .ltr input{text-align:left!important}:host ::ng-deep .fd-popover-custom{width:100%}:host ::ng-deep fd-combobox-mobile fd-dialog-footer{position:absolute;bottom:0;width:100%}:host ::ng-deep fd-combobox-mobile .fd-dialog__content.fd-dialog__content--mobile{width:80svw;height:60svh}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}fd-popover{margin:.25rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$9.ComboboxComponent, selector: "fd-combobox", inputs: ["comboboxId", "inputId", "ariaLabel", "ariaLabelledBy", "required", "dropdownValues", "filterFn", "disabled", "placeholder", "isSearch", "glyph", "glyphFont", "showClearButton", "triggers", "closeOnOutsideClick", "openOnKeyboardEvent", "state", "itemTemplate", "groupFn", "maxHeight", "dropDownMaxWidthPx", "noDropDownMaxWidth", "width", "searchFn", "highlighting", "closeOnSelect", "fillOnSelect", "autoComplete", "fillControlMode", "communicateByObject", "displayFn", "buttonFocusable", "clearButtonFocusable", "readOnly", "mobile", "mobileConfig", "showDropdownButton", "includes", "title", "byline", "tabOutStrategy"], outputs: ["itemClicked", "openChange", "inputTextChange"] }, { kind: "directive", type: i4$9.ComboboxItemDirective, selector: "[fdComboboxItem]", inputs: ["fdComboboxItemUse"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ComboRowImagePipe, name: "comboRowImg" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiSimpleComboComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-simple-combo', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (Setting.IconDisplayType !== 'Image' && !popupMode) {\r\n<!-- <fd-select\r\n    style=\"width: 100%\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [value]=\"value\"\r\n    [mobile]=\"(deviceSize$ | async) === 's'\"\r\n    [mobileConfig]=\"mobileConfig\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n>\r\n    @for (item of context.store.data[context.store.root]; track item) {\r\n    <fd-option\r\n        [value]=\"item.id\"\r\n        [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n        [class.control-disabled]=\"item.IsEmpty\"\r\n        [class.list-empty-item]=\"item.IsEmpty\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, popupMode: true }\"></ng-container>\r\n    </fd-option>\r\n    }\r\n</fd-select> -->\r\n<fd-combobox\r\n    [inputId]=\"id\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [displayFn]=\"displayFn\"\r\n    [(ngModel)]=\"tvalue\"\r\n    [readOnly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n    [fillOnSelect]=\"true\"\r\n    [dropdownValues]=\"context.store.data[context.store.root]\"\r\n    (itemClicked)=\"onItemClick($event)\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-container *fdComboboxItem=\"let item; use: rowDataOption; inputText as search\">\r\n        <!-- Note that in this case you are responsible for highlighting. -->\r\n        @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n        <img fd-list-icon [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n        } } @if (Setting.IconDisplayType !== 'Image') {\r\n        <span fd-list-title [innerHTML]=\"item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate)\"></span>\r\n        }\r\n    </ng-container>\r\n</fd-combobox>\r\n} @if (Setting.IconDisplayType === 'Image' || popupMode) {\r\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\r\n    <fd-popover-control>\r\n        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n            @if (value && value !== '0') {\r\n            <img [src]=\"value | comboRowImg: context.store.data.Rows\" />\r\n            }\r\n        </button>\r\n    </fd-popover-control>\r\n    <fd-popover-body class=\"combo-popupmode\">\r\n        @for (item of context.store.data[context.store.root]; track item) {\r\n        <button fd-button fdType=\"transparent\" [title]=\"item.txt\" (click)=\"popover.close(); onValueChange(item.id)\">\r\n            @if (item.url) {\r\n            <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n            }\r\n        </button>\r\n        }\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\n<ng-template #itemTemplate let-item let-popupMode=\"popupMode\">\r\n    @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n    <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n    } } @if (Setting.IconDisplayType !== 'Image') {\r\n    {{ item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate) }}\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:flex;align-self:center;align-items:center;width:100%;height:100%}:host ::ng-deep fd-select fd-popover{width:100%}:host fd-combobox{width:100%}:host fd-combobox ::ng-deep fd-popover{width:100%}:host ::ng-deep .fd-popover-custom{width:100%}:host ::ng-deep fd-combobox-mobile fd-dialog-footer{position:absolute;bottom:0;width:100%}:host ::ng-deep fd-combobox-mobile .fd-dialog__content.fd-dialog__content--mobile{width:80svw;height:60svh}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}fd-popover{margin:.25rem 0}\n"] }]
+            args: [{ selector: 'bsu-ui-simple-combo', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (Setting.IconDisplayType !== 'Image' && !popupMode) {\r\n<!-- <fd-select\r\n    style=\"width: 100%\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [value]=\"value\"\r\n    [mobile]=\"(deviceSize$ | async) === 's'\"\r\n    [mobileConfig]=\"mobileConfig\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n>\r\n    @for (item of context.store.data[context.store.root]; track item) {\r\n    <fd-option\r\n        [value]=\"item.id\"\r\n        [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n        [class.control-disabled]=\"item.IsEmpty\"\r\n        [class.list-empty-item]=\"item.IsEmpty\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, popupMode: true }\"></ng-container>\r\n    </fd-option>\r\n    }\r\n</fd-select> -->\r\n<fd-combobox\r\n    [inputId]=\"id\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [displayFn]=\"displayFn\"\r\n    [(ngModel)]=\"tvalue\"\r\n    [readOnly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n    [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [class.ltr]=\"Setting.IsLtr === true\"\r\n    [fillOnSelect]=\"true\"\r\n    [dropdownValues]=\"context.store.data[context.store.root]\"\r\n    (itemClicked)=\"onItemClick($event)\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-container *fdComboboxItem=\"let item; use: rowDataOption; inputText as search\">\r\n        <!-- Note that in this case you are responsible for highlighting. -->\r\n        @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n        <img fd-list-icon [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n        } } @if (Setting.IconDisplayType !== 'Image') {\r\n        <span fd-list-title [innerHTML]=\"item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate)\"></span>\r\n        }\r\n    </ng-container>\r\n</fd-combobox>\r\n} @if (Setting.IconDisplayType === 'Image' || popupMode) {\r\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\r\n    <fd-popover-control>\r\n        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n            @if (value && value !== '0') {\r\n            <img [src]=\"value | comboRowImg: context.store.data.Rows\" />\r\n            }\r\n        </button>\r\n    </fd-popover-control>\r\n    <fd-popover-body class=\"combo-popupmode\">\r\n        @for (item of context.store.data[context.store.root]; track item) {\r\n        <button fd-button fdType=\"transparent\" [title]=\"item.txt\" (click)=\"popover.close(); onValueChange(item.id)\">\r\n            @if (item.url) {\r\n            <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n            }\r\n        </button>\r\n        }\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\n<ng-template #itemTemplate let-item let-popupMode=\"popupMode\">\r\n    @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n    <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n    } } @if (Setting.IconDisplayType !== 'Image') {\r\n    {{ item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate) }}\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:flex;align-self:center;align-items:center;width:100%;height:100%}:host ::ng-deep fd-select fd-popover{width:100%}:host fd-combobox{width:100%}:host fd-combobox ::ng-deep fd-popover{width:100%}:host fd-combobox ::ng-deep .ltr input{text-align:left!important}:host ::ng-deep .fd-popover-custom{width:100%}:host ::ng-deep fd-combobox-mobile fd-dialog-footer{position:absolute;bottom:0;width:100%}:host ::ng-deep fd-combobox-mobile .fd-dialog__content.fd-dialog__content--mobile{width:80svw;height:60svh}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}fd-popover{margin:.25rem 0}\n"] }]
         }], propDecorators: { fdComboRef: [{
                 type: ViewChild,
                 args: [ComboboxComponent]
@@ -13273,12 +13276,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             }] } });
 
 class UiCheckBoxComponent extends DeviceInfoFieldBaseComponent {
+    constructor() {
+        super(...arguments);
+        this._justifyContent = null;
+    }
     get MinSize() {
         return { width: 0, height: 33 };
     }
     ngOnInit() {
         super.ngOnInit();
         this.helpDescription = BarsaApi.Common.Util.TryGetValue(this.layoutInfo.FieldUi, 'Setting.HelpDescription', '');
+        this.Setting.IsLtr && (this._justifyContent = 'end');
         this.showText =
             this.layoutInfo.TextVisible === false && this.layoutInfo.UseLayoutItemTextForControl ? true : false;
         let caption = this.layoutInfo.Caption;
@@ -13297,13 +13305,16 @@ class UiCheckBoxComponent extends DeviceInfoFieldBaseComponent {
         this.fireContextEvent('check', val);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiCheckBoxComponent, isStandalone: false, selector: "bsu-ui-check-box", inputs: { MinSize: "MinSize" }, usesInheritance: true, ngImport: i0, template: "@if(showText && helpDescription){\r\n<fd-icon glyph=\"question-mark\" [fd-inline-help]=\"templateRef\" tabindex=\"0\"></fd-icon>\r\n}\r\n<fd-checkbox\r\n    [id]=\"id\"\r\n    (change)=\"onValueChange()\"\r\n    [ngModel]=\"value\"\r\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\r\n    [label]=\"!showText ? '' : caption\"\r\n    [wrapLabel]=\"true\"\r\n    [attr.title]=\"caption\"\r\n>\r\n</fd-checkbox>\r\n\r\n<ng-template #templateRef>\r\n    <div [style.display]=\"'flex'\" [style.align-items]=\"'center'\" [innerHtml]=\"helpDescription | sanitizeText\"></div>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i4.InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiCheckBoxComponent, isStandalone: false, selector: "bsu-ui-check-box", inputs: { MinSize: "MinSize" }, host: { properties: { "style.justify-content": "this._justifyContent" } }, usesInheritance: true, ngImport: i0, template: "@if(showText && helpDescription){\r\n<fd-icon glyph=\"question-mark\" [fd-inline-help]=\"templateRef\" tabindex=\"0\"></fd-icon>\r\n}\r\n<fd-checkbox\r\n    [id]=\"id\"\r\n    (change)=\"onValueChange()\"\r\n    [ngModel]=\"value\"\r\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\r\n    [label]=\"!showText ? '' : caption\"\r\n    [wrapLabel]=\"true\"\r\n    [attr.title]=\"caption\"\r\n>\r\n</fd-checkbox>\r\n\r\n<ng-template #templateRef>\r\n    <div [style.display]=\"'flex'\" [style.align-items]=\"'center'\" [innerHtml]=\"helpDescription | sanitizeText\"></div>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i4.InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiCheckBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-check-box', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if(showText && helpDescription){\r\n<fd-icon glyph=\"question-mark\" [fd-inline-help]=\"templateRef\" tabindex=\"0\"></fd-icon>\r\n}\r\n<fd-checkbox\r\n    [id]=\"id\"\r\n    (change)=\"onValueChange()\"\r\n    [ngModel]=\"value\"\r\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\r\n    [label]=\"!showText ? '' : caption\"\r\n    [wrapLabel]=\"true\"\r\n    [attr.title]=\"caption\"\r\n>\r\n</fd-checkbox>\r\n\r\n<ng-template #templateRef>\r\n    <div [style.display]=\"'flex'\" [style.align-items]=\"'center'\" [innerHtml]=\"helpDescription | sanitizeText\"></div>\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;align-items:center}\n"] }]
         }], propDecorators: { MinSize: [{
                 type: Input
+            }], _justifyContent: [{
+                type: HostBinding,
+                args: ['style.justify-content']
             }] } });
 
 class UiSwitchButtonComponent extends UiCheckBoxComponent {
@@ -15237,7 +15248,7 @@ class BarsaChatComponent extends FormBaseComponent {
         this._newMessageText = $event.target.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatComponent, isStandalone: false, selector: "bsu-barsa-chat", providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "@if(layout94$ | async;as layout94){\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        chatTpl;\r\n        context: {\r\n            mo: mo$ | async,\r\n            karbaranEntekhabShode: '\u06A9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647' | controlUi: layout94,\r\n            jostejoKarbar: '\u062C\u0633\u062A\u062C\u0648 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94,\r\n            listGoftego: '\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94,\r\n            listGoftegoKarbarn: '\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648 \u06A9\u0627\u0631\u0628\u0631\u0627\u0646' | controlUi: layout94,\r\n            matnpishrafte: '\u0645\u062A\u0646 \u067E\u06CC\u0634\u0631\u0641\u062A\u0647 \u0635\u0641\u062D\u0647 \u0627\u0648\u0644' | controlUi: layout94,\r\n            radifGoftego: '\u0631\u062F\u06CC\u0641 \u06AF\u0641\u062A\u06AF\u0648 \u0645\u0648\u062C\u0648\u062F\u06CC\u062A' | controlUi: layout94,\r\n            deviceSize: deviceSize$ | async,\r\n            toolbarItems: toolbarItems$ | async,\r\n            dirValue: dirValue$ | async,\r\n            hasListKarbaran: '\u06A9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647' | controlUi: layout94\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n\r\n<ng-template\r\n    #chatTpl\r\n    let-hasListKarbaran=\"hasListKarbaran\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-dirValue=\"dirValue\"\r\n    let-toolbarItems=\"toolbarItems\"\r\n    let-karbaranEntekhabShode=\"karbaranEntekhabShode\"\r\n    let-jostejoKarbar=\"jostejoKarbar\"\r\n    let-listGoftego=\"listGoftego\"\r\n    let-listGoftegoKarbarn=\"listGoftegoKarbarn\"\r\n    let-matnpishrafte=\"matnpishrafte\"\r\n    let-radifGoftego=\"radifGoftego\"\r\n>\r\n    <div\r\n        class=\"tw-flex tw-w-full tw-bg-gradient-to-r tw-bg-gradient-to-r tw-from-[color-mix(in_srgb,var(--sapBackgroundColor)_95%,black_10%)] tw-to-[var(--sapBackgroundColor)]\"\r\n        fillEmptySpace\r\n        [class.tw-h-screen]=\"!karbaranEntekhabShode\"\r\n        [class.tw-justify-center]=\"karbaranEntekhabShode\"\r\n    >\r\n        @if (hasListKarbaran) {\r\n        <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n        }\r\n        <div\r\n            class=\"tw-w-full tw-h-full tw-flex tw-shrink-0 tw-relative\"\r\n            [style.background-color]=\"'var(--sapBaseColor)'\"\r\n        >\r\n            @if(hasListKarbaran){\r\n            <div class=\"tw-grow-0 tw-shrink-0 tw-w-full md:tw-w-96 tw-p-0 md:tw-p-6\">\r\n                <div\r\n                    class=\"tw-flex tw-flex-col tw-w-full tw-h-full tw-overflow-hidden tw-border-l tw-border-l-gray-300 md:tw-rounded-2xl md:tw-border md:tw-border-l-gray-300 md:tw-border-gray-300 dark:tw-border-l-gray-600 md:dark:tw-border-l-gray-600 md:dark:tw-border-gray-600\"\r\n                >\r\n                    <bsu-form-toolbar\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [buttons]=\"toolbarItems\"\r\n                        [dirValue]=\"(dirValue$ | async)!!\"\r\n                        (toolbarClick)=\"onToolbarClick($event)\"\r\n                        #formToolbar\r\n                    ></bsu-form-toolbar>\r\n                    @if (jostejoKarbar) {\r\n                    <bsu-layout-control [config]=\"jostejoKarbar\"></bsu-layout-control>\r\n                    } @if (karbaranEntekhabShode) {\r\n                    <bsu-layout-control [config]=\"karbaranEntekhabShode\" style=\"flex: 1\"></bsu-layout-control>\r\n                    }\r\n                </div>\r\n            </div>\r\n            } @else {\r\n            <div\r\n                class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('assets/chat-bg.png')] tw-bg-fixed tw-opacity-25\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-grow tw-shrink tw-relative\"\r\n                [ngClass]=\"{\r\n                    'md:tw-py-6 md:tw-pl-6 tw-hidden md:tw-flex': hasListKarbaran,\r\n                    'tw-flex': !hasListKarbaran\r\n                }\"\r\n            >\r\n                <div\r\n                    @inContentAnimation\r\n                    class=\"tw-h-full tw-bg-gradient-to-r tw-w-full tw-flex tw-flex-col tw-relative md:tw-border-gray-300 md:dark:tw-border-gray-600 tw-overflow-hidden\"\r\n                    [ngClass]=\"{\r\n                        'md:tw-border md:tw-rounded-2xl': hasListKarbaran\r\n                    }\"\r\n                >\r\n                    @if(listGoftego) {\r\n                    <bsu-layout-control [config]=\"listGoftego\" style=\"flex: 1\"></bsu-layout-control>\r\n                    } @if(listGoftegoKarbarn) {\r\n                    <bsu-layout-control [config]=\"listGoftegoKarbarn\" style=\"flex: 1\"></bsu-layout-control>\r\n                    } @if(matnpishrafte) {\r\n                    <bsu-layout-control [config]=\"matnpishrafte\" style=\"flex: 1\"></bsu-layout-control>\r\n                    }\r\n                    <div\r\n                        class=\"tw-w-full\"\r\n                        [ngClass]=\"{\r\n                            'tw-relative': hasListKarbaran,\r\n                            '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': !hasListKarbaran\r\n                        }\"\r\n                    >\r\n                        @if (replyingMessage()) {\r\n                        <div\r\n                            @inOutReplyingMessage\r\n                            class=\"tw-w-full tw-px-2 tw-py-1 tw-border-r-4 tw-border-r-bubble-mine tw-flex tw-gap-2 te-items-center tw-absolute tw-z-0 tw-bg-default tw-right-0 -tw-top-14\"\r\n                        >\r\n                            <button\r\n                                fd-button\r\n                                fdType=\"transparent\"\r\n                                glyph=\"decline\"\r\n                                class=\"tw-grow-0 tw-shrink-0\"\r\n                                (click)=\"replyingMessage.set(null)\"\r\n                            ></button>\r\n                            <div class=\"tw-flex tw-flex-col tw-grow tw-shrink tw-overflow-hidden\">\r\n                                <span class=\"tw-font-bold\">{{ replyingMessage().owner.name }}</span>\r\n                                <span class=\"tw-truncate\">{{\r\n                                    replyingMessage().text ??\r\n                                        replyingMessage().file?.name ??\r\n                                        replyingMessage().image?.name\r\n                                }}</span>\r\n                            </div>\r\n                            <div class=\"tw-w-8 tw-shrink-0 tw-grow-0\"></div>\r\n                        </div>\r\n                        }\r\n                        <div\r\n                            class=\"tw-w-full tw-flex tw-gap-2 tw-border-t tw-border-t-gray-300 dark:tw-border-t-gray-600 tw-bg-default tw-items-end tw-z-10\"\r\n                        >\r\n                            @if(radifGoftego) {\r\n                            <bsu-layout-control [config]=\"radifGoftego\"></bsu-layout-control>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div\r\n                    class=\"tw-absolute tw-top-1/2 -tw-translate-y-1/2 tw-left-1/2 -tw-translate-x-1/2 tw-flex tw-flex-col tw-gap-8 tw-items-center\"\r\n                >\r\n                    <!-- <img src=\"assets/not-selected-chat.png\" class=\"tw-w-64 tw-opacity-25\" /> -->\r\n                    <!--            <span class=\"tw-text-xl tw-font-bold tw-text-gray-400 dark:tw-text-gray-500\">-->\r\n                    <!--                \u0628\u0631\u0627\u06CC \u0634\u0631\u0648\u0639 \u06CC\u06A9 \u0686\u062A \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F-->\r\n                    <!--            </span>-->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (hasListKarbaran) {\r\n        <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "cellEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatComponent, isStandalone: false, selector: "bsu-barsa-chat", providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "@if(layout94$ | async;as layout94){\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        chatTpl;\r\n        context: {\r\n            mo: mo$ | async,\r\n            karbaranEntekhabShode: '\u06A9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647' | controlUi: layout94,\r\n            jostejoKarbar: '\u062C\u0633\u062A\u062C\u0648 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94,\r\n            listGoftego: '\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94,\r\n            listGoftegoKarbarn: '\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648 \u06A9\u0627\u0631\u0628\u0631\u0627\u0646' | controlUi: layout94,\r\n            matnpishrafte: '\u0645\u062A\u0646 \u067E\u06CC\u0634\u0631\u0641\u062A\u0647 \u0635\u0641\u062D\u0647 \u0627\u0648\u0644' | controlUi: layout94,\r\n            radifGoftego: '\u0631\u062F\u06CC\u0641 \u06AF\u0641\u062A\u06AF\u0648 \u0645\u0648\u062C\u0648\u062F\u06CC\u062A' | controlUi: layout94,\r\n            deviceSize: deviceSize$ | async,\r\n            toolbarItems: toolbarItems$ | async,\r\n            dirValue: dirValue$ | async,\r\n            hasListKarbaran: '\u06A9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647' | controlUi: layout94\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n\r\n<ng-template\r\n    #chatTpl\r\n    let-hasListKarbaran=\"hasListKarbaran\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-dirValue=\"dirValue\"\r\n    let-toolbarItems=\"toolbarItems\"\r\n    let-karbaranEntekhabShode=\"karbaranEntekhabShode\"\r\n    let-jostejoKarbar=\"jostejoKarbar\"\r\n    let-listGoftego=\"listGoftego\"\r\n    let-listGoftegoKarbarn=\"listGoftegoKarbarn\"\r\n    let-matnpishrafte=\"matnpishrafte\"\r\n    let-radifGoftego=\"radifGoftego\"\r\n>\r\n    <div\r\n        class=\"tw-flex tw-w-full tw-bg-gradient-to-r tw-bg-gradient-to-r tw-from-[color-mix(in_srgb,var(--sapBackgroundColor)_95%,black_10%)] tw-to-[var(--sapBackgroundColor)]\"\r\n        fillEmptySpace\r\n        [class.tw-h-screen]=\"!karbaranEntekhabShode\"\r\n        [class.tw-justify-center]=\"karbaranEntekhabShode\"\r\n    >\r\n        @if (hasListKarbaran) {\r\n        <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n        }\r\n        <div\r\n            class=\"tw-w-full tw-h-full tw-flex tw-shrink-0 tw-relative\"\r\n            [style.background-color]=\"'var(--sapBaseColor)'\"\r\n        >\r\n            @if(hasListKarbaran){\r\n            <div class=\"tw-grow-0 tw-shrink-0 tw-w-full md:tw-w-96 tw-p-0 md:tw-p-6\">\r\n                <div\r\n                    class=\"tw-flex tw-flex-col tw-w-full tw-h-full tw-overflow-hidden tw-border-l tw-border-l-gray-300 md:tw-rounded-2xl md:tw-border md:tw-border-l-gray-300 md:tw-border-gray-300 dark:tw-border-l-gray-600 md:dark:tw-border-l-gray-600 md:dark:tw-border-gray-600\"\r\n                >\r\n                    <bsu-form-toolbar\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [buttons]=\"toolbarItems\"\r\n                        [dirValue]=\"(dirValue$ | async)!!\"\r\n                        (toolbarClick)=\"onToolbarClick($event)\"\r\n                        #formToolbar\r\n                    ></bsu-form-toolbar>\r\n                    @if (jostejoKarbar) {\r\n                    <bsu-layout-control [config]=\"jostejoKarbar\"></bsu-layout-control>\r\n                    } @if (karbaranEntekhabShode) {\r\n                    <bsu-layout-control [config]=\"karbaranEntekhabShode\" style=\"flex: 1\"></bsu-layout-control>\r\n                    }\r\n                </div>\r\n            </div>\r\n            } @else {\r\n            <div\r\n                class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('assets/chat-bg.png')] tw-bg-fixed tw-opacity-25\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-grow tw-shrink tw-relative\"\r\n                [ngClass]=\"{\r\n                    'md:tw-py-6 md:tw-pl-6 tw-hidden md:tw-flex': hasListKarbaran,\r\n                    'tw-flex': !hasListKarbaran\r\n                }\"\r\n            >\r\n                <div\r\n                    @inContentAnimation\r\n                    class=\"tw-h-full tw-bg-gradient-to-r tw-w-full tw-flex tw-flex-col tw-relative md:tw-border-gray-300 md:dark:tw-border-gray-600 tw-overflow-hidden\"\r\n                    [ngClass]=\"{\r\n                        'md:tw-border md:tw-rounded-2xl': hasListKarbaran\r\n                    }\"\r\n                >\r\n                    @if(listGoftego) {\r\n                    <bsu-layout-control class=\"maincontent\" [config]=\"listGoftego\" style=\"flex: 1\"></bsu-layout-control>\r\n                    } @if(listGoftegoKarbarn) {\r\n                    <bsu-layout-control class=\"maincontent\" [config]=\"listGoftegoKarbarn\" style=\"flex: 1\"></bsu-layout-control>\r\n                    } @if(matnpishrafte) {\r\n                    <bsu-layout-control class=\"maincontent\" [config]=\"matnpishrafte\" style=\"flex: 1\"></bsu-layout-control>\r\n                    }\r\n                    <div\r\n                        class=\"tw-w-full\"\r\n                        [ngClass]=\"{\r\n                            'tw-relative': hasListKarbaran,\r\n                            '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': !hasListKarbaran\r\n                        }\"\r\n                    >\r\n                        @if (replyingMessage()) {\r\n                        <div\r\n                            @inOutReplyingMessage\r\n                            class=\"tw-w-full tw-px-2 tw-py-1 tw-border-r-4 tw-border-r-bubble-mine tw-flex tw-gap-2 te-items-center tw-absolute tw-z-0 tw-bg-default tw-right-0 -tw-top-14\"\r\n                        >\r\n                            <button\r\n                                fd-button\r\n                                fdType=\"transparent\"\r\n                                glyph=\"decline\"\r\n                                class=\"tw-grow-0 tw-shrink-0\"\r\n                                (click)=\"replyingMessage.set(null)\"\r\n                            ></button>\r\n                            <div class=\"tw-flex tw-flex-col tw-grow tw-shrink tw-overflow-hidden\">\r\n                                <span class=\"tw-font-bold\">{{ replyingMessage().owner.name }}</span>\r\n                                <span class=\"tw-truncate\">{{\r\n                                    replyingMessage().text ??\r\n                                        replyingMessage().file?.name ??\r\n                                        replyingMessage().image?.name\r\n                                }}</span>\r\n                            </div>\r\n                            <div class=\"tw-w-8 tw-shrink-0 tw-grow-0\"></div>\r\n                        </div>\r\n                        }\r\n                        <div\r\n                            class=\"tw-w-full tw-flex tw-gap-2 tw-border-t tw-border-t-gray-300 dark:tw-border-t-gray-600 tw-bg-default tw-items-end tw-z-10\"\r\n                        >\r\n                            @if(radifGoftego) {\r\n                            <bsu-layout-control [config]=\"radifGoftego\"></bsu-layout-control>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div\r\n                    class=\"tw-absolute tw-top-1/2 -tw-translate-y-1/2 tw-left-1/2 -tw-translate-x-1/2 tw-flex tw-flex-col tw-gap-8 tw-items-center\"\r\n                >\r\n                    <!-- <img src=\"assets/not-selected-chat.png\" class=\"tw-w-64 tw-opacity-25\" /> -->\r\n                    <!--            <span class=\"tw-text-xl tw-font-bold tw-text-gray-400 dark:tw-text-gray-500\">-->\r\n                    <!--                \u0628\u0631\u0627\u06CC \u0634\u0631\u0648\u0639 \u06CC\u06A9 \u0686\u062A \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F-->\r\n                    <!--            </span>-->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (hasListKarbaran) {\r\n        <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["bsu-layout-control.maincontent ::ng-deep>bnrc-field-ui>bsu-ui-ulv-main-ui{min-height:100%!important}bsu-layout-control.maincontent ::ng-deep>bnrc-field-ui>bsu-ui-ulv-main-ui>bsu-barsa-ulv-main{display:flex;flex-grow:1}bsu-layout-control.maincontent ::ng-deep>bnrc-field-ui>bsu-ui-ulv-main-ui>bsu-barsa-ulv-main>div{min-height:100%!important;width:100%;flex-grow:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "cellEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], animations: [
             trigger('inContentAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'scale(50%, 50%)' }),
@@ -15283,7 +15294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                                 animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(50%)' }))
                             ])
                         ])
-                    ], standalone: false, template: "@if(layout94$ | async;as layout94){\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        chatTpl;\r\n        context: {\r\n            mo: mo$ | async,\r\n            karbaranEntekhabShode: '\u06A9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647' | controlUi: layout94,\r\n            jostejoKarbar: '\u062C\u0633\u062A\u062C\u0648 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94,\r\n            listGoftego: '\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94,\r\n            listGoftegoKarbarn: '\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648 \u06A9\u0627\u0631\u0628\u0631\u0627\u0646' | controlUi: layout94,\r\n            matnpishrafte: '\u0645\u062A\u0646 \u067E\u06CC\u0634\u0631\u0641\u062A\u0647 \u0635\u0641\u062D\u0647 \u0627\u0648\u0644' | controlUi: layout94,\r\n            radifGoftego: '\u0631\u062F\u06CC\u0641 \u06AF\u0641\u062A\u06AF\u0648 \u0645\u0648\u062C\u0648\u062F\u06CC\u062A' | controlUi: layout94,\r\n            deviceSize: deviceSize$ | async,\r\n            toolbarItems: toolbarItems$ | async,\r\n            dirValue: dirValue$ | async,\r\n            hasListKarbaran: '\u06A9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647' | controlUi: layout94\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n\r\n<ng-template\r\n    #chatTpl\r\n    let-hasListKarbaran=\"hasListKarbaran\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-dirValue=\"dirValue\"\r\n    let-toolbarItems=\"toolbarItems\"\r\n    let-karbaranEntekhabShode=\"karbaranEntekhabShode\"\r\n    let-jostejoKarbar=\"jostejoKarbar\"\r\n    let-listGoftego=\"listGoftego\"\r\n    let-listGoftegoKarbarn=\"listGoftegoKarbarn\"\r\n    let-matnpishrafte=\"matnpishrafte\"\r\n    let-radifGoftego=\"radifGoftego\"\r\n>\r\n    <div\r\n        class=\"tw-flex tw-w-full tw-bg-gradient-to-r tw-bg-gradient-to-r tw-from-[color-mix(in_srgb,var(--sapBackgroundColor)_95%,black_10%)] tw-to-[var(--sapBackgroundColor)]\"\r\n        fillEmptySpace\r\n        [class.tw-h-screen]=\"!karbaranEntekhabShode\"\r\n        [class.tw-justify-center]=\"karbaranEntekhabShode\"\r\n    >\r\n        @if (hasListKarbaran) {\r\n        <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n        }\r\n        <div\r\n            class=\"tw-w-full tw-h-full tw-flex tw-shrink-0 tw-relative\"\r\n            [style.background-color]=\"'var(--sapBaseColor)'\"\r\n        >\r\n            @if(hasListKarbaran){\r\n            <div class=\"tw-grow-0 tw-shrink-0 tw-w-full md:tw-w-96 tw-p-0 md:tw-p-6\">\r\n                <div\r\n                    class=\"tw-flex tw-flex-col tw-w-full tw-h-full tw-overflow-hidden tw-border-l tw-border-l-gray-300 md:tw-rounded-2xl md:tw-border md:tw-border-l-gray-300 md:tw-border-gray-300 dark:tw-border-l-gray-600 md:dark:tw-border-l-gray-600 md:dark:tw-border-gray-600\"\r\n                >\r\n                    <bsu-form-toolbar\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [buttons]=\"toolbarItems\"\r\n                        [dirValue]=\"(dirValue$ | async)!!\"\r\n                        (toolbarClick)=\"onToolbarClick($event)\"\r\n                        #formToolbar\r\n                    ></bsu-form-toolbar>\r\n                    @if (jostejoKarbar) {\r\n                    <bsu-layout-control [config]=\"jostejoKarbar\"></bsu-layout-control>\r\n                    } @if (karbaranEntekhabShode) {\r\n                    <bsu-layout-control [config]=\"karbaranEntekhabShode\" style=\"flex: 1\"></bsu-layout-control>\r\n                    }\r\n                </div>\r\n            </div>\r\n            } @else {\r\n            <div\r\n                class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('assets/chat-bg.png')] tw-bg-fixed tw-opacity-25\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-grow tw-shrink tw-relative\"\r\n                [ngClass]=\"{\r\n                    'md:tw-py-6 md:tw-pl-6 tw-hidden md:tw-flex': hasListKarbaran,\r\n                    'tw-flex': !hasListKarbaran\r\n                }\"\r\n            >\r\n                <div\r\n                    @inContentAnimation\r\n                    class=\"tw-h-full tw-bg-gradient-to-r tw-w-full tw-flex tw-flex-col tw-relative md:tw-border-gray-300 md:dark:tw-border-gray-600 tw-overflow-hidden\"\r\n                    [ngClass]=\"{\r\n                        'md:tw-border md:tw-rounded-2xl': hasListKarbaran\r\n                    }\"\r\n                >\r\n                    @if(listGoftego) {\r\n                    <bsu-layout-control [config]=\"listGoftego\" style=\"flex: 1\"></bsu-layout-control>\r\n                    } @if(listGoftegoKarbarn) {\r\n                    <bsu-layout-control [config]=\"listGoftegoKarbarn\" style=\"flex: 1\"></bsu-layout-control>\r\n                    } @if(matnpishrafte) {\r\n                    <bsu-layout-control [config]=\"matnpishrafte\" style=\"flex: 1\"></bsu-layout-control>\r\n                    }\r\n                    <div\r\n                        class=\"tw-w-full\"\r\n                        [ngClass]=\"{\r\n                            'tw-relative': hasListKarbaran,\r\n                            '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': !hasListKarbaran\r\n                        }\"\r\n                    >\r\n                        @if (replyingMessage()) {\r\n                        <div\r\n                            @inOutReplyingMessage\r\n                            class=\"tw-w-full tw-px-2 tw-py-1 tw-border-r-4 tw-border-r-bubble-mine tw-flex tw-gap-2 te-items-center tw-absolute tw-z-0 tw-bg-default tw-right-0 -tw-top-14\"\r\n                        >\r\n                            <button\r\n                                fd-button\r\n                                fdType=\"transparent\"\r\n                                glyph=\"decline\"\r\n                                class=\"tw-grow-0 tw-shrink-0\"\r\n                                (click)=\"replyingMessage.set(null)\"\r\n                            ></button>\r\n                            <div class=\"tw-flex tw-flex-col tw-grow tw-shrink tw-overflow-hidden\">\r\n                                <span class=\"tw-font-bold\">{{ replyingMessage().owner.name }}</span>\r\n                                <span class=\"tw-truncate\">{{\r\n                                    replyingMessage().text ??\r\n                                        replyingMessage().file?.name ??\r\n                                        replyingMessage().image?.name\r\n                                }}</span>\r\n                            </div>\r\n                            <div class=\"tw-w-8 tw-shrink-0 tw-grow-0\"></div>\r\n                        </div>\r\n                        }\r\n                        <div\r\n                            class=\"tw-w-full tw-flex tw-gap-2 tw-border-t tw-border-t-gray-300 dark:tw-border-t-gray-600 tw-bg-default tw-items-end tw-z-10\"\r\n                        >\r\n                            @if(radifGoftego) {\r\n                            <bsu-layout-control [config]=\"radifGoftego\"></bsu-layout-control>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div\r\n                    class=\"tw-absolute tw-top-1/2 -tw-translate-y-1/2 tw-left-1/2 -tw-translate-x-1/2 tw-flex tw-flex-col tw-gap-8 tw-items-center\"\r\n                >\r\n                    <!-- <img src=\"assets/not-selected-chat.png\" class=\"tw-w-64 tw-opacity-25\" /> -->\r\n                    <!--            <span class=\"tw-text-xl tw-font-bold tw-text-gray-400 dark:tw-text-gray-500\">-->\r\n                    <!--                \u0628\u0631\u0627\u06CC \u0634\u0631\u0648\u0639 \u06CC\u06A9 \u0686\u062A \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F-->\r\n                    <!--            </span>-->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (hasListKarbaran) {\r\n        <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n" }]
+                    ], standalone: false, template: "@if(layout94$ | async;as layout94){\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        chatTpl;\r\n        context: {\r\n            mo: mo$ | async,\r\n            karbaranEntekhabShode: '\u06A9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647' | controlUi: layout94,\r\n            jostejoKarbar: '\u062C\u0633\u062A\u062C\u0648 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94,\r\n            listGoftego: '\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94,\r\n            listGoftegoKarbarn: '\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648 \u06A9\u0627\u0631\u0628\u0631\u0627\u0646' | controlUi: layout94,\r\n            matnpishrafte: '\u0645\u062A\u0646 \u067E\u06CC\u0634\u0631\u0641\u062A\u0647 \u0635\u0641\u062D\u0647 \u0627\u0648\u0644' | controlUi: layout94,\r\n            radifGoftego: '\u0631\u062F\u06CC\u0641 \u06AF\u0641\u062A\u06AF\u0648 \u0645\u0648\u062C\u0648\u062F\u06CC\u062A' | controlUi: layout94,\r\n            deviceSize: deviceSize$ | async,\r\n            toolbarItems: toolbarItems$ | async,\r\n            dirValue: dirValue$ | async,\r\n            hasListKarbaran: '\u06A9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647' | controlUi: layout94\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n\r\n<ng-template\r\n    #chatTpl\r\n    let-hasListKarbaran=\"hasListKarbaran\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-dirValue=\"dirValue\"\r\n    let-toolbarItems=\"toolbarItems\"\r\n    let-karbaranEntekhabShode=\"karbaranEntekhabShode\"\r\n    let-jostejoKarbar=\"jostejoKarbar\"\r\n    let-listGoftego=\"listGoftego\"\r\n    let-listGoftegoKarbarn=\"listGoftegoKarbarn\"\r\n    let-matnpishrafte=\"matnpishrafte\"\r\n    let-radifGoftego=\"radifGoftego\"\r\n>\r\n    <div\r\n        class=\"tw-flex tw-w-full tw-bg-gradient-to-r tw-bg-gradient-to-r tw-from-[color-mix(in_srgb,var(--sapBackgroundColor)_95%,black_10%)] tw-to-[var(--sapBackgroundColor)]\"\r\n        fillEmptySpace\r\n        [class.tw-h-screen]=\"!karbaranEntekhabShode\"\r\n        [class.tw-justify-center]=\"karbaranEntekhabShode\"\r\n    >\r\n        @if (hasListKarbaran) {\r\n        <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n        }\r\n        <div\r\n            class=\"tw-w-full tw-h-full tw-flex tw-shrink-0 tw-relative\"\r\n            [style.background-color]=\"'var(--sapBaseColor)'\"\r\n        >\r\n            @if(hasListKarbaran){\r\n            <div class=\"tw-grow-0 tw-shrink-0 tw-w-full md:tw-w-96 tw-p-0 md:tw-p-6\">\r\n                <div\r\n                    class=\"tw-flex tw-flex-col tw-w-full tw-h-full tw-overflow-hidden tw-border-l tw-border-l-gray-300 md:tw-rounded-2xl md:tw-border md:tw-border-l-gray-300 md:tw-border-gray-300 dark:tw-border-l-gray-600 md:dark:tw-border-l-gray-600 md:dark:tw-border-gray-600\"\r\n                >\r\n                    <bsu-form-toolbar\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [buttons]=\"toolbarItems\"\r\n                        [dirValue]=\"(dirValue$ | async)!!\"\r\n                        (toolbarClick)=\"onToolbarClick($event)\"\r\n                        #formToolbar\r\n                    ></bsu-form-toolbar>\r\n                    @if (jostejoKarbar) {\r\n                    <bsu-layout-control [config]=\"jostejoKarbar\"></bsu-layout-control>\r\n                    } @if (karbaranEntekhabShode) {\r\n                    <bsu-layout-control [config]=\"karbaranEntekhabShode\" style=\"flex: 1\"></bsu-layout-control>\r\n                    }\r\n                </div>\r\n            </div>\r\n            } @else {\r\n            <div\r\n                class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('assets/chat-bg.png')] tw-bg-fixed tw-opacity-25\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-grow tw-shrink tw-relative\"\r\n                [ngClass]=\"{\r\n                    'md:tw-py-6 md:tw-pl-6 tw-hidden md:tw-flex': hasListKarbaran,\r\n                    'tw-flex': !hasListKarbaran\r\n                }\"\r\n            >\r\n                <div\r\n                    @inContentAnimation\r\n                    class=\"tw-h-full tw-bg-gradient-to-r tw-w-full tw-flex tw-flex-col tw-relative md:tw-border-gray-300 md:dark:tw-border-gray-600 tw-overflow-hidden\"\r\n                    [ngClass]=\"{\r\n                        'md:tw-border md:tw-rounded-2xl': hasListKarbaran\r\n                    }\"\r\n                >\r\n                    @if(listGoftego) {\r\n                    <bsu-layout-control class=\"maincontent\" [config]=\"listGoftego\" style=\"flex: 1\"></bsu-layout-control>\r\n                    } @if(listGoftegoKarbarn) {\r\n                    <bsu-layout-control class=\"maincontent\" [config]=\"listGoftegoKarbarn\" style=\"flex: 1\"></bsu-layout-control>\r\n                    } @if(matnpishrafte) {\r\n                    <bsu-layout-control class=\"maincontent\" [config]=\"matnpishrafte\" style=\"flex: 1\"></bsu-layout-control>\r\n                    }\r\n                    <div\r\n                        class=\"tw-w-full\"\r\n                        [ngClass]=\"{\r\n                            'tw-relative': hasListKarbaran,\r\n                            '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': !hasListKarbaran\r\n                        }\"\r\n                    >\r\n                        @if (replyingMessage()) {\r\n                        <div\r\n                            @inOutReplyingMessage\r\n                            class=\"tw-w-full tw-px-2 tw-py-1 tw-border-r-4 tw-border-r-bubble-mine tw-flex tw-gap-2 te-items-center tw-absolute tw-z-0 tw-bg-default tw-right-0 -tw-top-14\"\r\n                        >\r\n                            <button\r\n                                fd-button\r\n                                fdType=\"transparent\"\r\n                                glyph=\"decline\"\r\n                                class=\"tw-grow-0 tw-shrink-0\"\r\n                                (click)=\"replyingMessage.set(null)\"\r\n                            ></button>\r\n                            <div class=\"tw-flex tw-flex-col tw-grow tw-shrink tw-overflow-hidden\">\r\n                                <span class=\"tw-font-bold\">{{ replyingMessage().owner.name }}</span>\r\n                                <span class=\"tw-truncate\">{{\r\n                                    replyingMessage().text ??\r\n                                        replyingMessage().file?.name ??\r\n                                        replyingMessage().image?.name\r\n                                }}</span>\r\n                            </div>\r\n                            <div class=\"tw-w-8 tw-shrink-0 tw-grow-0\"></div>\r\n                        </div>\r\n                        }\r\n                        <div\r\n                            class=\"tw-w-full tw-flex tw-gap-2 tw-border-t tw-border-t-gray-300 dark:tw-border-t-gray-600 tw-bg-default tw-items-end tw-z-10\"\r\n                        >\r\n                            @if(radifGoftego) {\r\n                            <bsu-layout-control [config]=\"radifGoftego\"></bsu-layout-control>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div\r\n                    class=\"tw-absolute tw-top-1/2 -tw-translate-y-1/2 tw-left-1/2 -tw-translate-x-1/2 tw-flex tw-flex-col tw-gap-8 tw-items-center\"\r\n                >\r\n                    <!-- <img src=\"assets/not-selected-chat.png\" class=\"tw-w-64 tw-opacity-25\" /> -->\r\n                    <!--            <span class=\"tw-text-xl tw-font-bold tw-text-gray-400 dark:tw-text-gray-500\">-->\r\n                    <!--                \u0628\u0631\u0627\u06CC \u0634\u0631\u0648\u0639 \u06CC\u06A9 \u0686\u062A \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F-->\r\n                    <!--            </span>-->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (hasListKarbaran) {\r\n        <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["bsu-layout-control.maincontent ::ng-deep>bnrc-field-ui>bsu-ui-ulv-main-ui{min-height:100%!important}bsu-layout-control.maincontent ::ng-deep>bnrc-field-ui>bsu-ui-ulv-main-ui>bsu-barsa-ulv-main{display:flex;flex-grow:1}bsu-layout-control.maincontent ::ng-deep>bnrc-field-ui>bsu-ui-ulv-main-ui>bsu-barsa-ulv-main>div{min-height:100%!important;width:100%;flex-grow:1}\n"] }]
         }] });
 
 class BarsaChatContentToolbarComponent {
@@ -15371,7 +15382,7 @@ class BarsaChatMessageComponent extends BaseComponent {
         return { ...image, displayWidth, displayHeight };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatMessageComponent, isStandalone: false, selector: "bsu-barsa-chat-message", inputs: { message: "message", showSender: "showSender", nextIsSame: "nextIsSame", pervIsSame: "pervIsSame", badge: "badge", nextHasBadge: "nextHasBadge", badgeLabel: "badgeLabel" }, outputs: { reply: "reply" }, usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\r\n    [ngClass]=\"{\r\n'tw-pt-1': pervIsSame,\r\n'tw-pt-3': !pervIsSame,\r\n}\"\r\n>\r\n    @if (badge) {\r\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\r\n        <div class=\"tw-w-fit tw-bg-zinc-500 tw-text-white tw-px-4 tw-mx-auto tw-rounded-full tw-text-md\">\r\n            {{ badgeLabel }}\r\n        </div>\r\n    </div>\r\n    }\r\n    <div\r\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\r\n        [ngClass]=\"{\r\n'tw-justify-start': message.owner.id === message.userId,\r\n'tw-flex-row-reverse': message.owner.id !== message.userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === message.userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== message.userId,\r\n    }\"\r\n    >\r\n        @if (!nextIsSame || nextHasBadge) {\r\n        <fd-avatar\r\n            size=\"s\"\r\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\r\n            [circle]=\"true\"\r\n            [image]=\"message.owner?.avatar\"\r\n            [placeholder]=\"message.owner.avatar ? false : true\"\r\n        ></fd-avatar>\r\n        } @if (!nextIsSame || nextHasBadge) {\r\n        <div\r\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\r\n            [ngClass]=\"{\r\n                'tw-right-11 tw-border-b-green-100 tw-border-l-green-100 tw-border-r-transparent':\r\n                    message.owner.id === message.userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== message.userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            [@inPaneAnimation]=\"animationState\"\r\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\r\n            [ngClass]=\"{\r\n                '!tw-rounded-br-none':\r\n                    message.owner.id === message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === message.userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== message.userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId && !message.image,\r\n'tw-bg-default': message.owner.id !== message.userId && !message.image,\r\n'tw-absolute tw-top-0 tw-right-0 tw-pb-8 tw-w-full tw-rounded-tr-2xl tw-bg-gradient-to-b tw-to-transparent': message.image,\r\n'tw-from-green-100': message.owner.id === message.userId && message.image,\r\n'tw-from-default': message.owner.id !== message.userId && message.image,\r\n                    }\"\r\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\r\n            >\r\n                {{ message.owner.name }}\r\n            </div>\r\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100/[.3]': message.owner.id === message.userId,\r\n'tw-bg-default/[.3]': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\r\n            >\r\n                <a\r\n                    [download]=\"message.image.name\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\r\n                    class=\"tw-absolute tw-w-full tw-h-full tw-bg-black/[.4] dark:tw-bg-white/[.4] tw-opacity-0 hover:tw-opacity-100 tw-transition-all tw-cursor-pointer tw-flex tw-justify-center tw-items-center\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\r\n                </a>\r\n                <img\r\n                    [ngStyle]=\"{\r\n                        width: image.displayWidth + 'px',\r\n                        height: image.displayHeight + 'px'\r\n                    }\"\r\n                    [src]=\"image.url\"\r\n                />\r\n            </div>\r\n            } } @for(file of message.files;track file.Id) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\r\n            >\r\n                <a\r\n                    downloadFiles\r\n                    [files]=\"[file]\"\r\n                    class=\"tw-shrink-0 tw-row-0 tw-size-12 tw-rounded-lg tw-bg-orange-400 tw-flex tw-justify-center tw-items-center tw-cursor-pointer tw-transition-all hover:tw-bg-orange-600\"\r\n                >\r\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\r\n                        {{ file.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span\r\n                        class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\"\r\n                        [attr.title]=\"file.FileName\"\r\n                    >\r\n                        {{ file.FileName }}</span\r\n                    >\r\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\r\n                        {{ file.Size }}KB</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\r\n                [innerHTML]=\"message.text\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-flex tw-w-full tw-px-2 tw-pt-1 tw-pb-2 tw-items-center tw-gap-2 tw-justify-end\"\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== message.userId,\r\n}\"\r\n            >\r\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">\r\n                    {{ message.createdAt | utilDateToHhMm }}\r\n                    @if(message.owner.id === message.userId){\r\n                    <bsu-barsa-chat-message-status\r\n                        [messageSent]=\"true\"\r\n                        [messageRead]=\"!!message.readAt\"\r\n                    ></bsu-barsa-chat-message-status>\r\n                    }\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #moreActions>\r\n    <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\r\n        <fd-popover-control>\r\n            <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n        </fd-popover-control>\r\n        <fd-popover-body minWidth=\"10rem\">\r\n            <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                    (click)=\"reply.emit(message)\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\r\n                </label>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$6.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { 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: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: BarsaChatMessageStatusComponent, selector: "bsu-barsa-chat-message-status", inputs: ["messageRead", "messageSent"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: UtilDateToHhMmPipe, name: "utilDateToHhMm" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatMessageComponent, isStandalone: false, selector: "bsu-barsa-chat-message", inputs: { message: "message", showSender: "showSender", nextIsSame: "nextIsSame", pervIsSame: "pervIsSame", badge: "badge", nextHasBadge: "nextHasBadge", badgeLabel: "badgeLabel" }, outputs: { reply: "reply" }, usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\r\n    [ngClass]=\"{\r\n'tw-pt-1': pervIsSame,\r\n'tw-pt-3': !pervIsSame,\r\n}\"\r\n>\r\n    @if (badge) {\r\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\r\n        <div class=\"tw-w-fit tw-bg-zinc-500 tw-text-white tw-px-4 tw-mx-auto tw-rounded-full tw-text-md\">\r\n            {{ badgeLabel }}\r\n        </div>\r\n    </div>\r\n    }\r\n    <div\r\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\r\n        [ngClass]=\"{\r\n'tw-justify-start': message.owner.id === message.userId,\r\n'tw-flex-row-reverse': message.owner.id !== message.userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === message.userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== message.userId,\r\n    }\"\r\n    >\r\n        @if (!nextIsSame || nextHasBadge) {\r\n        <fd-avatar\r\n            size=\"s\"\r\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\r\n            [circle]=\"true\"\r\n            [image]=\"message.owner?.avatar\"\r\n            [placeholder]=\"message.owner.avatar ? false : true\"\r\n        ></fd-avatar>\r\n        } @if (!nextIsSame || nextHasBadge) {\r\n        <div\r\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\r\n            [ngClass]=\"{\r\n                'tw-right-11 tw-border-b-green-100 tw-border-l-green-100 tw-border-r-transparent':\r\n                    message.owner.id === message.userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== message.userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            [@inPaneAnimation]=\"animationState\"\r\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\r\n            [ngClass]=\"{\r\n                '!tw-rounded-br-none':\r\n                    message.owner.id === message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === message.userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== message.userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId && !message.image,\r\n'tw-bg-default': message.owner.id !== message.userId && !message.image,\r\n'tw-absolute tw-top-0 tw-right-0 tw-pb-8 tw-w-full tw-rounded-tr-2xl tw-bg-gradient-to-b tw-to-transparent': message.image,\r\n'tw-from-green-100': message.owner.id === message.userId && message.image,\r\n'tw-from-default': message.owner.id !== message.userId && message.image,\r\n                    }\"\r\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\r\n            >\r\n                {{ message.owner.name }}\r\n            </div>\r\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100/[.3]': message.owner.id === message.userId,\r\n'tw-bg-default/[.3]': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\r\n            >\r\n                <a\r\n                    [download]=\"message.image.name\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\r\n                    class=\"tw-absolute tw-w-full tw-h-full tw-bg-black/[.4] dark:tw-bg-white/[.4] tw-opacity-0 hover:tw-opacity-100 tw-transition-all tw-cursor-pointer tw-flex tw-justify-center tw-items-center\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\r\n                </a>\r\n                <img\r\n                    [ngStyle]=\"{\r\n                        width: image.displayWidth + 'px',\r\n                        height: image.displayHeight + 'px'\r\n                    }\"\r\n                    [src]=\"image.url\"\r\n                />\r\n            </div>\r\n            } } @for(file of message.files;track file.Id) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\r\n            >\r\n                <a\r\n                    downloadFiles\r\n                    [files]=\"[file]\"\r\n                    class=\"tw-shrink-0 tw-row-0 tw-size-12 tw-rounded-lg tw-bg-orange-400 tw-flex tw-justify-center tw-items-center tw-cursor-pointer tw-transition-all hover:tw-bg-orange-600\"\r\n                >\r\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\r\n                        {{ file.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span\r\n                        class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\"\r\n                        [attr.title]=\"file.FileName\"\r\n                    >\r\n                        {{ file.FileName }}</span\r\n                    >\r\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\r\n                        {{ file.Size }}KB</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\r\n                [innerHTML]=\"message.text\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-flex tw-w-full tw-px-2 tw-pt-1 tw-pb-2 tw-items-center tw-gap-2 tw-justify-end\"\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== message.userId,\r\n}\"\r\n            >\r\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">\r\n                    {{ message.createdAt | utilDateToHhMm }}\r\n                    @if(message.owner.id === message.userId){\r\n                    <bsu-barsa-chat-message-status\r\n                        [messageSent]=\"true\"\r\n                        [messageRead]=\"!!message.readAt\"\r\n                    ></bsu-barsa-chat-message-status>\r\n                    }\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #moreActions>\r\n    <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\r\n        <fd-popover-control>\r\n            <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n        </fd-popover-control>\r\n        <fd-popover-body minWidth=\"10rem\">\r\n            <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                    (click)=\"reply.emit(message)\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\r\n                </label>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$6.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { 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: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: BarsaChatMessageStatusComponent, selector: "bsu-barsa-chat-message-status", inputs: ["messageRead", "messageSent"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: UtilDateToHhMmPipe, name: "utilDateToHhMm" }], animations: [
             trigger('inPaneAnimation', [
                 state('hidden', style({ opacity: 0, transform: 'scale(0, 0)' })),
                 state('visible', style({ opacity: 1, transform: 'scale(1, 1)' })),
@@ -15389,7 +15400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             transition('hidden => visible', animate('300ms ease-in-out')),
                             transition('visible => hidden', animate('300ms ease-in-out'))
                         ])
-                    ], standalone: false, template: "<div\r\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\r\n    [ngClass]=\"{\r\n'tw-pt-1': pervIsSame,\r\n'tw-pt-3': !pervIsSame,\r\n}\"\r\n>\r\n    @if (badge) {\r\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\r\n        <div class=\"tw-w-fit tw-bg-zinc-500 tw-text-white tw-px-4 tw-mx-auto tw-rounded-full tw-text-md\">\r\n            {{ badgeLabel }}\r\n        </div>\r\n    </div>\r\n    }\r\n    <div\r\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\r\n        [ngClass]=\"{\r\n'tw-justify-start': message.owner.id === message.userId,\r\n'tw-flex-row-reverse': message.owner.id !== message.userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === message.userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== message.userId,\r\n    }\"\r\n    >\r\n        @if (!nextIsSame || nextHasBadge) {\r\n        <fd-avatar\r\n            size=\"s\"\r\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\r\n            [circle]=\"true\"\r\n            [image]=\"message.owner?.avatar\"\r\n            [placeholder]=\"message.owner.avatar ? false : true\"\r\n        ></fd-avatar>\r\n        } @if (!nextIsSame || nextHasBadge) {\r\n        <div\r\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\r\n            [ngClass]=\"{\r\n                'tw-right-11 tw-border-b-green-100 tw-border-l-green-100 tw-border-r-transparent':\r\n                    message.owner.id === message.userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== message.userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            [@inPaneAnimation]=\"animationState\"\r\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\r\n            [ngClass]=\"{\r\n                '!tw-rounded-br-none':\r\n                    message.owner.id === message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === message.userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== message.userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId && !message.image,\r\n'tw-bg-default': message.owner.id !== message.userId && !message.image,\r\n'tw-absolute tw-top-0 tw-right-0 tw-pb-8 tw-w-full tw-rounded-tr-2xl tw-bg-gradient-to-b tw-to-transparent': message.image,\r\n'tw-from-green-100': message.owner.id === message.userId && message.image,\r\n'tw-from-default': message.owner.id !== message.userId && message.image,\r\n                    }\"\r\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\r\n            >\r\n                {{ message.owner.name }}\r\n            </div>\r\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100/[.3]': message.owner.id === message.userId,\r\n'tw-bg-default/[.3]': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\r\n            >\r\n                <a\r\n                    [download]=\"message.image.name\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\r\n                    class=\"tw-absolute tw-w-full tw-h-full tw-bg-black/[.4] dark:tw-bg-white/[.4] tw-opacity-0 hover:tw-opacity-100 tw-transition-all tw-cursor-pointer tw-flex tw-justify-center tw-items-center\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\r\n                </a>\r\n                <img\r\n                    [ngStyle]=\"{\r\n                        width: image.displayWidth + 'px',\r\n                        height: image.displayHeight + 'px'\r\n                    }\"\r\n                    [src]=\"image.url\"\r\n                />\r\n            </div>\r\n            } } @for(file of message.files;track file.Id) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\r\n            >\r\n                <a\r\n                    downloadFiles\r\n                    [files]=\"[file]\"\r\n                    class=\"tw-shrink-0 tw-row-0 tw-size-12 tw-rounded-lg tw-bg-orange-400 tw-flex tw-justify-center tw-items-center tw-cursor-pointer tw-transition-all hover:tw-bg-orange-600\"\r\n                >\r\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\r\n                        {{ file.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span\r\n                        class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\"\r\n                        [attr.title]=\"file.FileName\"\r\n                    >\r\n                        {{ file.FileName }}</span\r\n                    >\r\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\r\n                        {{ file.Size }}KB</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\r\n                [innerHTML]=\"message.text\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-flex tw-w-full tw-px-2 tw-pt-1 tw-pb-2 tw-items-center tw-gap-2 tw-justify-end\"\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== message.userId,\r\n}\"\r\n            >\r\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">\r\n                    {{ message.createdAt | utilDateToHhMm }}\r\n                    @if(message.owner.id === message.userId){\r\n                    <bsu-barsa-chat-message-status\r\n                        [messageSent]=\"true\"\r\n                        [messageRead]=\"!!message.readAt\"\r\n                    ></bsu-barsa-chat-message-status>\r\n                    }\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #moreActions>\r\n    <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\r\n        <fd-popover-control>\r\n            <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n        </fd-popover-control>\r\n        <fd-popover-body minWidth=\"10rem\">\r\n            <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                    (click)=\"reply.emit(message)\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\r\n                </label>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n" }]
+                    ], standalone: false, template: "<div\r\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\r\n    [ngClass]=\"{\r\n'tw-pt-1': pervIsSame,\r\n'tw-pt-3': !pervIsSame,\r\n}\"\r\n>\r\n    @if (badge) {\r\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\r\n        <div class=\"tw-w-fit tw-bg-zinc-500 tw-text-white tw-px-4 tw-mx-auto tw-rounded-full tw-text-md\">\r\n            {{ badgeLabel }}\r\n        </div>\r\n    </div>\r\n    }\r\n    <div\r\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\r\n        [ngClass]=\"{\r\n'tw-justify-start': message.owner.id === message.userId,\r\n'tw-flex-row-reverse': message.owner.id !== message.userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === message.userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== message.userId,\r\n    }\"\r\n    >\r\n        @if (!nextIsSame || nextHasBadge) {\r\n        <fd-avatar\r\n            size=\"s\"\r\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\r\n            [circle]=\"true\"\r\n            [image]=\"message.owner?.avatar\"\r\n            [placeholder]=\"message.owner.avatar ? false : true\"\r\n        ></fd-avatar>\r\n        } @if (!nextIsSame || nextHasBadge) {\r\n        <div\r\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\r\n            [ngClass]=\"{\r\n                'tw-right-11 tw-border-b-green-100 tw-border-l-green-100 tw-border-r-transparent':\r\n                    message.owner.id === message.userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== message.userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            [@inPaneAnimation]=\"animationState\"\r\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\r\n            [ngClass]=\"{\r\n                '!tw-rounded-br-none':\r\n                    message.owner.id === message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === message.userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== message.userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId && !message.image,\r\n'tw-bg-default': message.owner.id !== message.userId && !message.image,\r\n'tw-absolute tw-top-0 tw-right-0 tw-pb-8 tw-w-full tw-rounded-tr-2xl tw-bg-gradient-to-b tw-to-transparent': message.image,\r\n'tw-from-green-100': message.owner.id === message.userId && message.image,\r\n'tw-from-default': message.owner.id !== message.userId && message.image,\r\n                    }\"\r\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\r\n            >\r\n                {{ message.owner.name }}\r\n            </div>\r\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100/[.3]': message.owner.id === message.userId,\r\n'tw-bg-default/[.3]': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\r\n            >\r\n                <a\r\n                    [download]=\"message.image.name\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\r\n                    class=\"tw-absolute tw-w-full tw-h-full tw-bg-black/[.4] dark:tw-bg-white/[.4] tw-opacity-0 hover:tw-opacity-100 tw-transition-all tw-cursor-pointer tw-flex tw-justify-center tw-items-center\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\r\n                </a>\r\n                <img\r\n                    [ngStyle]=\"{\r\n                        width: image.displayWidth + 'px',\r\n                        height: image.displayHeight + 'px'\r\n                    }\"\r\n                    [src]=\"image.url\"\r\n                />\r\n            </div>\r\n            } } @for(file of message.files;track file.Id) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\r\n            >\r\n                <a\r\n                    downloadFiles\r\n                    [files]=\"[file]\"\r\n                    class=\"tw-shrink-0 tw-row-0 tw-size-12 tw-rounded-lg tw-bg-orange-400 tw-flex tw-justify-center tw-items-center tw-cursor-pointer tw-transition-all hover:tw-bg-orange-600\"\r\n                >\r\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\r\n                        {{ file.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span\r\n                        class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\"\r\n                        [attr.title]=\"file.FileName\"\r\n                    >\r\n                        {{ file.FileName }}</span\r\n                    >\r\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\r\n                        {{ file.Size }}KB</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\r\n                [innerHTML]=\"message.text\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-flex tw-w-full tw-px-2 tw-pt-1 tw-pb-2 tw-items-center tw-gap-2 tw-justify-end\"\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== message.userId,\r\n}\"\r\n            >\r\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">\r\n                    {{ message.createdAt | utilDateToHhMm }}\r\n                    @if(message.owner.id === message.userId){\r\n                    <bsu-barsa-chat-message-status\r\n                        [messageSent]=\"true\"\r\n                        [messageRead]=\"!!message.readAt\"\r\n                    ></bsu-barsa-chat-message-status>\r\n                    }\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #moreActions>\r\n    <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\r\n        <fd-popover-control>\r\n            <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n        </fd-popover-control>\r\n        <fd-popover-body minWidth=\"10rem\">\r\n            <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                    (click)=\"reply.emit(message)\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\r\n                </label>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], showSender: [{
@@ -15507,20 +15518,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         }] });
 
 class BarsaChatListComponent extends ReportViewBaseComponent {
+    /**
+     *
+     */
     constructor() {
-        super(...arguments);
+        super();
         this.simple = false;
         this.setReplyingMessage = new EventEmitter();
         this.messages = signal([]);
+        this.moment = jmoment;
+        this.currentUserId = '';
         this._rval = inject(MoReportValuePipe);
         this._picField = inject(PictureFieldSourcePipe);
-        this.moment = jmoment;
+        this._firstTime = true;
         this._paginVisibleStatus = signal(IntersectionStatus.Visible);
         this._pagingSetting = signal(null);
-        this._firstTime = true;
-        this.currentUserId = '';
         this._pageChanged = false;
         this._modatalistChanged = new Subject();
+        this._pendingScrollIndex = null;
+        this.injector = inject(EnvironmentInjector);
+        afterNextRender(() => {
+            if (this._pendingScrollIndex !== null) {
+                this.viewPort.scrollToIndex(this._pendingScrollIndex, 'auto');
+                this._pendingScrollIndex = null;
+            }
+        });
     }
     ngOnInit() {
         super.ngOnInit();
@@ -15546,7 +15568,7 @@ class BarsaChatListComponent extends ReportViewBaseComponent {
             const x = this._pagingSetting();
             if (x && x.Page < x.TotalPages) {
                 this._pageChanged = true;
-                this._ulvMainService.pageChanged(x.Page + 1);
+                this._ulvMainService.pageChanged(0);
             }
         }
         this._paginVisibleStatus.set(e);
@@ -15601,21 +15623,37 @@ class BarsaChatListComponent extends ReportViewBaseComponent {
             newList = [...mappedMoList];
         }
         const oldMessages = this.messages();
+        const firstVisibleIndex = this.viewPort.getRenderedRange().start;
+        const anchorMessageId = !oldMessages.length ? '' : oldMessages[firstVisibleIndex].id;
         this.messages.set(newList.sort((a, b) => +a.createdAt - +b.createdAt));
-        this._pageChanged = false;
         x.forEach((c) => (c.$State = 'Unchanged'));
         if (newMessages.length) {
             this.scrollToBottom();
         }
-        else if (this.pagingSetting?.Page === 0 || (oldMessages.length === 0 && this.messages().length)) {
-            this.scrollToBottom(true, true);
-        }
-        else {
-            // debugger;
+        else if (this.messages().length) {
+            if (!oldMessages.length) {
+                this.scrollToBottom(true, true);
+            }
+            else if (!this._pageChanged) {
+                this.scrollToBottom();
+            }
+            else {
+                this._pendingScrollIndex = this.messages().findIndex((m) => m.id === anchorMessageId);
+                // اسکرول دوباره به اون آیتم
+                runInInjectionContext(this.injector, () => {
+                    afterNextRender(() => {
+                        if (this._pendingScrollIndex !== null) {
+                            this.viewPort.scrollToIndex(this._pendingScrollIndex, 'auto');
+                            this._pendingScrollIndex = null;
+                        }
+                    });
+                });
+            }
         }
+        this._pageChanged = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatListComponent, isStandalone: false, selector: "bsu-barsa-chat-list", inputs: { replyingMessage: "replyingMessage", simple: "simple" }, outputs: { setReplyingMessage: "setReplyingMessage" }, host: { properties: { "class.tw-pt-24": "simple" }, classAttribute: "tw-block tw-h-full tw-w-full tw-from-[color-mix(in_srgb,var(--sapBackgroundColor)_95%,black_10%)] tw-to-[var(--sapBackgroundColor)]" }, viewQueries: [{ propertyName: "_chatContentElement", first: true, predicate: ["chatContentElement"], descendants: true, read: ElementRef }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('assets/chat-bg.png')] tw-bg-fixed tw-opacity-25\"\r\n></div>\r\n<ng-container *ngTemplateOutlet=\"simple ? simpleMode : viewPort; context: { $implicit: messages() }\"> </ng-container>\r\n<ng-template #viewPort let-messages>\r\n    <cdk-virtual-scroll-viewport [appendOnly]=\"true\" itemSize=\"20\" minBufferPx=\"200\" maxBufferPx=\"400\">\r\n        <div intersectionObserver [intersectionThreshold]=\"0.1\" (visibilityChange)=\"onVisibilityChange($event)\"></div>\r\n        <div *cdkVirtualFor=\"let message of messages; trackBy: _trackByMessage; let index = index\">\r\n            @if(message | mapToChatMessage:index:messages;as chatMessage){\r\n            <bsu-barsa-chat-message\r\n                [message]=\"chatMessage\"\r\n                [showSender]=\"true\"\r\n                [nextIsSame]=\"chatMessage.nextIsSame\"\r\n                [pervIsSame]=\"chatMessage.pervIsSame\"\r\n                [badge]=\"chatMessage.badge\"\r\n                [nextHasBadge]=\"chatMessage.nextHasBadge\"\r\n                [badgeLabel]=\"chatMessage.badgeLabel\"\r\n                (reply)=\"setReplyingMessage.emit($event)\"\r\n            ></bsu-barsa-chat-message>\r\n            }\r\n        </div>\r\n        @if (replyingMessage) {\r\n        <div class=\"tw-h-14\"></div>\r\n        }\r\n    </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n<ng-template #simpleMode let-messages>\r\n    <div #chatContentElement>\r\n        @for (message of messages; track message.id) {\r\n        <bsu-barsa-chat-message\r\n            [message]=\"message\"\r\n            [showSender]=\"true\"\r\n            [nextIsSame]=\"messages?.[$index + 1]?.owner?.id === message.owner.id\"\r\n            [pervIsSame]=\"messages?.[$index - 1]?.owner?.id === message.owner.id\"\r\n            [badge]=\"!this.messages?.[$index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index - 1]?.createdAt).jDayOfYear())\"\r\n            [nextHasBadge]=\"!!this.messages?.[$index + 1] && (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index + 1]?.createdAt).jDayOfYear()) && message.owner.id === this.messages?.[$index + 1]?.owner?.id\"\r\n            [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\r\n            (reply)=\"setReplyingMessage.emit($event)\"\r\n        ></bsu-barsa-chat-message>\r\n        }\r\n    </div>\r\n    <div class=\"tw-h-4\"></div>\r\n</ng-template>\r\n", styles: [":host{height:665px}:host cdk-virtual-scroll-viewport{height:100%}:host cdk-virtual-scroll-viewport{scrollbar-track-color:transparent;scrollbar-color:#969699 transparent;overflow-y:scroll;scrollbar-width:thin}:host cdk-virtual-scroll-viewport::-webkit-scrollbar{height:10px;width:6px;border-radius:4px;background:transparent;transition:all .3s ease}:host cdk-virtual-scroll-viewport::-webkit-scrollbar:hover{background:#c6c7ca}:host cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:#969699;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2$7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BarsaChatMessageComponent, selector: "bsu-barsa-chat-message", inputs: ["message", "showSender", "nextIsSame", "pervIsSame", "badge", "nextHasBadge", "badgeLabel"], outputs: ["reply"] }, { kind: "pipe", type: i2.MapToChatMessagePipe, name: "mapToChatMessage" }, { kind: "pipe", type: UtilChatTimeBadgePipe, name: "utilChatTimeBadge" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatListComponent, isStandalone: false, selector: "bsu-barsa-chat-list", inputs: { replyingMessage: "replyingMessage", simple: "simple" }, outputs: { setReplyingMessage: "setReplyingMessage" }, host: { properties: { "class.tw-pt-24": "simple" }, classAttribute: "tw-block tw-h-full tw-w-full tw-from-[color-mix(in_srgb,var(--sapBackgroundColor)_95%,black_10%)] tw-to-[var(--sapBackgroundColor)]" }, viewQueries: [{ propertyName: "_chatContentElement", first: true, predicate: ["chatContentElement"], descendants: true, read: ElementRef }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('assets/chat-bg.png')] tw-bg-fixed tw-opacity-25\"\r\n></div>\r\n<ng-container *ngTemplateOutlet=\"simple ? simpleMode : viewPort; context: { $implicit: messages() }\"> </ng-container>\r\n<ng-template #viewPort let-messages>\r\n    <cdk-virtual-scroll-viewport [appendOnly]=\"true\" itemSize=\"20\" minBufferPx=\"200\" maxBufferPx=\"400\">\r\n        <div intersectionObserver [intersectionThreshold]=\"0.1\" (visibilityChange)=\"onVisibilityChange($event)\"></div>\r\n        <div *cdkVirtualFor=\"let message of messages; trackBy: _trackByMessage; let index = index;let last=last\">\r\n            @if(message | mapToChatMessage:index:messages;as chatMessage){\r\n            <bsu-barsa-chat-message\r\n                [message]=\"chatMessage\"\r\n                [showSender]=\"true\"\r\n                [nextIsSame]=\"chatMessage.nextIsSame\"\r\n                [pervIsSame]=\"chatMessage.pervIsSame\"\r\n                [badge]=\"chatMessage.badge\"\r\n                [nextHasBadge]=\"chatMessage.nextHasBadge\"\r\n                [class.tw-pb-2]=\"last\"\r\n                [badgeLabel]=\"chatMessage.badgeLabel\"\r\n                (reply)=\"setReplyingMessage.emit($event)\"\r\n            ></bsu-barsa-chat-message>\r\n            }\r\n        </div>\r\n        @if (replyingMessage) {\r\n        <div class=\"tw-h-14\"></div>\r\n        }\r\n    </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n<ng-template #simpleMode let-messages>\r\n    <div #chatContentElement>\r\n        @for (message of messages; track message.id) {\r\n        <bsu-barsa-chat-message\r\n            [message]=\"message\"\r\n            [showSender]=\"true\"\r\n            [nextIsSame]=\"messages?.[$index + 1]?.owner?.id === message.owner.id\"\r\n            [pervIsSame]=\"messages?.[$index - 1]?.owner?.id === message.owner.id\"\r\n            [badge]=\"!this.messages?.[$index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index - 1]?.createdAt).jDayOfYear())\"\r\n            [nextHasBadge]=\"!!this.messages?.[$index + 1] && (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index + 1]?.createdAt).jDayOfYear()) && message.owner.id === this.messages?.[$index + 1]?.owner?.id\"\r\n            [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\r\n            (reply)=\"setReplyingMessage.emit($event)\"\r\n        ></bsu-barsa-chat-message>\r\n        }\r\n    </div>\r\n    <div class=\"tw-h-4\"></div>\r\n</ng-template>\r\n", styles: [":host{height:100%;width:100%;flex:1;display:flex}:host cdk-virtual-scroll-viewport{height:100%;width:100%;flex:1}:host cdk-virtual-scroll-viewport{scrollbar-track-color:transparent;scrollbar-color:#969699 transparent;overflow-y:scroll;scrollbar-width:thin}:host cdk-virtual-scroll-viewport::-webkit-scrollbar{height:10px;width:6px;border-radius:4px;background:transparent;transition:all .3s ease}:host cdk-virtual-scroll-viewport::-webkit-scrollbar:hover{background:#c6c7ca}:host cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:#969699;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2$7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BarsaChatMessageComponent, selector: "bsu-barsa-chat-message", inputs: ["message", "showSender", "nextIsSame", "pervIsSame", "badge", "nextHasBadge", "badgeLabel"], outputs: ["reply"] }, { kind: "pipe", type: i2.MapToChatMessagePipe, name: "mapToChatMessage" }, { kind: "pipe", type: UtilChatTimeBadgePipe, name: "utilChatTimeBadge" }], animations: [
             trigger('inContentAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'scale(50%, 50%)' }),
@@ -15645,8 +15683,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                                 animate('300ms ease-in', style({ opacity: 0, transform: 'scale(50%, 50%)' }))
                             ])
                         ])
-                    ], template: "<div\r\n    class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('assets/chat-bg.png')] tw-bg-fixed tw-opacity-25\"\r\n></div>\r\n<ng-container *ngTemplateOutlet=\"simple ? simpleMode : viewPort; context: { $implicit: messages() }\"> </ng-container>\r\n<ng-template #viewPort let-messages>\r\n    <cdk-virtual-scroll-viewport [appendOnly]=\"true\" itemSize=\"20\" minBufferPx=\"200\" maxBufferPx=\"400\">\r\n        <div intersectionObserver [intersectionThreshold]=\"0.1\" (visibilityChange)=\"onVisibilityChange($event)\"></div>\r\n        <div *cdkVirtualFor=\"let message of messages; trackBy: _trackByMessage; let index = index\">\r\n            @if(message | mapToChatMessage:index:messages;as chatMessage){\r\n            <bsu-barsa-chat-message\r\n                [message]=\"chatMessage\"\r\n                [showSender]=\"true\"\r\n                [nextIsSame]=\"chatMessage.nextIsSame\"\r\n                [pervIsSame]=\"chatMessage.pervIsSame\"\r\n                [badge]=\"chatMessage.badge\"\r\n                [nextHasBadge]=\"chatMessage.nextHasBadge\"\r\n                [badgeLabel]=\"chatMessage.badgeLabel\"\r\n                (reply)=\"setReplyingMessage.emit($event)\"\r\n            ></bsu-barsa-chat-message>\r\n            }\r\n        </div>\r\n        @if (replyingMessage) {\r\n        <div class=\"tw-h-14\"></div>\r\n        }\r\n    </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n<ng-template #simpleMode let-messages>\r\n    <div #chatContentElement>\r\n        @for (message of messages; track message.id) {\r\n        <bsu-barsa-chat-message\r\n            [message]=\"message\"\r\n            [showSender]=\"true\"\r\n            [nextIsSame]=\"messages?.[$index + 1]?.owner?.id === message.owner.id\"\r\n            [pervIsSame]=\"messages?.[$index - 1]?.owner?.id === message.owner.id\"\r\n            [badge]=\"!this.messages?.[$index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index - 1]?.createdAt).jDayOfYear())\"\r\n            [nextHasBadge]=\"!!this.messages?.[$index + 1] && (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index + 1]?.createdAt).jDayOfYear()) && message.owner.id === this.messages?.[$index + 1]?.owner?.id\"\r\n            [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\r\n            (reply)=\"setReplyingMessage.emit($event)\"\r\n        ></bsu-barsa-chat-message>\r\n        }\r\n    </div>\r\n    <div class=\"tw-h-4\"></div>\r\n</ng-template>\r\n", styles: [":host{height:665px}:host cdk-virtual-scroll-viewport{height:100%}:host cdk-virtual-scroll-viewport{scrollbar-track-color:transparent;scrollbar-color:#969699 transparent;overflow-y:scroll;scrollbar-width:thin}:host cdk-virtual-scroll-viewport::-webkit-scrollbar{height:10px;width:6px;border-radius:4px;background:transparent;transition:all .3s ease}:host cdk-virtual-scroll-viewport::-webkit-scrollbar:hover{background:#c6c7ca}:host cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:#969699;border-radius:4px}\n"] }]
-        }], propDecorators: { _chatContentElement: [{
+                    ], template: "<div\r\n    class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('assets/chat-bg.png')] tw-bg-fixed tw-opacity-25\"\r\n></div>\r\n<ng-container *ngTemplateOutlet=\"simple ? simpleMode : viewPort; context: { $implicit: messages() }\"> </ng-container>\r\n<ng-template #viewPort let-messages>\r\n    <cdk-virtual-scroll-viewport [appendOnly]=\"true\" itemSize=\"20\" minBufferPx=\"200\" maxBufferPx=\"400\">\r\n        <div intersectionObserver [intersectionThreshold]=\"0.1\" (visibilityChange)=\"onVisibilityChange($event)\"></div>\r\n        <div *cdkVirtualFor=\"let message of messages; trackBy: _trackByMessage; let index = index;let last=last\">\r\n            @if(message | mapToChatMessage:index:messages;as chatMessage){\r\n            <bsu-barsa-chat-message\r\n                [message]=\"chatMessage\"\r\n                [showSender]=\"true\"\r\n                [nextIsSame]=\"chatMessage.nextIsSame\"\r\n                [pervIsSame]=\"chatMessage.pervIsSame\"\r\n                [badge]=\"chatMessage.badge\"\r\n                [nextHasBadge]=\"chatMessage.nextHasBadge\"\r\n                [class.tw-pb-2]=\"last\"\r\n                [badgeLabel]=\"chatMessage.badgeLabel\"\r\n                (reply)=\"setReplyingMessage.emit($event)\"\r\n            ></bsu-barsa-chat-message>\r\n            }\r\n        </div>\r\n        @if (replyingMessage) {\r\n        <div class=\"tw-h-14\"></div>\r\n        }\r\n    </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n<ng-template #simpleMode let-messages>\r\n    <div #chatContentElement>\r\n        @for (message of messages; track message.id) {\r\n        <bsu-barsa-chat-message\r\n            [message]=\"message\"\r\n            [showSender]=\"true\"\r\n            [nextIsSame]=\"messages?.[$index + 1]?.owner?.id === message.owner.id\"\r\n            [pervIsSame]=\"messages?.[$index - 1]?.owner?.id === message.owner.id\"\r\n            [badge]=\"!this.messages?.[$index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index - 1]?.createdAt).jDayOfYear())\"\r\n            [nextHasBadge]=\"!!this.messages?.[$index + 1] && (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index + 1]?.createdAt).jDayOfYear()) && message.owner.id === this.messages?.[$index + 1]?.owner?.id\"\r\n            [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\r\n            (reply)=\"setReplyingMessage.emit($event)\"\r\n        ></bsu-barsa-chat-message>\r\n        }\r\n    </div>\r\n    <div class=\"tw-h-4\"></div>\r\n</ng-template>\r\n", styles: [":host{height:100%;width:100%;flex:1;display:flex}:host cdk-virtual-scroll-viewport{height:100%;width:100%;flex:1}:host cdk-virtual-scroll-viewport{scrollbar-track-color:transparent;scrollbar-color:#969699 transparent;overflow-y:scroll;scrollbar-width:thin}:host cdk-virtual-scroll-viewport::-webkit-scrollbar{height:10px;width:6px;border-radius:4px;background:transparent;transition:all .3s ease}:host cdk-virtual-scroll-viewport::-webkit-scrollbar:hover{background:#c6c7ca}:host cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:#969699;border-radius:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _chatContentElement: [{
                 type: ViewChild,
                 args: ['chatContentElement', { read: ElementRef }]
             }], viewPort: [{