barsa-sap-ui 2.0.38 → 2.0.40

package/fesm2022/barsa-sap-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input, Pipe, EventEmitter, ElementRef, SkipSelf, ViewChild, HostBinding, Output, ViewEncapsulation, ViewChildren, Inject, Optional, Self, TemplateRef, HostListener, Directive, inject, ViewContainerRef, NgModule, signal, ChangeDetectorRef, Injectable, APP_INITIALIZER, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from 'barsa-novin-ray-core';
-import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, LayoutService, SortDirection, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, GetAllColumnsSorted, measureText, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, FieldBaseComponent, DateService, getDateService as getDateService$1, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, EllipsifyDirective, createGridEditorFormPanel, FormPanelService, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, isImage, getIcon, LayoutPanelBaseComponent, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, BaseColumnPropsComponent, ColumnService, TableHeaderWidthMode, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, calculateWidthOfListColumn, DateRanges, LogService, UlvMainService, isFunction, UploadService, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, getFieldValue, ContainerComponent, FORM_DIALOG_COMPONENT, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, FormPropsBaseComponent, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, executeUlvCommandHandler, FillAllLayoutControls, getDeviceIsPhone, PortalService, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, BarsaNovinRayCoreModule, ResizableModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
+import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, LayoutService, SortDirection, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, GetAllColumnsSorted, measureText, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, FieldBaseComponent, DateService, getDateService as getDateService$1, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, EllipsifyDirective, createGridEditorFormPanel, FormPanelService, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, isImage, getIcon, LayoutPanelBaseComponent, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, BaseColumnPropsComponent, ColumnService, TableHeaderWidthMode, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, calculateWidthOfListColumn, DateRanges, LogService, UlvMainService, isFunction, UploadService, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, getFieldValue, ContainerComponent, FORM_DIALOG_COMPONENT, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, FormPropsBaseComponent, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, executeUlvCommandHandler, FillAllLayoutControls, PictureFieldSourcePipe, getDeviceIsPhone, PortalService, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, BarsaNovinRayCoreModule, ResizableModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
 import moment from 'moment';
 import jmoment from 'moment-jalaali';
 import { merge, of, BehaviorSubject, Subject, combineLatest, takeUntil as takeUntil$1, concatMap, tap as tap$1, Observable, fromEvent, filter as filter$1 } from 'rxjs';
@@ -336,14 +336,18 @@ function GetFormLayoutGrid(ceil, colXl, colLg, colMd) {
 }
 const sort$1 = (a, b, key, isNumber) => {
     if (key) {
-        a = getNestedValue(key, a);
-        b = getNestedValue(key, b);
+        if (typeof a === 'object') {
+            a = getNestedValue(key, a);
+        }
+        if (typeof b === 'object') {
+            a = getNestedValue(key, a);
+        }
     }
     if (key === 'Rownumber' || isNumber) {
-        return Number(a) > Number(b) ? 1 : -1;
+        return Number(a) === Number(b) ? 0 : Number(a) > Number(b) ? 1 : -1;
     }
     else if (typeof a === 'string' && typeof b === 'string') {
-        return _trimEnd(a).localeCompare(_trimEnd(b));
+        return a.localeCompare(b);
     }
     return a > b ? 1 : a === b ? 0 : -1;
 };
@@ -359,7 +363,7 @@ function _trimEnd(value) {
     return value.slice(0, end);
 }
 function getNestedValue(key, object) {
-    return key.split('.').reduce((a, b) => a[b], object);
+    return key.split('.').reduce((a, b) => (typeof a === 'undefined' ? a : a[b]), object);
 }
 const IconTNT = [
     'technicalsystem',
@@ -1022,7 +1026,9 @@ class GridMoDataList {
     constructor(moDataList$, gridSetting$, visibleColumns$, searchTerm$) {
         this.data$ = merge(moDataList$.pipe(tap((items) => (this.items = items))), gridSetting$.pipe(tap((gridSetting) => (this.gridSetting = gridSetting))), searchTerm$.pipe(tap((searchTerm) => (this.searchTerm = searchTerm))), visibleColumns$.pipe(tap((visibleColumns) => (this.visibleColumns = visibleColumns)))).pipe(filter(() => !!this.items), map(() => this.searchTerm
             ? searchEx(this.searchTerm, this.visibleColumns.map((c) => c.Name), this.items)
-            : this.items), map(() => (this.gridSetting?.SortSettingList ? sortEx(this.getSortby(), this.items) : this.items)), 
+            : this.items), map(() => this.gridSetting?.SortSettingList
+            ? this.items.slice().sort(multilevelSort(this.getSortby()))
+            : this.items), 
         // map((items) => {
         //     items.forEach((item) => (item.$Visibility = true));
         //     return items;
@@ -1079,6 +1085,30 @@ const sortEx = (sortBy, moDataList) => {
     })
         .find((result, index, list) => result !== 0 || index === list.length - 1));
 };
+function combineComparisonFunctions(compareFunctions) {
+    return (a, b) => {
+        return compareFunctions.reduce((result, compareFunction) => {
+            // Proceeds to the next comparison function if the previous one returned 0
+            console.log('before ', result);
+            console.log('next a ,b ', a, b);
+            return result || compareFunction(a, b);
+        }, 0);
+    };
+}
+function multilevelSort(criteria) {
+    const compareFunctions = criteria.map((x) => {
+        const { field, direction, isNumber } = x;
+        return (a, b) => {
+            const aValue = a[field || '$_x_']; // optionally transform the property value
+            const bValue = b[field || '$_x_']; // we use an identity function as default
+            const ascModifier = direction === SortDirection.ASC ? 1 : -1;
+            const res = sort$1(aValue, bValue, field, isNumber);
+            console.log('sort res=', res * ascModifier, 'on field', field, aValue, bValue);
+            return res * ascModifier;
+        };
+    });
+    return combineComparisonFunctions(compareFunctions);
+}
 const search = ({ searchInput, columns }, items) => {
     return searchEx(searchInput?.text, columns, items);
 };
