barsa-sap-ui 2.2.56 → 2.2.57

package/fesm2022/barsa-sap-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input, Pipe, EventEmitter, ElementRef, SkipSelf, ViewChild, HostBinding, Output, ViewEncapsulation, ViewChildren, Inject, Optional, Self, inject, Renderer2, Directive, TemplateRef, HostListener, signal, ViewContainerRef, NgZone, NgModule, ChangeDetectorRef, Injectable, APP_INITIALIZER, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from 'barsa-novin-ray-core';
-import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, measureText, getLabelWidth, LayoutService, SortDirection, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, BaseDirective, PortalService, FieldBaseComponent, DateService, getDateService as getDateService$1, DateMiladiService, DateHijriService, DateShamsiService, EllipsifyDirective, createGridEditorFormPanel, FormPanelService, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, isImage, getIcon, UploadService, LayoutPanelBaseComponent, BaseColumnPropsComponent, ColumnService, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, setTableThWidth, TableHeaderWidthMode, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, calculateColumnWidth, calculateColumnContent, calculateColumnWidthFitToContainer, calculateFreeColumnSize, DateRanges, LogService, UlvMainService, isFunction, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, getFieldValue, ContainerComponent, DIALOG_SERVICE, FORM_DIALOG_COMPONENT, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, FormPropsBaseComponent, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, isInLocalMode, executeUlvCommandHandler, FillAllLayoutControls, PictureFieldSourcePipe, BreadcrumbService, LayoutMainContentService, getDeviceIsPhone, LocalStorageService, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, BarsaNovinRayCoreModule, ResizableModule } from 'barsa-novin-ray-core';
+import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, measureText, getLabelWidth, LayoutService, SortDirection, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, BaseDirective, PortalService, FieldBaseComponent, DateService, getDateService as getDateService$1, DateMiladiService, DateHijriService, DateShamsiService, EllipsifyDirective, createGridEditorFormPanel, FormPanelService, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, isImage, getIcon, UploadService, LayoutPanelBaseComponent, BaseColumnPropsComponent, ColumnService, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, setTableThWidth, TableHeaderWidthMode, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, calculateColumnWidth, calculateColumnContent, calculateColumnWidthFitToContainer, calculateFreeColumnSize, DateRanges, LogService, UlvMainService, isFunction, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, getFieldValue, ContainerComponent, DIALOG_SERVICE, FORM_DIALOG_COMPONENT, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, FormPropsBaseComponent, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, isInLocalMode, executeUlvCommandHandler, FillAllLayoutControls, PictureFieldSourcePipe, IntersectionStatus, BreadcrumbService, LayoutMainContentService, getDeviceIsPhone, LocalStorageService, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, BarsaNovinRayCoreModule, ResizableModule } from 'barsa-novin-ray-core';
 import moment from 'moment';
 import jmoment from 'moment-jalaali';
 import { combineLatest, of, BehaviorSubject, Subject, takeUntil as takeUntil$1, throwError, concatMap, tap as tap$1, Observable, fromEvent, first as first$1, filter as filter$1, map as map$1 } from 'rxjs';
@@ -73,24 +73,24 @@ import * as i11 from '@fundamental-ngx/core/object-identifier';
 import * as i5$8 from '@fundamental-ngx/core/object-number';
 import * as i11$1 from '@fundamental-ngx/core/slider';
 import * as i12$1 from '@fundamental-ngx/core/progress-indicator';
-import * as i1$7 from '@angular/cdk/scrolling';
-import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as i3$7 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i8$1 from '@fundamental-ngx/core/facets';
 import * as i14 from '@fundamental-ngx/core/rating-indicator';
 import * as i18 from '@fundamental-ngx/platform';
 import { PlatformIconTabBarModule } from '@fundamental-ngx/platform';
 import * as i8$2 from '@fundamental-ngx/core/multi-input';
 import * as i4$6 from '@fundamental-ngx/core/combobox';
-import * as i3$7 from '@fundamental-ngx/core/wizard';
+import * as i3$8 from '@fundamental-ngx/core/wizard';
 import * as i6$4 from '@fundamental-ngx/core/segmented-button';
 import * as i2$8 from '@fundamental-ngx/core/pagination';
-import * as i3$8 from '@fundamental-ngx/core/panel';
-import * as i1$8 from '@fundamental-ngx/core/switch';
+import * as i3$9 from '@fundamental-ngx/core/panel';
+import * as i1$7 from '@fundamental-ngx/core/switch';
 import * as i6$5 from '@fundamental-ngx/core/info-label';
 import * as i6$6 from '@fundamental-ngx/core/shellbar';
 import * as i8$3 from '@fundamental-ngx/core/object-attribute';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i1$9 from '@fundamental-ngx/core/tabs';
+import * as i1$8 from '@fundamental-ngx/core/tabs';
 import * as i2$9 from '@fundamental-ngx/core/message-page';
 import Splide from '@splidejs/splide';
 import { CdkTableModule } from '@angular/cdk/table';
