npm - barsa-sap-ui - Versions diffs - 2.3.41 → 2.3.43 - Mend

barsa-sap-ui 2.3.41 → 2.3.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/barsa-sap-ui.mjs +117 -55
package/fesm2022/barsa-sap-ui.mjs.map +1 -1
package/index.d.ts +40 -14
package/package.json +1 -1

package/fesm2022/barsa-sap-ui.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Input, Pipe, EventEmitter, inject, NgZone, Renderer2, ElementRef, Output, HostBinding, ViewChild, ViewEncapsulation, ChangeDetectorRef, ViewChildren, DOCUMENT, Directive, TemplateRef, HostListener, signal, ViewContainerRef, Injector, ComponentFactoryResolver, NgModule, Injectable, provideAppInitializer, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, Pipe, EventEmitter, inject, NgZone, Renderer2, ElementRef, Output, HostBinding, ViewChild, ViewEncapsulation, ChangeDetectorRef, ViewChildren, DOCUMENT, Directive, TemplateRef, HostListener, signal, ViewContainerRef, Injector, ComponentFactoryResolver, NgModule, input, output, Injectable, provideAppInitializer, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from 'barsa-novin-ray-core';
 import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, BbbTranslatePipe, LayoutService, measureText, getLabelWidth, SortDirection, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, FormPanelService, LayoutMainContentService, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, BaseDirective, PortalService, FieldBaseComponent, getDateService as getDateService$1, DateService, DateMiladiService, DateHijriService, DateShamsiService, DynamicDarkColorPipe, EllipsifyDirective, createGridEditorFormPanel, TabpageService, LocalStorageService, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, PictureFieldSourcePipe, isImage, getIcon, UploadService, LayoutPanelBaseComponent, UlvMainService, BaseColumnPropsComponent, ColumnService, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, setTableThWidth, TableHeaderWidthMode, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, calculateColumnWidth, calculateColumnContent, calculateColumnWidthFitToContainer, calculateFreeColumnSize, NotificationService, DateRanges, LogService, ApplicationCtrlrService, BreadcrumbService, IsDarkMode, isFunction, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, getFieldValue, ContainerComponent, DialogParams, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, FormPropsBaseComponent, UiService, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, NetworkStatusService, isInLocalMode, executeUlvCommandHandler, FillAllLayoutControls, IntersectionStatus, FORM_DIALOG_COMPONENT, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule, ResizableModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
 import moment from 'moment';
@@ -58,7 +58,7 @@ import { NotificationRef } from '@fundamental-ngx/core/notification';
 import * as i2$9 from '@fundamental-ngx/core/action-sheet';
 import * as i3$8 from '@fundamental-ngx/core/radio';
 import * as i4$7 from '@angular/router';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, NavigationEnd, RouterModule } from '@angular/router';
 import * as i4$5 from '@fundamental-ngx/core/breadcrumb';
 import * as i8$1 from '@fundamental-ngx/core/dynamic-page';
 import * as i9 from '@fundamental-ngx/core/dynamic-side-content';
@@ -4933,11 +4933,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: "20.0.6", ngImport: i0, type: ColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ColumnRendererComponent, isStandalone: false, selector: "bsu-column-renderer,[colRenderer]", inputs: { cellEdit: "cellEdit", 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\r\n        class=\"renderGeneral\"\r\n        [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\"\r\n        [style.width]=\"\"\r\n        [attr.title]=\"value\"\r\n    >\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            [columnValue]=\"value\"\r\n            (ellapsised)=\"onElapsised($event)\"\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        [cellEdit]=\"cellEdit\"\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.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: "directive", type: i2.ColumnValueDirective, selector: "[columnValue]", inputs: ["columnValue"] }, { kind: "component", type: i3$7.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$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "cellEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "selectedIndex", "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: "20.0.6", type: ColumnRendererComponent, isStandalone: false, selector: "bsu-column-renderer,[colRenderer]", inputs: { cellEdit: "cellEdit", 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\r\n        class=\"renderGeneral\"\r\n        [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\"\r\n        [style.width]=\"\"\r\n        [attr.title]=\"value\"\r\n    >\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            [columnValue]=\"value\"\r\n            (ellapsised)=\"onElapsised($event)\"\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        [cellEdit]=\"cellEdit\"\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}.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.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: "directive", type: i2.ColumnValueDirective, selector: "[columnValue]", inputs: ["columnValue"] }, { kind: "component", type: i3$7.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$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "cellEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "selectedIndex", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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\r\n        class=\"renderGeneral\"\r\n        [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\"\r\n        [style.width]=\"\"\r\n        [attr.title]=\"value\"\r\n    >\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            [columnValue]=\"value\"\r\n            (ellapsised)=\"onElapsised($event)\"\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        [cellEdit]=\"cellEdit\"\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\r\n        class=\"renderGeneral\"\r\n        [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\"\r\n        [style.width]=\"\"\r\n        [attr.title]=\"value\"\r\n    >\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            [columnValue]=\"value\"\r\n            (ellapsised)=\"onElapsised($event)\"\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        [cellEdit]=\"cellEdit\"\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}.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"] }]
         }], propDecorators: { _filePopover: [{
                 type: ViewChild,
                 args: ['fileviewerPopover', { static: false, read: ElementRef }]
@@ -4994,11 +4994,11 @@ class LyLayoutContainerOfRootComponent extends LayoutPanelBaseComponent {
         this.isMobile = getDeviceIsMobile();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyLayoutContainerOfRootComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyLayoutContainerOfRootComponent, isStandalone: false, selector: "bsu-ly-layout-container-of-root", host: { properties: { "class.ismobile": "this.isMobile" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (config) { @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case\r\n('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=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\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-maxLabelWidth=\"maxLabelWidth\" 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}\r\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyLayoutContainerOfRootComponent, isStandalone: false, selector: "bsu-ly-layout-container-of-root", host: { properties: { "class.ismobile": "this.isMobile" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (config) { @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case\r\n('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=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\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-content></ng-content>\r\n}\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" 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}\r\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyLayoutContainerOfRootComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-layout-container-of-root', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "@if (config) { @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case\r\n('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=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\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-maxLabelWidth=\"maxLabelWidth\" 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}\r\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"] }]
+            args: [{ selector: 'bsu-ly-layout-container-of-root', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "@if (config) { @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case\r\n('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=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\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-content></ng-content>\r\n}\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" 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}\r\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"] }]
         }], propDecorators: { viewRef: [{
                 type: ViewChild,
                 args: ['viewRefTemplate', { read: ViewContainerRef, static: true }]
@@ -7259,6 +7259,7 @@ class BarsaUlvMainComponent extends BaseComponent {
         this.sideContentMode = false;
         this._dialogService = inject(DialogService);
         this._renderer2 = inject(Renderer2);
+        this._router = inject(Router);
         this.isServiceDesk = BarsaApi.LoginFormData.IsServiceDesk;
     }
     ngOnInit() {
@@ -7269,6 +7270,11 @@ class BarsaUlvMainComponent extends BaseComponent {
         this.mainContentWidth = BarsaApi.Common.Util.TryGetValue(this.context, 'Setting.ClassNames.CustomUi.Parameters.MainContentWidth', false);
         this.isMobile = getDeviceIsMobile();
         this.mobileBottomBar = this.isMobile && !this.standalone;
+        this._router.events.subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                this._dynamicPageComponent?.refreshSize();
+            }
+        });
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
@@ -9372,11 +9378,11 @@ class FundamentalDynamicFormComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FundamentalDynamicFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FundamentalDynamicFormComponent, isStandalone: false, 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", infobars: "infobars", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", circleAvatar: "circleAvatar", hideBreadCrumb: "hideBreadCrumb", 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", modernTabContainerComponent: "modernTabContainerComponent", 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", dismissInfobar: "dismissInfobar" }, 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.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile || hideBreadCrumb\">\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 || infobars.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars.length)\"\r\n        [collapsible]=\"true\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\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 | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" 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 | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\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 | bbbTranslate\"\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 | bbbTranslate\"\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 | bbbTranslate\" 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 | bbbTranslate\"\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\r\n                        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' | bbbTranslate\"\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 | bbbTranslate }}</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 class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\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 class=\"!tw-p-0\" [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                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\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\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\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            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\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\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\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-facet .fd-title{font-family:B-Font Medium}: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[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{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}.hide-title.hide-breadcrumb{display:none}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: i2.MeasureFormTitleWidthDirective, selector: "[mWidthTitle]", inputs: ["mWidthTitle"] }, { kind: "directive", type: i3$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$7.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: i4$5.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i4$5.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i8$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i8$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i8$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i8$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i8$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i8$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i8$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i8$2.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "headingLevel", "id", "alignEnd"] }, { kind: "component", type: i8$2.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i8$2.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: i4$3.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$3.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$3.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i5$6.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.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$3.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", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "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: "component", type: BarsaInfobarsComponent, selector: "bsu-barsa-infobars", inputs: ["infobars"], outputs: ["dismiss"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.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.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FundamentalDynamicFormComponent, isStandalone: false, 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", infobars: "infobars", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", circleAvatar: "circleAvatar", hideBreadCrumb: "hideBreadCrumb", 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", modernTabContainerComponent: "modernTabContainerComponent", 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", dismissInfobar: "dismissInfobar" }, 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.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile || hideBreadCrumb\">\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 || infobars.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars.length)\"\r\n        [collapsible]=\"true\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\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 | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" 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 | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\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 | bbbTranslate\"\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 | bbbTranslate\"\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 | bbbTranslate\" 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 | bbbTranslate\"\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\r\n                        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' | bbbTranslate\"\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 | bbbTranslate }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if((!modernTabs.length && !contentIsPage) || (modernTabs.length && !contentIsPage && parameters?.LayoutComponent))\r\n    {\r\n    <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\" cdkScrollable>\r\n        <fd-layout-grid class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\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 class=\"!tw-p-0\" [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                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\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\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\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            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\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\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\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-facet .fd-title{font-family:B-Font Medium}: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[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{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}.hide-title.hide-breadcrumb{display:none}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: i2.MeasureFormTitleWidthDirective, selector: "[mWidthTitle]", inputs: ["mWidthTitle"] }, { kind: "directive", type: i3$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$7.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: i4$5.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i4$5.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i8$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i8$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i8$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i8$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i8$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i8$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i8$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i8$2.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "headingLevel", "id", "alignEnd"] }, { kind: "component", type: i8$2.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i8$2.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: i4$3.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$3.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$3.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i5$6.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.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$3.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", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "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: "component", type: BarsaInfobarsComponent, selector: "bsu-barsa-infobars", inputs: ["infobars"], outputs: ["dismiss"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.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.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FundamentalDynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-fundamental-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile || hideBreadCrumb\">\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 || infobars.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars.length)\"\r\n        [collapsible]=\"true\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\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 | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" 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 | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\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 | bbbTranslate\"\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 | bbbTranslate\"\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 | bbbTranslate\" 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 | bbbTranslate\"\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\r\n                        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' | bbbTranslate\"\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 | bbbTranslate }}</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 class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\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 class=\"!tw-p-0\" [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                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\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\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\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            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\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\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\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-facet .fd-title{font-family:B-Font Medium}: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[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{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}.hide-title.hide-breadcrumb{display:none}.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"] }]
+            args: [{ selector: 'bsu-fundamental-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile || hideBreadCrumb\">\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 || infobars.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars.length)\"\r\n        [collapsible]=\"true\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\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 | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" 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 | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\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 | bbbTranslate\"\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 | bbbTranslate\"\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 | bbbTranslate\" 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 | bbbTranslate\"\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\r\n                        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' | bbbTranslate\"\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 | bbbTranslate }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if((!modernTabs.length && !contentIsPage) || (modernTabs.length && !contentIsPage && parameters?.LayoutComponent))\r\n    {\r\n    <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\" cdkScrollable>\r\n        <fd-layout-grid class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\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 class=\"!tw-p-0\" [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                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\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\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\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            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\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\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\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-facet .fd-title{font-family:B-Font Medium}: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[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{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}.hide-title.hide-breadcrumb{display:none}.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"] }]
         }], propDecorators: { _dynamicPageComponent: [{
                 type: ViewChild,
                 args: [DynamicPageComponent, { static: true }]
@@ -11212,11 +11218,11 @@ class LayoutWizardComponent extends FormPropsBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutWizardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutWizardComponent, isStandalone: false, 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size", "role"] }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$9.WizardComponent, selector: "fd-wizard", inputs: ["appendToWizard", "contentHeight", "responsivePaddings", "displaySummaryStep", "ariaLabel"] }, { kind: "component", type: i3$9.WizardNavigationComponent, selector: "fd-wizard-navigation", inputs: ["ariaLabel"] }, { kind: "directive", type: i3$9.WizardProgressBarDirective, selector: "[fd-wizard-progress-bar]", inputs: ["size"] }, { kind: "component", type: i3$9.WizardStepComponent, selector: "[fd-wizard-step]", inputs: ["ariaLabel", "ariaRoleDecription", "status", "branching", "label", "optionalText", "isSummary", "stepClickValidator"], outputs: ["statusChange", "stepClicked", "stepIndicatorItemClicked"] }, { kind: "component", type: i3$9.WizardStepIndicatorComponent, selector: "fd-wizard-step-indicator", inputs: ["glyph", "glyphFont"], outputs: ["stepIndicatorItemClicked"] }, { kind: "component", type: i3$9.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: "20.0.6", type: LayoutWizardComponent, isStandalone: false, 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                            >\r\n                                <div class=\"tw-h-14\"></div>\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    <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</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-wizard-container-wrapper .fd-wizard-tall-content{height:auto!important}:host ::ng-deep bsu-layout-actions>div{z-index:10001}: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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size", "role"] }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$9.WizardComponent, selector: "fd-wizard", inputs: ["appendToWizard", "contentHeight", "responsivePaddings", "displaySummaryStep", "ariaLabel"] }, { kind: "component", type: i3$9.WizardNavigationComponent, selector: "fd-wizard-navigation", inputs: ["ariaLabel"] }, { kind: "directive", type: i3$9.WizardProgressBarDirective, selector: "[fd-wizard-progress-bar]", inputs: ["size"] }, { kind: "component", type: i3$9.WizardStepComponent, selector: "[fd-wizard-step]", inputs: ["ariaLabel", "ariaRoleDecription", "status", "branching", "label", "optionalText", "isSummary", "stepClickValidator"], outputs: ["statusChange", "stepClicked", "stepIndicatorItemClicked"] }, { kind: "component", type: i3$9.WizardStepIndicatorComponent, selector: "fd-wizard-step-indicator", inputs: ["glyph", "glyphFont"], outputs: ["stepIndicatorItemClicked"] }, { kind: "component", type: i3$9.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: "20.0.6", ngImport: i0, type: LayoutWizardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-layout-wizard', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
+            args: [{ selector: 'bsu-layout-wizard', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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                            >\r\n                                <div class=\"tw-h-14\"></div>\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    <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</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-wizard-container-wrapper .fd-wizard-tall-content{height:auto!important}:host ::ng-deep bsu-layout-actions>div{z-index:10001}: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"] }]
         }], propDecorators: { layoutRef: [{
                 type: ViewChild,
                 args: ['layoutRef']
@@ -11532,7 +11538,9 @@ class UiMoInfoSubFormUiComponent extends DeviceInfoFieldBaseComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        this.customFormPanelUi = this.context.formControl;
+        const customFormPanelUi = this.context.formControl;
+        customFormPanelUi && (customFormPanelUi.CustomFieldInfo = this.Setting.CustomFieldInfo);
+        this.customFormPanelUi = customFormPanelUi;
         this._listenTitleChanged();
         this.context.on({
             AddFormControlUi: this._addFormControl.bind(this)
@@ -11558,7 +11566,9 @@ class UiMoInfoSubFormUiComponent extends DeviceInfoFieldBaseComponent {
     }
     _titleChanged() { }
     _addFormControl(formControl) {
-        this.customFormPanelUi = formControl;
+        const customFormPanelUi = formControl;
+        customFormPanelUi && (customFormPanelUi.CustomFieldInfo = this.Setting.CustomFieldInfo);
+        this.customFormPanelUi = customFormPanelUi;
         this._cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiMoInfoSubFormUiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -15219,42 +15229,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     }, standalone: false, template: "<div class=\"tw-flex tw-flex-col tw-justify-end tw-w-full tw-h-full\">\r\n    <ng-content></ng-content>\r\n</div>\r\n" }]
         }] });