@@ -1198,11 +1228,11 @@ class UiGridSortItemComponent extends BaseComponent {
         this.sortItem.SortDirection = direction;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiGridSortItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiGridSortItemComponent, selector: "bsu-ui-grid-sort-item", inputs: { showGroups: "showGroups", sortItem: "sortItem", sortDirections: "sortDirections", columns: "columns", isFirst: "isFirst" }, outputs: { add: "add", remove: "remove", changeSetting: "changeSetting" }, host: { properties: { "class.ulv-sort-item-settings": "this.sortItemClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sort-select\">\n  <fd-select (valueChange)=\"onColumnChange($event)\" [value]=\"sortItem.Name\">\n    @for (column of columns; track column) {\n      <fd-option [value]=\"column.Name\">{{ column.Caption }}</fd-option>\n    }\n  </fd-select>\n\n  @if (!showGroups) {\n    <fd-select (valueChange)=\"onDirectionChange($event)\" [value]=\"sortItem.SortDirection\">\n      @for (item of sortDirections; track item) {\n        <fd-option [value]=\"item.value\">{{ item.text }}</fd-option>\n      }\n    </fd-select>\n  }\n</div>\n<div class=\"sort-buttons\">\n  <button fd-button glyph=\"sys-cancel\" fdType=\"transparent\" (click)=\"this.remove.emit()\"></button>\n  <button fd-button glyph=\"add\" fdType=\"transparent\" (click)=\"this.add.emit()\"></button>\n</div>\n", styles: [".ulv-sort-item-settings{display:flex;width:100%}.ulv-sort-item-settings .sort-select{display:flex;flex-grow:1}.ulv-sort-item-settings .sort-select fd-select,.ulv-sort-item-settings .sort-select fd-select fd-popover{width:100%}.ulv-sort-item-settings .sort-buttons{display:flex;margin:0 10px}.ulv-sort-item-settings .sort-buttons button{margin:0 5px}body[dir=rtl] fd-select:nth-child(n+1){margin-right:5px}body[dir=ltr] fd-select:nth-child(n+1){margin-left:5px}\n"], dependencies: [{ kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2$2.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i2$2.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiGridSortItemComponent, selector: "bsu-ui-grid-sort-item", inputs: { showGroups: "showGroups", sortItem: "sortItem", sortDirections: "sortDirections", columns: "columns", isFirst: "isFirst" }, outputs: { add: "add", remove: "remove", changeSetting: "changeSetting" }, host: { properties: { "class.ulv-sort-item-settings": "this.sortItemClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sort-select\">\n    <fd-select (valueChange)=\"onColumnChange($event)\" [value]=\"sortItem.Name\">\n        @for (column of columns; track column) {\n        <fd-option [value]=\"column.Name\">{{ column.Caption === 'None' ? '' : column.Caption }}</fd-option>\n        }\n    </fd-select>\n\n    @if (!showGroups) {\n    <fd-select (valueChange)=\"onDirectionChange($event)\" [value]=\"sortItem.SortDirection\">\n        @for (item of sortDirections; track item) {\n        <fd-option [value]=\"item.value\">{{ item.text === 'None' ? '' : item.text }}</fd-option>\n        }\n    </fd-select>\n    }\n</div>\n<div class=\"sort-buttons\">\n    <button fd-button glyph=\"sys-cancel\" fdType=\"transparent\" (click)=\"this.remove.emit()\"></button>\n    <button fd-button glyph=\"add\" fdType=\"transparent\" (click)=\"this.add.emit()\"></button>\n</div>\n", styles: [".ulv-sort-item-settings{display:flex;width:100%}.ulv-sort-item-settings .sort-select{display:flex;flex-grow:1}.ulv-sort-item-settings .sort-select fd-select,.ulv-sort-item-settings .sort-select fd-select fd-popover{width:100%}.ulv-sort-item-settings .sort-buttons{display:flex;margin:0 10px}.ulv-sort-item-settings .sort-buttons button{margin:0 5px}body[dir=rtl] fd-select:nth-child(n+1){margin-right:5px}body[dir=ltr] fd-select:nth-child(n+1){margin-left:5px}\n"], dependencies: [{ kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2$2.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i2$2.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiGridSortItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-grid-sort-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sort-select\">\n  <fd-select (valueChange)=\"onColumnChange($event)\" [value]=\"sortItem.Name\">\n    @for (column of columns; track column) {\n      <fd-option [value]=\"column.Name\">{{ column.Caption }}</fd-option>\n    }\n  </fd-select>\n\n  @if (!showGroups) {\n    <fd-select (valueChange)=\"onDirectionChange($event)\" [value]=\"sortItem.SortDirection\">\n      @for (item of sortDirections; track item) {\n        <fd-option [value]=\"item.value\">{{ item.text }}</fd-option>\n      }\n    </fd-select>\n  }\n</div>\n<div class=\"sort-buttons\">\n  <button fd-button glyph=\"sys-cancel\" fdType=\"transparent\" (click)=\"this.remove.emit()\"></button>\n  <button fd-button glyph=\"add\" fdType=\"transparent\" (click)=\"this.add.emit()\"></button>\n</div>\n", styles: [".ulv-sort-item-settings{display:flex;width:100%}.ulv-sort-item-settings .sort-select{display:flex;flex-grow:1}.ulv-sort-item-settings .sort-select fd-select,.ulv-sort-item-settings .sort-select fd-select fd-popover{width:100%}.ulv-sort-item-settings .sort-buttons{display:flex;margin:0 10px}.ulv-sort-item-settings .sort-buttons button{margin:0 5px}body[dir=rtl] fd-select:nth-child(n+1){margin-right:5px}body[dir=ltr] fd-select:nth-child(n+1){margin-left:5px}\n"] }]
+            args: [{ selector: 'bsu-ui-grid-sort-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sort-select\">\n    <fd-select (valueChange)=\"onColumnChange($event)\" [value]=\"sortItem.Name\">\n        @for (column of columns; track column) {\n        <fd-option [value]=\"column.Name\">{{ column.Caption === 'None' ? '' : column.Caption }}</fd-option>\n        }\n    </fd-select>\n\n    @if (!showGroups) {\n    <fd-select (valueChange)=\"onDirectionChange($event)\" [value]=\"sortItem.SortDirection\">\n        @for (item of sortDirections; track item) {\n        <fd-option [value]=\"item.value\">{{ item.text === 'None' ? '' : item.text }}</fd-option>\n        }\n    </fd-select>\n    }\n</div>\n<div class=\"sort-buttons\">\n    <button fd-button glyph=\"sys-cancel\" fdType=\"transparent\" (click)=\"this.remove.emit()\"></button>\n    <button fd-button glyph=\"add\" fdType=\"transparent\" (click)=\"this.add.emit()\"></button>\n</div>\n", styles: [".ulv-sort-item-settings{display:flex;width:100%}.ulv-sort-item-settings .sort-select{display:flex;flex-grow:1}.ulv-sort-item-settings .sort-select fd-select,.ulv-sort-item-settings .sort-select fd-select fd-popover{width:100%}.ulv-sort-item-settings .sort-buttons{display:flex;margin:0 10px}.ulv-sort-item-settings .sort-buttons button{margin:0 5px}body[dir=rtl] fd-select:nth-child(n+1){margin-right:5px}body[dir=ltr] fd-select:nth-child(n+1){margin-left:5px}\n"] }]
         }], propDecorators: { add: [{
                 type: Output
             }], remove: [{
@@ -1276,39 +1306,8 @@ class UiGridSortSettingComponent extends BaseComponent {
         const sortItems = this.sortItemsRef
             .toArray()
             .filter((c) => c.sortItem.Name !== this.NONE)
-            .map((c) => c.sortItem);
-        if (!this.showGroups) {
-            sortItems.forEach((c) => {
-                const existsItem = this.sortSettings.find((d) => d.Name === c.Name);
-                if (existsItem) {
-                    existsItem.SortDirection = c.SortDirection;
-                }
-                else {
-                    this.sortSettings.push(c);
-                }
-            });
-            this.sortSettings = this.sortSettings.filter((c) => {
-                const existsItem = sortItems.find((d) => d.Name === c.Name);
-                return existsItem || c.IsGrouped;
-            });
-        }
-        else {
-            sortItems.forEach((c) => {
-                const existsItem = this.sortSettings.find((d) => d.Name === c.Name);
-                if (existsItem) {
-                    existsItem.IsGrouped = true;
-                }
-                else {
-                    this.sortSettings.push(c);
-                }
-            });
-            this.sortSettings.forEach((c) => {
-                const existsItem = sortItems.find((d) => d.Name === c.Name);
-                if (!existsItem) {
-                    c.IsGrouped = false;
-                }
-            });
-        }
+            .map((c) => ({ ...c.sortItem, IsGrouped: this.showGroups || c.sortItem.IsGrouped }));
+        this.sortSettings = sortItems;
         return this.sortSettings;
     }
     _initColumns() {
@@ -1388,7 +1387,17 @@ class UlvSortSettingsComponent extends BaseUlvSettingComponent {
     getSettings() {
         const sortSetting = this.ulvSortSetting.getSettings();
         const settings = super.getSettings();
-        settings.SortSettingList = sortSetting;
+        const grouped = [];
+        settings.SortSettingList.filter((c) => c.IsGrouped).forEach((c) => {
+            const existsItem = sortSetting.find((d) => d.Name === c.Name);
+            if (existsItem) {
+                existsItem.IsGrouped = true;
+            }
+            else {
+                grouped.push(c);
+            }
+        });
+        settings.SortSettingList = [...grouped, ...sortSetting];
         return settings;
     }
     close(setting = null) {
@@ -2209,7 +2218,10 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
         const allColumnsWidth = this.allColumns.map((column) => column.$TextWidth && column.Width > column.$TextWidth ? column.Width : column.$TextWidth || column.Width);
         const visibleColumns = this._visibleColumnsSource.getValue();
         let columnsCount = visibleColumns.length;
-        const colWidthSettings = this.gridSettingSource.getValue()?.ColSettingList?.map((c) => c.Width);
+        const gridSettings = this.gridSettingSource.getValue();
+        const groupedColumns = gridSettings.SortSettingList.filter((d) => d.IsGrouped);
+        const nameGroupedColumns = groupedColumns.map((c) => c.Name);
+        const colWidthSettings = gridSettings?.ColSettingList?.filter((c) => nameGroupedColumns.indexOf(c.Name) === -1).map((c) => c.Width);
         const columnsWidth = colWidthSettings?.length ? colWidthSettings : allColumnsWidth;
         let sumColWidth = 0;
         if (this.context.ViewSetting?.IsCheckList) {
@@ -2332,7 +2344,8 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
         const settings = getGridSettings(this.context);
         const existSortItemIndex = settings.SortSettingList.findIndex((c) => c.Name === name);
         if (existSortItemIndex > -1) {
-            settings.SortSettingList[existSortItemIndex] = sortItem;
+            settings.SortSettingList = [sortItem, ...settings.SortSettingList];
+            settings.SortSettingList.splice(existSortItemIndex + 1, 1);
         }
         else {
             settings.SortSettingList.push(sortItem);
@@ -3807,6 +3820,8 @@ class BarsaTreeItemComponent extends BaseViewItemPropsComponent {
         this.viewClick = new EventEmitter();
         this.loadChildren = new EventEmitter();
         this.dragMoved = new EventEmitter();
+        this.appComponentIcon = null;
+        this.appComponentIconColor = null;
         this.rowBtns = [
             { Icon: 'add', Action: 'console.log("add btn clicked")' },
             {
@@ -3817,6 +3832,8 @@ class BarsaTreeItemComponent extends BaseViewItemPropsComponent {
     }
     ngOnInit() {
         super.ngOnInit();
+        this.appComponentIcon = BarsaApi.Common.Util.TryGetValue(this, 'node.Data.Component.Settings.Icon', null);
+        this.appComponentIconColor = BarsaApi.Common.Util.TryGetValue(this, 'node.Data.Component.Settings.IconColor', null);
         // if (!this.node.icon.startsWith('http')) {
         //     this.hideIcon = true;
         // }
@@ -3867,11 +3884,11 @@ class BarsaTreeItemComponent extends BaseViewItemPropsComponent {
         this.dragMoved.emit($event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaTreeItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaTreeItemComponent, selector: "bsu-barsa-tree-item", inputs: { node: "node", selectedNode: "selectedNode", relationList: "relationList", hideOpenIcon: "hideOpenIcon", hasArrowIcon: "hasArrowIcon", collapseIcon: "collapseIcon", loading: "loading", hasChildren: "hasChildren", leafCursorPointer: "leafCursorPointer", isExpand: "isExpand", children: "children", parentNode: "parentNode", text: "text", icon: "icon", color: "color", isHetro: "isHetro", enableNodeReordering: "enableNodeReordering", hideIcon: "hideIcon" }, outputs: { createNew: "createNew", select: "select", checkChange: "checkChange", viewClick: "viewClick", loadChildren: "loadChildren", dragMoved: "dragMoved" }, usesInheritance: true, ngImport: i0, template: "<li\n    fd-list-item\n    #liEl\n    [class.!tw-cursor-pointer]=\"leafCursorPointer\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"liEl\"\n    [focusable]=\"true\"\n    [attr.level]=\"level\"\n    [class.root-group]=\"level === 1\"\n    [interactive]=\"true\"\n    [selected]=\"isChecked\"\n    (dblclick)=\"onNodeViewClick()\"\n    cdkDrag\n    [cdkDragDisabled]=\"!enableNodeReordering\"\n    [cdkDragData]=\"node.Data.Id\"\n    (cdkDragMoved)=\"onDragMoved($event)\"\n    (click)=\"openOnClick ? onNodeViewClick() : onListItemClick(liEl, $event)\"\n>\n    <div (click)=\"onRowCheck()\" class=\"spacer\" [style.width]=\"(level - 1) * 4 + 'rem'\"></div>\n    @if (enableNodeReordering && !isHetro) {\n    <fd-icon glyph=\"grip\" font=\"BusinessSuiteInAppSymbols\" cdkDragHandle></fd-icon>\n    } @if (inDialog && isMultiSelect) {\n    <fd-checkbox [name]=\"node.Data.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onCheckbox($event)\"></fd-checkbox>\n    }\n\n    <div (click)=\"onRowCheck()\" style=\"display: flex; width: 100%; justify-content: space-between\">\n        <div style=\"display: flex; flex: 1\">\n            @if (hasArrowIcon) { @if (hasChildren) {\n            <div class=\"arrow-container\">\n                <button\n                    [attr.rtl]=\"rtl\"\n                    fd-button\n                    fdType=\"transparent\"\n                    [glyph]=\"hasChildren ? (isExpand ? 'slim-arrow-up' : collapseIcon) : ''\"\n                    (click)=\"onLoadChildren($event)\"\n                    (dblclick)=\"onExpandDblClick($event)\"\n                ></button>\n            </div>\n            } @else { @if (!parentNode?.hasOneDepthLevel) {\n            <div class=\"empty-container\" (click)=\"onRowCheck()\">\n                <button fd-button></button>\n            </div>\n            } } @if(icon && !hideIcon){\n            <i [style.color]=\"color\" class=\"icon-item\" fd-list-icon [glyph]=\"icon\"></i>\n            } @if (loading) {\n            <fd-busy-indicator\n                style=\"display: flex; align-items: center; width: 2rem\"\n                size=\"s\"\n                [loading]=\"true\"\n            ></fd-busy-indicator>\n            } }\n            <div style=\"display: flex; flex: unset; align-items: center\" fd-list-title [focusable]=\"true\">\n                @if (!hideIcon) {\n                <img\n                    [src]=\"node.icon\"\n                    [style.padding-right.px]=\"!rtl ? 5 : null\"\n                    [style.padding-left.px]=\"rtl ? 5 : null\"\n                />\n                }\n                <span [style.color]=\"color\">{{ text }}</span>\n                @if (children) {\n                <span>{{ ' ( ' + children.length + ' )' }}</span>\n                }\n            </div>\n        </div>\n        @if (contextMenuItems && contextMenuItems.length > 0) {\n        <i\n            ulvContextMenu\n            [allColumns]=\"allColumns\"\n            [menuItems]=\"contextMenuItems\"\n            [conditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n            [mo]=\"node.Data\"\n            [index]=\"index\"\n            (commandClick)=\"onUlvCommand()\"\n            [deviceName]=\"deviceName\"\n        ></i>\n        } @if (access?.Add !== false && !inDialog) {\n        <bsu-htree-create-new\n            [node]=\"node\"\n            [relationList]=\"relationList\"\n            (createNew)=\"onCreateNew($event)\"\n        ></bsu-htree-create-new>\n        }\n    </div>\n    @if (access?.View && !showOkCancelButtons && deviceName !== 'desktop' && !hideOpenIcon) {\n    <button fd-button [glyph]=\"navigationArrow\" fdType=\"transparent\" (click)=\"onNodeViewClick()\"></button>\n    }\n\n    <bsu-barsa-tree-item\n        *cdkDragPreview\n        [node]=\"node\"\n        [rtl]=\"rtl\"\n        [selectedNode]=\"selectedNode\"\n        [hasArrowIcon]=\"false\"\n    ></bsu-barsa-tree-item>\n</li>\n", styles: [":host{display:block}li{column-gap:8px}li .cdk-drag-handle{opacity:.5;cursor:move}li .spacer{height:100%}li .arrow-container,li .empty-container{display:flex;width:28px;align-items:center;justify-content:center}li .arrow-container fd-icon,li .empty-container fd-icon{cursor:pointer;width:100%;height:100%;text-align:center}li .arrow-container button[rtl=true],li .empty-container button[rtl=true]{margin-left:5px}li .arrow-container button[rtl=false],li .empty-container button[rtl=false]{margin-right:5px}li .empty-container{visibility:hidden!important}.cdk-drag{cursor:default}.tree-icon-children{cursor:pointer}.icon-item{width:1.75rem}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: i1$5.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTreeItemComponent, selector: "bsu-barsa-tree-item", inputs: ["node", "selectedNode", "relationList", "hideOpenIcon", "hasArrowIcon", "collapseIcon", "loading", "hasChildren", "leafCursorPointer", "isExpand", "children", "parentNode", "text", "icon", "color", "isHetro", "enableNodeReordering", "hideIcon"], outputs: ["createNew", "select", "checkChange", "viewClick", "loadChildren", "dragMoved"] }, { kind: "component", type: HtreeCreateNewComponent, selector: "bsu-htree-create-new", inputs: ["relationList", "node"], outputs: ["createNew"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaTreeItemComponent, selector: "bsu-barsa-tree-item", inputs: { node: "node", selectedNode: "selectedNode", relationList: "relationList", hideOpenIcon: "hideOpenIcon", hasArrowIcon: "hasArrowIcon", collapseIcon: "collapseIcon", loading: "loading", hasChildren: "hasChildren", leafCursorPointer: "leafCursorPointer", isExpand: "isExpand", children: "children", parentNode: "parentNode", text: "text", icon: "icon", color: "color", isHetro: "isHetro", enableNodeReordering: "enableNodeReordering", hideIcon: "hideIcon" }, outputs: { createNew: "createNew", select: "select", checkChange: "checkChange", viewClick: "viewClick", loadChildren: "loadChildren", dragMoved: "dragMoved" }, usesInheritance: true, ngImport: i0, template: "<li\n    fd-list-item\n    #liEl\n    [class.!tw-cursor-pointer]=\"leafCursorPointer\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"liEl\"\n    [focusable]=\"true\"\n    [attr.level]=\"level\"\n    [class.root-group]=\"level === 1\"\n    [interactive]=\"true\"\n    [selected]=\"isChecked\"\n    (dblclick)=\"onNodeViewClick()\"\n    cdkDrag\n    [cdkDragDisabled]=\"!enableNodeReordering\"\n    [cdkDragData]=\"node.Data.Id\"\n    (cdkDragMoved)=\"onDragMoved($event)\"\n    (click)=\"openOnClick ? onNodeViewClick() : onListItemClick(liEl, $event)\"\n>\n    <div (click)=\"onRowCheck()\" class=\"spacer\" [style.width]=\"(level - 1) * 4 + 'rem'\"></div>\n    @if (enableNodeReordering && !isHetro) {\n    <fd-icon glyph=\"grip\" font=\"BusinessSuiteInAppSymbols\" cdkDragHandle></fd-icon>\n    } @if (inDialog && isMultiSelect) {\n    <fd-checkbox [name]=\"node.Data.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onCheckbox($event)\"></fd-checkbox>\n    }\n\n    <div (click)=\"onRowCheck()\" style=\"display: flex; width: 100%; justify-content: space-between\">\n        <div style=\"display: flex; flex: 1\">\n            @if (hasArrowIcon) { @if (hasChildren) {\n            <div class=\"arrow-container\">\n                <button\n                    [attr.rtl]=\"rtl\"\n                    fd-button\n                    fdType=\"transparent\"\n                    [glyph]=\"hasChildren ? (isExpand ? 'slim-arrow-up' : collapseIcon) : ''\"\n                    (click)=\"onLoadChildren($event)\"\n                    (dblclick)=\"onExpandDblClick($event)\"\n                ></button>\n            </div>\n            } @else { @if (!parentNode?.hasOneDepthLevel) {\n            <div class=\"empty-container\" (click)=\"onRowCheck()\">\n                <button fd-button></button>\n            </div>\n            } } @if(!hideIcon || appComponentIcon){ @if(icon || appComponentIcon){\n            <i\n                [style.color]=\"appComponentIconColor || color\"\n                class=\"icon-item\"\n                fd-list-icon\n                [glyph]=\"appComponentIcon || icon\"\n            ></i>\n            }@else {\n            <i fd-list-icon class=\"icon-item\" style=\"display: flex; align-items: center; justify-content: center\">\n                <img [src]=\"node.icon\" width=\"16px\" />\n            </i>\n            } } @if (loading) {\n            <fd-busy-indicator\n                style=\"display: flex; align-items: center; width: 2rem\"\n                size=\"s\"\n                [loading]=\"true\"\n            ></fd-busy-indicator>\n            } }\n            <div style=\"display: flex; flex: unset; align-items: center\" fd-list-title [focusable]=\"true\">\n                <span [style.color]=\"color\">{{ text }}</span>\n                @if (children) {\n                <span>{{ ' ( ' + children.length + ' )' }}</span>\n                }\n            </div>\n        </div>\n        @if (contextMenuItems && contextMenuItems.length > 0) {\n        <i\n            ulvContextMenu\n            [allColumns]=\"allColumns\"\n            [menuItems]=\"contextMenuItems\"\n            [conditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n            [mo]=\"node.Data\"\n            [index]=\"index\"\n            (commandClick)=\"onUlvCommand()\"\n            [deviceName]=\"deviceName\"\n        ></i>\n        } @if (access?.Add !== false && !inDialog) {\n        <bsu-htree-create-new\n            [node]=\"node\"\n            [relationList]=\"relationList\"\n            (createNew)=\"onCreateNew($event)\"\n        ></bsu-htree-create-new>\n        }\n    </div>\n    @if (access?.View && !showOkCancelButtons && deviceName !== 'desktop' && !hideOpenIcon) {\n    <button fd-button [glyph]=\"navigationArrow\" fdType=\"transparent\" (click)=\"onNodeViewClick()\"></button>\n    }\n\n    <bsu-barsa-tree-item\n        *cdkDragPreview\n        [node]=\"node\"\n        [rtl]=\"rtl\"\n        [selectedNode]=\"selectedNode\"\n        [hasArrowIcon]=\"false\"\n    ></bsu-barsa-tree-item>\n</li>\n", styles: [":host{display:block}li{column-gap:8px}li .cdk-drag-handle{opacity:.5;cursor:move}li .spacer{height:100%}li .arrow-container,li .empty-container{display:flex;width:28px;align-items:center;justify-content:center}li .arrow-container fd-icon,li .empty-container fd-icon{cursor:pointer;width:100%;height:100%;text-align:center}li .arrow-container button[rtl=true],li .empty-container button[rtl=true]{margin-left:5px}li .arrow-container button[rtl=false],li .empty-container button[rtl=false]{margin-right:5px}li .empty-container{visibility:hidden!important}.cdk-drag{cursor:default}.tree-icon-children{cursor:pointer}.icon-item{width:1.75rem}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: i1$5.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTreeItemComponent, selector: "bsu-barsa-tree-item", inputs: ["node", "selectedNode", "relationList", "hideOpenIcon", "hasArrowIcon", "collapseIcon", "loading", "hasChildren", "leafCursorPointer", "isExpand", "children", "parentNode", "text", "icon", "color", "isHetro", "enableNodeReordering", "hideIcon"], outputs: ["createNew", "select", "checkChange", "viewClick", "loadChildren", "dragMoved"] }, { kind: "component", type: HtreeCreateNewComponent, selector: "bsu-htree-create-new", inputs: ["relationList", "node"], outputs: ["createNew"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaTreeItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-tree-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li\n    fd-list-item\n    #liEl\n    [class.!tw-cursor-pointer]=\"leafCursorPointer\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"liEl\"\n    [focusable]=\"true\"\n    [attr.level]=\"level\"\n    [class.root-group]=\"level === 1\"\n    [interactive]=\"true\"\n    [selected]=\"isChecked\"\n    (dblclick)=\"onNodeViewClick()\"\n    cdkDrag\n    [cdkDragDisabled]=\"!enableNodeReordering\"\n    [cdkDragData]=\"node.Data.Id\"\n    (cdkDragMoved)=\"onDragMoved($event)\"\n    (click)=\"openOnClick ? onNodeViewClick() : onListItemClick(liEl, $event)\"\n>\n    <div (click)=\"onRowCheck()\" class=\"spacer\" [style.width]=\"(level - 1) * 4 + 'rem'\"></div>\n    @if (enableNodeReordering && !isHetro) {\n    <fd-icon glyph=\"grip\" font=\"BusinessSuiteInAppSymbols\" cdkDragHandle></fd-icon>\n    } @if (inDialog && isMultiSelect) {\n    <fd-checkbox [name]=\"node.Data.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onCheckbox($event)\"></fd-checkbox>\n    }\n\n    <div (click)=\"onRowCheck()\" style=\"display: flex; width: 100%; justify-content: space-between\">\n        <div style=\"display: flex; flex: 1\">\n            @if (hasArrowIcon) { @if (hasChildren) {\n            <div class=\"arrow-container\">\n                <button\n                    [attr.rtl]=\"rtl\"\n                    fd-button\n                    fdType=\"transparent\"\n                    [glyph]=\"hasChildren ? (isExpand ? 'slim-arrow-up' : collapseIcon) : ''\"\n                    (click)=\"onLoadChildren($event)\"\n                    (dblclick)=\"onExpandDblClick($event)\"\n                ></button>\n            </div>\n            } @else { @if (!parentNode?.hasOneDepthLevel) {\n            <div class=\"empty-container\" (click)=\"onRowCheck()\">\n                <button fd-button></button>\n            </div>\n            } } @if(icon && !hideIcon){\n            <i [style.color]=\"color\" class=\"icon-item\" fd-list-icon [glyph]=\"icon\"></i>\n            } @if (loading) {\n            <fd-busy-indicator\n                style=\"display: flex; align-items: center; width: 2rem\"\n                size=\"s\"\n                [loading]=\"true\"\n            ></fd-busy-indicator>\n            } }\n            <div style=\"display: flex; flex: unset; align-items: center\" fd-list-title [focusable]=\"true\">\n                @if (!hideIcon) {\n                <img\n                    [src]=\"node.icon\"\n                    [style.padding-right.px]=\"!rtl ? 5 : null\"\n                    [style.padding-left.px]=\"rtl ? 5 : null\"\n                />\n                }\n                <span [style.color]=\"color\">{{ text }}</span>\n                @if (children) {\n                <span>{{ ' ( ' + children.length + ' )' }}</span>\n                }\n            </div>\n        </div>\n        @if (contextMenuItems && contextMenuItems.length > 0) {\n        <i\n            ulvContextMenu\n            [allColumns]=\"allColumns\"\n            [menuItems]=\"contextMenuItems\"\n            [conditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n            [mo]=\"node.Data\"\n            [index]=\"index\"\n            (commandClick)=\"onUlvCommand()\"\n            [deviceName]=\"deviceName\"\n        ></i>\n        } @if (access?.Add !== false && !inDialog) {\n        <bsu-htree-create-new\n            [node]=\"node\"\n            [relationList]=\"relationList\"\n            (createNew)=\"onCreateNew($event)\"\n        ></bsu-htree-create-new>\n        }\n    </div>\n    @if (access?.View && !showOkCancelButtons && deviceName !== 'desktop' && !hideOpenIcon) {\n    <button fd-button [glyph]=\"navigationArrow\" fdType=\"transparent\" (click)=\"onNodeViewClick()\"></button>\n    }\n\n    <bsu-barsa-tree-item\n        *cdkDragPreview\n        [node]=\"node\"\n        [rtl]=\"rtl\"\n        [selectedNode]=\"selectedNode\"\n        [hasArrowIcon]=\"false\"\n    ></bsu-barsa-tree-item>\n</li>\n", styles: [":host{display:block}li{column-gap:8px}li .cdk-drag-handle{opacity:.5;cursor:move}li .spacer{height:100%}li .arrow-container,li .empty-container{display:flex;width:28px;align-items:center;justify-content:center}li .arrow-container fd-icon,li .empty-container fd-icon{cursor:pointer;width:100%;height:100%;text-align:center}li .arrow-container button[rtl=true],li .empty-container button[rtl=true]{margin-left:5px}li .arrow-container button[rtl=false],li .empty-container button[rtl=false]{margin-right:5px}li .empty-container{visibility:hidden!important}.cdk-drag{cursor:default}.tree-icon-children{cursor:pointer}.icon-item{width:1.75rem}\n"] }]
+            args: [{ selector: 'bsu-barsa-tree-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li\n    fd-list-item\n    #liEl\n    [class.!tw-cursor-pointer]=\"leafCursorPointer\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"liEl\"\n    [focusable]=\"true\"\n    [attr.level]=\"level\"\n    [class.root-group]=\"level === 1\"\n    [interactive]=\"true\"\n    [selected]=\"isChecked\"\n    (dblclick)=\"onNodeViewClick()\"\n    cdkDrag\n    [cdkDragDisabled]=\"!enableNodeReordering\"\n    [cdkDragData]=\"node.Data.Id\"\n    (cdkDragMoved)=\"onDragMoved($event)\"\n    (click)=\"openOnClick ? onNodeViewClick() : onListItemClick(liEl, $event)\"\n>\n    <div (click)=\"onRowCheck()\" class=\"spacer\" [style.width]=\"(level - 1) * 4 + 'rem'\"></div>\n    @if (enableNodeReordering && !isHetro) {\n    <fd-icon glyph=\"grip\" font=\"BusinessSuiteInAppSymbols\" cdkDragHandle></fd-icon>\n    } @if (inDialog && isMultiSelect) {\n    <fd-checkbox [name]=\"node.Data.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onCheckbox($event)\"></fd-checkbox>\n    }\n\n    <div (click)=\"onRowCheck()\" style=\"display: flex; width: 100%; justify-content: space-between\">\n        <div style=\"display: flex; flex: 1\">\n            @if (hasArrowIcon) { @if (hasChildren) {\n            <div class=\"arrow-container\">\n                <button\n                    [attr.rtl]=\"rtl\"\n                    fd-button\n                    fdType=\"transparent\"\n                    [glyph]=\"hasChildren ? (isExpand ? 'slim-arrow-up' : collapseIcon) : ''\"\n                    (click)=\"onLoadChildren($event)\"\n                    (dblclick)=\"onExpandDblClick($event)\"\n                ></button>\n            </div>\n            } @else { @if (!parentNode?.hasOneDepthLevel) {\n            <div class=\"empty-container\" (click)=\"onRowCheck()\">\n                <button fd-button></button>\n            </div>\n            } } @if(!hideIcon || appComponentIcon){ @if(icon || appComponentIcon){\n            <i\n                [style.color]=\"appComponentIconColor || color\"\n                class=\"icon-item\"\n                fd-list-icon\n                [glyph]=\"appComponentIcon || icon\"\n            ></i>\n            }@else {\n            <i fd-list-icon class=\"icon-item\" style=\"display: flex; align-items: center; justify-content: center\">\n                <img [src]=\"node.icon\" width=\"16px\" />\n            </i>\n            } } @if (loading) {\n            <fd-busy-indicator\n                style=\"display: flex; align-items: center; width: 2rem\"\n                size=\"s\"\n                [loading]=\"true\"\n            ></fd-busy-indicator>\n            } }\n            <div style=\"display: flex; flex: unset; align-items: center\" fd-list-title [focusable]=\"true\">\n                <span [style.color]=\"color\">{{ text }}</span>\n                @if (children) {\n                <span>{{ ' ( ' + children.length + ' )' }}</span>\n                }\n            </div>\n        </div>\n        @if (contextMenuItems && contextMenuItems.length > 0) {\n        <i\n            ulvContextMenu\n            [allColumns]=\"allColumns\"\n            [menuItems]=\"contextMenuItems\"\n            [conditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n            [mo]=\"node.Data\"\n            [index]=\"index\"\n            (commandClick)=\"onUlvCommand()\"\n            [deviceName]=\"deviceName\"\n        ></i>\n        } @if (access?.Add !== false && !inDialog) {\n        <bsu-htree-create-new\n            [node]=\"node\"\n            [relationList]=\"relationList\"\n            (createNew)=\"onCreateNew($event)\"\n        ></bsu-htree-create-new>\n        }\n    </div>\n    @if (access?.View && !showOkCancelButtons && deviceName !== 'desktop' && !hideOpenIcon) {\n    <button fd-button [glyph]=\"navigationArrow\" fdType=\"transparent\" (click)=\"onNodeViewClick()\"></button>\n    }\n\n    <bsu-barsa-tree-item\n        *cdkDragPreview\n        [node]=\"node\"\n        [rtl]=\"rtl\"\n        [selectedNode]=\"selectedNode\"\n        [hasArrowIcon]=\"false\"\n    ></bsu-barsa-tree-item>\n</li>\n", styles: [":host{display:block}li{column-gap:8px}li .cdk-drag-handle{opacity:.5;cursor:move}li .spacer{height:100%}li .arrow-container,li .empty-container{display:flex;width:28px;align-items:center;justify-content:center}li .arrow-container fd-icon,li .empty-container fd-icon{cursor:pointer;width:100%;height:100%;text-align:center}li .arrow-container button[rtl=true],li .empty-container button[rtl=true]{margin-left:5px}li .arrow-container button[rtl=false],li .empty-container button[rtl=false]{margin-right:5px}li .empty-container{visibility:hidden!important}.cdk-drag{cursor:default}.tree-icon-children{cursor:pointer}.icon-item{width:1.75rem}\n"] }]
         }], propDecorators: { node: [{
                 type: Input
             }], selectedNode: [{
@@ -4087,6 +4104,9 @@ class UiTreeComponent extends ReportTreeBaseComponent {
         }
         else {
             this._selectNode(ev.node);
+            if (this.viewSetting?.OnlyExecuteLeafNode === true && !ev.node.leaf) {
+                this.loadChildren(ev.node);
+            }
         }
         this._rebindRoot();
     }
@@ -7864,7 +7884,8 @@ class UlvFormMultiSelectComponent extends BaseComponent {
                 data: { ...config, adapter },
                 escKeyCloseable: false,
                 dialogPanelClass: `ulv-selection-form-dialog ${this.deviceSize ? 'ulv-selection-form-dialog-mobile' : ''}`,
-                verticalPadding: false
+                verticalPadding: false,
+                focusTrapped: false
             };
             if (largeScreen) {
                 dialogConfig.width = '50vw';
@@ -8008,14 +8029,17 @@ class UlvFormMultiSelectComponent extends BaseComponent {
         return item.Id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UlvFormMultiSelectComponent, deps: [{ token: i1$1.DialogService }, { token: i2.BbbTranslatePipe }, { token: i2.PortalService }, { token: i1$1.ContentDensityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UlvFormMultiSelectComponent, selector: "bsu-ulv-form-multi-select", inputs: { Show: "Show" }, viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\n        <fd-dialog-header>\n            <ng-template fdkTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    @if (!dialogConfig.fullscreen) {\n                    <fd-button-bar\n                        ariaLabel=\"fullscreen\"\n                        [glyph]=\"dialog.data.fullscreen ? 'exitfullscreen' : 'resize'\"\n                        fullscreenDialog\n                        [dialog]=\"dialog\"\n                        [fullscreen]=\"dialog.data.fullscreen\"\n                        (fullscreenChanged)=\"dialog.data.fullscreen = $event\"\n                        [dialogComponent]=\"dialogTpl\"\n                    ></fd-button-bar>\n                    }\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onCancel(dialog)\"></fd-button-bar>\n                </div>\n            </ng-template>\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\n      <button fd-dialog-close-button></button> -->\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            @if (dialog.data.ulv1; as ulv1) {\n            <bsu-ui-ulv-main-ui\n                class=\"ulv-form-multi-select\"\n                [context]=\"ulv1\"\n                [inDialog]=\"true\"\n                [isMultiSelect]=\"dialog.data.ShowSecondPanel\"\n                [fullscreen]=\"dialog.data.fullscreen\"\n            ></bsu-ui-ulv-main-ui>\n            } @if (dialog.data.ulv2 && dialog.data.ShowSecondPanel) {\n            <div\n                class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\n                [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\n            >\n                <h5 fd-title class=\"selected-and-condition-title\">\n                    <ng-container>\n                        <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\n                        ({{ dialog.data.selectedItems?.MoDataList?.length || 0 }})\n                    </ng-container>\n                </h5>\n                <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\n                    <div class=\"ulv-selection-form-dialog__tokens\">\n                        @if (dialog.data.selectedItems) {\n                        <fd-toolbar [shouldOverflow]=\"true\">\n                            <!-- Selected items -->\n                            @for ( item of dialog.data.selectedItems.MoDataList; track _trackBySelectedFn(selectedIndex,\n                            item); let selectedIndex = $index) {\n                            <fd-token\n                                fd-toolbar-item\n                                fdOverflowPriority=\"high\"\n                                class=\"fdp-value-help-dialog__selection-token\"\n                                (onCloseClick)=\"onRemoveSelected(dialog, item)\"\n                                >{{ item.$Caption }}\n                            </fd-token>\n                            }\n                        </fd-toolbar>\n                        }\n                    </div>\n                    <button\n                        class=\"ulv-selection-form-dialog__tokens-clear\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"decline\"\n                        [aria-label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClear(dialog)\"\n                    ></button>\n                </div>\n            </div>\n            }\n        </fd-dialog-body>\n\n        @if (dialog.data.ulv1 && !dialog.data.ulv1?.HideOkCancelButtons) {\n        <fd-dialog-footer>\n            <ng-template fdkTemplate=\"footer\">\n                @if (dialog.data.adapter?.ShowOkCancelButtons !== false) {\n                <div class=\"ulv-selection-form-dialog__actions-row\">\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'OK' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onOk(dialog)\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        [fdType]=\"'transparent'\"\n                        (click)=\"onCancel(dialog)\"\n                    ></button>\n                </div>\n                }\n            </ng-template>\n        </fd-dialog-footer>\n        }\n    </fd-dialog>\n</ng-template>\n", styles: [".ulv-selection-form-dialog{cursor:default}.ulv-selection-form-dialog .fd-dialog__body bsu-ui-table-view{overflow-x:inherit!important}.ulv-selection-form-dialog__advanced-filters{padding-top:1rem}.ulv-selection-form-dialog__advanced-filters label{height:auto}.ulv-selection-form-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.ulv-selection-form-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.ulv-selection-form-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.ulv-selection-form-dialog-mobile .ulv-selection-form-dialog__advanced-actions{justify-content:flex-start}.ulv-selection-form-dialog__advanced-actions .fd-toolbar{padding:0}.ulv-selection-form-dialog fd-dialog-body{height:100%;display:flex;flex-direction:column}.ulv-selection-form-dialog bsu-ui-ulv-main-ui{height:100%;flex-grow:1}.ulv-selection-form-dialog bsu-ui-ulv-main-ui .viewer-container{height:auto;overflow:auto}.ulv-selection-form-dialog .ulv-selection-form-dialog__row{border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9);padding-top:1rem}.ulv-selection-form-dialog bsu-search-panel{border-bottom:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog fd-dialog-footer{height:auto}.ulv-selection-form-dialog .fd-dialog__footer{flex-direction:column}.ulv-selection-form-dialog .fd-dialog__footer.fd-bar{padding:0!important}.ulv-selection-form-dialog .fd-dialog__footer{border-top:none}.ulv-selection-form-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.ulv-selection-form-dialog__row{padding:0 2rem 1rem}.ulv-selection-form-dialog__row.ulv-selection-form-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.ulv-selection-form-dialog__tokens-wrapper{display:flex}.ulv-selection-form-dialog__tokens{display:flex;flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.ulv-selection-form-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.ulv-selection-form-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.ulv-selection-form-dialog__actions-row{padding:.5rem 0;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog__actions-row .fd-button{margin-left:.5rem}.ulv-selection-form-dialog__tokens-wrapper{align-items:center}\n"], dependencies: [{ kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i5$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i9.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: UiUlvMainUiComponent, selector: "bsu-ui-ulv-main-ui", inputs: ["context", "isReportPage", "inDialog", "isMultiSelect", "layoutInfo", "fullscreen"] }, { kind: "directive", type: FullscreenDialogDirective, selector: "[fullscreenDialog]", inputs: ["dialog", "dialogComponent", "fullscreen"], outputs: ["fullscreenChanged"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UlvFormMultiSelectComponent, selector: "bsu-ulv-form-multi-select", inputs: { Show: "Show" }, viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }, { propertyName: "dialogComponent", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\n        <fd-dialog-header>\n            <ng-template fdkTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    @if (!dialogConfig.fullscreen) {\n                    <fd-button-bar\n                        ariaLabel=\"fullscreen\"\n                        [glyph]=\"dialog.data.fullscreen ? 'exitfullscreen' : 'resize'\"\n                        fullscreenDialog\n                        [dialog]=\"dialog\"\n                        [fullscreen]=\"dialog.data.fullscreen\"\n                        (fullscreenChanged)=\"dialog.data.fullscreen = $event\"\n                        [dialogComponent]=\"dialogTpl\"\n                    ></fd-button-bar>\n                    }\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onCancel(dialog)\"></fd-button-bar>\n                </div>\n            </ng-template>\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\n      <button fd-dialog-close-button></button> -->\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            @if (dialog.data.ulv1; as ulv1) {\n            <bsu-ui-ulv-main-ui\n                class=\"ulv-form-multi-select\"\n                [context]=\"ulv1\"\n                [inDialog]=\"true\"\n                [isMultiSelect]=\"dialog.data.ShowSecondPanel\"\n                [fullscreen]=\"dialog.data.fullscreen\"\n            ></bsu-ui-ulv-main-ui>\n            } @if (dialog.data.ulv2 && dialog.data.ShowSecondPanel) {\n            <div\n                class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\n                [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\n            >\n                <h5 fd-title class=\"selected-and-condition-title\">\n                    <ng-container>\n                        <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\n                        ({{ dialog.data.selectedItems?.MoDataList?.length || 0 }})\n                    </ng-container>\n                </h5>\n                <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\n                    <div class=\"ulv-selection-form-dialog__tokens\">\n                        @if (dialog.data.selectedItems) {\n                        <fd-toolbar [shouldOverflow]=\"true\">\n                            <!-- Selected items -->\n                            @for ( item of dialog.data.selectedItems.MoDataList; track _trackBySelectedFn(selectedIndex,\n                            item); let selectedIndex = $index) {\n                            <fd-token\n                                fd-toolbar-item\n                                fdOverflowPriority=\"high\"\n                                class=\"fdp-value-help-dialog__selection-token\"\n                                (onCloseClick)=\"onRemoveSelected(dialog, item)\"\n                                >{{ item.$Caption }}\n                            </fd-token>\n                            }\n                        </fd-toolbar>\n                        }\n                    </div>\n                    <button\n                        class=\"ulv-selection-form-dialog__tokens-clear\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"decline\"\n                        [aria-label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClear(dialog)\"\n                    ></button>\n                </div>\n            </div>\n            }\n        </fd-dialog-body>\n\n        @if (dialog.data.ulv1 && !dialog.data.ulv1?.HideOkCancelButtons) {\n        <fd-dialog-footer>\n            <ng-template fdkTemplate=\"footer\">\n                @if (dialog.data.adapter?.ShowOkCancelButtons !== false) {\n                <div class=\"fd-bar__right\">\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'OK' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onOk(dialog)\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        [fdType]=\"'transparent'\"\n                        (click)=\"onCancel(dialog)\"\n                    ></button>\n                </div>\n                }\n            </ng-template>\n        </fd-dialog-footer>\n        }\n    </fd-dialog>\n</ng-template>\n", styles: [".ulv-selection-form-dialog{cursor:default}.ulv-selection-form-dialog .fd-dialog__body bsu-ui-table-view{overflow-x:inherit!important}.ulv-selection-form-dialog__advanced-filters{padding-top:1rem}.ulv-selection-form-dialog__advanced-filters label{height:auto}.ulv-selection-form-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.ulv-selection-form-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.ulv-selection-form-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.ulv-selection-form-dialog-mobile .ulv-selection-form-dialog__advanced-actions{justify-content:flex-start}.ulv-selection-form-dialog__advanced-actions .fd-toolbar{padding:0}.ulv-selection-form-dialog fd-dialog-body{height:100%;display:flex;flex-direction:column}.ulv-selection-form-dialog bsu-ui-ulv-main-ui{height:100%;flex-grow:1}.ulv-selection-form-dialog bsu-ui-ulv-main-ui .viewer-container{height:auto;overflow:auto}.ulv-selection-form-dialog .ulv-selection-form-dialog__row{border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9);padding-top:1rem}.ulv-selection-form-dialog bsu-search-panel{border-bottom:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog fd-dialog-footer{height:auto}.ulv-selection-form-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.ulv-selection-form-dialog__row{padding:0 2rem 1rem}.ulv-selection-form-dialog__row.ulv-selection-form-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.ulv-selection-form-dialog__tokens-wrapper{display:flex}.ulv-selection-form-dialog__tokens{display:flex;flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.ulv-selection-form-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.ulv-selection-form-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.ulv-selection-form-dialog__actions-row{padding:.5rem 0;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog__actions-row .fd-button{margin-left:.5rem}.ulv-selection-form-dialog__tokens-wrapper{align-items:center}\n"], dependencies: [{ kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i5$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i9.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: UiUlvMainUiComponent, selector: "bsu-ui-ulv-main-ui", inputs: ["context", "isReportPage", "inDialog", "isMultiSelect", "layoutInfo", "fullscreen"] }, { kind: "directive", type: FullscreenDialogDirective, selector: "[fullscreenDialog]", inputs: ["dialog", "dialogComponent", "fullscreen"], outputs: ["fullscreenChanged"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UlvFormMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ulv-form-multi-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\n        <fd-dialog-header>\n            <ng-template fdkTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    @if (!dialogConfig.fullscreen) {\n                    <fd-button-bar\n                        ariaLabel=\"fullscreen\"\n                        [glyph]=\"dialog.data.fullscreen ? 'exitfullscreen' : 'resize'\"\n                        fullscreenDialog\n                        [dialog]=\"dialog\"\n                        [fullscreen]=\"dialog.data.fullscreen\"\n                        (fullscreenChanged)=\"dialog.data.fullscreen = $event\"\n                        [dialogComponent]=\"dialogTpl\"\n                    ></fd-button-bar>\n                    }\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onCancel(dialog)\"></fd-button-bar>\n                </div>\n            </ng-template>\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\n      <button fd-dialog-close-button></button> -->\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            @if (dialog.data.ulv1; as ulv1) {\n            <bsu-ui-ulv-main-ui\n                class=\"ulv-form-multi-select\"\n                [context]=\"ulv1\"\n                [inDialog]=\"true\"\n                [isMultiSelect]=\"dialog.data.ShowSecondPanel\"\n                [fullscreen]=\"dialog.data.fullscreen\"\n            ></bsu-ui-ulv-main-ui>\n            } @if (dialog.data.ulv2 && dialog.data.ShowSecondPanel) {\n            <div\n                class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\n                [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\n            >\n                <h5 fd-title class=\"selected-and-condition-title\">\n                    <ng-container>\n                        <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\n                        ({{ dialog.data.selectedItems?.MoDataList?.length || 0 }})\n                    </ng-container>\n                </h5>\n                <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\n                    <div class=\"ulv-selection-form-dialog__tokens\">\n                        @if (dialog.data.selectedItems) {\n                        <fd-toolbar [shouldOverflow]=\"true\">\n                            <!-- Selected items -->\n                            @for ( item of dialog.data.selectedItems.MoDataList; track _trackBySelectedFn(selectedIndex,\n                            item); let selectedIndex = $index) {\n                            <fd-token\n                                fd-toolbar-item\n                                fdOverflowPriority=\"high\"\n                                class=\"fdp-value-help-dialog__selection-token\"\n                                (onCloseClick)=\"onRemoveSelected(dialog, item)\"\n                                >{{ item.$Caption }}\n                            </fd-token>\n                            }\n                        </fd-toolbar>\n                        }\n                    </div>\n                    <button\n                        class=\"ulv-selection-form-dialog__tokens-clear\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"decline\"\n                        [aria-label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClear(dialog)\"\n                    ></button>\n                </div>\n            </div>\n            }\n        </fd-dialog-body>\n\n        @if (dialog.data.ulv1 && !dialog.data.ulv1?.HideOkCancelButtons) {\n        <fd-dialog-footer>\n            <ng-template fdkTemplate=\"footer\">\n                @if (dialog.data.adapter?.ShowOkCancelButtons !== false) {\n                <div class=\"ulv-selection-form-dialog__actions-row\">\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'OK' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onOk(dialog)\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        [fdType]=\"'transparent'\"\n                        (click)=\"onCancel(dialog)\"\n                    ></button>\n                </div>\n                }\n            </ng-template>\n        </fd-dialog-footer>\n        }\n    </fd-dialog>\n</ng-template>\n", styles: [".ulv-selection-form-dialog{cursor:default}.ulv-selection-form-dialog .fd-dialog__body bsu-ui-table-view{overflow-x:inherit!important}.ulv-selection-form-dialog__advanced-filters{padding-top:1rem}.ulv-selection-form-dialog__advanced-filters label{height:auto}.ulv-selection-form-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.ulv-selection-form-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.ulv-selection-form-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.ulv-selection-form-dialog-mobile .ulv-selection-form-dialog__advanced-actions{justify-content:flex-start}.ulv-selection-form-dialog__advanced-actions .fd-toolbar{padding:0}.ulv-selection-form-dialog fd-dialog-body{height:100%;display:flex;flex-direction:column}.ulv-selection-form-dialog bsu-ui-ulv-main-ui{height:100%;flex-grow:1}.ulv-selection-form-dialog bsu-ui-ulv-main-ui .viewer-container{height:auto;overflow:auto}.ulv-selection-form-dialog .ulv-selection-form-dialog__row{border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9);padding-top:1rem}.ulv-selection-form-dialog bsu-search-panel{border-bottom:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog fd-dialog-footer{height:auto}.ulv-selection-form-dialog .fd-dialog__footer{flex-direction:column}.ulv-selection-form-dialog .fd-dialog__footer.fd-bar{padding:0!important}.ulv-selection-form-dialog .fd-dialog__footer{border-top:none}.ulv-selection-form-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.ulv-selection-form-dialog__row{padding:0 2rem 1rem}.ulv-selection-form-dialog__row.ulv-selection-form-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.ulv-selection-form-dialog__tokens-wrapper{display:flex}.ulv-selection-form-dialog__tokens{display:flex;flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.ulv-selection-form-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.ulv-selection-form-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.ulv-selection-form-dialog__actions-row{padding:.5rem 0;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog__actions-row .fd-button{margin-left:.5rem}.ulv-selection-form-dialog__tokens-wrapper{align-items:center}\n"] }]
+            args: [{ selector: 'bsu-ulv-form-multi-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\n        <fd-dialog-header>\n            <ng-template fdkTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    @if (!dialogConfig.fullscreen) {\n                    <fd-button-bar\n                        ariaLabel=\"fullscreen\"\n                        [glyph]=\"dialog.data.fullscreen ? 'exitfullscreen' : 'resize'\"\n                        fullscreenDialog\n                        [dialog]=\"dialog\"\n                        [fullscreen]=\"dialog.data.fullscreen\"\n                        (fullscreenChanged)=\"dialog.data.fullscreen = $event\"\n                        [dialogComponent]=\"dialogTpl\"\n                    ></fd-button-bar>\n                    }\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onCancel(dialog)\"></fd-button-bar>\n                </div>\n            </ng-template>\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\n      <button fd-dialog-close-button></button> -->\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            @if (dialog.data.ulv1; as ulv1) {\n            <bsu-ui-ulv-main-ui\n                class=\"ulv-form-multi-select\"\n                [context]=\"ulv1\"\n                [inDialog]=\"true\"\n                [isMultiSelect]=\"dialog.data.ShowSecondPanel\"\n                [fullscreen]=\"dialog.data.fullscreen\"\n            ></bsu-ui-ulv-main-ui>\n            } @if (dialog.data.ulv2 && dialog.data.ShowSecondPanel) {\n            <div\n                class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\n                [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\n            >\n                <h5 fd-title class=\"selected-and-condition-title\">\n                    <ng-container>\n                        <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\n                        ({{ dialog.data.selectedItems?.MoDataList?.length || 0 }})\n                    </ng-container>\n                </h5>\n                <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\n                    <div class=\"ulv-selection-form-dialog__tokens\">\n                        @if (dialog.data.selectedItems) {\n                        <fd-toolbar [shouldOverflow]=\"true\">\n                            <!-- Selected items -->\n                            @for ( item of dialog.data.selectedItems.MoDataList; track _trackBySelectedFn(selectedIndex,\n                            item); let selectedIndex = $index) {\n                            <fd-token\n                                fd-toolbar-item\n                                fdOverflowPriority=\"high\"\n                                class=\"fdp-value-help-dialog__selection-token\"\n                                (onCloseClick)=\"onRemoveSelected(dialog, item)\"\n                                >{{ item.$Caption }}\n                            </fd-token>\n                            }\n                        </fd-toolbar>\n                        }\n                    </div>\n                    <button\n                        class=\"ulv-selection-form-dialog__tokens-clear\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"decline\"\n                        [aria-label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClear(dialog)\"\n                    ></button>\n                </div>\n            </div>\n            }\n        </fd-dialog-body>\n\n        @if (dialog.data.ulv1 && !dialog.data.ulv1?.HideOkCancelButtons) {\n        <fd-dialog-footer>\n            <ng-template fdkTemplate=\"footer\">\n                @if (dialog.data.adapter?.ShowOkCancelButtons !== false) {\n                <div class=\"fd-bar__right\">\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'OK' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onOk(dialog)\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        [fdType]=\"'transparent'\"\n                        (click)=\"onCancel(dialog)\"\n                    ></button>\n                </div>\n                }\n            </ng-template>\n        </fd-dialog-footer>\n        }\n    </fd-dialog>\n</ng-template>\n", styles: [".ulv-selection-form-dialog{cursor:default}.ulv-selection-form-dialog .fd-dialog__body bsu-ui-table-view{overflow-x:inherit!important}.ulv-selection-form-dialog__advanced-filters{padding-top:1rem}.ulv-selection-form-dialog__advanced-filters label{height:auto}.ulv-selection-form-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.ulv-selection-form-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.ulv-selection-form-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.ulv-selection-form-dialog-mobile .ulv-selection-form-dialog__advanced-actions{justify-content:flex-start}.ulv-selection-form-dialog__advanced-actions .fd-toolbar{padding:0}.ulv-selection-form-dialog fd-dialog-body{height:100%;display:flex;flex-direction:column}.ulv-selection-form-dialog bsu-ui-ulv-main-ui{height:100%;flex-grow:1}.ulv-selection-form-dialog bsu-ui-ulv-main-ui .viewer-container{height:auto;overflow:auto}.ulv-selection-form-dialog .ulv-selection-form-dialog__row{border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9);padding-top:1rem}.ulv-selection-form-dialog bsu-search-panel{border-bottom:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog fd-dialog-footer{height:auto}.ulv-selection-form-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.ulv-selection-form-dialog__row{padding:0 2rem 1rem}.ulv-selection-form-dialog__row.ulv-selection-form-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.ulv-selection-form-dialog__tokens-wrapper{display:flex}.ulv-selection-form-dialog__tokens{display:flex;flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.ulv-selection-form-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.ulv-selection-form-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.ulv-selection-form-dialog__actions-row{padding:.5rem 0;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog__actions-row .fd-button{margin-left:.5rem}.ulv-selection-form-dialog__tokens-wrapper{align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DialogService }, { type: i2.BbbTranslatePipe }, { type: i2.PortalService }, { type: i1$1.ContentDensityService }], propDecorators: { dialogContainer: [{
                 type: ViewChild,
                 args: ['container', { read: TemplateRef }]
+            }], dialogComponent: [{
+                type: ViewChild,
+                args: ['dialogTpl']
             }], Show: [{
                 type: Input
             }] } });
@@ -8965,11 +8989,11 @@ class UiTextFieldAutoCompleteComponent extends FieldBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiTextFieldAutoCompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: UiTextFieldAutoCompleteComponent, selector: "bsu-ui-text-field-auto-complete", usesInheritance: true, ngImport: i0, template: "<fd-combobox\r\n    [inputId]=\"id\"\r\n    [placeholder]=\"Setting?.NullText || ''\"\r\n    [readonly]=\"(readonly$ | async) === true\"\r\n    [disabled]=\"(disable$ | async) === true\"\r\n    [maxlength]=\"Setting?.MaxLength !== undefined ? Setting?.MaxLength : null\"\r\n    [style.direction]=\"Setting?.IsLtr === true ? 'ltr' : 'rtl'\"\r\n    [showDropdownButton]=\"false\"\r\n    [dropdownValues]=\"(suggestionList$ | async) || []\"\r\n    [ngModel]=\"value || ''\"\r\n    (inputTextChange)=\"onValueChange($event)\"\r\n>\r\n</fd-combobox>\r\n", styles: [":host{display:block;height:100%}fd-combobox{width:100%}fd-combobox ::ng-deep fd-popover{width:100%}fd-combobox ::ng-deep .fd-input-group--control{margin:.1875rem 0!important;margin-bottom:.25rem rem!important}fd-combobox ::ng-deep .fd-input-group--control input{padding-right:.625rem!important;padding-left:.625rem!important}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$5.ComboboxComponent, selector: "fd-combobox", inputs: ["comboboxId", "inputId", "ariaLabel", "ariaLabelledBy", "required", "dropdownValues", "filterFn", "disabled", "placeholder", "isSearch", "glyph", "glyphFont", "showClearButton", "triggers", "closeOnOutsideClick", "openOnKeyboardEvent", "state", "itemTemplate", "groupFn", "maxHeight", "searchFn", "highlighting", "closeOnSelect", "fillOnSelect", "autoComplete", "fillControlMode", "communicateByObject", "displayFn", "buttonFocusable", "clearButtonFocusable", "readOnly", "mobile", "mobileConfig", "showDropdownButton", "includes", "title", "byline", "tabOutStrategy"], outputs: ["itemClicked", "openChange", "inputTextChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: UiTextFieldAutoCompleteComponent, selector: "bsu-ui-text-field-auto-complete", usesInheritance: true, ngImport: i0, template: "<fd-combobox\n    #fdCombo\n    [inputId]=\"id\"\n    [placeholder]=\"Setting?.NullText || ''\"\n    [readonly]=\"(readonly$ | async) === true\"\n    [fillOnSelect]=\"true\"\n    [isSearch]=\"false\"\n    [disabled]=\"(disable$ | async) === true\"\n    [maxlength]=\"Setting?.MaxLength !== undefined ? Setting?.MaxLength : null\"\n    [style.direction]=\"Setting?.IsLtr === true ? 'ltr' : 'rtl'\"\n    [showDropdownButton]=\"false\"\n    [dropdownValues]=\"(suggestionList$ | async) || []\"\n    [includes]=\"true\"\n    [highlighting]=\"false\"\n    [ngModel]=\"value || ''\"\n    (inputTextChange)=\"onValueChange($event)\"\n>\n</fd-combobox>\n", styles: [":host{display:block;height:100%}fd-combobox{width:100%}fd-combobox ::ng-deep fd-popover{width:100%}fd-combobox ::ng-deep .fd-input-group--control{margin:.1875rem 0!important;margin-bottom:.25rem rem!important}fd-combobox ::ng-deep .fd-input-group--control input{padding-right:.625rem!important;padding-left:.625rem!important}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$5.ComboboxComponent, selector: "fd-combobox", inputs: ["comboboxId", "inputId", "ariaLabel", "ariaLabelledBy", "required", "dropdownValues", "filterFn", "disabled", "placeholder", "isSearch", "glyph", "glyphFont", "showClearButton", "triggers", "closeOnOutsideClick", "openOnKeyboardEvent", "state", "itemTemplate", "groupFn", "maxHeight", "searchFn", "highlighting", "closeOnSelect", "fillOnSelect", "autoComplete", "fillControlMode", "communicateByObject", "displayFn", "buttonFocusable", "clearButtonFocusable", "readOnly", "mobile", "mobileConfig", "showDropdownButton", "includes", "title", "byline", "tabOutStrategy"], outputs: ["itemClicked", "openChange", "inputTextChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiTextFieldAutoCompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-text-field-auto-complete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-combobox\r\n    [inputId]=\"id\"\r\n    [placeholder]=\"Setting?.NullText || ''\"\r\n    [readonly]=\"(readonly$ | async) === true\"\r\n    [disabled]=\"(disable$ | async) === true\"\r\n    [maxlength]=\"Setting?.MaxLength !== undefined ? Setting?.MaxLength : null\"\r\n    [style.direction]=\"Setting?.IsLtr === true ? 'ltr' : 'rtl'\"\r\n    [showDropdownButton]=\"false\"\r\n    [dropdownValues]=\"(suggestionList$ | async) || []\"\r\n    [ngModel]=\"value || ''\"\r\n    (inputTextChange)=\"onValueChange($event)\"\r\n>\r\n</fd-combobox>\r\n", styles: [":host{display:block;height:100%}fd-combobox{width:100%}fd-combobox ::ng-deep fd-popover{width:100%}fd-combobox ::ng-deep .fd-input-group--control{margin:.1875rem 0!important;margin-bottom:.25rem rem!important}fd-combobox ::ng-deep .fd-input-group--control input{padding-right:.625rem!important;padding-left:.625rem!important}\n"] }]
+            args: [{ selector: 'bsu-ui-text-field-auto-complete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-combobox\n    #fdCombo\n    [inputId]=\"id\"\n    [placeholder]=\"Setting?.NullText || ''\"\n    [readonly]=\"(readonly$ | async) === true\"\n    [fillOnSelect]=\"true\"\n    [isSearch]=\"false\"\n    [disabled]=\"(disable$ | async) === true\"\n    [maxlength]=\"Setting?.MaxLength !== undefined ? Setting?.MaxLength : null\"\n    [style.direction]=\"Setting?.IsLtr === true ? 'ltr' : 'rtl'\"\n    [showDropdownButton]=\"false\"\n    [dropdownValues]=\"(suggestionList$ | async) || []\"\n    [includes]=\"true\"\n    [highlighting]=\"false\"\n    [ngModel]=\"value || ''\"\n    (inputTextChange)=\"onValueChange($event)\"\n>\n</fd-combobox>\n", styles: [":host{display:block;height:100%}fd-combobox{width:100%}fd-combobox ::ng-deep fd-popover{width:100%}fd-combobox ::ng-deep .fd-input-group--control{margin:.1875rem 0!important;margin-bottom:.25rem rem!important}fd-combobox ::ng-deep .fd-input-group--control input{padding-right:.625rem!important;padding-left:.625rem!important}\n"] }]
         }] });
 
 class UlLoadingMaskUiComponent extends BaseComponent {
@@ -14052,7 +14076,10 @@ class BarsaChatComponent extends FormBaseComponent {
         this.selectedThread = signal(null);
         this.messages = signal(null);
         this.replyingMessage = signal(null);
-        this.messageText = '';
+        this._newMessageText = '';
+    }
+    onTextChange($event) {
+        this._newMessageText = $event.target.value;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -14063,19 +14090,17 @@ class BarsaChatComponent extends FormBaseComponent {
         document.body.classList.remove('chat-mode');
     }
     scrollToBottom(force = false, instant = false) {
-        const container = this.chatContentElement?.nativeElement;
+        const container = (this._el?.nativeElement).querySelector('#chatContentElement');
         if (force || (container && container.scrollTopMax - container.scrollTop < 300)) {
-            setTimeout(() => container.scrollTo({
+            setTimeout(() => container?.scrollTo({
                 top: container.scrollHeight,
                 behavior: instant ? 'instant' : 'smooth'
             }));
         }
     }
-    async checkInput(event) {
-        this.messageText = event.target.innerText;
-    }
     sendMessage() {
-        if (this.messageText?.trim().length) {
+        if (this._newMessageText?.trim().length) {
+            BarsaApi.Bw.RunBlMethodAsync({});
             this.messages?.set([
                 ...this.messages(),
                 {
@@ -14085,37 +14110,19 @@ class BarsaChatComponent extends FormBaseComponent {
                         avatar: 'https://picsum.photos/100?workAround=' + Math.floor(Math.random() * 100),
                         name: 'مهدی زارعی'
                     },
-                    text: this.messageText,
+                    text: this._newMessageText,
                     createdAt: new Date(),
                     deliveredAt: new Date(),
                     readAt: new Date()
                 }
             ]);
-            this.messageText = '';
+            this._newMessageText = '';
             const inputMessage = document.getElementById('chat-textarea');
             if (inputMessage) {
                 inputMessage.focus();
                 inputMessage.innerText = '';
             }
             this.scrollToBottom(true);
-            setTimeout(() => {
-                this.messages?.set([
-                    ...this.messages(),
-                    {
-                        id: Math.random() * 1000,
-                        owner: {
-                            id: 4321,
-                            avatar: 'https://picsum.photos/100?workAround=' + Math.floor(Math.random() * 100),
-                            name: this.selectedThread().title
-                        },
-                        text: this.shuffle(this.randomTextArr.slice(0, 1 + Math.floor(this.randomTextArr.length * Math.random()))).join(' '),
-                        createdAt: new Date(),
-                        deliveredAt: new Date(),
-                        readAt: new Date()
-                    }
-                ]);
-                this.scrollToBottom(true);
-            }, 2000);
         }
     }
     addAttachment() { }
@@ -14179,7 +14186,7 @@ class BarsaChatComponent extends FormBaseComponent {
         return array;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaChatComponent, selector: "bsu-barsa-chat", inputs: { simple: "simple" }, providers: [FormPanelService], viewQueries: [{ propertyName: "chatContentElement", first: true, predicate: ["chatContentElement"], descendants: true, read: ElementRef }], 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\" (click)=\"selectThread(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            @if (selectedThread()) {\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                <bsu-barsa-chat-content-toolbar\r\n                    [title]=\"selectedThread().title\"\r\n                    [subtitle]=\"'\u0645\u062D\u0645\u062F \u0645\u062D\u0645\u062F\u06CC'\"\r\n                    [avatar]=\"selectedThread().avatar\"\r\n                    [status]=\"selectedThread().status\"\r\n                ></bsu-barsa-chat-content-toolbar>\r\n                <bsu-barsa-chat-content id=\"chat-container\">\r\n                    @if(layout94$ | async;as layout94){ @if ('\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94; as configUi) {\r\n                    <bsu-layout-control [config]=\"configUi\"></bsu-layout-control>\r\n                    } }\r\n                </bsu-barsa-chat-content>\r\n                <div\r\n                    class=\"tw-w-full\"\r\n                    [ngClass]=\"{\r\n                        'tw-relative': !simple,\r\n                        '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': simple\r\n                    }\"\r\n                >\r\n                    @if (replyingMessage()) {\r\n                    <div\r\n                        @inOutReplyingMessage\r\n                        class=\"tw-w-full tw-px-2 tw-py-1 tw-border-r-4 tw-border-r-bubble-mine tw-flex tw-gap-2 te-items-center tw-absolute tw-z-0 tw-bg-default tw-right-0 -tw-top-14\"\r\n                    >\r\n                        <button\r\n                            fd-button\r\n                            fdType=\"transparent\"\r\n                            glyph=\"decline\"\r\n                            class=\"tw-grow-0 tw-shrink-0\"\r\n                            (click)=\"replyingMessage.set(null)\"\r\n                        ></button>\r\n                        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink tw-overflow-hidden\">\r\n                            <span class=\"tw-font-bold\">{{ replyingMessage().owner.name }}</span>\r\n                            <span class=\"tw-truncate\">{{\r\n                                replyingMessage().text ?? replyingMessage().file?.name ?? replyingMessage().image?.name\r\n                            }}</span>\r\n                        </div>\r\n                        <div class=\"tw-w-8 tw-shrink-0 tw-grow-0\"></div>\r\n                    </div>\r\n                    }\r\n                    <div\r\n                        class=\"tw-w-full tw-p-2 tw-flex tw-gap-2 tw-border-t tw-border-t-gray-300 dark:tw-border-t-gray-600 tw-bg-default tw-items-end tw-z-10\"\r\n                    >\r\n                        <fd-popover placement=\"top-start\" title=\"top-start\">\r\n                            <fd-popover-control>\r\n                                <button\r\n                                    fd-button\r\n                                    fdType=\"transparent\"\r\n                                    glyph=\"attachment\"\r\n                                    class=\"!tw-rounded-full tw-shrink-0 tw-grow-0 !tw-size-10 !tw-min-h-10 !tw-max-h-10 !tw-min-w-10 !tw-max-w-10\"\r\n                                    (click)=\"addAttachment()\"\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                                    >\r\n                                        <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"camera\"></fd-icon>\r\n                                        <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u0639\u06A9\u0633</span>\r\n                                        <input class=\"tw-hidden\" type=\"file\" id=\"img\" name=\"img\" accept=\"image/*\" />\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=\"add-document\"></fd-icon>\r\n                                        <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u0641\u0627\u06CC\u0644</span>\r\n                                        <input class=\"tw-hidden\" type=\"file\" id=\"file\" name=\"file\" accept=\"file/*\" />\r\n                                    </label>\r\n                                </div>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        <div class=\"tw-inline-flex tw-relative tw-grow tw-shrink\">\r\n                            <fd-feed-input [attr.aria-label]=\"'\u0645\u062A\u0646 \u067E\u06CC\u0627\u0645'\" class=\"tw-flex-1\">\r\n                                <fd-avatar\r\n                                    fdFeedInputAvatar\r\n                                    size=\"s\"\r\n                                    [label]=\"'\u0631\u0627\u0647\u0628\u0631'\"\r\n                                    [image]=\"''\"\r\n                                    [placeholder]=\"true\"\r\n                                ></fd-avatar>\r\n                                <textarea fd-form-control fdFeedInputTextarea placeholder=\"\u0645\u062A\u0646 \u067E\u06CC\u0627\u0645\"></textarea>\r\n                                <button\r\n                                    fdFeedInputButton\r\n                                    [attr.aria-label]=\"'Send' | bbbTranslate\"\r\n                                    [title]=\"'Send' | bbbTranslate\"\r\n                                    (click)=\"sendMessage()\"\r\n                                ></button>\r\n                            </fd-feed-input>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            } @else {\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$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$7.FeedInputComponent, selector: "fd-feed-input", inputs: ["disabled"] }, { kind: "directive", type: i5$7.FeedInputTextareaDirective, selector: "[fdFeedInputTextarea]", inputs: ["fdFeedInputTextareaMaxRows"], outputs: ["valueChange"] }, { kind: "directive", type: i5$7.FeedInputButtonDirective, selector: "[fdFeedInputButton]" }, { kind: "directive", type: i5$7.FeedInputAvatarDirective, selector: "[fdFeedInputAvatar]", inputs: ["class", "placeholder"] }, { kind: "component", type: i1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: BarsaChatContentComponent, selector: "bsu-barsa-chat-content" }, { kind: "component", type: BarsaChatThreadComponent, selector: "bsu-barsa-chat-thread", inputs: ["thread"] }, { kind: "component", type: BarsaChatThreadsListComponent, selector: "bsu-barsa-chat-threads-list" }, { kind: "component", type: BarsaChatThreadsListToolbarComponent, selector: "bsu-barsa-chat-threads-list-toolbar" }, { kind: "component", type: BarsaChatContentToolbarComponent, selector: "bsu-barsa-chat-content-toolbar", inputs: ["avatar", "title", "subtitle", "status"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaChatComponent, selector: "bsu-barsa-chat", inputs: { simple: "simple" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<div\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]\"\n    fillEmptySpace\n    [class.tw-h-screen]=\"!simple\"\n    [class.tw-justify-center]=\"simple\"\n>\n    @if (!simple) {\n    <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\n    }\n    <div\n        class=\"tw-h-full tw-flex 2xl:tw-container max-w-[80rem] tw-shrink-0 tw-relative\"\n        [ngClass]=\"{\n            'tw-grow 2xl:tw-grow-0': !simple,\n            'tw-w-full': simple\n        }\"\n    >\n        @if (!simple) {\n        <div class=\"tw-grow-0 tw-shrink-0 tw-w-full md:tw-w-96 tw-p-0 md:tw-p-6\">\n            <div\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\"\n            >\n                <bsu-barsa-chat-threads-list-toolbar></bsu-barsa-chat-threads-list-toolbar>\n                <bsu-barsa-chat-threads-list>\n                    @for (thread of threads; track thread.id) {\n                    <bsu-barsa-chat-thread [thread]=\"thread\" (click)=\"selectThread(thread)\"></bsu-barsa-chat-thread>\n                    }\n                </bsu-barsa-chat-threads-list>\n            </div>\n        </div>\n        } @else {\n        <div\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\"\n        ></div>\n        }\n        <div\n            class=\"tw-grow tw-shrink tw-relative\"\n            [ngClass]=\"{\n                'md:tw-py-6 md:tw-pl-6 tw-hidden md:tw-flex': !simple,\n                'tw-flex': simple\n            }\"\n        >\n            @if (selectedThread()) {\n            <div\n                @inContentAnimation\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\"\n                [ngClass]=\"{\n                    'md:tw-border md:tw-rounded-2xl': !simple\n                }\"\n            >\n                <bsu-barsa-chat-content-toolbar\n                    [title]=\"selectedThread().title\"\n                    [subtitle]=\"'\u0645\u062D\u0645\u062F \u0645\u062D\u0645\u062F\u06CC'\"\n                    [avatar]=\"selectedThread().avatar\"\n                    [status]=\"selectedThread().status\"\n                ></bsu-barsa-chat-content-toolbar>\n                <bsu-barsa-chat-content id=\"chat-container\">\n                    @if(layout94$ | async;as layout94){ @if ('\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94; as configUi) {\n                    <bsu-layout-control [config]=\"configUi\"></bsu-layout-control>\n                    } }\n                </bsu-barsa-chat-content>\n                <div\n                    class=\"tw-w-full\"\n                    [ngClass]=\"{\n                        'tw-relative': !simple,\n                        '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': simple\n                    }\"\n                >\n                    @if (replyingMessage()) {\n                    <div\n                        @inOutReplyingMessage\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\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            glyph=\"decline\"\n                            class=\"tw-grow-0 tw-shrink-0\"\n                            (click)=\"replyingMessage.set(null)\"\n                        ></button>\n                        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink tw-overflow-hidden\">\n                            <span class=\"tw-font-bold\">{{ replyingMessage().owner.name }}</span>\n                            <span class=\"tw-truncate\">{{\n                                replyingMessage().text ?? replyingMessage().file?.name ?? replyingMessage().image?.name\n                            }}</span>\n                        </div>\n                        <div class=\"tw-w-8 tw-shrink-0 tw-grow-0\"></div>\n                    </div>\n                    }\n                    <div\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\"\n                    >\n                        <fd-popover placement=\"top-start\" title=\"top-start\">\n                            <fd-popover-control>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    glyph=\"attachment\"\n                                    class=\"!tw-rounded-full tw-shrink-0 tw-grow-0 !tw-size-10 !tw-min-h-10 !tw-max-h-10 !tw-min-w-10 !tw-max-w-10\"\n                                    (click)=\"addAttachment()\"\n                                ></button>\n                            </fd-popover-control>\n                            <fd-popover-body minWidth=\"10rem\">\n                                <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\n                                    <label\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\"\n                                    >\n                                        <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"camera\"></fd-icon>\n                                        <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u0639\u06A9\u0633</span>\n                                        <input class=\"tw-hidden\" type=\"file\" id=\"img\" name=\"img\" accept=\"image/*\" />\n                                    </label>\n                                    <label\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\"\n                                    >\n                                        <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"add-document\"></fd-icon>\n                                        <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u0641\u0627\u06CC\u0644</span>\n                                        <input class=\"tw-hidden\" type=\"file\" id=\"file\" name=\"file\" accept=\"file/*\" />\n                                    </label>\n                                </div>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <div class=\"tw-inline-flex tw-relative tw-grow tw-shrink\">\n                            <fd-feed-input [attr.aria-label]=\"'\u0645\u062A\u0646 \u067E\u06CC\u0627\u0645'\" class=\"tw-flex-1\">\n                                <fd-avatar\n                                    fdFeedInputAvatar\n                                    size=\"s\"\n                                    [label]=\"'\u0631\u0627\u0647\u0628\u0631'\"\n                                    [image]=\"''\"\n                                    [placeholder]=\"true\"\n                                ></fd-avatar>\n                                <textarea\n                                    id=\"chat-textarea\"\n                                    fd-form-control\n                                    fdFeedInputTextarea\n                                    placeholder=\"\u0645\u062A\u0646 \u067E\u06CC\u0627\u0645\"\n                                    [fdFeedInputTextareaMaxRows]=\"2\"\n                                    (input)=\"onTextChange($event)\"\n                                ></textarea>\n                                <button\n                                    fdFeedInputButton\n                                    [attr.aria-label]=\"'Send' | bbbTranslate\"\n                                    [title]=\"'Send' | bbbTranslate\"\n                                    (click)=\"sendMessage()\"\n                                ></button>\n                            </fd-feed-input>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            } @else {\n            <div\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\"\n            >\n                <img src=\"assets/not-selected-chat.png\" class=\"tw-w-64 tw-opacity-25\" />\n                <!--            <span class=\"tw-text-xl tw-font-bold tw-text-gray-400 dark:tw-text-gray-500\">-->\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-->\n                <!--            </span>-->\n            </div>\n            }\n        </div>\n    </div>\n    @if (!simple) {\n    <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$7.FeedInputComponent, selector: "fd-feed-input", inputs: ["disabled"] }, { kind: "directive", type: i5$7.FeedInputTextareaDirective, selector: "[fdFeedInputTextarea]", inputs: ["fdFeedInputTextareaMaxRows"], outputs: ["valueChange"] }, { kind: "directive", type: i5$7.FeedInputButtonDirective, selector: "[fdFeedInputButton]" }, { kind: "directive", type: i5$7.FeedInputAvatarDirective, selector: "[fdFeedInputAvatar]", inputs: ["class", "placeholder"] }, { kind: "component", type: i1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: BarsaChatContentComponent, selector: "bsu-barsa-chat-content" }, { kind: "component", type: BarsaChatThreadComponent, selector: "bsu-barsa-chat-thread", inputs: ["thread"] }, { kind: "component", type: BarsaChatThreadsListComponent, selector: "bsu-barsa-chat-threads-list" }, { kind: "component", type: BarsaChatThreadsListToolbarComponent, selector: "bsu-barsa-chat-threads-list-toolbar" }, { kind: "component", type: BarsaChatContentToolbarComponent, selector: "bsu-barsa-chat-content-toolbar", inputs: ["avatar", "title", "subtitle", "status"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], animations: [
             trigger('inContentAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'scale(50%, 50%)' }),
@@ -14225,12 +14232,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                                 animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(50%)' }))
                             ])
                         ])
-                    ], 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\" (click)=\"selectThread(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            @if (selectedThread()) {\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                <bsu-barsa-chat-content-toolbar\r\n                    [title]=\"selectedThread().title\"\r\n                    [subtitle]=\"'\u0645\u062D\u0645\u062F \u0645\u062D\u0645\u062F\u06CC'\"\r\n                    [avatar]=\"selectedThread().avatar\"\r\n                    [status]=\"selectedThread().status\"\r\n                ></bsu-barsa-chat-content-toolbar>\r\n                <bsu-barsa-chat-content id=\"chat-container\">\r\n                    @if(layout94$ | async;as layout94){ @if ('\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94; as configUi) {\r\n                    <bsu-layout-control [config]=\"configUi\"></bsu-layout-control>\r\n                    } }\r\n                </bsu-barsa-chat-content>\r\n                <div\r\n                    class=\"tw-w-full\"\r\n                    [ngClass]=\"{\r\n                        'tw-relative': !simple,\r\n                        '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': simple\r\n                    }\"\r\n                >\r\n                    @if (replyingMessage()) {\r\n                    <div\r\n                        @inOutReplyingMessage\r\n                        class=\"tw-w-full tw-px-2 tw-py-1 tw-border-r-4 tw-border-r-bubble-mine tw-flex tw-gap-2 te-items-center tw-absolute tw-z-0 tw-bg-default tw-right-0 -tw-top-14\"\r\n                    >\r\n                        <button\r\n                            fd-button\r\n                            fdType=\"transparent\"\r\n                            glyph=\"decline\"\r\n                            class=\"tw-grow-0 tw-shrink-0\"\r\n                            (click)=\"replyingMessage.set(null)\"\r\n                        ></button>\r\n                        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink tw-overflow-hidden\">\r\n                            <span class=\"tw-font-bold\">{{ replyingMessage().owner.name }}</span>\r\n                            <span class=\"tw-truncate\">{{\r\n                                replyingMessage().text ?? replyingMessage().file?.name ?? replyingMessage().image?.name\r\n                            }}</span>\r\n                        </div>\r\n                        <div class=\"tw-w-8 tw-shrink-0 tw-grow-0\"></div>\r\n                    </div>\r\n                    }\r\n                    <div\r\n                        class=\"tw-w-full tw-p-2 tw-flex tw-gap-2 tw-border-t tw-border-t-gray-300 dark:tw-border-t-gray-600 tw-bg-default tw-items-end tw-z-10\"\r\n                    >\r\n                        <fd-popover placement=\"top-start\" title=\"top-start\">\r\n                            <fd-popover-control>\r\n                                <button\r\n                                    fd-button\r\n                                    fdType=\"transparent\"\r\n                                    glyph=\"attachment\"\r\n                                    class=\"!tw-rounded-full tw-shrink-0 tw-grow-0 !tw-size-10 !tw-min-h-10 !tw-max-h-10 !tw-min-w-10 !tw-max-w-10\"\r\n                                    (click)=\"addAttachment()\"\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                                    >\r\n                                        <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"camera\"></fd-icon>\r\n                                        <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u0639\u06A9\u0633</span>\r\n                                        <input class=\"tw-hidden\" type=\"file\" id=\"img\" name=\"img\" accept=\"image/*\" />\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=\"add-document\"></fd-icon>\r\n                                        <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u0641\u0627\u06CC\u0644</span>\r\n                                        <input class=\"tw-hidden\" type=\"file\" id=\"file\" name=\"file\" accept=\"file/*\" />\r\n                                    </label>\r\n                                </div>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        <div class=\"tw-inline-flex tw-relative tw-grow tw-shrink\">\r\n                            <fd-feed-input [attr.aria-label]=\"'\u0645\u062A\u0646 \u067E\u06CC\u0627\u0645'\" class=\"tw-flex-1\">\r\n                                <fd-avatar\r\n                                    fdFeedInputAvatar\r\n                                    size=\"s\"\r\n                                    [label]=\"'\u0631\u0627\u0647\u0628\u0631'\"\r\n                                    [image]=\"''\"\r\n                                    [placeholder]=\"true\"\r\n                                ></fd-avatar>\r\n                                <textarea fd-form-control fdFeedInputTextarea placeholder=\"\u0645\u062A\u0646 \u067E\u06CC\u0627\u0645\"></textarea>\r\n                                <button\r\n                                    fdFeedInputButton\r\n                                    [attr.aria-label]=\"'Send' | bbbTranslate\"\r\n                                    [title]=\"'Send' | bbbTranslate\"\r\n                                    (click)=\"sendMessage()\"\r\n                                ></button>\r\n                            </fd-feed-input>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            } @else {\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" }]
+                    ], template: "<div\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]\"\n    fillEmptySpace\n    [class.tw-h-screen]=\"!simple\"\n    [class.tw-justify-center]=\"simple\"\n>\n    @if (!simple) {\n    <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\n    }\n    <div\n        class=\"tw-h-full tw-flex 2xl:tw-container max-w-[80rem] tw-shrink-0 tw-relative\"\n        [ngClass]=\"{\n            'tw-grow 2xl:tw-grow-0': !simple,\n            'tw-w-full': simple\n        }\"\n    >\n        @if (!simple) {\n        <div class=\"tw-grow-0 tw-shrink-0 tw-w-full md:tw-w-96 tw-p-0 md:tw-p-6\">\n            <div\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\"\n            >\n                <bsu-barsa-chat-threads-list-toolbar></bsu-barsa-chat-threads-list-toolbar>\n                <bsu-barsa-chat-threads-list>\n                    @for (thread of threads; track thread.id) {\n                    <bsu-barsa-chat-thread [thread]=\"thread\" (click)=\"selectThread(thread)\"></bsu-barsa-chat-thread>\n                    }\n                </bsu-barsa-chat-threads-list>\n            </div>\n        </div>\n        } @else {\n        <div\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\"\n        ></div>\n        }\n        <div\n            class=\"tw-grow tw-shrink tw-relative\"\n            [ngClass]=\"{\n                'md:tw-py-6 md:tw-pl-6 tw-hidden md:tw-flex': !simple,\n                'tw-flex': simple\n            }\"\n        >\n            @if (selectedThread()) {\n            <div\n                @inContentAnimation\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\"\n                [ngClass]=\"{\n                    'md:tw-border md:tw-rounded-2xl': !simple\n                }\"\n            >\n                <bsu-barsa-chat-content-toolbar\n                    [title]=\"selectedThread().title\"\n                    [subtitle]=\"'\u0645\u062D\u0645\u062F \u0645\u062D\u0645\u062F\u06CC'\"\n                    [avatar]=\"selectedThread().avatar\"\n                    [status]=\"selectedThread().status\"\n                ></bsu-barsa-chat-content-toolbar>\n                <bsu-barsa-chat-content id=\"chat-container\">\n                    @if(layout94$ | async;as layout94){ @if ('\u0644\u06CC\u0633\u062A \u06AF\u0641\u062A\u06AF\u0648' | controlUi: layout94; as configUi) {\n                    <bsu-layout-control [config]=\"configUi\"></bsu-layout-control>\n                    } }\n                </bsu-barsa-chat-content>\n                <div\n                    class=\"tw-w-full\"\n                    [ngClass]=\"{\n                        'tw-relative': !simple,\n                        '2xl:tw-rounded-t-xl tw-grow-0 tw-shrink-0': simple\n                    }\"\n                >\n                    @if (replyingMessage()) {\n                    <div\n                        @inOutReplyingMessage\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\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            glyph=\"decline\"\n                            class=\"tw-grow-0 tw-shrink-0\"\n                            (click)=\"replyingMessage.set(null)\"\n                        ></button>\n                        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink tw-overflow-hidden\">\n                            <span class=\"tw-font-bold\">{{ replyingMessage().owner.name }}</span>\n                            <span class=\"tw-truncate\">{{\n                                replyingMessage().text ?? replyingMessage().file?.name ?? replyingMessage().image?.name\n                            }}</span>\n                        </div>\n                        <div class=\"tw-w-8 tw-shrink-0 tw-grow-0\"></div>\n                    </div>\n                    }\n                    <div\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\"\n                    >\n                        <fd-popover placement=\"top-start\" title=\"top-start\">\n                            <fd-popover-control>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    glyph=\"attachment\"\n                                    class=\"!tw-rounded-full tw-shrink-0 tw-grow-0 !tw-size-10 !tw-min-h-10 !tw-max-h-10 !tw-min-w-10 !tw-max-w-10\"\n                                    (click)=\"addAttachment()\"\n                                ></button>\n                            </fd-popover-control>\n                            <fd-popover-body minWidth=\"10rem\">\n                                <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\n                                    <label\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\"\n                                    >\n                                        <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"camera\"></fd-icon>\n                                        <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u0639\u06A9\u0633</span>\n                                        <input class=\"tw-hidden\" type=\"file\" id=\"img\" name=\"img\" accept=\"image/*\" />\n                                    </label>\n                                    <label\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\"\n                                    >\n                                        <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"add-document\"></fd-icon>\n                                        <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u0641\u0627\u06CC\u0644</span>\n                                        <input class=\"tw-hidden\" type=\"file\" id=\"file\" name=\"file\" accept=\"file/*\" />\n                                    </label>\n                                </div>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <div class=\"tw-inline-flex tw-relative tw-grow tw-shrink\">\n                            <fd-feed-input [attr.aria-label]=\"'\u0645\u062A\u0646 \u067E\u06CC\u0627\u0645'\" class=\"tw-flex-1\">\n                                <fd-avatar\n                                    fdFeedInputAvatar\n                                    size=\"s\"\n                                    [label]=\"'\u0631\u0627\u0647\u0628\u0631'\"\n                                    [image]=\"''\"\n                                    [placeholder]=\"true\"\n                                ></fd-avatar>\n                                <textarea\n                                    id=\"chat-textarea\"\n                                    fd-form-control\n                                    fdFeedInputTextarea\n                                    placeholder=\"\u0645\u062A\u0646 \u067E\u06CC\u0627\u0645\"\n                                    [fdFeedInputTextareaMaxRows]=\"2\"\n                                    (input)=\"onTextChange($event)\"\n                                ></textarea>\n                                <button\n                                    fdFeedInputButton\n                                    [attr.aria-label]=\"'Send' | bbbTranslate\"\n                                    [title]=\"'Send' | bbbTranslate\"\n                                    (click)=\"sendMessage()\"\n                                ></button>\n                            </fd-feed-input>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            } @else {\n            <div\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\"\n            >\n                <img src=\"assets/not-selected-chat.png\" class=\"tw-w-64 tw-opacity-25\" />\n                <!--            <span class=\"tw-text-xl tw-font-bold tw-text-gray-400 dark:tw-text-gray-500\">-->\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-->\n                <!--            </span>-->\n            </div>\n            }\n        </div>\n    </div>\n    @if (!simple) {\n    <div class=\"tw-bg-black/[.3] 2xl:tw-grow tw-shrink tw-h-full\"></div>\n    }\n</div>\n" }]
         }], propDecorators: { simple: [{
                 type: Input
-            }], chatContentElement: [{
-                type: ViewChild,
-                args: ['chatContentElement', { read: ElementRef }]
             }] } });
 
 class UtilDateToHhMmPipe {
@@ -14257,7 +14261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
 class BarsaChatMessageComponent {
     constructor() {
         this.reply = new EventEmitter();
-        this.userId = 1234;
+        this.userId = '_IougKSKlxFxAftSI7a48Szk-GkM1';
     }
     imageRatio(image) {
         const { originalWidth, originalHeight } = image;
@@ -14276,7 +14280,7 @@ class BarsaChatMessageComponent {
         return { ...image, displayWidth, displayHeight };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaChatMessageComponent, selector: "bsu-barsa-chat-message", inputs: { message: "message", showSender: "showSender", nextIsSame: "nextIsSame", pervIsSame: "pervIsSame", badge: "badge", nextHasBadge: "nextHasBadge", badgeLabel: "badgeLabel" }, outputs: { reply: "reply" }, ngImport: i0, template: "<div\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\n    [ngClass]=\"{\n'tw-pt-1': pervIsSame,\n'tw-pt-3': !pervIsSame,\n}\"\n>\n    @if (badge) {\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\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\">\n            {{ badgeLabel }}\n        </div>\n    </div>\n    }\n    <div\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\n        [ngClass]=\"{\n'tw-justify-start': message.owner.id === userId,\n'tw-flex-row-reverse': message.owner.id !== userId,\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === userId,\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== userId,\n    }\"\n    >\n        @if (!nextIsSame || nextHasBadge) {\n        <fd-avatar\n            size=\"s\"\n            [label]=\"message.owner?.name\"\n            [circle]=\"true\"\n            [image]=\"message.owner?.avatar\"\n            [placeholder]=\"message.owner.avatar ? false : true\"\n        ></fd-avatar>\n        } @if (!nextIsSame || nextHasBadge) {\n        <div\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\n            [ngClass]=\"{\n                'tw-right-11 tw-border-b-bubble-mine tw-border-l-bubble-mine tw-border-r-transparent':\n                    message.owner.id === userId,\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\n                    message.owner.id !== userId\n            }\"\n        ></div>\n        }\n        <div\n            @inPaneAnimation\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\n            [ngClass]=\"{\n                '!tw-rounded-br-none':\n                    message.owner.id === userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\n                '!tw-rounded-bl-none':\n                    message.owner.id !== userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\n                '!tw-rounded-tr-none': message.owner.id === userId && pervIsSame && !badge,\n                '!tw-rounded-tl-none': message.owner.id !== userId && pervIsSame && !badge\n            }\"\n        >\n            @if (showSender && (!pervIsSame || badge)) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId && !message.image,\n'tw-bg-default': message.owner.id !== userId && !message.image,\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,\n'tw-from-bubble-mine': message.owner.id === userId && message.image,\n'tw-from-default': message.owner.id !== userId && message.image,\n                    }\"\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\n            >\n                {{ message.owner.name }}\n            </div>\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine/[.3]': message.owner.id === userId,\n'tw-bg-default/[.3]': message.owner.id !== userId,\n                    }\"\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\n            >\n                <a\n                    [download]=\"message.image.name\"\n                    href=\"assets/bg-chat.jpg\"\n                    target=\"_blank\"\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\"\n                >\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\n                </a>\n                <img\n                    [ngStyle]=\"{\n                        width: image.displayWidth + 'px',\n                        height: image.displayHeight + 'px'\n                    }\"\n                    [src]=\"image.url\"\n                />\n            </div>\n            } } @if (message.file?.name) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default': message.owner.id !== userId,\n                    }\"\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\n            >\n                <a\n                    [download]=\"message.file?.FileName\"\n                    href=\"assets/bg-chat.jpg\"\n                    target=\"_blank\"\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\"\n                >\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\n                        {{ message.file?.Type }}\n                    </span>\n                </a>\n                <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\">\n                        {{ message.file?.FileName }}</span\n                    >\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\n                        {{ message.file?.Size }}</span\n                    >\n                </div>\n            </div>\n            } @if (message.text) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default': message.owner.id !== userId,\n                    }\"\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\n                [innerHTML]=\"message.text\"\n            ></div>\n            }\n            <div\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\"\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== userId,\n}\"\n            >\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">{{\n                    message.createdAt | utilDateToHhMm\n                }}</span>\n                <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\n                    <fd-popover-control>\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [fdCompact]=\"true\"\n                            glyph=\"navigation-down-arrow\"\n                        ></button>\n                    </fd-popover-control>\n                    <fd-popover-body minWidth=\"10rem\">\n                        <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\n                            <label\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\"\n                                (click)=\"reply.emit(message)\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\n                            </label>\n                            <label\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\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\n                            </label>\n                            <label\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\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\n                            </label>\n                        </div>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: i3$4.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "pipe", type: UtilDateToHhMmPipe, name: "utilDateToHhMm" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaChatMessageComponent, selector: "bsu-barsa-chat-message", inputs: { message: "message", showSender: "showSender", nextIsSame: "nextIsSame", pervIsSame: "pervIsSame", badge: "badge", nextHasBadge: "nextHasBadge", badgeLabel: "badgeLabel" }, outputs: { reply: "reply" }, ngImport: i0, template: "<div\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\n    [ngClass]=\"{\n'tw-pt-1': pervIsSame,\n'tw-pt-3': !pervIsSame,\n}\"\n>\n    @if (badge) {\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\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\">\n            {{ badgeLabel }}\n        </div>\n    </div>\n    }\n    <div\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\n        [ngClass]=\"{\n'tw-justify-start': message.owner.id === userId,\n'tw-flex-row-reverse': message.owner.id !== userId,\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === userId,\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== userId,\n    }\"\n    >\n        @if (!nextIsSame || nextHasBadge) {\n        <fd-avatar\n            size=\"s\"\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\n            [circle]=\"true\"\n            [image]=\"message.owner?.avatar\"\n            [placeholder]=\"message.owner.avatar ? false : true\"\n        ></fd-avatar>\n        } @if (!nextIsSame || nextHasBadge) {\n        <div\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\n            [ngClass]=\"{\n                'tw-right-11 tw-border-b-bubble-mine tw-border-l-bubble-mine tw-border-r-transparent':\n                    message.owner.id === userId,\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\n                    message.owner.id !== userId\n            }\"\n        ></div>\n        }\n        <div\n            @inPaneAnimation\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\n            [ngClass]=\"{\n                '!tw-rounded-br-none':\n                    message.owner.id === userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\n                '!tw-rounded-bl-none':\n                    message.owner.id !== userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\n                '!tw-rounded-tr-none': message.owner.id === userId && pervIsSame && !badge,\n                '!tw-rounded-tl-none': message.owner.id !== userId && pervIsSame && !badge\n            }\"\n        >\n            @if (showSender && (!pervIsSame || badge)) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId && !message.image,\n'tw-bg-default': message.owner.id !== userId && !message.image,\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,\n'tw-from-bubble-mine': message.owner.id === userId && message.image,\n'tw-from-default': message.owner.id !== userId && message.image,\n                    }\"\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\n            >\n                {{ message.owner.name }}\n            </div>\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine/[.3]': message.owner.id === userId,\n'tw-bg-default/[.3]': message.owner.id !== userId,\n                    }\"\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\n            >\n                <a\n                    [download]=\"message.image.name\"\n                    href=\"assets/bg-chat.jpg\"\n                    target=\"_blank\"\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\"\n                >\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\n                </a>\n                <img\n                    [ngStyle]=\"{\n                        width: image.displayWidth + 'px',\n                        height: image.displayHeight + 'px'\n                    }\"\n                    [src]=\"image.url\"\n                />\n            </div>\n            } } @if (message.file?.name) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default': message.owner.id !== userId,\n                    }\"\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\n            >\n                <a\n                    [download]=\"message.file?.FileName\"\n                    href=\"assets/bg-chat.jpg\"\n                    target=\"_blank\"\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\"\n                >\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\n                        {{ message.file?.Type }}\n                    </span>\n                </a>\n                <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\">\n                        {{ message.file?.FileName }}</span\n                    >\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\n                        {{ message.file?.Size }}</span\n                    >\n                </div>\n            </div>\n            } @if (message.text) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default': message.owner.id !== userId,\n                    }\"\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\n                [innerHTML]=\"message.text\"\n            ></div>\n            }\n            <div\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\"\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== userId,\n}\"\n            >\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">{{\n                    message.createdAt | utilDateToHhMm\n                }}</span>\n                <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\n                    <fd-popover-control>\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [fdCompact]=\"true\"\n                            glyph=\"navigation-down-arrow\"\n                        ></button>\n                    </fd-popover-control>\n                    <fd-popover-body minWidth=\"10rem\">\n                        <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\n                            <label\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\"\n                                (click)=\"reply.emit(message)\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\n                            </label>\n                            <label\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\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\n                            </label>\n                            <label\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\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\n                            </label>\n                        </div>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: i3$4.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "pipe", type: UtilDateToHhMmPipe, name: "utilDateToHhMm" }], animations: [
             trigger('inPaneAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'scale(0, 0)' }),
@@ -14302,7 +14306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                                 animate('300ms ease-in-out', style({ opacity: 0, transform: 'scale(0, 0)' }))
                             ])
                         ])
-                    ], template: "<div\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\n    [ngClass]=\"{\n'tw-pt-1': pervIsSame,\n'tw-pt-3': !pervIsSame,\n}\"\n>\n    @if (badge) {\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\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\">\n            {{ badgeLabel }}\n        </div>\n    </div>\n    }\n    <div\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\n        [ngClass]=\"{\n'tw-justify-start': message.owner.id === userId,\n'tw-flex-row-reverse': message.owner.id !== userId,\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === userId,\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== userId,\n    }\"\n    >\n        @if (!nextIsSame || nextHasBadge) {\n        <fd-avatar\n            size=\"s\"\n            [label]=\"message.owner?.name\"\n            [circle]=\"true\"\n            [image]=\"message.owner?.avatar\"\n            [placeholder]=\"message.owner.avatar ? false : true\"\n        ></fd-avatar>\n        } @if (!nextIsSame || nextHasBadge) {\n        <div\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\n            [ngClass]=\"{\n                'tw-right-11 tw-border-b-bubble-mine tw-border-l-bubble-mine tw-border-r-transparent':\n                    message.owner.id === userId,\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\n                    message.owner.id !== userId\n            }\"\n        ></div>\n        }\n        <div\n            @inPaneAnimation\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\n            [ngClass]=\"{\n                '!tw-rounded-br-none':\n                    message.owner.id === userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\n                '!tw-rounded-bl-none':\n                    message.owner.id !== userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\n                '!tw-rounded-tr-none': message.owner.id === userId && pervIsSame && !badge,\n                '!tw-rounded-tl-none': message.owner.id !== userId && pervIsSame && !badge\n            }\"\n        >\n            @if (showSender && (!pervIsSame || badge)) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId && !message.image,\n'tw-bg-default': message.owner.id !== userId && !message.image,\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,\n'tw-from-bubble-mine': message.owner.id === userId && message.image,\n'tw-from-default': message.owner.id !== userId && message.image,\n                    }\"\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\n            >\n                {{ message.owner.name }}\n            </div>\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine/[.3]': message.owner.id === userId,\n'tw-bg-default/[.3]': message.owner.id !== userId,\n                    }\"\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\n            >\n                <a\n                    [download]=\"message.image.name\"\n                    href=\"assets/bg-chat.jpg\"\n                    target=\"_blank\"\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\"\n                >\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\n                </a>\n                <img\n                    [ngStyle]=\"{\n                        width: image.displayWidth + 'px',\n                        height: image.displayHeight + 'px'\n                    }\"\n                    [src]=\"image.url\"\n                />\n            </div>\n            } } @if (message.file?.name) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default': message.owner.id !== userId,\n                    }\"\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\n            >\n                <a\n                    [download]=\"message.file?.FileName\"\n                    href=\"assets/bg-chat.jpg\"\n                    target=\"_blank\"\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\"\n                >\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\n                        {{ message.file?.Type }}\n                    </span>\n                </a>\n                <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\">\n                        {{ message.file?.FileName }}</span\n                    >\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\n                        {{ message.file?.Size }}</span\n                    >\n                </div>\n            </div>\n            } @if (message.text) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default': message.owner.id !== userId,\n                    }\"\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\n                [innerHTML]=\"message.text\"\n            ></div>\n            }\n            <div\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\"\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== userId,\n}\"\n            >\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">{{\n                    message.createdAt | utilDateToHhMm\n                }}</span>\n                <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\n                    <fd-popover-control>\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [fdCompact]=\"true\"\n                            glyph=\"navigation-down-arrow\"\n                        ></button>\n                    </fd-popover-control>\n                    <fd-popover-body minWidth=\"10rem\">\n                        <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\n                            <label\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\"\n                                (click)=\"reply.emit(message)\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\n                            </label>\n                            <label\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\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\n                            </label>\n                            <label\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\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\n                            </label>\n                        </div>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\n    [ngClass]=\"{\n'tw-pt-1': pervIsSame,\n'tw-pt-3': !pervIsSame,\n}\"\n>\n    @if (badge) {\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\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\">\n            {{ badgeLabel }}\n        </div>\n    </div>\n    }\n    <div\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\n        [ngClass]=\"{\n'tw-justify-start': message.owner.id === userId,\n'tw-flex-row-reverse': message.owner.id !== userId,\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === userId,\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== userId,\n    }\"\n    >\n        @if (!nextIsSame || nextHasBadge) {\n        <fd-avatar\n            size=\"s\"\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\n            [circle]=\"true\"\n            [image]=\"message.owner?.avatar\"\n            [placeholder]=\"message.owner.avatar ? false : true\"\n        ></fd-avatar>\n        } @if (!nextIsSame || nextHasBadge) {\n        <div\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\n            [ngClass]=\"{\n                'tw-right-11 tw-border-b-bubble-mine tw-border-l-bubble-mine tw-border-r-transparent':\n                    message.owner.id === userId,\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\n                    message.owner.id !== userId\n            }\"\n        ></div>\n        }\n        <div\n            @inPaneAnimation\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\n            [ngClass]=\"{\n                '!tw-rounded-br-none':\n                    message.owner.id === userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\n                '!tw-rounded-bl-none':\n                    message.owner.id !== userId && (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\n                '!tw-rounded-tr-none': message.owner.id === userId && pervIsSame && !badge,\n                '!tw-rounded-tl-none': message.owner.id !== userId && pervIsSame && !badge\n            }\"\n        >\n            @if (showSender && (!pervIsSame || badge)) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId && !message.image,\n'tw-bg-default': message.owner.id !== userId && !message.image,\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,\n'tw-from-bubble-mine': message.owner.id === userId && message.image,\n'tw-from-default': message.owner.id !== userId && message.image,\n                    }\"\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\n            >\n                {{ message.owner.name }}\n            </div>\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine/[.3]': message.owner.id === userId,\n'tw-bg-default/[.3]': message.owner.id !== userId,\n                    }\"\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\n            >\n                <a\n                    [download]=\"message.image.name\"\n                    href=\"assets/bg-chat.jpg\"\n                    target=\"_blank\"\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\"\n                >\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\n                </a>\n                <img\n                    [ngStyle]=\"{\n                        width: image.displayWidth + 'px',\n                        height: image.displayHeight + 'px'\n                    }\"\n                    [src]=\"image.url\"\n                />\n            </div>\n            } } @if (message.file?.name) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default': message.owner.id !== userId,\n                    }\"\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\n            >\n                <a\n                    [download]=\"message.file?.FileName\"\n                    href=\"assets/bg-chat.jpg\"\n                    target=\"_blank\"\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\"\n                >\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\n                        {{ message.file?.Type }}\n                    </span>\n                </a>\n                <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-font-bold tw-text-md tw-text-base tw-w-full tw-truncate\">\n                        {{ message.file?.FileName }}</span\n                    >\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\n                        {{ message.file?.Size }}</span\n                    >\n                </div>\n            </div>\n            } @if (message.text) {\n            <div\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default': message.owner.id !== userId,\n                    }\"\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\n                [innerHTML]=\"message.text\"\n            ></div>\n            }\n            <div\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\"\n                [ngClass]=\"{\n'tw-bg-bubble-mine': message.owner.id === userId,\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== userId,\n}\"\n            >\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">{{\n                    message.createdAt | utilDateToHhMm\n                }}</span>\n                <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\n                    <fd-popover-control>\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [fdCompact]=\"true\"\n                            glyph=\"navigation-down-arrow\"\n                        ></button>\n                    </fd-popover-control>\n                    <fd-popover-body minWidth=\"10rem\">\n                        <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\n                            <label\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\"\n                                (click)=\"reply.emit(message)\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\n                            </label>\n                            <label\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\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\n                            </label>\n                            <label\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\"\n                            >\n                                <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\n                                <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\n                            </label>\n                        </div>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
         }], propDecorators: { message: [{
                 type: Input
             }], showSender: [{
@@ -14341,6 +14345,8 @@ class BarsaChatListComponent extends ReportViewBaseComponent {
         super(...arguments);
         this.simple = true;
         this.setReplyingMessage = new EventEmitter();
+        this._rval = inject(MoReportValuePipe);
+        this._picField = inject(PictureFieldSourcePipe);
         this.moment = jmoment;
     }
     ngOnInit() {
@@ -14357,26 +14363,32 @@ class BarsaChatListComponent extends ReportViewBaseComponent {
     _prepareMessages(moDataList) {
         this.messages = moDataList.map((i) => ({
             id: i.Id,
-            createdAt: i.CreationDate,
-            deliveredAt: i.CreationDate,
-            readAt: i.ReadAt ? i.ReadAt : null,
-            file: i.FileData,
-            image: i.PictureData,
+            createdAt: this._rval.transform(this.viewSetting.CreationDateField, i, this.allColumns),
+            deliveredAt: this._rval.transform(this.viewSetting.CreationDateField, i, this.allColumns),
+            readAt: this._rval.transform(this.viewSetting.ReadAtField, i, this.allColumns),
+            file: this._rval.transform(this.viewSetting.FileDataField, i, this.allColumns),
+            image: this._rval.transform(this.viewSetting.PictureDataField, i, this.allColumns),
             owner: {
-                id: 123,
-                name: 'slm',
-                avatar: ''
+                id: this._rval.transform(this.viewSetting.UserField, i, this.allColumns)?.Id,
+                name: this._rval.transform(this.viewSetting.DisplayNameField, i, this.allColumns),
+                avatar: this._picField.transform(this._rval.transform(this.viewSetting.UserPictureField, i, this.allColumns)?.FileId, 'ID', i.Id, undefined, 45)
+                // value: string | any,
+                // type: string,
+                // moId: string | null,
+                // fieldDefId?: string,
+                // sw?: number,
+                // sh?: number
             },
-            text: i.MessageText
+            text: this._rval.transform(this.viewSetting.MessageTextField, i, this.allColumns)
         }));
         console.log(this.messages);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaChatListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaChatListComponent, selector: "bsu-barsa-chat-list", inputs: { messages: "messages", replyingMessage: "replyingMessage", simple: "simple" }, outputs: { setReplyingMessage: "setReplyingMessage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (messages !== null) { @if (!simple) {\r\n<cdk-virtual-scroll-viewport\r\n    [appendOnly]=\"true\"\r\n    #chatContentElement\r\n    itemSize=\"20\"\r\n    class=\"tw-h-full tw-w-full tw-pb-4 tw-pt-24\"\r\n>\r\n    <div *cdkVirtualFor=\"let message of messages; let index = index\">\r\n        <bsu-barsa-chat-message\r\n            [message]=\"message\"\r\n            [showSender]=\"true\"\r\n            [nextIsSame]=\"messages?.[index + 1]?.owner?.id === message.owner.id\"\r\n            [pervIsSame]=\"messages?.[index - 1]?.owner?.id === message.owner.id\"\r\n            [badge]=\"!this.messages?.[index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[index - 1]?.createdAt).jDayOfYear())\"\r\n            [nextHasBadge]=\"!!this.messages?.[index + 1] && (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[index + 1]?.createdAt).jDayOfYear()) && message.owner.id === this.messages?.[index + 1]?.owner?.id\"\r\n            [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\r\n            (reply)=\"setReplyingMessage.emit($event)\"\r\n        ></bsu-barsa-chat-message>\r\n    </div>\r\n    @if (replyingMessage) {\r\n    <div class=\"tw-h-14\"></div>\r\n    }\r\n</cdk-virtual-scroll-viewport>\r\n} @else {\r\n<div class=\"tw-h-full tw-w-full tw-pt-24\">\r\n    @for (message of messages; track message.id) {\r\n    <bsu-barsa-chat-message\r\n        [message]=\"message\"\r\n        [showSender]=\"true\"\r\n        [nextIsSame]=\"messages?.[$index + 1]?.owner?.id === message.owner.id\"\r\n        [pervIsSame]=\"messages?.[$index - 1]?.owner?.id === message.owner.id\"\r\n        [badge]=\"!this.messages?.[$index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index - 1]?.createdAt).jDayOfYear())\"\r\n        [nextHasBadge]=\"!!this.messages?.[$index + 1] && (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index + 1]?.createdAt).jDayOfYear()) && message.owner.id === this.messages?.[$index + 1]?.owner?.id\"\r\n        [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\r\n        (reply)=\"setReplyingMessage.emit($event)\"\r\n    ></bsu-barsa-chat-message>\r\n    }\r\n    <div class=\"tw-h-4\"></div>\r\n</div>\r\n} }\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$a.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$a.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$a.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: "17.3.5", type: BarsaChatListComponent, selector: "bsu-barsa-chat-list", inputs: { messages: "messages", replyingMessage: "replyingMessage", simple: "simple" }, outputs: { setReplyingMessage: "setReplyingMessage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (messages !== null) { @if (!simple) {\n<cdk-virtual-scroll-viewport\n    [appendOnly]=\"true\"\n    id=\"chatContentElement\"\n    itemSize=\"20\"\n    class=\"tw-h-full tw-w-full tw-pb-4 tw-pt-24\"\n>\n    <div *cdkVirtualFor=\"let message of messages; let index = index\">\n        <bsu-barsa-chat-message\n            [message]=\"message\"\n            [showSender]=\"true\"\n            [nextIsSame]=\"messages?.[index + 1]?.owner?.id === message.owner.id\"\n            [pervIsSame]=\"messages?.[index - 1]?.owner?.id === message.owner.id\"\n            [badge]=\"!this.messages?.[index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[index - 1]?.createdAt).jDayOfYear())\"\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\"\n            [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\n            (reply)=\"setReplyingMessage.emit($event)\"\n        ></bsu-barsa-chat-message>\n    </div>\n    @if (replyingMessage) {\n    <div class=\"tw-h-14\"></div>\n    }\n</cdk-virtual-scroll-viewport>\n} @else {\n<div class=\"tw-h-full tw-w-full tw-pt-24\">\n    @for (message of messages; track message.id) {\n    <bsu-barsa-chat-message\n        [message]=\"message\"\n        [showSender]=\"true\"\n        [nextIsSame]=\"messages?.[$index + 1]?.owner?.id === message.owner.id\"\n        [pervIsSame]=\"messages?.[$index - 1]?.owner?.id === message.owner.id\"\n        [badge]=\"!this.messages?.[$index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index - 1]?.createdAt).jDayOfYear())\"\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\"\n        [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\n        (reply)=\"setReplyingMessage.emit($event)\"\n    ></bsu-barsa-chat-message>\n    }\n    <div class=\"tw-h-4\"></div>\n</div>\n} }\n", styles: [""], dependencies: [{ kind: "directive", type: i1$a.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$a.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$a.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BarsaChatMessageComponent, selector: "bsu-barsa-chat-message", inputs: ["message", "showSender", "nextIsSame", "pervIsSame", "badge", "nextHasBadge", "badgeLabel"], outputs: ["reply"] }, { kind: "pipe", type: UtilChatTimeBadgePipe, name: "utilChatTimeBadge" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaChatListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-chat-list', template: "@if (messages !== null) { @if (!simple) {\r\n<cdk-virtual-scroll-viewport\r\n    [appendOnly]=\"true\"\r\n    #chatContentElement\r\n    itemSize=\"20\"\r\n    class=\"tw-h-full tw-w-full tw-pb-4 tw-pt-24\"\r\n>\r\n    <div *cdkVirtualFor=\"let message of messages; let index = index\">\r\n        <bsu-barsa-chat-message\r\n            [message]=\"message\"\r\n            [showSender]=\"true\"\r\n            [nextIsSame]=\"messages?.[index + 1]?.owner?.id === message.owner.id\"\r\n            [pervIsSame]=\"messages?.[index - 1]?.owner?.id === message.owner.id\"\r\n            [badge]=\"!this.messages?.[index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[index - 1]?.createdAt).jDayOfYear())\"\r\n            [nextHasBadge]=\"!!this.messages?.[index + 1] && (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[index + 1]?.createdAt).jDayOfYear()) && message.owner.id === this.messages?.[index + 1]?.owner?.id\"\r\n            [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\r\n            (reply)=\"setReplyingMessage.emit($event)\"\r\n        ></bsu-barsa-chat-message>\r\n    </div>\r\n    @if (replyingMessage) {\r\n    <div class=\"tw-h-14\"></div>\r\n    }\r\n</cdk-virtual-scroll-viewport>\r\n} @else {\r\n<div class=\"tw-h-full tw-w-full tw-pt-24\">\r\n    @for (message of messages; track message.id) {\r\n    <bsu-barsa-chat-message\r\n        [message]=\"message\"\r\n        [showSender]=\"true\"\r\n        [nextIsSame]=\"messages?.[$index + 1]?.owner?.id === message.owner.id\"\r\n        [pervIsSame]=\"messages?.[$index - 1]?.owner?.id === message.owner.id\"\r\n        [badge]=\"!this.messages?.[$index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index - 1]?.createdAt).jDayOfYear())\"\r\n        [nextHasBadge]=\"!!this.messages?.[$index + 1] && (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index + 1]?.createdAt).jDayOfYear()) && message.owner.id === this.messages?.[$index + 1]?.owner?.id\"\r\n        [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\r\n        (reply)=\"setReplyingMessage.emit($event)\"\r\n    ></bsu-barsa-chat-message>\r\n    }\r\n    <div class=\"tw-h-4\"></div>\r\n</div>\r\n} }\r\n" }]
+            args: [{ selector: 'bsu-barsa-chat-list', template: "@if (messages !== null) { @if (!simple) {\n<cdk-virtual-scroll-viewport\n    [appendOnly]=\"true\"\n    id=\"chatContentElement\"\n    itemSize=\"20\"\n    class=\"tw-h-full tw-w-full tw-pb-4 tw-pt-24\"\n>\n    <div *cdkVirtualFor=\"let message of messages; let index = index\">\n        <bsu-barsa-chat-message\n            [message]=\"message\"\n            [showSender]=\"true\"\n            [nextIsSame]=\"messages?.[index + 1]?.owner?.id === message.owner.id\"\n            [pervIsSame]=\"messages?.[index - 1]?.owner?.id === message.owner.id\"\n            [badge]=\"!this.messages?.[index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[index - 1]?.createdAt).jDayOfYear())\"\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\"\n            [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\n            (reply)=\"setReplyingMessage.emit($event)\"\n        ></bsu-barsa-chat-message>\n    </div>\n    @if (replyingMessage) {\n    <div class=\"tw-h-14\"></div>\n    }\n</cdk-virtual-scroll-viewport>\n} @else {\n<div class=\"tw-h-full tw-w-full tw-pt-24\">\n    @for (message of messages; track message.id) {\n    <bsu-barsa-chat-message\n        [message]=\"message\"\n        [showSender]=\"true\"\n        [nextIsSame]=\"messages?.[$index + 1]?.owner?.id === message.owner.id\"\n        [pervIsSame]=\"messages?.[$index - 1]?.owner?.id === message.owner.id\"\n        [badge]=\"!this.messages?.[$index - 1] || (moment(message.createdAt).jDayOfYear() !== moment(this.messages?.[$index - 1]?.createdAt).jDayOfYear())\"\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\"\n        [badgeLabel]=\"moment(message.createdAt) | utilChatTimeBadge\"\n        (reply)=\"setReplyingMessage.emit($event)\"\n    ></bsu-barsa-chat-message>\n    }\n    <div class=\"tw-h-4\"></div>\n</div>\n} }\n" }]
         }], propDecorators: { messages: [{
                 type: Input
             }], replyingMessage: [{