@@ -4875,11 +4875,11 @@ class ColumnRendererComponent extends BaseComponent {
         this._renderer2.setStyle(this._filePopover.nativeElement, 'max-width', `${this.containerDom?.offsetWidth}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", allColumns: "allColumns", mo: "mo", index: "index", editMode: "editMode", attachmentViewType: "attachmentViewType", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", disableEllapsis: "disableEllapsis", rtl: "rtl", isMobile: "isMobile", fdTextMode: "fdTextMode", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, viewQueries: [{ propertyName: "_filePopover", first: true, predicate: ["fileviewerPopover"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (column) {\r\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\r\n}\r\n<ng-template #renderCellTemplate>\r\n    @switch (column.FieldTypeId) { @case (42) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\r\n    } @case (33) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\r\n    } @case (31) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\r\n    } @case (11) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\r\n    } @case (5) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\r\n    ></ng-container>\r\n    } @default {\r\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\r\n    } }\r\n</ng-template>\r\n<ng-template #renderGeneral>\r\n    <div class=\"renderGeneral\" [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\" [style.width]=\"\">\r\n        @if (icon) {\r\n        <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\r\n        }\r\n        <!-- <fd-text\r\n    #fdText\r\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n    [maxLines]=\"1\"\r\n    [text]=\"value\"\r\n    [fd-inline-help]=\"value\"\r\n    [disabled]=\"!fdText._hasMore\"\r\n  ></fd-text> -->\r\n\r\n        <!-- <bsu-barsa-text-ellipsis\r\n  [style.width]=\"column.$Width\"\r\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n  [text]=\"value\"\r\n></bsu-barsa-text-ellipsis> -->\r\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\r\n{{ value }}\r\n</div> -->\r\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\r\n        <div\r\n            [ellapsisText]=\"value\"\r\n            [disableEllapsis]=\"editMode\"\r\n            [class.ellapsis]=\"!disableEllapsis\"\r\n            [attr.title]=\"value\"\r\n            (ellapsised)=\"onElapsised($event)\"\r\n        >\r\n            {{ value }}\r\n        </div>\r\n        } @else{\r\n        <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\r\n        } }\r\n    </div>\r\n</ng-template>\r\n<ng-template #formControlTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\r\n                ? renderCellTemplate\r\n                : layoutControlTemplate\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #layoutControlTemplate>\r\n    @if (controlUi) {\r\n    <bsu-layout-control\r\n        [inlineEdit]=\"true\"\r\n        [caption]=\"column.Caption\"\r\n        [config]=\"controlUi\"\r\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\r\n        [showLabel]=\"formLayoutShowLabel\"\r\n    ></bsu-layout-control>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellListTasavir>\r\n    @if (mo[column.Name] && mo[column.Name].Images) {\r\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\r\n        @for (pic of mo[column.Name].Images; track pic) {\r\n        <img\r\n            fullscreen\r\n            fullscreenFiles\r\n            [files]=\"mo[column.Name].Images\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\r\n            style=\"width: 3rem; height: 3rem\"\r\n        />\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileListKhati>\r\n    @if (mo[column.Name]) {\r\n    <div class=\"file-viewer-attachments\">\r\n        @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\r\n        <bsu-file-viewer-popover\r\n            #fileviewerPopover\r\n            intersectionObserver\r\n            [intersectionThreshold]=\"0.1\"\r\n            (visibilityChange)=\"$event === 'Visible' && onSetMaxWidth()\"\r\n            [file]=\"file\"\r\n            [attachmentViewType]=\"+attachmentViewType\"\r\n            [files]=\"mo[column.Name].Files\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [canDownload]=\"true\"\r\n            [disableRemove]=\"true\"\r\n            [fdType]=\"'transparent'\"\r\n            preventDefault\r\n            stopPropagation\r\n        ></bsu-file-viewer-popover>\r\n        }\r\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileInfo>\r\n    @if (mo[column.Name]) {\r\n    <fd-avatar\r\n        [transparent]=\"true\"\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellChecbox>\r\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\r\n</ng-template>\r\n<ng-template #renderChecboxImage>\r\n    @if (column.Extra?.TrueImage === '') {\r\n    {{ value }}\r\n    } @if (column.Extra?.TrueImage !== '') {\r\n    <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellImage>\r\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\r\n    <fd-avatar\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [transparent]=\"true\"\r\n        [image]=\"mo[column.Name]['Url']\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}fd-avatar{min-width:100%;width:100%;max-width:64px}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.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.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize", "disableEllapsis"], outputs: ["ellapsised"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[stopPropagation]" }, { kind: "directive", type: i2.PreventDefaultDirective, selector: "[preventDefault]" }, { kind: "component", type: i3$5.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: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$5.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", allColumns: "allColumns", mo: "mo", index: "index", editMode: "editMode", attachmentViewType: "attachmentViewType", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", disableEllapsis: "disableEllapsis", rtl: "rtl", isMobile: "isMobile", fdTextMode: "fdTextMode", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, viewQueries: [{ propertyName: "_filePopover", first: true, predicate: ["fileviewerPopover"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (column) {\r\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\r\n}\r\n<ng-template #renderCellTemplate>\r\n    @switch (column.FieldTypeId) { @case (42) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\r\n    } @case (33) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\r\n    } @case (31) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\r\n    } @case (11) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\r\n    } @case (5) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\r\n    ></ng-container>\r\n    } @default {\r\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\r\n    } }\r\n</ng-template>\r\n<ng-template #renderGeneral>\r\n    <div class=\"renderGeneral\" [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\" [style.width]=\"\"     [attr.title]=\"value\">\r\n        @if (icon) {\r\n        <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\r\n        }\r\n        <!-- <fd-text\r\n    #fdText\r\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n    [maxLines]=\"1\"\r\n    [text]=\"value\"\r\n    [fd-inline-help]=\"value\"\r\n    [disabled]=\"!fdText._hasMore\"\r\n  ></fd-text> -->\r\n\r\n        <!-- <bsu-barsa-text-ellipsis\r\n  [style.width]=\"column.$Width\"\r\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n  [text]=\"value\"\r\n></bsu-barsa-text-ellipsis> -->\r\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\r\n{{ value }}\r\n</div> -->\r\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\r\n        <div\r\n            [ellapsisText]=\"value\"\r\n            [disableEllapsis]=\"editMode\"\r\n            [class.ellapsis]=\"!disableEllapsis\"        \r\n            (ellapsised)=\"onElapsised($event)\"\r\n        >\r\n            {{ value }}\r\n        </div>\r\n        } @else{\r\n        <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\r\n        } }\r\n    </div>\r\n</ng-template>\r\n<ng-template #formControlTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\r\n                ? renderCellTemplate\r\n                : layoutControlTemplate\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #layoutControlTemplate>\r\n    @if (controlUi) {\r\n    <bsu-layout-control\r\n        [inlineEdit]=\"true\"\r\n        [caption]=\"column.Caption\"\r\n        [config]=\"controlUi\"\r\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\r\n        [showLabel]=\"formLayoutShowLabel\"\r\n    ></bsu-layout-control>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellListTasavir>\r\n    @if (mo[column.Name] && mo[column.Name].Images) {\r\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\r\n        @for (pic of mo[column.Name].Images; track pic) {\r\n        <img\r\n            fullscreen\r\n            fullscreenFiles\r\n            [files]=\"mo[column.Name].Images\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\r\n            style=\"width: 3rem; height: 3rem\"\r\n        />\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileListKhati>\r\n    @if (mo[column.Name]) {\r\n    <div class=\"file-viewer-attachments\">\r\n        @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\r\n        <bsu-file-viewer-popover\r\n            #fileviewerPopover\r\n            intersectionObserver\r\n            [intersectionThreshold]=\"0.1\"\r\n            (visibilityChange)=\"$event === 'Visible' && onSetMaxWidth()\"\r\n            [file]=\"file\"\r\n            [attachmentViewType]=\"+attachmentViewType\"\r\n            [files]=\"mo[column.Name].Files\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [canDownload]=\"true\"\r\n            [disableRemove]=\"true\"\r\n            [fdType]=\"'transparent'\"\r\n            preventDefault\r\n            stopPropagation\r\n        ></bsu-file-viewer-popover>\r\n        }\r\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileInfo>\r\n    @if (mo[column.Name]) {\r\n    <fd-avatar\r\n        [transparent]=\"true\"\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellChecbox>\r\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\r\n</ng-template>\r\n<ng-template #renderChecboxImage>\r\n    @if (column.Extra?.TrueImage === '') {\r\n    {{ value }}\r\n    } @if (column.Extra?.TrueImage !== '') {\r\n    <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellImage>\r\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\r\n    <fd-avatar\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [transparent]=\"true\"\r\n        [image]=\"mo[column.Name]['Url']\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}fd-avatar{min-width:100%;width:100%;max-width:64px}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.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.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize", "disableEllapsis"], outputs: ["ellapsised"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[stopPropagation]" }, { kind: "directive", type: i2.PreventDefaultDirective, selector: "[preventDefault]" }, { kind: "component", type: i3$5.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: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$5.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (column) {\r\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\r\n}\r\n<ng-template #renderCellTemplate>\r\n    @switch (column.FieldTypeId) { @case (42) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\r\n    } @case (33) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\r\n    } @case (31) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\r\n    } @case (11) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\r\n    } @case (5) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\r\n    ></ng-container>\r\n    } @default {\r\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\r\n    } }\r\n</ng-template>\r\n<ng-template #renderGeneral>\r\n    <div class=\"renderGeneral\" [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\" [style.width]=\"\">\r\n        @if (icon) {\r\n        <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\r\n        }\r\n        <!-- <fd-text\r\n    #fdText\r\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n    [maxLines]=\"1\"\r\n    [text]=\"value\"\r\n    [fd-inline-help]=\"value\"\r\n    [disabled]=\"!fdText._hasMore\"\r\n  ></fd-text> -->\r\n\r\n        <!-- <bsu-barsa-text-ellipsis\r\n  [style.width]=\"column.$Width\"\r\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n  [text]=\"value\"\r\n></bsu-barsa-text-ellipsis> -->\r\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\r\n{{ value }}\r\n</div> -->\r\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\r\n        <div\r\n            [ellapsisText]=\"value\"\r\n            [disableEllapsis]=\"editMode\"\r\n            [class.ellapsis]=\"!disableEllapsis\"\r\n            [attr.title]=\"value\"\r\n            (ellapsised)=\"onElapsised($event)\"\r\n        >\r\n            {{ value }}\r\n        </div>\r\n        } @else{\r\n        <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\r\n        } }\r\n    </div>\r\n</ng-template>\r\n<ng-template #formControlTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\r\n                ? renderCellTemplate\r\n                : layoutControlTemplate\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #layoutControlTemplate>\r\n    @if (controlUi) {\r\n    <bsu-layout-control\r\n        [inlineEdit]=\"true\"\r\n        [caption]=\"column.Caption\"\r\n        [config]=\"controlUi\"\r\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\r\n        [showLabel]=\"formLayoutShowLabel\"\r\n    ></bsu-layout-control>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellListTasavir>\r\n    @if (mo[column.Name] && mo[column.Name].Images) {\r\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\r\n        @for (pic of mo[column.Name].Images; track pic) {\r\n        <img\r\n            fullscreen\r\n            fullscreenFiles\r\n            [files]=\"mo[column.Name].Images\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\r\n            style=\"width: 3rem; height: 3rem\"\r\n        />\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileListKhati>\r\n    @if (mo[column.Name]) {\r\n    <div class=\"file-viewer-attachments\">\r\n        @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\r\n        <bsu-file-viewer-popover\r\n            #fileviewerPopover\r\n            intersectionObserver\r\n            [intersectionThreshold]=\"0.1\"\r\n            (visibilityChange)=\"$event === 'Visible' && onSetMaxWidth()\"\r\n            [file]=\"file\"\r\n            [attachmentViewType]=\"+attachmentViewType\"\r\n            [files]=\"mo[column.Name].Files\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [canDownload]=\"true\"\r\n            [disableRemove]=\"true\"\r\n            [fdType]=\"'transparent'\"\r\n            preventDefault\r\n            stopPropagation\r\n        ></bsu-file-viewer-popover>\r\n        }\r\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileInfo>\r\n    @if (mo[column.Name]) {\r\n    <fd-avatar\r\n        [transparent]=\"true\"\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellChecbox>\r\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\r\n</ng-template>\r\n<ng-template #renderChecboxImage>\r\n    @if (column.Extra?.TrueImage === '') {\r\n    {{ value }}\r\n    } @if (column.Extra?.TrueImage !== '') {\r\n    <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellImage>\r\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\r\n    <fd-avatar\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [transparent]=\"true\"\r\n        [image]=\"mo[column.Name]['Url']\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}fd-avatar{min-width:100%;width:100%;max-width:64px}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit}\n"] }]
+            args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (column) {\r\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\r\n}\r\n<ng-template #renderCellTemplate>\r\n    @switch (column.FieldTypeId) { @case (42) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\r\n    } @case (33) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\r\n    } @case (31) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\r\n    } @case (11) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\r\n    } @case (5) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\r\n    ></ng-container>\r\n    } @default {\r\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\r\n    } }\r\n</ng-template>\r\n<ng-template #renderGeneral>\r\n    <div class=\"renderGeneral\" [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\" [style.width]=\"\"     [attr.title]=\"value\">\r\n        @if (icon) {\r\n        <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\r\n        }\r\n        <!-- <fd-text\r\n    #fdText\r\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n    [maxLines]=\"1\"\r\n    [text]=\"value\"\r\n    [fd-inline-help]=\"value\"\r\n    [disabled]=\"!fdText._hasMore\"\r\n  ></fd-text> -->\r\n\r\n        <!-- <bsu-barsa-text-ellipsis\r\n  [style.width]=\"column.$Width\"\r\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n  [text]=\"value\"\r\n></bsu-barsa-text-ellipsis> -->\r\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\r\n{{ value }}\r\n</div> -->\r\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\r\n        <div\r\n            [ellapsisText]=\"value\"\r\n            [disableEllapsis]=\"editMode\"\r\n            [class.ellapsis]=\"!disableEllapsis\"        \r\n            (ellapsised)=\"onElapsised($event)\"\r\n        >\r\n            {{ value }}\r\n        </div>\r\n        } @else{\r\n        <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\r\n        } }\r\n    </div>\r\n</ng-template>\r\n<ng-template #formControlTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\r\n                ? renderCellTemplate\r\n                : layoutControlTemplate\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #layoutControlTemplate>\r\n    @if (controlUi) {\r\n    <bsu-layout-control\r\n        [inlineEdit]=\"true\"\r\n        [caption]=\"column.Caption\"\r\n        [config]=\"controlUi\"\r\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\r\n        [showLabel]=\"formLayoutShowLabel\"\r\n    ></bsu-layout-control>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellListTasavir>\r\n    @if (mo[column.Name] && mo[column.Name].Images) {\r\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\r\n        @for (pic of mo[column.Name].Images; track pic) {\r\n        <img\r\n            fullscreen\r\n            fullscreenFiles\r\n            [files]=\"mo[column.Name].Images\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\r\n            style=\"width: 3rem; height: 3rem\"\r\n        />\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileListKhati>\r\n    @if (mo[column.Name]) {\r\n    <div class=\"file-viewer-attachments\">\r\n        @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\r\n        <bsu-file-viewer-popover\r\n            #fileviewerPopover\r\n            intersectionObserver\r\n            [intersectionThreshold]=\"0.1\"\r\n            (visibilityChange)=\"$event === 'Visible' && onSetMaxWidth()\"\r\n            [file]=\"file\"\r\n            [attachmentViewType]=\"+attachmentViewType\"\r\n            [files]=\"mo[column.Name].Files\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [canDownload]=\"true\"\r\n            [disableRemove]=\"true\"\r\n            [fdType]=\"'transparent'\"\r\n            preventDefault\r\n            stopPropagation\r\n        ></bsu-file-viewer-popover>\r\n        }\r\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileInfo>\r\n    @if (mo[column.Name]) {\r\n    <fd-avatar\r\n        [transparent]=\"true\"\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellChecbox>\r\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\r\n</ng-template>\r\n<ng-template #renderChecboxImage>\r\n    @if (column.Extra?.TrueImage === '') {\r\n    {{ value }}\r\n    } @if (column.Extra?.TrueImage !== '') {\r\n    <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellImage>\r\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\r\n    <fd-avatar\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [transparent]=\"true\"\r\n        [image]=\"mo[column.Name]['Url']\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}fd-avatar{min-width:100%;width:100%;max-width:64px}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _filePopover: [{
                 type: ViewChild,
                 args: ['fileviewerPopover', { static: false, read: ElementRef }]
@@ -5392,6 +5392,7 @@ class UiReportContainerComponent extends SapUiReportBaseComponent {
     ngOnInit() {
         super.ngOnInit();
         this._initView();
+        this.hidePaging();
     }
     onChangeView(viewSetting) {
         this._changeView(viewSetting);
@@ -5405,6 +5406,11 @@ class UiReportContainerComponent extends SapUiReportBaseComponent {
     _changeView(uiComponent) {
         this.selectedView = uiComponent;
     }
+    hidePaging() {
+        if (this.viewSetting?.HidePaging) {
+            this._ulvMainService.hidePaging(true);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiReportContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UiReportContainerComponent, selector: "bsu-ui-report-container", viewQueries: [{ propertyName: "tableView", first: true, predicate: ["renderTable"], descendants: true, static: true }, { propertyName: "cardListView", first: true, predicate: ["renderCardList"], descendants: true, static: true }, { propertyName: "listView", first: true, predicate: ["renderList"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--render container-->\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderContainer;\r\n        context: {\r\n            $implicit: gridDataSource.data$ | async,\r\n            allChecked: allChecked$ | async,\r\n            groupby: groupby$ | async,\r\n            isCheckList: context.Setting.View?.IsCheckList,\r\n            columns: columns$ | async,\r\n            columnsCount: columnsCount$ | async,\r\n            allowInlineEdit: allowInlineEdit$ | async,\r\n            inlineEditMode: inlineEditMode$ | async,\r\n            onlyInlineEdit: onlyInlineEdit$ | async,\r\n            secondaryColumns: secondaryColumns$ | async,\r\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\r\n            popin: (secondaryColumnsCount$ | async)!! > 0 ? true : false,\r\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\r\n            conditionalFormats: conditionalFormats$ | async,\r\n            deviceName: deviceName$ | async,\r\n            deviceSize: deviceSize$ | async,\r\n            mobileOrTablet: mobileOrTablet$ | async,\r\n            access: context.Setting.Extra?.DefaultCommandsAccess,\r\n            title: title$ | async,\r\n            icon: viewSetting?.Icon,\r\n            rtl: rtl$ | async,\r\n            hideToolbar: (hideToolbar$ | async) === true || viewSetting.HideToolbar,\r\n            selectedView: selectedView,\r\n            viewCollection: viewCollection,\r\n            allColumns: allColumns,\r\n            gridSetting: gridSetting$ | async,\r\n            hasSummary: context.Setting.View?.HasSummaryRow,\r\n            contentDensity: contentDensity$ | async,\r\n            formLayout: layout$ | async,\r\n            hasSelected: hasSelected$ | async,\r\n            disableOverflowContextMenu: viewSetting.DisableOverflowContextMenu,\r\n            inlineEditWithoutSelection: viewSetting.InlineEditWithoutSelection,\r\n            showCreateForm: viewSetting.ShowCreateForm,\r\n            hideOpenIcon: viewSetting.HideOpenIcon,\r\n            hideTitleMode: viewSetting.HideTitleMode,\r\n            openOnClick: viewSetting.OpenOnClick,\r\n            navigationArrow: navigationArrow$ | async,\r\n            containerWidth: containerWidth$ | async,\r\n            typeDefId: context.Setting.Extra.Report.TypeDefId,\r\n            reportId: context.Setting.Extra.Report.Id,\r\n            listEditViewId: context.Setting.Extra.Report.ListEditViewId,\r\n            typeViewId: context.Setting.Extra.Report.TypeViewId,\r\n            formSetting: context.Setting.FormTemplate,\r\n            extraRelation: context.Setting.Extra?.Relation,\r\n            contextView: context.Setting.View,\r\n            cartableTemplates: cartableTemplates$ | async,\r\n            cartableChildsMo: cartableChildsMo$ | async,\r\n            disableResponsive: viewSetting.DisableResponsive,\r\n            inDialog: inDialog$ | async,\r\n            isMultiSelect: isMultiSelect$ | async,\r\n            contextSetting: context.Setting,\r\n            customFieldInfo: context.Setting.CustomFieldInfo,\r\n            selectedMo: selectedMo$ | async,\r\n            hideSearchpanel: hideSearchpanel$ | async,\r\n            selectedCount: selectedCount$ | async,\r\n            gridFreeColumnSizing: gridFreeColumnSizing$ | async,\r\n            UlvMainCtrlr: context.Adapter?.UlvMainCtrlr,\r\n            allowGridColumnSort: context.ViewSetting?.AllowGridColumnSort,\r\n            hasInlineEditButton: viewSetting.HasInlineEditButton,\r\n            hasInlineDeleteButton: viewSetting.HasInlineDeleteButton,\r\n            pagingSetting: pagingSetting$ | async,\r\n            shortcutList: viewSetting.ShortcutList?.MoDataList,\r\n            simpleInlineEdit: simpleInlineEdit\r\n        }\r\n    \"\r\n></ng-container>\r\n<!--render container -->\r\n<ng-template\r\n    #renderContainer\r\n    let-moDataList\r\n    let-shortcutList=\"shortcutList\"\r\n    let-inlineEditWithoutSelection=\"inlineEditWithoutSelection\"\r\n    let-allChecked=\"allChecked\"\r\n    let-isCheckList=\"isCheckList\"\r\n    let-columns=\"columns\"\r\n    let-columnsCount=\"columnsCount\"\r\n    let-groupby=\"groupby\"\r\n    let-secondaryColumns=\"secondaryColumns\"\r\n    let-contextMenuItems=\"contextMenuItems\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-deviceName=\"deviceName\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-access=\"access\"\r\n    let-toolbarButtons=\"toolbarButtons\"\r\n    let-popin=\"popin\"\r\n    let-mobileOrTablet=\"mobileOrTablet\"\r\n    let-title=\"title\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-onlyInlineEdit=\"onlyInlineEdit\"\r\n    let-allowInlineEdit=\"allowInlineEdit\"\r\n    let-rtl=\"rtl\"\r\n    let-allColumns=\"allColumns\"\r\n    let-selectedView=\"selectedView\"\r\n    let-viewCollection=\"viewCollection\"\r\n    let-hideToolbar=\"hideToolbar\"\r\n    let-gridSetting=\"gridSetting\"\r\n    let-contentDensity=\"contentDensity\"\r\n    let-formLayout=\"formLayout\"\r\n    let-hasSelected=\"hasSelected\"\r\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\r\n    let-navigationArrow=\"navigationArrow\"\r\n    let-containerWidth=\"containerWidth\"\r\n    let-hasSummary=\"hasSummary\"\r\n    let-typeDefId=\"typeDefId\"\r\n    let-formSetting=\"formSetting\"\r\n    let-extraRelation=\"extraRelation\"\r\n    let-contextView=\"contextView\"\r\n    let-showCreateForm=\"showCreateForm\"\r\n    let-hideOpenIcon=\"hideOpenIcon\"\r\n    let-cartableTemplates=\"cartableTemplates\"\r\n    let-cartableChildsMo=\"cartableChildsMo\"\r\n    let-openOnClick=\"openOnClick\"\r\n    let-disableResponsive=\"disableResponsive\"\r\n    let-inDialog=\"inDialog\"\r\n    let-isMultiSelect=\"isMultiSelect\"\r\n    let-customFieldInfo=\"customFieldInfo\"\r\n    let-selectedMo=\"selectedMo\"\r\n    let-selectedCount=\"selectedCount\"\r\n    let-hideSearchpanel=\"hideSearchpanel\"\r\n    let-gridFreeColumnSizing=\"gridFreeColumnSizing\"\r\n    let-reportId=\"reportId\"\r\n    let-listEditViewId=\"listEditViewId\"\r\n    let-typeViewId=\"typeViewId\"\r\n    let-UlvMainCtrlr=\"UlvMainCtrlr\"\r\n    let-allowGridColumnSort=\"allowGridColumnSort\"\r\n    let-pagingSetting=\"pagingSetting\"\r\n    let-hasInlineDeleteButton=\"hasInlineDeleteButton\"\r\n    let-hasInlineEditButton=\"hasInlineEditButton\"\r\n    let-contextSetting=\"contextSetting\"\r\n    let-icon=\"icon\"\r\n    let-simpleInlineEdit=\"simpleInlineEdit\"\r\n    let-hideTitleMode=\"hideTitleMode\"\r\n>\r\n    @if (showCreateForm) {\r\n    <div>\r\n        <bsu-report-new-top-form\r\n            [extraRelation]=\"extraRelation\"\r\n            [moDataListCount]=\"moDataList.length\"\r\n            [selectedMo]=\"selectedMo\"\r\n            [formSetting]=\"formSetting\"\r\n            [typeDefId]=\"typeDefId\"\r\n            [inlineEditMode]=\"true\"\r\n            [isChecked]=\"true\"\r\n            (add)=\"onNewTopFormAdd($event)\"\r\n            (save)=\"onSaveTopForm($event)\"\r\n        ></bsu-report-new-top-form>\r\n    </div>\r\n    }\r\n    <bsu-ulv-toolbar\r\n        [allowGridColumnSort]=\"allowGridColumnSort\"\r\n        [hideToolbar]=\"hideToolbar\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [toolbarButtons]=\"toolbarButtons\"\r\n        [gridSetting]=\"gridSetting\"\r\n        [UlvMainCtrlr]=\"UlvMainCtrlr\"\r\n        [title]=\"title\"\r\n        [hideTitle]=\"hideTitleMode === '1' || hideTitleMode === '3'\"\r\n        [icon]=\"icon\"\r\n        [access]=\"access\"\r\n        [isMultiSelect]=\"isMultiSelect\"\r\n        [inDialog]=\"inDialog\"\r\n        [hasSelected]=\"hasSelected\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [viewCollection]=\"viewCollection\"\r\n        [reportView]=\"selectedView\"\r\n        [inlineEditMode]=\"allowInlineEdit && inlineEditMode && formSetting\"\r\n        [allowInlineEdit]=\"allowInlineEdit && formSetting\"\r\n        [moDataListCount]=\"moDataList.length\"\r\n        [gridFreeColumnSizing]=\"gridFreeColumnSizing\"\r\n        (sortClick)=\"onSortSettings($event)\"\r\n        (groupbyClick)=\"onGroupbySettings($event)\"\r\n        (columnClick)=\"onColumnSettings($event)\"\r\n        (editModeClick)=\"onEditMode()\"\r\n        (viewClick)=\"onChangeView($event)\"\r\n        (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\r\n    ></bsu-ulv-toolbar>\r\n\r\n    <div\r\n        reportViewRenderer\r\n        [simpleInlineEdit]=\"simpleInlineEdit\"\r\n        class=\"report-view\"\r\n        [attr.reportCaption]=\"context.Setting.Extra.Report.Caption\"\r\n        [toolbarButtons]=\"toolbarButtons\"\r\n        [hideToolbar]=\"hideToolbar\"\r\n        [hideTitle]=\"hideTitleMode === '2' || hideTitleMode === '3'\"\r\n        [groupSummary]=\"groupSummary\"\r\n        [hasInlineDeleteButton]=\"hasInlineDeleteButton\"\r\n        [hasInlineEditButton]=\"hasInlineEditButton\"\r\n        [contextSetting]=\"contextSetting\"\r\n        [listEditViewId]=\"listEditViewId\"\r\n        [inlineEditWithoutSelection]=\"inlineEditWithoutSelection\"\r\n        [typeViewId]=\"typeViewId\"\r\n        [toolbarButtons]=\"toolbarButtons\"\r\n        [pagingSetting]=\"pagingSetting\"\r\n        [UlvMainCtrlr]=\"UlvMainCtrlr\"\r\n        [reportId]=\"reportId\"\r\n        [gridFreeColumnSizing]=\"gridFreeColumnSizing\"\r\n        [hideSearchpanel]=\"hideSearchpanel\"\r\n        [selectedMo]=\"selectedMo\"\r\n        [selectedCount]=\"selectedCount\"\r\n        [hasSelected]=\"hasSelected\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [customFieldInfo]=\"customFieldInfo\"\r\n        [inDialog]=\"inDialog\"\r\n        [isMultiSelect]=\"isMultiSelect\"\r\n        [openOnClick]=\"openOnClick\"\r\n        [contextView]=\"contextView\"\r\n        [containerWidth]=\"containerWidth\"\r\n        [extraRelation]=\"extraRelation\"\r\n        [typeDefId]=\"typeDefId\"\r\n        [cartableTemplates]=\"cartableTemplates\"\r\n        [cartableChildsMo]=\"cartableChildsMo\"\r\n        [view]=\"selectedView\"\r\n        [isCheckList]=\"isCheckList\"\r\n        [allChecked]=\"allChecked\"\r\n        [moDataList]=\"moDataList\"\r\n        [access]=\"access\"\r\n        [groupby]=\"groupby\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [formSetting]=\"formSetting\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [title]=\"title\"\r\n        [mobileOrTablet]=\"mobileOrTablet\"\r\n        [popin]=\"popin\"\r\n        [secondaryColumns]=\"secondaryColumns\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\r\n        [allowInlineEdit]=\"allowInlineEdit\"\r\n        [columns]=\"columns\"\r\n        [rtl]=\"rtl\"\r\n        [allColumns]=\"allColumns\"\r\n        [hasSummary]=\"hasSummary\"\r\n        [columnsCount]=\"columnsCount\"\r\n        [formLayout]=\"formLayout\"\r\n        [disableResponsive]=\"disableResponsive\"\r\n        (escapeKey)=\"onEscapeKey($event)\"\r\n        (resetWorkflowState)=\"onResetWorkflowState($event)\"\r\n        (hasDetailsInRow)=\"onHasDetailsInRow($event, deviceSize)\"\r\n        (executeToolbarButton)=\"onExecuteToolbarButton($event)\"\r\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\r\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\r\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\r\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\r\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\r\n        (ulvCommandClick)=\"onUlvCommand($event)\"\r\n        (sortAscending)=\"onSortAscending($event)\"\r\n        (sortDescending)=\"onSortDescending($event)\"\r\n        (filter)=\"onFilter($event)\"\r\n        (deselectAll)=\"onDeselectAll()\"\r\n        (rowCheck)=\"onRowCheck($event)\"\r\n        (rowClick)=\"onRowClick($event)\"\r\n        (allCheckbox)=\"onAllCheckbox($event)\"\r\n        (expandClick)=\"onExpandClick($event)\"\r\n        (columnResized)=\"onColumnResized($event)\"\r\n        (cartableFormClosed)=\"onCartableFormClosed($event)\"\r\n        (createNewMo)=\"onCreateNewMo()\"\r\n        (updateMo)=\"onUpdateMo($event)\"\r\n        (mandatory)=\"onMandatory($event)\"\r\n        (sortSettingsChange)=\"onSortSettingsChange($event)\"\r\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\r\n        (resetGridSettings)=\"onResetGridSettings()\"\r\n        parameters.ShortcutList.MoDataList\r\n    ></div>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}.view-row{cursor:pointer}.header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:.5rem;background-color:var(--sapBaseColor)}.header span{font-size:1.7rem;font-weight:300}.btn-margin{margin:0 8px 0 0}.table-header-btn-group{display:flex;justify-content:flex-end;flex-grow:1}.context-command{margin:0 2px}.body-wrapper,.body-wrapper table{width:100%}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.root-grouped{color:green}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.single-select{min-width:2rem;max-width:2rem;width:2rem;text-align:center}.grid-editable-btn-group{display:flex;justify-content:space-evenly;align-items:center}.table-fixed{table-layout:fixed}.table-fixed td{overflow:hidden}::ng-deep span.fd-toolbar__spacer{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: ["allowGridColumnSort", "useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "icon", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "cls", "hasSelected", "config", "hidden", "buttons", "moDataListCount"], outputs: ["search", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo"] }, { kind: "component", type: ReportNewTopFormComponent, selector: "bsu-report-new-top-form", inputs: ["selectedMo"], outputs: ["add", "save"] }, { kind: "directive", type: ReportViewRendererDirective, selector: "[reportViewRenderer]", inputs: ["view", "moDataList", "allChecked", "contextSetting", "groupby", "isCheckList", "hasInlineDeleteButton", "hasInlineEditButton", "selectedCount", "hideToolbar", "toolbarButtons", "pagingSetting", "UlvMainCtrlr", "hasSummary", "relationList", "columns", "columnsCount", "secondaryColumns", "contextMenuItems", "conditionalFormats", "deviceName", "deviceSize", "mobileOrTablet", "access", "title", "customFieldInfo", "selectedMo", "allColumns", "viewSetting", "inlineEditMode", "onlyInlineEdit", "allowInlineEdit", "popin", "hasSelected", "formSetting", "disableOverflowContextMenu", "navigationArrow", "typeDefId", "reportId", "listEditViewId", "typeViewId", "containerWidth", "extraRelation", "contextView", "contentDensity", "hideOpenIcon", "hideTitle", "groupSummary", "openOnClick", "inDialog", "isMultiSelect", "rtl", "disableResponsive", "simpleInlineEdit", "hideSearchpanel", "gridFreeColumnSizing", "inlineEditWithoutSelection", "cartableTemplates", "cartableChildsMo"], outputs: ["editFormPanelCancel", "editFormPanelValueChange", "resetWorkflowState", "ulvCommandClick", "sortAscending", "sortDescending", "filter", "deselectAll", "rowCheck", "rowClick", "executeToolbarButton", "expandClick", "trackBySelectedFn", "cartableFormClosed", "createNewMo", "updateMo", "hasDetailsInRow", "allCheckbox", "mandatory", "editFormPanelSave", "columnResized", "selectNextInlineRecord", "workflowShareButtons", "escapeKey", "resetGridSettings", "sortSettingsChange"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }, { kind: "pipe", type: i2.ContextMenuPipe, name: "contextMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -5861,6 +5867,12 @@ class BarsaTableHeaderComponent extends BaseComponent {
             this.columns[i].$Width = `${th.offsetWidth}px`;
         });
     }
+    SetColumnWidthToResizedTh(arr) {
+        this.thArr.forEach((th, i) => {
+            this.columns[i].Width = arr[i].width;
+            this.columns[i].$Width = `${arr[i].width}px`;
+        });
+    }
     SetColumnWidthToPercent() {
         const allWidth = this.theadRef.nativeElement.clientWidth;
         this.thArr.forEach((th, i) => {
@@ -5878,11 +5890,11 @@ class BarsaTableHeaderComponent extends BaseComponent {
         return `${column.Name}${index}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTableHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaTableHeaderComponent, selector: "bsu-barsa-table-header", inputs: { allChecked: "allChecked", isCheckList: "isCheckList", attachmentViewType: "attachmentViewType", columns: "columns", fitWidth: "fitWidth", contextMenuItems: "contextMenuItems", contextMenuWidth: "contextMenuWidth", showViewButton: "showViewButton", hasSelected: "hasSelected", hideOpenIcon: "hideOpenIcon", disableOverflowContextMenu: "disableOverflowContextMenu", inlineEditMode: "inlineEditMode", hideHeader: "hideHeader", showDetailsInRow: "showDetailsInRow", viewSetting: "viewSetting", tableWidth: "tableWidth", resizedByUser: "resizedByUser", disableResponsive: "disableResponsive", actionList: "actionList", rowIndicator: "rowIndicator", rtl: "rtl", sticky: "sticky", showRowNumber: "showRowNumber", hasSecondaryColumns: "hasSecondaryColumns", disableResize: "disableResize", disableHeaderContextMenu: "disableHeaderContextMenu", deviceSize: "deviceSize", tableHeaderMode: "tableHeaderMode" }, outputs: { allCheckbox: "allCheckbox", columnResize: "columnResize", columnResizing: "columnResizing", fitToContent: "fitToContent", fitToContainer: "fitToContainer", freeColumnSize: "freeColumnSize", sortAscending: "sortAscending", sortDescending: "sortDescending", filter: "filter", resetGridSettings: "resetGridSettings", headerRender: "headerRender" }, viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "thList", predicate: ["thRef"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead\r\n    fd-table-header\r\n    [class.inline-edit]=\"inlineEditMode\"\r\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\r\n    [style.position]=\"sticky ? 'sticky' : null\"\r\n    #theadRef\r\n>\r\n    <tr fd-table-row>\r\n        @if (!hideHeader) { @if (rowIndicator) {\r\n        <th fd-table-cell fd-table-status-indicator #rowIndicator></th>\r\n        } @if (showRowNumber) {\r\n        <th fd-table-cell style=\"width: 40px; max-width: 40px\"></th>\r\n        } @if (isCheckList) {\r\n        <th fd-table-cell>\r\n            <fd-checkbox\r\n                name=\"allCheckbox\"\r\n                [ngModel]=\"allChecked\"\r\n                (ngModelChange)=\"onAllCheckbox($event)\"\r\n            ></fd-checkbox>\r\n        </th>\r\n        } @if (!isCheckList && !showRowNumber) {\r\n        <th fd-table-cell class=\"single-select\"></th>\r\n        } @for (column of columns; track _trackByColumn(i, column); let i = $index; let last = $last) {\r\n        <th\r\n            #thRef\r\n            tableth\r\n            fd-table-cell\r\n            resizable\r\n            [index]=\"i\"\r\n            [last]=\"last\"\r\n            [columnsLength]=\"columns.length\"\r\n            [column]=\"column\"\r\n            [tableHeaderMode]=\"tableHeaderMode\"\r\n            [fieldTypeId]=\"+column.FieldTypeId\"\r\n            [rtl]=\"rtl\"\r\n            [caption]=\"column.Caption | bbbTranslate\"\r\n            [name]=\"column.Name\"\r\n            [icon]=\"column.Icon\"\r\n            [colClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\r\n            [displayType]=\"column.Extra?.IconDisplayTypeEnum\"\r\n            [isImageOrIcon]=\"(column | thImageOrIcon) === true\"\r\n            [disableResize]=\"\r\n                hasSecondaryColumns ||\r\n                disableResize ||\r\n                (tableHeaderMode === 2 && last) ||\r\n                (column | thImageOrIcon) === true\r\n            \"\r\n            [disableHeaderContextMenu]=\"disableHeaderContextMenu\"\r\n            [disableResponsive]=\"disableResponsive\"\r\n            (sortAscending)=\"sortAscending.emit(column)\"\r\n            (sortDescending)=\"sortDescending.emit(column)\"\r\n            (filter)=\"filter.emit(column)\"\r\n            (resetGridSettings)=\"resetGridSettings.emit()\"\r\n            (widthChange)=\"onColumnWidthChange(column)\"\r\n            (widthChanging)=\"onColumnWidthChanging(i, column, $event)\"\r\n            [style.width]=\"hasSecondaryColumns && last ? '100% !important' : null\"\r\n        >\r\n            @if(!disableHeaderContextMenu){\r\n            <fd-popover #menu>\r\n                <fd-popover-control>\r\n                    <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n                </fd-popover-control>\r\n                <fd-popover-body>\r\n                    <ul fd-list>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortAscending(column, menu)\">\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-ascending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortDescending(column, menu)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-descending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onFitToContent(column, i)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Fit Column To Content' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"fitToContainer.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('All Columns In Page' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"freeColumnSize.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Free Columns Size' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onResetColumnsSettings()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"reset\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ 'GridSettingBase' | bbbTranslate }}</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </fd-popover-body>\r\n            </fd-popover>\r\n            } @else{\r\n            <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n            }\r\n        </th>\r\n        } @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <th\r\n            class=\"col-header col-context-menu\"\r\n            fd-table-cell\r\n            [fitContent]=\"disableOverflowContextMenu\"\r\n            [style.width.px]=\"contextMenuWidth\"\r\n        ></th>\r\n        } @if (showDetailsInRow && !inlineEditMode) {\r\n        <th class=\"col-header col-details\" [style.width]=\"deviceSize === 's' ? '44px' : '120px'\" fd-table-cell></th>\r\n        } @if (showViewButton) {\r\n        <th class=\"col-header col-view\" [style.width.px]=\"36 * (actionList?.length ?? 0) + 8\" fd-table-cell></th>\r\n        } }\r\n    </tr>\r\n</thead>\r\n<ng-template #headerValue let-column>\r\n    <div style=\"display: flex\" [attr.title]=\"column.Caption | bbbTranslate\">\r\n        @if ( (column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42) && column.Icon) {\r\n        <img [src]=\"column.Icon\" />\r\n        } @else {\r\n        {{ column.Caption | bbbTranslate }}\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents;width:100%}:host.has-toolbar thead{border-top:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i5.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: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id", "preventClick"], outputs: ["keyDown"] }, { 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: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i6$1.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "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: "directive", type: i3$3.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY", "nonInteractive"] }, { kind: "directive", type: i3$3.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i3$3.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: i3$3.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "component", type: i2.ResizableComponent, selector: "th[resizable]", inputs: ["disableResize", "rtl"], outputs: ["widthChange", "widthChanging"] }, { kind: "directive", type: TableThDirective, selector: "[tableth]", inputs: ["fieldTypeId", "caption", "icon", "inlineEditMode", "isImageOrIcon", "columnsLength", "tableWidth", "last", "rtl", "column", "disableResponsive", "disableResize", "disableHeaderContextMenu", "tableHeaderMode", "colClass", "displayType", "name", "index"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ThImageOrIconePipe, name: "thImageOrIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaTableHeaderComponent, selector: "bsu-barsa-table-header", inputs: { allChecked: "allChecked", isCheckList: "isCheckList", attachmentViewType: "attachmentViewType", columns: "columns", fitWidth: "fitWidth", contextMenuItems: "contextMenuItems", contextMenuWidth: "contextMenuWidth", showViewButton: "showViewButton", hasSelected: "hasSelected", hideOpenIcon: "hideOpenIcon", disableOverflowContextMenu: "disableOverflowContextMenu", inlineEditMode: "inlineEditMode", hideHeader: "hideHeader", showDetailsInRow: "showDetailsInRow", viewSetting: "viewSetting", tableWidth: "tableWidth", resizedByUser: "resizedByUser", disableResponsive: "disableResponsive", actionList: "actionList", rowIndicator: "rowIndicator", rtl: "rtl", sticky: "sticky", showRowNumber: "showRowNumber", hasSecondaryColumns: "hasSecondaryColumns", disableResize: "disableResize", disableHeaderContextMenu: "disableHeaderContextMenu", deviceSize: "deviceSize", tableHeaderMode: "tableHeaderMode" }, outputs: { allCheckbox: "allCheckbox", columnResize: "columnResize", columnResizing: "columnResizing", fitToContent: "fitToContent", fitToContainer: "fitToContainer", freeColumnSize: "freeColumnSize", sortAscending: "sortAscending", sortDescending: "sortDescending", filter: "filter", resetGridSettings: "resetGridSettings", headerRender: "headerRender" }, viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "thList", predicate: ["thRef"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead\r\n    fd-table-header\r\n    [class.inline-edit]=\"inlineEditMode\"\r\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\r\n    [style.position]=\"sticky ? 'sticky' : null\"\r\n    #theadRef\r\n>\r\n    <tr fd-table-row>\r\n        @if (!hideHeader) { @if (rowIndicator) {\r\n        <th fd-table-cell fd-table-status-indicator #rowIndicator></th>\r\n        } @if (showRowNumber) {\r\n        <th fd-table-cell style=\"width: 40px; max-width: 40px\"></th>\r\n        } @if (isCheckList) {\r\n        <th fd-table-cell>\r\n            <fd-checkbox\r\n                name=\"allCheckbox\"\r\n                [ngModel]=\"allChecked\"\r\n                (ngModelChange)=\"onAllCheckbox($event)\"\r\n            ></fd-checkbox>\r\n        </th>\r\n        } @if (!isCheckList && !showRowNumber) {\r\n        <th fd-table-cell class=\"single-select\"></th>\r\n        } @for (column of columns; track _trackByColumn(i, column); let i = $index; let last = $last) {\r\n        <th\r\n            #thRef\r\n            tableth\r\n            fd-table-cell\r\n            resizable\r\n            [index]=\"i\"\r\n            [last]=\"last\"\r\n            [columnsLength]=\"columns.length\"\r\n            [column]=\"column\"\r\n            [tableHeaderMode]=\"tableHeaderMode\"\r\n            [fieldTypeId]=\"+column.FieldTypeId\"\r\n            [rtl]=\"rtl\"\r\n            [caption]=\"column.Caption | bbbTranslate\"\r\n            [name]=\"column.Name\"\r\n            [icon]=\"column.Icon\"\r\n            [colClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\r\n            [displayType]=\"column.Extra?.IconDisplayTypeEnum\"\r\n            [isImageOrIcon]=\"(column | thImageOrIcon) === true\"\r\n            [disableResize]=\"\r\n                hasSecondaryColumns ||\r\n                disableResize ||\r\n                (tableHeaderMode === 2 && last) ||\r\n                (column | thImageOrIcon) === true\r\n            \"\r\n            [disableHeaderContextMenu]=\"disableHeaderContextMenu\"\r\n            [disableResponsive]=\"disableResponsive\"\r\n            (sortAscending)=\"sortAscending.emit(column)\"\r\n            (sortDescending)=\"sortDescending.emit(column)\"\r\n            (filter)=\"filter.emit(column)\"\r\n            (resetGridSettings)=\"resetGridSettings.emit()\"\r\n            (widthChange)=\"onColumnWidthChange(column)\"\r\n            (widthChanging)=\"onColumnWidthChanging(i, column, $event)\"\r\n            [style.width]=\"hasSecondaryColumns && last ? '100% !important' : null\"\r\n        >\r\n            @if(!disableHeaderContextMenu){\r\n            <fd-popover #menu>\r\n                <fd-popover-control>\r\n                    <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n                </fd-popover-control>\r\n                <fd-popover-body>\r\n                    <ul fd-list>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortAscending(column, menu)\">\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-ascending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortDescending(column, menu)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-descending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onFitToContent(column, i)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Fit Column To Content' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"fitToContainer.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('All Columns In Page' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"freeColumnSize.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Free Columns Size' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onResetColumnsSettings()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"reset\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ 'GridSettingBase' | bbbTranslate }}</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </fd-popover-body>\r\n            </fd-popover>\r\n            } @else{\r\n            <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n            }\r\n        </th>\r\n        } @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <th\r\n            class=\"col-header col-context-menu\"\r\n            fd-table-cell\r\n            [fitContent]=\"disableOverflowContextMenu\"\r\n            [style.width.px]=\"contextMenuWidth\"\r\n        ></th>\r\n        } @if (showDetailsInRow && !inlineEditMode) {\r\n        <th class=\"col-header col-details\" [style.width]=\"deviceSize === 's' ? '44px' : '120px'\" fd-table-cell></th>\r\n        } @if (showViewButton) {\r\n        <th class=\"col-header col-view\" [style.width.px]=\"36 * (actionList?.length ?? 0) + 8\" fd-table-cell></th>\r\n        } }\r\n    </tr>\r\n</thead>\r\n<ng-template #headerValue let-column>\r\n    <div style=\"display: flex\" [attr.title]=\"column.Caption | bbbTranslate\">\r\n        @if ( (column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42) && column.Icon) {\r\n        <img [src]=\"column.Icon\" />\r\n        } @else if(column.FieldTypeId!==38) {\r\n        {{ column.Caption | bbbTranslate }}\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents;width:100%}:host.has-toolbar thead{border-top:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i5.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: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id", "preventClick"], outputs: ["keyDown"] }, { 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: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i6$1.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "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: "directive", type: i3$3.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY", "nonInteractive"] }, { kind: "directive", type: i3$3.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i3$3.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: i3$3.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "component", type: i2.ResizableComponent, selector: "th[resizable]", inputs: ["disableResize", "rtl"], outputs: ["widthChange", "widthChanging"] }, { kind: "directive", type: TableThDirective, selector: "[tableth]", inputs: ["fieldTypeId", "caption", "icon", "inlineEditMode", "isImageOrIcon", "columnsLength", "tableWidth", "last", "rtl", "column", "disableResponsive", "disableResize", "disableHeaderContextMenu", "tableHeaderMode", "colClass", "displayType", "name", "index"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ThImageOrIconePipe, name: "thImageOrIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTableHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-table-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<thead\r\n    fd-table-header\r\n    [class.inline-edit]=\"inlineEditMode\"\r\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\r\n    [style.position]=\"sticky ? 'sticky' : null\"\r\n    #theadRef\r\n>\r\n    <tr fd-table-row>\r\n        @if (!hideHeader) { @if (rowIndicator) {\r\n        <th fd-table-cell fd-table-status-indicator #rowIndicator></th>\r\n        } @if (showRowNumber) {\r\n        <th fd-table-cell style=\"width: 40px; max-width: 40px\"></th>\r\n        } @if (isCheckList) {\r\n        <th fd-table-cell>\r\n            <fd-checkbox\r\n                name=\"allCheckbox\"\r\n                [ngModel]=\"allChecked\"\r\n                (ngModelChange)=\"onAllCheckbox($event)\"\r\n            ></fd-checkbox>\r\n        </th>\r\n        } @if (!isCheckList && !showRowNumber) {\r\n        <th fd-table-cell class=\"single-select\"></th>\r\n        } @for (column of columns; track _trackByColumn(i, column); let i = $index; let last = $last) {\r\n        <th\r\n            #thRef\r\n            tableth\r\n            fd-table-cell\r\n            resizable\r\n            [index]=\"i\"\r\n            [last]=\"last\"\r\n            [columnsLength]=\"columns.length\"\r\n            [column]=\"column\"\r\n            [tableHeaderMode]=\"tableHeaderMode\"\r\n            [fieldTypeId]=\"+column.FieldTypeId\"\r\n            [rtl]=\"rtl\"\r\n            [caption]=\"column.Caption | bbbTranslate\"\r\n            [name]=\"column.Name\"\r\n            [icon]=\"column.Icon\"\r\n            [colClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\r\n            [displayType]=\"column.Extra?.IconDisplayTypeEnum\"\r\n            [isImageOrIcon]=\"(column | thImageOrIcon) === true\"\r\n            [disableResize]=\"\r\n                hasSecondaryColumns ||\r\n                disableResize ||\r\n                (tableHeaderMode === 2 && last) ||\r\n                (column | thImageOrIcon) === true\r\n            \"\r\n            [disableHeaderContextMenu]=\"disableHeaderContextMenu\"\r\n            [disableResponsive]=\"disableResponsive\"\r\n            (sortAscending)=\"sortAscending.emit(column)\"\r\n            (sortDescending)=\"sortDescending.emit(column)\"\r\n            (filter)=\"filter.emit(column)\"\r\n            (resetGridSettings)=\"resetGridSettings.emit()\"\r\n            (widthChange)=\"onColumnWidthChange(column)\"\r\n            (widthChanging)=\"onColumnWidthChanging(i, column, $event)\"\r\n            [style.width]=\"hasSecondaryColumns && last ? '100% !important' : null\"\r\n        >\r\n            @if(!disableHeaderContextMenu){\r\n            <fd-popover #menu>\r\n                <fd-popover-control>\r\n                    <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n                </fd-popover-control>\r\n                <fd-popover-body>\r\n                    <ul fd-list>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortAscending(column, menu)\">\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-ascending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortDescending(column, menu)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-descending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onFitToContent(column, i)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Fit Column To Content' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"fitToContainer.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('All Columns In Page' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"freeColumnSize.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Free Columns Size' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onResetColumnsSettings()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"reset\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ 'GridSettingBase' | bbbTranslate }}</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </fd-popover-body>\r\n            </fd-popover>\r\n            } @else{\r\n            <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n            }\r\n        </th>\r\n        } @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <th\r\n            class=\"col-header col-context-menu\"\r\n            fd-table-cell\r\n            [fitContent]=\"disableOverflowContextMenu\"\r\n            [style.width.px]=\"contextMenuWidth\"\r\n        ></th>\r\n        } @if (showDetailsInRow && !inlineEditMode) {\r\n        <th class=\"col-header col-details\" [style.width]=\"deviceSize === 's' ? '44px' : '120px'\" fd-table-cell></th>\r\n        } @if (showViewButton) {\r\n        <th class=\"col-header col-view\" [style.width.px]=\"36 * (actionList?.length ?? 0) + 8\" fd-table-cell></th>\r\n        } }\r\n    </tr>\r\n</thead>\r\n<ng-template #headerValue let-column>\r\n    <div style=\"display: flex\" [attr.title]=\"column.Caption | bbbTranslate\">\r\n        @if ( (column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42) && column.Icon) {\r\n        <img [src]=\"column.Icon\" />\r\n        } @else {\r\n        {{ column.Caption | bbbTranslate }}\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents;width:100%}:host.has-toolbar thead{border-top:none!important}\n"] }]
