barsa-sap-ui 2.0.16 → 2.0.17

package/fesm2022/barsa-sap-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, Pipe, ElementRef, ViewChild, HostBinding, EventEmitter, Output, ViewEncapsulation, ViewChildren, Inject, Optional, Self, TemplateRef, HostListener, Directive, inject, ViewContainerRef, SkipSelf, NgModule, ChangeDetectorRef, signal, Injectable, APP_INITIALIZER, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } 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, ChangeDetectorRef, signal, 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, 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 moment from 'moment';
@@ -751,11 +751,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
 
 class LyLabelComponent extends LayoutItemBaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LyLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LyLabelComponent, selector: "bsu-ly-label", inputs: { originalWidth: "originalWidth", minWidth: "minWidth", caption: "caption", captionIcon: "captionIcon", isColumn: "isColumn", isMandatory: "isMandatory", fieldIcon: "fieldIcon", originalXtype: "originalXtype", textVisible: "textVisible" }, usesInheritance: true, ngImport: i0, template: "@if (config.FontIcon) {\n<fd-icon\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\n    [font]=\"config.FontIcon | sapFont\"\n    [glyph]=\"config.FontIcon\"\n></fd-icon>\n} @if (textVisible && fieldIcon) {\n<img [attrRtl] [src]=\"fieldIcon\" height=\"16px\" />\n} @if (textVisible) {\n<label\n    fd-form-label\n    [defaultClass]=\"false\"\n    class=\"bsu-label-control\"\n    [attr.required]=\"isMandatory ? true : null\"\n    [attr.column-mode]=\"isColumn\"\n    [attrRtl]=\"true\"\n    [innerHTML]=\"originalXtype === 'Ui.Button' ? '&zwnj;' : caption\"\n    [style.background-color]=\"config.CaptionAppearance?.BColor ? config.CaptionAppearance?.BColor : null\"\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\n>\n</label>\n}\n", styles: [":host{display:flex;position:relative}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}label{padding:0!important;text-align:var(--_text_align)}label[columnMode=true] label[rtl=true]{text-align:right}label[columnMode=true] label[rtl=false]{text-align:left}\n"], dependencies: [{ kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: i1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "pipe", type: SapFontPipe, name: "sapFont" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LyLabelComponent, selector: "bsu-ly-label", inputs: { originalWidth: "originalWidth", minWidth: "minWidth", caption: "caption", captionIcon: "captionIcon", isColumn: "isColumn", isMandatory: "isMandatory", fieldIcon: "fieldIcon", originalXtype: "originalXtype", textVisible: "textVisible" }, usesInheritance: true, ngImport: i0, template: "@if (config.FontIcon) {\n<fd-icon\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\n    [font]=\"config.FontIcon | sapFont\"\n    [glyph]=\"config.FontIcon\"\n></fd-icon>\n} @if (textVisible && fieldIcon) {\n<img [attrRtl] [src]=\"fieldIcon\" height=\"16px\" />\n} @if (textVisible) {\n<label\n    fd-form-label\n    [defaultClass]=\"false\"\n    class=\"bsu-label-control\"\n    [attr.required]=\"isMandatory ? true : null\"\n    [attr.column-mode]=\"isColumn\"\n    [attrRtl]=\"true\"\n    [class.!tw-font-bold]=\"isMandatory\"\n    [innerHTML]=\"originalXtype === 'Ui.Button' ? '&zwnj;' : caption\"\n    [style.background-color]=\"config.CaptionAppearance?.BColor ? config.CaptionAppearance?.BColor : null\"\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\n>\n</label>\n}\n", styles: [":host{display:flex;position:relative}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}label{padding:0!important;text-align:var(--_text_align)}label[columnMode=true] label[rtl=true]{text-align:right}label[columnMode=true] label[rtl=false]{text-align:left}\n"], dependencies: [{ kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: i1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "pipe", type: SapFontPipe, name: "sapFont" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LyLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (config.FontIcon) {\n<fd-icon\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\n    [font]=\"config.FontIcon | sapFont\"\n    [glyph]=\"config.FontIcon\"\n></fd-icon>\n} @if (textVisible && fieldIcon) {\n<img [attrRtl] [src]=\"fieldIcon\" height=\"16px\" />\n} @if (textVisible) {\n<label\n    fd-form-label\n    [defaultClass]=\"false\"\n    class=\"bsu-label-control\"\n    [attr.required]=\"isMandatory ? true : null\"\n    [attr.column-mode]=\"isColumn\"\n    [attrRtl]=\"true\"\n    [innerHTML]=\"originalXtype === 'Ui.Button' ? '&zwnj;' : caption\"\n    [style.background-color]=\"config.CaptionAppearance?.BColor ? config.CaptionAppearance?.BColor : null\"\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\n>\n</label>\n}\n", styles: [":host{display:flex;position:relative}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}label{padding:0!important;text-align:var(--_text_align)}label[columnMode=true] label[rtl=true]{text-align:right}label[columnMode=true] label[rtl=false]{text-align:left}\n"] }]
+            args: [{ selector: 'bsu-ly-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (config.FontIcon) {\n<fd-icon\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\n    [font]=\"config.FontIcon | sapFont\"\n    [glyph]=\"config.FontIcon\"\n></fd-icon>\n} @if (textVisible && fieldIcon) {\n<img [attrRtl] [src]=\"fieldIcon\" height=\"16px\" />\n} @if (textVisible) {\n<label\n    fd-form-label\n    [defaultClass]=\"false\"\n    class=\"bsu-label-control\"\n    [attr.required]=\"isMandatory ? true : null\"\n    [attr.column-mode]=\"isColumn\"\n    [attrRtl]=\"true\"\n    [class.!tw-font-bold]=\"isMandatory\"\n    [innerHTML]=\"originalXtype === 'Ui.Button' ? '&zwnj;' : caption\"\n    [style.background-color]=\"config.CaptionAppearance?.BColor ? config.CaptionAppearance?.BColor : null\"\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\n>\n</label>\n}\n", styles: [":host{display:flex;position:relative}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}label{padding:0!important;text-align:var(--_text_align)}label[columnMode=true] label[rtl=true]{text-align:right}label[columnMode=true] label[rtl=false]{text-align:left}\n"] }]
         }], propDecorators: { originalWidth: [{
                 type: Input
             }], minWidth: [{
@@ -777,7 +777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }] } });
 
 class LayoutControlComponent extends LayoutItemBaseComponent {
-    constructor(formPanelService, el, _contentDensityService, domSanitizer, _cdr, _ngZone, _renderer2, _bbbTranslate) {
+    constructor(formPanelService, el, _contentDensityService, domSanitizer, _cdr, _ngZone, _renderer2, _bbbTranslate, _parentLayoutService) {
         super(formPanelService, _cdr);
         this.formPanelService = formPanelService;
         this.el = el;
@@ -786,13 +786,19 @@ class LayoutControlComponent extends LayoutItemBaseComponent {
         this._ngZone = _ngZone;
         this._renderer2 = _renderer2;
         this._bbbTranslate = _bbbTranslate;
+        this._parentLayoutService = _parentLayoutService;
         this.layoutControlClass = true;
         this.isContainer = true;
         this.minHeight = '2.25rem';
+        this.events = new EventEmitter();
         this.hide = true;
         this.emptyText = this.domSanitizer.bypassSecurityTrustHtml('&#8203;');
         /* eslint-disable */
-        this.RefreshLabel = () => { };
+        this.RefreshLabel = () => {
+            this._refreshLabel();
+            this.events.emit({ title: 'refreshLabel', data: this.config });
+            this._cdr.markForCheck();
+        };
         /* eslint-disable */
         this.SetVisible = (visible, refresh) => {
             this._ngZone.run(() => {
@@ -829,6 +835,24 @@ class LayoutControlComponent extends LayoutItemBaseComponent {
         this.attrCaption = config.Caption.replace(':', '');
         this.attrControlId = config.ControlId;
         this.isButton = config.FieldUi.originalXtype === 'Ui.Button';
+        this._refreshLabel();
+        this.isRowDirection = config.TextLocation === 'Right' || config.TextLocation === 'Default';
+        this.isRowReverseDirection = config.TextLocation === 'Left';
+        this.isColumnDirection = config.TextLocation === 'Top' || this.isSearchPanel;
+        this.isColumnReverseDirection = config.TextLocation === 'Bottom';
+        config.FieldUi.LayoutControl = this;
+        this.fieldIcon = config.FieldUi.Setting.FieldIcon;
+        this.originalXtype = config.FieldUi.originalXtype;
+        this.textVisible = config.TextVisible;
+        if (config.FieldUi.originalXtype === 'Ui.SearchCommandInfoUi') {
+            this.labelCaption = '&#8203;';
+            this.labelVisible = true;
+            this.textVisible = true;
+        }
+        this.prepareMinAndMaxSize();
+    }
+    _refreshLabel() {
+        const config = this.config;
         let labelCaption = config.Caption;
         if (config.FieldUi.Setting?.IsMandatory) {
             if (labelCaption.indexOf('*') < 0) {
@@ -844,22 +868,8 @@ class LayoutControlComponent extends LayoutItemBaseComponent {
         const translateCaption = `${this._bbbTranslate.transform(labelCaption)}${this.isSearchPanel || labelCaption === '&zwnj;' ? '' : colonLabel}`;
         this.labelCaption = this.domSanitizer.bypassSecurityTrustHtml(translateCaption);
         this.labelVisible = config.TextVisible && this.showLabel !== false;
-        this.isRowDirection = config.TextLocation === 'Right' || config.TextLocation === 'Default';
-        this.isRowReverseDirection = config.TextLocation === 'Left';
-        this.isColumnDirection = config.TextLocation === 'Top' || this.isSearchPanel;
-        this.isColumnReverseDirection = config.TextLocation === 'Bottom';
-        config.FieldUi.LayoutControl = this;
         this._setHide(config.FieldUi.Setting.IsVisible === false ? true : false);
         this.isMandatory = config.FieldUi.Setting?.IsMandatory;
-        this.fieldIcon = config.FieldUi.Setting.FieldIcon;
-        this.originalXtype = config.FieldUi.originalXtype;
-        this.textVisible = config.TextVisible;
-        if (config.FieldUi.originalXtype === 'Ui.SearchCommandInfoUi') {
-            this.labelCaption = '&#8203;';
-            this.labelVisible = true;
-            this.textVisible = true;
-        }
-        this.prepareMinAndMaxSize();
     }
     _resizeUlvByDevice(device) {
         if (!this.isUlv) {
@@ -923,13 +933,15 @@ class LayoutControlComponent extends LayoutItemBaseComponent {
             this._renderer2.setStyle(this.el.nativeElement, 'flex', flex);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LayoutControlComponent, deps: [{ token: i2.FormPanelService }, { token: i0.ElementRef }, { token: i1$1.ContentDensityService }, { token: i1$2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: { inlineEdit: "inlineEdit", caption: "caption", focusControl: "focusControl", showLabel: "showLabel", maxLabelWidth: "maxLabelWidth", hasHorizontalText: "hasHorizontalText", contentDensity: "contentDensity", flex: "flex", RefreshLabel: "RefreshLabel", SetVisible: "SetVisible" }, host: { properties: { "class.layout-control": "this.layoutControlClass", "class.row-direction": "this.isRowDirection", "class.row-reverse-direction": "this.isRowReverseDirection", "class.column-direction": "this.isColumnDirection", "class.column-reverse-direction": "this.isColumnReverseDirection", "class.container-field": "this.isContainer", "style.max-width": "this.maxWidth", "style.min-width": "this.minWidth", "style.min-height": "this.minHeight", "style.height": "this.height", "attr.isChekbox": "this.isCheckbox", "attr.isButton": "this.isSinglePicture", "attr.minWidth": "this.attrMinWidth", "attr.controlId": "this.attrControlId", "attr.caption": "this.attrCaption" } }, providers: [LayoutService], viewQueries: [{ propertyName: "tempLabelRef", first: true, predicate: ["tempLabelRef"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hide) { @if (labelVisible) {\n<bsu-ly-label\n    [attr.labelWidth]=\"labelWidth\"\n    [attrRtl]\n    [class.no-padding]=\"config.Padding[0] === 0\"\n    [config]=\"config\"\n    [caption]=\"labelCaption\"\n    [originalWidth]=\"labelWidth\"\n    [style.min-width]=\"\n        isCheckbox\n            ? 'fit-content'\n            : config.CaptionSetting?.AlignMode === 'AutoSize'\n            ? 'auto'\n            : isColumnDirection || isColumnReverseDirection\n            ? '100%'\n            : maxLabelWidth + 'px'\n    \"\n    [style.width]=\"\n        config.CaptionSetting?.AlignMode === 'AutoSize'\n            ? 'auto'\n            : isColumnDirection || isColumnReverseDirection\n            ? '100%'\n            : maxLabelWidth + 'px'\n    \"\n    [isMandatory]=\"isMandatory\"\n    [fieldIcon]=\"fieldIcon\"\n    [originalXtype]=\"originalXtype\"\n    [textVisible]=\"textVisible\"\n    [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\n></bsu-ly-label>\n}\n<label [attr.visible]=\"labelVisible\" class=\"horizontal-label\" [innerHtml]=\"emptyText\"></label>\n<bnrc-field-ui\n    [attr.xtype]=\"config.FieldUi.originalXtype\"\n    [attr.fieldWidth]=\"layoutControlWidth\"\n    [attr.isCheckbox]=\"isCheckbox\"\n    [style.flex-grow]=\"isCheckbox ? 1 : 0\"\n    [class.no-padding]=\"config.Padding[0] === 0\"\n    [customField]=\"config.FieldUi\"\n    [layoutInfo]=\"config\"\n    [inlineEdit]=\"inlineEdit\"\n    [formHeight]=\"(formHeight$ | async)!!\"\n    [focusControl]=\"focusControl\"\n    [isSearchPanel]=\"isSearchPanel\"\n    [style.height]=\"isUlv ? '100%' : 'auto'\"\n    [attr.isulv]=\"isUlv\"\n></bnrc-field-ui>\n}\n", styles: [":host{width:100%;display:flex}.form-item-label-container{display:flex;position:relative}.lbl-temp{position:absolute;visibility:hidden}bsu-ly-label{padding:0 5px;margin:auto}bnrc-field-ui{padding:0 5px;margin:auto}bnrc-field-ui[xtype=\"Ui.CheckBox\"]{padding:0}@media screen and (max-width: 599px){:host{height:auto}bnrc-field-ui{height:auto}}\n"], dependencies: [{ kind: "component", type: i2.FieldUiComponent, selector: "bnrc-field-ui", inputs: ["isSearchPanel", "customField", "componentUi", "layoutInfo", "inlineEdit", "focusControl", "formHeight"] }, { kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: LyLabelComponent, selector: "bsu-ly-label", inputs: ["originalWidth", "minWidth", "caption", "captionIcon", "isColumn", "isMandatory", "fieldIcon", "originalXtype", "textVisible"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LayoutControlComponent, deps: [{ token: i2.FormPanelService }, { token: i0.ElementRef }, { token: i1$1.ContentDensityService }, { token: i1$2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i2.BbbTranslatePipe }, { token: i2.LayoutService, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: { inlineEdit: "inlineEdit", caption: "caption", focusControl: "focusControl", showLabel: "showLabel", maxLabelWidth: "maxLabelWidth", hasHorizontalText: "hasHorizontalText", contentDensity: "contentDensity", flex: "flex", RefreshLabel: "RefreshLabel", SetVisible: "SetVisible" }, outputs: { events: "events" }, host: { properties: { "class.layout-control": "this.layoutControlClass", "class.row-direction": "this.isRowDirection", "class.row-reverse-direction": "this.isRowReverseDirection", "class.column-direction": "this.isColumnDirection", "class.column-reverse-direction": "this.isColumnReverseDirection", "class.container-field": "this.isContainer", "style.max-width": "this.maxWidth", "style.min-width": "this.minWidth", "style.min-height": "this.minHeight", "style.height": "this.height", "attr.isChekbox": "this.isCheckbox", "attr.isButton": "this.isSinglePicture", "attr.minWidth": "this.attrMinWidth", "attr.controlId": "this.attrControlId", "attr.caption": "this.attrCaption" } }, providers: [LayoutService], viewQueries: [{ propertyName: "tempLabelRef", first: true, predicate: ["tempLabelRef"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hide) { @if (labelVisible) {\n<bsu-ly-label\n    [attr.labelWidth]=\"labelWidth\"\n    [attrRtl]\n    [class.no-padding]=\"config.Padding[0] === 0\"\n    [config]=\"config\"\n    [caption]=\"labelCaption\"\n    [originalWidth]=\"labelWidth\"\n    [style.min-width]=\"\n        isCheckbox\n            ? 'fit-content'\n            : config.CaptionSetting?.AlignMode === 'AutoSize'\n            ? 'fit-content'\n            : isColumnDirection || isColumnReverseDirection\n            ? '100%'\n            : maxLabelWidth + 'px'\n    \"\n    [style.width]=\"\n        config.CaptionSetting?.AlignMode === 'AutoSize'\n            ? 'auto'\n            : isColumnDirection || isColumnReverseDirection\n            ? '100%'\n            : maxLabelWidth + 'px'\n    \"\n    [isMandatory]=\"isMandatory\"\n    [fieldIcon]=\"fieldIcon\"\n    [originalXtype]=\"originalXtype\"\n    [textVisible]=\"textVisible\"\n    [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\n></bsu-ly-label>\n}\n<label [attr.visible]=\"labelVisible\" class=\"horizontal-label\" [innerHtml]=\"emptyText\"></label>\n<bnrc-field-ui\n    [attr.xtype]=\"config.FieldUi.originalXtype\"\n    [attr.fieldWidth]=\"layoutControlWidth\"\n    [attr.isCheckbox]=\"isCheckbox\"\n    [style.flex-grow]=\"isCheckbox ? 1 : 0\"\n    [class.no-padding]=\"config.Padding[0] === 0\"\n    [customField]=\"config.FieldUi\"\n    [layoutInfo]=\"config\"\n    [inlineEdit]=\"inlineEdit\"\n    [formHeight]=\"(formHeight$ | async)!!\"\n    [focusControl]=\"focusControl\"\n    [isSearchPanel]=\"isSearchPanel\"\n    [style.height]=\"isUlv ? '100%' : 'auto'\"\n    [attr.isulv]=\"isUlv\"\n></bnrc-field-ui>\n}\n", styles: [":host{width:100%;display:flex}.form-item-label-container{display:flex;position:relative}.lbl-temp{position:absolute;visibility:hidden}bsu-ly-label{padding:0 5px;margin:auto}bnrc-field-ui{padding:0 5px;margin:auto}bnrc-field-ui[xtype=\"Ui.CheckBox\"]{padding:0}@media screen and (max-width: 599px){:host{height:auto}bnrc-field-ui{height:auto}}\n"], dependencies: [{ kind: "component", type: i2.FieldUiComponent, selector: "bnrc-field-ui", inputs: ["isSearchPanel", "customField", "componentUi", "layoutInfo", "inlineEdit", "focusControl", "formHeight"] }, { kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: LyLabelComponent, selector: "bsu-ly-label", inputs: ["originalWidth", "minWidth", "caption", "captionIcon", "isColumn", "isMandatory", "fieldIcon", "originalXtype", "textVisible"] }, { 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: LayoutControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-layout-control', providers: [LayoutService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hide) { @if (labelVisible) {\n<bsu-ly-label\n    [attr.labelWidth]=\"labelWidth\"\n    [attrRtl]\n    [class.no-padding]=\"config.Padding[0] === 0\"\n    [config]=\"config\"\n    [caption]=\"labelCaption\"\n    [originalWidth]=\"labelWidth\"\n    [style.min-width]=\"\n        isCheckbox\n            ? 'fit-content'\n            : config.CaptionSetting?.AlignMode === 'AutoSize'\n            ? 'auto'\n            : isColumnDirection || isColumnReverseDirection\n            ? '100%'\n            : maxLabelWidth + 'px'\n    \"\n    [style.width]=\"\n        config.CaptionSetting?.AlignMode === 'AutoSize'\n            ? 'auto'\n            : isColumnDirection || isColumnReverseDirection\n            ? '100%'\n            : maxLabelWidth + 'px'\n    \"\n    [isMandatory]=\"isMandatory\"\n    [fieldIcon]=\"fieldIcon\"\n    [originalXtype]=\"originalXtype\"\n    [textVisible]=\"textVisible\"\n    [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\n></bsu-ly-label>\n}\n<label [attr.visible]=\"labelVisible\" class=\"horizontal-label\" [innerHtml]=\"emptyText\"></label>\n<bnrc-field-ui\n    [attr.xtype]=\"config.FieldUi.originalXtype\"\n    [attr.fieldWidth]=\"layoutControlWidth\"\n    [attr.isCheckbox]=\"isCheckbox\"\n    [style.flex-grow]=\"isCheckbox ? 1 : 0\"\n    [class.no-padding]=\"config.Padding[0] === 0\"\n    [customField]=\"config.FieldUi\"\n    [layoutInfo]=\"config\"\n    [inlineEdit]=\"inlineEdit\"\n    [formHeight]=\"(formHeight$ | async)!!\"\n    [focusControl]=\"focusControl\"\n    [isSearchPanel]=\"isSearchPanel\"\n    [style.height]=\"isUlv ? '100%' : 'auto'\"\n    [attr.isulv]=\"isUlv\"\n></bnrc-field-ui>\n}\n", styles: [":host{width:100%;display:flex}.form-item-label-container{display:flex;position:relative}.lbl-temp{position:absolute;visibility:hidden}bsu-ly-label{padding:0 5px;margin:auto}bnrc-field-ui{padding:0 5px;margin:auto}bnrc-field-ui[xtype=\"Ui.CheckBox\"]{padding:0}@media screen and (max-width: 599px){:host{height:auto}bnrc-field-ui{height:auto}}\n"] }]
-        }], ctorParameters: () => [{ type: i2.FormPanelService }, { type: i0.ElementRef }, { type: i1$1.ContentDensityService }, { type: i1$2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i2.BbbTranslatePipe }], propDecorators: { tempLabelRef: [{
+            args: [{ selector: 'bsu-layout-control', providers: [LayoutService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hide) { @if (labelVisible) {\n<bsu-ly-label\n    [attr.labelWidth]=\"labelWidth\"\n    [attrRtl]\n    [class.no-padding]=\"config.Padding[0] === 0\"\n    [config]=\"config\"\n    [caption]=\"labelCaption\"\n    [originalWidth]=\"labelWidth\"\n    [style.min-width]=\"\n        isCheckbox\n            ? 'fit-content'\n            : config.CaptionSetting?.AlignMode === 'AutoSize'\n            ? 'fit-content'\n            : isColumnDirection || isColumnReverseDirection\n            ? '100%'\n            : maxLabelWidth + 'px'\n    \"\n    [style.width]=\"\n        config.CaptionSetting?.AlignMode === 'AutoSize'\n            ? 'auto'\n            : isColumnDirection || isColumnReverseDirection\n            ? '100%'\n            : maxLabelWidth + 'px'\n    \"\n    [isMandatory]=\"isMandatory\"\n    [fieldIcon]=\"fieldIcon\"\n    [originalXtype]=\"originalXtype\"\n    [textVisible]=\"textVisible\"\n    [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\n></bsu-ly-label>\n}\n<label [attr.visible]=\"labelVisible\" class=\"horizontal-label\" [innerHtml]=\"emptyText\"></label>\n<bnrc-field-ui\n    [attr.xtype]=\"config.FieldUi.originalXtype\"\n    [attr.fieldWidth]=\"layoutControlWidth\"\n    [attr.isCheckbox]=\"isCheckbox\"\n    [style.flex-grow]=\"isCheckbox ? 1 : 0\"\n    [class.no-padding]=\"config.Padding[0] === 0\"\n    [customField]=\"config.FieldUi\"\n    [layoutInfo]=\"config\"\n    [inlineEdit]=\"inlineEdit\"\n    [formHeight]=\"(formHeight$ | async)!!\"\n    [focusControl]=\"focusControl\"\n    [isSearchPanel]=\"isSearchPanel\"\n    [style.height]=\"isUlv ? '100%' : 'auto'\"\n    [attr.isulv]=\"isUlv\"\n></bnrc-field-ui>\n}\n", styles: [":host{width:100%;display:flex}.form-item-label-container{display:flex;position:relative}.lbl-temp{position:absolute;visibility:hidden}bsu-ly-label{padding:0 5px;margin:auto}bnrc-field-ui{padding:0 5px;margin:auto}bnrc-field-ui[xtype=\"Ui.CheckBox\"]{padding:0}@media screen and (max-width: 599px){:host{height:auto}bnrc-field-ui{height:auto}}\n"] }]
+        }], ctorParameters: () => [{ type: i2.FormPanelService }, { type: i0.ElementRef }, { type: i1$1.ContentDensityService }, { type: i1$2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i2.BbbTranslatePipe }, { type: i2.LayoutService, decorators: [{
+                    type: SkipSelf
+                }] }], propDecorators: { tempLabelRef: [{
                 type: ViewChild,
                 args: ['tempLabelRef', { read: ElementRef, static: true }]
             }], layoutControlClass: [{
@@ -996,6 +1008,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Input
             }], flex: [{
                 type: Input
+            }], events: [{
+                type: Output
             }], RefreshLabel: [{
                 type: Input
             }], SetVisible: [{
@@ -2831,7 +2845,7 @@ class ColumnMatrixRendererComponent extends BaseComponent {
         this.changeToEdit.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ColumnMatrixRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ColumnMatrixRendererComponent, selector: "bsu-column-matrix-renderer", inputs: { value: "value", valueCaption: "valueCaption", formLayout: "formLayout", columnCaption: "columnCaption", uiControl: "uiControl", valueType: "valueType", isActive: "isActive", height: "height" }, outputs: { cellClick: "cellClick", changeToEdit: "changeToEdit" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    @if (!isActive) {\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n    } @else { @if (uiControl) {\n    <bsu-layout-control [caption]=\"valueCaption\" [config]=\"uiControl\" [focusControl]=\"true\" [showLabel]=\"false\">\n    </bsu-layout-control>\n    } }\n</ng-container>\n\n<ng-template #renderGeneral>\n    <div (click)=\"cellClick.emit()\" class=\"render-general\">\n        <fd-popover #popover [fillControlMode]=\"'equal'\">\n            <fd-popover-control style=\"display: flex; flex-direction: column; justify-content: center; min-width: 100%\">\n                <span\n                    style=\"min-width: 100%; height: inherit\"\n                    #popoverControlEl\n                    (keydown.enter)=\"onEdit()\"\n                    (mouseover)=\"onOpenPopover($event, popoverControlEl)\"\n                    (mouseleave)=\"popover.close()\"\n                    [class.break-anywhere]=\"breakValueAnywhere\"\n                    >{{ value | matrixValue: valueType:uiControl }}</span\n                >\n            </fd-popover-control>\n            <fd-popover-body>\n                <span [class.break-anywhere]=\"breakValueAnywhere\">{{ value | matrixValue: valueType:uiControl }}</span>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n", styles: [":host{flex:1;width:inherit}.break-anywhere{line-break:anywhere}.render-general{width:100%;height:100%}::ng-deep fd-popover,::ng-deep fd-popover-control,::ng-deep .fd-popover__control{height:inherit;min-width:100%}fd-popover-body{margin-top:5px}fd-popover-body ::ng-deep .fd-popover__popper--cdk-custom{padding:5px}fd-popover-body span{white-space:break-spaces;padding:5px}bsu-layout-control{min-width:100%!important}bsu-layout-control span{height:inherit}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$4.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i6$4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i6$4.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"] }, { kind: "pipe", type: MatrixValuePipe, name: "matrixValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ColumnMatrixRendererComponent, selector: "bsu-column-matrix-renderer", inputs: { value: "value", valueCaption: "valueCaption", formLayout: "formLayout", columnCaption: "columnCaption", uiControl: "uiControl", valueType: "valueType", isActive: "isActive", height: "height" }, outputs: { cellClick: "cellClick", changeToEdit: "changeToEdit" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    @if (!isActive) {\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n    } @else { @if (uiControl) {\n    <bsu-layout-control [caption]=\"valueCaption\" [config]=\"uiControl\" [focusControl]=\"true\" [showLabel]=\"false\">\n    </bsu-layout-control>\n    } }\n</ng-container>\n\n<ng-template #renderGeneral>\n    <div (click)=\"cellClick.emit()\" class=\"render-general\">\n        <fd-popover #popover [fillControlMode]=\"'equal'\">\n            <fd-popover-control style=\"display: flex; flex-direction: column; justify-content: center; min-width: 100%\">\n                <span\n                    style=\"min-width: 100%; height: inherit\"\n                    #popoverControlEl\n                    (keydown.enter)=\"onEdit()\"\n                    (mouseover)=\"onOpenPopover($event, popoverControlEl)\"\n                    (mouseleave)=\"popover.close()\"\n                    [class.break-anywhere]=\"breakValueAnywhere\"\n                    >{{ value | matrixValue: valueType:uiControl }}</span\n                >\n            </fd-popover-control>\n            <fd-popover-body>\n                <span [class.break-anywhere]=\"breakValueAnywhere\">{{ value | matrixValue: valueType:uiControl }}</span>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n", styles: [":host{flex:1;width:inherit}.break-anywhere{line-break:anywhere}.render-general{width:100%;height:100%}::ng-deep fd-popover,::ng-deep fd-popover-control,::ng-deep .fd-popover__control{height:inherit;min-width:100%}fd-popover-body{margin-top:5px}fd-popover-body ::ng-deep .fd-popover__popper--cdk-custom{padding:5px}fd-popover-body span{white-space:break-spaces;padding:5px}bsu-layout-control{min-width:100%!important}bsu-layout-control span{height:inherit}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$4.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i6$4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i6$4.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: "pipe", type: MatrixValuePipe, name: "matrixValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ColumnMatrixRendererComponent, decorators: [{
             type: Component,
@@ -3935,11 +3949,11 @@ class UiTreeViewComponent extends ReportViewBaseComponent {
         this.loadChildren.emit(node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiTreeViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiTreeViewComponent, selector: "bsu-ui-tree-view", inputs: { root: "root", selectedNode: "selectedNode", isHetro: "isHetro", leafCursorPointer: "leafCursorPointer", relationList: "relationList", showOkCancelButtons: "showOkCancelButtons", enableNodeReordering: "enableNodeReordering", collapseIcon: "collapseIcon", iconField: "iconField", colorField: "colorField" }, outputs: { checkChange: "checkChange", nodeSelect: "nodeSelect", createNew: "createNew", loadChildren: "loadChildren", nodeViewClick: "nodeViewClick", nodeUlvCommand: "nodeUlvCommand", itemDrop: "itemDrop", itemDragMoved: "itemDragMoved" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        <ul\n            cdkDropList\n            [cdkDropListData]=\"moDataList\"\n            [id]=\"'$Root'\"\n            [cdkDropListDisabled]=\"!enableNodeReordering\"\n            (cdkDropListDropped)=\"onDrop($event)\"\n            [cdkDropListSortingDisabled]=\"true\"\n        >\n            @if (moDataList?.length > 0) { @for (node of moDataList; track node.key; let index = $index) { @if\n            (node.visibility === true && node.parentNode | isExpandedNode) {\n            <bsu-barsa-tree-item\n                class=\"node-item\"\n                [attr.data-id]=\"node.Data.Id\"\n                [attr.id]=\"'node-' + node.Data.Id\"\n                [enableNodeReordering]=\"enableNodeReordering\"\n                [leafCursorPointer]=\"leafCursorPointer && node.leaf\"\n                [style.cursor]=\"cursor\"\n                [node]=\"node\"\n                [hideIcon]=\"hideIcon\"\n                [icon]=\"iconField | rval: node.Data:allColumns\"\n                [color]=\"colorField | rval: node.Data:allColumns\"\n                [level]=\"node.level\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [styleIndex]=\"node.Data.$StyleIndex\"\n                [isChecked]=\"selectedNode?.Data?.Id === node.Data.Id || (inDialog && node.Data.$IsChecked)\"\n                [hasChildren]=\"node.Data.$HasChildren\"\n                [loading]=\"node.loading\"\n                [inDialog]=\"inDialog\"\n                [isMultiSelect]=\"isMultiSelect\"\n                [isExpand]=\"node.isExpand\"\n                [isHetro]=\"isHetro\"\n                [parentNode]=\"node.parentNode\"\n                [text]=\"node.text\"\n                [openOnClick]=\"openOnClick\"\n                [collapseIcon]=\"rtl ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                [navigationArrow]=\"navigationArrow\"\n                [rtl]=\"rtl\"\n                [index]=\"index\"\n                [allColumns]=\"allColumns\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [showOkCancelButtons]=\"showOkCancelButtons\"\n                [selectedNode]=\"selectedNode\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [isCheckList]=\"isCheckList\"\n                [deviceName]=\"deviceName\"\n                [access]=\"access\"\n                (checkChange)=\"onCheckChange($event)\"\n                (select)=\"onNodeSelect(node, index)\"\n                (ulvCommandClick)=\"onNodeUlvCommand(node, index)\"\n                (viewClick)=\"onNodeViewClick(node, index)\"\n                (loadChildren)=\"onLoadChildren(node)\"\n                (dragMoved)=\"onDragMoved($event)\"\n                [relationList]=\"relationList\"\n                (createNew)=\"createNew.emit($event)\"\n            >\n            </bsu-barsa-tree-item>\n            } } } @else {\n            <bsu-no-data [simple]=\"true\"></bsu-no-data>\n            }\n        </ul>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<!--noData-->\n", styles: ["*{font-family:Lato}.cdk-drag-placeholder{display:none}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 3px 3px -2px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff;opacity:.3}ul{padding-inline-start:0}.drop-inside{border:1px solid #00f}.drop-inside ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-before{border-top:1px solid #00f}.drop-before ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-after{border-bottom:1px solid #00f}.drop-after ::ng-deep .fd-list__item{background-color:#dce9f6!important}.no-drop ::ng-deep li,.no-drop li .cdk-drag-handle{cursor:no-drop!important}.node-title{padding:15px;margin:5px;background:#eee;cursor:grab}.node-children{position:relative;transition:height .2s;margin-left:40px}.item-notes{margin-left:20px;color:#aaa}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: i7$2.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i7$2.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { 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: NoDataComponent, selector: "bsu-no-data", inputs: ["simple"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.IsExpandedNodePipe, name: "isExpandedNode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiTreeViewComponent, selector: "bsu-ui-tree-view", inputs: { root: "root", selectedNode: "selectedNode", isHetro: "isHetro", leafCursorPointer: "leafCursorPointer", relationList: "relationList", showOkCancelButtons: "showOkCancelButtons", enableNodeReordering: "enableNodeReordering", collapseIcon: "collapseIcon", iconField: "iconField", colorField: "colorField", viewSettingsContentDensity: "viewSettingsContentDensity" }, outputs: { checkChange: "checkChange", nodeSelect: "nodeSelect", createNew: "createNew", loadChildren: "loadChildren", nodeViewClick: "nodeViewClick", nodeUlvCommand: "nodeUlvCommand", itemDrop: "itemDrop", itemDragMoved: "itemDragMoved" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        <ul\n            cdkDropList\n            [cdkDropListData]=\"moDataList\"\n            [id]=\"'$Root'\"\n            [cdkDropListDisabled]=\"!enableNodeReordering\"\n            (cdkDropListDropped)=\"onDrop($event)\"\n            [cdkDropListSortingDisabled]=\"true\"\n            fd-list\n            [class.is-compact]=\"viewSettingsContentDensity === 'compact'\"\n            [class.is-cozy]=\"viewSettingsContentDensity === 'cozy'\"\n        >\n            @if (moDataList?.length > 0) { @for (node of moDataList; track node.key; let index = $index) { @if\n            (node.visibility === true && node.parentNode | isExpandedNode) {\n            <bsu-barsa-tree-item\n                class=\"node-item\"\n                [attr.data-id]=\"node.Data.Id\"\n                [attr.id]=\"'node-' + node.Data.Id\"\n                [enableNodeReordering]=\"enableNodeReordering\"\n                [leafCursorPointer]=\"leafCursorPointer && node.leaf\"\n                [style.cursor]=\"cursor\"\n                [node]=\"node\"\n                [hideIcon]=\"hideIcon\"\n                [icon]=\"iconField | rval: node.Data:allColumns\"\n                [color]=\"colorField | rval: node.Data:allColumns\"\n                [level]=\"node.level\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [styleIndex]=\"node.Data.$StyleIndex\"\n                [isChecked]=\"selectedNode?.Data?.Id === node.Data.Id || (inDialog && node.Data.$IsChecked)\"\n                [hasChildren]=\"node.Data.$HasChildren\"\n                [loading]=\"node.loading\"\n                [inDialog]=\"inDialog\"\n                [isMultiSelect]=\"isMultiSelect\"\n                [isExpand]=\"node.isExpand\"\n                [isHetro]=\"isHetro\"\n                [parentNode]=\"node.parentNode\"\n                [text]=\"node.text\"\n                [openOnClick]=\"openOnClick\"\n                [collapseIcon]=\"rtl ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                [navigationArrow]=\"navigationArrow\"\n                [rtl]=\"rtl\"\n                [index]=\"index\"\n                [allColumns]=\"allColumns\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [showOkCancelButtons]=\"showOkCancelButtons\"\n                [selectedNode]=\"selectedNode\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [isCheckList]=\"isCheckList\"\n                [deviceName]=\"deviceName\"\n                [access]=\"access\"\n                (checkChange)=\"onCheckChange($event)\"\n                (select)=\"onNodeSelect(node, index)\"\n                (ulvCommandClick)=\"onNodeUlvCommand(node, index)\"\n                (viewClick)=\"onNodeViewClick(node, index)\"\n                (loadChildren)=\"onLoadChildren(node)\"\n                (dragMoved)=\"onDragMoved($event)\"\n                [relationList]=\"relationList\"\n                (createNew)=\"createNew.emit($event)\"\n            >\n            </bsu-barsa-tree-item>\n            } } } @else {\n            <bsu-no-data [simple]=\"true\"></bsu-no-data>\n            }\n        </ul>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<!--noData-->\n", styles: ["*{font-family:Lato}.cdk-drag-placeholder{display:none}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 3px 3px -2px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff;opacity:.3}ul{padding-inline-start:0}.drop-inside{border:1px solid #00f}.drop-inside ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-before{border-top:1px solid #00f}.drop-before ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-after{border-bottom:1px solid #00f}.drop-after ::ng-deep .fd-list__item{background-color:#dce9f6!important}.no-drop ::ng-deep li,.no-drop li .cdk-drag-handle{cursor:no-drop!important}.node-title{padding:15px;margin:5px;background:#eee;cursor:grab}.node-children{position:relative;transition:height .2s;margin-left:40px}.item-notes{margin-left:20px;color:#aaa}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: i7$2.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i7$2.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i8.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { 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: NoDataComponent, selector: "bsu-no-data", inputs: ["simple"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.IsExpandedNodePipe, name: "isExpandedNode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiTreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-tree-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        <ul\n            cdkDropList\n            [cdkDropListData]=\"moDataList\"\n            [id]=\"'$Root'\"\n            [cdkDropListDisabled]=\"!enableNodeReordering\"\n            (cdkDropListDropped)=\"onDrop($event)\"\n            [cdkDropListSortingDisabled]=\"true\"\n        >\n            @if (moDataList?.length > 0) { @for (node of moDataList; track node.key; let index = $index) { @if\n            (node.visibility === true && node.parentNode | isExpandedNode) {\n            <bsu-barsa-tree-item\n                class=\"node-item\"\n                [attr.data-id]=\"node.Data.Id\"\n                [attr.id]=\"'node-' + node.Data.Id\"\n                [enableNodeReordering]=\"enableNodeReordering\"\n                [leafCursorPointer]=\"leafCursorPointer && node.leaf\"\n                [style.cursor]=\"cursor\"\n                [node]=\"node\"\n                [hideIcon]=\"hideIcon\"\n                [icon]=\"iconField | rval: node.Data:allColumns\"\n                [color]=\"colorField | rval: node.Data:allColumns\"\n                [level]=\"node.level\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [styleIndex]=\"node.Data.$StyleIndex\"\n                [isChecked]=\"selectedNode?.Data?.Id === node.Data.Id || (inDialog && node.Data.$IsChecked)\"\n                [hasChildren]=\"node.Data.$HasChildren\"\n                [loading]=\"node.loading\"\n                [inDialog]=\"inDialog\"\n                [isMultiSelect]=\"isMultiSelect\"\n                [isExpand]=\"node.isExpand\"\n                [isHetro]=\"isHetro\"\n                [parentNode]=\"node.parentNode\"\n                [text]=\"node.text\"\n                [openOnClick]=\"openOnClick\"\n                [collapseIcon]=\"rtl ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                [navigationArrow]=\"navigationArrow\"\n                [rtl]=\"rtl\"\n                [index]=\"index\"\n                [allColumns]=\"allColumns\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [showOkCancelButtons]=\"showOkCancelButtons\"\n                [selectedNode]=\"selectedNode\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [isCheckList]=\"isCheckList\"\n                [deviceName]=\"deviceName\"\n                [access]=\"access\"\n                (checkChange)=\"onCheckChange($event)\"\n                (select)=\"onNodeSelect(node, index)\"\n                (ulvCommandClick)=\"onNodeUlvCommand(node, index)\"\n                (viewClick)=\"onNodeViewClick(node, index)\"\n                (loadChildren)=\"onLoadChildren(node)\"\n                (dragMoved)=\"onDragMoved($event)\"\n                [relationList]=\"relationList\"\n                (createNew)=\"createNew.emit($event)\"\n            >\n            </bsu-barsa-tree-item>\n            } } } @else {\n            <bsu-no-data [simple]=\"true\"></bsu-no-data>\n            }\n        </ul>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<!--noData-->\n", styles: ["*{font-family:Lato}.cdk-drag-placeholder{display:none}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 3px 3px -2px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff;opacity:.3}ul{padding-inline-start:0}.drop-inside{border:1px solid #00f}.drop-inside ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-before{border-top:1px solid #00f}.drop-before ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-after{border-bottom:1px solid #00f}.drop-after ::ng-deep .fd-list__item{background-color:#dce9f6!important}.no-drop ::ng-deep li,.no-drop li .cdk-drag-handle{cursor:no-drop!important}.node-title{padding:15px;margin:5px;background:#eee;cursor:grab}.node-children{position:relative;transition:height .2s;margin-left:40px}.item-notes{margin-left:20px;color:#aaa}\n"] }]
+            args: [{ selector: 'bsu-ui-tree-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        <ul\n            cdkDropList\n            [cdkDropListData]=\"moDataList\"\n            [id]=\"'$Root'\"\n            [cdkDropListDisabled]=\"!enableNodeReordering\"\n            (cdkDropListDropped)=\"onDrop($event)\"\n            [cdkDropListSortingDisabled]=\"true\"\n            fd-list\n            [class.is-compact]=\"viewSettingsContentDensity === 'compact'\"\n            [class.is-cozy]=\"viewSettingsContentDensity === 'cozy'\"\n        >\n            @if (moDataList?.length > 0) { @for (node of moDataList; track node.key; let index = $index) { @if\n            (node.visibility === true && node.parentNode | isExpandedNode) {\n            <bsu-barsa-tree-item\n                class=\"node-item\"\n                [attr.data-id]=\"node.Data.Id\"\n                [attr.id]=\"'node-' + node.Data.Id\"\n                [enableNodeReordering]=\"enableNodeReordering\"\n                [leafCursorPointer]=\"leafCursorPointer && node.leaf\"\n                [style.cursor]=\"cursor\"\n                [node]=\"node\"\n                [hideIcon]=\"hideIcon\"\n                [icon]=\"iconField | rval: node.Data:allColumns\"\n                [color]=\"colorField | rval: node.Data:allColumns\"\n                [level]=\"node.level\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [styleIndex]=\"node.Data.$StyleIndex\"\n                [isChecked]=\"selectedNode?.Data?.Id === node.Data.Id || (inDialog && node.Data.$IsChecked)\"\n                [hasChildren]=\"node.Data.$HasChildren\"\n                [loading]=\"node.loading\"\n                [inDialog]=\"inDialog\"\n                [isMultiSelect]=\"isMultiSelect\"\n                [isExpand]=\"node.isExpand\"\n                [isHetro]=\"isHetro\"\n                [parentNode]=\"node.parentNode\"\n                [text]=\"node.text\"\n                [openOnClick]=\"openOnClick\"\n                [collapseIcon]=\"rtl ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                [navigationArrow]=\"navigationArrow\"\n                [rtl]=\"rtl\"\n                [index]=\"index\"\n                [allColumns]=\"allColumns\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [showOkCancelButtons]=\"showOkCancelButtons\"\n                [selectedNode]=\"selectedNode\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [isCheckList]=\"isCheckList\"\n                [deviceName]=\"deviceName\"\n                [access]=\"access\"\n                (checkChange)=\"onCheckChange($event)\"\n                (select)=\"onNodeSelect(node, index)\"\n                (ulvCommandClick)=\"onNodeUlvCommand(node, index)\"\n                (viewClick)=\"onNodeViewClick(node, index)\"\n                (loadChildren)=\"onLoadChildren(node)\"\n                (dragMoved)=\"onDragMoved($event)\"\n                [relationList]=\"relationList\"\n                (createNew)=\"createNew.emit($event)\"\n            >\n            </bsu-barsa-tree-item>\n            } } } @else {\n            <bsu-no-data [simple]=\"true\"></bsu-no-data>\n            }\n        </ul>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<!--noData-->\n", styles: ["*{font-family:Lato}.cdk-drag-placeholder{display:none}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 3px 3px -2px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff;opacity:.3}ul{padding-inline-start:0}.drop-inside{border:1px solid #00f}.drop-inside ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-before{border-top:1px solid #00f}.drop-before ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-after{border-bottom:1px solid #00f}.drop-after ::ng-deep .fd-list__item{background-color:#dce9f6!important}.no-drop ::ng-deep li,.no-drop li .cdk-drag-handle{cursor:no-drop!important}.node-title{padding:15px;margin:5px;background:#eee;cursor:grab}.node-children{position:relative;transition:height .2s;margin-left:40px}.item-notes{margin-left:20px;color:#aaa}\n"] }]
         }], propDecorators: { root: [{
                 type: Input
             }], selectedNode: [{
@@ -3960,6 +3974,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Input
             }], colorField: [{
                 type: Input
+            }], viewSettingsContentDensity: [{
+                type: Input
             }], checkChange: [{
                 type: Output
             }], nodeSelect: [{
@@ -4064,11 +4080,11 @@ class UiTreeComponent extends ReportTreeBaseComponent {
         this.loadChildren(node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiTreeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiTreeComponent, selector: "bsu-ui-tree", inputs: { showOkCancelButtons: "showOkCancelButtons" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"\n        renderTree;\n        context: {\n            $implicit: root$ | async,\n            moDataList: flatMoDataList,\n            isCheckList: context.Setting.View?.IsCheckList,\n            columns: visibleColumns$ | async,\n            groupby: groupby$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: context.Setting.View?.ConditionalFormats,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            title: title$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            hideToolbar: hideToolbar$ | async,\n            gridSetting: gridSetting$ | async,\n            contentDensity: contentDensity$ | async,\n            hasSelected: hasSelected$ | async,\n            showOkCancelButtons: showOkCancelButtons,\n            hideOpenIcon: viewSetting?.HideOpenIcon,\n            openOnClick: viewSetting?.OpenOnClick,\n            onlyExecuteLeafNode: viewSetting?.OnlyExecuteLeafNode,\n            enableNodeReordering: viewSetting?.EnableNodeReordering,\n            iconField: viewSetting?.IconField,\n            hideIcon: viewSetting?.HideIcon,\n            colorField: viewSetting?.ColorField,\n            selectedNode: selectedNode$ | async,\n            navigationArrow: navigationArrow$ | async,\n            collapseIcon: collapseIcon$ | async,\n            relationList: context.Setting.View.RelationList,\n            allColumns: allColumns,\n            rtl: rtl$ | async,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\n            isHetro: context.Setting.ClassNames.DataClass === 'Ul.HetroTreeUlvDataCtrlr',\n            selectedMo: selectedMo$ | async\n        }\n    \"\n></ng-container>\n\n<ng-template\n    #renderTree\n    let-root\n    let-moDataList=\"moDataList\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-title=\"title\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-allowInlineEdit=\"allowInlineEdit\"\n    let-hideToolbar=\"hideToolbar\"\n    let-gridSetting=\"gridSetting\"\n    let-contentDensity=\"contentDensity\"\n    let-access=\"access\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-hasSelected=\"hasSelected\"\n    let-showOkCancelButtons=\"showOkCancelButtons\"\n    let-selectedNode=\"selectedNode\"\n    let-navigationArrow=\"navigationArrow\"\n    let-collapseIcon=\"collapseIcon\"\n    let-rtl=\"rtl\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-relationList=\"relationList\"\n    let-isHetro=\"isHetro\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-selectedMo=\"selectedMo\"\n    let-hideOpenIcon=\"hideOpenIcon\"\n    let-openOnClick=\"openOnClick\"\n    let-enableNodeReordering=\"enableNodeReordering\"\n    let-onlyExecuteLeafNode=\"onlyExecuteLeafNode\"\n    let-iconField=\"iconField\"\n    let-colorField=\"colorField\"\n    let-allColumns=\"allColumns\"\n    let-hideIcon=\"hideIcon\"\n>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [hasSelected]=\"hasSelected\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [contentDensity]=\"contentDensity\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [moDataListCount]=\"moDataList.length\"\n        (sortClick)=\"onSortSettings(deviceName)\"\n        (groupbyClick)=\"onGroupbySettings(deviceName)\"\n        (columnClick)=\"onColumnSettings(deviceName)\"\n        (editModeClick)=\"onEditMode()\"\n    >\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"'collapse-all'\"\n            (click)=\"onCollapseAll()\"\n        ></button>\n        @if (!showOkCancelButtons && enableNodeReordering) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"'move'\"\n            (click)=\"onOpenMoveToDialog(selectedNode, deviceName, moveDialog)\"\n        ></button>\n        }\n    </bsu-ulv-toolbar>\n    <bsu-ui-tree-view\n        [leafCursorPointer]=\"onlyExecuteLeafNode && openOnClick\"\n        [rtl]=\"rtl\"\n        [relationList]=\"relationList\"\n        [root]=\"root\"\n        [allColumns]=\"allColumns\"\n        [hideIcon]=\"hideIcon\"\n        [selectedMo]=\"selectedMo\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [iconField]=\"iconField\"\n        [colorField]=\"colorField\"\n        [navigationArrow]=\"navigationArrow\"\n        [collapseIcon]=\"collapseIcon\"\n        [selectedNode]=\"selectedNode\"\n        [access]=\"access\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [enableNodeReordering]=\"enableNodeReordering\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [openOnClick]=\"openOnClick\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [moDataList]=\"moDataList\"\n        [groupby]=\"groupby\"\n        [isHetro]=\"isHetro\"\n        [isCheckList]=\"isCheckList\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [showOkCancelButtons]=\"showOkCancelButtons\"\n        (checkChange)=\"onCheckChange($event)\"\n        (itemDrop)=\"onDrop($event)\"\n        (itemDragMoved)=\"onDragMoved($event)\"\n        (nodeUlvCommand)=\"onNodeUlvCommand($event)\"\n        (nodeViewClick)=\"onNodeViewClick($event)\"\n        (loadChildren)=\"onLoadChildren($event)\"\n        (nodeSelect)=\"onNodeSelect($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (createNew)=\"onCreateNew($event)\"\n    >\n    </bsu-ui-tree-view>\n    <ng-template let-dialog let-dialogConfig=\"dialogConfig\" #moveDialog>\n        <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n            <fd-dialog-header>\n                <h1 fd-title>{{ 'Move' | bbbTranslate }}</h1>\n                <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\n            </fd-dialog-header>\n\n            <fd-dialog-body>\n                <div class=\"move-to\" (keydown.enter)=\"onConfirmDialog(dialogSelectedNode)\">\n                    <bsu-ui-tree-view\n                        [rtl]=\"rtl\"\n                        [root]=\"root\"\n                        [access]=\"access\"\n                        [navigationArrow]=\"navigationArrow\"\n                        [collapseIcon]=\"collapseIcon\"\n                        [deviceName]=\"deviceName\"\n                        [deviceSize]=\"deviceSize\"\n                        [enableNodeReordering]=\"enableNodeReordering\"\n                        [openOnClick]=\"openOnClick\"\n                        [selectedNode]=\"dialogSelectedNode\"\n                        [moDataList]=\"flatMoDataList\"\n                        [groupby]=\"groupby\"\n                        [isCheckList]=\"isCheckList\"\n                        [conditionalFormats]=\"conditionalFormats\"\n                        (loadChildren)=\"onLoadChildren($event)\"\n                        (nodeSelect)=\"onSelectNodeInMoveDialog($event)\"\n                    ></bsu-ui-tree-view>\n                </div>\n            </fd-dialog-body>\n\n            <fd-dialog-footer>\n                <ng-template fdkTemplate=\"footer\">\n                    <div fd-bar-right>\n                        <fd-button-bar\n                            fdType=\"emphasized\"\n                            [label]=\"'OK' | bbbTranslate\"\n                            (click)=\"onConfirmDialog(dialogSelectedNode)\"\n                        >\n                        </fd-button-bar>\n                        <fd-button-bar fd-initial-focus [label]=\"'Cancel' | bbbTranslate\" (click)=\"onDismissDialog()\">\n                        </fd-button-bar>\n                    </div>\n                </ng-template>\n            </fd-dialog-footer>\n        </fd-dialog>\n    </ng-template>\n</ng-template>\n", styles: [":host{width:100%;box-sizing:border-box;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { 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: "component", type: i4$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "directive", type: i5$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: ["allowGridColumnSort", "useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "hasSelected", "config", "hidden", "buttons", "moDataListCount"], outputs: ["search", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo"] }, { kind: "component", type: UiTreeViewComponent, selector: "bsu-ui-tree-view", inputs: ["root", "selectedNode", "isHetro", "leafCursorPointer", "relationList", "showOkCancelButtons", "enableNodeReordering", "collapseIcon", "iconField", "colorField"], outputs: ["checkChange", "nodeSelect", "createNew", "loadChildren", "nodeViewClick", "nodeUlvCommand", "itemDrop", "itemDragMoved"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }, { kind: "pipe", type: i2.ContextMenuPipe, name: "contextMenu" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: UiTreeComponent, selector: "bsu-ui-tree", inputs: { showOkCancelButtons: "showOkCancelButtons" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"\n        renderTree;\n        context: {\n            $implicit: root$ | async,\n            moDataList: flatMoDataList,\n            isCheckList: context.Setting.View?.IsCheckList,\n            columns: visibleColumns$ | async,\n            groupby: groupby$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: context.Setting.View?.ConditionalFormats,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            title: title$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            hideToolbar: hideToolbar$ | async,\n            gridSetting: gridSetting$ | async,\n            contentDensity: contentDensity$ | async,\n            hasSelected: hasSelected$ | async,\n            showOkCancelButtons: showOkCancelButtons,\n            hideOpenIcon: viewSetting?.HideOpenIcon,\n            openOnClick: viewSetting?.OpenOnClick,\n            onlyExecuteLeafNode: viewSetting?.OnlyExecuteLeafNode,\n            enableNodeReordering: viewSetting?.EnableNodeReordering,\n            viewSettingsContentDensity: viewSetting?.ContentDensity$Caption,\n            iconField: viewSetting?.IconField,\n            hideIcon: viewSetting?.HideIcon,\n            colorField: viewSetting?.ColorField,\n            selectedNode: selectedNode$ | async,\n            navigationArrow: navigationArrow$ | async,\n            collapseIcon: collapseIcon$ | async,\n            relationList: context.Setting.View.RelationList,\n            allColumns: allColumns,\n            rtl: rtl$ | async,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\n            isHetro: context.Setting.ClassNames.DataClass === 'Ul.HetroTreeUlvDataCtrlr',\n            selectedMo: selectedMo$ | async\n        }\n    \"\n></ng-container>\n\n<ng-template\n    #renderTree\n    let-root\n    let-moDataList=\"moDataList\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-title=\"title\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-allowInlineEdit=\"allowInlineEdit\"\n    let-hideToolbar=\"hideToolbar\"\n    let-gridSetting=\"gridSetting\"\n    let-contentDensity=\"contentDensity\"\n    let-access=\"access\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-hasSelected=\"hasSelected\"\n    let-showOkCancelButtons=\"showOkCancelButtons\"\n    let-selectedNode=\"selectedNode\"\n    let-navigationArrow=\"navigationArrow\"\n    let-collapseIcon=\"collapseIcon\"\n    let-rtl=\"rtl\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-relationList=\"relationList\"\n    let-isHetro=\"isHetro\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-selectedMo=\"selectedMo\"\n    let-hideOpenIcon=\"hideOpenIcon\"\n    let-openOnClick=\"openOnClick\"\n    let-enableNodeReordering=\"enableNodeReordering\"\n    let-onlyExecuteLeafNode=\"onlyExecuteLeafNode\"\n    let-iconField=\"iconField\"\n    let-colorField=\"colorField\"\n    let-allColumns=\"allColumns\"\n    let-hideIcon=\"hideIcon\"\n    let-viewSettingsContentDensity=\"viewSettingsContentDensity\"\n>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [hasSelected]=\"hasSelected\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [contentDensity]=\"contentDensity\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [moDataListCount]=\"moDataList.length\"\n        (sortClick)=\"onSortSettings(deviceName)\"\n        (groupbyClick)=\"onGroupbySettings(deviceName)\"\n        (columnClick)=\"onColumnSettings(deviceName)\"\n        (editModeClick)=\"onEditMode()\"\n    >\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"'collapse-all'\"\n            (click)=\"onCollapseAll()\"\n        ></button>\n        @if (!showOkCancelButtons && enableNodeReordering) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"'move'\"\n            (click)=\"onOpenMoveToDialog(selectedNode, deviceName, moveDialog)\"\n        ></button>\n        }\n    </bsu-ulv-toolbar>\n    <bsu-ui-tree-view\n        [leafCursorPointer]=\"onlyExecuteLeafNode && openOnClick\"\n        [rtl]=\"rtl\"\n        [relationList]=\"relationList\"\n        [root]=\"root\"\n        [allColumns]=\"allColumns\"\n        [hideIcon]=\"hideIcon\"\n        [selectedMo]=\"selectedMo\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [iconField]=\"iconField\"\n        [colorField]=\"colorField\"\n        [navigationArrow]=\"navigationArrow\"\n        [collapseIcon]=\"collapseIcon\"\n        [selectedNode]=\"selectedNode\"\n        [access]=\"access\"\n        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [enableNodeReordering]=\"enableNodeReordering\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [openOnClick]=\"openOnClick\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [moDataList]=\"moDataList\"\n        [groupby]=\"groupby\"\n        [isHetro]=\"isHetro\"\n        [isCheckList]=\"isCheckList\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [showOkCancelButtons]=\"showOkCancelButtons\"\n        (checkChange)=\"onCheckChange($event)\"\n        (itemDrop)=\"onDrop($event)\"\n        (itemDragMoved)=\"onDragMoved($event)\"\n        (nodeUlvCommand)=\"onNodeUlvCommand($event)\"\n        (nodeViewClick)=\"onNodeViewClick($event)\"\n        (loadChildren)=\"onLoadChildren($event)\"\n        (nodeSelect)=\"onNodeSelect($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (createNew)=\"onCreateNew($event)\"\n    >\n    </bsu-ui-tree-view>\n    <ng-template let-dialog let-dialogConfig=\"dialogConfig\" #moveDialog>\n        <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n            <fd-dialog-header>\n                <h1 fd-title>{{ 'Move' | bbbTranslate }}</h1>\n                <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\n            </fd-dialog-header>\n\n            <fd-dialog-body>\n                <div class=\"move-to\" (keydown.enter)=\"onConfirmDialog(dialogSelectedNode)\">\n                    <bsu-ui-tree-view\n                        [rtl]=\"rtl\"\n                        [root]=\"root\"\n                        [access]=\"access\"\n                        [navigationArrow]=\"navigationArrow\"\n                        [collapseIcon]=\"collapseIcon\"\n                        [deviceName]=\"deviceName\"\n                        [deviceSize]=\"deviceSize\"\n                        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\n                        [enableNodeReordering]=\"enableNodeReordering\"\n                        [openOnClick]=\"openOnClick\"\n                        [selectedNode]=\"dialogSelectedNode\"\n                        [moDataList]=\"flatMoDataList\"\n                        [groupby]=\"groupby\"\n                        [isCheckList]=\"isCheckList\"\n                        [conditionalFormats]=\"conditionalFormats\"\n                        (loadChildren)=\"onLoadChildren($event)\"\n                        (nodeSelect)=\"onSelectNodeInMoveDialog($event)\"\n                    ></bsu-ui-tree-view>\n                </div>\n            </fd-dialog-body>\n\n            <fd-dialog-footer>\n                <ng-template fdkTemplate=\"footer\">\n                    <div fd-bar-right>\n                        <fd-button-bar\n                            fdType=\"emphasized\"\n                            [label]=\"'OK' | bbbTranslate\"\n                            (click)=\"onConfirmDialog(dialogSelectedNode)\"\n                        >\n                        </fd-button-bar>\n                        <fd-button-bar fd-initial-focus [label]=\"'Cancel' | bbbTranslate\" (click)=\"onDismissDialog()\">\n                        </fd-button-bar>\n                    </div>\n                </ng-template>\n            </fd-dialog-footer>\n        </fd-dialog>\n    </ng-template>\n</ng-template>\n", styles: [":host{width:100%;box-sizing:border-box;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { 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: "component", type: i4$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "directive", type: i5$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: ["allowGridColumnSort", "useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "hasSelected", "config", "hidden", "buttons", "moDataListCount"], outputs: ["search", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo"] }, { kind: "component", type: UiTreeViewComponent, selector: "bsu-ui-tree-view", inputs: ["root", "selectedNode", "isHetro", "leafCursorPointer", "relationList", "showOkCancelButtons", "enableNodeReordering", "collapseIcon", "iconField", "colorField", "viewSettingsContentDensity"], outputs: ["checkChange", "nodeSelect", "createNew", "loadChildren", "nodeViewClick", "nodeUlvCommand", "itemDrop", "itemDragMoved"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }, { kind: "pipe", type: i2.ContextMenuPipe, name: "contextMenu" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: UiTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-tree', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngTemplateOutlet=\"\n        renderTree;\n        context: {\n            $implicit: root$ | async,\n            moDataList: flatMoDataList,\n            isCheckList: context.Setting.View?.IsCheckList,\n            columns: visibleColumns$ | async,\n            groupby: groupby$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: context.Setting.View?.ConditionalFormats,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            title: title$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            hideToolbar: hideToolbar$ | async,\n            gridSetting: gridSetting$ | async,\n            contentDensity: contentDensity$ | async,\n            hasSelected: hasSelected$ | async,\n            showOkCancelButtons: showOkCancelButtons,\n            hideOpenIcon: viewSetting?.HideOpenIcon,\n            openOnClick: viewSetting?.OpenOnClick,\n            onlyExecuteLeafNode: viewSetting?.OnlyExecuteLeafNode,\n            enableNodeReordering: viewSetting?.EnableNodeReordering,\n            iconField: viewSetting?.IconField,\n            hideIcon: viewSetting?.HideIcon,\n            colorField: viewSetting?.ColorField,\n            selectedNode: selectedNode$ | async,\n            navigationArrow: navigationArrow$ | async,\n            collapseIcon: collapseIcon$ | async,\n            relationList: context.Setting.View.RelationList,\n            allColumns: allColumns,\n            rtl: rtl$ | async,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\n            isHetro: context.Setting.ClassNames.DataClass === 'Ul.HetroTreeUlvDataCtrlr',\n            selectedMo: selectedMo$ | async\n        }\n    \"\n></ng-container>\n\n<ng-template\n    #renderTree\n    let-root\n    let-moDataList=\"moDataList\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-title=\"title\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-allowInlineEdit=\"allowInlineEdit\"\n    let-hideToolbar=\"hideToolbar\"\n    let-gridSetting=\"gridSetting\"\n    let-contentDensity=\"contentDensity\"\n    let-access=\"access\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-hasSelected=\"hasSelected\"\n    let-showOkCancelButtons=\"showOkCancelButtons\"\n    let-selectedNode=\"selectedNode\"\n    let-navigationArrow=\"navigationArrow\"\n    let-collapseIcon=\"collapseIcon\"\n    let-rtl=\"rtl\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-relationList=\"relationList\"\n    let-isHetro=\"isHetro\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-selectedMo=\"selectedMo\"\n    let-hideOpenIcon=\"hideOpenIcon\"\n    let-openOnClick=\"openOnClick\"\n    let-enableNodeReordering=\"enableNodeReordering\"\n    let-onlyExecuteLeafNode=\"onlyExecuteLeafNode\"\n    let-iconField=\"iconField\"\n    let-colorField=\"colorField\"\n    let-allColumns=\"allColumns\"\n    let-hideIcon=\"hideIcon\"\n>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [hasSelected]=\"hasSelected\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [contentDensity]=\"contentDensity\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [moDataListCount]=\"moDataList.length\"\n        (sortClick)=\"onSortSettings(deviceName)\"\n        (groupbyClick)=\"onGroupbySettings(deviceName)\"\n        (columnClick)=\"onColumnSettings(deviceName)\"\n        (editModeClick)=\"onEditMode()\"\n    >\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"'collapse-all'\"\n            (click)=\"onCollapseAll()\"\n        ></button>\n        @if (!showOkCancelButtons && enableNodeReordering) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"'move'\"\n            (click)=\"onOpenMoveToDialog(selectedNode, deviceName, moveDialog)\"\n        ></button>\n        }\n    </bsu-ulv-toolbar>\n    <bsu-ui-tree-view\n        [leafCursorPointer]=\"onlyExecuteLeafNode && openOnClick\"\n        [rtl]=\"rtl\"\n        [relationList]=\"relationList\"\n        [root]=\"root\"\n        [allColumns]=\"allColumns\"\n        [hideIcon]=\"hideIcon\"\n        [selectedMo]=\"selectedMo\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [iconField]=\"iconField\"\n        [colorField]=\"colorField\"\n        [navigationArrow]=\"navigationArrow\"\n        [collapseIcon]=\"collapseIcon\"\n        [selectedNode]=\"selectedNode\"\n        [access]=\"access\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [enableNodeReordering]=\"enableNodeReordering\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [openOnClick]=\"openOnClick\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [moDataList]=\"moDataList\"\n        [groupby]=\"groupby\"\n        [isHetro]=\"isHetro\"\n        [isCheckList]=\"isCheckList\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [showOkCancelButtons]=\"showOkCancelButtons\"\n        (checkChange)=\"onCheckChange($event)\"\n        (itemDrop)=\"onDrop($event)\"\n        (itemDragMoved)=\"onDragMoved($event)\"\n        (nodeUlvCommand)=\"onNodeUlvCommand($event)\"\n        (nodeViewClick)=\"onNodeViewClick($event)\"\n        (loadChildren)=\"onLoadChildren($event)\"\n        (nodeSelect)=\"onNodeSelect($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (createNew)=\"onCreateNew($event)\"\n    >\n    </bsu-ui-tree-view>\n    <ng-template let-dialog let-dialogConfig=\"dialogConfig\" #moveDialog>\n        <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n            <fd-dialog-header>\n                <h1 fd-title>{{ 'Move' | bbbTranslate }}</h1>\n                <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\n            </fd-dialog-header>\n\n            <fd-dialog-body>\n                <div class=\"move-to\" (keydown.enter)=\"onConfirmDialog(dialogSelectedNode)\">\n                    <bsu-ui-tree-view\n                        [rtl]=\"rtl\"\n                        [root]=\"root\"\n                        [access]=\"access\"\n                        [navigationArrow]=\"navigationArrow\"\n                        [collapseIcon]=\"collapseIcon\"\n                        [deviceName]=\"deviceName\"\n                        [deviceSize]=\"deviceSize\"\n                        [enableNodeReordering]=\"enableNodeReordering\"\n                        [openOnClick]=\"openOnClick\"\n                        [selectedNode]=\"dialogSelectedNode\"\n                        [moDataList]=\"flatMoDataList\"\n                        [groupby]=\"groupby\"\n                        [isCheckList]=\"isCheckList\"\n                        [conditionalFormats]=\"conditionalFormats\"\n                        (loadChildren)=\"onLoadChildren($event)\"\n                        (nodeSelect)=\"onSelectNodeInMoveDialog($event)\"\n                    ></bsu-ui-tree-view>\n                </div>\n            </fd-dialog-body>\n\n            <fd-dialog-footer>\n                <ng-template fdkTemplate=\"footer\">\n                    <div fd-bar-right>\n                        <fd-button-bar\n                            fdType=\"emphasized\"\n                            [label]=\"'OK' | bbbTranslate\"\n                            (click)=\"onConfirmDialog(dialogSelectedNode)\"\n                        >\n                        </fd-button-bar>\n                        <fd-button-bar fd-initial-focus [label]=\"'Cancel' | bbbTranslate\" (click)=\"onDismissDialog()\">\n                        </fd-button-bar>\n                    </div>\n                </ng-template>\n            </fd-dialog-footer>\n        </fd-dialog>\n    </ng-template>\n</ng-template>\n", styles: [":host{width:100%;box-sizing:border-box;display:inline-block}\n"] }]
+            args: [{ selector: 'bsu-ui-tree', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngTemplateOutlet=\"\n        renderTree;\n        context: {\n            $implicit: root$ | async,\n            moDataList: flatMoDataList,\n            isCheckList: context.Setting.View?.IsCheckList,\n            columns: visibleColumns$ | async,\n            groupby: groupby$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: context.Setting.View?.ConditionalFormats,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            title: title$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            hideToolbar: hideToolbar$ | async,\n            gridSetting: gridSetting$ | async,\n            contentDensity: contentDensity$ | async,\n            hasSelected: hasSelected$ | async,\n            showOkCancelButtons: showOkCancelButtons,\n            hideOpenIcon: viewSetting?.HideOpenIcon,\n            openOnClick: viewSetting?.OpenOnClick,\n            onlyExecuteLeafNode: viewSetting?.OnlyExecuteLeafNode,\n            enableNodeReordering: viewSetting?.EnableNodeReordering,\n            viewSettingsContentDensity: viewSetting?.ContentDensity$Caption,\n            iconField: viewSetting?.IconField,\n            hideIcon: viewSetting?.HideIcon,\n            colorField: viewSetting?.ColorField,\n            selectedNode: selectedNode$ | async,\n            navigationArrow: navigationArrow$ | async,\n            collapseIcon: collapseIcon$ | async,\n            relationList: context.Setting.View.RelationList,\n            allColumns: allColumns,\n            rtl: rtl$ | async,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\n            isHetro: context.Setting.ClassNames.DataClass === 'Ul.HetroTreeUlvDataCtrlr',\n            selectedMo: selectedMo$ | async\n        }\n    \"\n></ng-container>\n\n<ng-template\n    #renderTree\n    let-root\n    let-moDataList=\"moDataList\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-title=\"title\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-allowInlineEdit=\"allowInlineEdit\"\n    let-hideToolbar=\"hideToolbar\"\n    let-gridSetting=\"gridSetting\"\n    let-contentDensity=\"contentDensity\"\n    let-access=\"access\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-hasSelected=\"hasSelected\"\n    let-showOkCancelButtons=\"showOkCancelButtons\"\n    let-selectedNode=\"selectedNode\"\n    let-navigationArrow=\"navigationArrow\"\n    let-collapseIcon=\"collapseIcon\"\n    let-rtl=\"rtl\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-relationList=\"relationList\"\n    let-isHetro=\"isHetro\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-selectedMo=\"selectedMo\"\n    let-hideOpenIcon=\"hideOpenIcon\"\n    let-openOnClick=\"openOnClick\"\n    let-enableNodeReordering=\"enableNodeReordering\"\n    let-onlyExecuteLeafNode=\"onlyExecuteLeafNode\"\n    let-iconField=\"iconField\"\n    let-colorField=\"colorField\"\n    let-allColumns=\"allColumns\"\n    let-hideIcon=\"hideIcon\"\n    let-viewSettingsContentDensity=\"viewSettingsContentDensity\"\n>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [hasSelected]=\"hasSelected\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [contentDensity]=\"contentDensity\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [moDataListCount]=\"moDataList.length\"\n        (sortClick)=\"onSortSettings(deviceName)\"\n        (groupbyClick)=\"onGroupbySettings(deviceName)\"\n        (columnClick)=\"onColumnSettings(deviceName)\"\n        (editModeClick)=\"onEditMode()\"\n    >\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"'collapse-all'\"\n            (click)=\"onCollapseAll()\"\n        ></button>\n        @if (!showOkCancelButtons && enableNodeReordering) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"'move'\"\n            (click)=\"onOpenMoveToDialog(selectedNode, deviceName, moveDialog)\"\n        ></button>\n        }\n    </bsu-ulv-toolbar>\n    <bsu-ui-tree-view\n        [leafCursorPointer]=\"onlyExecuteLeafNode && openOnClick\"\n        [rtl]=\"rtl\"\n        [relationList]=\"relationList\"\n        [root]=\"root\"\n        [allColumns]=\"allColumns\"\n        [hideIcon]=\"hideIcon\"\n        [selectedMo]=\"selectedMo\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [iconField]=\"iconField\"\n        [colorField]=\"colorField\"\n        [navigationArrow]=\"navigationArrow\"\n        [collapseIcon]=\"collapseIcon\"\n        [selectedNode]=\"selectedNode\"\n        [access]=\"access\"\n        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [enableNodeReordering]=\"enableNodeReordering\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [openOnClick]=\"openOnClick\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [moDataList]=\"moDataList\"\n        [groupby]=\"groupby\"\n        [isHetro]=\"isHetro\"\n        [isCheckList]=\"isCheckList\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [showOkCancelButtons]=\"showOkCancelButtons\"\n        (checkChange)=\"onCheckChange($event)\"\n        (itemDrop)=\"onDrop($event)\"\n        (itemDragMoved)=\"onDragMoved($event)\"\n        (nodeUlvCommand)=\"onNodeUlvCommand($event)\"\n        (nodeViewClick)=\"onNodeViewClick($event)\"\n        (loadChildren)=\"onLoadChildren($event)\"\n        (nodeSelect)=\"onNodeSelect($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (createNew)=\"onCreateNew($event)\"\n    >\n    </bsu-ui-tree-view>\n    <ng-template let-dialog let-dialogConfig=\"dialogConfig\" #moveDialog>\n        <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n            <fd-dialog-header>\n                <h1 fd-title>{{ 'Move' | bbbTranslate }}</h1>\n                <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\n            </fd-dialog-header>\n\n            <fd-dialog-body>\n                <div class=\"move-to\" (keydown.enter)=\"onConfirmDialog(dialogSelectedNode)\">\n                    <bsu-ui-tree-view\n                        [rtl]=\"rtl\"\n                        [root]=\"root\"\n                        [access]=\"access\"\n                        [navigationArrow]=\"navigationArrow\"\n                        [collapseIcon]=\"collapseIcon\"\n                        [deviceName]=\"deviceName\"\n                        [deviceSize]=\"deviceSize\"\n                        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\n                        [enableNodeReordering]=\"enableNodeReordering\"\n                        [openOnClick]=\"openOnClick\"\n                        [selectedNode]=\"dialogSelectedNode\"\n                        [moDataList]=\"flatMoDataList\"\n                        [groupby]=\"groupby\"\n                        [isCheckList]=\"isCheckList\"\n                        [conditionalFormats]=\"conditionalFormats\"\n                        (loadChildren)=\"onLoadChildren($event)\"\n                        (nodeSelect)=\"onSelectNodeInMoveDialog($event)\"\n                    ></bsu-ui-tree-view>\n                </div>\n            </fd-dialog-body>\n\n            <fd-dialog-footer>\n                <ng-template fdkTemplate=\"footer\">\n                    <div fd-bar-right>\n                        <fd-button-bar\n                            fdType=\"emphasized\"\n                            [label]=\"'OK' | bbbTranslate\"\n                            (click)=\"onConfirmDialog(dialogSelectedNode)\"\n                        >\n                        </fd-button-bar>\n                        <fd-button-bar fd-initial-focus [label]=\"'Cancel' | bbbTranslate\" (click)=\"onDismissDialog()\">\n                        </fd-button-bar>\n                    </div>\n                </ng-template>\n            </fd-dialog-footer>\n        </fd-dialog>\n    </ng-template>\n</ng-template>\n", styles: [":host{width:100%;box-sizing:border-box;display:inline-block}\n"] }]
         }], propDecorators: { showOkCancelButtons: [{
                 type: Input
             }] } });
@@ -4380,7 +4396,7 @@ class ColumnRendererComponent extends BaseComponent {
         this._cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ColumnRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", mo: "mo", index: "index", editMode: "editMode", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", disableEllapsis: "disableEllapsis", rtl: "rtl", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, ngImport: i0, template: "@if (column) {\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n}\n<ng-template #renderCellTemplate>\n    @switch (column.FieldTypeId) { @case ('42') {\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n    } @case ('33') {\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n    } @case ('31') {\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n    } @case ('11') {\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\n    } @case ('5') {\n    <ng-container\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n    ></ng-container>\n    } @default {\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n    } }\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\" [style.width]=\"\">\n        @if (icon) {\n        <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\n        }\n        <!-- <fd-text\n    #fdText\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n    [maxLines]=\"1\"\n    [text]=\"value\"\n    [fd-inline-help]=\"value\"\n    [disabled]=\"!fdText._hasMore\"\n  ></fd-text> -->\n\n        <!-- <bsu-barsa-text-ellipsis\n  [style.width]=\"column.$Width\"\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n  [text]=\"value\"\n></bsu-barsa-text-ellipsis> -->\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\n{{ value }}\n</div> -->\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') {\n        <div\n            [ellapsisText]=\"value\"\n            [class.ellapsis]=\"!disableEllapsis\"\n            (ellapsised)=\"onElapsised($event)\"\n            (click)=\"showMore && helpPopover.open()\"\n        >\n            {{ value }}\n        </div>\n        }\n        <fd-popover #helpPopover>\n            <fd-popover-control> </fd-popover-control>\n            <fd-popover-body class=\"help-popover-body\">\n                <div fd-popover-body-header>\n                    <div fd-bar>\n                        <div fd-bar-left>\n                            <fd-bar-element style=\"white-space: break-spaces\"\n                                >{{ column.Alias | bbbTranslate }}:</fd-bar-element\n                            >\n                        </div>\n                        <div fd-bar-right>\n                            <fd-bar-element\n                                ><button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    glyph=\"decline\"\n                                    (click)=\"helpPopover.close()\"\n                                ></button>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"help-content\">{{ value }}</div>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    @if (controlUi) {\n    <bsu-layout-control\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n    }\n</ng-template>\n<ng-template #renderCellListTasavir>\n    @if (mo[column.Name] && mo[column.Name].Images) {\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\n        @for (pic of mo[column.Name].Images; track pic) {\n        <img\n            fullscreen\n            fullscreenFiles\n            [files]=\"mo[column.Name].Images\"\n            [isImageGallery]=\"true\"\n            [deviceSize]=\"deviceSize\"\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\n            style=\"width: 3rem; height: 3rem\"\n        />\n        }\n    </div>\n    }\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    @if (mo[column.Name]) {\n    <div class=\"file-viewer-attachments\">\n        @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\n        <bsu-file-viewer-popover\n            [style.width.px]=\"containerDom ? containerDom.offsetWidth : null\"\n            [file]=\"file\"\n            [files]=\"mo[column.Name].Files\"\n            [deviceSize]=\"deviceSize\"\n            [canDownload]=\"true\"\n            [disableRemove]=\"true\"\n            [fdType]=\"'transparent'\"\n        ></bsu-file-viewer-popover>\n        }\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\n        }\n    </div>\n    }\n</ng-template>\n<ng-template #renderCellFileInfo>\n    @if (mo[column.Name]) {\n    <fd-avatar\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n    }\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    @if (column.Extra?.TrueImage === '') {\n    {{ value }}\n    } @if (column.Extra?.TrueImage !== '') {\n    <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\n    }\n</ng-template>\n<ng-template #renderCellImage>\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\n    <fd-avatar\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n    }\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize"], outputs: ["ellapsised"] }, { 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: i4.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { 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: 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: i6$4.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i6$4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: i6$4.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i6$4.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"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", mo: "mo", index: "index", editMode: "editMode", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", disableEllapsis: "disableEllapsis", rtl: "rtl", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, ngImport: i0, template: "@if (column) {\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n}\n<ng-template #renderCellTemplate>\n    @switch (column.FieldTypeId) { @case ('42') {\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n    } @case ('33') {\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n    } @case ('31') {\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n    } @case ('11') {\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\n    } @case ('5') {\n    <ng-container\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n    ></ng-container>\n    } @default {\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n    } }\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\" [style.width]=\"\">\n        @if (icon) {\n        <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\n        }\n        <!-- <fd-text\n    #fdText\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n    [maxLines]=\"1\"\n    [text]=\"value\"\n    [fd-inline-help]=\"value\"\n    [disabled]=\"!fdText._hasMore\"\n  ></fd-text> -->\n\n        <!-- <bsu-barsa-text-ellipsis\n  [style.width]=\"column.$Width\"\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n  [text]=\"value\"\n></bsu-barsa-text-ellipsis> -->\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\n{{ value }}\n</div> -->\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') {\n        <div\n            [ellapsisText]=\"value\"\n            [class.ellapsis]=\"!disableEllapsis\"\n            (ellapsised)=\"onElapsised($event)\"\n            (click)=\"showMore && helpPopover.open()\"\n        >\n            {{ value }}\n        </div>\n        }\n        <fd-popover #helpPopover>\n            <fd-popover-control> </fd-popover-control>\n            <fd-popover-body class=\"help-popover-body\">\n                <div fd-popover-body-header>\n                    <div fd-bar>\n                        <div fd-bar-left>\n                            <fd-bar-element style=\"white-space: break-spaces\"\n                                >{{ column.Alias | bbbTranslate }}:</fd-bar-element\n                            >\n                        </div>\n                        <div fd-bar-right>\n                            <fd-bar-element\n                                ><button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    glyph=\"decline\"\n                                    (click)=\"helpPopover.close()\"\n                                ></button>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"help-content\">{{ value }}</div>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    @if (controlUi) {\n    <bsu-layout-control\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n    }\n</ng-template>\n<ng-template #renderCellListTasavir>\n    @if (mo[column.Name] && mo[column.Name].Images) {\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\n        @for (pic of mo[column.Name].Images; track pic) {\n        <img\n            fullscreen\n            fullscreenFiles\n            [files]=\"mo[column.Name].Images\"\n            [isImageGallery]=\"true\"\n            [deviceSize]=\"deviceSize\"\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\n            style=\"width: 3rem; height: 3rem\"\n        />\n        }\n    </div>\n    }\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    @if (mo[column.Name]) {\n    <div class=\"file-viewer-attachments\">\n        @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\n        <bsu-file-viewer-popover\n            [style.width.px]=\"containerDom ? containerDom.offsetWidth : null\"\n            [file]=\"file\"\n            [files]=\"mo[column.Name].Files\"\n            [deviceSize]=\"deviceSize\"\n            [canDownload]=\"true\"\n            [disableRemove]=\"true\"\n            [fdType]=\"'transparent'\"\n        ></bsu-file-viewer-popover>\n        }\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\n        }\n    </div>\n    }\n</ng-template>\n<ng-template #renderCellFileInfo>\n    @if (mo[column.Name]) {\n    <fd-avatar\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n    }\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    @if (column.Extra?.TrueImage === '') {\n    {{ value }}\n    } @if (column.Extra?.TrueImage !== '') {\n    <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\n    }\n</ng-template>\n<ng-template #renderCellImage>\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\n    <fd-avatar\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n    }\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize"], outputs: ["ellapsised"] }, { 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: i4.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { 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: 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: i6$4.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i6$4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: i6$4.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i6$4.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: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ColumnRendererComponent, decorators: [{
             type: Component,
@@ -5306,7 +5322,7 @@ class BarsaTableColumnComponent extends BaseColumnPropsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaTableColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: { disableEllapsis: "disableEllapsis" }, providers: [FormPanelService, ColumnService], usesInheritance: true, ngImport: i0, template: "<div\n    [class.editMode]=\"editMode\"\n    #divDom\n    style=\"display: flex; width: 100%\"\n    [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n    @if (customComponent) {\n    <bnrc-dynamic-item-component\n        [component]=\"customComponent\"\n        [mo]=\"mo\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"detailsComponentSetting\"\n        [parameters]=\"customComponent.Settings\"\n        [column]=\"column\"\n        [value]=\"value\"\n        [icon]=\"icon\"\n        [editMode]=\"editMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [containerDom]=\"divDom\"\n    ></bnrc-dynamic-item-component>\n    } @else {\n    <bsu-column-renderer\n        [mo]=\"mo\"\n        [containerDom]=\"divDom\"\n        [column]=\"column\"\n        [disableEllapsis]=\"disableEllapsis\"\n        [value]=\"value | bbbTranslate\"\n        [icon]=\"icon\"\n        [editMode]=\"editMode\"\n        [isChecked]=\"isChecked\"\n        [index]=\"index\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [formLayoutShowLabel]=\"false\"\n        [deviceSize]=\"deviceSize\"\n        [controlUi]=\"column.Caption | controlUi: layout94\"\n        (keyup.control.enter)=\"save.emit($event)\"\n        (keyup.esc)=\"cancel.emit($event)\"\n        (keydown.Tab)=\"tab.emit($event)\"\n    ></bsu-column-renderer>\n    } @if (editMode) { @for (fieldCaption of column.$MergedFieldsToColumn; track fieldCaption) { @if (fieldCaption |\n    controlUi: layout94; as layoutConfig) {\n    <bsu-layout-control\n        [caption]=\"fieldCaption\"\n        [config]=\"layoutConfig\"\n        [showLabel]=\"false\"\n        [inlineEdit]=\"true\"\n        (keyup.control.enter)=\"save.emit($event)\"\n        (keyup.esc)=\"cancel.emit($event)\"\n        (keydown.Tab)=\"tab.emit($event)\"\n    ></bsu-layout-control>\n    } } }\n</div>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"], dependencies: [{ kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "disableEllapsis", "rtl", "deviceName", "deviceSize", "value", "icon"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: { disableEllapsis: "disableEllapsis" }, providers: [FormPanelService, ColumnService], usesInheritance: true, ngImport: i0, template: "<div\n    [class.editMode]=\"editMode\"\n    #divDom\n    style=\"display: flex; width: 100%\"\n    [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n    @if (customComponent) {\n    <bnrc-dynamic-item-component\n        [component]=\"customComponent\"\n        [mo]=\"mo\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"detailsComponentSetting\"\n        [parameters]=\"customComponent.Settings\"\n        [column]=\"column\"\n        [value]=\"value\"\n        [icon]=\"icon\"\n        [editMode]=\"editMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [containerDom]=\"divDom\"\n    ></bnrc-dynamic-item-component>\n    } @else {\n    <bsu-column-renderer\n        [mo]=\"mo\"\n        [containerDom]=\"divDom\"\n        [column]=\"column\"\n        [disableEllapsis]=\"disableEllapsis\"\n        [value]=\"value | bbbTranslate\"\n        [icon]=\"icon\"\n        [editMode]=\"editMode\"\n        [isChecked]=\"isChecked\"\n        [index]=\"index\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [formLayoutShowLabel]=\"false\"\n        [deviceSize]=\"deviceSize\"\n        [controlUi]=\"column.Caption | controlUi: layout94\"\n        (keyup.control.enter)=\"save.emit($event)\"\n        (keyup.esc)=\"cancel.emit($event)\"\n        (keydown.Tab)=\"tab.emit($event)\"\n    ></bsu-column-renderer>\n    } @if (editMode) { @for (fieldCaption of column.$MergedFieldsToColumn; track fieldCaption) { @if (fieldCaption |\n    controlUi: layout94; as layoutConfig) {\n    <bsu-layout-control\n        [caption]=\"fieldCaption\"\n        [config]=\"layoutConfig\"\n        [showLabel]=\"false\"\n        [inlineEdit]=\"true\"\n        (keyup.control.enter)=\"save.emit($event)\"\n        (keyup.esc)=\"cancel.emit($event)\"\n        (keydown.Tab)=\"tab.emit($event)\"\n    ></bsu-layout-control>\n    } } }\n</div>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"], dependencies: [{ kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "disableEllapsis", "rtl", "deviceName", "deviceSize", "value", "icon"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaTableColumnComponent, decorators: [{
             type: Component,
@@ -9153,6 +9169,7 @@ class LyVerticalLayoutComponent extends LayoutItemBaseComponent {
         this.layoutService = layoutService;
         this._cdr = _cdr;
         this.flexDirection = 'column';
+        this.events = new EventEmitter();
         // if (this.isSearchPanel && !this.searchPanelIsObject) { // commented because it show search panel dirty
         //     this.flexDirection = 'row';
         //     this.flexWrap = 'wrap';
@@ -9168,11 +9185,11 @@ class LyVerticalLayoutComponent extends LayoutItemBaseComponent {
         this.layoutService.removeHorizontal(this.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LyVerticalLayoutComponent, deps: [{ token: i2.FormPanelService }, { token: i2.LayoutService, skipSelf: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LyVerticalLayoutComponent, selector: "bsu-ly-vertical-layout", inputs: { maxLabelWidth: "maxLabelWidth" }, host: { properties: { "style.flex": "this.flex", "style.flex-direction": "this.flexDirection", "style.flex-wrap": "this.flexWrap" } }, viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\n    \"\n></ng-container>\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n} @case ('Ly.LayoutPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n} @case ('Ly.LayoutContainer') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            name: 'LyLayoutContainerComponent',\n            selector: 'bsu-ly-layout-container'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n} @case ('Ly.EmptySpace') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n    \"\n></ng-container>\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n} @case ('Ly.SimpleLabel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\n    \"\n></ng-container>\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n} @case ('Ly.LayoutLine') {\n<ng-container\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\n></ng-container>\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-horizontal-layout',\n            name: 'LyLayoutHorizontalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n} @else {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-vertical-layout',\n            name: 'LyLayoutVerticalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n} } @case ('Ly.LayoutControl') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-layout-control',\n            name: 'LayoutControlComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n} } }\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\n    <bnrc-dynamic-layout\n        [config]=\"config\"\n        [selector]=\"selector\"\n        [name]=\"name\"\n        [module]=\"'BarsaSapUi'\"\n        [moduleFileName]=\"'BarsaSapUi'\"\n        [maxLabelWidth]=\"maxLabelWidth\"\n    >\n    </bnrc-dynamic-layout>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LyVerticalLayoutComponent, selector: "bsu-ly-vertical-layout", outputs: { events: "events" }, host: { properties: { "style.flex": "this.flex", "style.flex-direction": "this.flexDirection", "style.flex-wrap": "this.flexWrap" } }, viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\n    \"\n></ng-container>\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n} @case ('Ly.LayoutPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n} @case ('Ly.LayoutContainer') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            name: 'LyLayoutContainerComponent',\n            selector: 'bsu-ly-layout-container'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n} @case ('Ly.EmptySpace') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n    \"\n></ng-container>\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n} @case ('Ly.SimpleLabel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\n    \"\n></ng-container>\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n} @case ('Ly.LayoutLine') {\n<ng-container\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\n></ng-container>\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-horizontal-layout',\n            name: 'LyLayoutHorizontalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n} @else {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-vertical-layout',\n            name: 'LyLayoutVerticalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n} } @case ('Ly.LayoutControl') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-layout-control',\n            name: 'LayoutControlComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n} } }\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\n    <bnrc-dynamic-layout\n        [config]=\"config\"\n        [selector]=\"selector\"\n        [name]=\"name\"\n        [module]=\"'BarsaSapUi'\"\n        [moduleFileName]=\"'BarsaSapUi'\"\n        [maxLabelWidth]=\"maxLabelWidth\"\n        (events)=\"events.emit($event)\"\n    >\n    </bnrc-dynamic-layout>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LyVerticalLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-vertical-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\n    \"\n></ng-container>\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n} @case ('Ly.LayoutPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n} @case ('Ly.LayoutContainer') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            name: 'LyLayoutContainerComponent',\n            selector: 'bsu-ly-layout-container'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n} @case ('Ly.EmptySpace') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n    \"\n></ng-container>\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n} @case ('Ly.SimpleLabel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\n    \"\n></ng-container>\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n} @case ('Ly.LayoutLine') {\n<ng-container\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\n></ng-container>\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-horizontal-layout',\n            name: 'LyLayoutHorizontalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n} @else {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-vertical-layout',\n            name: 'LyLayoutVerticalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n} } @case ('Ly.LayoutControl') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-layout-control',\n            name: 'LayoutControlComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n} } }\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\n    <bnrc-dynamic-layout\n        [config]=\"config\"\n        [selector]=\"selector\"\n        [name]=\"name\"\n        [module]=\"'BarsaSapUi'\"\n        [moduleFileName]=\"'BarsaSapUi'\"\n        [maxLabelWidth]=\"maxLabelWidth\"\n    >\n    </bnrc-dynamic-layout>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'bsu-ly-vertical-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\n    \"\n></ng-container>\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n} @case ('Ly.LayoutPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n} @case ('Ly.LayoutContainer') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            name: 'LyLayoutContainerComponent',\n            selector: 'bsu-ly-layout-container'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n} @case ('Ly.EmptySpace') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n    \"\n></ng-container>\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n} @case ('Ly.SimpleLabel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\n    \"\n></ng-container>\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n} @case ('Ly.LayoutLine') {\n<ng-container\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\n></ng-container>\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-horizontal-layout',\n            name: 'LyLayoutHorizontalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n} @else {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-vertical-layout',\n            name: 'LyLayoutVerticalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n} } @case ('Ly.LayoutControl') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-layout-control',\n            name: 'LayoutControlComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n} } }\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\n    <bnrc-dynamic-layout\n        [config]=\"config\"\n        [selector]=\"selector\"\n        [name]=\"name\"\n        [module]=\"'BarsaSapUi'\"\n        [moduleFileName]=\"'BarsaSapUi'\"\n        [maxLabelWidth]=\"maxLabelWidth\"\n        (events)=\"events.emit($event)\"\n    >\n    </bnrc-dynamic-layout>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: () => [{ type: i2.FormPanelService }, { type: i2.LayoutService, decorators: [{
                     type: SkipSelf
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { flex: [{
@@ -9184,8 +9201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }], flexWrap: [{
                 type: HostBinding,
                 args: ['style.flex-wrap']
-            }], maxLabelWidth: [{
-                type: Input
+            }], events: [{
+                type: Output
             }], viewRef: [{
                 type: ViewChild,
                 args: ['viewRefTemplate', { read: ViewContainerRef, static: true }]
@@ -9198,6 +9215,7 @@ class LyHorizontalLayoutComponent extends LayoutItemBaseComponent {
         this.formPanelService = formPanelService;
         this.layoutService = layoutService;
         this._cdr = _cdr;
+        this.events = new EventEmitter();
         this.horizontalLayoutClass = true;
         this.wrapContent = false;
         this.flexDirection = 'row';
@@ -9226,17 +9244,17 @@ class LyHorizontalLayoutComponent extends LayoutItemBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LyHorizontalLayoutComponent, deps: [{ token: i0.ElementRef }, { token: i2.FormPanelService }, { token: i2.LayoutService, skipSelf: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LyHorizontalLayoutComponent, selector: "bsu-ly-horizontal-layout", inputs: { renderItems: "renderItems", maxLabelWidth: "maxLabelWidth" }, host: { properties: { "style.flex": "this.flex", "class.horizontal-layout": "this.horizontalLayoutClass", "class.wrap-content": "this.wrapContent", "style.flex-direction": "this.flexDirection", "style.opacity": "this.opacity" } }, viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\n    \"\n></ng-container>\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n} @case ('Ly.LayoutPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n} @case ('Ly.LayoutContainer') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            name: 'LyLayoutContainerComponent',\n            selector: 'bsu-ly-layout-container'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n} @case ('Ly.EmptySpace') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n    \"\n></ng-container>\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n} @case ('Ly.SimpleLabel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\n    \"\n></ng-container>\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n} @case ('Ly.LayoutLine') {\n<ng-container\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\n></ng-container>\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-horizontal-layout',\n            name: 'LyLayoutHorizontalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n} @else {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-vertical-layout',\n            name: 'LyLayoutVerticalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n} } @case ('Ly.LayoutControl') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-layout-control',\n            name: 'LayoutControlComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n} } }\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\n    <bnrc-dynamic-layout\n        [config]=\"config\"\n        [selector]=\"selector\"\n        [name]=\"name\"\n        [module]=\"'BarsaSapUi'\"\n        [moduleFileName]=\"'BarsaSapUi'\"\n        [maxLabelWidth]=\"maxLabelWidth\"\n        [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n        [hasHorizontalText]=\"hasHorizontalText\"\n        [isSearchPanel]=\"isSearchPanel\"\n    >\n    </bnrc-dynamic-layout>\n</ng-template>\n", styles: [":host{display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LyHorizontalLayoutComponent, selector: "bsu-ly-horizontal-layout", inputs: { renderItems: "renderItems" }, outputs: { events: "events" }, host: { properties: { "style.flex": "this.flex", "class.horizontal-layout": "this.horizontalLayoutClass", "class.wrap-content": "this.wrapContent", "style.flex-direction": "this.flexDirection", "style.opacity": "this.opacity" } }, viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\n    \"\n></ng-container>\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n} @case ('Ly.LayoutPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n} @case ('Ly.LayoutContainer') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            name: 'LyLayoutContainerComponent',\n            selector: 'bsu-ly-layout-container'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n} @case ('Ly.EmptySpace') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n    \"\n></ng-container>\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n} @case ('Ly.SimpleLabel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\n    \"\n></ng-container>\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n} @case ('Ly.LayoutLine') {\n<ng-container\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\n></ng-container>\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-horizontal-layout',\n            name: 'LyLayoutHorizontalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n} @else {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-vertical-layout',\n            name: 'LyLayoutVerticalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n} } @case ('Ly.LayoutControl') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-layout-control',\n            name: 'LayoutControlComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n} } }\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\n    <bnrc-dynamic-layout\n        [config]=\"config\"\n        [selector]=\"selector\"\n        [name]=\"name\"\n        [module]=\"'BarsaSapUi'\"\n        [moduleFileName]=\"'BarsaSapUi'\"\n        [maxLabelWidth]=\"maxLabelWidth\"\n        [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n        [hasHorizontalText]=\"hasHorizontalText\"\n        [isSearchPanel]=\"isSearchPanel\"\n        (events)=\"events.emit($event)\"\n    >\n    </bnrc-dynamic-layout>\n</ng-template>\n", styles: [":host{display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LyHorizontalLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-horizontal-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\n    \"\n></ng-container>\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n} @case ('Ly.LayoutPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n} @case ('Ly.LayoutContainer') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            name: 'LyLayoutContainerComponent',\n            selector: 'bsu-ly-layout-container'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n} @case ('Ly.EmptySpace') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n    \"\n></ng-container>\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n} @case ('Ly.SimpleLabel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\n    \"\n></ng-container>\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n} @case ('Ly.LayoutLine') {\n<ng-container\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\n></ng-container>\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-horizontal-layout',\n            name: 'LyLayoutHorizontalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n} @else {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-vertical-layout',\n            name: 'LyLayoutVerticalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n} } @case ('Ly.LayoutControl') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-layout-control',\n            name: 'LayoutControlComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n} } }\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\n    <bnrc-dynamic-layout\n        [config]=\"config\"\n        [selector]=\"selector\"\n        [name]=\"name\"\n        [module]=\"'BarsaSapUi'\"\n        [moduleFileName]=\"'BarsaSapUi'\"\n        [maxLabelWidth]=\"maxLabelWidth\"\n        [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n        [hasHorizontalText]=\"hasHorizontalText\"\n        [isSearchPanel]=\"isSearchPanel\"\n    >\n    </bnrc-dynamic-layout>\n</ng-template>\n", styles: [":host{display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}\n"] }]
+            args: [{ selector: 'bsu-ly-horizontal-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\n    \"\n></ng-container>\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n} @case ('Ly.LayoutPanel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n} @case ('Ly.LayoutContainer') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            name: 'LyLayoutContainerComponent',\n            selector: 'bsu-ly-layout-container'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n} @case ('Ly.EmptySpace') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n    \"\n></ng-container>\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n} @case ('Ly.SimpleLabel') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\n    \"\n></ng-container>\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n} @case ('Ly.LayoutLine') {\n<ng-container\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\n></ng-container>\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-horizontal-layout',\n            name: 'LyLayoutHorizontalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n} @else {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-ly-vertical-layout',\n            name: 'LyLayoutVerticalComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n} } @case ('Ly.LayoutControl') {\n<ng-container\n    *ngTemplateOutlet=\"\n        dynamicLayout;\n        context: {\n            $implicit: item,\n            selector: 'bsu-layout-control',\n            name: 'LayoutControlComponent'\n        }\n    \"\n></ng-container>\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n} } }\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\n    <bnrc-dynamic-layout\n        [config]=\"config\"\n        [selector]=\"selector\"\n        [name]=\"name\"\n        [module]=\"'BarsaSapUi'\"\n        [moduleFileName]=\"'BarsaSapUi'\"\n        [maxLabelWidth]=\"maxLabelWidth\"\n        [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n        [hasHorizontalText]=\"hasHorizontalText\"\n        [isSearchPanel]=\"isSearchPanel\"\n        (events)=\"events.emit($event)\"\n    >\n    </bnrc-dynamic-layout>\n</ng-template>\n", styles: [":host{display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.FormPanelService }, { type: i2.LayoutService, decorators: [{
                     type: SkipSelf
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { renderItems: [{
                 type: Input
-            }], maxLabelWidth: [{
-                type: Input
+            }], events: [{
+                type: Output
             }], flex: [{
                 type: HostBinding,
                 args: ['style.flex']
@@ -11826,6 +11844,11 @@ class LyLayoutPanelComponent extends LayoutPanelBaseComponent {
             this._setBRule();
         });
     }
+    onEvents(ev) {
+        if (ev.title === 'refreshLabel') {
+            this._calcWidth(this.config);
+        }
+    }
     setDisplay() {
         this.display = this.visible ? 'flex' : 'none';
         this._cdr.detectChanges();
@@ -11837,11 +11860,11 @@ class LyLayoutPanelComponent extends LayoutPanelBaseComponent {
         this.setDisplay();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LyLayoutPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LyLayoutPanelComponent, selector: "bsu-ly-layout-panel", inputs: { renderItems: "renderItems", isRoot: "isRoot", hideTitle: "hideTitle" }, host: { properties: { "attr.maxLabelWidth": "this.maxLabelWidth", "style.flex": "this.flex", "style.display": "this.display" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\n<fd-panel\n    [fixed]=\"!config.ExpandButtonVisible\"\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\n    [attr.maxWidth]=\"maxWidth\"\n    [expanded]=\"config.Expanded\"\n>\n    @if (!hideTitle) {\n    <h5 fd-panel-title>\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\n            @if (config.FontIcon) {\n            <i\n                style=\"font-size: 1.5rem\"\n                [style.color]=\"config.IconColor || null\"\n                [class]=\"'sap-icon--' + config.FontIcon\"\n            ></i>\n            }\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\n        </div>\n    </h5>\n    }\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\n        @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutPanelComponent',\n                    selector: 'bsu-ly-tab-container'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n        } @case ('Ly.LayoutPanel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutPanelComponent',\n                    selector: 'bsu-ly-layout-panel'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n        } @case ('Ly.LayoutContainer') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutContainerComponent',\n                    selector: 'bsu-ly-layout-container'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n        } @case ('Ly.EmptySpace') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n        } @case ('Ly.SimpleLabel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LySimpleLabelComponent',\n                    selector: 'bsu-ly-simple-label'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n        } @case ('Ly.LayoutLine') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n        } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-ly-horizontal-layout',\n                    name: 'LyLayoutHorizontalComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n        } @else {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-ly-vertical-layout',\n                    name: 'LyLayoutVerticalComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n        } } @case ('Ly.LayoutControl') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-layout-control',\n                    name: 'LayoutControlComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n        } } }\n        <ng-template\n            #dynamicLayout\n            let-config\n            let-selector=\"selector\"\n            let-maxLabelWidth=\"maxLabelWidth\"\n            let-name=\"name\"\n        >\n            <bnrc-dynamic-layout\n                [config]=\"config\"\n                [selector]=\"selector\"\n                [name]=\"name\"\n                [module]=\"'BarsaSapUi'\"\n                [moduleFileName]=\"'BarsaSapUi'\"\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n                [isSearchPanel]=\"isSearchPanel\"\n            >\n            </bnrc-dynamic-layout>\n        </ng-template>\n    </div>\n</fd-panel>\n}\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "component", type: i3$6.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$6.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$6.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LyLayoutPanelComponent, selector: "bsu-ly-layout-panel", inputs: { renderItems: "renderItems", isRoot: "isRoot", hideTitle: "hideTitle" }, host: { properties: { "attr.maxLabelWidth": "this.maxLabelWidth", "style.flex": "this.flex", "style.display": "this.display" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\n<fd-panel\n    [fixed]=\"!config.ExpandButtonVisible\"\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\n    [attr.maxWidth]=\"maxWidth\"\n    [expanded]=\"config.Expanded\"\n>\n    @if (!hideTitle) {\n    <h5 fd-panel-title>\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\n            @if (config.FontIcon) {\n            <i\n                style=\"font-size: 1.5rem\"\n                [style.color]=\"config.IconColor || null\"\n                [class]=\"'sap-icon--' + config.FontIcon\"\n            ></i>\n            }\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\n        </div>\n    </h5>\n    }\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\n        @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutPanelComponent',\n                    selector: 'bsu-ly-tab-container'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n        } @case ('Ly.LayoutPanel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutPanelComponent',\n                    selector: 'bsu-ly-layout-panel'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n        } @case ('Ly.LayoutContainer') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutContainerComponent',\n                    selector: 'bsu-ly-layout-container'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n        } @case ('Ly.EmptySpace') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n        } @case ('Ly.SimpleLabel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LySimpleLabelComponent',\n                    selector: 'bsu-ly-simple-label'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n        } @case ('Ly.LayoutLine') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n        } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-ly-horizontal-layout',\n                    name: 'LyLayoutHorizontalComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n        } @else {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-ly-vertical-layout',\n                    name: 'LyLayoutVerticalComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n        } } @case ('Ly.LayoutControl') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-layout-control',\n                    name: 'LayoutControlComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n        } } }\n        <ng-template\n            #dynamicLayout\n            let-config\n            let-selector=\"selector\"\n            let-maxLabelWidth=\"maxLabelWidth\"\n            let-name=\"name\"\n        >\n            <bnrc-dynamic-layout\n                [config]=\"config\"\n                [selector]=\"selector\"\n                [name]=\"name\"\n                [module]=\"'BarsaSapUi'\"\n                [moduleFileName]=\"'BarsaSapUi'\"\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n                [isSearchPanel]=\"isSearchPanel\"\n                (events)=\"onEvents($event)\"\n            >\n            </bnrc-dynamic-layout>\n        </ng-template>\n    </div>\n</fd-panel>\n}\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "component", type: i3$6.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$6.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$6.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LyLayoutPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-layout-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "@if (visible) {\n<fd-panel\n    [fixed]=\"!config.ExpandButtonVisible\"\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\n    [attr.maxWidth]=\"maxWidth\"\n    [expanded]=\"config.Expanded\"\n>\n    @if (!hideTitle) {\n    <h5 fd-panel-title>\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\n            @if (config.FontIcon) {\n            <i\n                style=\"font-size: 1.5rem\"\n                [style.color]=\"config.IconColor || null\"\n                [class]=\"'sap-icon--' + config.FontIcon\"\n            ></i>\n            }\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\n        </div>\n    </h5>\n    }\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\n        @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutPanelComponent',\n                    selector: 'bsu-ly-tab-container'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n        } @case ('Ly.LayoutPanel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutPanelComponent',\n                    selector: 'bsu-ly-layout-panel'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n        } @case ('Ly.LayoutContainer') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutContainerComponent',\n                    selector: 'bsu-ly-layout-container'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n        } @case ('Ly.EmptySpace') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n        } @case ('Ly.SimpleLabel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LySimpleLabelComponent',\n                    selector: 'bsu-ly-simple-label'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n        } @case ('Ly.LayoutLine') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n        } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-ly-horizontal-layout',\n                    name: 'LyLayoutHorizontalComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n        } @else {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-ly-vertical-layout',\n                    name: 'LyLayoutVerticalComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n        } } @case ('Ly.LayoutControl') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-layout-control',\n                    name: 'LayoutControlComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n        } } }\n        <ng-template\n            #dynamicLayout\n            let-config\n            let-selector=\"selector\"\n            let-maxLabelWidth=\"maxLabelWidth\"\n            let-name=\"name\"\n        >\n            <bnrc-dynamic-layout\n                [config]=\"config\"\n                [selector]=\"selector\"\n                [name]=\"name\"\n                [module]=\"'BarsaSapUi'\"\n                [moduleFileName]=\"'BarsaSapUi'\"\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n                [isSearchPanel]=\"isSearchPanel\"\n            >\n            </bnrc-dynamic-layout>\n        </ng-template>\n    </div>\n</fd-panel>\n}\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"] }]
+            args: [{ selector: 'bsu-ly-layout-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "@if (visible) {\n<fd-panel\n    [fixed]=\"!config.ExpandButtonVisible\"\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\n    [attr.maxWidth]=\"maxWidth\"\n    [expanded]=\"config.Expanded\"\n>\n    @if (!hideTitle) {\n    <h5 fd-panel-title>\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\n            @if (config.FontIcon) {\n            <i\n                style=\"font-size: 1.5rem\"\n                [style.color]=\"config.IconColor || null\"\n                [class]=\"'sap-icon--' + config.FontIcon\"\n            ></i>\n            }\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\n        </div>\n    </h5>\n    }\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\n        @for (item of config | filterToolbarControl; track item) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutPanelComponent',\n                    selector: 'bsu-ly-tab-container'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n        } @case ('Ly.LayoutPanel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutPanelComponent',\n                    selector: 'bsu-ly-layout-panel'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n        } @case ('Ly.LayoutContainer') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LyLayoutContainerComponent',\n                    selector: 'bsu-ly-layout-container'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n        } @case ('Ly.EmptySpace') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n        } @case ('Ly.SimpleLabel') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    name: 'LySimpleLabelComponent',\n                    selector: 'bsu-ly-simple-label'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n        } @case ('Ly.LayoutLine') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n        } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-ly-horizontal-layout',\n                    name: 'LyLayoutHorizontalComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n        } @else {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-ly-vertical-layout',\n                    name: 'LyLayoutVerticalComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n        } } @case ('Ly.LayoutControl') {\n        <ng-container\n            *ngTemplateOutlet=\"\n                dynamicLayout;\n                context: {\n                    $implicit: item,\n                    selector: 'bsu-layout-control',\n                    name: 'LayoutControlComponent'\n                }\n            \"\n        ></ng-container>\n        <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n        } } }\n        <ng-template\n            #dynamicLayout\n            let-config\n            let-selector=\"selector\"\n            let-maxLabelWidth=\"maxLabelWidth\"\n            let-name=\"name\"\n        >\n            <bnrc-dynamic-layout\n                [config]=\"config\"\n                [selector]=\"selector\"\n                [name]=\"name\"\n                [module]=\"'BarsaSapUi'\"\n                [moduleFileName]=\"'BarsaSapUi'\"\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n                [isSearchPanel]=\"isSearchPanel\"\n                (events)=\"onEvents($event)\"\n            >\n            </bnrc-dynamic-layout>\n        </ng-template>\n    </div>\n</fd-panel>\n}\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"] }]
         }], propDecorators: { renderItems: [{
                 type: Input
             }], isRoot: [{
@@ -12356,7 +12379,7 @@ class BarsaCartableFormComponent extends FormBaseComponent {
         return isSmallDevice;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaCartableFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaCartableFormComponent, selector: "bsu-barsa-cartable-form", host: { properties: { "class.smallDevice": "this._isSmallDevice" } }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "@if (layout94$ | async; as layout94) {\n<div class=\"groups-wrapper\">\n    @if ('\u062C\u0633\u062A\u062C\u0648 \u06AF\u0631\u0648\u0647' | controlUi: layout94; as configUi) {\n    <bsu-layout-control\n        class=\"search-group\"\n        [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n        [config]=\"configUi\"\n        [showLabel]=\"false\"\n    ></bsu-layout-control>\n    } @if ('\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94; as configUi) {\n    <bsu-layout-control\n        class=\"cartable-groups\"\n        [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n        [config]=\"configUi\"\n        [showLabel]=\"false\"\n    ></bsu-layout-control>\n    }\n</div>\n@if ('\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644' | controlUi: layout94; as configUi) {\n<bsu-layout-control\n    class=\"cartable-radif\"\n    [caption]=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n    [config]=\"configUi\"\n    [showLabel]=\"false\"\n></bsu-layout-control>\n} }\n", styles: [":host{display:flex;width:100%;height:100%;border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);background-color:var(--sapBaseColor)}:host.smallDevice{flex-direction:column;min-height:100vh}:host.smallDevice ::ng-deep bnrc-field-ui{margin:unset!important}:host .groups-wrapper{display:flex;flex-direction:column;min-width:280px;max-width:280px;border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host .cartable-groups{flex:1}:host.smallDevice .groups-wrapper{flex:unset;width:100%;min-width:100%;max-width:100%}:host.smallDevice .search-group{display:none}:host.smallDevice .cartable-groups{flex:unset}div{flex:1}:host ::ng-deep .viewer-container{min-height:100%!important}:host ::ng-deep .viewer-container fd-layout-panel{box-shadow:none}:host ::ng-deep tbody{border:none!important}:host ::ng-deep bnrc-field-ui{padding:0!important}\n"], dependencies: [{ kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaCartableFormComponent, selector: "bsu-barsa-cartable-form", host: { properties: { "class.smallDevice": "this._isSmallDevice" } }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "@if (layout94$ | async; as layout94) {\n<div class=\"groups-wrapper\">\n    @if ('\u062C\u0633\u062A\u062C\u0648 \u06AF\u0631\u0648\u0647' | controlUi: layout94; as configUi) {\n    <bsu-layout-control\n        class=\"search-group\"\n        [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n        [config]=\"configUi\"\n        [showLabel]=\"false\"\n    ></bsu-layout-control>\n    } @if ('\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94; as configUi) {\n    <bsu-layout-control\n        class=\"cartable-groups\"\n        [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n        [config]=\"configUi\"\n        [showLabel]=\"false\"\n    ></bsu-layout-control>\n    }\n</div>\n@if ('\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644' | controlUi: layout94; as configUi) {\n<bsu-layout-control\n    class=\"cartable-radif\"\n    [caption]=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n    [config]=\"configUi\"\n    [showLabel]=\"false\"\n></bsu-layout-control>\n} }\n", styles: [":host{display:flex;width:100%;height:100%;border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);background-color:var(--sapBaseColor)}:host.smallDevice{flex-direction:column;min-height:100vh}:host.smallDevice ::ng-deep bnrc-field-ui{margin:unset!important}:host .groups-wrapper{display:flex;flex-direction:column;min-width:280px;max-width:280px;border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host .cartable-groups{flex:1}:host.smallDevice .groups-wrapper{flex:unset;width:100%;min-width:100%;max-width:100%}:host.smallDevice .search-group{display:none}:host.smallDevice .cartable-groups{flex:unset}div{flex:1}:host ::ng-deep .viewer-container{min-height:100%!important}:host ::ng-deep .viewer-container fd-layout-panel{box-shadow:none}:host ::ng-deep tbody{border:none!important}:host ::ng-deep bnrc-field-ui{padding:0!important}\n"], dependencies: [{ kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaCartableFormComponent, decorators: [{
             type: Component,
@@ -13595,7 +13618,7 @@ class BarsaQuestionAnswerFormComponent extends FormPropsBaseComponent {
         vote && vote?.FieldUi.fireEvent('click', vote.FieldUi);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaQuestionAnswerFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaQuestionAnswerFormComponent, selector: "bsu-barsa-question-answer-form", providers: [UploadService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-absolute tw-z-0 tw-bg-white tw-w-screen tw-top-0 tw-left-0\"></div>\n<div class=\"tw-w-full tw-py-8 tw-relative\">\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-gap-12\">\n        <div class=\"tw-col-span-3 tw-flex tw-flex-col tw-gap-8\">\n            <div class=\"tw-flex tw-gap-8 tw-pb-8\">\n                <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-items-center tw-gap-6\">\n                    <img src=\"https://picsum.photos/64/64\" class=\"tw-size-12 tw-rounded-full\" />\n                    <bsu-barsa-question-answer-vote-section\n                        [vote]=\"mo.Post.CurrentUserVote.Vote\"\n                        [voteUps]=\"mo.Post.VoteUps\"\n                        [voteDowns]=\"mo.Post.VoteDowns\"\n                        (voteChange)=\"onVoteChange($event)\"\n                    ></bsu-barsa-question-answer-vote-section>\n                </div>\n                <div class=\"tw-grow tw-shrink\">\n                    <bsu-barsa-question-answer-creator-time-section\n                        [post]=\"mo.Post\"\n                    ></bsu-barsa-question-answer-creator-time-section>\n                    <p class=\"tw-text-2xl tw-mt-4\">\n                        {{ mo.Title }}\n                    </p>\n                    <bsu-barsa-question-answer-content-actions-section\n                        [mo]=\"mo\"\n                        [buttons]=\"toolbarItems\"\n                    ></bsu-barsa-question-answer-content-actions-section>\n                    <bsu-barsa-question-answer-comments-section\n                        [post]=\"mo.Post\"\n                    ></bsu-barsa-question-answer-comments-section>\n                </div>\n            </div>\n            <p class=\"tw-z-10 tw-text-2xl tw-pb-4 tw-border-b tw-border-gray-200 tw-relative\">\n                {{ mo.Answers.MoDataList.length }}\n                \u067E\u0627\u0633\u062E\n            </p>\n            <div class=\"tw-flex tw-flex-col tw-gap-8 tw-z-10 tw-relative\">\n                @if (mo.Answers.MoDataList.length) { @if ('\u067E\u0627\u0633\u062E \u0647\u0627' | controlUi: layout94; as answers) {\n                <bsu-layout-control [config]=\"answers\"></bsu-layout-control>\n                } }\n            </div>\n        </div>\n        <div class=\"tw-col-span-1\">\n            @if ('\u0633\u0648\u0627\u0644\u0627\u062A \u0645\u0631\u062A\u0628\u0637' | controlUi: layout94; as relevantQuestions) {\n            <bsu-layout-control [config]=\"relevantQuestions\"></bsu-layout-control>\n            }\n        </div>\n    </div>\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-mt-4\">\n        <div\n            class=\"tw-col-span-4 tw-flex tw-flex-col tw-gap-4 tw-p-4 border tw-border-gray-200 tw-rounded-md tw-bg-white\"\n        >\n            <span class=\"tw-text-xl\">\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E</span>\n            @if ('\u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerText) {\n            <bsu-layout-control [config]=\"newAnswerText\"></bsu-layout-control>\n            }\n            <div class=\"tw-flex tw-justify-end\">\n                @if ('\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerSubmit) {\n                <bsu-layout-control\n                    class=\"tw-w-fit tw-min-w-fit tw-max-w-fit\"\n                    [config]=\"newAnswerSubmit\"\n                ></bsu-layout-control>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"], dependencies: [{ kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "component", type: BarsaQuestionAnswerContentActionsSectionComponent, selector: "bsu-barsa-question-answer-content-actions-section", inputs: ["mo", "buttons"], outputs: ["btnClick"] }, { kind: "component", type: BarsaQuestionAnswerVoteSectionComponent, selector: "bsu-barsa-question-answer-vote-section", inputs: ["vote", "voteDowns", "voteUps"], outputs: ["voteChange"] }, { kind: "component", type: BarsaQuestionAnswerCreatorTimeSectionComponent, selector: "bsu-barsa-question-answer-creator-time-section", inputs: ["post"] }, { kind: "component", type: BarsaQuestionAnswerCommentsSectionComponent, selector: "bsu-barsa-question-answer-comments-section", inputs: ["post"] }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaQuestionAnswerFormComponent, selector: "bsu-barsa-question-answer-form", providers: [UploadService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-absolute tw-z-0 tw-bg-white tw-w-screen tw-top-0 tw-left-0\"></div>\n<div class=\"tw-w-full tw-py-8 tw-relative\">\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-gap-12\">\n        <div class=\"tw-col-span-3 tw-flex tw-flex-col tw-gap-8\">\n            <div class=\"tw-flex tw-gap-8 tw-pb-8\">\n                <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-items-center tw-gap-6\">\n                    <img src=\"https://picsum.photos/64/64\" class=\"tw-size-12 tw-rounded-full\" />\n                    <bsu-barsa-question-answer-vote-section\n                        [vote]=\"mo.Post.CurrentUserVote.Vote\"\n                        [voteUps]=\"mo.Post.VoteUps\"\n                        [voteDowns]=\"mo.Post.VoteDowns\"\n                        (voteChange)=\"onVoteChange($event)\"\n                    ></bsu-barsa-question-answer-vote-section>\n                </div>\n                <div class=\"tw-grow tw-shrink\">\n                    <bsu-barsa-question-answer-creator-time-section\n                        [post]=\"mo.Post\"\n                    ></bsu-barsa-question-answer-creator-time-section>\n                    <p class=\"tw-text-2xl tw-mt-4\">\n                        {{ mo.Title }}\n                    </p>\n                    <bsu-barsa-question-answer-content-actions-section\n                        [mo]=\"mo\"\n                        [buttons]=\"toolbarItems\"\n                    ></bsu-barsa-question-answer-content-actions-section>\n                    <bsu-barsa-question-answer-comments-section\n                        [post]=\"mo.Post\"\n                    ></bsu-barsa-question-answer-comments-section>\n                </div>\n            </div>\n            <p class=\"tw-z-10 tw-text-2xl tw-pb-4 tw-border-b tw-border-gray-200 tw-relative\">\n                {{ mo.Answers.MoDataList.length }}\n                \u067E\u0627\u0633\u062E\n            </p>\n            <div class=\"tw-flex tw-flex-col tw-gap-8 tw-z-10 tw-relative\">\n                @if (mo.Answers.MoDataList.length) { @if ('\u067E\u0627\u0633\u062E \u0647\u0627' | controlUi: layout94; as answers) {\n                <bsu-layout-control [config]=\"answers\"></bsu-layout-control>\n                } }\n            </div>\n        </div>\n        <div class=\"tw-col-span-1\">\n            @if ('\u0633\u0648\u0627\u0644\u0627\u062A \u0645\u0631\u062A\u0628\u0637' | controlUi: layout94; as relevantQuestions) {\n            <bsu-layout-control [config]=\"relevantQuestions\"></bsu-layout-control>\n            }\n        </div>\n    </div>\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-mt-4\">\n        <div\n            class=\"tw-col-span-4 tw-flex tw-flex-col tw-gap-4 tw-p-4 border tw-border-gray-200 tw-rounded-md tw-bg-white\"\n        >\n            <span class=\"tw-text-xl\">\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E</span>\n            @if ('\u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerText) {\n            <bsu-layout-control [config]=\"newAnswerText\"></bsu-layout-control>\n            }\n            <div class=\"tw-flex tw-justify-end\">\n                @if ('\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerSubmit) {\n                <bsu-layout-control\n                    class=\"tw-w-fit tw-min-w-fit tw-max-w-fit\"\n                    [config]=\"newAnswerSubmit\"\n                ></bsu-layout-control>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"], dependencies: [{ kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: BarsaQuestionAnswerContentActionsSectionComponent, selector: "bsu-barsa-question-answer-content-actions-section", inputs: ["mo", "buttons"], outputs: ["btnClick"] }, { kind: "component", type: BarsaQuestionAnswerVoteSectionComponent, selector: "bsu-barsa-question-answer-vote-section", inputs: ["vote", "voteDowns", "voteUps"], outputs: ["voteChange"] }, { kind: "component", type: BarsaQuestionAnswerCreatorTimeSectionComponent, selector: "bsu-barsa-question-answer-creator-time-section", inputs: ["post"] }, { kind: "component", type: BarsaQuestionAnswerCommentsSectionComponent, selector: "bsu-barsa-question-answer-comments-section", inputs: ["post"] }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaQuestionAnswerFormComponent, decorators: [{
             type: Component,
@@ -14043,7 +14066,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                            @if (!messageText.length) {\r\n                            <span\r\n                                class=\"tw-absolute tw-right-4 tw-top-4 -tw-translate-y-1/2 tw-text-gray-500 dark:tw-text-gray-500\"\r\n                            >\r\n                                \u0645\u062A\u0646 \u067E\u06CC\u0627\u0645...\r\n                            </span>\r\n                            }\r\n                            <div\r\n                                id=\"chat-textarea\"\r\n                                class=\"tw-inline-block tw-w-full tw-w-full tw-whitespace-pre-line tw-rounded-3xl tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-px-4 tw-py-2 tw-max-h-32 tw-overflow-auto tw-resize tw-text-base\"\r\n                                role=\"textbox\"\r\n                                contenteditable\r\n                                ngDefaultControl\r\n                                (keydown.enter)=\"sendMessage()\"\r\n                                (input)=\"checkInput($event)\"\r\n                            ></div>\r\n                        </div>\r\n                        <button\r\n                            fd-button\r\n                            fdType=\"transparent\"\r\n                            glyph=\"arrow-left\"\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)=\"sendMessage()\"\r\n                        ></button>\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: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { 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: i6$4.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i6$4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i6$4.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"] }, { 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.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], 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                            @if (!messageText.length) {\r\n                            <span\r\n                                class=\"tw-absolute tw-right-4 tw-top-4 -tw-translate-y-1/2 tw-text-gray-500 dark:tw-text-gray-500\"\r\n                            >\r\n                                \u0645\u062A\u0646 \u067E\u06CC\u0627\u0645...\r\n                            </span>\r\n                            }\r\n                            <div\r\n                                id=\"chat-textarea\"\r\n                                class=\"tw-inline-block tw-w-full tw-w-full tw-whitespace-pre-line tw-rounded-3xl tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-px-4 tw-py-2 tw-max-h-32 tw-overflow-auto tw-resize tw-text-base\"\r\n                                role=\"textbox\"\r\n                                contenteditable\r\n                                ngDefaultControl\r\n                                (keydown.enter)=\"sendMessage()\"\r\n                                (input)=\"checkInput($event)\"\r\n                            ></div>\r\n                        </div>\r\n                        <button\r\n                            fd-button\r\n                            fdType=\"transparent\"\r\n                            glyph=\"arrow-left\"\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)=\"sendMessage()\"\r\n                        ></button>\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: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { 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: i6$4.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i6$4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i6$4.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.ControlUiPipe, name: "controlUi" }], animations: [
             trigger('inContentAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'scale(50%, 50%)' }),