-class BarsaChatThreadsListComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatThreadsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BarsaChatThreadsListComponent, isStandalone: false, selector: "bsu-barsa-chat-threads-list", host: { classAttribute: "tw-flex tw-flex-col tw-overflow-auto" }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatThreadsListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bsu-barsa-chat-threads-list', host: {
-                        class: 'tw-flex tw-flex-col tw-overflow-auto'
-                    }, standalone: false, template: "<ng-content></ng-content>\r\n" }]
-        }] });
 class BarsaChatThreadsListToolbarComponent {
+    constructor() {
+        this.displayName = input('');
+        this.avatar = input('');
+        this.add = output();
+        this.edit = output();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatThreadsListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BarsaChatThreadsListToolbarComponent, isStandalone: false, selector: "bsu-barsa-chat-threads-list-toolbar", host: { classAttribute: "tw-relative tw-shrink-0 tw-grow-0 tw-w-full tw-h-16 tw-flex tw-justify-between tw-items-center tw-px-4 tw-bg-zinc-200/[.7] dark:tw-bg-zinc-700/[.7]" }, ngImport: i0, template: "<div>\r\n    <img src=\"https://picsum.photos/100?workAround=1234\" class=\"tw-size-12 tw-rounded-full\" />\r\n</div>\r\n<div class=\"tw-absolute tw-top-1/2 -tw-translate-y-1/2 tw-left-1/2 -tw-translate-x-1/2 tw-text-base\">\r\n    \u062F\u0631 \u062D\u0627\u0644 \u0627\u062A\u0635\u0627\u0644...\r\n</div>\r\n<div>\r\n    <button fd-button fdType=\"transparent\" glyph=\"edit\"></button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: BarsaChatThreadsListToolbarComponent, isStandalone: false, selector: "bsu-barsa-chat-threads-list-toolbar", inputs: { displayName: { classPropertyName: "displayName", publicName: "displayName", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { add: "add", edit: "edit" }, host: { classAttribute: "tw-relative tw-shrink-0 tw-grow-0 tw-w-full tw-h-16 tw-flex tw-justify-between tw-items-center tw-px-4" }, ngImport: i0, template: "<!-- <div>\r\n    <img [src]=\"avatar()\" class=\"tw-size-12 tw-rounded-full\" />\r\n</div>\r\n<div class=\"tw-absolute tw-top-1/2 -tw-translate-y-1/2 tw-left-1/2 -tw-translate-x-1/2 tw-text-base\">\r\n    {{displayName()}}\r\n</div> -->\r\n<div>\r\n    <button fd-button fdType=\"transparent\" glyph=\"edit\" (click)=\"edit.emit()\"></button>\r\n    <button fd-button fdType=\"transparent\" glyph=\"add\" (click)=\"add.emit()\"></button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatThreadsListToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-barsa-chat-threads-list-toolbar', host: {
-                        class: 'tw-relative tw-shrink-0 tw-grow-0 tw-w-full tw-h-16 tw-flex tw-justify-between tw-items-center tw-px-4 ' +
-                            'tw-bg-zinc-200/[.7] dark:tw-bg-zinc-700/[.7]'
-                    }, standalone: false, template: "<div>\r\n    <img src=\"https://picsum.photos/100?workAround=1234\" class=\"tw-size-12 tw-rounded-full\" />\r\n</div>\r\n<div class=\"tw-absolute tw-top-1/2 -tw-translate-y-1/2 tw-left-1/2 -tw-translate-x-1/2 tw-text-base\">\r\n    \u062F\u0631 \u062D\u0627\u0644 \u0627\u062A\u0635\u0627\u0644...\r\n</div>\r\n<div>\r\n    <button fd-button fdType=\"transparent\" glyph=\"edit\"></button>\r\n</div>\r\n" }]
+                        class: `tw-relative tw-shrink-0 tw-grow-0 tw-w-full tw-h-16 tw-flex tw-justify-between tw-items-center tw-px-4`
+                    }, standalone: false, template: "<!-- <div>\r\n    <img [src]=\"avatar()\" class=\"tw-size-12 tw-rounded-full\" />\r\n</div>\r\n<div class=\"tw-absolute tw-top-1/2 -tw-translate-y-1/2 tw-left-1/2 -tw-translate-x-1/2 tw-text-base\">\r\n    {{displayName()}}\r\n</div> -->\r\n<div>\r\n    <button fd-button fdType=\"transparent\" glyph=\"edit\" (click)=\"edit.emit()\"></button>\r\n    <button fd-button fdType=\"transparent\" glyph=\"add\" (click)=\"add.emit()\"></button>\r\n</div>\r\n" }]
         }] });
 class BarsaChatComponent extends FormBaseComponent {
     constructor() {
         super(...arguments);
-        this.simple = true;
-        this.moment = jmoment;
+        this.simple = false;
         this.selectedThread = signal(null);
         this.messages = signal(null);
         this.replyingMessage = signal(null);
         this._newMessageText = '';
     }
-    onTextChange($event) {
-        this._newMessageText = $event.target.value;
-    }
     ngOnInit() {
         super.ngOnInit();
         document.body.classList.add('chat-mode');
@@ -15262,8 +15262,22 @@ class BarsaChatComponent extends FormBaseComponent {
     ngOnDestroy() {
         document.body.classList.remove('chat-mode');
     }
+    onTextChange($event) {
+        this._newMessageText = $event.target.value;
+    }
+    onEditUser(_mo) { }
+    onAddContact(reportId, parentMo) {
+        BarsaApi.Bw.Report.Show({
+            ReportId: reportId,
+            CallBackFn: (selectedMo) => {
+                if (selectedMo?.length) {
+                    this._portalService.RunBlMethodAsync('AddGoftegoUser', [selectedMo[0].GetId(), parentMo]);
+                }
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatComponent, isStandalone: false, selector: "bsu-barsa-chat", 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.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: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "cellEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: 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.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatComponent, isStandalone: false, selector: "bsu-barsa-chat", 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-bg-gradient-to-r tw-from-[color-mix(in_srgb,var(--sapBackgroundColor)_95%,black_10%)] tw-to-[var(--sapBackgroundColor)]\"\r\n    fillEmptySpace\r\n    [class.tw-h-screen]=\"!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 class=\"tw-w-full tw-h-full tw-flex tw-shrink-0 tw-relative\" [style.background-color]=\"'var(--sapBaseColor)'\">\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                @if(mo$ | async ;as mo){\r\n                <bsu-barsa-chat-threads-list-toolbar\r\n                    [displayName]=\"mo.NewChat.MessageOwnerProfile.DisplayName\"\r\n                    [avatar]=\"\r\n                        mo.NewChat.MessageOwnerProfile.UserAvatar.FileId\r\n                            | picFieldSrc: 'ID':mo.NewChat.MessageOwnerProfile.Id\r\n                    \"\r\n                    (add)=\"onAddContact(mo.GoftegoUsers.ReportId, mo)\"\r\n                    (edit)=\"onEditUser(mo.NewChat.MessageOwnerProfile)\"\r\n                ></bsu-barsa-chat-threads-list-toolbar>\r\n                } @if(layout94$ | async;as layout94){\r\n                     @if (\"\u062C\u0633\u062A\u062C\u0648 \u06A9\u0627\u0631\u0628\u0631\" | controlUi: layout94; as configUi) \r\n                     {\r\n                        <bsu-layout-control [config]=\"configUi\"></bsu-layout-control>\r\n                    } \r\n                     @if (\"\u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0627\u0631\u0628\u0631\u0627\u0646\" | controlUi: layout94; as configUi) \r\n                     {\r\n                        <bsu-layout-control [config]=\"configUi\" style=\"flex: 1\"></bsu-layout-control>\r\n                    } \r\n            }\r\n            </div>\r\n        </div>\r\n        } @else {\r\n        <div\r\n            class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('assets/chat-bg.png')] tw-bg-fixed tw-opacity-25\"\r\n        ></div>\r\n        }\r\n        <div\r\n            class=\"tw-grow tw-shrink tw-relative\"\r\n            [ngClass]=\"{\r\n                'md:tw-py-6 md:tw-pl-6 tw-hidden md:tw-flex': !simple,\r\n                'tw-flex': simple\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                @if(!simple){\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                <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\r\n                        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        </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.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: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "cellEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: BarsaChatContentComponent, selector: "bsu-barsa-chat-content" }, { kind: "component", type: BarsaChatThreadsListToolbarComponent, selector: "bsu-barsa-chat-threads-list-toolbar", inputs: ["displayName", "avatar"], outputs: ["add", "edit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], animations: [
             trigger('inContentAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'scale(50%, 50%)' }),
@@ -15309,7 +15323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                                 animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(50%)' }))
                             ])
                         ])
-                    ], standalone: false, template: "<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" }]
+                    ], standalone: false, template: "<div\r\n    class=\"tw-flex tw-w-full tw-bg-gradient-to-r tw-bg-gradient-to-r tw-from-[color-mix(in_srgb,var(--sapBackgroundColor)_95%,black_10%)] tw-to-[var(--sapBackgroundColor)]\"\r\n    fillEmptySpace\r\n    [class.tw-h-screen]=\"!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 class=\"tw-w-full tw-h-full tw-flex tw-shrink-0 tw-relative\" [style.background-color]=\"'var(--sapBaseColor)'\">\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                @if(mo$ | async ;as mo){\r\n                <bsu-barsa-chat-threads-list-toolbar\r\n                    [displayName]=\"mo.NewChat.MessageOwnerProfile.DisplayName\"\r\n                    [avatar]=\"\r\n                        mo.NewChat.MessageOwnerProfile.UserAvatar.FileId\r\n                            | picFieldSrc: 'ID':mo.NewChat.MessageOwnerProfile.Id\r\n                    \"\r\n                    (add)=\"onAddContact(mo.GoftegoUsers.ReportId, mo)\"\r\n                    (edit)=\"onEditUser(mo.NewChat.MessageOwnerProfile)\"\r\n                ></bsu-barsa-chat-threads-list-toolbar>\r\n                } @if(layout94$ | async;as layout94){\r\n                     @if (\"\u062C\u0633\u062A\u062C\u0648 \u06A9\u0627\u0631\u0628\u0631\" | controlUi: layout94; as configUi) \r\n                     {\r\n                        <bsu-layout-control [config]=\"configUi\"></bsu-layout-control>\r\n                    } \r\n                     @if (\"\u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0627\u0631\u0628\u0631\u0627\u0646\" | controlUi: layout94; as configUi) \r\n                     {\r\n                        <bsu-layout-control [config]=\"configUi\" style=\"flex: 1\"></bsu-layout-control>\r\n                    } \r\n            }\r\n            </div>\r\n        </div>\r\n        } @else {\r\n        <div\r\n            class=\"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('assets/chat-bg.png')] tw-bg-fixed tw-opacity-25\"\r\n        ></div>\r\n        }\r\n        <div\r\n            class=\"tw-grow tw-shrink tw-relative\"\r\n            [ngClass]=\"{\r\n                'md:tw-py-6 md:tw-pl-6 tw-hidden md:tw-flex': !simple,\r\n                'tw-flex': simple\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                @if(!simple){\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                <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\r\n                        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        </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
             }] } });