+            args: [{ selector: 'bsu-barsa-table-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<thead\r\n    fd-table-header\r\n    [class.inline-edit]=\"inlineEditMode\"\r\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\r\n    [style.position]=\"sticky ? 'sticky' : null\"\r\n    #theadRef\r\n>\r\n    <tr fd-table-row>\r\n        @if (!hideHeader) { @if (rowIndicator) {\r\n        <th fd-table-cell fd-table-status-indicator #rowIndicator></th>\r\n        } @if (showRowNumber) {\r\n        <th fd-table-cell style=\"width: 40px; max-width: 40px\"></th>\r\n        } @if (isCheckList) {\r\n        <th fd-table-cell>\r\n            <fd-checkbox\r\n                name=\"allCheckbox\"\r\n                [ngModel]=\"allChecked\"\r\n                (ngModelChange)=\"onAllCheckbox($event)\"\r\n            ></fd-checkbox>\r\n        </th>\r\n        } @if (!isCheckList && !showRowNumber) {\r\n        <th fd-table-cell class=\"single-select\"></th>\r\n        } @for (column of columns; track _trackByColumn(i, column); let i = $index; let last = $last) {\r\n        <th\r\n            #thRef\r\n            tableth\r\n            fd-table-cell\r\n            resizable\r\n            [index]=\"i\"\r\n            [last]=\"last\"\r\n            [columnsLength]=\"columns.length\"\r\n            [column]=\"column\"\r\n            [tableHeaderMode]=\"tableHeaderMode\"\r\n            [fieldTypeId]=\"+column.FieldTypeId\"\r\n            [rtl]=\"rtl\"\r\n            [caption]=\"column.Caption | bbbTranslate\"\r\n            [name]=\"column.Name\"\r\n            [icon]=\"column.Icon\"\r\n            [colClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\r\n            [displayType]=\"column.Extra?.IconDisplayTypeEnum\"\r\n            [isImageOrIcon]=\"(column | thImageOrIcon) === true\"\r\n            [disableResize]=\"\r\n                hasSecondaryColumns ||\r\n                disableResize ||\r\n                (tableHeaderMode === 2 && last) ||\r\n                (column | thImageOrIcon) === true\r\n            \"\r\n            [disableHeaderContextMenu]=\"disableHeaderContextMenu\"\r\n            [disableResponsive]=\"disableResponsive\"\r\n            (sortAscending)=\"sortAscending.emit(column)\"\r\n            (sortDescending)=\"sortDescending.emit(column)\"\r\n            (filter)=\"filter.emit(column)\"\r\n            (resetGridSettings)=\"resetGridSettings.emit()\"\r\n            (widthChange)=\"onColumnWidthChange(column)\"\r\n            (widthChanging)=\"onColumnWidthChanging(i, column, $event)\"\r\n            [style.width]=\"hasSecondaryColumns && last ? '100% !important' : null\"\r\n        >\r\n            @if(!disableHeaderContextMenu){\r\n            <fd-popover #menu>\r\n                <fd-popover-control>\r\n                    <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n                </fd-popover-control>\r\n                <fd-popover-body>\r\n                    <ul fd-list>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortAscending(column, menu)\">\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-ascending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortDescending(column, menu)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-descending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onFitToContent(column, i)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Fit Column To Content' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"fitToContainer.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('All Columns In Page' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"freeColumnSize.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Free Columns Size' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onResetColumnsSettings()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"reset\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ 'GridSettingBase' | bbbTranslate }}</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </fd-popover-body>\r\n            </fd-popover>\r\n            } @else{\r\n            <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n            }\r\n        </th>\r\n        } @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <th\r\n            class=\"col-header col-context-menu\"\r\n            fd-table-cell\r\n            [fitContent]=\"disableOverflowContextMenu\"\r\n            [style.width.px]=\"contextMenuWidth\"\r\n        ></th>\r\n        } @if (showDetailsInRow && !inlineEditMode) {\r\n        <th class=\"col-header col-details\" [style.width]=\"deviceSize === 's' ? '44px' : '120px'\" fd-table-cell></th>\r\n        } @if (showViewButton) {\r\n        <th class=\"col-header col-view\" [style.width.px]=\"36 * (actionList?.length ?? 0) + 8\" fd-table-cell></th>\r\n        } }\r\n    </tr>\r\n</thead>\r\n<ng-template #headerValue let-column>\r\n    <div style=\"display: flex\" [attr.title]=\"column.Caption | bbbTranslate\">\r\n        @if ( (column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42) && column.Icon) {\r\n        <img [src]=\"column.Icon\" />\r\n        } @else if(column.FieldTypeId!==38) {\r\n        {{ column.Caption | bbbTranslate }}\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents;width:100%}:host.has-toolbar thead{border-top:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { thList: [{
                 type: ViewChildren,
                 args: ['thRef', { read: ElementRef }]
@@ -6146,7 +6158,7 @@ class UiTableViewComponent extends ReportViewBaseComponent {
             return;
         }
         if (this.tableHeaderMode === TableHeaderWidthMode.FreeColumnSize) {
-            this._tableHeaderComponent.SetColumnWidthToThWidth();
+            this._tableHeaderComponent.SetColumnWidthToResizedTh(arr);
         }
         else {
             this._tableHeaderComponent.SetColumnWidthToPercent();
@@ -7156,11 +7168,11 @@ class BarsaUlvMainComponent extends BaseComponent {
         this._renderer2.setAttribute(this.el.nativeElement, 'uiviewer', uiViewerSelector);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaUlvMainComponent, deps: [{ token: i0.ElementRef }, { token: i1.DialogService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: { viewerControl: "viewerControl", loading: "loading", viewerLoading: "viewerLoading", isReportPage: "isReportPage", deviceSize: "deviceSize", 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" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["searchpanelDialog"], descendants: true }], usesInheritance: 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        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]=\"\r\n            (!title && !searchPanelUi && !hideSearchPanel && !sideContentMode) ||\r\n            (sideContentMode && !hideSearchPanel && !title) ||\r\n            hideUlvPageTitle\r\n        \"\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) {\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) {\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) {\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) {\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    >\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>\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        [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\">\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        class=\"viewer-container\"\r\n        fillEmptySpace\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) {\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 fd-dynamic-side-content-main fd-card{border:1px solid #ccc!important;transition:.25s background-color!important;background-color:var(--sapBackgroundColor, #f7f7f7)!important}:host[uiviewer=bsu-ui-card-view] fd-dynamic-side-content fd-dynamic-side-content-main fd-card ::ng-deep bsu-ui-card-view{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}fd-dynamic-page:not(.mobile).notitle ::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;gap:.5rem}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$2.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: "component", type: i4$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4$1.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i4$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i4$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i5$6.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$6.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "directive", type: i3$4.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$4.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: i5$4.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i5$4.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i5$4.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$4.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "component", type: i5$4.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i5$4.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i9$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i9$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i9$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i9$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i9$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i9$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i9$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i9$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i10$2.DynamicSideContentComponent, selector: "fd-dynamic-side-content", inputs: ["position", "size", "id"] }, { kind: "component", type: i10$2.DynamicSideContentSideComponent, selector: "fd-dynamic-side-content-side", inputs: ["id"] }, { kind: "component", type: i10$2.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", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id", "preventClick"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i4$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$2.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i4$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i4$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i6.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i5$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: "pipe", type: i1$2.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: "18.2.13", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: { viewerControl: "viewerControl", loading: "loading", hidePaging: "hidePaging", viewerLoading: "viewerLoading", isReportPage: "isReportPage", deviceSize: "deviceSize", 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" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["searchpanelDialog"], descendants: true }], usesInheritance: 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        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]=\"\r\n            (!title && !searchPanelUi && !hideSearchPanel && !sideContentMode) ||\r\n            (sideContentMode && !hideSearchPanel && !title) ||\r\n            hideUlvPageTitle\r\n        \"\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) {\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) {\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) {\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) {\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    >\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>\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        [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\">\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        class=\"viewer-container\"\r\n        fillEmptySpace\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 fd-dynamic-side-content-main fd-card{border:1px solid #ccc!important;transition:.25s background-color!important;background-color:var(--sapBackgroundColor, #f7f7f7)!important}:host[uiviewer=bsu-ui-card-view] fd-dynamic-side-content fd-dynamic-side-content-main fd-card ::ng-deep bsu-ui-card-view{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}fd-dynamic-page:not(.mobile).notitle ::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;gap:.5rem}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$2.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: "component", type: i4$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4$1.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i4$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i4$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i5$6.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$6.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "directive", type: i3$4.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$4.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: i5$4.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i5$4.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i5$4.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$4.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "component", type: i5$4.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i5$4.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i9$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i9$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i9$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i9$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i9$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i9$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i9$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i9$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i10$2.DynamicSideContentComponent, selector: "fd-dynamic-side-content", inputs: ["position", "size", "id"] }, { kind: "component", type: i10$2.DynamicSideContentSideComponent, selector: "fd-dynamic-side-content-side", inputs: ["id"] }, { kind: "component", type: i10$2.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", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id", "preventClick"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i4$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$2.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i4$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i4$2.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i6.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i5$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: "pipe", type: i1$2.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: "18.2.13", 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        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]=\"\r\n            (!title && !searchPanelUi && !hideSearchPanel && !sideContentMode) ||\r\n            (sideContentMode && !hideSearchPanel && !title) ||\r\n            hideUlvPageTitle\r\n        \"\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) {\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) {\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) {\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) {\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    >\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>\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        [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\">\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        class=\"viewer-container\"\r\n        fillEmptySpace\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) {\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 fd-dynamic-side-content-main fd-card{border:1px solid #ccc!important;transition:.25s background-color!important;background-color:var(--sapBackgroundColor, #f7f7f7)!important}:host[uiviewer=bsu-ui-card-view] fd-dynamic-side-content fd-dynamic-side-content-main fd-card ::ng-deep bsu-ui-card-view{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}fd-dynamic-page:not(.mobile).notitle ::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;gap:.5rem}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        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]=\"\r\n            (!title && !searchPanelUi && !hideSearchPanel && !sideContentMode) ||\r\n            (sideContentMode && !hideSearchPanel && !title) ||\r\n            hideUlvPageTitle\r\n        \"\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) {\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) {\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) {\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) {\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    >\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>\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        [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\">\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        class=\"viewer-container\"\r\n        fillEmptySpace\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 fd-dynamic-side-content-main fd-card{border:1px solid #ccc!important;transition:.25s background-color!important;background-color:var(--sapBackgroundColor, #f7f7f7)!important}:host[uiviewer=bsu-ui-card-view] fd-dynamic-side-content fd-dynamic-side-content-main fd-card ::ng-deep bsu-ui-card-view{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}fd-dynamic-page:not(.mobile).notitle ::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;gap:.5rem}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: () => [{ type: i0.ElementRef }, { type: i1.DialogService }, { type: i0.Renderer2 }], propDecorators: { _dynamicPageComponent: [{
                 type: ViewChild,
                 args: [DynamicPageComponent]
@@ -7171,6 +7183,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], loading: [{
                 type: Input
+            }], hidePaging: [{
+                type: Input
             }], viewerLoading: [{
                 type: Input
             }], isReportPage: [{
@@ -7281,6 +7295,7 @@ class UiUlvMainUiComponent extends BaseComponent {
         super.ngOnInit();
         this.isMobile = getDeviceIsMobile();
         this._ulvMainService.setInDialog(this.inDialog);
+        this.hidePaging$ = this._ulvMainService.hidePaging$;
         this._ulvMainService.setIsMultiSelect(this.isMultiSelect);
         this._ulvMainService.uiViewerSelector$.pipe(takeUntil(this._onDestroy$)).subscribe((c) => {
             this._barsaUlvComponent.SetUiViewerSelector(c);
@@ -7506,11 +7521,11 @@ class UiUlvMainUiComponent extends BaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiUlvMainUiComponent, deps: [{ token: i1.DialogService }, { token: i2.UlvMainService }, { token: i0.ElementRef }, { token: i2$7.Router }, { token: i2.PortalService }, { token: i0.ChangeDetectorRef }, { token: i2$7.ActivatedRoute }, { token: i1.ContentDensityService }, { token: i2.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UiUlvMainUiComponent, 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    [style.margin]=\"isReportPage || inDialog ? null : 'var(--fdInput_Field_Margin, .25rem 0)'\"\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    [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    [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>\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: "component", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: ["viewerControl", "loading", "viewerLoading", "isReportPage", "deviceSize", "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$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UiUlvMainUiComponent, 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    [style.margin]=\"isReportPage || inDialog ? null : 'var(--fdInput_Field_Margin, .25rem 0)'\"\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    [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>\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: "component", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: ["viewerControl", "loading", "hidePaging", "viewerLoading", "isReportPage", "deviceSize", "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$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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    [style.margin]=\"isReportPage || inDialog ? null : 'var(--fdInput_Field_Margin, .25rem 0)'\"\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    [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    [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>\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    [style.margin]=\"isReportPage || inDialog ? null : 'var(--fdInput_Field_Margin, .25rem 0)'\"\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    [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>\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: () => [{ type: i1.DialogService }, { type: i2.UlvMainService }, { type: i0.ElementRef }, { type: i2$7.Router }, { type: i2.PortalService }, { type: i0.ChangeDetectorRef }, { type: i2$7.ActivatedRoute }, { type: i1.ContentDensityService }, { type: i2.BreadcrumbService }], propDecorators: { context: [{
                 type: Input
             }], isReportPage: [{
@@ -8996,11 +9011,11 @@ class LyTabPageComponent extends LayoutPanelBaseComponent {
         this.layoutService.refreshLayout();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LyTabPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: { renderItems: "renderItems", tablist: "tablist" }, host: { properties: { "style.flex": "this.flex", "attr.tabtitle": "this.title", "class": "this._classes" } }, providers: [LayoutService], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["placeholder"], descendants: true, read: ViewContainerRef }, { propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: { renderItems: "renderItems", tablist: "tablist" }, host: { properties: { "style.flex": "this.flex", "attr.tabtitle": "this.title", "class": "this._classes" } }, providers: [LayoutService], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["placeholder"], descendants: true, read: ViewContainerRef }, { propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;padding:.3rem 0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LyTabPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-tab-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "<ng-container *untilInView=\"el\">\r\n    @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'bsu-ly-tab-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "<ng-container *untilInView=\"el\">\r\n    @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;padding:.3rem 0}\n"] }]
         }], propDecorators: { vcr: [{
                 type: ViewChild,
                 args: ['placeholder', { read: ViewContainerRef }]
@@ -9150,7 +9165,7 @@ class FundamentalDynamicFormComponent extends BaseComponent {
         this.layout2 = GetFormLayoutGrid(false, this.colXl, this.colLg, this.colMd);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FundamentalDynamicFormComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FundamentalDynamicFormComponent, selector: "bsu-fundamental-dynamic-form", inputs: { breadCrumbs: "breadCrumbs", toolbarVisible: "toolbarVisible", toolbarItems: "toolbarItems", layoutActions: "layoutActions", layout94: "layout94", parameters: "parameters", workflowPanelUi: "workflowPanelUi", context: "context", title: "title", subtitle: "subtitle", description: "description", facetList: "facetList", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", circleAvatar: "circleAvatar", rtl: "rtl", hideFooter: "hideFooter", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", fullscreen: "fullscreen", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", formVisibilityStatus: "formVisibilityStatus", layoutGridCol: "layoutGridCol", colLg: "colLg", colXl: "colXl", colMd: "colMd", footerDesign: "footerDesign", formContentMaxWidth: "formContentMaxWidth", workflowButtons: "workflowButtons" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close", fullscreenRequest: "fullscreenRequest" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true, static: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "closeFormTemplate", first: true, predicate: ["closeForm"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (mask) {\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\r\n    <bsu-mask size=\"m\"></bsu-mask>\r\n</div>\r\n}\r\n\r\n<fd-dynamic-page\r\n    [size]=\"isMobile ? 'small' : 'large'\"\r\n    [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\r\n    [class.header-border]=\"!removeHeaderBorder\"\r\n    [attr.isMobile]=\"isMobile\"\r\n    [attr.contentIsPage]=\"contentIsPage\"\r\n    mobile\r\n    formClose\r\n    [isMobile]=\"isMobile\"\r\n>\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"!description\"\r\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n            <fd-breadcrumb>\r\n                @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\r\n                breadCrumb.url; let i = $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-global-actions>\r\n            <!-- global actions -->\r\n\r\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\r\n            <!-- added this because in mobile landscape toolbar disapper -->\r\n            @if (toolbarVisible) {\r\n            <bsu-form-toolbar\r\n                [deviceSize]=\"deviceSize\"\r\n                [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\r\n                [dirValue]=\"dirValue\"\r\n                [isFirefox]=\"isFirefox\"\r\n                (toolbarClick)=\"toolbarClick.emit($event)\"\r\n                #formToolbar\r\n            ></bsu-form-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <!-- layout actions -->\r\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\r\n            @if (!hideClose) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                @if (deviceSize !== 's') {\r\n                <fd-toolbar-separator></fd-toolbar-separator>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    @if (description || facetList.length > 0 || workflowInfoText || avatar) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText)\"\r\n        [collapsible]=\"true\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip [type]=\"'warning'\" [dismissible]=\"false\">\r\n            {{ workflowInfoText | bbbTranslate }}\r\n        </fd-message-strip>\r\n        }\r\n        <fd-facet-group ariaLabel=\"Facet Group\">\r\n            @if (avatar) {\r\n            <fd-facet type=\"image\">\r\n                <fd-avatar\r\n                    title=\"avatar\"\r\n                    [glyph]=\"avatar\"\r\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\r\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\r\n                    [transparent]=\"true\"\r\n                    [circle]=\"circleAvatar\"\r\n                ></fd-avatar>\r\n                <!-- <div\r\n                  class=\"fd-avatar fd-avatar--circle\"\r\n                  [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\r\n                  >\r\n                  <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\r\n                </div> -->\r\n            </fd-facet>\r\n            } @for (facet of facetList; track facet) {\r\n            <fd-facet\r\n                [type]=\"facet.type\"\r\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\r\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\r\n            >\r\n                @for (item of facet.mo.ItemList?.MoDataList; track item) {\r\n                <fd-facet-content>\r\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\r\n                </fd-facet-content>\r\n                } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\r\n                <span\r\n                    fd-object-status\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue\"\r\n                    [glyph]=\"facet.mo.Icon\"\r\n                >\r\n                </span>\r\n                } @else {\r\n                <bnrc-dynamic-component\r\n                    [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\r\n                    [class.fd-object-status--large]=\"facet.mo.IsLarge\"\r\n                    [component]=\"facet.mo.Component\"\r\n                    [value]=\"facet.mo.Text\"\r\n                ></bnrc-dynamic-component>\r\n                } @if (facet.mo.IsNumber && facet.type === 'key-value') {\r\n                <fd-object-number\r\n                    [number]=\"facet.mo.Text | facetValue\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [unit]=\"facet.mo.Unit | facetValue\"\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [decimal]=\"facet.mo.DecimalValue | facetValue\"\r\n                ></fd-object-number>\r\n                } @if (facet.type === 'plain-text') {\r\n                <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\r\n                    <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\r\n                </div>\r\n                } @if (facet.type === 'rating-indicator') {\r\n                <fd-facet-content>\r\n                    <fd-rating-indicator\r\n                        style=\"pointer-events: none\"\r\n                        size=\"md\"\r\n                        [dynamicTextIndicator]=\"facet.mo.Footer\"\r\n                        [displayMode]=\"true\"\r\n                        [value]=\"facet.mo | facetValue: facet.type\"\r\n                    ></fd-rating-indicator>\r\n                </fd-facet-content>\r\n                } @if (facet.type === 'progress') {\r\n                <div [style.width]=\"'10rem'\">\r\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\r\n                    <fd-progress-indicator class=\"facet-progress\"\r\n                        style=\"width: 10r em\"\r\n                        [state]=\"facet.mo.State\"\r\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\r\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\r\n                        [valueMax]=\"10\"\r\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\r\n                    ></fd-progress-indicator>\r\n                    <!-- <ui5-progress-indicator\r\n                    style=\"width: 10rem\"\r\n                    [valueState]=\"facet.mo.State\"\r\n                    [value]=\"getNumber(facet.mo.Value)\"\r\n                  ></ui5-progress-indicator> -->\r\n                </div>\r\n                } @if (facet.type === 'microcharts') {\r\n                <div>\r\n                    <label wrap>in progress ...</label>\r\n                </div>\r\n                }\r\n            </fd-facet>\r\n            }\r\n        </fd-facet-group>\r\n        @if (description) {\r\n        <span>{{ description }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if(!modernTabs.length && !contentIsPage){\r\n    <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\" cdkScrollable>\r\n        <fd-layout-grid style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow>\r\n                <div\r\n                    style=\"padding: 0; padding-inline: 0; padding-block: 0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout1.colMd\"\r\n                    [colLg]=\"layout1.colLg\"\r\n                    [colXl]=\"layout1.colXl\"\r\n                ></div>\r\n                <div style=\"min-height: 100%\" [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\r\n                            context: {\r\n                                $implicit: parameters?.LayoutComponent,\r\n                                layout94: layout94\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                <div\r\n                    style=\"padding: 0; padding-inline: 0; padding-block: 0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout2.colMd\"\r\n                    [colLg]=\"layout2.colLg\"\r\n                    [colXl]=\"layout2.colXl\"\r\n                ></div>\r\n            </div>\r\n        </fd-layout-grid>\r\n    </fd-dynamic-page-content>\r\n    } @else if(modernTabs.length && !contentIsPage && !parameters?.LayoutComponent){\r\n    <fdp-icon-tab-bar [stackContent]=\"false\" [collapseOverflow]=\"true\" [expandOverflowText]=\"'More' | bbbTranslate\">\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\r\n\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"tab.id\"\r\n            [label]=\"tab.Title!! | bbbTranslate\"\r\n            [title]=\"tab.Title!! | bbbTranslate\"\r\n            [class.is-expanded]=\"selectedTab === tab.Title\"\r\n            #tablist\r\n        >\r\n            <fd-dynamic-page-content [id]=\"tab.id\" [class.limit-content-width]=\"formContentMaxWidth > 0\">\r\n                <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            style=\"padding: 0; padding-inline: 0; padding-block: 0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            style=\"padding: 0; padding-inline: 0; padding-block: 0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                        ></div>\r\n                    </div>\r\n                </fd-layout-grid>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n        }\r\n    </fdp-icon-tab-bar>\r\n    } @if(!hideFooter && hasLayoutButtons){\r\n    <fd-dynamic-page-footer>\r\n        <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    </fd-dynamic-page-footer>\r\n    }\r\n</fd-dynamic-page>\r\n@if (contentIsPage) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderLayoutComponent;\r\n        context: {\r\n            $implicit: parameters?.LayoutComponent,\r\n            layout94: layout94\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\r\n    <bsu-ly-layout-container-of-root\r\n        [config]=\"layout94\"\r\n        [isPanel]=\"false\"\r\n        [isRoot]=\"true\"\r\n    ></bsu-ly-layout-container-of-root>\r\n</ng-template>\r\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\r\n    <bnrc-dynamic-form-component\r\n        [component]=\"component\"\r\n        [layoutActionsTemplateRef]=\"layoutActionsTemplateRef\"\r\n        [removeContentPadding]=\"removeContentPadding\"\r\n        [breadCrumbs]=\"breadCrumbs\"\r\n        [description]=\"description\"\r\n        [title]=\"title\"\r\n        [subtitle]=\"subtitle\"\r\n        [toolbarItems]=\"toolbarItems\"\r\n        [layoutActions]=\"layoutActions\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [facetList]=\"facetList\"\r\n        [settings]=\"component.Settings\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowPanelUi]=\"workflowPanelUi\"\r\n        [isMobile]=\"isMobile\"\r\n        [mo]=\"mo\"\r\n        [layout94]=\"layout94\"\r\n        [context]=\"context\"\r\n        [rtl]=\"rtl\"\r\n        [fieldDict]=\"fieldDict\"\r\n        [mask]=\"mask\"\r\n        [dirValue]=\"dirValue\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [modernTabs]=\"modernTabs\"\r\n        [avatar]=\"avatar\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-dynamic-form-component>\r\n</ng-template>\r\n<ng-template #closeForm>\r\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\r\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n    </button>\r\n</ng-template>\r\n<ng-template #fullscreenForm>\r\n    @if (canFullscreen) {\r\n    <button\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        (click)=\"fullscreenRequest.emit()\"\r\n        [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\r\n    ></button>\r\n    }\r\n</ng-template>\r\n<ng-template #layoutActionsTemplateRef>\r\n    <bsu-layout-actions\r\n        [canSend]=\"canSend\"\r\n        [buttons]=\"layoutActions\"\r\n        [isMobile]=\"isMobile\"\r\n        [landscape]=\"landscape\"\r\n        [standalone]=\"standalone\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [rtl]=\"rtl\"\r\n        (toolClick)=\"toolbarClick.emit($event)\"\r\n        (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\r\n    >\r\n    </bsu-layout-actions>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto;width:100%}:host>fd-dynamic-page[contentispage=false]:not([ismobile=true]) ::ng-deep fd-dynamic-page-header .fd-dynamic-page__title{max-width:50svw}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .facet-progress .fd-progress-indicator__container,:host ::ng-deep .facet-progress .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page ::ng-deep>article>.fd-scrollbar{height:inherit}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container,.no-pin ::ng-deep .fd-dynamic-page__collapsible-header{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "layoutActionsTemplateRef", "workflowButtons", "layout94", "footerDesign", "settings", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "value"], outputs: ["events"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i1$7.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$5.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: "component", type: i5$6.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$6.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i9$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i9$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i9$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i9$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i9$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i9$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i9$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i9$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i8$1.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "headingLevel", "id", "alignEnd"] }, { kind: "component", type: i8$1.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i8$1.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i2$5.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i5$8.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10$1.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: i14.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["class", "name", "ariaLabel", "ariaLabelledBy", "disabled", "displayMode", "nonInteractive", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator"], outputs: ["ratingChanged"] }, { kind: "component", type: i5$5.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i8.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i12$1.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: i18.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i18.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.HeaderFacetValuePipe, name: "facetValue" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FundamentalDynamicFormComponent, selector: "bsu-fundamental-dynamic-form", inputs: { breadCrumbs: "breadCrumbs", toolbarVisible: "toolbarVisible", toolbarItems: "toolbarItems", layoutActions: "layoutActions", layout94: "layout94", parameters: "parameters", workflowPanelUi: "workflowPanelUi", context: "context", title: "title", subtitle: "subtitle", description: "description", facetList: "facetList", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", circleAvatar: "circleAvatar", rtl: "rtl", hideFooter: "hideFooter", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", fullscreen: "fullscreen", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", formVisibilityStatus: "formVisibilityStatus", layoutGridCol: "layoutGridCol", colLg: "colLg", colXl: "colXl", colMd: "colMd", footerDesign: "footerDesign", formContentMaxWidth: "formContentMaxWidth", workflowButtons: "workflowButtons" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close", fullscreenRequest: "fullscreenRequest" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true, static: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "closeFormTemplate", first: true, predicate: ["closeForm"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (mask) {\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\r\n    <bsu-mask size=\"m\"></bsu-mask>\r\n</div>\r\n}\r\n\r\n<fd-dynamic-page\r\n    [size]=\"isMobile ? 'small' : 'large'\"\r\n    [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\r\n    [class.header-border]=\"!removeHeaderBorder\"\r\n    [attr.isMobile]=\"isMobile\"\r\n    [attr.contentIsPage]=\"contentIsPage\"\r\n    mobile\r\n    formClose\r\n    [isMobile]=\"isMobile\"\r\n>\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"!description\"\r\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n            <fd-breadcrumb>\r\n                @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\r\n                breadCrumb.url; let i = $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-global-actions>\r\n            <!-- global actions -->\r\n\r\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\r\n            <!-- added this because in mobile landscape toolbar disapper -->\r\n            @if (toolbarVisible) {\r\n            <bsu-form-toolbar\r\n                [deviceSize]=\"deviceSize\"\r\n                [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\r\n                [dirValue]=\"dirValue\"\r\n                [isFirefox]=\"isFirefox\"\r\n                (toolbarClick)=\"toolbarClick.emit($event)\"\r\n                #formToolbar\r\n            ></bsu-form-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <!-- layout actions -->\r\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\r\n            @if (!hideClose) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                @if (deviceSize !== 's') {\r\n                <fd-toolbar-separator></fd-toolbar-separator>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    @if (description || facetList.length > 0 || workflowInfoText || avatar) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText)\"\r\n        [collapsible]=\"true\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip [type]=\"'warning'\" [dismissible]=\"false\">\r\n            {{ workflowInfoText | bbbTranslate }}\r\n        </fd-message-strip>\r\n        }\r\n        <fd-facet-group ariaLabel=\"Facet Group\">\r\n            @if (avatar) {\r\n            <fd-facet type=\"image\">\r\n                <fd-avatar\r\n                    title=\"avatar\"\r\n                    [glyph]=\"avatar\"\r\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\r\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\r\n                    [transparent]=\"true\"\r\n                    [circle]=\"circleAvatar\"\r\n                ></fd-avatar>\r\n                <!-- <div\r\n                  class=\"fd-avatar fd-avatar--circle\"\r\n                  [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\r\n                  >\r\n                  <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\r\n                </div> -->\r\n            </fd-facet>\r\n            } @for (facet of facetList; track facet) {\r\n            <fd-facet\r\n                [type]=\"facet.type\"\r\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\r\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\r\n            >\r\n                @for (item of facet.mo.ItemList?.MoDataList; track item) {\r\n                <fd-facet-content>\r\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\r\n                </fd-facet-content>\r\n                } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\r\n                <span\r\n                    fd-object-status\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue\"\r\n                    [glyph]=\"facet.mo.Icon\"\r\n                >\r\n                </span>\r\n                } @else {\r\n                <bnrc-dynamic-component\r\n                    [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\r\n                    [class.fd-object-status--large]=\"facet.mo.IsLarge\"\r\n                    [component]=\"facet.mo.Component\"\r\n                    [value]=\"facet.mo.Text\"\r\n                ></bnrc-dynamic-component>\r\n                } @if (facet.mo.IsNumber && facet.type === 'key-value') {\r\n                <fd-object-number\r\n                    [number]=\"facet.mo.Text | facetValue\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [unit]=\"facet.mo.Unit | facetValue\"\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [decimal]=\"facet.mo.DecimalValue | facetValue\"\r\n                ></fd-object-number>\r\n                } @if (facet.type === 'plain-text') {\r\n                <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\r\n                    <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\r\n                </div>\r\n                } @if (facet.type === 'rating-indicator') {\r\n                <fd-facet-content>\r\n                    <fd-rating-indicator\r\n                        style=\"pointer-events: none\"\r\n                        size=\"md\"\r\n                        [dynamicTextIndicator]=\"facet.mo.Footer\"\r\n                        [displayMode]=\"true\"\r\n                        [value]=\"facet.mo | facetValue: facet.type\"\r\n                    ></fd-rating-indicator>\r\n                </fd-facet-content>\r\n                } @if (facet.type === 'progress') {\r\n                <div [style.width]=\"'10rem'\">\r\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\r\n                    <fd-progress-indicator class=\"facet-progress\"\r\n                        style=\"width: 10r em\"\r\n                        [state]=\"facet.mo.State\"\r\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\r\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\r\n                        [valueMax]=\"10\"\r\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\r\n                    ></fd-progress-indicator>\r\n                    <!-- <ui5-progress-indicator\r\n                    style=\"width: 10rem\"\r\n                    [valueState]=\"facet.mo.State\"\r\n                    [value]=\"getNumber(facet.mo.Value)\"\r\n                  ></ui5-progress-indicator> -->\r\n                </div>\r\n                } @if (facet.type === 'microcharts') {\r\n                <div>\r\n                    <label wrap>in progress ...</label>\r\n                </div>\r\n                }\r\n            </fd-facet>\r\n            }\r\n        </fd-facet-group>\r\n        @if (description) {\r\n        <span>{{ description }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if(!modernTabs.length && !contentIsPage){\r\n    <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\" cdkScrollable>\r\n        <fd-layout-grid style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow>\r\n                <div\r\n                    style=\"padding: 0; padding-inline: 0; padding-block: 0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout1.colMd\"\r\n                    [colLg]=\"layout1.colLg\"\r\n                    [colXl]=\"layout1.colXl\"\r\n                ></div>\r\n                <div style=\"min-height: 100%\" [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\r\n                            context: {\r\n                                $implicit: parameters?.LayoutComponent,\r\n                                layout94: layout94\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                <div\r\n                    style=\"padding: 0; padding-inline: 0; padding-block: 0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout2.colMd\"\r\n                    [colLg]=\"layout2.colLg\"\r\n                    [colXl]=\"layout2.colXl\"\r\n                ></div>\r\n            </div>\r\n        </fd-layout-grid>\r\n    </fd-dynamic-page-content>\r\n    } @else if(modernTabs.length && !contentIsPage && !parameters?.LayoutComponent){\r\n    <fdp-icon-tab-bar [stackContent]=\"false\" [collapseOverflow]=\"true\" [expandOverflowText]=\"'More' | bbbTranslate\">\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\r\n\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"tab.id\"\r\n            [label]=\"tab.Title!! | bbbTranslate\"\r\n            [title]=\"tab.Title!! | bbbTranslate\"\r\n            [class.is-expanded]=\"selectedTab === tab.Title\"\r\n            #tablist\r\n        >\r\n            <fd-dynamic-page-content [id]=\"tab.id\" [class.limit-content-width]=\"formContentMaxWidth > 0\">\r\n                <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            style=\"padding: 0; padding-inline: 0; padding-block: 0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            style=\"padding: 0; padding-inline: 0; padding-block: 0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                        ></div>\r\n                    </div>\r\n                </fd-layout-grid>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n        }\r\n    </fdp-icon-tab-bar>\r\n    } @if(!hideFooter && hasLayoutButtons){\r\n    <fd-dynamic-page-footer>\r\n        <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    </fd-dynamic-page-footer>\r\n    }\r\n</fd-dynamic-page>\r\n@if (contentIsPage) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderLayoutComponent;\r\n        context: {\r\n            $implicit: parameters?.LayoutComponent,\r\n            layout94: layout94\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\r\n    <bsu-ly-layout-container-of-root\r\n        [config]=\"layout94\"\r\n        [isPanel]=\"false\"\r\n        [isRoot]=\"true\"\r\n    ></bsu-ly-layout-container-of-root>\r\n</ng-template>\r\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\r\n    <bnrc-dynamic-form-component\r\n        [component]=\"component\"\r\n        [layoutActionsTemplateRef]=\"layoutActionsTemplateRef\"\r\n        [removeContentPadding]=\"removeContentPadding\"\r\n        [breadCrumbs]=\"breadCrumbs\"\r\n        [description]=\"description\"\r\n        [title]=\"title\"\r\n        [subtitle]=\"subtitle\"\r\n        [toolbarItems]=\"toolbarItems\"\r\n        [layoutActions]=\"layoutActions\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [facetList]=\"facetList\"\r\n        [settings]=\"component.Settings\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowPanelUi]=\"workflowPanelUi\"\r\n        [isMobile]=\"isMobile\"\r\n        [mo]=\"mo\"\r\n        [layout94]=\"layout94\"\r\n        [context]=\"context\"\r\n        [rtl]=\"rtl\"\r\n        [fieldDict]=\"fieldDict\"\r\n        [mask]=\"mask\"\r\n        [dirValue]=\"dirValue\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [modernTabs]=\"modernTabs\"\r\n        [avatar]=\"avatar\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-dynamic-form-component>\r\n</ng-template>\r\n<ng-template #closeForm>\r\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\r\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n    </button>\r\n</ng-template>\r\n<ng-template #fullscreenForm>\r\n    @if (canFullscreen) {\r\n    <button\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        (click)=\"fullscreenRequest.emit()\"\r\n        [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\r\n    ></button>\r\n    }\r\n</ng-template>\r\n<ng-template #layoutActionsTemplateRef>\r\n    <bsu-layout-actions\r\n        [canSend]=\"canSend\"\r\n        [buttons]=\"layoutActions\"\r\n        [isMobile]=\"isMobile\"\r\n        [landscape]=\"landscape\"\r\n        [standalone]=\"standalone\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [rtl]=\"rtl\"\r\n        (toolClick)=\"toolbarClick.emit($event)\"\r\n        (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\r\n    >\r\n    </bsu-layout-actions>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto;width:100%}:host>fd-dynamic-page[contentispage=false]:not([ismobile=true]) ::ng-deep fd-dynamic-page-header .fd-dynamic-page__title{max-width:50svw}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .facet-progress .fd-progress-indicator__container,:host ::ng-deep .facet-progress .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page ::ng-deep>article>.fd-scrollbar{height:inherit}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container,.no-pin ::ng-deep .fd-dynamic-page__collapsible-header{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "layoutActionsTemplateRef", "workflowButtons", "layout94", "footerDesign", "settings", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "value"], outputs: ["events"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i3$7.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$5.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: "component", type: i5$6.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$6.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i9$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i9$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i9$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i9$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i9$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i9$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i9$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i9$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i8$1.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "headingLevel", "id", "alignEnd"] }, { kind: "component", type: i8$1.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i8$1.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i2$5.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i5$8.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10$1.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: i14.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["class", "name", "ariaLabel", "ariaLabelledBy", "disabled", "displayMode", "nonInteractive", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator"], outputs: ["ratingChanged"] }, { kind: "component", type: i5$5.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i8.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i12$1.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: i18.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i18.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.HeaderFacetValuePipe, name: "facetValue" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FundamentalDynamicFormComponent, decorators: [{
             type: Component,
@@ -11030,7 +11045,7 @@ class LayoutWizardComponent extends FormPropsBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutWizardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LayoutWizardComponent, selector: "bsu-layout-wizard", inputs: { root: "root", parentContentRef: "parentContentRef", selectedIndex: "selectedIndex", maxContentWidth: "maxContentWidth", minTabHeight: "minTabHeight" }, viewQueries: [{ propertyName: "layoutRef", first: true, predicate: ["layoutRef"], descendants: true }, { propertyName: "containerRootRef", first: true, predicate: ["containerRootRef"], descendants: true, read: ElementRef }, { propertyName: "wizardEl", first: true, predicate: WizardComponent, descendants: true, read: ElementRef }, { propertyName: "_wizardComponent", first: true, predicate: WizardComponent, descendants: true, read: ElementRef }, { propertyName: "wizardStepComponents", predicate: WizardStepComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-wizard [appendToWizard]=\"false\">\r\n    <fd-wizard-navigation>\r\n        <ul fd-wizard-progress-bar [size]=\"wizardSize\" role=\"list\" aria-label=\"Wizard Steps\">\r\n            @for (step of modernTabs; track step; let i = $index) {\r\n            <li\r\n                fd-wizard-step\r\n                [status]=\"arrStatus[i]\"\r\n                (statusChange)=\"onStatusChange(i, $event)\"\r\n                [label]=\"step.Title || '' | bbbTranslate\"\r\n                (click)=\"onStepClick(i, $event)\"\r\n                [class.disable-click]=\"preventStepByClick\"\r\n            >\r\n                <fd-wizard-step-indicator>{{ i + 1 }}</fd-wizard-step-indicator>\r\n                <fd-wizard-content>\r\n                    <div class=\"fix-form-content\">\r\n                        <div\r\n                            #layoutRef\r\n                            [style.max-width]=\"maxContentWidth ? maxContentWidth + 'px' : 'auto'\"\r\n                            [style.min-height.px]=\"minTabHeight ? minTabHeight : 400\"\r\n                        >\r\n                            @if (i === selectedIndex) {\r\n                            <bsu-ly-layout-container-of-root\r\n                                #containerRootRef\r\n                                class=\"content-wizard\"\r\n                                [config]=\"step\"\r\n                                [isPanel]=\"false\"\r\n                                [isRoot]=\"true\"\r\n                            ></bsu-ly-layout-container-of-root>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </fd-wizard-content>\r\n            </li>\r\n            }\r\n        </ul>\r\n    </fd-wizard-navigation>\r\n    @if(showFooter){\r\n    <div fd-bar barDesign=\"footer\">\r\n        <div fd-bar-right>\r\n            <fd-button-bar label=\"Save\"></fd-button-bar>\r\n            <fd-button-bar label=\"Cancel\"></fd-button-bar>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    }\r\n</fd-wizard>\r\n", styles: [":host{width:100%;height:100%;display:block}:host ::ng-deep .fd-wizard-container-wrapper{background:var(--fdWizard_Content_Default_Background)}:host ::ng-deep fd-dynamic-page-content{padding:0!important}.fd-wizard__progress-bar{border-bottom:1px solid #e4e4e4;box-shadow:none;z-index:0}.fix-form-content{display:flex;justify-content:center;align-items:flex-start;overflow-y:auto}.fix-form-content>div{flex-grow:1;position:relative}.content-wizard{position:absolute}@media (max-width: 767px){.content-wizard{padding:0 10px}}li.disable-click ::ng-deep *{pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$7.WizardComponent, selector: "fd-wizard", inputs: ["appendToWizard", "contentHeight", "responsivePaddings", "displaySummaryStep", "ariaLabel"] }, { kind: "component", type: i3$7.WizardNavigationComponent, selector: "fd-wizard-navigation", inputs: ["ariaLabel"] }, { kind: "directive", type: i3$7.WizardProgressBarDirective, selector: "[fd-wizard-progress-bar]", inputs: ["size"] }, { kind: "component", type: i3$7.WizardStepComponent, selector: "[fd-wizard-step]", inputs: ["ariaLabel", "ariaRoleDecription", "status", "branching", "label", "optionalText", "isSummary", "stepClickValidator"], outputs: ["statusChange", "stepClicked", "stepIndicatorItemClicked"] }, { kind: "component", type: i3$7.WizardStepIndicatorComponent, selector: "fd-wizard-step-indicator", inputs: ["glyph", "glyphFont"], outputs: ["stepIndicatorItemClicked"] }, { kind: "component", type: i3$7.WizardContentComponent, selector: "fd-wizard-content", inputs: ["contentBackground", "size"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LayoutWizardComponent, selector: "bsu-layout-wizard", inputs: { root: "root", parentContentRef: "parentContentRef", selectedIndex: "selectedIndex", maxContentWidth: "maxContentWidth", minTabHeight: "minTabHeight" }, viewQueries: [{ propertyName: "layoutRef", first: true, predicate: ["layoutRef"], descendants: true }, { propertyName: "containerRootRef", first: true, predicate: ["containerRootRef"], descendants: true, read: ElementRef }, { propertyName: "wizardEl", first: true, predicate: WizardComponent, descendants: true, read: ElementRef }, { propertyName: "_wizardComponent", first: true, predicate: WizardComponent, descendants: true, read: ElementRef }, { propertyName: "wizardStepComponents", predicate: WizardStepComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-wizard [appendToWizard]=\"false\">\r\n    <fd-wizard-navigation>\r\n        <ul fd-wizard-progress-bar [size]=\"wizardSize\" role=\"list\" aria-label=\"Wizard Steps\">\r\n            @for (step of modernTabs; track step; let i = $index) {\r\n            <li\r\n                fd-wizard-step\r\n                [status]=\"arrStatus[i]\"\r\n                (statusChange)=\"onStatusChange(i, $event)\"\r\n                [label]=\"step.Title || '' | bbbTranslate\"\r\n                (click)=\"onStepClick(i, $event)\"\r\n                [class.disable-click]=\"preventStepByClick\"\r\n            >\r\n                <fd-wizard-step-indicator>{{ i + 1 }}</fd-wizard-step-indicator>\r\n                <fd-wizard-content>\r\n                    <div class=\"fix-form-content\">\r\n                        <div\r\n                            #layoutRef\r\n                            [style.max-width]=\"maxContentWidth ? maxContentWidth + 'px' : 'auto'\"\r\n                            [style.min-height.px]=\"minTabHeight ? minTabHeight : 400\"\r\n                        >\r\n                            @if (i === selectedIndex) {\r\n                            <bsu-ly-layout-container-of-root\r\n                                #containerRootRef\r\n                                class=\"content-wizard\"\r\n                                [config]=\"step\"\r\n                                [isPanel]=\"false\"\r\n                                [isRoot]=\"true\"\r\n                            ></bsu-ly-layout-container-of-root>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </fd-wizard-content>\r\n            </li>\r\n            }\r\n        </ul>\r\n    </fd-wizard-navigation>\r\n    @if(showFooter){\r\n    <div fd-bar barDesign=\"footer\">\r\n        <div fd-bar-right>\r\n            <fd-button-bar label=\"Save\"></fd-button-bar>\r\n            <fd-button-bar label=\"Cancel\"></fd-button-bar>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    }\r\n</fd-wizard>\r\n", styles: [":host{width:100%;height:100%;display:block}:host ::ng-deep .fd-wizard-container-wrapper{background:var(--fdWizard_Content_Default_Background)}:host ::ng-deep fd-dynamic-page-content{padding:0!important}.fd-wizard__progress-bar{border-bottom:1px solid #e4e4e4;box-shadow:none;z-index:0}.fix-form-content{display:flex;justify-content:center;align-items:flex-start;overflow-y:auto}.fix-form-content>div{flex-grow:1;position:relative}.content-wizard{position:absolute}@media (max-width: 767px){.content-wizard{padding:0 10px}}li.disable-click ::ng-deep *{pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$8.WizardComponent, selector: "fd-wizard", inputs: ["appendToWizard", "contentHeight", "responsivePaddings", "displaySummaryStep", "ariaLabel"] }, { kind: "component", type: i3$8.WizardNavigationComponent, selector: "fd-wizard-navigation", inputs: ["ariaLabel"] }, { kind: "directive", type: i3$8.WizardProgressBarDirective, selector: "[fd-wizard-progress-bar]", inputs: ["size"] }, { kind: "component", type: i3$8.WizardStepComponent, selector: "[fd-wizard-step]", inputs: ["ariaLabel", "ariaRoleDecription", "status", "branching", "label", "optionalText", "isSummary", "stepClickValidator"], outputs: ["statusChange", "stepClicked", "stepIndicatorItemClicked"] }, { kind: "component", type: i3$8.WizardStepIndicatorComponent, selector: "fd-wizard-step-indicator", inputs: ["glyph", "glyphFont"], outputs: ["stepIndicatorItemClicked"] }, { kind: "component", type: i3$8.WizardContentComponent, selector: "fd-wizard-content", inputs: ["contentBackground", "size"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutWizardComponent, decorators: [{
             type: Component,
@@ -12122,11 +12137,11 @@ class UiNumIntUiComponent extends NumberBaseComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiNumIntUiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UiNumIntUiComponent, 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]=\"Setting.IsPassword ? 'password' : 'text'\"\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", 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$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UiNumIntUiComponent, 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", 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$2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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]=\"Setting.IsPassword ? 'password' : 'text'\"\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", 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.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", styles: [":host{display:block}.number-input{display:block}\n"] }]
         }], propDecorators: { inputRef: [{
                 type: ViewChild,
                 args: ['inputRef', { read: ElementRef, static: true }]
@@ -12823,11 +12838,11 @@ class UiReadOnlyFieldComponent extends FieldBaseComponent {
         this._cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiReadOnlyFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UiReadOnlyFieldComponent, selector: "bsu-ui-read-only-field", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"controlTpl; context: { maxlines: parameters?.MaxLines }\"></ng-container>\r\n\r\n@if (parameters?.ShowCopy && text) {\r\n<button fd-button glyph=\"copy\" [fdCompact] fdType=\"transparent\" [copy]=\"text | bbbTranslate\"></button>\r\n}\r\n<!-- <fd-popover *ngIf=\"text\">\r\n<fd-popover-control>\r\n  <button\r\n    *ngIf=\"isEllipsis\"\r\n    fd-button\r\n    glyph=\"overflow\"\r\n    [fdCompact]\r\n    fdType=\"transparent\"\r\n    [title]=\"text | bbbTranslate\"\r\n  ></button>\r\n</fd-popover-control>\r\n<fd-popover-body>\r\n  <ng-container *ngTemplateOutlet=\"controlTpl\"></ng-container>\r\n</fd-popover-body>\r\n</fd-popover>\r\n-->\r\n<ng-template #controlTpl let-maxlines>\r\n    <fd-text\r\n        style=\"height: auto !important\"\r\n        [text]=\"!text ? '' : (text | bbbTranslate)\"\r\n        [class.bold]=\"text !== null && text !== '' && !parameters?.NotBold\"\r\n        [whitespaces]=\"true\"\r\n        [maxLines]=\"maxlines ? maxlines : 0\"\r\n        [style.color]=\"parameters?.ColorValue ? parameters?.ColorValue : null\"\r\n        class=\"fd-input\"\r\n        [attr.readonly]=\"true\"\r\n    ></fd-text>\r\n</ng-template>\r\n", styles: [":host{display:flex;width:100%;min-height:var(--sapElement_Height);align-items:center;min-width:2.75rem}:host.isMobile{height:auto}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}fd-text ::ng-deep p{color:inherit}fd-text ::ng-deep p span{color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CopyDirective, selector: "[copy]", inputs: ["copy"] }, { kind: "directive", type: i3$4.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$5.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UiReadOnlyFieldComponent, selector: "bsu-ui-read-only-field", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"controlTpl; context: { maxlines: parameters?.MaxLines }\"></ng-container>\r\n\r\n@if (parameters?.ShowCopy && text) {\r\n<button fd-button glyph=\"copy\" [fdCompact] fdType=\"transparent\" [copy]=\"text | bbbTranslate\"></button>\r\n}\r\n<!-- <fd-popover *ngIf=\"text\">\r\n<fd-popover-control>\r\n  <button\r\n    *ngIf=\"isEllipsis\"\r\n    fd-button\r\n    glyph=\"overflow\"\r\n    [fdCompact]\r\n    fdType=\"transparent\"\r\n    [title]=\"text | bbbTranslate\"\r\n  ></button>\r\n</fd-popover-control>\r\n<fd-popover-body>\r\n  <ng-container *ngTemplateOutlet=\"controlTpl\"></ng-container>\r\n</fd-popover-body>\r\n</fd-popover>\r\n-->\r\n<ng-template #controlTpl let-maxlines>\r\n    <fd-text\r\n        style=\"height: auto !important\"\r\n        [text]=\"!text ? '' : (text | bbbTranslate)\"\r\n        [class.bold]=\"parameters?.NotBold === false\"\r\n        [whitespaces]=\"true\"\r\n        [maxLines]=\"maxlines ? maxlines : 0\"\r\n        [style.color]=\"parameters?.ColorValue ? parameters?.ColorValue : null\"\r\n        class=\"fd-input\"\r\n        [attr.readonly]=\"true\"\r\n    ></fd-text>\r\n</ng-template>\r\n", styles: [":host{display:flex;width:100%;align-items:center}:host.isMobile{height:auto}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}fd-text{display:flex;align-items:center}fd-text ::ng-deep p{color:inherit}fd-text ::ng-deep p span{color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CopyDirective, selector: "[copy]", inputs: ["copy"] }, { kind: "directive", type: i3$4.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$5.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiReadOnlyFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-read-only-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngTemplateOutlet=\"controlTpl; context: { maxlines: parameters?.MaxLines }\"></ng-container>\r\n\r\n@if (parameters?.ShowCopy && text) {\r\n<button fd-button glyph=\"copy\" [fdCompact] fdType=\"transparent\" [copy]=\"text | bbbTranslate\"></button>\r\n}\r\n<!-- <fd-popover *ngIf=\"text\">\r\n<fd-popover-control>\r\n  <button\r\n    *ngIf=\"isEllipsis\"\r\n    fd-button\r\n    glyph=\"overflow\"\r\n    [fdCompact]\r\n    fdType=\"transparent\"\r\n    [title]=\"text | bbbTranslate\"\r\n  ></button>\r\n</fd-popover-control>\r\n<fd-popover-body>\r\n  <ng-container *ngTemplateOutlet=\"controlTpl\"></ng-container>\r\n</fd-popover-body>\r\n</fd-popover>\r\n-->\r\n<ng-template #controlTpl let-maxlines>\r\n    <fd-text\r\n        style=\"height: auto !important\"\r\n        [text]=\"!text ? '' : (text | bbbTranslate)\"\r\n        [class.bold]=\"text !== null && text !== '' && !parameters?.NotBold\"\r\n        [whitespaces]=\"true\"\r\n        [maxLines]=\"maxlines ? maxlines : 0\"\r\n        [style.color]=\"parameters?.ColorValue ? parameters?.ColorValue : null\"\r\n        class=\"fd-input\"\r\n        [attr.readonly]=\"true\"\r\n    ></fd-text>\r\n</ng-template>\r\n", styles: [":host{display:flex;width:100%;min-height:var(--sapElement_Height);align-items:center;min-width:2.75rem}:host.isMobile{height:auto}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}fd-text ::ng-deep p{color:inherit}fd-text ::ng-deep p span{color:inherit}\n"] }]
+            args: [{ selector: 'bsu-ui-read-only-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngTemplateOutlet=\"controlTpl; context: { maxlines: parameters?.MaxLines }\"></ng-container>\r\n\r\n@if (parameters?.ShowCopy && text) {\r\n<button fd-button glyph=\"copy\" [fdCompact] fdType=\"transparent\" [copy]=\"text | bbbTranslate\"></button>\r\n}\r\n<!-- <fd-popover *ngIf=\"text\">\r\n<fd-popover-control>\r\n  <button\r\n    *ngIf=\"isEllipsis\"\r\n    fd-button\r\n    glyph=\"overflow\"\r\n    [fdCompact]\r\n    fdType=\"transparent\"\r\n    [title]=\"text | bbbTranslate\"\r\n  ></button>\r\n</fd-popover-control>\r\n<fd-popover-body>\r\n  <ng-container *ngTemplateOutlet=\"controlTpl\"></ng-container>\r\n</fd-popover-body>\r\n</fd-popover>\r\n-->\r\n<ng-template #controlTpl let-maxlines>\r\n    <fd-text\r\n        style=\"height: auto !important\"\r\n        [text]=\"!text ? '' : (text | bbbTranslate)\"\r\n        [class.bold]=\"parameters?.NotBold === false\"\r\n        [whitespaces]=\"true\"\r\n        [maxLines]=\"maxlines ? maxlines : 0\"\r\n        [style.color]=\"parameters?.ColorValue ? parameters?.ColorValue : null\"\r\n        class=\"fd-input\"\r\n        [attr.readonly]=\"true\"\r\n    ></fd-text>\r\n</ng-template>\r\n", styles: [":host{display:flex;width:100%;align-items:center}:host.isMobile{height:auto}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}fd-text{display:flex;align-items:center}fd-text ::ng-deep p{color:inherit}fd-text ::ng-deep p span{color:inherit}\n"] }]
         }] });
 
 class LyLayoutPanelComponent extends LayoutPanelBaseComponent {
@@ -12878,11 +12893,11 @@ class LyLayoutPanelComponent extends LayoutPanelBaseComponent {
         this.setDisplay();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LyLayoutPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LyLayoutPanelComponent, selector: "bsu-ly-layout-panel", inputs: { renderItems: "renderItems", isRoot: "isRoot", hideTitle: "hideTitle" }, host: { properties: { "attr.maxLabelWidth": "this.maxLabelWidth", "style.flex": "this.flex", "style.display": "this.display", "attr.title": "this.title" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\r\n<fd-panel\r\n    [fixed]=\"!config.ExpandButtonVisible\"\r\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\r\n    [attr.maxWidth]=\"maxWidth\"\r\n    [expanded]=\"config.Expanded\"\r\n>\r\n    @if (!hideTitle) {\r\n    <h5 fd-panel-title>\r\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\r\n            @if (config.FontIcon) {\r\n            <i\r\n                style=\"font-size: 1.5rem\"\r\n                [style.color]=\"config.IconColor || null\"\r\n                [class]=\"'sap-icon--' + config.FontIcon\"\r\n            ></i>\r\n            }\r\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\r\n        </div>\r\n    </h5>\r\n    }\r\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\r\n        @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutPanelComponent',\r\n                    selector: 'bsu-ly-tab-container'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n        } @case ('Ly.LayoutPanel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutPanelComponent',\r\n                    selector: 'bsu-ly-layout-panel'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n        } @case ('Ly.LayoutContainer') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutContainerComponent',\r\n                    selector: 'bsu-ly-layout-container'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n        } @case ('Ly.EmptySpace') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n        } @case ('Ly.SimpleLabel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LySimpleLabelComponent',\r\n                    selector: 'bsu-ly-simple-label'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n        } @case ('Ly.LayoutLine') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n        } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-ly-horizontal-layout',\r\n                    name: 'LyLayoutHorizontalComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n        } @else {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-ly-vertical-layout',\r\n                    name: 'LyLayoutVerticalComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n        } } @case ('Ly.LayoutControl') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-layout-control',\r\n                    name: 'LayoutControlComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n        } } }\r\n        <ng-template\r\n            #dynamicLayout\r\n            let-config\r\n            let-selector=\"selector\"\r\n            let-maxLabelWidth=\"maxLabelWidth\"\r\n            let-name=\"name\"\r\n        >\r\n            <bnrc-dynamic-layout\r\n                [config]=\"config\"\r\n                [selector]=\"selector\"\r\n                [name]=\"name\"\r\n                [module]=\"'BarsaSapUi'\"\r\n                [moduleFileName]=\"'BarsaSapUi'\"\r\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n                [isSearchPanel]=\"isSearchPanel\"\r\n                (events)=\"onEvents($event)\"\r\n            >\r\n            </bnrc-dynamic-layout>\r\n        </ng-template>\r\n    </div>\r\n</fd-panel>\r\n}\r\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "component", type: i3$8.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$8.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LyLayoutPanelComponent, selector: "bsu-ly-layout-panel", inputs: { renderItems: "renderItems", isRoot: "isRoot", hideTitle: "hideTitle" }, host: { properties: { "attr.maxLabelWidth": "this.maxLabelWidth", "style.flex": "this.flex", "style.display": "this.display", "attr.title": "this.title" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\r\n<fd-panel\r\n    [fixed]=\"!config.ExpandButtonVisible\"\r\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\r\n    [attr.maxWidth]=\"maxWidth\"\r\n    [expanded]=\"config.Expanded\"\r\n>\r\n    @if (!hideTitle) {\r\n    <h5 fd-panel-title>\r\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\r\n            @if (config.FontIcon) {\r\n            <i\r\n                style=\"font-size: 1.5rem\"\r\n                [style.color]=\"config.IconColor || null\"\r\n                [class]=\"'sap-icon--' + config.FontIcon\"\r\n            ></i>\r\n            }\r\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\r\n        </div>\r\n    </h5>\r\n    }\r\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\r\n        @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutPanelComponent',\r\n                    selector: 'bsu-ly-tab-container'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n        } @case ('Ly.LayoutPanel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutPanelComponent',\r\n                    selector: 'bsu-ly-layout-panel'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n        } @case ('Ly.LayoutContainer') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutContainerComponent',\r\n                    selector: 'bsu-ly-layout-container'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n        } @case ('Ly.EmptySpace') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n        } @case ('Ly.SimpleLabel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LySimpleLabelComponent',\r\n                    selector: 'bsu-ly-simple-label'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n        } @case ('Ly.LayoutLine') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n        } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-ly-horizontal-layout',\r\n                    name: 'LyLayoutHorizontalComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n        } @else {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-ly-vertical-layout',\r\n                    name: 'LyLayoutVerticalComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n        } } @case ('Ly.LayoutControl') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-layout-control',\r\n                    name: 'LayoutControlComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n        } } }\r\n        <ng-template\r\n            #dynamicLayout\r\n            let-config\r\n            let-selector=\"selector\"\r\n            let-maxLabelWidth=\"maxLabelWidth\"\r\n            let-name=\"name\"\r\n        >\r\n            <bnrc-dynamic-layout\r\n                [config]=\"config\"\r\n                [selector]=\"selector\"\r\n                [name]=\"name\"\r\n                [module]=\"'BarsaSapUi'\"\r\n                [moduleFileName]=\"'BarsaSapUi'\"\r\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n                [isSearchPanel]=\"isSearchPanel\"\r\n                (events)=\"onEvents($event)\"\r\n            >\r\n            </bnrc-dynamic-layout>\r\n        </ng-template>\r\n    </div>\r\n</fd-panel>\r\n}\r\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start;margin:.2rem 0}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "component", type: i3$9.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$9.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$9.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LyLayoutPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-layout-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "@if (visible) {\r\n<fd-panel\r\n    [fixed]=\"!config.ExpandButtonVisible\"\r\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\r\n    [attr.maxWidth]=\"maxWidth\"\r\n    [expanded]=\"config.Expanded\"\r\n>\r\n    @if (!hideTitle) {\r\n    <h5 fd-panel-title>\r\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\r\n            @if (config.FontIcon) {\r\n            <i\r\n                style=\"font-size: 1.5rem\"\r\n                [style.color]=\"config.IconColor || null\"\r\n                [class]=\"'sap-icon--' + config.FontIcon\"\r\n            ></i>\r\n            }\r\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\r\n        </div>\r\n    </h5>\r\n    }\r\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\r\n        @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutPanelComponent',\r\n                    selector: 'bsu-ly-tab-container'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n        } @case ('Ly.LayoutPanel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutPanelComponent',\r\n                    selector: 'bsu-ly-layout-panel'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n        } @case ('Ly.LayoutContainer') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutContainerComponent',\r\n                    selector: 'bsu-ly-layout-container'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n        } @case ('Ly.EmptySpace') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n        } @case ('Ly.SimpleLabel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LySimpleLabelComponent',\r\n                    selector: 'bsu-ly-simple-label'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n        } @case ('Ly.LayoutLine') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n        } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-ly-horizontal-layout',\r\n                    name: 'LyLayoutHorizontalComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n        } @else {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-ly-vertical-layout',\r\n                    name: 'LyLayoutVerticalComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n        } } @case ('Ly.LayoutControl') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-layout-control',\r\n                    name: 'LayoutControlComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n        } } }\r\n        <ng-template\r\n            #dynamicLayout\r\n            let-config\r\n            let-selector=\"selector\"\r\n            let-maxLabelWidth=\"maxLabelWidth\"\r\n            let-name=\"name\"\r\n        >\r\n            <bnrc-dynamic-layout\r\n                [config]=\"config\"\r\n                [selector]=\"selector\"\r\n                [name]=\"name\"\r\n                [module]=\"'BarsaSapUi'\"\r\n                [moduleFileName]=\"'BarsaSapUi'\"\r\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n                [isSearchPanel]=\"isSearchPanel\"\r\n                (events)=\"onEvents($event)\"\r\n            >\r\n            </bnrc-dynamic-layout>\r\n        </ng-template>\r\n    </div>\r\n</fd-panel>\r\n}\r\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"] }]
+            args: [{ selector: 'bsu-ly-layout-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "@if (visible) {\r\n<fd-panel\r\n    [fixed]=\"!config.ExpandButtonVisible\"\r\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\r\n    [attr.maxWidth]=\"maxWidth\"\r\n    [expanded]=\"config.Expanded\"\r\n>\r\n    @if (!hideTitle) {\r\n    <h5 fd-panel-title>\r\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\r\n            @if (config.FontIcon) {\r\n            <i\r\n                style=\"font-size: 1.5rem\"\r\n                [style.color]=\"config.IconColor || null\"\r\n                [class]=\"'sap-icon--' + config.FontIcon\"\r\n            ></i>\r\n            }\r\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\r\n        </div>\r\n    </h5>\r\n    }\r\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\r\n        @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutPanelComponent',\r\n                    selector: 'bsu-ly-tab-container'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n        } @case ('Ly.LayoutPanel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutPanelComponent',\r\n                    selector: 'bsu-ly-layout-panel'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n        } @case ('Ly.LayoutContainer') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LyLayoutContainerComponent',\r\n                    selector: 'bsu-ly-layout-container'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n        } @case ('Ly.EmptySpace') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n        } @case ('Ly.SimpleLabel') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    name: 'LySimpleLabelComponent',\r\n                    selector: 'bsu-ly-simple-label'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n        } @case ('Ly.LayoutLine') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n        } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-ly-horizontal-layout',\r\n                    name: 'LyLayoutHorizontalComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n        } @else {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-ly-vertical-layout',\r\n                    name: 'LyLayoutVerticalComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n        } } @case ('Ly.LayoutControl') {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                dynamicLayout;\r\n                context: {\r\n                    $implicit: item,\r\n                    selector: 'bsu-layout-control',\r\n                    name: 'LayoutControlComponent'\r\n                }\r\n            \"\r\n        ></ng-container>\r\n        <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n        } } }\r\n        <ng-template\r\n            #dynamicLayout\r\n            let-config\r\n            let-selector=\"selector\"\r\n            let-maxLabelWidth=\"maxLabelWidth\"\r\n            let-name=\"name\"\r\n        >\r\n            <bnrc-dynamic-layout\r\n                [config]=\"config\"\r\n                [selector]=\"selector\"\r\n                [name]=\"name\"\r\n                [module]=\"'BarsaSapUi'\"\r\n                [moduleFileName]=\"'BarsaSapUi'\"\r\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n                [isSearchPanel]=\"isSearchPanel\"\r\n                (events)=\"onEvents($event)\"\r\n            >\r\n            </bnrc-dynamic-layout>\r\n        </ng-template>\r\n    </div>\r\n</fd-panel>\r\n}\r\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start;margin:.2rem 0}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"] }]
         }], propDecorators: { renderItems: [{
                 type: Input
             }], isRoot: [{
@@ -12984,7 +12999,7 @@ class UiSimpleComboComponent extends FieldBaseComponent {
     ngOnInit() {
         super.ngOnInit();
         this.popupMode = this.parameters?.PopupMode;
-        if (this.value) {
+        if (typeof this.value !== 'undefined') {
             this.tvalue = this.context.store.data[this.context.store.root].find((c) => c.id === this.value);
         }
     }
@@ -13059,7 +13074,7 @@ class UiSwitchButtonComponent extends UiCheckBoxComponent {
         this.semantic = this.parameters?.Semantic;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiSwitchButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UiSwitchButtonComponent, selector: "bsu-ui-switch-button", usesInheritance: true, ngImport: i0, template: "<fd-switch\n    [activeText]=\"showText ? activeText : ''\"\n    [inactiveText]=\"showText ? inactiveText : ''\"\n    (change)=\"onValueChange()\"\n    [checked]=\"value\"\n    [semantic]=\"semantic\"\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\n></fd-switch>\n", styles: [""], dependencies: [{ kind: "component", type: i1$8.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UiSwitchButtonComponent, selector: "bsu-ui-switch-button", usesInheritance: true, ngImport: i0, template: "<fd-switch\n    [activeText]=\"showText ? activeText : ''\"\n    [inactiveText]=\"showText ? inactiveText : ''\"\n    (change)=\"onValueChange()\"\n    [checked]=\"value\"\n    [semantic]=\"semantic\"\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\n></fd-switch>\n", styles: [""], dependencies: [{ kind: "component", type: i1$7.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiSwitchButtonComponent, decorators: [{
             type: Component,
@@ -13632,7 +13647,7 @@ class BarsaPishnamayeshPayamComponent extends FieldBaseComponent {
                 useFactory: getDateService$1,
                 deps: [LogService]
             }
-        ], usesInheritance: true, ngImport: i0, template: "@if (data) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        showPayamClass;\r\n        context: {\r\n            $implicit: data,\r\n            primary: !data?.$details?.length,\r\n            isFirst: true\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n}\r\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            namayeshPayam;\r\n            context: {\r\n                $implicit: data.payam.Subject,\r\n                mailNoText: data.payam.MailNoText,\r\n                fromText: data.payam.FromText,\r\n                toText: data.$toText,\r\n                importance: data.$importance,\r\n                readDate: data.$readDate,\r\n                sendDate: data.$sendDate,\r\n                ccText: data.$ccText,\r\n                bccText: data.$bccText,\r\n                accessLevel: data.$accessLevel,\r\n                content: data.$content,\r\n                fromPhoto: data.$fromPhoto,\r\n                details: data.$details,\r\n                attachments: data.$attachments,\r\n                todo: data.$todo,\r\n                customText: data.payam.CustomText,\r\n                primary: primary,\r\n                isFirst: isFirst\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #namayeshPayam\r\n    let-subject\r\n    let-mailNoText=\"mailNoText\"\r\n    let-content=\"content\"\r\n    let-fromText=\"fromText\"\r\n    let-toText=\"toText\"\r\n    let-importance=\"importance\"\r\n    let-readDate=\"readDate\"\r\n    let-sendDate=\"sendDate\"\r\n    let-ccText=\"ccText\"\r\n    let-bccText=\"bccText\"\r\n    let-fromPhoto=\"fromPhoto\"\r\n    let-details=\"details\"\r\n    let-accessLevel=\"accessLevel\"\r\n    let-primary=\"primary\"\r\n    let-isFirst=\"isFirst\"\r\n    let-attachments=\"attachments\"\r\n    let-todo=\"todo\"\r\n    let-customText=\"customText\"\r\n>\r\n    <fd-card cardType=\"object\">\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <fd-avatar\r\n                    [image]=\"fromPhoto\"\r\n                    [circle]=\"true\"\r\n                    size=\"s\"\r\n                    [ariaLabel]=\"fromText\"\r\n                    [label]=\"fromText\"\r\n                    [title]=\"fromText\"\r\n                ></fd-avatar>\r\n                <div fd-card-title class=\"header-fields\">\r\n                    <h5 fd-title>\r\n                        <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\r\n                    </h5>\r\n                    <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\r\n                </div>\r\n                <div fd-card-subtitle>\r\n                    <h5 fd-title>\r\n                        {{ subject }} @if(mailNoText){ <span>({{ mailNoText }})</span>}\r\n                    </h5>\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Recievers' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of toText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </div>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content>\r\n            <fd-panel [expanded]=\"isFirst\">\r\n                <div fd-panel-title id=\"panel-expandable-title-1\">\r\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\r\n                    <div class=\"payamIcons\">\r\n                        @if (importance.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ importance.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (accessLevel.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (todo) {\r\n                        <fd-info-label [label]=\"todo.text\" [color]=\"todo.color\" [title]=\"todo.text\"></fd-info-label>\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <div fd-panel-content>\r\n                    @if (customText) {\r\n                    <div>\r\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\r\n                            {{ customText }}\r\n                        </fd-message-strip>\r\n                    </div>\r\n                    }\r\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\r\n\r\n                    @if (attachments?.length) {\r\n                    <div class=\"file-viewer-attachments\">\r\n                        @for (file of attachments; track file) { @if (!file.IsDeleted) {\r\n                        <bsu-file-viewer-popover\r\n                            [file]=\"file\"\r\n                            [files]=\"attachments\"\r\n                            [deviceSize]=\"(deviceSize$ | async)!!\"\r\n                            [canDownload]=\"true\"\r\n                            [disableRemove]=\"true\"\r\n                        ></bsu-file-viewer-popover>\r\n                        } } @if (attachments.length > 1) {\r\n                        <button\r\n                            fd-button\r\n                            [title]=\"'Download' | bbbTranslate\"\r\n                            [glyph]=\"'download'\"\r\n                            downloadFiles\r\n                            [files]=\"attachments\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                    }\r\n                    <div class=\"readAt\">\r\n                        @if (readDate) {\r\n                        <fd-object-identifier [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\">\r\n                        </fd-object-identifier>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-panel>\r\n        </fd-card-content>\r\n        <!-- <fd-card-footer>\r\n    <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\r\n  </fd-card-footer> -->\r\n    </fd-card>\r\n    @for (detail of details; track detail) {\r\n    <ng-contianer>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                showPayamClass;\r\n                context: {\r\n                    $implicit: detail\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n    </ng-contianer>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start;height:auto;max-height:initial}:host ::ng-deep .fd-card__subtitle h5{white-space:initial!important}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}:host ::ng-deep ol{list-style:auto;margin:unset;padding:revert}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media (max-width: 410px){h5{max-width:210px}}@media (max-width: 1040px){.h5{max-width:600px}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$5.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: "component", type: i2$4.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$4.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: i5$4.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i5$4.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i5$4.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$4.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i5$4.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i6$5.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id", "preventClick"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i6.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i2$5.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i11.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["description", "bold", "medium"] }, { kind: "component", type: i3$8.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$8.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { 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: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (data) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        showPayamClass;\r\n        context: {\r\n            $implicit: data,\r\n            primary: !data?.$details?.length,\r\n            isFirst: true\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n}\r\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            namayeshPayam;\r\n            context: {\r\n                $implicit: data.payam.Subject,\r\n                mailNoText: data.payam.MailNoText,\r\n                fromText: data.payam.FromText,\r\n                toText: data.$toText,\r\n                importance: data.$importance,\r\n                readDate: data.$readDate,\r\n                sendDate: data.$sendDate,\r\n                ccText: data.$ccText,\r\n                bccText: data.$bccText,\r\n                accessLevel: data.$accessLevel,\r\n                content: data.$content,\r\n                fromPhoto: data.$fromPhoto,\r\n                details: data.$details,\r\n                attachments: data.$attachments,\r\n                todo: data.$todo,\r\n                customText: data.payam.CustomText,\r\n                primary: primary,\r\n                isFirst: isFirst\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #namayeshPayam\r\n    let-subject\r\n    let-mailNoText=\"mailNoText\"\r\n    let-content=\"content\"\r\n    let-fromText=\"fromText\"\r\n    let-toText=\"toText\"\r\n    let-importance=\"importance\"\r\n    let-readDate=\"readDate\"\r\n    let-sendDate=\"sendDate\"\r\n    let-ccText=\"ccText\"\r\n    let-bccText=\"bccText\"\r\n    let-fromPhoto=\"fromPhoto\"\r\n    let-details=\"details\"\r\n    let-accessLevel=\"accessLevel\"\r\n    let-primary=\"primary\"\r\n    let-isFirst=\"isFirst\"\r\n    let-attachments=\"attachments\"\r\n    let-todo=\"todo\"\r\n    let-customText=\"customText\"\r\n>\r\n    <fd-card cardType=\"object\">\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <fd-avatar\r\n                    [image]=\"fromPhoto\"\r\n                    [circle]=\"true\"\r\n                    size=\"s\"\r\n                    [ariaLabel]=\"fromText\"\r\n                    [label]=\"fromText\"\r\n                    [title]=\"fromText\"\r\n                ></fd-avatar>\r\n                <div fd-card-title class=\"header-fields\">\r\n                    <h5 fd-title>\r\n                        <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\r\n                    </h5>\r\n                    <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\r\n                </div>\r\n                <div fd-card-subtitle>\r\n                    <h5 fd-title>\r\n                        {{ subject }} @if(mailNoText){ <span>({{ mailNoText }})</span>}\r\n                    </h5>\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Recievers' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of toText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </div>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content>\r\n            <fd-panel [expanded]=\"isFirst\">\r\n                <div fd-panel-title id=\"panel-expandable-title-1\">\r\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\r\n                    <div class=\"payamIcons\">\r\n                        @if (importance.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ importance.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (accessLevel.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (todo) {\r\n                        <fd-info-label [label]=\"todo.text\" [color]=\"todo.color\" [title]=\"todo.text\"></fd-info-label>\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <div fd-panel-content>\r\n                    @if (customText) {\r\n                    <div>\r\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\r\n                            {{ customText }}\r\n                        </fd-message-strip>\r\n                    </div>\r\n                    }\r\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\r\n\r\n                    @if (attachments?.length) {\r\n                    <div class=\"file-viewer-attachments\">\r\n                        @for (file of attachments; track file) { @if (!file.IsDeleted) {\r\n                        <bsu-file-viewer-popover\r\n                            [file]=\"file\"\r\n                            [files]=\"attachments\"\r\n                            [deviceSize]=\"(deviceSize$ | async)!!\"\r\n                            [canDownload]=\"true\"\r\n                            [disableRemove]=\"true\"\r\n                        ></bsu-file-viewer-popover>\r\n                        } } @if (attachments.length > 1) {\r\n                        <button\r\n                            fd-button\r\n                            [title]=\"'Download' | bbbTranslate\"\r\n                            [glyph]=\"'download'\"\r\n                            downloadFiles\r\n                            [files]=\"attachments\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                    }\r\n                    <div class=\"readAt\">\r\n                        @if (readDate) {\r\n                        <fd-object-identifier [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\">\r\n                        </fd-object-identifier>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-panel>\r\n        </fd-card-content>\r\n        <!-- <fd-card-footer>\r\n    <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\r\n  </fd-card-footer> -->\r\n    </fd-card>\r\n    @for (detail of details; track detail) {\r\n    <ng-contianer>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                showPayamClass;\r\n                context: {\r\n                    $implicit: detail\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n    </ng-contianer>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start;height:auto;max-height:initial}:host ::ng-deep .fd-card__subtitle h5{white-space:initial!important}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}:host ::ng-deep ol{list-style:auto;margin:unset;padding:revert}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media (max-width: 410px){h5{max-width:210px}}@media (max-width: 1040px){.h5{max-width:600px}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$5.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: "component", type: i2$4.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$4.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: i5$4.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i5$4.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i5$4.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$4.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i5$4.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i6$5.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id", "preventClick"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i6.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i2$5.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i11.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["description", "bold", "medium"] }, { kind: "component", type: i3$9.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$9.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$9.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { 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: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaPishnamayeshPayamComponent, decorators: [{
             type: Component,
@@ -14343,7 +14358,7 @@ class BarsaReportCheckboxSwitchButtonComponent extends BaseComponent {
         this.events.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaReportCheckboxSwitchButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BarsaReportCheckboxSwitchButtonComponent, selector: "bsu-barsa-report-checkbox-switch-button", outputs: { events: "events" }, providers: [], usesInheritance: true, ngImport: i0, template: "<fd-switch\n    [activeText]=\"activeText\"\n    [inactiveText]=\"inactiveText\"\n    (change)=\"onCheckChange()\"\n    [checked]=\"value\"\n    [semantic]=\"semantic\"\n></fd-switch>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"], dependencies: [{ kind: "component", type: i1$8.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BarsaReportCheckboxSwitchButtonComponent, selector: "bsu-barsa-report-checkbox-switch-button", outputs: { events: "events" }, providers: [], usesInheritance: true, ngImport: i0, template: "<fd-switch\n    [activeText]=\"activeText\"\n    [inactiveText]=\"inactiveText\"\n    (change)=\"onCheckChange()\"\n    [checked]=\"value\"\n    [semantic]=\"semantic\"\n></fd-switch>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"], dependencies: [{ kind: "component", type: i1$7.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaReportCheckboxSwitchButtonComponent, decorators: [{
             type: Component,
@@ -14972,17 +14987,8 @@ class BarsaChatComponent extends FormBaseComponent {
     ngOnDestroy() {
         document.body.classList.remove('chat-mode');
     }
-    scrollToBottom(force = false, instant = false) {
-        const container = (this._el?.nativeElement).querySelector('#chatContentElement');
-        if (force || (container && container.scrollTopMax - container.scrollTop < 300)) {
-            setTimeout(() => container?.scrollTo({
-                top: container.scrollHeight,
-                behavior: instant ? 'instant' : 'smooth'
-            }));
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaChatComponent, selector: "bsu-barsa-chat", inputs: { simple: "simple" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"tw-flex tw-w-full tw-bg-gradient-to-r tw-from-[#5d6e7f] tw-to-[#354a5f] dark:tw-from-[#253443] dark:tw-to-[#10161c]\"\r\n    fillEmptySpace\r\n    [class.tw-h-screen]=\"!simple\"\r\n    [class.tw-justify-center]=\"simple\"\r\n>\r\n    @if (!simple) {\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-h-full tw-flex 2xl:tw-container max-w-[80rem] tw-shrink-0 tw-relative\"\r\n        [ngClass]=\"{\r\n            'tw-grow 2xl:tw-grow-0': !simple,\r\n            'tw-w-full': simple\r\n        }\"\r\n    >\r\n        @if (!simple) {\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-barsa-chat-threads-list-toolbar></bsu-barsa-chat-threads-list-toolbar>\r\n                <bsu-barsa-chat-threads-list>\r\n                    <!-- @for (thread of threads; track thread.id) {\r\n                    <bsu-barsa-chat-thread [thread]=\"thread\" ></bsu-barsa-chat-thread>\r\n                    } -->\r\n                </bsu-barsa-chat-threads-list>\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': !simple,\r\n                'tw-flex': simple\r\n            }\"\r\n        >\r\n\r\n            <div\r\n                @inContentAnimation\r\n                class=\"tw-h-full 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': !simple\r\n                }\"\r\n            >\r\n\r\n                <bsu-barsa-chat-content id=\"chat-container\">\r\n                    @if(layout94$ | async;as layout94){ @if ('\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94; as configUi) {\r\n                    <bsu-layout-control [config]=\"configUi\"></bsu-layout-control>\r\n                    } }\r\n                </bsu-barsa-chat-content>\r\n                <div\r\n                    class=\"tw-w-full\"\r\n                    [ngClass]=\"{\r\n                        'tw-relative': !simple,\r\n                        '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': simple\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 ?? replyingMessage().file?.name ?? 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-p-2 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(layout94$ | async;as layout94){ @if ('\u0631\u062F\u06CC\u0641 \u06AF\u0641\u062A\u06AF\u0648 \u0645\u0648\u062C\u0648\u062F\u06CC\u062A' | controlUi: layout94; as configUi) {\r\n                        <bsu-layout-control [config]=\"configUi\"></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            \r\n        </div>\r\n    </div>\r\n    @if (!simple) {\r\n    <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i3$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", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: BarsaChatContentComponent, selector: "bsu-barsa-chat-content" }, { kind: "component", type: BarsaChatThreadsListComponent, selector: "bsu-barsa-chat-threads-list" }, { kind: "component", type: BarsaChatThreadsListToolbarComponent, selector: "bsu-barsa-chat-threads-list-toolbar" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaChatComponent, selector: "bsu-barsa-chat", inputs: { simple: "simple" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"tw-flex tw-w-full tw-bg-gradient-to-r tw-from-[#5d6e7f] tw-to-[#354a5f] dark:tw-from-[#253443] dark:tw-to-[#10161c]\"\r\n    fillEmptySpace\r\n    [class.tw-h-screen]=\"!simple\"\r\n    [class.tw-justify-center]=\"simple\"\r\n>\r\n    @if (!simple) {\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-h-full tw-flex 2xl:tw-container max-w-[80rem] tw-shrink-0 tw-relative\"\r\n        [ngClass]=\"{\r\n            'tw-grow 2xl:tw-grow-0': !simple,\r\n            'tw-w-full': simple\r\n        }\"\r\n    >\r\n        @if (!simple) {\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-barsa-chat-threads-list-toolbar></bsu-barsa-chat-threads-list-toolbar>\r\n                <bsu-barsa-chat-threads-list>\r\n                    <!-- @for (thread of threads; track thread.id) {\r\n                    <bsu-barsa-chat-thread [thread]=\"thread\" ></bsu-barsa-chat-thread>\r\n                    } -->\r\n                </bsu-barsa-chat-threads-list>\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': !simple,\r\n                'tw-flex': simple\r\n            }\"\r\n        >\r\n\r\n            <div\r\n                @inContentAnimation\r\n                class=\"tw-h-full 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': !simple\r\n                }\"\r\n            >\r\n\r\n                <bsu-barsa-chat-content id=\"chat-container\">\r\n                    @if(layout94$ | async;as layout94){ @if ('\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94; as configUi) {\r\n                    <bsu-layout-control [config]=\"configUi\" style=\"flex:1\"></bsu-layout-control>\r\n                    } }\r\n                </bsu-barsa-chat-content>\r\n                <div\r\n                    class=\"tw-w-full\"\r\n                    [ngClass]=\"{\r\n                        'tw-relative': !simple,\r\n                        '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': simple\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 ?? replyingMessage().file?.name ?? 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-p-2 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(layout94$ | async;as layout94){ @if ('\u0631\u062F\u06CC\u0641 \u06AF\u0641\u062A\u06AF\u0648 \u0645\u0648\u062C\u0648\u062F\u06CC\u062A' | controlUi: layout94; as configUi) {\r\n                        <bsu-layout-control [config]=\"configUi\"></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            \r\n        </div>\r\n    </div>\r\n    @if (!simple) {\r\n    <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i3$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", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: BarsaChatContentComponent, selector: "bsu-barsa-chat-content" }, { kind: "component", type: BarsaChatThreadsListComponent, selector: "bsu-barsa-chat-threads-list" }, { kind: "component", type: BarsaChatThreadsListToolbarComponent, selector: "bsu-barsa-chat-threads-list-toolbar" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], animations: [
             trigger('inContentAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'scale(50%, 50%)' }),
@@ -15028,7 +15034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                                 animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(50%)' }))
                             ])
                         ])
-                    ], standalone: false, template: "<div\r\n    class=\"tw-flex tw-w-full tw-bg-gradient-to-r tw-from-[#5d6e7f] tw-to-[#354a5f] dark:tw-from-[#253443] dark:tw-to-[#10161c]\"\r\n    fillEmptySpace\r\n    [class.tw-h-screen]=\"!simple\"\r\n    [class.tw-justify-center]=\"simple\"\r\n>\r\n    @if (!simple) {\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-h-full tw-flex 2xl:tw-container max-w-[80rem] tw-shrink-0 tw-relative\"\r\n        [ngClass]=\"{\r\n            'tw-grow 2xl:tw-grow-0': !simple,\r\n            'tw-w-full': simple\r\n        }\"\r\n    >\r\n        @if (!simple) {\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-barsa-chat-threads-list-toolbar></bsu-barsa-chat-threads-list-toolbar>\r\n                <bsu-barsa-chat-threads-list>\r\n                    <!-- @for (thread of threads; track thread.id) {\r\n                    <bsu-barsa-chat-thread [thread]=\"thread\" ></bsu-barsa-chat-thread>\r\n                    } -->\r\n                </bsu-barsa-chat-threads-list>\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': !simple,\r\n                'tw-flex': simple\r\n            }\"\r\n        >\r\n\r\n            <div\r\n                @inContentAnimation\r\n                class=\"tw-h-full 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': !simple\r\n                }\"\r\n            >\r\n\r\n                <bsu-barsa-chat-content id=\"chat-container\">\r\n                    @if(layout94$ | async;as layout94){ @if ('\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94; as configUi) {\r\n                    <bsu-layout-control [config]=\"configUi\"></bsu-layout-control>\r\n                    } }\r\n                </bsu-barsa-chat-content>\r\n                <div\r\n                    class=\"tw-w-full\"\r\n                    [ngClass]=\"{\r\n                        'tw-relative': !simple,\r\n                        '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': simple\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 ?? replyingMessage().file?.name ?? 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-p-2 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(layout94$ | async;as layout94){ @if ('\u0631\u062F\u06CC\u0641 \u06AF\u0641\u062A\u06AF\u0648 \u0645\u0648\u062C\u0648\u062F\u06CC\u062A' | controlUi: layout94; as configUi) {\r\n                        <bsu-layout-control [config]=\"configUi\"></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            \r\n        </div>\r\n    </div>\r\n    @if (!simple) {\r\n    <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n    }\r\n</div>\r\n" }]
+                    ], standalone: false, template: "<div\r\n    class=\"tw-flex tw-w-full tw-bg-gradient-to-r tw-from-[#5d6e7f] tw-to-[#354a5f] dark:tw-from-[#253443] dark:tw-to-[#10161c]\"\r\n    fillEmptySpace\r\n    [class.tw-h-screen]=\"!simple\"\r\n    [class.tw-justify-center]=\"simple\"\r\n>\r\n    @if (!simple) {\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-h-full tw-flex 2xl:tw-container max-w-[80rem] tw-shrink-0 tw-relative\"\r\n        [ngClass]=\"{\r\n            'tw-grow 2xl:tw-grow-0': !simple,\r\n            'tw-w-full': simple\r\n        }\"\r\n    >\r\n        @if (!simple) {\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-barsa-chat-threads-list-toolbar></bsu-barsa-chat-threads-list-toolbar>\r\n                <bsu-barsa-chat-threads-list>\r\n                    <!-- @for (thread of threads; track thread.id) {\r\n                    <bsu-barsa-chat-thread [thread]=\"thread\" ></bsu-barsa-chat-thread>\r\n                    } -->\r\n                </bsu-barsa-chat-threads-list>\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': !simple,\r\n                'tw-flex': simple\r\n            }\"\r\n        >\r\n\r\n            <div\r\n                @inContentAnimation\r\n                class=\"tw-h-full 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': !simple\r\n                }\"\r\n            >\r\n\r\n                <bsu-barsa-chat-content id=\"chat-container\">\r\n                    @if(layout94$ | async;as layout94){ @if ('\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94; as configUi) {\r\n                    <bsu-layout-control [config]=\"configUi\" style=\"flex:1\"></bsu-layout-control>\r\n                    } }\r\n                </bsu-barsa-chat-content>\r\n                <div\r\n                    class=\"tw-w-full\"\r\n                    [ngClass]=\"{\r\n                        'tw-relative': !simple,\r\n                        '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': simple\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 ?? replyingMessage().file?.name ?? 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-p-2 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(layout94$ | async;as layout94){ @if ('\u0631\u062F\u06CC\u0641 \u06AF\u0641\u062A\u06AF\u0648 \u0645\u0648\u062C\u0648\u062F\u06CC\u062A' | controlUi: layout94; as configUi) {\r\n                        <bsu-layout-control [config]=\"configUi\"></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            \r\n        </div>\r\n    </div>\r\n    @if (!simple) {\r\n    <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\r\n    }\r\n</div>\r\n" }]
         }], propDecorators: { simple: [{
                 type: Input
             }] } });
@@ -15096,7 +15102,7 @@ class BarsaChatMessageComponent {
         return { ...image, displayWidth, displayHeight };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaChatMessageComponent, selector: "bsu-barsa-chat-message", inputs: { message: "message", showSender: "showSender", nextIsSame: "nextIsSame", pervIsSame: "pervIsSame", badge: "badge", nextHasBadge: "nextHasBadge", badgeLabel: "badgeLabel" }, outputs: { reply: "reply" }, 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 === userId,\r\n'tw-flex-row-reverse': message.owner.id !== userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== 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-bubble-mine tw-border-l-bubble-mine tw-border-r-transparent':\r\n                    message.owner.id === userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            @inPaneAnimation\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 === userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-bubble-mine': message.owner.id === userId && !message.image,\r\n'tw-bg-default': message.owner.id !== 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-bubble-mine': message.owner.id === userId && message.image,\r\n'tw-from-default': message.owner.id !== 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-bubble-mine/[.3]': message.owner.id === userId,\r\n'tw-bg-default/[.3]': message.owner.id !== 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            } } @if (message.file?.name) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default': message.owner.id !== 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                    [download]=\"message.file?.FileName\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\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                        {{ message.file?.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\">\r\n                        {{ message.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                        {{ message.file?.Size }}</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default': message.owner.id !== 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-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== 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                }}</span>\r\n                <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\r\n                    <fd-popover-control>\r\n                        <button\r\n                            fd-button\r\n                            fdType=\"transparent\"\r\n                            [fdCompact]=\"true\"\r\n                            glyph=\"navigation-down-arrow\"\r\n                        ></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            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$5.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: i3$4.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$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: "pipe", type: UtilDateToHhMmPipe, name: "utilDateToHhMm" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaChatMessageComponent, selector: "bsu-barsa-chat-message", inputs: { message: "message", showSender: "showSender", nextIsSame: "nextIsSame", pervIsSame: "pervIsSame", badge: "badge", nextHasBadge: "nextHasBadge", badgeLabel: "badgeLabel" }, outputs: { reply: "reply" }, 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 === userId,\r\n'tw-flex-row-reverse': message.owner.id !== userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== 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-bubble-mine tw-border-l-bubble-mine tw-border-r-transparent':\r\n                    message.owner.id === userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            @inPaneAnimation\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 === userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-bubble-mine': message.owner.id === userId && !message.image,\r\n'tw-bg-default': message.owner.id !== 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-bubble-mine': message.owner.id === userId && message.image,\r\n'tw-from-default': message.owner.id !== 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-bubble-mine/[.3]': message.owner.id === userId,\r\n'tw-bg-default/[.3]': message.owner.id !== 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-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default': message.owner.id !== 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-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default': message.owner.id !== 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-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== 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                }}</span>\r\n             \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\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [fdCompact]=\"true\"\r\n                glyph=\"navigation-down-arrow\"\r\n            ></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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$5.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: i3$4.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$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: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: UtilDateToHhMmPipe, name: "utilDateToHhMm" }], animations: [
             trigger('inPaneAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'scale(0, 0)' }),
@@ -15122,7 +15128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                                 animate('300ms ease-in-out', style({ opacity: 0, transform: 'scale(0, 0)' }))
                             ])
                         ])
-                    ], 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 === userId,\r\n'tw-flex-row-reverse': message.owner.id !== userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== 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-bubble-mine tw-border-l-bubble-mine tw-border-r-transparent':\r\n                    message.owner.id === userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            @inPaneAnimation\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 === userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-bubble-mine': message.owner.id === userId && !message.image,\r\n'tw-bg-default': message.owner.id !== 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-bubble-mine': message.owner.id === userId && message.image,\r\n'tw-from-default': message.owner.id !== 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-bubble-mine/[.3]': message.owner.id === userId,\r\n'tw-bg-default/[.3]': message.owner.id !== 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            } } @if (message.file?.name) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default': message.owner.id !== 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                    [download]=\"message.file?.FileName\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\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                        {{ message.file?.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\">\r\n                        {{ message.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                        {{ message.file?.Size }}</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default': message.owner.id !== 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-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== 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                }}</span>\r\n                <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\r\n                    <fd-popover-control>\r\n                        <button\r\n                            fd-button\r\n                            fdType=\"transparent\"\r\n                            [fdCompact]=\"true\"\r\n                            glyph=\"navigation-down-arrow\"\r\n                        ></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            </div>\r\n        </div>\r\n    </div>\r\n</div>\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 === userId,\r\n'tw-flex-row-reverse': message.owner.id !== userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== 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-bubble-mine tw-border-l-bubble-mine tw-border-r-transparent':\r\n                    message.owner.id === userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            @inPaneAnimation\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 === userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-bubble-mine': message.owner.id === userId && !message.image,\r\n'tw-bg-default': message.owner.id !== 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-bubble-mine': message.owner.id === userId && message.image,\r\n'tw-from-default': message.owner.id !== 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-bubble-mine/[.3]': message.owner.id === userId,\r\n'tw-bg-default/[.3]': message.owner.id !== 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-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default': message.owner.id !== 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-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default': message.owner.id !== 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-bubble-mine': message.owner.id === userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== 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                }}</span>\r\n             \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\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [fdCompact]=\"true\"\r\n                glyph=\"navigation-down-arrow\"\r\n            ></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" }]
         }], propDecorators: { message: [{
                 type: Input
             }], showSender: [{
@@ -15173,30 +15179,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class BarsaChatListComponent extends ReportViewBaseComponent {
     constructor() {
         super(...arguments);
-        this.simple = true;
+        this.simple = false;
         this.setReplyingMessage = new EventEmitter();
+        this.messages = signal([]);
         this._rval = inject(MoReportValuePipe);
         this._picField = inject(PictureFieldSourcePipe);
         this.moment = jmoment;
+        this._paginVisibleStatus = signal(IntersectionStatus.Visible);
+        this._pagingSetting = signal(null);
+        this._firstTime = true;
     }
     ngOnInit() {
         super.ngOnInit();
-        this.messages = this.moDataList;
+        this._ulvMainService.pagingSetting$.subscribe((pagingSetting) => this._pagingSetting.set(pagingSetting));
     }
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
         const { moDataList } = changes;
         if (moDataList) {
-            this._prepareMessages(moDataList.currentValue);
+            this._prepareMessages(moDataList.currentValue, moDataList.currentValue.filter((c) => c.$State === 'New'));
+        }
+    }
+    scrollToBottom(force = false, instant = false) {
+        if (this.simple) {
+            const container = this._chatContentElement?.nativeElement;
+            if ((force && container) || container) {
+                setTimeout(() => container?.scrollTo({
+                    top: container.scrollHeight,
+                    behavior: instant ? 'instant' : 'smooth'
+                }));
+            }
+        }
+        else if (this.viewPort) {
+            setTimeout(() => this.viewPort.scrollTo({ bottom: 0, behavior: instant ? 'instant' : 'smooth' }));
+        }
+    }
+    onVisibilityChange(e) {
+        if (this._paginVisibleStatus() !== IntersectionStatus.Visible && e === IntersectionStatus.Visible) {
+            // TODO: fire pagin event
+            if (this._firstTime) {
+                this._firstTime = false;
+                return;
+            }
+            const x = this._pagingSetting();
+            if (x && x.Page < x.TotalPages) {
+                this._ulvMainService.pageChanged(x.Page + 1);
+            }
         }
+        this._paginVisibleStatus.set(e);
     }
-    _prepareMessages(moDataList) {
-        this.messages = moDataList.map((i) => ({
+    _prepareMessages(moDataList, newMessages) {
+        const x = newMessages.length ? newMessages : moDataList;
+        const mappedMoList = x.reverse().map((i) => ({
             id: i.Id,
             createdAt: this._rval.transform(this.viewSetting.CreationDateField, i, this.allColumns),
             deliveredAt: this._rval.transform(this.viewSetting.CreationDateField, i, this.allColumns),
             readAt: this._rval.transform(this.viewSetting.ReadAtField, i, this.allColumns),
-            file: this._rval.transform(this.viewSetting.FileDataField, i, this.allColumns),
+            files: this._rval.transform(this.viewSetting.FileDataField, i, this.allColumns)?.Files,
             image: this._rval.transform(this.viewSetting.PictureDataField, i, this.allColumns),
             owner: {
                 id: this._rval.transform(this.viewSetting.UserField, i, this.allColumns)?.Id,
@@ -15211,16 +15250,31 @@ class BarsaChatListComponent extends ReportViewBaseComponent {
             },
             text: this._rval.transform(this.viewSetting.MessageTextField, i, this.allColumns)
         }));
-        console.log(this.messages);
+        this.messages.set(newMessages.length ? [...this.messages(), ...mappedMoList] : [...mappedMoList, ...this.messages()]);
+        x.forEach((c) => (c.$State = 'Unchanged'));
+        if (newMessages.length || !this.pagingSetting?.Page) {
+            this.scrollToBottom();
+        }
+        if (!this.pagingSetting?.Page) {
+            this.scrollToBottom(true, true);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaChatListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaChatListComponent, selector: "bsu-barsa-chat-list", inputs: { messages: "messages", replyingMessage: "replyingMessage", simple: "simple" }, outputs: { setReplyingMessage: "setReplyingMessage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (messages !== null) { @if (!simple) {\r\n<cdk-virtual-scroll-viewport\r\n    [appendOnly]=\"true\"\r\n    id=\"chatContentElement\"\r\n    itemSize=\"20\"\r\n    class=\"tw-h-full tw-w-full tw-pb-4 tw-pt-24\"\r\n>\r\n    <div *cdkVirtualFor=\"let message of messages; let index = index\">\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    </div>\r\n    @if (replyingMessage) {\r\n    <div class=\"tw-h-14\"></div>\r\n    }\r\n</cdk-virtual-scroll-viewport>\r\n} @else {\r\n<div class=\"tw-h-full tw-w-full tw-pt-24\">\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 class=\"tw-h-4\"></div>\r\n</div>\r\n} }\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$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: UtilChatTimeBadgePipe, name: "utilChatTimeBadge" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaChatListComponent, 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" }, 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: "<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; let index = index\">\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        </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%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i3$7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$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: UtilChatTimeBadgePipe, name: "utilChatTimeBadge" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaChatListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-chat-list', standalone: false, template: "@if (messages !== null) { @if (!simple) {\r\n<cdk-virtual-scroll-viewport\r\n    [appendOnly]=\"true\"\r\n    id=\"chatContentElement\"\r\n    itemSize=\"20\"\r\n    class=\"tw-h-full tw-w-full tw-pb-4 tw-pt-24\"\r\n>\r\n    <div *cdkVirtualFor=\"let message of messages; let index = index\">\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    </div>\r\n    @if (replyingMessage) {\r\n    <div class=\"tw-h-14\"></div>\r\n    }\r\n</cdk-virtual-scroll-viewport>\r\n} @else {\r\n<div class=\"tw-h-full tw-w-full tw-pt-24\">\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 class=\"tw-h-4\"></div>\r\n</div>\r\n} }\r\n" }]
-        }], propDecorators: { messages: [{
-                type: Input
+            args: [{ selector: 'bsu-barsa-chat-list', standalone: false, host: {
+                        // Statically
+                        class: 'tw-block tw-h-full tw-w-full',
+                        '[class.tw-pt-24]': 'simple'
+                    }, template: "<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; let index = index\">\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        </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%}\n"] }]
+        }], propDecorators: { _chatContentElement: [{
+                type: ViewChild,
+                args: ['chatContentElement', { read: ElementRef }]
+            }], viewPort: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
             }], replyingMessage: [{
                 type: Input
             }], simple: [{
@@ -15268,7 +15322,7 @@ class BarsaTabRouteManagerComponent extends BaseComponent {
         this.pages = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTabRouteManagerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaTabRouteManagerComponent, selector: "bsu-barsa-tab-route-manager", providers: [UploadService], usesInheritance: true, ngImport: i0, template: "@if(pages?.length){\r\n<fd-tab-list>\r\n    <fd-tab title=\"Link 1\"> Content for tab 1 </fd-tab>\r\n</fd-tab-list>\r\n}@else {\r\n<fd-message-page [hasIcon]=\"false\">\r\n    <fd-message-page-title>\u06AF\u0632\u0627\u0631\u0634\u06CC \u0627\u0646\u062A\u062E\u0627\u0628 \u0646\u0634\u062F\u0647 \u0627\u0633\u062A</fd-message-page-title>\r\n</fd-message-page>\r\n}\r\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"], dependencies: [{ kind: "component", type: i1$9.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i1$9.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i2$9.MessagePageComponent, selector: "fd-message-page", inputs: ["class", "type", "hasIcon", "glyphFont", "glyph"] }, { kind: "component", type: i2$9.MessagePageTitleComponent, selector: "fd-message-page-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BarsaTabRouteManagerComponent, selector: "bsu-barsa-tab-route-manager", providers: [UploadService], usesInheritance: true, ngImport: i0, template: "@if(pages?.length){\r\n<fd-tab-list>\r\n    <fd-tab title=\"Link 1\"> Content for tab 1 </fd-tab>\r\n</fd-tab-list>\r\n}@else {\r\n<fd-message-page [hasIcon]=\"false\">\r\n    <fd-message-page-title>\u06AF\u0632\u0627\u0631\u0634\u06CC \u0627\u0646\u062A\u062E\u0627\u0628 \u0646\u0634\u062F\u0647 \u0627\u0633\u062A</fd-message-page-title>\r\n</fd-message-page>\r\n}\r\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"], dependencies: [{ kind: "component", type: i1$8.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i1$8.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i2$9.MessagePageComponent, selector: "fd-message-page", inputs: ["class", "type", "hasIcon", "glyphFont", "glyph"] }, { kind: "component", type: i2$9.MessagePageTitleComponent, selector: "fd-message-page-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaTabRouteManagerComponent, decorators: [{
             type: Component,