@@ -15358,7 +15372,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 class BarsaChatMessageComponent {
     constructor() {
         this.reply = new EventEmitter();
-        this.userId = '_IougKSKlxFxAftSI7a48Szk-GkM1';
     }
     imageRatio(image) {
         const { originalWidth, originalHeight } = image;
@@ -15377,7 +15390,7 @@ class BarsaChatMessageComponent {
         return { ...image, displayWidth, displayHeight };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatMessageComponent, isStandalone: false, selector: "bsu-barsa-chat-message", inputs: { message: "message", showSender: "showSender", nextIsSame: "nextIsSame", pervIsSame: "pervIsSame", badge: "badge", nextHasBadge: "nextHasBadge", badgeLabel: "badgeLabel" }, outputs: { reply: "reply" }, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$7.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$5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: UtilDateToHhMmPipe, name: "utilDateToHhMm" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatMessageComponent, isStandalone: false, selector: "bsu-barsa-chat-message", inputs: { message: "message", showSender: "showSender", nextIsSame: "nextIsSame", pervIsSame: "pervIsSame", badge: "badge", nextHasBadge: "nextHasBadge", badgeLabel: "badgeLabel" }, outputs: { reply: "reply" }, ngImport: i0, template: "<div\r\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\r\n    [ngClass]=\"{\r\n'tw-pt-1': pervIsSame,\r\n'tw-pt-3': !pervIsSame,\r\n}\"\r\n>\r\n    @if (badge) {\r\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\r\n        <div class=\"tw-w-fit tw-bg-zinc-500 tw-text-white tw-px-4 tw-mx-auto tw-rounded-full tw-text-md\">\r\n            {{ badgeLabel }}\r\n        </div>\r\n    </div>\r\n    }\r\n    <div\r\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\r\n        [ngClass]=\"{\r\n'tw-justify-start': message.owner.id === message.userId,\r\n'tw-flex-row-reverse': message.owner.id !== message.userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === message.userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== message.userId,\r\n    }\"\r\n    >\r\n        @if (!nextIsSame || nextHasBadge) {\r\n        <fd-avatar\r\n            size=\"s\"\r\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\r\n            [circle]=\"true\"\r\n            [image]=\"message.owner?.avatar\"\r\n            [placeholder]=\"message.owner.avatar ? false : true\"\r\n        ></fd-avatar>\r\n        } @if (!nextIsSame || nextHasBadge) {\r\n        <div\r\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\r\n            [ngClass]=\"{\r\n                'tw-right-11 tw-border-b-green-100 tw-border-l-green-100 tw-border-r-transparent':\r\n                    message.owner.id === message.userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== message.userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            @inPaneAnimation\r\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\r\n            [ngClass]=\"{\r\n                '!tw-rounded-br-none':\r\n                    message.owner.id === message.userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== message.userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === message.userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== message.userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId && !message.image,\r\n'tw-bg-default': message.owner.id !== message.userId && !message.image,\r\n'tw-absolute tw-top-0 tw-right-0 tw-pb-8 tw-w-full tw-rounded-tr-2xl tw-bg-gradient-to-b tw-to-transparent': message.image,\r\n'tw-from-green-100': message.owner.id === message.userId && message.image,\r\n'tw-from-default': message.owner.id !== message.userId && message.image,\r\n                    }\"\r\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\r\n            >\r\n                {{ message.owner.name }}\r\n            </div>\r\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100/[.3]': message.owner.id === message.userId,\r\n'tw-bg-default/[.3]': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\r\n            >\r\n                <a\r\n                    [download]=\"message.image.name\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\r\n                    class=\"tw-absolute tw-w-full tw-h-full tw-bg-black/[.4] dark:tw-bg-white/[.4] tw-opacity-0 hover:tw-opacity-100 tw-transition-all tw-cursor-pointer tw-flex tw-justify-center tw-items-center\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\r\n                </a>\r\n                <img\r\n                    [ngStyle]=\"{\r\n                        width: image.displayWidth + 'px',\r\n                        height: image.displayHeight + 'px'\r\n                    }\"\r\n                    [src]=\"image.url\"\r\n                />\r\n            </div>\r\n            } } @for(file of message.files;track file.Id) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\r\n            >\r\n                <a\r\n                    downloadFiles\r\n                    [files]=\"[file]\"\r\n                    class=\"tw-shrink-0 tw-row-0 tw-size-12 tw-rounded-lg tw-bg-orange-400 tw-flex tw-justify-center tw-items-center tw-cursor-pointer tw-transition-all hover:tw-bg-orange-600\"\r\n                >\r\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\r\n                        {{ file.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span\r\n                        class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\"\r\n                        [attr.title]=\"file.FileName\"\r\n                    >\r\n                        {{ file.FileName }}</span\r\n                    >\r\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\r\n                        {{ file.Size }}KB</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\r\n                [innerHTML]=\"message.text\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-flex tw-w-full tw-px-2 tw-pt-1 tw-pb-2 tw-items-center tw-gap-2 tw-justify-end\"\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== message.userId,\r\n}\"\r\n            >\r\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">{{\r\n                    message.createdAt | utilDateToHhMm\r\n                }}</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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$7.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$5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "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)' }),
@@ -15403,7 +15416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                                 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            } } @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" }]
+                    ], standalone: false, template: "<div\r\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\r\n    [ngClass]=\"{\r\n'tw-pt-1': pervIsSame,\r\n'tw-pt-3': !pervIsSame,\r\n}\"\r\n>\r\n    @if (badge) {\r\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\r\n        <div class=\"tw-w-fit tw-bg-zinc-500 tw-text-white tw-px-4 tw-mx-auto tw-rounded-full tw-text-md\">\r\n            {{ badgeLabel }}\r\n        </div>\r\n    </div>\r\n    }\r\n    <div\r\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\r\n        [ngClass]=\"{\r\n'tw-justify-start': message.owner.id === message.userId,\r\n'tw-flex-row-reverse': message.owner.id !== message.userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === message.userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== message.userId,\r\n    }\"\r\n    >\r\n        @if (!nextIsSame || nextHasBadge) {\r\n        <fd-avatar\r\n            size=\"s\"\r\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\r\n            [circle]=\"true\"\r\n            [image]=\"message.owner?.avatar\"\r\n            [placeholder]=\"message.owner.avatar ? false : true\"\r\n        ></fd-avatar>\r\n        } @if (!nextIsSame || nextHasBadge) {\r\n        <div\r\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\r\n            [ngClass]=\"{\r\n                'tw-right-11 tw-border-b-green-100 tw-border-l-green-100 tw-border-r-transparent':\r\n                    message.owner.id === message.userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== message.userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            @inPaneAnimation\r\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\r\n            [ngClass]=\"{\r\n                '!tw-rounded-br-none':\r\n                    message.owner.id === message.userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== message.userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === message.userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== message.userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId && !message.image,\r\n'tw-bg-default': message.owner.id !== message.userId && !message.image,\r\n'tw-absolute tw-top-0 tw-right-0 tw-pb-8 tw-w-full tw-rounded-tr-2xl tw-bg-gradient-to-b tw-to-transparent': message.image,\r\n'tw-from-green-100': message.owner.id === message.userId && message.image,\r\n'tw-from-default': message.owner.id !== message.userId && message.image,\r\n                    }\"\r\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\r\n            >\r\n                {{ message.owner.name }}\r\n            </div>\r\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100/[.3]': message.owner.id === message.userId,\r\n'tw-bg-default/[.3]': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\r\n            >\r\n                <a\r\n                    [download]=\"message.image.name\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\r\n                    class=\"tw-absolute tw-w-full tw-h-full tw-bg-black/[.4] dark:tw-bg-white/[.4] tw-opacity-0 hover:tw-opacity-100 tw-transition-all tw-cursor-pointer tw-flex tw-justify-center tw-items-center\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\r\n                </a>\r\n                <img\r\n                    [ngStyle]=\"{\r\n                        width: image.displayWidth + 'px',\r\n                        height: image.displayHeight + 'px'\r\n                    }\"\r\n                    [src]=\"image.url\"\r\n                />\r\n            </div>\r\n            } } @for(file of message.files;track file.Id) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\r\n            >\r\n                <a\r\n                    downloadFiles\r\n                    [files]=\"[file]\"\r\n                    class=\"tw-shrink-0 tw-row-0 tw-size-12 tw-rounded-lg tw-bg-orange-400 tw-flex tw-justify-center tw-items-center tw-cursor-pointer tw-transition-all hover:tw-bg-orange-600\"\r\n                >\r\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\r\n                        {{ file.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span\r\n                        class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\"\r\n                        [attr.title]=\"file.FileName\"\r\n                    >\r\n                        {{ file.FileName }}</span\r\n                    >\r\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\r\n                        {{ file.Size }}KB</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\r\n                [innerHTML]=\"message.text\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-flex tw-w-full tw-px-2 tw-pt-1 tw-pb-2 tw-items-center tw-gap-2 tw-justify-end\"\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== message.userId,\r\n}\"\r\n            >\r\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">{{\r\n                    message.createdAt | utilDateToHhMm\r\n                }}</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: [{
@@ -15422,19 +15435,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Output
             }] } });
-class BarsaChatThreadComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatThreadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatThreadComponent, isStandalone: false, selector: "bsu-barsa-chat-thread", inputs: { thread: "thread" }, host: { classAttribute: "tw-w-full tw-h-[4.5rem] tw-flex tw-gap-2 tw-border-b tw-border-b-gray-200 dark:tw-border-b-gray-600 tw-p-2 tw-cursor-pointer tw-bg-default hover:tw-bg-zinc-100 hover:dark:tw-bg-black tw-transition-all" }, ngImport: i0, template: "<div class=\"tw-relative tw-grow-0 tw-shrink-0 tw-size-14\">\r\n    <img class=\"tw-w-full tw-h-full tw-rounded-full\" [src]=\"thread.avatar\" />\r\n    @if (thread.status === 2) {\r\n    <div\r\n        class=\"tw-absolute tw-bottom-0 tw-left-0 tw-border-2 tw-border-default tw-size-4 tw-rounded-full\"\r\n        [ngClass]=\"{\r\n    'tw-bg-gray-300': thread.status === 0,\r\n    'tw-bg-gray-700': thread.status === 1,\r\n    'tw-bg-green-600': thread.status === 2,\r\n    'tw-bg-red-600': thread.status === 3,\r\n    }\"\r\n    ></div>\r\n    }\r\n</div>\r\n<div class=\"tw-grow tw-shrink tw-flex tw-flex-col tw-gap-0.5\">\r\n    <span class=\"tw-font-bold tw-text-base tw-text-sm\">{{ thread.title }}</span>\r\n    <span class=\"tw-text-gray-500 dark:tw-text-gray-300 tw-line-clamp-2 tw-text-xs\">{{ thread.lastMessage.text }}</span>\r\n</div>\r\n<div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-justify-between tw-items-center\">\r\n    @if (thread.unreadCount) {\r\n    <div\r\n        class=\"tw-text-white tw-rounded-full tw-text-sm tw-px-1.5\"\r\n        [ngClass]=\"{\r\n            'tw-bg-blue-500': !thread.muted,\r\n            'tw-bg-zinc-500': thread.muted\r\n        }\"\r\n    >\r\n        {{ thread.unreadCount }}\r\n    </div>\r\n    } @else {\r\n    <div></div>\r\n    }\r\n    <div>\r\n        <fd-popover placement=\"bottom-end\" title=\"bottom-end\" (click)=\"$event.stopPropagation()\">\r\n            <fd-popover-control>\r\n                <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n            </fd-popover-control>\r\n            <fd-popover-body minWidth=\"10rem\">\r\n                <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                    <label\r\n                        class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                    >\r\n                        <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"bell-2\"></fd-icon>\r\n                        <span class=\"!tw-text-base\">\u0628\u06CC\u200C\u0635\u062F\u0627 \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=\"pushpin-on\"></fd-icon>\r\n                        <span class=\"!tw-text-base\">\u0633\u0646\u062C\u0627\u0642 \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", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i3$5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }] }); }
+class BarsaChatUserListComponent extends ReportViewBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.users = signal([]);
+        this._picFieldSrc = inject(PictureFieldSourcePipe);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._prepareUsers(this.moDataList);
+    }
+    ngOnChanges(changes) {
+        const { moDataList } = changes;
+        super.ngOnChanges(changes);
+        moDataList && this._prepareUsers(moDataList.currentValue);
+    }
+    _prepareUsers(moDataList) {
+        const users = [];
+        moDataList.forEach((c) => {
+            users.push({
+                id: c.Id,
+                mo: c,
+                title: c.$Caption,
+                status: c.Status,
+                muted: false,
+                unreadCount: 0,
+                selected: c.$IsChecked,
+                lastMessage: { text: '' },
+                avatar: this._picFieldSrc.transform(c.UserAvatar?.FileId, 'ID', c.Id)
+            });
+        });
+        this.users.set(users);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatUserListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatUserListComponent, isStandalone: false, selector: "bsu-barsa-chat-user-list", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(users().length){ @for(user of users();track user.id;let index=$index){\r\n<div\r\n    class=\"tw-h-[4.5rem] tw-flex tw-gap-2 tw-border-b tw-border-b-gray-200 dark:tw-border-b-gray-600 tw-p-2 tw-cursor-pointer 'tw-bg-default hover:tw-bg-zinc-100 hover:dark:tw-bg-black tw-transition-all\"\r\n    (click)=\"onRowCheck({ mo: user.mo, index: index })\"\r\n    [class.tw-bg-zinc-100]=\"user.selected\"\r\n>\r\n    <div class=\"tw-relative tw-grow-0 tw-shrink-0 tw-size-14\">\r\n        <img class=\"tw-w-full tw-h-full tw-rounded-full\" [src]=\"user.avatar\" />\r\n        @if (user.status === 2) {\r\n        <div\r\n            class=\"tw-absolute tw-bottom-0 tw-left-0 tw-border-2 tw-border-default tw-size-4 tw-rounded-full\"\r\n            [ngClass]=\"{\r\n    'tw-bg-gray-300': user.status === 0,\r\n    'tw-bg-gray-700': user.status === 1,\r\n    'tw-bg-green-600': user.status === 2,\r\n    'tw-bg-red-600': user.status === 3,\r\n    }\"\r\n        ></div>\r\n        }\r\n    </div>\r\n    <div class=\"tw-grow tw-shrink tw-flex tw-flex-col tw-gap-0.5\">\r\n        <span class=\"tw-font-bold tw-text-base tw-text-sm\">{{ user.title }}</span>\r\n        <span class=\"tw-text-gray-500 dark:tw-text-gray-300 tw-line-clamp-2 tw-text-xs\">{{\r\n            user.lastMessage.text\r\n        }}</span>\r\n    </div>\r\n    <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-justify-between tw-items-center\">\r\n        @if (user.unreadCount) {\r\n        <div\r\n            class=\"tw-text-white tw-rounded-full tw-text-sm tw-px-1.5\"\r\n            [ngClass]=\"{\r\n                'tw-bg-blue-500': !user.muted,\r\n                'tw-bg-zinc-500': user.muted\r\n            }\"\r\n        >\r\n            {{ user.unreadCount }}\r\n        </div>\r\n        } @else {\r\n        <div></div>\r\n        }\r\n        <div>\r\n            <fd-popover placement=\"bottom-end\" title=\"bottom-end\" (click)=\"$event.stopPropagation()\">\r\n                <fd-popover-control>\r\n                    <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n                </fd-popover-control>\r\n                <fd-popover-body minWidth=\"10rem\">\r\n                    <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                        <label\r\n                            class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                        >\r\n                            <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"bell-2\"></fd-icon>\r\n                            <span class=\"!tw-text-base\">\u0628\u06CC\u200C\u0635\u062F\u0627 \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=\"pushpin-on\"></fd-icon>\r\n                            <span class=\"!tw-text-base\">\u0633\u0646\u062C\u0627\u0642 \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} }\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i3$5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatUserListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsu-barsa-chat-user-list', standalone: false, template: "@if(users().length){ @for(user of users();track user.id;let index=$index){\r\n<div\r\n    class=\"tw-h-[4.5rem] tw-flex tw-gap-2 tw-border-b tw-border-b-gray-200 dark:tw-border-b-gray-600 tw-p-2 tw-cursor-pointer 'tw-bg-default hover:tw-bg-zinc-100 hover:dark:tw-bg-black tw-transition-all\"\r\n    (click)=\"onRowCheck({ mo: user.mo, index: index })\"\r\n    [class.tw-bg-zinc-100]=\"user.selected\"\r\n>\r\n    <div class=\"tw-relative tw-grow-0 tw-shrink-0 tw-size-14\">\r\n        <img class=\"tw-w-full tw-h-full tw-rounded-full\" [src]=\"user.avatar\" />\r\n        @if (user.status === 2) {\r\n        <div\r\n            class=\"tw-absolute tw-bottom-0 tw-left-0 tw-border-2 tw-border-default tw-size-4 tw-rounded-full\"\r\n            [ngClass]=\"{\r\n    'tw-bg-gray-300': user.status === 0,\r\n    'tw-bg-gray-700': user.status === 1,\r\n    'tw-bg-green-600': user.status === 2,\r\n    'tw-bg-red-600': user.status === 3,\r\n    }\"\r\n        ></div>\r\n        }\r\n    </div>\r\n    <div class=\"tw-grow tw-shrink tw-flex tw-flex-col tw-gap-0.5\">\r\n        <span class=\"tw-font-bold tw-text-base tw-text-sm\">{{ user.title }}</span>\r\n        <span class=\"tw-text-gray-500 dark:tw-text-gray-300 tw-line-clamp-2 tw-text-xs\">{{\r\n            user.lastMessage.text\r\n        }}</span>\r\n    </div>\r\n    <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-justify-between tw-items-center\">\r\n        @if (user.unreadCount) {\r\n        <div\r\n            class=\"tw-text-white tw-rounded-full tw-text-sm tw-px-1.5\"\r\n            [ngClass]=\"{\r\n                'tw-bg-blue-500': !user.muted,\r\n                'tw-bg-zinc-500': user.muted\r\n            }\"\r\n        >\r\n            {{ user.unreadCount }}\r\n        </div>\r\n        } @else {\r\n        <div></div>\r\n        }\r\n        <div>\r\n            <fd-popover placement=\"bottom-end\" title=\"bottom-end\" (click)=\"$event.stopPropagation()\">\r\n                <fd-popover-control>\r\n                    <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n                </fd-popover-control>\r\n                <fd-popover-body minWidth=\"10rem\">\r\n                    <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                        <label\r\n                            class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                        >\r\n                            <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"bell-2\"></fd-icon>\r\n                            <span class=\"!tw-text-base\">\u0628\u06CC\u200C\u0635\u062F\u0627 \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=\"pushpin-on\"></fd-icon>\r\n                            <span class=\"!tw-text-base\">\u0633\u0646\u062C\u0627\u0642 \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} }\r\n" }]
+        }] });
+class BarsaChatThreadsListComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatThreadsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BarsaChatThreadsListComponent, isStandalone: false, selector: "bsu-barsa-chat-threads-list", host: { classAttribute: "tw-flex tw-flex-col tw-overflow-auto" }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatThreadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatThreadsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-chat-thread', host: {
-                        class: 'tw-w-full tw-h-[4.5rem] tw-flex tw-gap-2 tw-border-b tw-border-b-gray-200 dark:tw-border-b-gray-600 tw-p-2 tw-cursor-pointer ' +
-                            'tw-bg-default hover:tw-bg-zinc-100 hover:dark:tw-bg-black tw-transition-all'
-                    }, standalone: false, template: "<div class=\"tw-relative tw-grow-0 tw-shrink-0 tw-size-14\">\r\n    <img class=\"tw-w-full tw-h-full tw-rounded-full\" [src]=\"thread.avatar\" />\r\n    @if (thread.status === 2) {\r\n    <div\r\n        class=\"tw-absolute tw-bottom-0 tw-left-0 tw-border-2 tw-border-default tw-size-4 tw-rounded-full\"\r\n        [ngClass]=\"{\r\n    'tw-bg-gray-300': thread.status === 0,\r\n    'tw-bg-gray-700': thread.status === 1,\r\n    'tw-bg-green-600': thread.status === 2,\r\n    'tw-bg-red-600': thread.status === 3,\r\n    }\"\r\n    ></div>\r\n    }\r\n</div>\r\n<div class=\"tw-grow tw-shrink tw-flex tw-flex-col tw-gap-0.5\">\r\n    <span class=\"tw-font-bold tw-text-base tw-text-sm\">{{ thread.title }}</span>\r\n    <span class=\"tw-text-gray-500 dark:tw-text-gray-300 tw-line-clamp-2 tw-text-xs\">{{ thread.lastMessage.text }}</span>\r\n</div>\r\n<div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-justify-between tw-items-center\">\r\n    @if (thread.unreadCount) {\r\n    <div\r\n        class=\"tw-text-white tw-rounded-full tw-text-sm tw-px-1.5\"\r\n        [ngClass]=\"{\r\n            'tw-bg-blue-500': !thread.muted,\r\n            'tw-bg-zinc-500': thread.muted\r\n        }\"\r\n    >\r\n        {{ thread.unreadCount }}\r\n    </div>\r\n    } @else {\r\n    <div></div>\r\n    }\r\n    <div>\r\n        <fd-popover placement=\"bottom-end\" title=\"bottom-end\" (click)=\"$event.stopPropagation()\">\r\n            <fd-popover-control>\r\n                <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n            </fd-popover-control>\r\n            <fd-popover-body minWidth=\"10rem\">\r\n                <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                    <label\r\n                        class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                    >\r\n                        <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"bell-2\"></fd-icon>\r\n                        <span class=\"!tw-text-base\">\u0628\u06CC\u200C\u0635\u062F\u0627 \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=\"pushpin-on\"></fd-icon>\r\n                        <span class=\"!tw-text-base\">\u0633\u0646\u062C\u0627\u0642 \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" }]
-        }], propDecorators: { thread: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'bsu-barsa-chat-threads-list', host: {
+                        class: 'tw-flex tw-flex-col tw-overflow-auto'
+                    }, standalone: false, template: "<ng-content></ng-content>\r\n" }]
+        }] });
 class UtilChatTimeBadgePipe {
     transform(value) {
@@ -15463,6 +15513,8 @@ class BarsaChatListComponent extends ReportViewBaseComponent {
         this._paginVisibleStatus = signal(IntersectionStatus.Visible);
         this._pagingSetting = signal(null);
         this._firstTime = true;
+        this.currentUserId = '';
+        this._pageChanged = false;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -15484,6 +15536,7 @@ class BarsaChatListComponent extends ReportViewBaseComponent {
             }
             const x = this._pagingSetting();
             if (x && x.Page < x.TotalPages) {
+                this._pageChanged = true;
                 this._ulvMainService.pageChanged(x.Page + 1);
             }
         }
@@ -15512,6 +15565,7 @@ class BarsaChatListComponent extends ReportViewBaseComponent {
             readAt: this._rval.transform(this.viewSetting.ReadAtField, i, this.allColumns),
             files: this._rval.transform(this.viewSetting.FileDataField, i, this.allColumns)?.Files,
             image: this._rval.transform(this.viewSetting.PictureDataField, i, this.allColumns),
+            userId: this.viewSetting.CurrentSplUser,
             owner: {
                 id: this._rval.transform(this.viewSetting.UserField, i, this.allColumns)?.Id,
                 name: this._rval.transform(this.viewSetting.DisplayNameField, i, this.allColumns, true),
@@ -15525,7 +15579,13 @@ class BarsaChatListComponent extends ReportViewBaseComponent {
             },
             text: this._rval.transform(this.viewSetting.MessageTextField, i, this.allColumns)
         }));
-        this.messages.set(newMessages.length ? [...this.messages(), ...mappedMoList] : [...mappedMoList, ...this.messages()]);
+        if (this._pageChanged) {
+            this.messages.set(newMessages.length ? [...this.messages(), ...mappedMoList] : [...mappedMoList, ...this.messages()]);
+        }
+        else {
+            this.messages.set([...mappedMoList]);
+        }
+        this._pageChanged = false;
         x.forEach((c) => (c.$State = 'Unchanged'));
         if (newMessages.length || !this.pagingSetting?.Page) {
             this.scrollToBottom();
@@ -15535,7 +15595,7 @@ class BarsaChatListComponent extends ReportViewBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatListComponent, isStandalone: false, selector: "bsu-barsa-chat-list", inputs: { replyingMessage: "replyingMessage", simple: "simple" }, outputs: { setReplyingMessage: "setReplyingMessage" }, host: { properties: { "class.tw-pt-24": "simple" }, classAttribute: "tw-block tw-h-full tw-w-full" }, 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2$7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BarsaChatMessageComponent, selector: "bsu-barsa-chat-message", inputs: ["message", "showSender", "nextIsSame", "pervIsSame", "badge", "nextHasBadge", "badgeLabel"], outputs: ["reply"] }, { kind: "pipe", type: UtilChatTimeBadgePipe, name: "utilChatTimeBadge" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatListComponent, isStandalone: false, selector: "bsu-barsa-chat-list", inputs: { replyingMessage: "replyingMessage", simple: "simple" }, outputs: { setReplyingMessage: "setReplyingMessage" }, host: { properties: { "class.tw-pt-24": "simple" }, classAttribute: "tw-block tw-h-full tw-w-full" }, 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\r\n                intersectionObserver\r\n                [intersectionThreshold]=\"0.1\"\r\n                (visibilityChange)=\"onVisibilityChange($event)\"\r\n            ></div>\r\n            <div *cdkVirtualFor=\"let message of messages; let index = index\">\r\n                @if(message | mapToChatMessage:index:messages;as chatMessage){\r\n                <bsu-barsa-chat-message\r\n                    [message]=\"chatMessage\"\r\n                    [showSender]=\"true\"\r\n                    [nextIsSame]=\"chatMessage.nextIsSame\"\r\n                    [pervIsSame]=\"chatMessage.pervIsSame\"\r\n                    [badge]=\"chatMessage.badge\"\r\n                    [nextHasBadge]=\"chatMessage.nextHasBadge\"\r\n                    [badgeLabel]=\"chatMessage.badgeLabel\"\r\n                    (reply)=\"setReplyingMessage.emit($event)\"\r\n                ></bsu-barsa-chat-message>\r\n                }\r\n            </div>\r\n            @if (replyingMessage) {\r\n            <div class=\"tw-h-14\"></div>\r\n            }\r\n        </cdk-virtual-scroll-viewport>    \r\n</ng-template>\r\n<ng-template #simpleMode let-messages>\r\n    <div #chatContentElement>\r\n        @for (message of messages; track message.id) {\r\n        <bsu-barsa-chat-message\r\n            [message]=\"message\"\r\n            [showSender]=\"true\"\r\n            [nextIsSame]=\"messages?.[$index + 1]?.owner?.id === message.owner.id\"\r\n            [pervIsSame]=\"messages?.[$index - 1]?.owner?.id === message.owner.id\"\r\n            [badge]=\"!this.messages?.[$index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index - 1]?.createdAt).jDayOfYear())\"\r\n            [nextHasBadge]=\"!!this.messages?.[$index + 1] && (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index + 1]?.createdAt).jDayOfYear()) && message.owner.id === this.messages?.[$index + 1]?.owner?.id\"\r\n            [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\r\n            (reply)=\"setReplyingMessage.emit($event)\"\r\n        ></bsu-barsa-chat-message>\r\n        }\r\n    </div>\r\n    <div class=\"tw-h-4\"></div>\r\n</ng-template>\r\n", styles: [":host{height:665px}:host cdk-virtual-scroll-viewport{height:100%}:host cdk-virtual-scroll-viewport{scrollbar-track-color:transparent;scrollbar-color:#969699 transparent;overflow-y:scroll;scrollbar-width:thin}:host cdk-virtual-scroll-viewport::-webkit-scrollbar{height:10px;width:6px;border-radius:4px;background:transparent;transition:all .3s ease}:host cdk-virtual-scroll-viewport::-webkit-scrollbar:hover{background:#c6c7ca}:host cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:#969699;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2$7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BarsaChatMessageComponent, selector: "bsu-barsa-chat-message", inputs: ["message", "showSender", "nextIsSame", "pervIsSame", "badge", "nextHasBadge", "badgeLabel"], outputs: ["reply"] }, { kind: "pipe", type: i2.MapToChatMessagePipe, name: "mapToChatMessage" }, { kind: "pipe", type: UtilChatTimeBadgePipe, name: "utilChatTimeBadge" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatListComponent, decorators: [{
             type: Component,
@@ -15543,7 +15603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         // 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"] }]
+                    }, 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\r\n                intersectionObserver\r\n                [intersectionThreshold]=\"0.1\"\r\n                (visibilityChange)=\"onVisibilityChange($event)\"\r\n            ></div>\r\n            <div *cdkVirtualFor=\"let message of messages; let index = index\">\r\n                @if(message | mapToChatMessage:index:messages;as chatMessage){\r\n                <bsu-barsa-chat-message\r\n                    [message]=\"chatMessage\"\r\n                    [showSender]=\"true\"\r\n                    [nextIsSame]=\"chatMessage.nextIsSame\"\r\n                    [pervIsSame]=\"chatMessage.pervIsSame\"\r\n                    [badge]=\"chatMessage.badge\"\r\n                    [nextHasBadge]=\"chatMessage.nextHasBadge\"\r\n                    [badgeLabel]=\"chatMessage.badgeLabel\"\r\n                    (reply)=\"setReplyingMessage.emit($event)\"\r\n                ></bsu-barsa-chat-message>\r\n                }\r\n            </div>\r\n            @if (replyingMessage) {\r\n            <div class=\"tw-h-14\"></div>\r\n            }\r\n        </cdk-virtual-scroll-viewport>    \r\n</ng-template>\r\n<ng-template #simpleMode let-messages>\r\n    <div #chatContentElement>\r\n        @for (message of messages; track message.id) {\r\n        <bsu-barsa-chat-message\r\n            [message]=\"message\"\r\n            [showSender]=\"true\"\r\n            [nextIsSame]=\"messages?.[$index + 1]?.owner?.id === message.owner.id\"\r\n            [pervIsSame]=\"messages?.[$index - 1]?.owner?.id === message.owner.id\"\r\n            [badge]=\"!this.messages?.[$index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index - 1]?.createdAt).jDayOfYear())\"\r\n            [nextHasBadge]=\"!!this.messages?.[$index + 1] && (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index + 1]?.createdAt).jDayOfYear()) && message.owner.id === this.messages?.[$index + 1]?.owner?.id\"\r\n            [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\r\n            (reply)=\"setReplyingMessage.emit($event)\"\r\n        ></bsu-barsa-chat-message>\r\n        }\r\n    </div>\r\n    <div class=\"tw-h-4\"></div>\r\n</ng-template>\r\n", styles: [":host{height:665px}:host cdk-virtual-scroll-viewport{height:100%}:host cdk-virtual-scroll-viewport{scrollbar-track-color:transparent;scrollbar-color:#969699 transparent;overflow-y:scroll;scrollbar-width:thin}:host cdk-virtual-scroll-viewport::-webkit-scrollbar{height:10px;width:6px;border-radius:4px;background:transparent;transition:all .3s ease}:host cdk-virtual-scroll-viewport::-webkit-scrollbar:hover{background:#c6c7ca}:host cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:#969699;border-radius:4px}\n"] }]
         }], propDecorators: { _chatContentElement: [{
                 type: ViewChild,
                 args: ['chatContentElement', { read: ElementRef }]
@@ -16699,7 +16759,7 @@ const components = [
     BarsaChatComponent,
     BarsaChatContentComponent,
     BarsaChatMessageComponent,
-    BarsaChatThreadComponent,
+    BarsaChatUserListComponent,
     BarsaChatThreadsListComponent,
     BarsaChatThreadsListToolbarComponent,
     BarsaChatContentToolbarComponent,
@@ -16881,7 +16941,7 @@ class BarsaSapUiModule extends BaseModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaSapUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: BarsaSapUiModule, declarations: [BarsaBarDownloadFileComponent, UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, UiMapComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ReportNavigatorComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, BarsaTextEllipsisComponent, BarsaListFileLinearGmailComponent, BarsaLinkableItemsPanelComponent, BarsaEnumMenuButtonComponent, BarsaCardLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBarPanelComponent, BarsaFormSideContentComponent, BarsaSimpleFormComponent, FormToolbarComponent, BarsaListLayoutPanelComponent, BarsaGridLayoutPanelComponent, BarsaDynamicFieldComponent, UiMultiSelectRadioComponent, UiMultiSelectCheckboxComponent, UiNumIntSliderComponent, UiMultiSelectSliderComponent, UiMultiSelectCardComponent, UiMultiSelectSmileComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaColumnRowNumberComponent, BarsaCardRowPayamComponent, BarsaColumnRowNumberComponent, BarsaQuestionPostComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaAnswerCardComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaChipComponent, BarsaTagChipComponent, BarsaReportCardFlexViewComponent, BarsaTagsCategoryRowComponent, BarsaTagCategoriesComponent, BarsaReportOneOfListComponent, BarsaCardRowPayamComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatMessageComponent, BarsaChatThreadComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaModalComponent, BarsaTabRouteManagerComponent, BarsaBreadcrumbsComponent, BarsaRowInlineActionlistComponent, UiBpmnViewerComponent, UiNotificationViewComponent, NotificationItemActionsComponent, BarsaFormLayoutPanelComponent, UiReportCarouselViewComponent, BarsaCardBannerComponent, BarsaThemeComponent, BarsaImgSkeletonComponent, BarsaBottomMenuViewComponent, UiSignatureComponent, BarsaMegamenuComponent, UiMapReportComponent, BarsaInfobarsComponent, DynamicCommandComponent, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe, SapSizePipe, AvatarGridColPipe, ObjectStatusIconPipe, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective, DialogHandlerDirective, TableThDirective, ContentDensityDirective, DarkClassDirective, FixTabMoreDirective], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: BarsaSapUiModule, declarations: [BarsaBarDownloadFileComponent, UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, UiMapComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ReportNavigatorComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, BarsaTextEllipsisComponent, BarsaListFileLinearGmailComponent, BarsaLinkableItemsPanelComponent, BarsaEnumMenuButtonComponent, BarsaCardLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBarPanelComponent, BarsaFormSideContentComponent, BarsaSimpleFormComponent, FormToolbarComponent, BarsaListLayoutPanelComponent, BarsaGridLayoutPanelComponent, BarsaDynamicFieldComponent, UiMultiSelectRadioComponent, UiMultiSelectCheckboxComponent, UiNumIntSliderComponent, UiMultiSelectSliderComponent, UiMultiSelectCardComponent, UiMultiSelectSmileComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaColumnRowNumberComponent, BarsaCardRowPayamComponent, BarsaColumnRowNumberComponent, BarsaQuestionPostComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaAnswerCardComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaChipComponent, BarsaTagChipComponent, BarsaReportCardFlexViewComponent, BarsaTagsCategoryRowComponent, BarsaTagCategoriesComponent, BarsaReportOneOfListComponent, BarsaCardRowPayamComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatMessageComponent, BarsaChatUserListComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaModalComponent, BarsaTabRouteManagerComponent, BarsaBreadcrumbsComponent, BarsaRowInlineActionlistComponent, UiBpmnViewerComponent, UiNotificationViewComponent, NotificationItemActionsComponent, BarsaFormLayoutPanelComponent, UiReportCarouselViewComponent, BarsaCardBannerComponent, BarsaThemeComponent, BarsaImgSkeletonComponent, BarsaBottomMenuViewComponent, UiSignatureComponent, BarsaMegamenuComponent, UiMapReportComponent, BarsaInfobarsComponent, DynamicCommandComponent, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe, SapSizePipe, AvatarGridColPipe, ObjectStatusIconPipe, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective, DialogHandlerDirective, TableThDirective, ContentDensityDirective, DarkClassDirective, FixTabMoreDirective], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             BarsaNovinRayCoreModule,
@@ -16906,13 +16966,14 @@ class BarsaSapUiModule extends BaseModule {
             ResizableModule,
             PlatformIconTabBarModule, i237.ContentDensityModule, ScrollingModule,
             UtilDateToHhMmPipe,
-            UtilChatTimeBadgePipe], exports: [BarsaBarDownloadFileComponent, UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, UiMapComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ReportNavigatorComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, BarsaTextEllipsisComponent, BarsaListFileLinearGmailComponent, BarsaLinkableItemsPanelComponent, BarsaEnumMenuButtonComponent, BarsaCardLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBarPanelComponent, BarsaFormSideContentComponent, BarsaSimpleFormComponent, FormToolbarComponent, BarsaListLayoutPanelComponent, BarsaGridLayoutPanelComponent, BarsaDynamicFieldComponent, UiMultiSelectRadioComponent, UiMultiSelectCheckboxComponent, UiNumIntSliderComponent, UiMultiSelectSliderComponent, UiMultiSelectCardComponent, UiMultiSelectSmileComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaColumnRowNumberComponent, BarsaCardRowPayamComponent, BarsaColumnRowNumberComponent, BarsaQuestionPostComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaAnswerCardComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaChipComponent, BarsaTagChipComponent, BarsaReportCardFlexViewComponent, BarsaTagsCategoryRowComponent, BarsaTagCategoriesComponent, BarsaReportOneOfListComponent, BarsaCardRowPayamComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatMessageComponent, BarsaChatThreadComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaModalComponent, BarsaTabRouteManagerComponent, BarsaBreadcrumbsComponent, BarsaRowInlineActionlistComponent, UiBpmnViewerComponent, UiNotificationViewComponent, NotificationItemActionsComponent, BarsaFormLayoutPanelComponent, UiReportCarouselViewComponent, BarsaCardBannerComponent, BarsaThemeComponent, BarsaImgSkeletonComponent, BarsaBottomMenuViewComponent, UiSignatureComponent, BarsaMegamenuComponent, UiMapReportComponent, BarsaInfobarsComponent, DynamicCommandComponent, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective, DialogHandlerDirective, TableThDirective, ContentDensityDirective, DarkClassDirective, FixTabMoreDirective, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe, SapSizePipe, AvatarGridColPipe, ObjectStatusIconPipe] }); }
+            UtilChatTimeBadgePipe], exports: [BarsaBarDownloadFileComponent, UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, UiMapComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ReportNavigatorComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, BarsaTextEllipsisComponent, BarsaListFileLinearGmailComponent, BarsaLinkableItemsPanelComponent, BarsaEnumMenuButtonComponent, BarsaCardLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBarPanelComponent, BarsaFormSideContentComponent, BarsaSimpleFormComponent, FormToolbarComponent, BarsaListLayoutPanelComponent, BarsaGridLayoutPanelComponent, BarsaDynamicFieldComponent, UiMultiSelectRadioComponent, UiMultiSelectCheckboxComponent, UiNumIntSliderComponent, UiMultiSelectSliderComponent, UiMultiSelectCardComponent, UiMultiSelectSmileComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaColumnRowNumberComponent, BarsaCardRowPayamComponent, BarsaColumnRowNumberComponent, BarsaQuestionPostComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaAnswerCardComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaChipComponent, BarsaTagChipComponent, BarsaReportCardFlexViewComponent, BarsaTagsCategoryRowComponent, BarsaTagCategoriesComponent, BarsaReportOneOfListComponent, BarsaCardRowPayamComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatMessageComponent, BarsaChatUserListComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaModalComponent, BarsaTabRouteManagerComponent, BarsaBreadcrumbsComponent, BarsaRowInlineActionlistComponent, UiBpmnViewerComponent, UiNotificationViewComponent, NotificationItemActionsComponent, BarsaFormLayoutPanelComponent, UiReportCarouselViewComponent, BarsaCardBannerComponent, BarsaThemeComponent, BarsaImgSkeletonComponent, BarsaBottomMenuViewComponent, UiSignatureComponent, BarsaMegamenuComponent, UiMapReportComponent, BarsaInfobarsComponent, DynamicCommandComponent, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective, DialogHandlerDirective, TableThDirective, ContentDensityDirective, DarkClassDirective, FixTabMoreDirective, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe, SapSizePipe, AvatarGridColPipe, ObjectStatusIconPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaSapUiModule, providers: [
             { provide: DIALOG_SERVICE, useClass: DialogService },
             provideAppInitializer(() => {
                 const initializerFn = ((dynamicComponentService) => () => dynamicComponentService.addDynamicModuleResolver({
                     BarsaAuth: () => import('barsa-auth'),
                     BarsaKanban: () => import('barsa-kanban'),
+                    BarsaCalendar: () => import('barsa-calendar'),
                     BarsaDevelopComponents: () => import('barsa-develop-components'),
                     BarsaTiles: () => import('barsa-tiles')
                 }))(inject(DynamicComponentService));
@@ -16989,6 +17050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             const initializerFn = ((dynamicComponentService) => () => dynamicComponentService.addDynamicModuleResolver({
                                 BarsaAuth: () => import('barsa-auth'),
                                 BarsaKanban: () => import('barsa-kanban'),
+                                BarsaCalendar: () => import('barsa-calendar'),
                                 BarsaDevelopComponents: () => import('barsa-develop-components'),
                                 BarsaTiles: () => import('barsa-tiles')
                             }))(inject(DynamicComponentService));
@@ -17002,5 +17064,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { ApplyConditionalFormatsDirective, AvatarGridColPipe, BarsaAnswerCardComponent, BarsaAspViewerComponent, BarsaBarDownloadFileComponent, BarsaBarPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBottomMenuViewComponent, BarsaBreadcrumbsComponent, BarsaCardBannerComponent, BarsaCardLayoutPanelComponent, BarsaCardRowPayamComponent, BarsaCartableFormComponent, BarsaCartableGroupComponent, BarsaCartableTemplateComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaChatMessageComponent, BarsaChatThreadComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChipComponent, BarsaColumnIndicatorComponent, BarsaColumnRowNumberComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaDateTimePickerComponent, BarsaDynamicFieldComponent, BarsaEnumMenuButtonComponent, BarsaFieldKeyValueComponent, BarsaFormLayoutPanelComponent, BarsaFormSideContentComponent, BarsaGridLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaImgSkeletonComponent, BarsaInfobarsComponent, BarsaLinkableItemsPanelComponent, BarsaListFileLinearComponent, BarsaListFileLinearGmailComponent, BarsaListLayoutPanelComponent, BarsaMegamenuComponent, BarsaModalComponent, BarsaMonacoEditorComponent, BarsaNetworkOfflineComponent, BarsaPishnamayeshPayamComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionPostComponent, BarsaReportCardFlexViewComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaReportOneOfListComponent, BarsaRowInlineActionlistComponent, BarsaSapUiModule, BarsaSapUiRoutingModule, BarsaSearchFormComponent, BarsaSimpleFormComponent, BarsaTabRouteManagerComponent, BarsaTableColumnComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTagCategoriesComponent, BarsaTagChipComponent, BarsaTagsCategoryRowComponent, BarsaTextEllipsisComponent, BarsaThemeComponent, BarsaTinyemceComponent, BarsaToolbaritemSearchComponent, BarsaTreeItemComponent, BarsaUlvMainComponent, BlobViewerComponent, BreadcrumbComponent, CaptchaFieldComponent, CardItemComponent, CardViewContentComponent, ColRendererDirective, ColumnMatrixRendererComponent, ColumnRendererComponent, ContentDensityDirective, CustomDateTimeComponent, DarkClassDirective, DeviceInfoFieldBaseComponent, DialogHandlerDirective, DownloadFilesDirective, DynamicCommandComponent, DynamicPageSizePipe, FileInDialogComponent, FileViewerComponent, FileViewerContentComponent, FileViewerPopoverComponent, FixTabMoreDirective, FormDialogComponent, FormDialogLessComponent, FormToolbarButtonComponent, FormToolbarComponent, FormWizardComponent, FullscreenDialogDirective, FullscreenFilesDirective, FundamentalDynamicFormComponent, GanttDhtmlChartViewComponent, GetFormLayoutGrid, GlobalSearchComponent, GlobalSearchModuleComponent, GlobalSearchPanelComponent, HeaderAvatarComponent, HtreeCreateNewComponent, HyperlinkComponent, IconBusinessSuite, IconTNT, InlineSaveAndCancelComponent, LayoutActionsComponent, LayoutControlComponent, LayoutWizardComponent, ListItemComponent, LyEmptySpaceComponent, LyHorizontalLayoutComponent, LyLabelComponent, LyLayoutContainerComponent, LyLayoutContainerOfRootComponent, LyLayoutFieldLabelComponent, LyLayoutPanelComponent, LyLineComponent, LySimpleLabelComponent, LyTabContainerComponent, LyTabPageComponent, LyVerticalLayoutComponent, ManageFiltersReportComponent, MaskComponent, MatrixValuePipe, MessageStripComponent, NoDataComponent, NodeHasOneDepthLevelPipe, NotificationItemActionsComponent, NotificationItemComponent, ObjectStatusIconPipe, ProgressIndicatorComponent, ReportNavigatorComponent, ReportNewTopFormComponent, ReportSearchFieldsHiddenSettingsComponent, ReportSearchFieldsManageComponent, ReportSearchPanelSaveComponent, ReportViewRendererDirective, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, RichTextStaticComponent, SapFontClassPipe, SapFontPipe, SapSizePipe, SapUiReportBaseComponent, SearchPanelComponent, StaticTextComponent, StringToArrayPipe, TableThDirective, TitleComponent, UiAspReportViewerComponent, UiBpmnViewerComponent, UiButtonComponent, UiCalendarComponent, UiCardViewComponent, UiCardViewHorizontalGroupComponent, UiCheckBoxComponent, UiColorUiComponent, UiContainerWithButtonComponent, UiDateRangeExComponent, UiDateTimeComponent, UiEditableGridComponent, UiExceptionFormComponent, UiFileLinearListBoxComponent, UiFormPanelComponent, UiGanttChartComponent, UiGraphComponent, UiGridColumnsComponent, UiGridComponent, UiGridFilterItemComponent, UiGridFilterSettingsComponent, UiGridSortItemComponent, UiGridSortSettingComponent, UiHtmlViewerComponent, UiInfoBarPanelComponent, UiLabelComponent, UiLinearListContainerWithButtonComponent, UiListViewComponent, UiMapComponent, UiMapReportComponent, UiMatrixViewComponent, UiMoInfoComboViewerComponent, UiMoInfoGeneralObjectUiComponent, UiMoInfoSubFormUiComponent, UiMoInfoUlvComboComponent, UiMonacoEditorComponent, UiMultiSelectCardComponent, UiMultiSelectCheckboxComponent, UiMultiSelectComboComponent, UiMultiSelectRadioComponent, UiMultiSelectSliderComponent, UiMultiSelectSmileComponent, UiNotificationViewComponent, UiNumDecimalUiComponent, UiNumIntSliderComponent, UiNumIntUiComponent, UiPdfViewerComponent, UiPictureFileComponent, UiPicturesInfoComponent, UiRadioGroupComponent, UiReadOnlyFieldComponent, UiReportCarouselViewComponent, UiReportContainerComponent, UiSearchCommandInfoUiComponent, UiSignatureComponent, UiSimpleComboComponent, UiSinglePictureComponent, UiSwitchButtonComponent, UiTableViewComponent, UiTextAreaComponent, UiTextFieldAutoCompleteComponent, UiTextFieldComponent, UiTimeSpanComponent, UiTinymceComponent, UiTreeComponent, UiTreeViewComponent, UiUlvFormMultiSelectUiComponent, UiUlvMainUiComponent, UiWorkflowPanelUiComponent, UlLoadingMaskUiComponent, UlMsgBoxAdapterComponent, UlNotifyPopupComponent, UlToastAdapterComponent, UlvColumnSettingsComponent, UlvContextMenuComponent, UlvFilterSettingsComponent, UlvFormMultiSelectComponent, UlvGroupbySettingsComponent, UlvPagingComponent, UlvSelectionComponent, UlvSettingsComponent, UlvSortSettingsComponent, UlvToolbarComponent, UploadFileStatusPipe, WidthTypeEnum, WizardLayoutDirective, _trimEnd, getNestedValue, insertAvatar, sort$1 as sort };
+export { ApplyConditionalFormatsDirective, AvatarGridColPipe, BarsaAnswerCardComponent, BarsaAspViewerComponent, BarsaBarDownloadFileComponent, BarsaBarPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBottomMenuViewComponent, BarsaBreadcrumbsComponent, BarsaCardBannerComponent, BarsaCardLayoutPanelComponent, BarsaCardRowPayamComponent, BarsaCartableFormComponent, BarsaCartableGroupComponent, BarsaCartableTemplateComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaChatMessageComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatUserListComponent, BarsaChipComponent, BarsaColumnIndicatorComponent, BarsaColumnRowNumberComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaDateTimePickerComponent, BarsaDynamicFieldComponent, BarsaEnumMenuButtonComponent, BarsaFieldKeyValueComponent, BarsaFormLayoutPanelComponent, BarsaFormSideContentComponent, BarsaGridLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaImgSkeletonComponent, BarsaInfobarsComponent, BarsaLinkableItemsPanelComponent, BarsaListFileLinearComponent, BarsaListFileLinearGmailComponent, BarsaListLayoutPanelComponent, BarsaMegamenuComponent, BarsaModalComponent, BarsaMonacoEditorComponent, BarsaNetworkOfflineComponent, BarsaPishnamayeshPayamComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionPostComponent, BarsaReportCardFlexViewComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaReportOneOfListComponent, BarsaRowInlineActionlistComponent, BarsaSapUiModule, BarsaSapUiRoutingModule, BarsaSearchFormComponent, BarsaSimpleFormComponent, BarsaTabRouteManagerComponent, BarsaTableColumnComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTagCategoriesComponent, BarsaTagChipComponent, BarsaTagsCategoryRowComponent, BarsaTextEllipsisComponent, BarsaThemeComponent, BarsaTinyemceComponent, BarsaToolbaritemSearchComponent, BarsaTreeItemComponent, BarsaUlvMainComponent, BlobViewerComponent, BreadcrumbComponent, CaptchaFieldComponent, CardItemComponent, CardViewContentComponent, ColRendererDirective, ColumnMatrixRendererComponent, ColumnRendererComponent, ContentDensityDirective, CustomDateTimeComponent, DarkClassDirective, DeviceInfoFieldBaseComponent, DialogHandlerDirective, DownloadFilesDirective, DynamicCommandComponent, DynamicPageSizePipe, FileInDialogComponent, FileViewerComponent, FileViewerContentComponent, FileViewerPopoverComponent, FixTabMoreDirective, FormDialogComponent, FormDialogLessComponent, FormToolbarButtonComponent, FormToolbarComponent, FormWizardComponent, FullscreenDialogDirective, FullscreenFilesDirective, FundamentalDynamicFormComponent, GanttDhtmlChartViewComponent, GetFormLayoutGrid, GlobalSearchComponent, GlobalSearchModuleComponent, GlobalSearchPanelComponent, HeaderAvatarComponent, HtreeCreateNewComponent, HyperlinkComponent, IconBusinessSuite, IconTNT, InlineSaveAndCancelComponent, LayoutActionsComponent, LayoutControlComponent, LayoutWizardComponent, ListItemComponent, LyEmptySpaceComponent, LyHorizontalLayoutComponent, LyLabelComponent, LyLayoutContainerComponent, LyLayoutContainerOfRootComponent, LyLayoutFieldLabelComponent, LyLayoutPanelComponent, LyLineComponent, LySimpleLabelComponent, LyTabContainerComponent, LyTabPageComponent, LyVerticalLayoutComponent, ManageFiltersReportComponent, MaskComponent, MatrixValuePipe, MessageStripComponent, NoDataComponent, NodeHasOneDepthLevelPipe, NotificationItemActionsComponent, NotificationItemComponent, ObjectStatusIconPipe, ProgressIndicatorComponent, ReportNavigatorComponent, ReportNewTopFormComponent, ReportSearchFieldsHiddenSettingsComponent, ReportSearchFieldsManageComponent, ReportSearchPanelSaveComponent, ReportViewRendererDirective, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, RichTextStaticComponent, SapFontClassPipe, SapFontPipe, SapSizePipe, SapUiReportBaseComponent, SearchPanelComponent, StaticTextComponent, StringToArrayPipe, TableThDirective, TitleComponent, UiAspReportViewerComponent, UiBpmnViewerComponent, UiButtonComponent, UiCalendarComponent, UiCardViewComponent, UiCardViewHorizontalGroupComponent, UiCheckBoxComponent, UiColorUiComponent, UiContainerWithButtonComponent, UiDateRangeExComponent, UiDateTimeComponent, UiEditableGridComponent, UiExceptionFormComponent, UiFileLinearListBoxComponent, UiFormPanelComponent, UiGanttChartComponent, UiGraphComponent, UiGridColumnsComponent, UiGridComponent, UiGridFilterItemComponent, UiGridFilterSettingsComponent, UiGridSortItemComponent, UiGridSortSettingComponent, UiHtmlViewerComponent, UiInfoBarPanelComponent, UiLabelComponent, UiLinearListContainerWithButtonComponent, UiListViewComponent, UiMapComponent, UiMapReportComponent, UiMatrixViewComponent, UiMoInfoComboViewerComponent, UiMoInfoGeneralObjectUiComponent, UiMoInfoSubFormUiComponent, UiMoInfoUlvComboComponent, UiMonacoEditorComponent, UiMultiSelectCardComponent, UiMultiSelectCheckboxComponent, UiMultiSelectComboComponent, UiMultiSelectRadioComponent, UiMultiSelectSliderComponent, UiMultiSelectSmileComponent, UiNotificationViewComponent, UiNumDecimalUiComponent, UiNumIntSliderComponent, UiNumIntUiComponent, UiPdfViewerComponent, UiPictureFileComponent, UiPicturesInfoComponent, UiRadioGroupComponent, UiReadOnlyFieldComponent, UiReportCarouselViewComponent, UiReportContainerComponent, UiSearchCommandInfoUiComponent, UiSignatureComponent, UiSimpleComboComponent, UiSinglePictureComponent, UiSwitchButtonComponent, UiTableViewComponent, UiTextAreaComponent, UiTextFieldAutoCompleteComponent, UiTextFieldComponent, UiTimeSpanComponent, UiTinymceComponent, UiTreeComponent, UiTreeViewComponent, UiUlvFormMultiSelectUiComponent, UiUlvMainUiComponent, UiWorkflowPanelUiComponent, UlLoadingMaskUiComponent, UlMsgBoxAdapterComponent, UlNotifyPopupComponent, UlToastAdapterComponent, UlvColumnSettingsComponent, UlvContextMenuComponent, UlvFilterSettingsComponent, UlvFormMultiSelectComponent, UlvGroupbySettingsComponent, UlvPagingComponent, UlvSelectionComponent, UlvSettingsComponent, UlvSortSettingsComponent, UlvToolbarComponent, UploadFileStatusPipe, WidthTypeEnum, WizardLayoutDirective, _trimEnd, getNestedValue, insertAvatar, sort$1 as sort };
 //# sourceMappingURL=barsa-sap-ui.mjs.map