barsa-sap-ui 1.0.334 → 1.0.335

package/fesm2015/barsa-sap-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input, ElementRef, ViewChild, HostBinding, EventEmitter, Output, ViewEncapsulation, ViewChildren, Inject, Optional, Self, TemplateRef, HostListener, Pipe, Directive, ViewContainerRef, SkipSelf, NgModule, 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, BaseUlvSettingComponent, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getGridSettings, FieldBaseComponent, DateService, getDateService as getDateService$1, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, EllipsifyDirective, createGridEditorFormPanel, FormPanelService, BaseViewItemPropsComponent, isImage, getIcon, LayoutPanelBaseComponent, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, BaseColumnPropsComponent, ColumnService, DateRanges, LogService, UlvMainService, isFunction, FilesValidationHelper, getValidExtension, getImagePath, UploadService, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, PageWithFormHandlerBaseComponent, getHeaderValue, getFieldValue, ContainerComponent, FORM_DIALOG_COMPONENT, ContainerService, FormPropsBaseComponent, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, executeUlvCommandHandler, getDeviceIsPhone, getDeviceIsTablet, PortalService, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, BarsaNovinRayCoreModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
+import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, LayoutService, BaseUlvSettingComponent, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, GetAllColumnsSorted, measureText, getParentHeight, getControlSizeMode, getGridSettings, FieldBaseComponent, DateService, getDateService as getDateService$1, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, EllipsifyDirective, createGridEditorFormPanel, FormPanelService, BaseViewItemPropsComponent, isImage, getIcon, LayoutPanelBaseComponent, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, BaseColumnPropsComponent, ColumnService, DateRanges, LogService, UlvMainService, isFunction, FilesValidationHelper, getValidExtension, getImagePath, UploadService, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, PageWithFormHandlerBaseComponent, getHeaderValue, getFieldValue, ContainerComponent, FORM_DIALOG_COMPONENT, ContainerService, FormPropsBaseComponent, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, executeUlvCommandHandler, getDeviceIsPhone, getDeviceIsTablet, PortalService, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, BarsaNovinRayCoreModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
 import moment from 'moment';
 import jmoment from 'moment-jalaali';
 import { merge, of, BehaviorSubject, Subject, combineLatest, takeUntil as takeUntil$1, fromEvent, filter as filter$1, tap as tap$1 } from 'rxjs';
@@ -42,6 +42,7 @@ import * as i7$2 from '@fundamental-ngx/core/popover';
 import * as i13 from '@fundamental-ngx/platform/button';
 import * as i1$5 from '@fundamental-ngx/core/illustrated-message';
 import * as i3$5 from '@fundamental-ngx/core/avatar';
+import * as i5$2 from '@fundamental-ngx/core/inline-help';
 import * as i5$1 from '@fundamental-ngx/core/card';
 import * as i3$4 from 'ng2-pdfjs-viewer';
 import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';
@@ -58,9 +59,9 @@ import * as i7$5 from '@fundamental-ngx/core/input-group';
 import * as i11 from '@fundamental-ngx/core/radio';
 import * as i2$4 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i5$2 from '@fundamental-ngx/core/breadcrumb';
+import * as i5$3 from '@fundamental-ngx/core/breadcrumb';
 import * as i7$6 from '@fundamental-ngx/core/dynamic-page';
-import * as i5$3 from 'ngx-color/swatches';
+import * as i5$4 from 'ngx-color/swatches';
 import { ColorSwatchesModule } from 'ngx-color/swatches';
 import * as i6$3 from 'ngx-color/chrome';
 import { ColorChromeModule } from 'ngx-color/chrome';
@@ -68,7 +69,7 @@ import * as i7$7 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import * as i6$4 from '@fundamental-ngx/core/file-uploader';
 import * as i7$8 from '@fundamental-ngx/core/object-identifier';
-import * as i5$4 from '@fundamental-ngx/core/object-number';
+import * as i5$5 from '@fundamental-ngx/core/object-number';
 import * as i10$1 from '@fundamental-ngx/platform/slider';
 import * as i7$9 from '@fundamental-ngx/core/facets';
 import * as i13$1 from '@fundamental-ngx/core/rating-indicator';
@@ -77,10 +78,9 @@ import * as i16 from '@fundamental-ngx/core/text';
 import * as i18 from '@fundamental-ngx/core/progress-indicator';
 import * as i7$a from '@fundamental-ngx/core/multi-input';
 import * as i2$5 from '@fundamental-ngx/core/combobox';
-import * as i5$5 from '@fundamental-ngx/platform/dynamic-page';
-import * as i7$b from '@fundamental-ngx/core/inline-help';
+import * as i5$6 from '@fundamental-ngx/platform/dynamic-page';
 import * as i2$6 from '@fundamental-ngx/core/wizard';
-import * as i7$c from '@fundamental-ngx/core/segmented-button';
+import * as i7$b from '@fundamental-ngx/core/segmented-button';
 import * as i3$8 from '@fundamental-ngx/core/pagination';
 import * as i3$9 from '@fundamental-ngx/core/panel';
 import * as i1$6 from '@fundamental-ngx/core/switch';
@@ -470,14 +470,11 @@ class LayoutControlComponent extends LayoutItemBaseComponent {
     }
 }
 LayoutControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", 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 });
-LayoutControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "tempLabelRef", first: true, predicate: ["tempLabelRef"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!hide\">\n    <ng-container *ngIf=\"labelVisible && !isCheckbox\">\n        <bsu-ly-label\n            [attr.labelWidth]=\"labelWidth\"\n            [attr.canvasWidth]=\"canvasWidth\"\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 ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\n            \"\n            [style.width]=\"\n                isCheckbox ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\n            \"\n            [isMandatory]=\"isMandatory\"\n            [fieldIcon]=\"fieldIcon\"\n            [originalXtype]=\"originalXtype\"\n            [textVisible]=\"textVisible\"\n            [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\n        ></bsu-ly-label>\n    </ng-container>\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</ng-container>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FieldUiComponent, selector: "bnrc-field-ui", inputs: ["isSearchPanel", "customField", "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", "isColumn", "isMandatory", "fieldIcon", "originalXtype", "textVisible"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LayoutControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: "<ng-container *ngIf=\"!hide\">\n    <ng-container *ngIf=\"labelVisible && !isCheckbox\">\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 ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\n            \"\n            [style.width]=\"\n                isCheckbox ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\n            \"\n            [isMandatory]=\"isMandatory\"\n            [fieldIcon]=\"fieldIcon\"\n            [originalXtype]=\"originalXtype\"\n            [textVisible]=\"textVisible\"\n            [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\n        ></bsu-ly-label>\n    </ng-container>\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</ng-container>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FieldUiComponent, selector: "bnrc-field-ui", inputs: ["isSearchPanel", "customField", "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", "isColumn", "isMandatory", "fieldIcon", "originalXtype", "textVisible"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LayoutControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-layout-control', providers: [LayoutService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!hide\">\n    <ng-container *ngIf=\"labelVisible && !isCheckbox\">\n        <bsu-ly-label\n            [attr.labelWidth]=\"labelWidth\"\n            [attr.canvasWidth]=\"canvasWidth\"\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 ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\n            \"\n            [style.width]=\"\n                isCheckbox ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\n            \"\n            [isMandatory]=\"isMandatory\"\n            [fieldIcon]=\"fieldIcon\"\n            [originalXtype]=\"originalXtype\"\n            [textVisible]=\"textVisible\"\n            [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\n        ></bsu-ly-label>\n    </ng-container>\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</ng-container>\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: function () { return [{ 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: { canvasRef: [{
-                type: ViewChild,
-                args: ['canvas', { static: true }]
-            }], tempLabelRef: [{
+            args: [{ selector: 'bsu-layout-control', providers: [LayoutService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!hide\">\n    <ng-container *ngIf=\"labelVisible && !isCheckbox\">\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 ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\n            \"\n            [style.width]=\"\n                isCheckbox ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\n            \"\n            [isMandatory]=\"isMandatory\"\n            [fieldIcon]=\"fieldIcon\"\n            [originalXtype]=\"originalXtype\"\n            [textVisible]=\"textVisible\"\n            [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\n        ></bsu-ly-label>\n    </ng-container>\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</ng-container>\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: function () { return [{ 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: [{
                 type: ViewChild,
                 args: ['tempLabelRef', { read: ElementRef, static: true }]
             }], layoutControlClass: [{
@@ -1733,6 +1730,7 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
         this.cellClick = false;
         this.secondaryColumnsSource = new BehaviorSubject([]);
         this.secondaryColumns$ = this.secondaryColumnsSource.asObservable();
+        this.hasDetailsInRow = false;
         this.rowActivable = true;
         this.openOverflowCommands = [];
         this.containerWidthSource$ = new Subject();
@@ -2021,12 +2019,10 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
         this._ulvMainService.reSetMoDataList(newMoDataList);
     }
     _getWidth(label) {
-        if (!this.canvasRef) {
+        const labelWithPadding = measureText(label);
+        if (labelWithPadding < 1) {
             return 0;
         }
-        const ctx = this.canvasRef.nativeElement.getContext('2d');
-        ctx.font = 'normal 0.885rem IRANYekanDigits';
-        const labelWithPadding = ctx.measureText(label).width;
         return Math.ceil(labelWithPadding);
     }
     _setParentHeight() {
@@ -2061,6 +2057,10 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
             this.refreshContextMoDataList(moDataList);
         }
     }
+    onHasDetailsInRow(value, deviceSize) {
+        this.hasDetailsInRow = value;
+        this._deviceSizeChanged(deviceSize);
+    }
     _createNewInlineMo(setChanged = false) {
         const moDataList = this.moDataList;
         const existInlineMo = moDataList.find((c) => c.$NewInlineMo);
@@ -2263,7 +2263,7 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
         this.containerWidthSource$.next(el.offsetWidth);
     }
     _deviceSizeChanged(deviceSize) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const elNativeElement = this.el.nativeElement;
         if (this._inlineEditMode) {
             this.secondaryColumnsSource.next([]);
@@ -2271,7 +2271,7 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
         }
         const gridSize = getControlSizeMode(elNativeElement, deviceSize);
         let deviceName = 'desktop';
-        const allColumnsWidth = this.allColumns.map((column) => column.Width == 0 ? this._getWidth(column.Alias) : column.Width);
+        const allColumnsWidth = (_a = this.allColumns) === null || _a === void 0 ? void 0 : _a.filter((c) => !c.Hidden).map((column) => (column.Width == 0 ? this._getWidth(column.Alias) : column.Width));
         const visibleColumns = this._visibleColumnsSource.getValue();
         let columnsCount = visibleColumns.length;
         switch (gridSize) {
@@ -2289,13 +2289,28 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
                 break;
         }
         this._deviceNameSource.next(deviceName);
-        const colWidthSettings = (_b = (_a = this.gridSettingSource.getValue()) === null || _a === void 0 ? void 0 : _a.ColSettingList) === null || _b === void 0 ? void 0 : _b.map((c) => c.Width);
+        const colWidthSettings = (_c = (_b = this.gridSettingSource.getValue()) === null || _b === void 0 ? void 0 : _b.ColSettingList) === null || _c === void 0 ? void 0 : _c.map((c) => c.Width);
         const columnsWidth = (colWidthSettings === null || colWidthSettings === void 0 ? void 0 : colWidthSettings.length) ? colWidthSettings : allColumnsWidth;
         let sumColWidth = 0;
+        if ((_d = this.context.ViewSetting) === null || _d === void 0 ? void 0 : _d.IsCheckList) {
+            sumColWidth += 15;
+        }
+        if ((_g = (_f = (_e = this.context.Setting) === null || _e === void 0 ? void 0 : _e.Extra) === null || _f === void 0 ? void 0 : _f.DefaultCommandsAccess) === null || _g === void 0 ? void 0 : _g.View) {
+            sumColWidth += 32;
+        }
+        if (this.hasDetailsInRow) {
+            sumColWidth += 210;
+        }
         const containerWidth = elNativeElement.clientWidth;
         if (columnsWidth.length > 0 && containerWidth > 0) {
             columnsCount = visibleColumns.length;
             columnsWidth.forEach((width, index) => {
+                if (visibleColumns[index]) {
+                    const labelWidth = this._getWidth(visibleColumns[index].Alias);
+                    if (labelWidth > width) {
+                        width = labelWidth;
+                    }
+                }
                 if (sumColWidth + width > containerWidth && columnsCount === visibleColumns.length) {
                     columnsCount = index;
                 }
@@ -2303,7 +2318,7 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
             });
         }
         if (visibleColumns.length > 2) {
-            if (((_c = this.viewSetting) === null || _c === void 0 ? void 0 : _c.DisableResponsive) || this._deviceNameSource.getValue() === 'desktop') {
+            if (((_h = this.viewSetting) === null || _h === void 0 ? void 0 : _h.DisableResponsive) || this._deviceNameSource.getValue() === 'desktop') {
                 const secColumns = this.secondaryColumnsSource.getValue();
                 if (secColumns.length) {
                     this.secondaryColumnsSource.next([]);
@@ -2372,7 +2387,7 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
     }
 }
 SapUiReportBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SapUiReportBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.Overlay }, { token: i1$1.ContentDensityService }, { token: i2.PortalService }, { token: i1$1.DialogService }, { token: i2.UlvMainService }, { token: i2.LayoutService }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: i2.FormPanelService, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-SapUiReportBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: SapUiReportBaseComponent, selector: "bsu-sap-ui-report-base", inputs: { ShowFormPanelControl: "ShowFormPanelControl", ForceCloseChild: "ForceCloseChild", RefreshFormPanelControl: "RefreshFormPanelControl" }, viewQueries: [{ propertyName: "tableComponent", first: true, predicate: TableComponent, descendants: true }, { propertyName: "toolbarComponent", first: true, predicate: ToolbarComponent, descendants: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "tableRowsRef", predicate: ["tableRows"], descendants: true }, { propertyName: "layoutControlsRef", predicate: LayoutControlComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SapUiReportBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: SapUiReportBaseComponent, selector: "bsu-sap-ui-report-base", inputs: { ShowFormPanelControl: "ShowFormPanelControl", ForceCloseChild: "ForceCloseChild", RefreshFormPanelControl: "RefreshFormPanelControl" }, viewQueries: [{ propertyName: "tableComponent", first: true, predicate: TableComponent, descendants: true }, { propertyName: "toolbarComponent", first: true, predicate: ToolbarComponent, descendants: true }, { propertyName: "tableRowsRef", predicate: ["tableRows"], descendants: true }, { propertyName: "layoutControlsRef", predicate: LayoutControlComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SapUiReportBaseComponent, decorators: [{
             type: Component,
             args: [{
@@ -2398,9 +2413,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
             }], tableRowsRef: [{
                 type: ViewChildren,
                 args: ['tableRows']
-            }], canvasRef: [{
-                type: ViewChild,
-                args: ['canvas', { static: true }]
             }], layoutControlsRef: [{
                 type: ViewChildren,
                 args: [LayoutControlComponent]
@@ -2454,10 +2466,10 @@ class UlvToolbarComponent extends BaseComponent {
     }
 }
 UlvToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvToolbarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-UlvToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: { useLayoutItemTextForControl: "useLayoutItemTextForControl", enableSearch: "enableSearch", hideTitle: "hideTitle", title: "title", deviceName: "deviceName", deviceSize: "deviceSize", access: "access", hideToolbar: "hideToolbar", toolbarButtons: "toolbarButtons", contentDensity: "contentDensity", inlineEditMode: "inlineEditMode", allowInlineEdit: "allowInlineEdit", gridSetting: "gridSetting", viewCollection: "viewCollection", reportView: "reportView", inDialog: "inDialog", isMultiSelect: "isMultiSelect", hasSelected: "hasSelected", config: "config", hidden: "hidden", buttons: "buttons" }, outputs: { search: "search", groupbyClick: "groupbyClick", sortClick: "sortClick", columnClick: "columnClick", editModeClick: "editModeClick", viewClick: "viewClick", createNewInlineMo: "createNewInlineMo" }, viewQueries: [{ propertyName: "_toolbar", first: true, predicate: ToolbarComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n    <fd-toolbar\n        #toolbar\n        [shouldOverflow]=\"deviceSize === 's'\"\n        [hasTitle]=\"!hideTitle\"\n        [clearBorder]=\"true\"\n        [forceOverflow]=\"true\"\n        [title]=\"!hideTitle ? (title | bbbTranslate) : ''\"\n        *ngIf=\"!useLayoutItemTextForControl && !hideToolbar; else searchField\"\n    >\n        <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer>\n\n        <ng-container *ngIf=\"!hideToolbar\">\n            <ng-container *ngFor=\"let btn of toolbarButtons; trackBy: _trackBy; let i = index\">\n                <fd-toolbar-separator\n                    fd-toolbar-item\n                    *ngIf=\"(btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile'\"\n                ></fd-toolbar-separator>\n                <fd-split-button\n                    *ngIf=\"btn.menu; else btnTemplate\"\n                    fd-toolbar-item\n                    [fdType]=\"'transparent'\"\n                    [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\n                >\n                    <fd-menu>\n                        <li fd-menu-item *ngFor=\"let btnCommand of btn.menu.items\" [ulvCommandHandler]=\"btnCommand\">\n                            <div fd-menu-interactive>\n                                <span fd-menu-title>{{ btnCommand.text }}</span>\n                            </div>\n                        </li>\n                    </fd-menu>\n                </fd-split-button>\n                <ng-template #btnTemplate>\n                    <ng-container *ngIf=\"btn.type !== 'seperator' && btn.Command?._isVisible\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                btn?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\n                                context: { $implicit: btn }\n                            \"\n                        ></ng-container>\n                    </ng-container>\n                </ng-template>\n            </ng-container>\n            <ng-content select=\"[fd-toolbar-item]\"></ng-content>\n\n            <ng-container *ngIf=\"gridSetting && gridSetting.Hidden !== true\">\n                <fdp-search-field\n                    *ngIf=\"enableSearch === true\"\n                    fd-toolbar-item\n                    placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n                    [suggestions]=\"[]\"\n                    [contentDensity]=\"contentDensity\"\n                    (searchSubmit)=\"onSearchSubmit($event)\"\n                ></fdp-search-field>\n\n                <!--        <fdp-button-->\n                <!--          fd-toolbar-item-->\n                <!--          [contentDensity]=\"contentDensity\"-->\n                <!--          buttonType=\"transparent\"-->\n                <!--          [label]=\"device === 'mobile' ? ('Filter' | bbbTranslate) : ''\"-->\n                <!--          [glyph]=\"'filter'\"-->\n                <!--        >-->\n                <!--        </fdp-button>-->\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [glyph]=\"'group-2'\"\n                    [attr.fdOverflowGroup]=\"1\"\n                    [attr.fdOverflowPriority]=\"'low'\"\n                    (click)=\"onGroupbySettings()\"\n                    [title]=\"'Groups' | bbbTranslate\"\n                ></button>\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [attr.fdOverflowGroup]=\"1\"\n                    [glyph]=\"'sort'\"\n                    [attr.fdOverflowPriority]=\"'low'\"\n                    (click)=\"onSortSettings()\"\n                    [title]=\"'Sort' | bbbTranslate\"\n                ></button>\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [attr.fdOverflowGroup]=\"1\"\n                    [glyph]=\"'action-settings'\"\n                    [attr.fdOverflowPriority]=\"'low'\"\n                    (click)=\"onColumnSettings()\"\n                    [title]=\"'Columns' | bbbTranslate\"\n                ></button>\n                <button\n                    *ngIf=\"allowInlineEdit && access.Edit\"\n                    fd-button\n                    fd-toolbar-item\n                    [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\n                    [glyph]=\"'edit'\"\n                    (click)=\"onEditMode()\"\n                    [attr.fdOverflowGroup]=\"2\"\n                    [attr.fdOverflowPriority]=\"'low'\"\n                    [title]=\"'Edit' | bbbTranslate\"\n                ></button>\n\n                <fd-split-button\n                    *ngIf=\"viewCollection && viewCollection.length > 1\"\n                    fd-toolbar-item\n                    [attr.fdOverflowGroup]=\"2\"\n                    [attr.fdOverflowPriority]=\"'low'\"\n                    [fdType]=\"'transparent'\"\n                    [mainAction]=\"{\n                        keepMainAction: true,\n                        mainActionTitle: splitBtnTitle\n                    }\"\n                >\n                    <fd-menu>\n                        <li fd-menu-item *ngFor=\"let viewObject of viewCollection\">\n                            <div fd-menu-interactive (click)=\"onChangeView(viewObject)\">\n                                <span fd-menu-title>\n                                    <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\n                                </span>\n                            </div>\n                        </li>\n                    </fd-menu>\n                </fd-split-button>\n                <ng-template #splitBtnTitle>\n                    <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </fd-toolbar>\n    <ng-template #searchField>\n        <fd-toolbar *ngIf=\"enableSearch\">\n            <fdp-search-field\n                fd-toolbar-item\n                placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n                [suggestions]=\"[]\"\n                [contentDensity]=\"contentDensity\"\n                (searchSubmit)=\"onSearchSubmit($event)\"\n            ></fdp-search-field\n        ></fd-toolbar>\n    </ng-template>\n</ng-container>\n<ng-template #defaultButtonTemplate let-btn>\n    <button\n        *ngIf=\"inlineEditMode && btn.text === ('New' | bbbTranslate); else tplToolbarBtn\"\n        fd-button\n        fd-toolbar-item\n        [attr.fdOverflowPriority]=\"btn.Command?.IsBuiltin ? 'low' : ''\"\n        [disabled]=\"btn.Command._isEnable === false ? true : false\"\n        [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\n        [glyph]=\"btn.Command.JsonExtraProp?.Icon\"\n        [title]=\"btn.Command?.IsBuiltin ? btn.text : ''\"\n        (click)=\"createNewInlineMo.emit()\"\n    >\n        <img\n            *ngIf=\"!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon\"\n            width=\"16\"\n            [src]=\"btn.icon\"\n        />\n        <span *ngIf=\"!btn.hideText\">{{ btn.text }}</span>\n    </button>\n    <ng-template #tplToolbarBtn>\n        <button\n            fd-button\n            fd-toolbar-item\n            [attr.fdOverflowPriority]=\"btn.Command?.IsBuiltin ? 'low' : ''\"\n            [ulvCommandHandler]=\"btn\"\n            [disabled]=\"btn.Command._isEnable === false ? true : false\"\n            [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\n            [glyph]=\"btn.Command.JsonExtraProp?.Icon\"\n            [title]=\"btn.Command?.IsBuiltin ? btn.text : ''\"\n        >\n            <img\n                *ngIf=\"!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon\"\n                width=\"16\"\n                [src]=\"btn.icon\"\n            />\n            <span *ngIf=\"!btn.hideText\">{{ btn.text }}</span>\n        </button>\n    </ng-template>\n</ng-template>\n<ng-template #customButtonTemplate let-btn>\n    <bnrc-dynamic-form-toolbaritem\n        fd-toolbar-item\n        [ulvCommandHandler]=\"btn\"\n        [component]=\"btn.Command?.CustomUi\"\n        [context]=\"btn\"\n        [isEnable]=\"btn.Command?._isEnable\"\n        [deviceName]=\"deviceName\"\n    ></bnrc-dynamic-form-toolbaritem>\n</ng-template>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .fd-toolbar{flex-wrap:nowrap!important}:host ::ng-deep .fd-toolbar{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.UlvCommandDirective, selector: "[ulvCommandHandler]", inputs: ["ulvCommandHandler"], outputs: ["commandClick"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i4$3.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "disabled", "mainActionTitle", "fdType", "expandButtonAriaLabel", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "directive", type: i7$1.ToolbarOverflowGroupDirective, selector: "[fdOverflowGroup]", inputs: ["fdOverflowGroup"] }, { kind: "directive", type: i8.PlatformContentDensityDeprecationDirective, selector: "        fdp-action-bar[contentDensity],        fdp-button[contentDensity],        fdp-object-list-item[contentDensity],        fdp-standard-list-item[contentDensity],        fdp-menu[contentDensity],        fdp-menu-button[contentDensity],        fdp-panel[contentDensity],        fdp-search-field[contentDensity],        fdp-split-menu-button[contentDensity],        fdp-file-uploader[contentDensity],        fdp-upload-collection[contentDensity],        fdp-table[contentDensity],        fdp-multi-input[contentDensity],        fdp-list[contentDensity],        fdp-slider[contentDensity],        fdp-time-picker[contentDensity],        fdp-textarea[contentDensity],        fdp-switch[contentDensity],        fdp-number-step-input[contentDensity],        fdp-select[contentDensity],        fdp-date-picker[contentDensity],        fdp-checkbox[contentDensity],        fdp-checkbox-group[contentDensity],        fdp-combobox[contentDensity],        fdp-datetime-picker[contentDensity],        fdp-input[contentDensity],        fdp-radio-group[contentDensity],        fdp-radio-button[contentDensity],        fdp-multi-combobox[contentDensity],        fdp-input-group-addon-body[contentDensity],        fdp-input-group[contentDensity],        fdp-value-help-dialog[contentDensity],        fdp-filter-single-select[contentDensity],        fdp-filter-multi-select[contentDensity],        fdp-filter-custom[contentDensity]    " }, { kind: "component", type: i7.SearchFieldComponent, selector: "fdp-search-field", inputs: ["placeholder", "mobile", "mobileConfig", "disableRefresh", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UlvToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: { useLayoutItemTextForControl: "useLayoutItemTextForControl", enableSearch: "enableSearch", hideTitle: "hideTitle", title: "title", deviceName: "deviceName", deviceSize: "deviceSize", access: "access", hideToolbar: "hideToolbar", toolbarButtons: "toolbarButtons", contentDensity: "contentDensity", inlineEditMode: "inlineEditMode", allowInlineEdit: "allowInlineEdit", gridSetting: "gridSetting", viewCollection: "viewCollection", reportView: "reportView", inDialog: "inDialog", isMultiSelect: "isMultiSelect", hasSelected: "hasSelected", config: "config", hidden: "hidden", buttons: "buttons" }, outputs: { search: "search", groupbyClick: "groupbyClick", sortClick: "sortClick", columnClick: "columnClick", editModeClick: "editModeClick", viewClick: "viewClick", createNewInlineMo: "createNewInlineMo" }, viewQueries: [{ propertyName: "_toolbar", first: true, predicate: ToolbarComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n    <fd-toolbar\n        #toolbar\n        [shouldOverflow]=\"deviceSize === 's'\"\n        [hasTitle]=\"!hideTitle\"\n        [clearBorder]=\"true\"\n        [forceOverflow]=\"false\"\n        [title]=\"!hideTitle && deviceSize !== 's' ? (title | bbbTranslate) : ''\"\n        *ngIf=\"!useLayoutItemTextForControl && !hideToolbar; else searchField\"\n    >\n        <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer>\n\n        <ng-container *ngIf=\"!hideToolbar\">\n            <ng-container *ngFor=\"let btn of toolbarButtons; trackBy: _trackBy; let i = index\">\n                <fd-toolbar-separator\n                    fd-toolbar-item\n                    *ngIf=\"(btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile'\"\n                ></fd-toolbar-separator>\n                <fd-split-button\n                    *ngIf=\"btn.menu\"\n                    fd-toolbar-item\n                    [fdType]=\"'transparent'\"\n                    [mainAction]=\"{ mainActionTitle: (btn.text | bbbTranslate), keepMainAction: true }\"\n                >\n                    <fd-menu>\n                        <li fd-menu-item *ngFor=\"let btnCommand of btn.menu.items\" [ulvCommandHandler]=\"btnCommand\">\n                            <div fd-menu-interactive>\n                                <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\n                            </div>\n                        </li>\n                    </fd-menu>\n                </fd-split-button>\n\n                <ng-container *ngIf=\"btn !== '-' && btn.type !== 'seperator' && !btn.menu && btn.Command?._isVisible\">\n                    <ng-container *ngIf=\"btn?.Command?.CustomUi\">\n                        <bnrc-dynamic-form-toolbaritem\n                            fd-toolbar-item\n                            [ulvCommandHandler]=\"btn\"\n                            [component]=\"btn.Command?.CustomUi\"\n                            [context]=\"btn\"\n                            [isEnable]=\"btn.Command?._isEnable\"\n                            [deviceName]=\"deviceName\"\n                            [deviceSize]=\"deviceSize\"\n                        ></bnrc-dynamic-form-toolbaritem>\n                    </ng-container>\n                    <ng-container *ngIf=\"!btn?.Command?.CustomUi\">\n                        <ng-container *ngIf=\"inlineEditMode\">\n                            <button\n                                *ngIf=\"btn.text === ('New' | bbbTranslate)\"\n                                fd-button\n                                fd-toolbar-item\n                                [attr.fdOverflowPriority]=\"btn.Command?.IsBuiltin ? 'low' : ''\"\n                                [disabled]=\"btn.Command._isEnable === false ? true : false\"\n                                [fdType]=\"\n                                    !btn.Command._isEnable\n                                        ? 'transparent'\n                                        : btn.Command.JsonExtraProp?.Design || 'transparent'\n                                \"\n                                [glyph]=\"btn.Command.JsonExtraProp?.Icon\"\n                                [title]=\"btn.Command?.IsBuiltin ? (btn.text | bbbTranslate) : ''\"\n                                (click)=\"createNewInlineMo.emit()\"\n                            >\n                                <img\n                                    *ngIf=\"!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon\"\n                                    width=\"16\"\n                                    [src]=\"btn.icon\"\n                                />\n                                <span *ngIf=\"!btn.hideText\">{{ btn.text | bbbTranslate }}</span>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"!inlineEditMode\">\n                            <button\n                                fd-button\n                                fd-toolbar-item\n                                [attr.fdOverflowPriority]=\"btn.Command?.IsBuiltin ? 'always' : 'high'\"\n                                [ulvCommandHandler]=\"btn\"\n                                [disabled]=\"btn.Command._isEnable === false ? true : false\"\n                                [fdType]=\"\n                                    !btn.Command._isEnable\n                                        ? 'transparent'\n                                        : btn.Command.JsonExtraProp?.Design || 'transparent'\n                                \"\n                                [glyph]=\"btn.Command.JsonExtraProp?.Icon\"\n                                [title]=\"(btn.Command?.IsBuiltin ? btn.text : '') | bbbTranslate\"\n                            >\n                                <img\n                                    *ngIf=\"!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon\"\n                                    width=\"16\"\n                                    [src]=\"btn.icon\"\n                                />\n                                <span *ngIf=\"!btn.hideText\">{{ btn.text | bbbTranslate }}</span>\n                            </button></ng-container\n                        >\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n            <ng-content select=\"[fd-toolbar-item]\"></ng-content>\n\n            <ng-container *ngIf=\"gridSetting && gridSetting.Hidden !== true\">\n                <fdp-search-field\n                    *ngIf=\"enableSearch === true\"\n                    fd-toolbar-item\n                    placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n                    [suggestions]=\"[]\"\n                    [contentDensity]=\"contentDensity\"\n                    (searchSubmit)=\"onSearchSubmit($event)\"\n                ></fdp-search-field>\n\n                <!--        <fdp-button-->\n                <!--          fd-toolbar-item-->\n                <!--          [contentDensity]=\"contentDensity\"-->\n                <!--          buttonType=\"transparent\"-->\n                <!--          [label]=\"device === 'mobile' ? ('Filter' | bbbTranslate) : ''\"-->\n                <!--          [glyph]=\"'filter'\"-->\n                <!--        >-->\n                <!--        </fdp-button>-->\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [glyph]=\"'group-2'\"\n                    [attr.fdOverflowPriority]=\"'always'\"\n                    (click)=\"onGroupbySettings()\"\n                    [title]=\"'Groups' | bbbTranslate\"\n                ></button>\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [glyph]=\"'sort'\"\n                    [attr.fdOverflowPriority]=\"'always'\"\n                    (click)=\"onSortSettings()\"\n                    [title]=\"'Sort' | bbbTranslate\"\n                ></button>\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [glyph]=\"'action-settings'\"\n                    [attr.fdOverflowPriority]=\"'always'\"\n                    (click)=\"onColumnSettings()\"\n                    [title]=\"'Columns' | bbbTranslate\"\n                ></button>\n                <button\n                    *ngIf=\"allowInlineEdit && access.Edit\"\n                    fd-button\n                    fd-toolbar-item\n                    [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\n                    [glyph]=\"'edit'\"\n                    (click)=\"onEditMode()\"\n                    [attr.fdOverflowPriority]=\"'always'\"\n                    [title]=\"'Edit' | bbbTranslate\"\n                ></button>\n\n                <fd-split-button\n                    *ngIf=\"viewCollection && viewCollection.length > 1\"\n                    fd-toolbar-item\n                    [attr.fdOverflowPriority]=\"deviceSize === 's' ? 'always' : 'low'\"\n                    [fdType]=\"'transparent'\"\n                    [mainAction]=\"{\n                        keepMainAction: true,\n                        mainActionTitle: splitBtnTitle\n                    }\"\n                >\n                    <fd-menu>\n                        <li fd-menu-item *ngFor=\"let viewObject of viewCollection\">\n                            <div fd-menu-interactive (click)=\"onChangeView(viewObject)\">\n                                <span fd-menu-title>\n                                    <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\n                                </span>\n                            </div>\n                        </li>\n                    </fd-menu>\n                </fd-split-button>\n                <ng-template #splitBtnTitle>\n                    <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </fd-toolbar>\n    <ng-template #searchField>\n        <fd-toolbar *ngIf=\"enableSearch\">\n            <fdp-search-field\n                fd-toolbar-item\n                placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n                [suggestions]=\"[]\"\n                [contentDensity]=\"contentDensity\"\n                (searchSubmit)=\"onSearchSubmit($event)\"\n            ></fdp-search-field\n        ></fd-toolbar>\n    </ng-template>\n</ng-container>\n", styles: [":host{display:block;width:100%;position:relative}:host ::ng-deep .fd-toolbar{flex-wrap:nowrap!important}:host ::ng-deep .fd-toolbar{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.UlvCommandDirective, selector: "[ulvCommandHandler]", inputs: ["ulvCommandHandler"], outputs: ["commandClick"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i4$3.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "disabled", "mainActionTitle", "fdType", "expandButtonAriaLabel", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "directive", type: i8.PlatformContentDensityDeprecationDirective, selector: "        fdp-action-bar[contentDensity],        fdp-button[contentDensity],        fdp-object-list-item[contentDensity],        fdp-standard-list-item[contentDensity],        fdp-menu[contentDensity],        fdp-menu-button[contentDensity],        fdp-panel[contentDensity],        fdp-search-field[contentDensity],        fdp-split-menu-button[contentDensity],        fdp-file-uploader[contentDensity],        fdp-upload-collection[contentDensity],        fdp-table[contentDensity],        fdp-multi-input[contentDensity],        fdp-list[contentDensity],        fdp-slider[contentDensity],        fdp-time-picker[contentDensity],        fdp-textarea[contentDensity],        fdp-switch[contentDensity],        fdp-number-step-input[contentDensity],        fdp-select[contentDensity],        fdp-date-picker[contentDensity],        fdp-checkbox[contentDensity],        fdp-checkbox-group[contentDensity],        fdp-combobox[contentDensity],        fdp-datetime-picker[contentDensity],        fdp-input[contentDensity],        fdp-radio-group[contentDensity],        fdp-radio-button[contentDensity],        fdp-multi-combobox[contentDensity],        fdp-input-group-addon-body[contentDensity],        fdp-input-group[contentDensity],        fdp-value-help-dialog[contentDensity],        fdp-filter-single-select[contentDensity],        fdp-filter-multi-select[contentDensity],        fdp-filter-custom[contentDensity]    " }, { kind: "component", type: i7.SearchFieldComponent, selector: "fdp-search-field", inputs: ["placeholder", "mobile", "mobileConfig", "disableRefresh", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ulv-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <fd-toolbar\n        #toolbar\n        [shouldOverflow]=\"deviceSize === 's'\"\n        [hasTitle]=\"!hideTitle\"\n        [clearBorder]=\"true\"\n        [forceOverflow]=\"true\"\n        [title]=\"!hideTitle ? (title | bbbTranslate) : ''\"\n        *ngIf=\"!useLayoutItemTextForControl && !hideToolbar; else searchField\"\n    >\n        <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer>\n\n        <ng-container *ngIf=\"!hideToolbar\">\n            <ng-container *ngFor=\"let btn of toolbarButtons; trackBy: _trackBy; let i = index\">\n                <fd-toolbar-separator\n                    fd-toolbar-item\n                    *ngIf=\"(btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile'\"\n                ></fd-toolbar-separator>\n                <fd-split-button\n                    *ngIf=\"btn.menu; else btnTemplate\"\n                    fd-toolbar-item\n                    [fdType]=\"'transparent'\"\n                    [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\n                >\n                    <fd-menu>\n                        <li fd-menu-item *ngFor=\"let btnCommand of btn.menu.items\" [ulvCommandHandler]=\"btnCommand\">\n                            <div fd-menu-interactive>\n                                <span fd-menu-title>{{ btnCommand.text }}</span>\n                            </div>\n                        </li>\n                    </fd-menu>\n                </fd-split-button>\n                <ng-template #btnTemplate>\n                    <ng-container *ngIf=\"btn.type !== 'seperator' && btn.Command?._isVisible\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                btn?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\n                                context: { $implicit: btn }\n                            \"\n                        ></ng-container>\n                    </ng-container>\n                </ng-template>\n            </ng-container>\n            <ng-content select=\"[fd-toolbar-item]\"></ng-content>\n\n            <ng-container *ngIf=\"gridSetting && gridSetting.Hidden !== true\">\n                <fdp-search-field\n                    *ngIf=\"enableSearch === true\"\n                    fd-toolbar-item\n                    placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n                    [suggestions]=\"[]\"\n                    [contentDensity]=\"contentDensity\"\n                    (searchSubmit)=\"onSearchSubmit($event)\"\n                ></fdp-search-field>\n\n                <!--        <fdp-button-->\n                <!--          fd-toolbar-item-->\n                <!--          [contentDensity]=\"contentDensity\"-->\n                <!--          buttonType=\"transparent\"-->\n                <!--          [label]=\"device === 'mobile' ? ('Filter' | bbbTranslate) : ''\"-->\n                <!--          [glyph]=\"'filter'\"-->\n                <!--        >-->\n                <!--        </fdp-button>-->\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [glyph]=\"'group-2'\"\n                    [attr.fdOverflowGroup]=\"1\"\n                    [attr.fdOverflowPriority]=\"'low'\"\n                    (click)=\"onGroupbySettings()\"\n                    [title]=\"'Groups' | bbbTranslate\"\n                ></button>\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [attr.fdOverflowGroup]=\"1\"\n                    [glyph]=\"'sort'\"\n                    [attr.fdOverflowPriority]=\"'low'\"\n                    (click)=\"onSortSettings()\"\n                    [title]=\"'Sort' | bbbTranslate\"\n                ></button>\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [attr.fdOverflowGroup]=\"1\"\n                    [glyph]=\"'action-settings'\"\n                    [attr.fdOverflowPriority]=\"'low'\"\n                    (click)=\"onColumnSettings()\"\n                    [title]=\"'Columns' | bbbTranslate\"\n                ></button>\n                <button\n                    *ngIf=\"allowInlineEdit && access.Edit\"\n                    fd-button\n                    fd-toolbar-item\n                    [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\n                    [glyph]=\"'edit'\"\n                    (click)=\"onEditMode()\"\n                    [attr.fdOverflowGroup]=\"2\"\n                    [attr.fdOverflowPriority]=\"'low'\"\n                    [title]=\"'Edit' | bbbTranslate\"\n                ></button>\n\n                <fd-split-button\n                    *ngIf=\"viewCollection && viewCollection.length > 1\"\n                    fd-toolbar-item\n                    [attr.fdOverflowGroup]=\"2\"\n                    [attr.fdOverflowPriority]=\"'low'\"\n                    [fdType]=\"'transparent'\"\n                    [mainAction]=\"{\n                        keepMainAction: true,\n                        mainActionTitle: splitBtnTitle\n                    }\"\n                >\n                    <fd-menu>\n                        <li fd-menu-item *ngFor=\"let viewObject of viewCollection\">\n                            <div fd-menu-interactive (click)=\"onChangeView(viewObject)\">\n                                <span fd-menu-title>\n                                    <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\n                                </span>\n                            </div>\n                        </li>\n                    </fd-menu>\n                </fd-split-button>\n                <ng-template #splitBtnTitle>\n                    <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </fd-toolbar>\n    <ng-template #searchField>\n        <fd-toolbar *ngIf=\"enableSearch\">\n            <fdp-search-field\n                fd-toolbar-item\n                placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n                [suggestions]=\"[]\"\n                [contentDensity]=\"contentDensity\"\n                (searchSubmit)=\"onSearchSubmit($event)\"\n            ></fdp-search-field\n        ></fd-toolbar>\n    </ng-template>\n</ng-container>\n<ng-template #defaultButtonTemplate let-btn>\n    <button\n        *ngIf=\"inlineEditMode && btn.text === ('New' | bbbTranslate); else tplToolbarBtn\"\n        fd-button\n        fd-toolbar-item\n        [attr.fdOverflowPriority]=\"btn.Command?.IsBuiltin ? 'low' : ''\"\n        [disabled]=\"btn.Command._isEnable === false ? true : false\"\n        [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\n        [glyph]=\"btn.Command.JsonExtraProp?.Icon\"\n        [title]=\"btn.Command?.IsBuiltin ? btn.text : ''\"\n        (click)=\"createNewInlineMo.emit()\"\n    >\n        <img\n            *ngIf=\"!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon\"\n            width=\"16\"\n            [src]=\"btn.icon\"\n        />\n        <span *ngIf=\"!btn.hideText\">{{ btn.text }}</span>\n    </button>\n    <ng-template #tplToolbarBtn>\n        <button\n            fd-button\n            fd-toolbar-item\n            [attr.fdOverflowPriority]=\"btn.Command?.IsBuiltin ? 'low' : ''\"\n            [ulvCommandHandler]=\"btn\"\n            [disabled]=\"btn.Command._isEnable === false ? true : false\"\n            [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\n            [glyph]=\"btn.Command.JsonExtraProp?.Icon\"\n            [title]=\"btn.Command?.IsBuiltin ? btn.text : ''\"\n        >\n            <img\n                *ngIf=\"!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon\"\n                width=\"16\"\n                [src]=\"btn.icon\"\n            />\n            <span *ngIf=\"!btn.hideText\">{{ btn.text }}</span>\n        </button>\n    </ng-template>\n</ng-template>\n<ng-template #customButtonTemplate let-btn>\n    <bnrc-dynamic-form-toolbaritem\n        fd-toolbar-item\n        [ulvCommandHandler]=\"btn\"\n        [component]=\"btn.Command?.CustomUi\"\n        [context]=\"btn\"\n        [isEnable]=\"btn.Command?._isEnable\"\n        [deviceName]=\"deviceName\"\n    ></bnrc-dynamic-form-toolbaritem>\n</ng-template>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .fd-toolbar{flex-wrap:nowrap!important}:host ::ng-deep .fd-toolbar{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}\n"] }]
+            args: [{ selector: 'bsu-ulv-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <fd-toolbar\n        #toolbar\n        [shouldOverflow]=\"deviceSize === 's'\"\n        [hasTitle]=\"!hideTitle\"\n        [clearBorder]=\"true\"\n        [forceOverflow]=\"false\"\n        [title]=\"!hideTitle && deviceSize !== 's' ? (title | bbbTranslate) : ''\"\n        *ngIf=\"!useLayoutItemTextForControl && !hideToolbar; else searchField\"\n    >\n        <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer>\n\n        <ng-container *ngIf=\"!hideToolbar\">\n            <ng-container *ngFor=\"let btn of toolbarButtons; trackBy: _trackBy; let i = index\">\n                <fd-toolbar-separator\n                    fd-toolbar-item\n                    *ngIf=\"(btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile'\"\n                ></fd-toolbar-separator>\n                <fd-split-button\n                    *ngIf=\"btn.menu\"\n                    fd-toolbar-item\n                    [fdType]=\"'transparent'\"\n                    [mainAction]=\"{ mainActionTitle: (btn.text | bbbTranslate), keepMainAction: true }\"\n                >\n                    <fd-menu>\n                        <li fd-menu-item *ngFor=\"let btnCommand of btn.menu.items\" [ulvCommandHandler]=\"btnCommand\">\n                            <div fd-menu-interactive>\n                                <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\n                            </div>\n                        </li>\n                    </fd-menu>\n                </fd-split-button>\n\n                <ng-container *ngIf=\"btn !== '-' && btn.type !== 'seperator' && !btn.menu && btn.Command?._isVisible\">\n                    <ng-container *ngIf=\"btn?.Command?.CustomUi\">\n                        <bnrc-dynamic-form-toolbaritem\n                            fd-toolbar-item\n                            [ulvCommandHandler]=\"btn\"\n                            [component]=\"btn.Command?.CustomUi\"\n                            [context]=\"btn\"\n                            [isEnable]=\"btn.Command?._isEnable\"\n                            [deviceName]=\"deviceName\"\n                            [deviceSize]=\"deviceSize\"\n                        ></bnrc-dynamic-form-toolbaritem>\n                    </ng-container>\n                    <ng-container *ngIf=\"!btn?.Command?.CustomUi\">\n                        <ng-container *ngIf=\"inlineEditMode\">\n                            <button\n                                *ngIf=\"btn.text === ('New' | bbbTranslate)\"\n                                fd-button\n                                fd-toolbar-item\n                                [attr.fdOverflowPriority]=\"btn.Command?.IsBuiltin ? 'low' : ''\"\n                                [disabled]=\"btn.Command._isEnable === false ? true : false\"\n                                [fdType]=\"\n                                    !btn.Command._isEnable\n                                        ? 'transparent'\n                                        : btn.Command.JsonExtraProp?.Design || 'transparent'\n                                \"\n                                [glyph]=\"btn.Command.JsonExtraProp?.Icon\"\n                                [title]=\"btn.Command?.IsBuiltin ? (btn.text | bbbTranslate) : ''\"\n                                (click)=\"createNewInlineMo.emit()\"\n                            >\n                                <img\n                                    *ngIf=\"!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon\"\n                                    width=\"16\"\n                                    [src]=\"btn.icon\"\n                                />\n                                <span *ngIf=\"!btn.hideText\">{{ btn.text | bbbTranslate }}</span>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"!inlineEditMode\">\n                            <button\n                                fd-button\n                                fd-toolbar-item\n                                [attr.fdOverflowPriority]=\"btn.Command?.IsBuiltin ? 'always' : 'high'\"\n                                [ulvCommandHandler]=\"btn\"\n                                [disabled]=\"btn.Command._isEnable === false ? true : false\"\n                                [fdType]=\"\n                                    !btn.Command._isEnable\n                                        ? 'transparent'\n                                        : btn.Command.JsonExtraProp?.Design || 'transparent'\n                                \"\n                                [glyph]=\"btn.Command.JsonExtraProp?.Icon\"\n                                [title]=\"(btn.Command?.IsBuiltin ? btn.text : '') | bbbTranslate\"\n                            >\n                                <img\n                                    *ngIf=\"!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon\"\n                                    width=\"16\"\n                                    [src]=\"btn.icon\"\n                                />\n                                <span *ngIf=\"!btn.hideText\">{{ btn.text | bbbTranslate }}</span>\n                            </button></ng-container\n                        >\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n            <ng-content select=\"[fd-toolbar-item]\"></ng-content>\n\n            <ng-container *ngIf=\"gridSetting && gridSetting.Hidden !== true\">\n                <fdp-search-field\n                    *ngIf=\"enableSearch === true\"\n                    fd-toolbar-item\n                    placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n                    [suggestions]=\"[]\"\n                    [contentDensity]=\"contentDensity\"\n                    (searchSubmit)=\"onSearchSubmit($event)\"\n                ></fdp-search-field>\n\n                <!--        <fdp-button-->\n                <!--          fd-toolbar-item-->\n                <!--          [contentDensity]=\"contentDensity\"-->\n                <!--          buttonType=\"transparent\"-->\n                <!--          [label]=\"device === 'mobile' ? ('Filter' | bbbTranslate) : ''\"-->\n                <!--          [glyph]=\"'filter'\"-->\n                <!--        >-->\n                <!--        </fdp-button>-->\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [glyph]=\"'group-2'\"\n                    [attr.fdOverflowPriority]=\"'always'\"\n                    (click)=\"onGroupbySettings()\"\n                    [title]=\"'Groups' | bbbTranslate\"\n                ></button>\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [glyph]=\"'sort'\"\n                    [attr.fdOverflowPriority]=\"'always'\"\n                    (click)=\"onSortSettings()\"\n                    [title]=\"'Sort' | bbbTranslate\"\n                ></button>\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    [contentDensity]=\"contentDensity\"\n                    fdType=\"transparent\"\n                    [glyph]=\"'action-settings'\"\n                    [attr.fdOverflowPriority]=\"'always'\"\n                    (click)=\"onColumnSettings()\"\n                    [title]=\"'Columns' | bbbTranslate\"\n                ></button>\n                <button\n                    *ngIf=\"allowInlineEdit && access.Edit\"\n                    fd-button\n                    fd-toolbar-item\n                    [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\n                    [glyph]=\"'edit'\"\n                    (click)=\"onEditMode()\"\n                    [attr.fdOverflowPriority]=\"'always'\"\n                    [title]=\"'Edit' | bbbTranslate\"\n                ></button>\n\n                <fd-split-button\n                    *ngIf=\"viewCollection && viewCollection.length > 1\"\n                    fd-toolbar-item\n                    [attr.fdOverflowPriority]=\"deviceSize === 's' ? 'always' : 'low'\"\n                    [fdType]=\"'transparent'\"\n                    [mainAction]=\"{\n                        keepMainAction: true,\n                        mainActionTitle: splitBtnTitle\n                    }\"\n                >\n                    <fd-menu>\n                        <li fd-menu-item *ngFor=\"let viewObject of viewCollection\">\n                            <div fd-menu-interactive (click)=\"onChangeView(viewObject)\">\n                                <span fd-menu-title>\n                                    <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\n                                </span>\n                            </div>\n                        </li>\n                    </fd-menu>\n                </fd-split-button>\n                <ng-template #splitBtnTitle>\n                    <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </fd-toolbar>\n    <ng-template #searchField>\n        <fd-toolbar *ngIf=\"enableSearch\">\n            <fdp-search-field\n                fd-toolbar-item\n                placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n                [suggestions]=\"[]\"\n                [contentDensity]=\"contentDensity\"\n                (searchSubmit)=\"onSearchSubmit($event)\"\n            ></fdp-search-field\n        ></fd-toolbar>\n    </ng-template>\n</ng-container>\n", styles: [":host{display:block;width:100%;position:relative}:host ::ng-deep .fd-toolbar{flex-wrap:nowrap!important}:host ::ng-deep .fd-toolbar{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _toolbar: [{
                 type: ViewChild,
                 args: [ToolbarComponent]
@@ -3732,10 +3744,10 @@ class UlvContextMenuComponent extends BaseComponent {
     }
 }
 UlvContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvContextMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-UlvContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: { onlyOverflow: "onlyOverflow", deviceName: "deviceName", menuItems: "menuItems", allColumns: "allColumns", index: "index", mo: "mo", styleIndex: "styleIndex", conditionalFormats: "conditionalFormats", disableOverflowContextMenu: "disableOverflowContextMenu", footerMode: "footerMode" }, outputs: { commandClick: "commandClick" }, host: { properties: { "class.disableOverflow": "this._disableOverflow" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"footerMode; else contextTemplate\">\n    <div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\n        <div fd-bar-middle *ngIf=\"overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <div fd-bar-right *ngIf=\"!overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <ng-template #footerToolbarTpl>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngFor=\"let cmd of menuItems\">\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </ng-container>\n            </fd-toolbar>\n        </ng-template>\n    </div>\n</ng-container>\n<ng-template #contextTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\n            context: { $implicit: menuItems, index: index }\n        \"\n    ></ng-container>\n</ng-template>\n\n<ng-template #simpleCommands let-commands let-index=\"index\">\n    <ng-container *ngFor=\"let cmd of commands\">\n        <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #overflowCommands let-commands let-index=\"index\">\n    <fd-popover placement=\"bottom\" [(isOpen)]=\"isOpenOverflow\" [closeOnOutsideClick]=\"true\" [noArrow]=\"true\">\n        <fd-popover-control #popover>\n            <button fd-button (click)=\"onOpenOverflow($event)\" [fdType]=\"'transparent'\" [glyph]=\"'overflow'\"></button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul fd-list>\n                <li fd-list-item *ngFor=\"let cmd of commands\">\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #menuButtonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd }\"\n    ></ng-container>\n</ng-template>\n<ng-template #menuTemplate let-cmd>\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\n        <fd-menu>\n            <li\n                fd-menu-item\n                *ngFor=\"let btnCommand of cmd.menu.items\"\n                #liEl\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"cmd.text\"\n                [hostEl]=\"liEl\"\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\n            >\n                <div fd-menu-interactive>\n                    <span fd-menu-title>{{ btnCommand.text }}</span>\n                </div>\n            </li>\n        </fd-menu>\n    </fd-split-button>\n</ng-template>\n<ng-template #buttonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\n            context: { $implicit: cmd }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #defaultButtonTemplate let-cmd>\n    <button\n        fd-button\n        #btnEl\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\n        [label]=\"cmd.text\"\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\n        [ulvCommandHandler]=\"cmd\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [dbName]=\"cmd.text\"\n        [hostEl]=\"btnEl\"\n        (commandClick)=\"onCommandClick($event)\"\n    >\n        <img *ngIf=\"!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon\" [src]=\"cmd.icon\" />\n    </button>\n</ng-template>\n<ng-template #customButtonTemplate let-cmd>\n    <div\n        #hostEl\n        [dbName]=\"cmd.text\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [hostEl]=\"hostEl\"\n        [styleIndex]=\"styleIndex\"\n    >\n        <bnrc-dynamic-form-toolbaritem\n            fd-toolbar-item\n            [ulvCommandHandler]=\"cmd\"\n            [component]=\"cmd.Command?.CustomUi\"\n            [mo]=\"mo\"\n            [context]=\"cmd\"\n            [showText]=\"disableOverflowContextMenu === false\"\n            [deviceName]=\"deviceName\"\n            [index]=\"index\"\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\n            [allColumns]=\"allColumns\"\n            (btnClick)=\"onCommandClick($event)\"\n        ></bnrc-dynamic-form-toolbaritem>\n    </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;row-gap:5px}:host ::ng-deep button{margin-top:0!important}:host ::ng-deep .fd-popover-custom{max-width:none}:host.disableOverflow{column-gap:5px}button{align-items:center}button div{display:flex}button ::ng-deep span{height:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.UlvCommandDirective, selector: "[ulvCommandHandler]", inputs: ["ulvCommandHandler"], outputs: ["commandClick"] }, { kind: "component", type: i3$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i3$1.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.DeprecatedBarContentDensityDirective, selector: "[fd-bar][cozy]" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i4$3.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "disabled", "mainActionTitle", "fdType", "expandButtonAriaLabel", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UlvContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: { onlyOverflow: "onlyOverflow", deviceName: "deviceName", menuItems: "menuItems", allColumns: "allColumns", index: "index", mo: "mo", styleIndex: "styleIndex", conditionalFormats: "conditionalFormats", disableOverflowContextMenu: "disableOverflowContextMenu", footerMode: "footerMode" }, outputs: { commandClick: "commandClick" }, host: { properties: { "class.disableOverflow": "this._disableOverflow" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"footerMode; else contextTemplate\">\n    <div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\n        <div fd-bar-middle *ngIf=\"overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <div fd-bar-right *ngIf=\"!overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <ng-template #footerToolbarTpl>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngFor=\"let cmd of menuItems\">\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </ng-container>\n            </fd-toolbar>\n        </ng-template>\n    </div>\n</ng-container>\n<ng-template #contextTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\n            context: { $implicit: menuItems, index: index }\n        \"\n    ></ng-container>\n</ng-template>\n\n<ng-template #simpleCommands let-commands let-index=\"index\">\n    <ng-container *ngFor=\"let cmd of commands\">\n        <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #overflowCommands let-commands let-index=\"index\">\n    <fd-popover placement=\"bottom\" [(isOpen)]=\"isOpenOverflow\" [closeOnOutsideClick]=\"true\" [noArrow]=\"true\">\n        <fd-popover-control #popover>\n            <button fd-button (click)=\"onOpenOverflow($event)\" [fdType]=\"'transparent'\" [glyph]=\"'overflow'\"></button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul fd-list>\n                <li fd-list-item *ngFor=\"let cmd of commands\">\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #menuButtonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd }\"\n    ></ng-container>\n</ng-template>\n<ng-template #menuTemplate let-cmd>\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\n        <fd-menu>\n            <li\n                fd-menu-item\n                *ngFor=\"let btnCommand of cmd.menu.items\"\n                #liEl\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"cmd.text\"\n                [hostEl]=\"liEl\"\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\n            >\n                <div fd-menu-interactive>\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\n                </div>\n            </li>\n        </fd-menu>\n    </fd-split-button>\n</ng-template>\n<ng-template #buttonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\n            context: { $implicit: cmd }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #defaultButtonTemplate let-cmd>\n    <button\n        fd-button\n        #btnEl\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\n        [label]=\"cmd.text | bbbTranslate\"\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\n        [ulvCommandHandler]=\"cmd\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [dbName]=\"cmd.text\"\n        [hostEl]=\"btnEl\"\n        (commandClick)=\"onCommandClick($event)\"\n    >\n        <img *ngIf=\"!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon\" [src]=\"cmd.icon\" />\n    </button>\n</ng-template>\n<ng-template #customButtonTemplate let-cmd>\n    <div\n        #hostEl\n        [dbName]=\"cmd.text\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [hostEl]=\"hostEl\"\n        [styleIndex]=\"styleIndex\"\n    >\n        <bnrc-dynamic-form-toolbaritem\n            fd-toolbar-item\n            [ulvCommandHandler]=\"cmd\"\n            [component]=\"cmd.Command?.CustomUi\"\n            [mo]=\"mo\"\n            [context]=\"cmd\"\n            [showText]=\"disableOverflowContextMenu === false\"\n            [deviceName]=\"deviceName\"\n            [index]=\"index\"\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\n            [allColumns]=\"allColumns\"\n            (btnClick)=\"onCommandClick($event)\"\n        ></bnrc-dynamic-form-toolbaritem>\n    </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;row-gap:5px}:host ::ng-deep button{margin-top:0!important}:host ::ng-deep .fd-popover-custom{max-width:none}:host.disableOverflow{column-gap:5px}button{align-items:center}button div{display:flex}button ::ng-deep span{height:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.UlvCommandDirective, selector: "[ulvCommandHandler]", inputs: ["ulvCommandHandler"], outputs: ["commandClick"] }, { kind: "component", type: i3$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i3$1.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.DeprecatedBarContentDensityDirective, selector: "[fd-bar][cozy]" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i4$3.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "disabled", "mainActionTitle", "fdType", "expandButtonAriaLabel", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ulv-context-menu,[ulvContextMenu]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"footerMode; else contextTemplate\">\n    <div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\n        <div fd-bar-middle *ngIf=\"overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <div fd-bar-right *ngIf=\"!overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <ng-template #footerToolbarTpl>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngFor=\"let cmd of menuItems\">\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </ng-container>\n            </fd-toolbar>\n        </ng-template>\n    </div>\n</ng-container>\n<ng-template #contextTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\n            context: { $implicit: menuItems, index: index }\n        \"\n    ></ng-container>\n</ng-template>\n\n<ng-template #simpleCommands let-commands let-index=\"index\">\n    <ng-container *ngFor=\"let cmd of commands\">\n        <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #overflowCommands let-commands let-index=\"index\">\n    <fd-popover placement=\"bottom\" [(isOpen)]=\"isOpenOverflow\" [closeOnOutsideClick]=\"true\" [noArrow]=\"true\">\n        <fd-popover-control #popover>\n            <button fd-button (click)=\"onOpenOverflow($event)\" [fdType]=\"'transparent'\" [glyph]=\"'overflow'\"></button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul fd-list>\n                <li fd-list-item *ngFor=\"let cmd of commands\">\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #menuButtonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd }\"\n    ></ng-container>\n</ng-template>\n<ng-template #menuTemplate let-cmd>\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\n        <fd-menu>\n            <li\n                fd-menu-item\n                *ngFor=\"let btnCommand of cmd.menu.items\"\n                #liEl\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"cmd.text\"\n                [hostEl]=\"liEl\"\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\n            >\n                <div fd-menu-interactive>\n                    <span fd-menu-title>{{ btnCommand.text }}</span>\n                </div>\n            </li>\n        </fd-menu>\n    </fd-split-button>\n</ng-template>\n<ng-template #buttonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\n            context: { $implicit: cmd }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #defaultButtonTemplate let-cmd>\n    <button\n        fd-button\n        #btnEl\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\n        [label]=\"cmd.text\"\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\n        [ulvCommandHandler]=\"cmd\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [dbName]=\"cmd.text\"\n        [hostEl]=\"btnEl\"\n        (commandClick)=\"onCommandClick($event)\"\n    >\n        <img *ngIf=\"!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon\" [src]=\"cmd.icon\" />\n    </button>\n</ng-template>\n<ng-template #customButtonTemplate let-cmd>\n    <div\n        #hostEl\n        [dbName]=\"cmd.text\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [hostEl]=\"hostEl\"\n        [styleIndex]=\"styleIndex\"\n    >\n        <bnrc-dynamic-form-toolbaritem\n            fd-toolbar-item\n            [ulvCommandHandler]=\"cmd\"\n            [component]=\"cmd.Command?.CustomUi\"\n            [mo]=\"mo\"\n            [context]=\"cmd\"\n            [showText]=\"disableOverflowContextMenu === false\"\n            [deviceName]=\"deviceName\"\n            [index]=\"index\"\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\n            [allColumns]=\"allColumns\"\n            (btnClick)=\"onCommandClick($event)\"\n        ></bnrc-dynamic-form-toolbaritem>\n    </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;row-gap:5px}:host ::ng-deep button{margin-top:0!important}:host ::ng-deep .fd-popover-custom{max-width:none}:host.disableOverflow{column-gap:5px}button{align-items:center}button div{display:flex}button ::ng-deep span{height:auto!important}\n"] }]
+            args: [{ selector: 'bsu-ulv-context-menu,[ulvContextMenu]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"footerMode; else contextTemplate\">\n    <div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\n        <div fd-bar-middle *ngIf=\"overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <div fd-bar-right *ngIf=\"!overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <ng-template #footerToolbarTpl>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngFor=\"let cmd of menuItems\">\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </ng-container>\n            </fd-toolbar>\n        </ng-template>\n    </div>\n</ng-container>\n<ng-template #contextTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\n            context: { $implicit: menuItems, index: index }\n        \"\n    ></ng-container>\n</ng-template>\n\n<ng-template #simpleCommands let-commands let-index=\"index\">\n    <ng-container *ngFor=\"let cmd of commands\">\n        <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #overflowCommands let-commands let-index=\"index\">\n    <fd-popover placement=\"bottom\" [(isOpen)]=\"isOpenOverflow\" [closeOnOutsideClick]=\"true\" [noArrow]=\"true\">\n        <fd-popover-control #popover>\n            <button fd-button (click)=\"onOpenOverflow($event)\" [fdType]=\"'transparent'\" [glyph]=\"'overflow'\"></button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul fd-list>\n                <li fd-list-item *ngFor=\"let cmd of commands\">\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #menuButtonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd }\"\n    ></ng-container>\n</ng-template>\n<ng-template #menuTemplate let-cmd>\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\n        <fd-menu>\n            <li\n                fd-menu-item\n                *ngFor=\"let btnCommand of cmd.menu.items\"\n                #liEl\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"cmd.text\"\n                [hostEl]=\"liEl\"\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\n            >\n                <div fd-menu-interactive>\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\n                </div>\n            </li>\n        </fd-menu>\n    </fd-split-button>\n</ng-template>\n<ng-template #buttonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\n            context: { $implicit: cmd }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #defaultButtonTemplate let-cmd>\n    <button\n        fd-button\n        #btnEl\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\n        [label]=\"cmd.text | bbbTranslate\"\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\n        [ulvCommandHandler]=\"cmd\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [dbName]=\"cmd.text\"\n        [hostEl]=\"btnEl\"\n        (commandClick)=\"onCommandClick($event)\"\n    >\n        <img *ngIf=\"!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon\" [src]=\"cmd.icon\" />\n    </button>\n</ng-template>\n<ng-template #customButtonTemplate let-cmd>\n    <div\n        #hostEl\n        [dbName]=\"cmd.text\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [hostEl]=\"hostEl\"\n        [styleIndex]=\"styleIndex\"\n    >\n        <bnrc-dynamic-form-toolbaritem\n            fd-toolbar-item\n            [ulvCommandHandler]=\"cmd\"\n            [component]=\"cmd.Command?.CustomUi\"\n            [mo]=\"mo\"\n            [context]=\"cmd\"\n            [showText]=\"disableOverflowContextMenu === false\"\n            [deviceName]=\"deviceName\"\n            [index]=\"index\"\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\n            [allColumns]=\"allColumns\"\n            (btnClick)=\"onCommandClick($event)\"\n        ></bnrc-dynamic-form-toolbaritem>\n    </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;row-gap:5px}:host ::ng-deep button{margin-top:0!important}:host ::ng-deep .fd-popover-custom{max-width:none}:host.disableOverflow{column-gap:5px}button{align-items:center}button div{display:flex}button ::ng-deep span{height:auto!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { onlyOverflow: [{
                 type: Input
             }], deviceName: [{
@@ -4209,10 +4221,10 @@ class FileViewerContentComponent extends BaseComponent {
     }
 }
 FileViewerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerContentComponent, deps: [{ token: i2.PictureFieldSourcePipe }], target: i0.ɵɵFactoryTarget.Component });
-FileViewerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: { fillWidth: "fillWidth", imageOnly: "imageOnly", cardMode: "cardMode", showFooter: "showFooter", showContent: "showContent", width: "width", cardContentHeight: "cardContentHeight", file: "file" }, usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics\">\r\n            <bsu-mask></bsu-mask>\r\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    <bsu-blob-viewer [file]=\"file\" [style.width]=\"width\"></bsu-blob-viewer>\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\">\r\n        <fd-card-content style=\"text-align: center\" [style.height]=\"cardContentHeight\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: ["file"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FileViewerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: { fillWidth: "fillWidth", imageOnly: "imageOnly", cardMode: "cardMode", showFooter: "showFooter", showContent: "showContent", width: "width", deviceSize: "deviceSize", cardContentHeight: "cardContentHeight", file: "file" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\n></ng-container>\n\n<ng-template #showImage>\n    <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\">\n        <div class=\"pics\">\n            <bsu-mask></bsu-mask>\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" />\n        </div>\n    </div>\n</ng-template>\n<ng-template #blobViewer>\n    <bsu-blob-viewer\n        [file]=\"file\"\n        [style.width]=\"width\"\n        fillEmptySpace\n        [disable]=\"deviceSize !== 's'\"\n        [decrement]=\"'25px'\"\n    ></bsu-blob-viewer>\n</ng-template>\n<ng-template #cardTpl>\n    <fd-card class=\"media\">\n        <fd-card-content style=\"text-align: center\" [style.height]=\"cardContentHeight\">\n            <ng-container\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\n            ></ng-container>\n        </fd-card-content>\n    </fd-card>\n</ng-template>\n<ng-template #thumbnailTpl>\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\n</ng-template>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["decrement", "disable"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: ["file"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-file-viewer-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics\">\r\n            <bsu-mask></bsu-mask>\r\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    <bsu-blob-viewer [file]=\"file\" [style.width]=\"width\"></bsu-blob-viewer>\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\">\r\n        <fd-card-content style=\"text-align: center\" [style.height]=\"cardContentHeight\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%}\n"] }]
+            args: [{ selector: 'bsu-file-viewer-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\n></ng-container>\n\n<ng-template #showImage>\n    <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\">\n        <div class=\"pics\">\n            <bsu-mask></bsu-mask>\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" />\n        </div>\n    </div>\n</ng-template>\n<ng-template #blobViewer>\n    <bsu-blob-viewer\n        [file]=\"file\"\n        [style.width]=\"width\"\n        fillEmptySpace\n        [disable]=\"deviceSize !== 's'\"\n        [decrement]=\"'25px'\"\n    ></bsu-blob-viewer>\n</ng-template>\n<ng-template #cardTpl>\n    <fd-card class=\"media\">\n        <fd-card-content style=\"text-align: center\" [style.height]=\"cardContentHeight\">\n            <ng-container\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\n            ></ng-container>\n        </fd-card-content>\n    </fd-card>\n</ng-template>\n<ng-template #thumbnailTpl>\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\n</ng-template>\n", styles: [":host{display:block;height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.PictureFieldSourcePipe }]; }, propDecorators: { fillWidth: [{
                 type: Input
             }], imageOnly: [{
@@ -4225,6 +4237,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }], width: [{
                 type: Input
+            }], deviceSize: [{
+                type: Input
             }], cardContentHeight: [{
                 type: Input
             }], file: [{
@@ -4258,10 +4272,10 @@ class FileViewerComponent extends BaseComponent {
     }
 }
 FileViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-FileViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerComponent, selector: "bsu-file-viewer", viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dialog #dialogTpl class=\"vertical\">\r\n    <fd-dialog-header>\r\n        <ng-template fdTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Fit image size\"\r\n                    [glyph]=\"'resize'\"\r\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n                    (click)=\"fillWidth = !fillWidth\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body #fdbody>\r\n        <div #gallery class=\"gallery inDialog\" *ngIf=\"isImageGallery\">\r\n            <ng-container *ngFor=\"let media of files; let i = index\">\r\n                <bsu-file-viewer-content [file]=\"selectedFile\" [imageOnly]=\"true\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"gallery\" *ngIf=\"!isImageGallery\">\r\n            <ng-container *ngIf=\"selectedFile\">\r\n                <bsu-file-viewer-content [fillWidth]=\"fillWidth\" [file]=\"selectedFile\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div *ngIf=\"deviceSize !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\r\n        </div>\r\n    </fd-dialog-body>\r\n</fd-dialog>\r\n<ng-template #layoutGridTpl let-files>\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow *ngIf=\"files\">\r\n            <div\r\n                *ngFor=\"let file of files; let i = index\"\r\n                [fdLayoutGridCol]=\"6\"\r\n                [colMd]=\"3\"\r\n                [colLg]=\"2\"\r\n                [colXl]=\"2\"\r\n                (click)=\"onMedaiClick(file, i)\"\r\n            >\r\n                <bsu-file-viewer-content\r\n                    [cardMode]=\"true\"\r\n                    [cardContentHeight]=\"'120px'\"\r\n                    [file]=\"file\"\r\n                ></bsu-file-viewer-content>\r\n            </div>\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse;padding:0}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1}fd-dialog.vertical .thumbnail{border:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4$5.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$5.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$5.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "cardMode", "showFooter", "showContent", "width", "cardContentHeight", "file"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FileViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerComponent, selector: "bsu-file-viewer", viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dialog #dialogTpl class=\"vertical\">\n    <fd-dialog-header>\n        <ng-template fdTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-button-bar\n                    ariaLabel=\"Fit image size\"\n                    [glyph]=\"'resize'\"\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                    (click)=\"fillWidth = !fillWidth\"\n                ></fd-button-bar>\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body #fdbody>\n        <div #gallery class=\"gallery inDialog\" *ngIf=\"isImageGallery\">\n            <ng-container *ngFor=\"let media of files; let i = index\">\n                <bsu-file-viewer-content\n                    [deviceSize]=\"deviceSize\"\n                    [file]=\"selectedFile\"\n                    [imageOnly]=\"true\"\n                ></bsu-file-viewer-content>\n            </ng-container>\n        </div>\n        <div class=\"gallery\" *ngIf=\"!isImageGallery\">\n            <ng-container *ngIf=\"selectedFile\">\n                <bsu-file-viewer-content\n                    [deviceSize]=\"deviceSize\"\n                    [fillWidth]=\"fillWidth\"\n                    [file]=\"selectedFile\"\n                ></bsu-file-viewer-content>\n            </ng-container>\n        </div>\n        <div *ngIf=\"deviceSize !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\n        </div>\n    </fd-dialog-body>\n</fd-dialog>\n<ng-template #layoutGridTpl let-files>\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"files\">\n            <div\n                *ngFor=\"let file of files; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(file, i)\"\n            >\n                <bsu-file-viewer-content\n                    [cardMode]=\"true\"\n                    [deviceSize]=\"deviceSize\"\n                    [cardContentHeight]=\"'120px'\"\n                    [file]=\"file\"\n                ></bsu-file-viewer-content>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse;padding:0}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1}fd-dialog.vertical .thumbnail{border:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4$5.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$5.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$5.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "cardMode", "showFooter", "showContent", "width", "deviceSize", "cardContentHeight", "file"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-file-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog #dialogTpl class=\"vertical\">\r\n    <fd-dialog-header>\r\n        <ng-template fdTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Fit image size\"\r\n                    [glyph]=\"'resize'\"\r\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n                    (click)=\"fillWidth = !fillWidth\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body #fdbody>\r\n        <div #gallery class=\"gallery inDialog\" *ngIf=\"isImageGallery\">\r\n            <ng-container *ngFor=\"let media of files; let i = index\">\r\n                <bsu-file-viewer-content [file]=\"selectedFile\" [imageOnly]=\"true\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"gallery\" *ngIf=\"!isImageGallery\">\r\n            <ng-container *ngIf=\"selectedFile\">\r\n                <bsu-file-viewer-content [fillWidth]=\"fillWidth\" [file]=\"selectedFile\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div *ngIf=\"deviceSize !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\r\n        </div>\r\n    </fd-dialog-body>\r\n</fd-dialog>\r\n<ng-template #layoutGridTpl let-files>\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow *ngIf=\"files\">\r\n            <div\r\n                *ngFor=\"let file of files; let i = index\"\r\n                [fdLayoutGridCol]=\"6\"\r\n                [colMd]=\"3\"\r\n                [colLg]=\"2\"\r\n                [colXl]=\"2\"\r\n                (click)=\"onMedaiClick(file, i)\"\r\n            >\r\n                <bsu-file-viewer-content\r\n                    [cardMode]=\"true\"\r\n                    [cardContentHeight]=\"'120px'\"\r\n                    [file]=\"file\"\r\n                ></bsu-file-viewer-content>\r\n            </div>\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse;padding:0}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1}fd-dialog.vertical .thumbnail{border:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
+            args: [{ selector: 'bsu-file-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog #dialogTpl class=\"vertical\">\n    <fd-dialog-header>\n        <ng-template fdTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-button-bar\n                    ariaLabel=\"Fit image size\"\n                    [glyph]=\"'resize'\"\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                    (click)=\"fillWidth = !fillWidth\"\n                ></fd-button-bar>\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body #fdbody>\n        <div #gallery class=\"gallery inDialog\" *ngIf=\"isImageGallery\">\n            <ng-container *ngFor=\"let media of files; let i = index\">\n                <bsu-file-viewer-content\n                    [deviceSize]=\"deviceSize\"\n                    [file]=\"selectedFile\"\n                    [imageOnly]=\"true\"\n                ></bsu-file-viewer-content>\n            </ng-container>\n        </div>\n        <div class=\"gallery\" *ngIf=\"!isImageGallery\">\n            <ng-container *ngIf=\"selectedFile\">\n                <bsu-file-viewer-content\n                    [deviceSize]=\"deviceSize\"\n                    [fillWidth]=\"fillWidth\"\n                    [file]=\"selectedFile\"\n                ></bsu-file-viewer-content>\n            </ng-container>\n        </div>\n        <div *ngIf=\"deviceSize !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\n        </div>\n    </fd-dialog-body>\n</fd-dialog>\n<ng-template #layoutGridTpl let-files>\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"files\">\n            <div\n                *ngFor=\"let file of files; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(file, i)\"\n            >\n                <bsu-file-viewer-content\n                    [cardMode]=\"true\"\n                    [deviceSize]=\"deviceSize\"\n                    [cardContentHeight]=\"'120px'\"\n                    [file]=\"file\"\n                ></bsu-file-viewer-content>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse;padding:0}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1}fd-dialog.vertical .thumbnail{border:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; }, propDecorators: { gallery: [{
                 type: ViewChild,
                 args: ['gallery']
@@ -4343,10 +4357,10 @@ class FileViewerPopoverComponent extends BaseComponent {
     }
 }
 FileViewerPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileViewerPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: { files: "files", file: "file", deviceSize: "deviceSize", canDownload: "canDownload", disableRemove: "disableRemove", fdType: "fdType" }, outputs: { remove: "remove" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\n    <button\n        fd-button\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\n        [label]=\"file.FileName || ''\"\n        [title]=\"file.FileName || ''\"\n        glyph=\"attachment\"\n        [fdMenu]=\"true\"\n        [fdType]=\"fdType\"\n        class=\"btn-actionsheet\"\n    ></button>\n    <fd-popover\n        #popoverMobile\n        [mobile]=\"true\"\n        [mobileConfig]=\"{ title: 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\n    >\n        <ng-template #popoverBodyContent>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\n            ></ng-container>\n        </ng-template>\n    </fd-popover>\n    <fd-popover #popoverLarge>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n\n    <button *ngIf=\"!disableRemove\" fd-button glyph=\"delete\" (click)=\"remove.emit()\"></button>\n</div>\n\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\n    <div fd-popover-body-header>\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\n            <div fd-bar-left>\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\n            </div>\n        </div>\n    </div>\n    <bsu-file-viewer-content\n        [file]=\"file\"\n        [width]=\"mobile ? '100vw' : '30vw'\"\n        [cardMode]=\"true\"\n        [showContent]=\"true\"\n        [showFooter]=\"true\"\n        [cardContentHeight]=\"mobile ? null : '320px'\"\n    ></bsu-file-viewer-content>\n    <div fd-popover-body-footer *ngIf=\"canDownload\">\n        <div fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-button-bar\n                    fdType=\"transparent\"\n                    glyph=\"download\"\n                    downloadFiles\n                    [files]=\"[file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    *ngIf=\"!mobile\"\n                    fdType=\"transparent\"\n                    glyph=\"resize\"\n                    fullscreenFiles\n                    [files]=\"files?.length ? files : [file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i3$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "directive", type: i3$1.DeprecatedBarContentDensityDirective, selector: "[fd-bar][cozy]" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$2.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i7$2.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "cardMode", "showFooter", "showContent", "width", "cardContentHeight", "file"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "isImageGallery", "component"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FileViewerPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: { files: "files", file: "file", deviceSize: "deviceSize", canDownload: "canDownload", disableRemove: "disableRemove", fdType: "fdType" }, outputs: { remove: "remove" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\n    <button\n        fd-button\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\n        [label]=\"file.FileName || ''\"\n        [title]=\"file.FileName || ''\"\n        glyph=\"attachment\"\n        [fdMenu]=\"true\"\n        [fdType]=\"fdType\"\n        class=\"btn-actionsheet\"\n    ></button>\n    <fd-popover\n        #popoverMobile\n        [mobile]=\"true\"\n        [mobileConfig]=\"{ title: 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\n    >\n        <ng-template #popoverBodyContent>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\n            ></ng-container>\n        </ng-template>\n    </fd-popover>\n    <fd-popover #popoverLarge>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n\n    <button *ngIf=\"!disableRemove\" fd-button glyph=\"delete\" (click)=\"remove.emit()\"></button>\n</div>\n\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\n    <div fd-popover-body-header>\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\n            <div fd-bar-left>\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\n            </div>\n        </div>\n    </div>\n    <bsu-file-viewer-content\n        [file]=\"file\"\n        [width]=\"mobile ? '100vw' : '30vw'\"\n        [cardMode]=\"true\"\n        [showContent]=\"true\"\n        [showFooter]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        [cardContentHeight]=\"mobile ? null : '320px'\"\n    ></bsu-file-viewer-content>\n    <div fd-popover-body-footer *ngIf=\"canDownload\">\n        <div fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-button-bar\n                    fdType=\"transparent\"\n                    glyph=\"download\"\n                    downloadFiles\n                    [files]=\"[file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    *ngIf=\"!mobile\"\n                    fdType=\"transparent\"\n                    glyph=\"resize\"\n                    fullscreenFiles\n                    [files]=\"files?.length ? files : [file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i3$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "directive", type: i3$1.DeprecatedBarContentDensityDirective, selector: "[fd-bar][cozy]" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$2.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i7$2.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "cardMode", "showFooter", "showContent", "width", "deviceSize", "cardContentHeight", "file"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "isImageGallery", "component"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-file-viewer-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\n    <button\n        fd-button\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\n        [label]=\"file.FileName || ''\"\n        [title]=\"file.FileName || ''\"\n        glyph=\"attachment\"\n        [fdMenu]=\"true\"\n        [fdType]=\"fdType\"\n        class=\"btn-actionsheet\"\n    ></button>\n    <fd-popover\n        #popoverMobile\n        [mobile]=\"true\"\n        [mobileConfig]=\"{ title: 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\n    >\n        <ng-template #popoverBodyContent>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\n            ></ng-container>\n        </ng-template>\n    </fd-popover>\n    <fd-popover #popoverLarge>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n\n    <button *ngIf=\"!disableRemove\" fd-button glyph=\"delete\" (click)=\"remove.emit()\"></button>\n</div>\n\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\n    <div fd-popover-body-header>\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\n            <div fd-bar-left>\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\n            </div>\n        </div>\n    </div>\n    <bsu-file-viewer-content\n        [file]=\"file\"\n        [width]=\"mobile ? '100vw' : '30vw'\"\n        [cardMode]=\"true\"\n        [showContent]=\"true\"\n        [showFooter]=\"true\"\n        [cardContentHeight]=\"mobile ? null : '320px'\"\n    ></bsu-file-viewer-content>\n    <div fd-popover-body-footer *ngIf=\"canDownload\">\n        <div fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-button-bar\n                    fdType=\"transparent\"\n                    glyph=\"download\"\n                    downloadFiles\n                    [files]=\"[file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    *ngIf=\"!mobile\"\n                    fdType=\"transparent\"\n                    glyph=\"resize\"\n                    fullscreenFiles\n                    [files]=\"files?.length ? files : [file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"] }]
+            args: [{ selector: 'bsu-file-viewer-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\n    <button\n        fd-button\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\n        [label]=\"file.FileName || ''\"\n        [title]=\"file.FileName || ''\"\n        glyph=\"attachment\"\n        [fdMenu]=\"true\"\n        [fdType]=\"fdType\"\n        class=\"btn-actionsheet\"\n    ></button>\n    <fd-popover\n        #popoverMobile\n        [mobile]=\"true\"\n        [mobileConfig]=\"{ title: 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\n    >\n        <ng-template #popoverBodyContent>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\n            ></ng-container>\n        </ng-template>\n    </fd-popover>\n    <fd-popover #popoverLarge>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n\n    <button *ngIf=\"!disableRemove\" fd-button glyph=\"delete\" (click)=\"remove.emit()\"></button>\n</div>\n\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\n    <div fd-popover-body-header>\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\n            <div fd-bar-left>\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\n            </div>\n        </div>\n    </div>\n    <bsu-file-viewer-content\n        [file]=\"file\"\n        [width]=\"mobile ? '100vw' : '30vw'\"\n        [cardMode]=\"true\"\n        [showContent]=\"true\"\n        [showFooter]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        [cardContentHeight]=\"mobile ? null : '320px'\"\n    ></bsu-file-viewer-content>\n    <div fd-popover-body-footer *ngIf=\"canDownload\">\n        <div fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-button-bar\n                    fdType=\"transparent\"\n                    glyph=\"download\"\n                    downloadFiles\n                    [files]=\"[file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    *ngIf=\"!mobile\"\n                    fdType=\"transparent\"\n                    glyph=\"resize\"\n                    fullscreenFiles\n                    [files]=\"files?.length ? files : [file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { files: [{
                 type: Input
             }], file: [{
@@ -4385,12 +4399,16 @@ class ColumnRendererComponent extends BaseComponent {
             }, 0);
         }
     }
+    onElapsised(val) {
+        this.showMore = val;
+        this._cdr.detectChanges();
+    }
 }
 ColumnRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ColumnRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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", rtl: "rtl", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\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        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            class=\"ellapsis\"\n            >{{ value | bbbTranslate }}</span\n        >\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    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div class=\"file-viewer-attachments\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <bsu-file-viewer-popover\n                    [style.width.px]=\"containerDom ? containerDom.offsetWidth : null\"\n                    *ngIf=\"!file.IsDeleted\"\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            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\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    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "maxWidth"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { 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: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ColumnRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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", rtl: "rtl", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\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        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            class=\"ellapsis\"\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            (ellapsised)=\"onElapsised($event)\"\n            >{{ value | bbbTranslate }}</span\n        >\n        <fd-icon\n            *ngIf=\"showMore\"\n            glyph=\"show\"\n            [triggers]=\"['click']\"\n            [closeOnOutsideClick]=\"true\"\n            additionalBodyClass=\"help-more\"\n            [fd-inline-help]=\"value | bbbTranslate\"\n            tabindex=\"0\"\n        ></fd-icon>\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    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div class=\"file-viewer-attachments\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <bsu-file-viewer-popover\n                    [style.width.px]=\"containerDom ? containerDom.offsetWidth : null\"\n                    *ngIf=\"!file.IsDeleted\"\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            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\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    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize"], outputs: ["ellapsised"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i5$2.InlineHelpDirective, selector: "[fd-inline-help], [fd-inline-help-template]", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { 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: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ColumnRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\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        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            class=\"ellapsis\"\n            >{{ value | bbbTranslate }}</span\n        >\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    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div class=\"file-viewer-attachments\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <bsu-file-viewer-popover\n                    [style.width.px]=\"containerDom ? containerDom.offsetWidth : null\"\n                    *ngIf=\"!file.IsDeleted\"\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            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\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    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\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"] }]
+            args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\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        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            class=\"ellapsis\"\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            (ellapsised)=\"onElapsised($event)\"\n            >{{ value | bbbTranslate }}</span\n        >\n        <fd-icon\n            *ngIf=\"showMore\"\n            glyph=\"show\"\n            [triggers]=\"['click']\"\n            [closeOnOutsideClick]=\"true\"\n            additionalBodyClass=\"help-more\"\n            [fd-inline-help]=\"value | bbbTranslate\"\n            tabindex=\"0\"\n        ></fd-icon>\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    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div class=\"file-viewer-attachments\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <bsu-file-viewer-popover\n                    [style.width.px]=\"containerDom ? containerDom.offsetWidth : null\"\n                    *ngIf=\"!file.IsDeleted\"\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            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\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    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _isSmall: [{
                 type: HostBinding,
                 args: ['class.isMobile']
@@ -4429,10 +4447,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
 class LyLayoutContainerOfRootComponent extends LayoutPanelBaseComponent {
 }
 LyLayoutContainerOfRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LyLayoutContainerOfRootComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LyLayoutContainerOfRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root", providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<canvas #canvas style=\"display: none\"></canvas>\r\n<ng-container *ngIf=\"config\">\r\n    <canvas #canvas style=\"display: none\"></canvas>\r\n    <ng-container *ngFor=\"let item of config | filterToolbarControl\">\r\n        <ng-container [ngSwitch]=\"item.xtype\">\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutTabPanel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutPanel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutContainer'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            name: 'LyLayoutContainerComponent',\r\n                            selector: 'bsu-ly-layout-container'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.EmptySpace'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.SimpleLabel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutLine'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\r\n                <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                selector: 'bsu-ly-horizontal-layout',\r\n                                name: 'LyLayoutHorizontalComponent'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n                </ng-container>\r\n                <ng-template #verticalJoin>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                selector: 'bsu-ly-vertical-layout',\r\n                                name: 'LyLayoutVerticalComponent'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutControl'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            selector: 'bsu-layout-control',\r\n                            name: 'LayoutControlComponent'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" let-name=\"name\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LyLayoutContainerOfRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root", providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"config\">\n    <ng-container *ngFor=\"let item of config | filterToolbarControl\">\n        <ng-container [ngSwitch]=\"item.xtype\">\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n                <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\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                </ng-container>\n                <ng-template #verticalJoin>\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                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" 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$ | async)!!\"\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n            [isSearchPanel]=\"isSearchPanel\"\n        >\n        </bnrc-dynamic-layout>\n    </ng-template>\n</ng-container>\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LyLayoutContainerOfRootComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-layout-container-of-root', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "<canvas #canvas style=\"display: none\"></canvas>\r\n<ng-container *ngIf=\"config\">\r\n    <canvas #canvas style=\"display: none\"></canvas>\r\n    <ng-container *ngFor=\"let item of config | filterToolbarControl\">\r\n        <ng-container [ngSwitch]=\"item.xtype\">\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutTabPanel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutPanel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutContainer'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            name: 'LyLayoutContainerComponent',\r\n                            selector: 'bsu-ly-layout-container'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.EmptySpace'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.SimpleLabel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutLine'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\r\n                <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                selector: 'bsu-ly-horizontal-layout',\r\n                                name: 'LyLayoutHorizontalComponent'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n                </ng-container>\r\n                <ng-template #verticalJoin>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                selector: 'bsu-ly-vertical-layout',\r\n                                name: 'LyLayoutVerticalComponent'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutControl'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            selector: 'bsu-layout-control',\r\n                            name: 'LayoutControlComponent'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" let-name=\"name\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"] }]
+            args: [{ selector: 'bsu-ly-layout-container-of-root', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "<ng-container *ngIf=\"config\">\n    <ng-container *ngFor=\"let item of config | filterToolbarControl\">\n        <ng-container [ngSwitch]=\"item.xtype\">\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n                <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\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                </ng-container>\n                <ng-template #verticalJoin>\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                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" 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$ | async)!!\"\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n            [isSearchPanel]=\"isSearchPanel\"\n        >\n        </bnrc-dynamic-layout>\n    </ng-template>\n</ng-container>\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"] }]
         }], propDecorators: { viewRef: [{
                 type: ViewChild,
                 args: ['viewRefTemplate', { read: ViewContainerRef, static: true }]
@@ -4513,6 +4531,7 @@ class ReportViewRendererDirective extends BaseDirective {
         this.cartableFormClosed = new EventEmitter();
         this.createNewMo = new EventEmitter();
         this.updateMo = new EventEmitter();
+        this.hasDetailsInRow = new EventEmitter();
         this.allCheckbox = new EventEmitter();
         this.mandatory = new EventEmitter();
         this.editFormPanelSave = new EventEmitter();
@@ -4551,7 +4570,7 @@ class ReportViewRendererDirective extends BaseDirective {
             .getComponent(Module, ModuleFileName, Name, Selector, this._injector)
             .pipe(takeUntil(this._onDestroy$))
             .subscribe((componentRef) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
             const instance = componentRef.instance;
             instance.cartableTemplates = this.cartableTemplates;
             instance.cartableChildsMo = this.cartableChildsMo;
@@ -4642,16 +4661,19 @@ class ReportViewRendererDirective extends BaseDirective {
             (_s = instance.createNewMo) === null || _s === void 0 ? void 0 : _s.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
                 this.createNewMo.emit();
             });
-            (_t = instance.updateMo) === null || _t === void 0 ? void 0 : _t.pipe(takeUntil(this._onDestroy$)).subscribe((mo) => {
+            (_t = instance.hasDetailsInRow) === null || _t === void 0 ? void 0 : _t.pipe(takeUntil(this._onDestroy$)).subscribe((mo) => {
+                this.hasDetailsInRow.emit(mo);
+            });
+            (_u = instance.updateMo) === null || _u === void 0 ? void 0 : _u.pipe(takeUntil(this._onDestroy$)).subscribe((mo) => {
                 this.updateMo.emit(mo);
             });
-            (_u = instance.mandatory) === null || _u === void 0 ? void 0 : _u.pipe(takeUntil(this._onDestroy$)).subscribe((isValid) => {
+            (_v = instance.mandatory) === null || _v === void 0 ? void 0 : _v.pipe(takeUntil(this._onDestroy$)).subscribe((isValid) => {
                 this.mandatory.emit(isValid);
             });
-            (_v = instance.executeToolbarButton) === null || _v === void 0 ? void 0 : _v.pipe(takeUntil(this._onDestroy$)).subscribe((e) => {
+            (_w = instance.executeToolbarButton) === null || _w === void 0 ? void 0 : _w.pipe(takeUntil(this._onDestroy$)).subscribe((e) => {
                 this.executeToolbarButton.emit(e);
             });
-            (_w = instance.workflowShareButtons) === null || _w === void 0 ? void 0 : _w.pipe(takeUntil(this._onDestroy$)).subscribe((e) => {
+            (_x = instance.workflowShareButtons) === null || _x === void 0 ? void 0 : _x.pipe(takeUntil(this._onDestroy$)).subscribe((e) => {
                 this.workflowShareButtons.emit(e);
             });
             this._vcr.insert(componentRef.hostView);
@@ -4660,7 +4682,7 @@ class ReportViewRendererDirective extends BaseDirective {
     }
 }
 ReportViewRendererDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ReportViewRendererDirective, deps: [{ token: i2.PortalService }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ReportViewRendererDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: ReportViewRendererDirective, selector: "[reportViewRenderer]", inputs: { view: "view", moDataList: "moDataList", allChecked: "allChecked", groupby: "groupby", isCheckList: "isCheckList", selectedCount: "selectedCount", hasSummary: "hasSummary", relationList: "relationList", columns: "columns", columnsCount: "columnsCount", secondaryColumns: "secondaryColumns", contextMenuItems: "contextMenuItems", conditionalFormats: "conditionalFormats", deviceName: "deviceName", deviceSize: "deviceSize", mobileOrTablet: "mobileOrTablet", access: "access", title: "title", customFieldInfo: "customFieldInfo", selectedMo: "selectedMo", allColumns: "allColumns", viewSetting: "viewSetting", inlineEditMode: "inlineEditMode", onlyInlineEdit: "onlyInlineEdit", allowInlineEdit: "allowInlineEdit", popin: "popin", hasSelected: "hasSelected", formSetting: "formSetting", disableOverflowContextMenu: "disableOverflowContextMenu", navigationArrow: "navigationArrow", typeDefId: "typeDefId", containerWidth: "containerWidth", extraRelation: "extraRelation", contextView: "contextView", contentDensity: "contentDensity", hideOpenIcon: "hideOpenIcon", openOnClick: "openOnClick", inDialog: "inDialog", isMultiSelect: "isMultiSelect", disableResponsive: "disableResponsive", cartableTemplates: "cartableTemplates", cartableChildsMo: "cartableChildsMo" }, outputs: { editFormPanelCancel: "editFormPanelCancel", editFormPanelValueChange: "editFormPanelValueChange", ulvCommandClick: "ulvCommandClick", sortAscending: "sortAscending", sortDescending: "sortDescending", filter: "filter", deselectAll: "deselectAll", rowCheck: "rowCheck", rowClick: "rowClick", executeToolbarButton: "executeToolbarButton", expandClick: "expandClick", trackBySelectedFn: "trackBySelectedFn", cartableFormClosed: "cartableFormClosed", createNewMo: "createNewMo", updateMo: "updateMo", allCheckbox: "allCheckbox", mandatory: "mandatory", editFormPanelSave: "editFormPanelSave", columnResized: "columnResized", selectNextInlineRecord: "selectNextInlineRecord", workflowShareButtons: "workflowShareButtons" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+ReportViewRendererDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: ReportViewRendererDirective, selector: "[reportViewRenderer]", inputs: { view: "view", moDataList: "moDataList", allChecked: "allChecked", groupby: "groupby", isCheckList: "isCheckList", selectedCount: "selectedCount", hasSummary: "hasSummary", relationList: "relationList", columns: "columns", columnsCount: "columnsCount", secondaryColumns: "secondaryColumns", contextMenuItems: "contextMenuItems", conditionalFormats: "conditionalFormats", deviceName: "deviceName", deviceSize: "deviceSize", mobileOrTablet: "mobileOrTablet", access: "access", title: "title", customFieldInfo: "customFieldInfo", selectedMo: "selectedMo", allColumns: "allColumns", viewSetting: "viewSetting", inlineEditMode: "inlineEditMode", onlyInlineEdit: "onlyInlineEdit", allowInlineEdit: "allowInlineEdit", popin: "popin", hasSelected: "hasSelected", formSetting: "formSetting", disableOverflowContextMenu: "disableOverflowContextMenu", navigationArrow: "navigationArrow", typeDefId: "typeDefId", containerWidth: "containerWidth", extraRelation: "extraRelation", contextView: "contextView", contentDensity: "contentDensity", hideOpenIcon: "hideOpenIcon", openOnClick: "openOnClick", inDialog: "inDialog", isMultiSelect: "isMultiSelect", disableResponsive: "disableResponsive", cartableTemplates: "cartableTemplates", cartableChildsMo: "cartableChildsMo" }, outputs: { editFormPanelCancel: "editFormPanelCancel", editFormPanelValueChange: "editFormPanelValueChange", ulvCommandClick: "ulvCommandClick", sortAscending: "sortAscending", sortDescending: "sortDescending", filter: "filter", deselectAll: "deselectAll", rowCheck: "rowCheck", rowClick: "rowClick", executeToolbarButton: "executeToolbarButton", expandClick: "expandClick", trackBySelectedFn: "trackBySelectedFn", cartableFormClosed: "cartableFormClosed", createNewMo: "createNewMo", updateMo: "updateMo", hasDetailsInRow: "hasDetailsInRow", allCheckbox: "allCheckbox", mandatory: "mandatory", editFormPanelSave: "editFormPanelSave", columnResized: "columnResized", selectNextInlineRecord: "selectNextInlineRecord", workflowShareButtons: "workflowShareButtons" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ReportViewRendererDirective, decorators: [{
             type: Directive,
             args: [{
@@ -4780,6 +4802,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Output
             }], updateMo: [{
                 type: Output
+            }], hasDetailsInRow: [{
+                type: Output
             }], allCheckbox: [{
                 type: Output
             }], mandatory: [{
@@ -4818,10 +4842,10 @@ class UiReportContainerComponent extends SapUiReportBaseComponent {
     }
 }
 UiReportContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiReportContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiReportContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiReportContainerComponent, selector: "bsu-ui-report-container", viewQueries: [{ propertyName: "tableView", first: true, predicate: ["renderTable"], descendants: true, static: true }, { propertyName: "cardListView", first: true, predicate: ["renderCardList"], descendants: true, static: true }, { propertyName: "listView", first: true, predicate: ["renderList"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--render container-->\n<canvas #canvas style=\"display: none\"></canvas>\n<ng-container\n    *ngTemplateOutlet=\"\n        renderContainer;\n        context: {\n            $implicit: gridDataSource.data$ | async,\n            allChecked: allChecked$ | async,\n            groupby: groupby$ | async,\n            isCheckList: context.Setting.View?.IsCheckList,\n            columns: columns$ | async,\n            columnsCount: columnsCount$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            onlyInlineEdit: onlyInlineEdit$ | async,\n            secondaryColumns: secondaryColumns$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            popin: (mobileOrTablet$ | async) || (secondaryColumnsCount$ | async) ? true : false,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: conditionalFormats$ | async,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            mobileOrTablet: mobileOrTablet$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            title: title$ | async,\n            rtl: rtl$ | async,\n            hideToolbar: (hideToolbar$ | async) === true || viewSetting.HideToolbar,\n            selectedView: selectedView,\n            viewCollection: viewCollection,\n            allColumns: allColumns,\n            gridSetting: gridSetting$ | async,\n            hasSummary: context.Setting.View?.HasSummaryRow,\n            contentDensity: contentDensity$ | async,\n            formLayout: layout$ | async,\n            hasSelected: hasSelected$ | async,\n            disableOverflowContextMenu: viewSetting.DisableOverflowContextMenu,\n            showCreateForm: viewSetting.ShowCreateForm,\n            hideOpenIcon: viewSetting.HideOpenIcon,\n            openOnClick: viewSetting.OpenOnClick,\n            navigationArrow: navigationArrow$ | async,\n            containerWidth: containerWidth$ | async,\n            typeDefId: context.Setting.Extra.Report.TypeDefId,\n            formSetting: context.Setting.FormTemplate,\n            extraRelation: context.Setting.Extra?.Relation,\n            contextView: context.Setting.View,\n            cartableTemplates: cartableTemplates$ | async,\n            cartableChildsMo: cartableChildsMo$ | async,\n            disableResponsive: viewSetting.DisableResponsive,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            customFieldInfo: context.Setting.CustomFieldInfo,\n            selectedMo: selectedMo$ | async,\n            selectedCount: selectedCount$ | async\n        }\n    \"\n></ng-container>\n<!--render container -->\n<ng-template\n    #renderContainer\n    let-moDataList\n    let-allChecked=\"allChecked\"\n    let-isCheckList=\"isCheckList\"\n    let-columns=\"columns\"\n    let-columnsCount=\"columnsCount\"\n    let-groupby=\"groupby\"\n    let-secondaryColumns=\"secondaryColumns\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-access=\"access\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-popin=\"popin\"\n    let-mobileOrTablet=\"mobileOrTablet\"\n    let-title=\"title\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-onlyInlineEdit=\"onlyInlineEdit\"\n    let-allowInlineEdit=\"allowInlineEdit\"\n    let-rtl=\"rtl\"\n    let-allColumns=\"allColumns\"\n    let-selectedView=\"selectedView\"\n    let-viewCollection=\"viewCollection\"\n    let-hideToolbar=\"hideToolbar\"\n    let-gridSetting=\"gridSetting\"\n    let-contentDensity=\"contentDensity\"\n    let-formLayout=\"formLayout\"\n    let-hasSelected=\"hasSelected\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-navigationArrow=\"navigationArrow\"\n    let-containerWidth=\"containerWidth\"\n    let-hasSummary=\"hasSummary\"\n    let-typeDefId=\"typeDefId\"\n    let-formSetting=\"formSetting\"\n    let-extraRelation=\"extraRelation\"\n    let-contextView=\"contextView\"\n    let-showCreateForm=\"showCreateForm\"\n    let-hideOpenIcon=\"hideOpenIcon\"\n    let-cartableTemplates=\"cartableTemplates\"\n    let-cartableChildsMo=\"cartableChildsMo\"\n    let-openOnClick=\"openOnClick\"\n    let-disableResponsive=\"disableResponsive\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-customFieldInfo=\"customFieldInfo\"\n    let-selectedMo=\"selectedMo\"\n    let-selectedCount=\"selectedCount\"\n>\n    <div *ngIf=\"showCreateForm\">\n        <bsu-report-new-top-form\n            [extraRelation]=\"extraRelation\"\n            [moDataListCount]=\"moDataList.length\"\n            [selectedMo]=\"selectedMo\"\n            [formSetting]=\"formSetting\"\n            [typeDefId]=\"typeDefId\"\n            [inlineEditMode]=\"true\"\n            [isChecked]=\"true\"\n            (add)=\"onNewTopFormAdd($event)\"\n            (save)=\"onSaveTopForm($event)\"\n        ></bsu-report-new-top-form>\n    </div>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [access]=\"access\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [inDialog]=\"inDialog\"\n        [hasSelected]=\"hasSelected\"\n        [contentDensity]=\"contentDensity\"\n        [viewCollection]=\"viewCollection\"\n        [reportView]=\"selectedView\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        (sortClick)=\"onSortSettings($event)\"\n        (groupbyClick)=\"onGroupbySettings($event)\"\n        (columnClick)=\"onColumnSettings($event)\"\n        (editModeClick)=\"onEditMode()\"\n        (viewClick)=\"onChangeView($event)\"\n        (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\n    ></bsu-ulv-toolbar>\n\n    <div\n        class=\"report-view\"\n        [attr.reportCaption]=\"context.Setting.Extra.Report.Caption\"\n        reportViewRenderer\n        [selectedMo]=\"selectedMo\"\n        [selectedCount]=\"selectedCount\"\n        [hasSelected]=\"hasSelected\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [customFieldInfo]=\"customFieldInfo\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [openOnClick]=\"openOnClick\"\n        [contextView]=\"contextView\"\n        [containerWidth]=\"containerWidth\"\n        [extraRelation]=\"extraRelation\"\n        [typeDefId]=\"typeDefId\"\n        [cartableTemplates]=\"cartableTemplates\"\n        [cartableChildsMo]=\"cartableChildsMo\"\n        [view]=\"selectedView\"\n        [isCheckList]=\"isCheckList\"\n        [allChecked]=\"allChecked\"\n        [moDataList]=\"moDataList\"\n        [access]=\"access\"\n        [groupby]=\"groupby\"\n        [contentDensity]=\"contentDensity\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [formSetting]=\"formSetting\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [navigationArrow]=\"navigationArrow\"\n        [title]=\"title\"\n        [mobileOrTablet]=\"mobileOrTablet\"\n        [popin]=\"popin\"\n        [secondaryColumns]=\"secondaryColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [columns]=\"columns\"\n        [allColumns]=\"allColumns\"\n        [hasSummary]=\"hasSummary\"\n        [columnsCount]=\"columnsCount\"\n        [formLayout]=\"formLayout\"\n        [disableResponsive]=\"disableResponsive\"\n        (executeToolbarButton)=\"onExecuteToolbarButton($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (ulvCommandClick)=\"onUlvCommand($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n        (deselectAll)=\"onDeselectAll()\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (cartableFormClosed)=\"onCartableFormClosed($event)\"\n        (createNewMo)=\"onCreateNewMo()\"\n        (updateMo)=\"onUpdateMo($event)\"\n        (mandatory)=\"onMandatory($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n    ></div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}.view-row{cursor:pointer}.header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:.5rem;background-color:var(--sapBaseColor)}.header span{font-size:1.7rem;font-weight:300}.btn-margin{margin:0 8px 0 0}.table-header-btn-group{display:flex;justify-content:flex-end;flex-grow:1}.context-command{margin:0 2px}.body-wrapper,.body-wrapper table{width:100%}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.root-grouped{color:green}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.single-select{min-width:2rem;max-width:2rem;width:2rem;text-align:center}.grid-editable-btn-group{display:flex;justify-content:space-evenly;align-items:center}table.fixed{table-layout:fixed}table.fixed td{overflow:hidden}::ng-deep span.fd-toolbar__spacer{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: ["useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "hasSelected", "config", "hidden", "buttons"], outputs: ["search", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo"] }, { kind: "component", type: ReportNewTopFormComponent, selector: "bsu-report-new-top-form", inputs: ["selectedMo"], outputs: ["add", "save"] }, { kind: "directive", type: ReportViewRendererDirective, selector: "[reportViewRenderer]", inputs: ["view", "moDataList", "allChecked", "groupby", "isCheckList", "selectedCount", "hasSummary", "relationList", "columns", "columnsCount", "secondaryColumns", "contextMenuItems", "conditionalFormats", "deviceName", "deviceSize", "mobileOrTablet", "access", "title", "customFieldInfo", "selectedMo", "allColumns", "viewSetting", "inlineEditMode", "onlyInlineEdit", "allowInlineEdit", "popin", "hasSelected", "formSetting", "disableOverflowContextMenu", "navigationArrow", "typeDefId", "containerWidth", "extraRelation", "contextView", "contentDensity", "hideOpenIcon", "openOnClick", "inDialog", "isMultiSelect", "disableResponsive", "cartableTemplates", "cartableChildsMo"], outputs: ["editFormPanelCancel", "editFormPanelValueChange", "ulvCommandClick", "sortAscending", "sortDescending", "filter", "deselectAll", "rowCheck", "rowClick", "executeToolbarButton", "expandClick", "trackBySelectedFn", "cartableFormClosed", "createNewMo", "updateMo", "allCheckbox", "mandatory", "editFormPanelSave", "columnResized", "selectNextInlineRecord", "workflowShareButtons"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }, { kind: "pipe", type: i2.ContextMenuPipe, name: "contextMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiReportContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiReportContainerComponent, selector: "bsu-ui-report-container", viewQueries: [{ propertyName: "tableView", first: true, predicate: ["renderTable"], descendants: true, static: true }, { propertyName: "cardListView", first: true, predicate: ["renderCardList"], descendants: true, static: true }, { propertyName: "listView", first: true, predicate: ["renderList"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--render container-->\n<ng-container\n    *ngTemplateOutlet=\"\n        renderContainer;\n        context: {\n            $implicit: gridDataSource.data$ | async,\n            allChecked: allChecked$ | async,\n            groupby: groupby$ | async,\n            isCheckList: context.Setting.View?.IsCheckList,\n            columns: columns$ | async,\n            columnsCount: columnsCount$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            onlyInlineEdit: onlyInlineEdit$ | async,\n            secondaryColumns: secondaryColumns$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            popin: (mobileOrTablet$ | async) || (secondaryColumnsCount$ | async) ? true : false,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: conditionalFormats$ | async,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            mobileOrTablet: mobileOrTablet$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            title: title$ | async,\n            rtl: rtl$ | async,\n            hideToolbar: (hideToolbar$ | async) === true || viewSetting.HideToolbar,\n            selectedView: selectedView,\n            viewCollection: viewCollection,\n            allColumns: allColumns,\n            gridSetting: gridSetting$ | async,\n            hasSummary: context.Setting.View?.HasSummaryRow,\n            contentDensity: contentDensity$ | async,\n            formLayout: layout$ | async,\n            hasSelected: hasSelected$ | async,\n            disableOverflowContextMenu: viewSetting.DisableOverflowContextMenu,\n            showCreateForm: viewSetting.ShowCreateForm,\n            hideOpenIcon: viewSetting.HideOpenIcon,\n            openOnClick: viewSetting.OpenOnClick,\n            navigationArrow: navigationArrow$ | async,\n            containerWidth: containerWidth$ | async,\n            typeDefId: context.Setting.Extra.Report.TypeDefId,\n            formSetting: context.Setting.FormTemplate,\n            extraRelation: context.Setting.Extra?.Relation,\n            contextView: context.Setting.View,\n            cartableTemplates: cartableTemplates$ | async,\n            cartableChildsMo: cartableChildsMo$ | async,\n            disableResponsive: viewSetting.DisableResponsive,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            customFieldInfo: context.Setting.CustomFieldInfo,\n            selectedMo: selectedMo$ | async,\n            selectedCount: selectedCount$ | async\n        }\n    \"\n></ng-container>\n<!--render container -->\n<ng-template\n    #renderContainer\n    let-moDataList\n    let-allChecked=\"allChecked\"\n    let-isCheckList=\"isCheckList\"\n    let-columns=\"columns\"\n    let-columnsCount=\"columnsCount\"\n    let-groupby=\"groupby\"\n    let-secondaryColumns=\"secondaryColumns\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-access=\"access\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-popin=\"popin\"\n    let-mobileOrTablet=\"mobileOrTablet\"\n    let-title=\"title\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-onlyInlineEdit=\"onlyInlineEdit\"\n    let-allowInlineEdit=\"allowInlineEdit\"\n    let-rtl=\"rtl\"\n    let-allColumns=\"allColumns\"\n    let-selectedView=\"selectedView\"\n    let-viewCollection=\"viewCollection\"\n    let-hideToolbar=\"hideToolbar\"\n    let-gridSetting=\"gridSetting\"\n    let-contentDensity=\"contentDensity\"\n    let-formLayout=\"formLayout\"\n    let-hasSelected=\"hasSelected\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-navigationArrow=\"navigationArrow\"\n    let-containerWidth=\"containerWidth\"\n    let-hasSummary=\"hasSummary\"\n    let-typeDefId=\"typeDefId\"\n    let-formSetting=\"formSetting\"\n    let-extraRelation=\"extraRelation\"\n    let-contextView=\"contextView\"\n    let-showCreateForm=\"showCreateForm\"\n    let-hideOpenIcon=\"hideOpenIcon\"\n    let-cartableTemplates=\"cartableTemplates\"\n    let-cartableChildsMo=\"cartableChildsMo\"\n    let-openOnClick=\"openOnClick\"\n    let-disableResponsive=\"disableResponsive\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-customFieldInfo=\"customFieldInfo\"\n    let-selectedMo=\"selectedMo\"\n    let-selectedCount=\"selectedCount\"\n>\n    <div *ngIf=\"showCreateForm\">\n        <bsu-report-new-top-form\n            [extraRelation]=\"extraRelation\"\n            [moDataListCount]=\"moDataList.length\"\n            [selectedMo]=\"selectedMo\"\n            [formSetting]=\"formSetting\"\n            [typeDefId]=\"typeDefId\"\n            [inlineEditMode]=\"true\"\n            [isChecked]=\"true\"\n            (add)=\"onNewTopFormAdd($event)\"\n            (save)=\"onSaveTopForm($event)\"\n        ></bsu-report-new-top-form>\n    </div>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [access]=\"access\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [inDialog]=\"inDialog\"\n        [hasSelected]=\"hasSelected\"\n        [contentDensity]=\"contentDensity\"\n        [viewCollection]=\"viewCollection\"\n        [reportView]=\"selectedView\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        (sortClick)=\"onSortSettings($event)\"\n        (groupbyClick)=\"onGroupbySettings($event)\"\n        (columnClick)=\"onColumnSettings($event)\"\n        (editModeClick)=\"onEditMode()\"\n        (viewClick)=\"onChangeView($event)\"\n        (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\n    ></bsu-ulv-toolbar>\n\n    <div\n        class=\"report-view\"\n        [attr.reportCaption]=\"context.Setting.Extra.Report.Caption\"\n        reportViewRenderer\n        [selectedMo]=\"selectedMo\"\n        [selectedCount]=\"selectedCount\"\n        [hasSelected]=\"hasSelected\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [customFieldInfo]=\"customFieldInfo\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [openOnClick]=\"openOnClick\"\n        [contextView]=\"contextView\"\n        [containerWidth]=\"containerWidth\"\n        [extraRelation]=\"extraRelation\"\n        [typeDefId]=\"typeDefId\"\n        [cartableTemplates]=\"cartableTemplates\"\n        [cartableChildsMo]=\"cartableChildsMo\"\n        [view]=\"selectedView\"\n        [isCheckList]=\"isCheckList\"\n        [allChecked]=\"allChecked\"\n        [moDataList]=\"moDataList\"\n        [access]=\"access\"\n        [groupby]=\"groupby\"\n        [contentDensity]=\"contentDensity\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [formSetting]=\"formSetting\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [navigationArrow]=\"navigationArrow\"\n        [title]=\"title\"\n        [mobileOrTablet]=\"mobileOrTablet\"\n        [popin]=\"popin\"\n        [secondaryColumns]=\"secondaryColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [columns]=\"columns\"\n        [allColumns]=\"allColumns\"\n        [hasSummary]=\"hasSummary\"\n        [columnsCount]=\"columnsCount\"\n        [formLayout]=\"formLayout\"\n        [disableResponsive]=\"disableResponsive\"\n        (hasDetailsInRow)=\"onHasDetailsInRow($event, deviceSize)\"\n        (executeToolbarButton)=\"onExecuteToolbarButton($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (ulvCommandClick)=\"onUlvCommand($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n        (deselectAll)=\"onDeselectAll()\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (cartableFormClosed)=\"onCartableFormClosed($event)\"\n        (createNewMo)=\"onCreateNewMo()\"\n        (updateMo)=\"onUpdateMo($event)\"\n        (mandatory)=\"onMandatory($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n    ></div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}.view-row{cursor:pointer}.header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:.5rem;background-color:var(--sapBaseColor)}.header span{font-size:1.7rem;font-weight:300}.btn-margin{margin:0 8px 0 0}.table-header-btn-group{display:flex;justify-content:flex-end;flex-grow:1}.context-command{margin:0 2px}.body-wrapper,.body-wrapper table{width:100%}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.root-grouped{color:green}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.single-select{min-width:2rem;max-width:2rem;width:2rem;text-align:center}.grid-editable-btn-group{display:flex;justify-content:space-evenly;align-items:center}table.fixed{table-layout:fixed}table.fixed td{overflow:hidden}::ng-deep span.fd-toolbar__spacer{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: ["useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "hasSelected", "config", "hidden", "buttons"], outputs: ["search", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo"] }, { kind: "component", type: ReportNewTopFormComponent, selector: "bsu-report-new-top-form", inputs: ["selectedMo"], outputs: ["add", "save"] }, { kind: "directive", type: ReportViewRendererDirective, selector: "[reportViewRenderer]", inputs: ["view", "moDataList", "allChecked", "groupby", "isCheckList", "selectedCount", "hasSummary", "relationList", "columns", "columnsCount", "secondaryColumns", "contextMenuItems", "conditionalFormats", "deviceName", "deviceSize", "mobileOrTablet", "access", "title", "customFieldInfo", "selectedMo", "allColumns", "viewSetting", "inlineEditMode", "onlyInlineEdit", "allowInlineEdit", "popin", "hasSelected", "formSetting", "disableOverflowContextMenu", "navigationArrow", "typeDefId", "containerWidth", "extraRelation", "contextView", "contentDensity", "hideOpenIcon", "openOnClick", "inDialog", "isMultiSelect", "disableResponsive", "cartableTemplates", "cartableChildsMo"], outputs: ["editFormPanelCancel", "editFormPanelValueChange", "ulvCommandClick", "sortAscending", "sortDescending", "filter", "deselectAll", "rowCheck", "rowClick", "executeToolbarButton", "expandClick", "trackBySelectedFn", "cartableFormClosed", "createNewMo", "updateMo", "hasDetailsInRow", "allCheckbox", "mandatory", "editFormPanelSave", "columnResized", "selectNextInlineRecord", "workflowShareButtons"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }, { kind: "pipe", type: i2.ContextMenuPipe, name: "contextMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiReportContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-report-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--render container-->\n<canvas #canvas style=\"display: none\"></canvas>\n<ng-container\n    *ngTemplateOutlet=\"\n        renderContainer;\n        context: {\n            $implicit: gridDataSource.data$ | async,\n            allChecked: allChecked$ | async,\n            groupby: groupby$ | async,\n            isCheckList: context.Setting.View?.IsCheckList,\n            columns: columns$ | async,\n            columnsCount: columnsCount$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            onlyInlineEdit: onlyInlineEdit$ | async,\n            secondaryColumns: secondaryColumns$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            popin: (mobileOrTablet$ | async) || (secondaryColumnsCount$ | async) ? true : false,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: conditionalFormats$ | async,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            mobileOrTablet: mobileOrTablet$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            title: title$ | async,\n            rtl: rtl$ | async,\n            hideToolbar: (hideToolbar$ | async) === true || viewSetting.HideToolbar,\n            selectedView: selectedView,\n            viewCollection: viewCollection,\n            allColumns: allColumns,\n            gridSetting: gridSetting$ | async,\n            hasSummary: context.Setting.View?.HasSummaryRow,\n            contentDensity: contentDensity$ | async,\n            formLayout: layout$ | async,\n            hasSelected: hasSelected$ | async,\n            disableOverflowContextMenu: viewSetting.DisableOverflowContextMenu,\n            showCreateForm: viewSetting.ShowCreateForm,\n            hideOpenIcon: viewSetting.HideOpenIcon,\n            openOnClick: viewSetting.OpenOnClick,\n            navigationArrow: navigationArrow$ | async,\n            containerWidth: containerWidth$ | async,\n            typeDefId: context.Setting.Extra.Report.TypeDefId,\n            formSetting: context.Setting.FormTemplate,\n            extraRelation: context.Setting.Extra?.Relation,\n            contextView: context.Setting.View,\n            cartableTemplates: cartableTemplates$ | async,\n            cartableChildsMo: cartableChildsMo$ | async,\n            disableResponsive: viewSetting.DisableResponsive,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            customFieldInfo: context.Setting.CustomFieldInfo,\n            selectedMo: selectedMo$ | async,\n            selectedCount: selectedCount$ | async\n        }\n    \"\n></ng-container>\n<!--render container -->\n<ng-template\n    #renderContainer\n    let-moDataList\n    let-allChecked=\"allChecked\"\n    let-isCheckList=\"isCheckList\"\n    let-columns=\"columns\"\n    let-columnsCount=\"columnsCount\"\n    let-groupby=\"groupby\"\n    let-secondaryColumns=\"secondaryColumns\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-access=\"access\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-popin=\"popin\"\n    let-mobileOrTablet=\"mobileOrTablet\"\n    let-title=\"title\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-onlyInlineEdit=\"onlyInlineEdit\"\n    let-allowInlineEdit=\"allowInlineEdit\"\n    let-rtl=\"rtl\"\n    let-allColumns=\"allColumns\"\n    let-selectedView=\"selectedView\"\n    let-viewCollection=\"viewCollection\"\n    let-hideToolbar=\"hideToolbar\"\n    let-gridSetting=\"gridSetting\"\n    let-contentDensity=\"contentDensity\"\n    let-formLayout=\"formLayout\"\n    let-hasSelected=\"hasSelected\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-navigationArrow=\"navigationArrow\"\n    let-containerWidth=\"containerWidth\"\n    let-hasSummary=\"hasSummary\"\n    let-typeDefId=\"typeDefId\"\n    let-formSetting=\"formSetting\"\n    let-extraRelation=\"extraRelation\"\n    let-contextView=\"contextView\"\n    let-showCreateForm=\"showCreateForm\"\n    let-hideOpenIcon=\"hideOpenIcon\"\n    let-cartableTemplates=\"cartableTemplates\"\n    let-cartableChildsMo=\"cartableChildsMo\"\n    let-openOnClick=\"openOnClick\"\n    let-disableResponsive=\"disableResponsive\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-customFieldInfo=\"customFieldInfo\"\n    let-selectedMo=\"selectedMo\"\n    let-selectedCount=\"selectedCount\"\n>\n    <div *ngIf=\"showCreateForm\">\n        <bsu-report-new-top-form\n            [extraRelation]=\"extraRelation\"\n            [moDataListCount]=\"moDataList.length\"\n            [selectedMo]=\"selectedMo\"\n            [formSetting]=\"formSetting\"\n            [typeDefId]=\"typeDefId\"\n            [inlineEditMode]=\"true\"\n            [isChecked]=\"true\"\n            (add)=\"onNewTopFormAdd($event)\"\n            (save)=\"onSaveTopForm($event)\"\n        ></bsu-report-new-top-form>\n    </div>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [access]=\"access\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [inDialog]=\"inDialog\"\n        [hasSelected]=\"hasSelected\"\n        [contentDensity]=\"contentDensity\"\n        [viewCollection]=\"viewCollection\"\n        [reportView]=\"selectedView\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        (sortClick)=\"onSortSettings($event)\"\n        (groupbyClick)=\"onGroupbySettings($event)\"\n        (columnClick)=\"onColumnSettings($event)\"\n        (editModeClick)=\"onEditMode()\"\n        (viewClick)=\"onChangeView($event)\"\n        (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\n    ></bsu-ulv-toolbar>\n\n    <div\n        class=\"report-view\"\n        [attr.reportCaption]=\"context.Setting.Extra.Report.Caption\"\n        reportViewRenderer\n        [selectedMo]=\"selectedMo\"\n        [selectedCount]=\"selectedCount\"\n        [hasSelected]=\"hasSelected\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [customFieldInfo]=\"customFieldInfo\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [openOnClick]=\"openOnClick\"\n        [contextView]=\"contextView\"\n        [containerWidth]=\"containerWidth\"\n        [extraRelation]=\"extraRelation\"\n        [typeDefId]=\"typeDefId\"\n        [cartableTemplates]=\"cartableTemplates\"\n        [cartableChildsMo]=\"cartableChildsMo\"\n        [view]=\"selectedView\"\n        [isCheckList]=\"isCheckList\"\n        [allChecked]=\"allChecked\"\n        [moDataList]=\"moDataList\"\n        [access]=\"access\"\n        [groupby]=\"groupby\"\n        [contentDensity]=\"contentDensity\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [formSetting]=\"formSetting\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [navigationArrow]=\"navigationArrow\"\n        [title]=\"title\"\n        [mobileOrTablet]=\"mobileOrTablet\"\n        [popin]=\"popin\"\n        [secondaryColumns]=\"secondaryColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [columns]=\"columns\"\n        [allColumns]=\"allColumns\"\n        [hasSummary]=\"hasSummary\"\n        [columnsCount]=\"columnsCount\"\n        [formLayout]=\"formLayout\"\n        [disableResponsive]=\"disableResponsive\"\n        (executeToolbarButton)=\"onExecuteToolbarButton($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (ulvCommandClick)=\"onUlvCommand($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n        (deselectAll)=\"onDeselectAll()\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (cartableFormClosed)=\"onCartableFormClosed($event)\"\n        (createNewMo)=\"onCreateNewMo()\"\n        (updateMo)=\"onUpdateMo($event)\"\n        (mandatory)=\"onMandatory($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n    ></div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}.view-row{cursor:pointer}.header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:.5rem;background-color:var(--sapBaseColor)}.header span{font-size:1.7rem;font-weight:300}.btn-margin{margin:0 8px 0 0}.table-header-btn-group{display:flex;justify-content:flex-end;flex-grow:1}.context-command{margin:0 2px}.body-wrapper,.body-wrapper table{width:100%}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.root-grouped{color:green}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.single-select{min-width:2rem;max-width:2rem;width:2rem;text-align:center}.grid-editable-btn-group{display:flex;justify-content:space-evenly;align-items:center}table.fixed{table-layout:fixed}table.fixed td{overflow:hidden}::ng-deep span.fd-toolbar__spacer{display:none}\n"] }]
+            args: [{ selector: 'bsu-ui-report-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--render container-->\n<ng-container\n    *ngTemplateOutlet=\"\n        renderContainer;\n        context: {\n            $implicit: gridDataSource.data$ | async,\n            allChecked: allChecked$ | async,\n            groupby: groupby$ | async,\n            isCheckList: context.Setting.View?.IsCheckList,\n            columns: columns$ | async,\n            columnsCount: columnsCount$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            onlyInlineEdit: onlyInlineEdit$ | async,\n            secondaryColumns: secondaryColumns$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            popin: (mobileOrTablet$ | async) || (secondaryColumnsCount$ | async) ? true : false,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: conditionalFormats$ | async,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            mobileOrTablet: mobileOrTablet$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            title: title$ | async,\n            rtl: rtl$ | async,\n            hideToolbar: (hideToolbar$ | async) === true || viewSetting.HideToolbar,\n            selectedView: selectedView,\n            viewCollection: viewCollection,\n            allColumns: allColumns,\n            gridSetting: gridSetting$ | async,\n            hasSummary: context.Setting.View?.HasSummaryRow,\n            contentDensity: contentDensity$ | async,\n            formLayout: layout$ | async,\n            hasSelected: hasSelected$ | async,\n            disableOverflowContextMenu: viewSetting.DisableOverflowContextMenu,\n            showCreateForm: viewSetting.ShowCreateForm,\n            hideOpenIcon: viewSetting.HideOpenIcon,\n            openOnClick: viewSetting.OpenOnClick,\n            navigationArrow: navigationArrow$ | async,\n            containerWidth: containerWidth$ | async,\n            typeDefId: context.Setting.Extra.Report.TypeDefId,\n            formSetting: context.Setting.FormTemplate,\n            extraRelation: context.Setting.Extra?.Relation,\n            contextView: context.Setting.View,\n            cartableTemplates: cartableTemplates$ | async,\n            cartableChildsMo: cartableChildsMo$ | async,\n            disableResponsive: viewSetting.DisableResponsive,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            customFieldInfo: context.Setting.CustomFieldInfo,\n            selectedMo: selectedMo$ | async,\n            selectedCount: selectedCount$ | async\n        }\n    \"\n></ng-container>\n<!--render container -->\n<ng-template\n    #renderContainer\n    let-moDataList\n    let-allChecked=\"allChecked\"\n    let-isCheckList=\"isCheckList\"\n    let-columns=\"columns\"\n    let-columnsCount=\"columnsCount\"\n    let-groupby=\"groupby\"\n    let-secondaryColumns=\"secondaryColumns\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-access=\"access\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-popin=\"popin\"\n    let-mobileOrTablet=\"mobileOrTablet\"\n    let-title=\"title\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-onlyInlineEdit=\"onlyInlineEdit\"\n    let-allowInlineEdit=\"allowInlineEdit\"\n    let-rtl=\"rtl\"\n    let-allColumns=\"allColumns\"\n    let-selectedView=\"selectedView\"\n    let-viewCollection=\"viewCollection\"\n    let-hideToolbar=\"hideToolbar\"\n    let-gridSetting=\"gridSetting\"\n    let-contentDensity=\"contentDensity\"\n    let-formLayout=\"formLayout\"\n    let-hasSelected=\"hasSelected\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-navigationArrow=\"navigationArrow\"\n    let-containerWidth=\"containerWidth\"\n    let-hasSummary=\"hasSummary\"\n    let-typeDefId=\"typeDefId\"\n    let-formSetting=\"formSetting\"\n    let-extraRelation=\"extraRelation\"\n    let-contextView=\"contextView\"\n    let-showCreateForm=\"showCreateForm\"\n    let-hideOpenIcon=\"hideOpenIcon\"\n    let-cartableTemplates=\"cartableTemplates\"\n    let-cartableChildsMo=\"cartableChildsMo\"\n    let-openOnClick=\"openOnClick\"\n    let-disableResponsive=\"disableResponsive\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-customFieldInfo=\"customFieldInfo\"\n    let-selectedMo=\"selectedMo\"\n    let-selectedCount=\"selectedCount\"\n>\n    <div *ngIf=\"showCreateForm\">\n        <bsu-report-new-top-form\n            [extraRelation]=\"extraRelation\"\n            [moDataListCount]=\"moDataList.length\"\n            [selectedMo]=\"selectedMo\"\n            [formSetting]=\"formSetting\"\n            [typeDefId]=\"typeDefId\"\n            [inlineEditMode]=\"true\"\n            [isChecked]=\"true\"\n            (add)=\"onNewTopFormAdd($event)\"\n            (save)=\"onSaveTopForm($event)\"\n        ></bsu-report-new-top-form>\n    </div>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [access]=\"access\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [inDialog]=\"inDialog\"\n        [hasSelected]=\"hasSelected\"\n        [contentDensity]=\"contentDensity\"\n        [viewCollection]=\"viewCollection\"\n        [reportView]=\"selectedView\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        (sortClick)=\"onSortSettings($event)\"\n        (groupbyClick)=\"onGroupbySettings($event)\"\n        (columnClick)=\"onColumnSettings($event)\"\n        (editModeClick)=\"onEditMode()\"\n        (viewClick)=\"onChangeView($event)\"\n        (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\n    ></bsu-ulv-toolbar>\n\n    <div\n        class=\"report-view\"\n        [attr.reportCaption]=\"context.Setting.Extra.Report.Caption\"\n        reportViewRenderer\n        [selectedMo]=\"selectedMo\"\n        [selectedCount]=\"selectedCount\"\n        [hasSelected]=\"hasSelected\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [customFieldInfo]=\"customFieldInfo\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [openOnClick]=\"openOnClick\"\n        [contextView]=\"contextView\"\n        [containerWidth]=\"containerWidth\"\n        [extraRelation]=\"extraRelation\"\n        [typeDefId]=\"typeDefId\"\n        [cartableTemplates]=\"cartableTemplates\"\n        [cartableChildsMo]=\"cartableChildsMo\"\n        [view]=\"selectedView\"\n        [isCheckList]=\"isCheckList\"\n        [allChecked]=\"allChecked\"\n        [moDataList]=\"moDataList\"\n        [access]=\"access\"\n        [groupby]=\"groupby\"\n        [contentDensity]=\"contentDensity\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [formSetting]=\"formSetting\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [navigationArrow]=\"navigationArrow\"\n        [title]=\"title\"\n        [mobileOrTablet]=\"mobileOrTablet\"\n        [popin]=\"popin\"\n        [secondaryColumns]=\"secondaryColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [columns]=\"columns\"\n        [allColumns]=\"allColumns\"\n        [hasSummary]=\"hasSummary\"\n        [columnsCount]=\"columnsCount\"\n        [formLayout]=\"formLayout\"\n        [disableResponsive]=\"disableResponsive\"\n        (hasDetailsInRow)=\"onHasDetailsInRow($event, deviceSize)\"\n        (executeToolbarButton)=\"onExecuteToolbarButton($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (ulvCommandClick)=\"onUlvCommand($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n        (deselectAll)=\"onDeselectAll()\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (cartableFormClosed)=\"onCartableFormClosed($event)\"\n        (createNewMo)=\"onCreateNewMo()\"\n        (updateMo)=\"onUpdateMo($event)\"\n        (mandatory)=\"onMandatory($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n    ></div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}.view-row{cursor:pointer}.header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:.5rem;background-color:var(--sapBaseColor)}.header span{font-size:1.7rem;font-weight:300}.btn-margin{margin:0 8px 0 0}.table-header-btn-group{display:flex;justify-content:flex-end;flex-grow:1}.context-command{margin:0 2px}.body-wrapper,.body-wrapper table{width:100%}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.root-grouped{color:green}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.single-select{min-width:2rem;max-width:2rem;width:2rem;text-align:center}.grid-editable-btn-group{display:flex;justify-content:space-evenly;align-items:center}table.fixed{table-layout:fixed}table.fixed td{overflow:hidden}::ng-deep span.fd-toolbar__spacer{display:none}\n"] }]
         }], propDecorators: { tableView: [{
                 type: ViewChild,
                 args: ['renderTable', { static: true }]
@@ -4985,10 +5009,10 @@ class UiListViewComponent extends ReportViewBaseComponent {
     }
 }
 UiListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiListViewComponent, selector: "bsu-ui-list-view", viewQueries: [{ propertyName: "popupModeTemplateRef", first: true, predicate: ["popupMode"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultModeTemplateRef", first: true, predicate: ["defaultMode"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"selectedPresentaionTemplate\"></ng-container>\n\n<ng-template #popupMode>\n    <ng-container *ngTemplateOutlet=\"deviceSize === 's' ? mobileTpl : desktopTpl\"></ng-container>\n\n    <!-- <fd-menu [appendTo]=\"_el\"\n    #menu [mobile]=\"deviceSize === 's'\" >\n    </fd-menu> -->\n</ng-template>\n<ng-template #mobileTpl>\n    <div class=\"popup-mode\">\n        <ng-container *ngTemplateOutlet=\"buttonDropDown; context: { menu: menu }\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n    <fd-menu #menu [mobile]=\"true\" [mobileConfig]=\"{ title: title | bbbTranslate, hasCloseButton: true }\">\n        <ng-container *ngTemplateOutlet=\"defaultMode; context: { popover: menu, popupMode: true }\"></ng-container>\n    </fd-menu>\n</ng-template>\n<ng-template #desktopTpl>\n    <fd-popover #popover fillControlMode=\"equal\">\n        <fd-popover-control class=\"popup-mode\">\n            <ng-container *ngTemplateOutlet=\"buttonDropDown\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"defaultMode; context: { popover: popover, popupMode: true }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n</ng-template>\n<ng-template #buttonDropDown let-menu=\"menu\">\n    <button class=\"drop-down\" fd-button [label]=\"title | bbbTranslate\" [fdMenu]=\"true\" [fdMenuTrigger]=\"menu\">\n        <span\n            *ngIf=\"selectedCount > 0\"\n            fd-object-status\n            [inverted]=\"true\"\n            [label]=\"selectedCount\"\n            [title]=\"selectedCount\"\n        ></span>\n    </button>\n</ng-template>\n<ng-template #tokensTpl>\n    <div *ngIf=\"hasSelected\" style=\"padding: 5px; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px\">\n        <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n            <fd-token *ngIf=\"mo.$IsChecked\" fdCozy [readOnly]=\"false\" (onCloseClick)=\"onRowCheck({mo, index})\">{{\n                columns[0].Caption | rval: mo:columns:true\n            }}</fd-token>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultMode let-popover=\"popover\" let-popupMode=\"popupMode\">\n    <fd-layout-panel [class.popup-mode]=\"popupMode\" [ngClass]=\"'size-' + deviceSize\">\n        <fd-layout-panel-header>\n            <fd-layout-panel-head>\n                <h4 fd-layout-panel-title>{{ title | bbbTranslate }}</h4>\n                <span\n                    *ngIf=\"selectedCount > 0\"\n                    fd-object-status\n                    [inverted]=\"true\"\n                    [label]=\"selectedCount\"\n                    [title]=\"selectedCount\"\n                ></span>\n            </fd-layout-panel-head>\n            <fd-layout-panel-actions>\n                <button\n                    *ngIf=\"deviceSize !== 's'\"\n                    style=\"margin-top: 5px\"\n                    fd-button\n                    glyph=\"decline\"\n                    fdType=\"transparent\"\n                    (click)=\"popover.close()\"\n                ></button>\n            </fd-layout-panel-actions>\n        </fd-layout-panel-header>\n        <fd-layout-panel-filters *ngIf=\"isCheckList\">\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <a class=\"clearCheckAll\" (click)=\"onAllCheckbox($event)\" fd-link [aria-label]=\"'All' | bbbTranslate\">{{\n                    'All' | bbbTranslate\n                }}</a>\n                <label fd-toolbar-label style=\"font-size: 1rem; font-weight: bold\">.</label>\n                <a\n                    (click)=\"onClearCheckbox()\"\n                    fd-toolbar-item\n                    class=\"clearCheckAll\"\n                    fd-link\n                    [aria-label]=\"'Clear' | bbbTranslate\"\n                    >{{ 'Clear' | bbbTranslate }}</a\n                >\n            </fd-toolbar>\n        </fd-layout-panel-filters>\n\n        <fd-layout-panel-body [bleed]=\"true\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    isDisplayType ? displayListTemplate : standardListTemplate;\n                    context: {\n                        $implicit: moDataList,\n                        isCheckList: isCheckList,\n                        groupby: groupby,\n                        conditionalFormats: conditionalFormats,\n                        deviceName: deviceName,\n                        viewSetting: viewSetting,\n                        allColumns: allColumns,\n                        access: access,\n                        rtl: rtl,\n                        popover: popover\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-layout-panel-body>\n    </fd-layout-panel>\n</ng-template>\n\n<!--display list-->\n<ng-template\n    #displayListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-allColumns=\"allColumns\"\n    let-viewSetting=\"viewSetting\"\n    let-access=\"access\"\n    let-rtl=\"rtl\"\n>\n    <ul\n        fd-list\n        class=\"display-list fd-list--navigation\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; let last = last\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n<!--standard list-->\n<ng-template\n    #standardListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-allColumns=\"allColumns\"\n    let-deviceName=\"deviceName\"\n    let-access=\"access\"\n    let-viewSetting=\"viewSetting\"\n    let-rtl=\"rtl\"\n    let-last=\"last\"\n>\n    <ul\n        class=\"fd-list--navigation\"\n        [class.fd-list--byline]=\"!isDisplayType\"\n        fd-list\n        [byline]=\"true\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<!--noData-->\n<ng-template #noData>\n    <bsu-no-data></bsu-no-data>\n</ng-template>\n<ng-template\n    #itemTemplate\n    let-mo\n    let-index=\"index\"\n    let-last=\"last\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n>\n    <li\n        fd-list-group-header\n        *ngIf=\"mo.group || mo.group === ''; else listItemTemplate\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [attr.level]=\"mo.level\"\n        [class.root-group]=\"mo.level === 0\"\n    >\n        <fd-icon\n            [glyph]=\"mo.expanded ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n            class=\"cell-expand\"\n            (click)=\"onExpandClick(mo)\"\n        ></fd-icon>\n        <span fd-list-title>{{ mo.group }}</span>\n    </li>\n    <ng-template #listItemTemplate>\n        <ng-container\n            *ngTemplateOutlet=\"\n                hasRowOlgo ? dynamicItemTemplate : defaultItem;\n                context: {\n                    $implicit: mo,\n                    index: index,\n                    columns: columns,\n                    moDataList: moDataList,\n                    moDataListCount: moDataList.length\n                }\n            \"\n        ></ng-container>\n        <ng-template\n            #defaultItem\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bsu-list-item\n                *ngIf=\"!hasRowOlgo; else dynamicItemTemplate\"\n                [isDisplayType]=\"isDisplayType\"\n                [mo]=\"mo\"\n                [isChecked]=\"mo.$IsChecked\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"listSetting\"\n                [editMode]=\"inlineEditMode\"\n                [rtl]=\"rtl\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [formSetting]=\"formSetting\"\n                [allColumns]=\"allColumns\"\n                [contentDensity]=\"contentDensity\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                (rowCheck)=\"onRowCheck($event)\"\n                (rowClick)=\"onRowClick($event)\"\n                (ulvCommand)=\"onUlvCommand($event)\"\n                (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n            >\n            </bsu-list-item>\n        </ng-template>\n\n        <ng-template\n            #dynamicItemTemplate\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bnrc-dynamic-item-component\n                [component]=\"viewSetting.RowOlgo\"\n                [mo]=\"mo\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [moDataList]=\"moDataList\"\n                [showDetailsInRow]=\"showDetailsInRow\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [detailsColumns]=\"detailsColumns\"\n                [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n                [cartableTemplate]=\"cartableTemplates[mo.RelatedMo?.$TypeDefId]\"\n                [cartableMo]=\"mo.RelatedMo\"\n                [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n                [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n                [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n                [detailsComponent]=\"detailsComponent\"\n                [isChecked]=\"mo.$IsChecked\"\n                [visibility]=\"mo.$Visibility\"\n                [expanded]=\"mo.$Expanded\"\n                [level]=\"mo.$Level\"\n                [parentExpanded]=\"mo.$Parent?.$Expanded\"\n                [moDataListCount]=\"moDataListCount\"\n                [columnsCount]=\"columnsCount - detailsColumns.length\"\n                [typeDefId]=\"typeDefId\"\n                [extraRelation]=\"extraRelation\"\n                [formSetting]=\"formSetting\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"viewSetting\"\n                [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n                [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [access]=\"access\"\n                [inlineEditMode]=\"inlineEditMode\"\n                [allowInlineEdit]=\"allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [allColumns]=\"allColumns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                [rowIndicator]=\"columns[0].MetaFieldTypeId === '41'\"\n                (events)=\"onOlgoEvents($event)\"\n            >\n            </bnrc-dynamic-item-component>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [".fd-list__group-header{column-gap:10px;align-items:center}.header th{border-left:none!important;border-right:none!important}.clearCheckAll{text-decoration:none!important}.fd-list--navigation-indication .fd-list__item:after{min-width:0!important}li.standard-list-row{padding-top:.2rem;padding-bottom:.2rem;min-height:4rem;justify-content:space-evenly;column-gap:10px}li.standard-list-row:hover:not(.selected){background-color:var(--sapBackgroundColor, #f7f7f7)}li.standard-list-row .fd-list__content{row-gap:.4rem}li.standard-list-row .fd-list__content .fd-list__byline{padding:0;font-size:.775rem}li.standard-list-row ::ng-deep .fd-form-item{position:static}li.standard-list-row ::ng-deep .fd-form-item .fd-checkbox__label--compact{padding:0;margin-left:0}li.standard-list-row ::ng-deep fd-icon{font-size:.75rem!important}fd-layout-panel{height:100%}.li-link.checklink[rtl=true]{padding-right:0!important}.li-link.checklist[rtl=false]{padding-left:0!important}.standard-list-group-label{padding-top:10px;padding-bottom:3px}fd-layout-panel-header{display:none}fd-layout-panel.popup-mode.size-s{box-shadow:none!important}fd-layout-panel.popup-mode.size-s fd-layout-panel-header{display:none!important}.popup-mode fd-layout-panel-header{display:flex;min-height:1rem;height:1rem;border:none!important}.popup-mode fd-layout-panel-header h4{font-weight:700;font-size:1rem}.popup-mode fd-layout-panel-head{display:flex;column-gap:5px;align-items:center;justify-content:center}.popup-mode ::ng-deep li{border:none!important}.popup-mode fd-layout-panel-body{margin-top:.3rem}.popup-mode fd-layout-panel-filters{border:none!important;padding:0 1rem}.popup-mode .drop-down{width:100%;max-width:100%;max-height:2rem!important;height:2rem!important;background:var(--sapButton_Background)!important;border:1px solid #ccc!important}.popup-mode .drop-down ::ng-deep span{font-size:1rem!important;line-height:1.2rem!important}.popup-mode .drop-down ::ng-deep fd-icon{position:absolute;left:10px}fd-popover{width:100%;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i3$7.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$6.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i7$3.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i7$3.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i7$3.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i7$3.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i7$3.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i7$3.LayoutPanelFiltersComponent, selector: "fd-layout-panel-filters" }, { kind: "component", type: i7$3.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i9.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i7$1.ToolbarLabelDirective, selector: "[fd-toolbar-label]" }, { kind: "component", type: i9$2.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: NoDataComponent, selector: "bsu-no-data" }, { kind: "component", type: ListItemComponent, selector: "bsu-list-item", inputs: ["setting", "isDisplayType"] }, { kind: "pipe", type: i2.MultipleGroupByPipe, name: "multipleGroupBy" }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterColumnsByDetailsPipe, name: "filterColumnsByDetails" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiListViewComponent, selector: "bsu-ui-list-view", viewQueries: [{ propertyName: "popupModeTemplateRef", first: true, predicate: ["popupMode"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultModeTemplateRef", first: true, predicate: ["defaultMode"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"selectedPresentaionTemplate\"></ng-container>\n\n<ng-template #popupMode>\n    <ng-container *ngTemplateOutlet=\"deviceSize === 's' ? mobileTpl : desktopTpl\"></ng-container>\n\n    <!-- <fd-menu [appendTo]=\"_el\"\n    #menu [mobile]=\"deviceSize === 's'\" >\n    </fd-menu> -->\n</ng-template>\n<ng-template #mobileTpl>\n    <div class=\"popup-mode\">\n        <ng-container *ngTemplateOutlet=\"buttonDropDown; context: { menu: menu }\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n    <fd-menu #menu [mobile]=\"true\" [mobileConfig]=\"{ title: title | bbbTranslate, hasCloseButton: true }\">\n        <ng-container *ngTemplateOutlet=\"defaultMode; context: { popover: menu, popupMode: true }\"></ng-container>\n    </fd-menu>\n</ng-template>\n<ng-template #desktopTpl>\n    <fd-popover #popover fillControlMode=\"equal\">\n        <fd-popover-control class=\"popup-mode\">\n            <ng-container *ngTemplateOutlet=\"buttonDropDown\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"defaultMode; context: { popover: popover, popupMode: true }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n</ng-template>\n<ng-template #buttonDropDown let-menu=\"menu\">\n    <button class=\"drop-down\" fd-button [label]=\"title | bbbTranslate\" [fdMenu]=\"true\" [fdMenuTrigger]=\"menu\">\n        <span\n            *ngIf=\"selectedCount > 0 && isCheckList\"\n            fd-object-status\n            [inverted]=\"true\"\n            [label]=\"selectedCount\"\n            [title]=\"selectedCount\"\n        ></span>\n    </button>\n</ng-template>\n<ng-template #tokensTpl>\n    <div\n        *ngIf=\"isCheckList && hasSelected\"\n        style=\"padding: 5px; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px\"\n    >\n        <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n            <fd-token *ngIf=\"mo.$IsChecked\" fdCozy [readOnly]=\"false\" (onCloseClick)=\"onRowCheck({mo, index})\">{{\n                columns[0].Caption | rval: mo:columns:true\n            }}</fd-token>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultMode let-popover=\"popover\" let-popupMode=\"popupMode\">\n    <fd-layout-panel [class.popup-mode]=\"popupMode\" [ngClass]=\"'size-' + deviceSize\">\n        <fd-layout-panel-header>\n            <fd-layout-panel-head>\n                <h4 fd-layout-panel-title>{{ title | bbbTranslate }}</h4>\n                <span\n                    *ngIf=\"selectedCount > 0\"\n                    fd-object-status\n                    [inverted]=\"true\"\n                    [label]=\"selectedCount\"\n                    [title]=\"selectedCount\"\n                ></span>\n            </fd-layout-panel-head>\n            <fd-layout-panel-actions>\n                <button\n                    *ngIf=\"deviceSize !== 's'\"\n                    style=\"margin-top: 5px\"\n                    fd-button\n                    glyph=\"decline\"\n                    fdType=\"transparent\"\n                    (click)=\"popover.close()\"\n                ></button>\n            </fd-layout-panel-actions>\n        </fd-layout-panel-header>\n        <fd-layout-panel-filters *ngIf=\"isCheckList\">\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <a class=\"clearCheckAll\" (click)=\"onAllCheckbox($event)\" fd-link [aria-label]=\"'All' | bbbTranslate\">{{\n                    'All' | bbbTranslate\n                }}</a>\n                <label fd-toolbar-label style=\"font-size: 1rem; font-weight: bold\">.</label>\n                <a\n                    (click)=\"onClearCheckbox()\"\n                    fd-toolbar-item\n                    class=\"clearCheckAll\"\n                    fd-link\n                    [aria-label]=\"'Clear' | bbbTranslate\"\n                    >{{ 'Clear' | bbbTranslate }}</a\n                >\n            </fd-toolbar>\n        </fd-layout-panel-filters>\n\n        <fd-layout-panel-body [bleed]=\"true\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    isDisplayType ? displayListTemplate : standardListTemplate;\n                    context: {\n                        $implicit: moDataList,\n                        isCheckList: isCheckList,\n                        groupby: groupby,\n                        conditionalFormats: conditionalFormats,\n                        deviceName: deviceName,\n                        viewSetting: viewSetting,\n                        allColumns: allColumns,\n                        access: access,\n                        rtl: rtl,\n                        popover: popover\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-layout-panel-body>\n    </fd-layout-panel>\n</ng-template>\n\n<!--display list-->\n<ng-template\n    #displayListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-allColumns=\"allColumns\"\n    let-viewSetting=\"viewSetting\"\n    let-access=\"access\"\n    let-rtl=\"rtl\"\n>\n    <ul\n        fd-list\n        class=\"display-list fd-list--navigation\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; let last = last\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n<!--standard list-->\n<ng-template\n    #standardListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-allColumns=\"allColumns\"\n    let-deviceName=\"deviceName\"\n    let-access=\"access\"\n    let-viewSetting=\"viewSetting\"\n    let-rtl=\"rtl\"\n    let-last=\"last\"\n>\n    <ul\n        class=\"fd-list--navigation\"\n        [class.fd-list--byline]=\"!isDisplayType\"\n        fd-list\n        [byline]=\"true\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<!--noData-->\n<ng-template #noData>\n    <bsu-no-data></bsu-no-data>\n</ng-template>\n<ng-template\n    #itemTemplate\n    let-mo\n    let-index=\"index\"\n    let-last=\"last\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n>\n    <li\n        fd-list-group-header\n        *ngIf=\"mo.group || mo.group === ''; else listItemTemplate\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [attr.level]=\"mo.level\"\n        [class.root-group]=\"mo.level === 0\"\n    >\n        <fd-icon\n            [glyph]=\"mo.expanded ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n            class=\"cell-expand\"\n            (click)=\"onExpandClick(mo)\"\n        ></fd-icon>\n        <span fd-list-title>{{ mo.group }}</span>\n    </li>\n    <ng-template #listItemTemplate>\n        <ng-container\n            *ngTemplateOutlet=\"\n                hasRowOlgo ? dynamicItemTemplate : defaultItem;\n                context: {\n                    $implicit: mo,\n                    index: index,\n                    columns: columns,\n                    moDataList: moDataList,\n                    moDataListCount: moDataList.length\n                }\n            \"\n        ></ng-container>\n        <ng-template\n            #defaultItem\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bsu-list-item\n                *ngIf=\"!hasRowOlgo; else dynamicItemTemplate\"\n                [isDisplayType]=\"isDisplayType\"\n                [mo]=\"mo\"\n                [isChecked]=\"mo.$IsChecked\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"listSetting\"\n                [editMode]=\"inlineEditMode\"\n                [rtl]=\"rtl\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [formSetting]=\"formSetting\"\n                [allColumns]=\"allColumns\"\n                [contentDensity]=\"contentDensity\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                (rowCheck)=\"onRowCheck($event)\"\n                (rowClick)=\"onRowClick($event)\"\n                (ulvCommand)=\"onUlvCommand($event)\"\n                (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n            >\n            </bsu-list-item>\n        </ng-template>\n\n        <ng-template\n            #dynamicItemTemplate\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bnrc-dynamic-item-component\n                [component]=\"viewSetting.RowOlgo\"\n                [mo]=\"mo\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [moDataList]=\"moDataList\"\n                [showDetailsInRow]=\"showDetailsInRow\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [detailsColumns]=\"detailsColumns\"\n                [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n                [cartableTemplate]=\"cartableTemplates[mo.RelatedMo?.$TypeDefId]\"\n                [cartableMo]=\"mo.RelatedMo\"\n                [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n                [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n                [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n                [detailsComponent]=\"detailsComponent\"\n                [isChecked]=\"mo.$IsChecked\"\n                [visibility]=\"mo.$Visibility\"\n                [expanded]=\"mo.$Expanded\"\n                [level]=\"mo.$Level\"\n                [parentExpanded]=\"mo.$Parent?.$Expanded\"\n                [moDataListCount]=\"moDataListCount\"\n                [columnsCount]=\"columnsCount - detailsColumns.length\"\n                [typeDefId]=\"typeDefId\"\n                [extraRelation]=\"extraRelation\"\n                [formSetting]=\"formSetting\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"viewSetting\"\n                [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n                [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [access]=\"access\"\n                [inlineEditMode]=\"inlineEditMode\"\n                [allowInlineEdit]=\"allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [allColumns]=\"allColumns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                [rowIndicator]=\"columns[0].MetaFieldTypeId === '41'\"\n                (events)=\"onOlgoEvents($event)\"\n            >\n            </bnrc-dynamic-item-component>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [".fd-list__group-header{column-gap:10px;align-items:center}.header th{border-left:none!important;border-right:none!important}.clearCheckAll{text-decoration:none!important}.fd-list--navigation-indication .fd-list__item:after{min-width:0!important}li.standard-list-row{padding-top:.2rem;padding-bottom:.2rem;min-height:4rem;justify-content:space-evenly;column-gap:10px}li.standard-list-row:hover:not(.selected){background-color:var(--sapBackgroundColor, #f7f7f7)}li.standard-list-row .fd-list__content{row-gap:.4rem}li.standard-list-row .fd-list__content .fd-list__byline{padding:0;font-size:.775rem}li.standard-list-row ::ng-deep .fd-form-item{position:static}li.standard-list-row ::ng-deep .fd-form-item .fd-checkbox__label--compact{padding:0;margin-left:0}li.standard-list-row ::ng-deep fd-icon{font-size:.75rem!important}fd-layout-panel{height:100%}.li-link.checklink[rtl=true]{padding-right:0!important}.li-link.checklist[rtl=false]{padding-left:0!important}.standard-list-group-label{padding-top:10px;padding-bottom:3px}fd-layout-panel-header{display:none}fd-layout-panel.popup-mode.size-s{box-shadow:none!important}fd-layout-panel.popup-mode.size-s fd-layout-panel-header{display:none!important}.popup-mode fd-layout-panel-header{display:flex;min-height:1rem;height:1rem;border:none!important}.popup-mode fd-layout-panel-header h4{font-weight:700;font-size:1rem}.popup-mode fd-layout-panel-head{display:flex;column-gap:5px;align-items:center;justify-content:center}.popup-mode ::ng-deep li{border:none!important}.popup-mode fd-layout-panel-body{margin-top:.3rem}.popup-mode fd-layout-panel-filters{border:none!important;padding:0 1rem}.popup-mode .drop-down{width:100%;max-width:100%;max-height:2rem!important;height:2rem!important;background:var(--sapButton_Background)!important;border:1px solid #ccc!important}.popup-mode .drop-down ::ng-deep span{font-size:1rem!important;line-height:1.2rem!important}.popup-mode .drop-down ::ng-deep fd-icon{position:absolute;left:10px}fd-popover{width:100%;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i3$7.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$6.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i7$3.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i7$3.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i7$3.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i7$3.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i7$3.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i7$3.LayoutPanelFiltersComponent, selector: "fd-layout-panel-filters" }, { kind: "component", type: i7$3.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i9.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i7$1.ToolbarLabelDirective, selector: "[fd-toolbar-label]" }, { kind: "component", type: i9$2.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: NoDataComponent, selector: "bsu-no-data" }, { kind: "component", type: ListItemComponent, selector: "bsu-list-item", inputs: ["setting", "isDisplayType"] }, { kind: "pipe", type: i2.MultipleGroupByPipe, name: "multipleGroupBy" }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterColumnsByDetailsPipe, name: "filterColumnsByDetails" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-list-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngTemplateOutlet=\"selectedPresentaionTemplate\"></ng-container>\n\n<ng-template #popupMode>\n    <ng-container *ngTemplateOutlet=\"deviceSize === 's' ? mobileTpl : desktopTpl\"></ng-container>\n\n    <!-- <fd-menu [appendTo]=\"_el\"\n    #menu [mobile]=\"deviceSize === 's'\" >\n    </fd-menu> -->\n</ng-template>\n<ng-template #mobileTpl>\n    <div class=\"popup-mode\">\n        <ng-container *ngTemplateOutlet=\"buttonDropDown; context: { menu: menu }\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n    <fd-menu #menu [mobile]=\"true\" [mobileConfig]=\"{ title: title | bbbTranslate, hasCloseButton: true }\">\n        <ng-container *ngTemplateOutlet=\"defaultMode; context: { popover: menu, popupMode: true }\"></ng-container>\n    </fd-menu>\n</ng-template>\n<ng-template #desktopTpl>\n    <fd-popover #popover fillControlMode=\"equal\">\n        <fd-popover-control class=\"popup-mode\">\n            <ng-container *ngTemplateOutlet=\"buttonDropDown\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"defaultMode; context: { popover: popover, popupMode: true }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n</ng-template>\n<ng-template #buttonDropDown let-menu=\"menu\">\n    <button class=\"drop-down\" fd-button [label]=\"title | bbbTranslate\" [fdMenu]=\"true\" [fdMenuTrigger]=\"menu\">\n        <span\n            *ngIf=\"selectedCount > 0\"\n            fd-object-status\n            [inverted]=\"true\"\n            [label]=\"selectedCount\"\n            [title]=\"selectedCount\"\n        ></span>\n    </button>\n</ng-template>\n<ng-template #tokensTpl>\n    <div *ngIf=\"hasSelected\" style=\"padding: 5px; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px\">\n        <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n            <fd-token *ngIf=\"mo.$IsChecked\" fdCozy [readOnly]=\"false\" (onCloseClick)=\"onRowCheck({mo, index})\">{{\n                columns[0].Caption | rval: mo:columns:true\n            }}</fd-token>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultMode let-popover=\"popover\" let-popupMode=\"popupMode\">\n    <fd-layout-panel [class.popup-mode]=\"popupMode\" [ngClass]=\"'size-' + deviceSize\">\n        <fd-layout-panel-header>\n            <fd-layout-panel-head>\n                <h4 fd-layout-panel-title>{{ title | bbbTranslate }}</h4>\n                <span\n                    *ngIf=\"selectedCount > 0\"\n                    fd-object-status\n                    [inverted]=\"true\"\n                    [label]=\"selectedCount\"\n                    [title]=\"selectedCount\"\n                ></span>\n            </fd-layout-panel-head>\n            <fd-layout-panel-actions>\n                <button\n                    *ngIf=\"deviceSize !== 's'\"\n                    style=\"margin-top: 5px\"\n                    fd-button\n                    glyph=\"decline\"\n                    fdType=\"transparent\"\n                    (click)=\"popover.close()\"\n                ></button>\n            </fd-layout-panel-actions>\n        </fd-layout-panel-header>\n        <fd-layout-panel-filters *ngIf=\"isCheckList\">\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <a class=\"clearCheckAll\" (click)=\"onAllCheckbox($event)\" fd-link [aria-label]=\"'All' | bbbTranslate\">{{\n                    'All' | bbbTranslate\n                }}</a>\n                <label fd-toolbar-label style=\"font-size: 1rem; font-weight: bold\">.</label>\n                <a\n                    (click)=\"onClearCheckbox()\"\n                    fd-toolbar-item\n                    class=\"clearCheckAll\"\n                    fd-link\n                    [aria-label]=\"'Clear' | bbbTranslate\"\n                    >{{ 'Clear' | bbbTranslate }}</a\n                >\n            </fd-toolbar>\n        </fd-layout-panel-filters>\n\n        <fd-layout-panel-body [bleed]=\"true\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    isDisplayType ? displayListTemplate : standardListTemplate;\n                    context: {\n                        $implicit: moDataList,\n                        isCheckList: isCheckList,\n                        groupby: groupby,\n                        conditionalFormats: conditionalFormats,\n                        deviceName: deviceName,\n                        viewSetting: viewSetting,\n                        allColumns: allColumns,\n                        access: access,\n                        rtl: rtl,\n                        popover: popover\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-layout-panel-body>\n    </fd-layout-panel>\n</ng-template>\n\n<!--display list-->\n<ng-template\n    #displayListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-allColumns=\"allColumns\"\n    let-viewSetting=\"viewSetting\"\n    let-access=\"access\"\n    let-rtl=\"rtl\"\n>\n    <ul\n        fd-list\n        class=\"display-list fd-list--navigation\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; let last = last\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n<!--standard list-->\n<ng-template\n    #standardListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-allColumns=\"allColumns\"\n    let-deviceName=\"deviceName\"\n    let-access=\"access\"\n    let-viewSetting=\"viewSetting\"\n    let-rtl=\"rtl\"\n    let-last=\"last\"\n>\n    <ul\n        class=\"fd-list--navigation\"\n        [class.fd-list--byline]=\"!isDisplayType\"\n        fd-list\n        [byline]=\"true\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<!--noData-->\n<ng-template #noData>\n    <bsu-no-data></bsu-no-data>\n</ng-template>\n<ng-template\n    #itemTemplate\n    let-mo\n    let-index=\"index\"\n    let-last=\"last\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n>\n    <li\n        fd-list-group-header\n        *ngIf=\"mo.group || mo.group === ''; else listItemTemplate\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [attr.level]=\"mo.level\"\n        [class.root-group]=\"mo.level === 0\"\n    >\n        <fd-icon\n            [glyph]=\"mo.expanded ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n            class=\"cell-expand\"\n            (click)=\"onExpandClick(mo)\"\n        ></fd-icon>\n        <span fd-list-title>{{ mo.group }}</span>\n    </li>\n    <ng-template #listItemTemplate>\n        <ng-container\n            *ngTemplateOutlet=\"\n                hasRowOlgo ? dynamicItemTemplate : defaultItem;\n                context: {\n                    $implicit: mo,\n                    index: index,\n                    columns: columns,\n                    moDataList: moDataList,\n                    moDataListCount: moDataList.length\n                }\n            \"\n        ></ng-container>\n        <ng-template\n            #defaultItem\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bsu-list-item\n                *ngIf=\"!hasRowOlgo; else dynamicItemTemplate\"\n                [isDisplayType]=\"isDisplayType\"\n                [mo]=\"mo\"\n                [isChecked]=\"mo.$IsChecked\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"listSetting\"\n                [editMode]=\"inlineEditMode\"\n                [rtl]=\"rtl\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [formSetting]=\"formSetting\"\n                [allColumns]=\"allColumns\"\n                [contentDensity]=\"contentDensity\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                (rowCheck)=\"onRowCheck($event)\"\n                (rowClick)=\"onRowClick($event)\"\n                (ulvCommand)=\"onUlvCommand($event)\"\n                (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n            >\n            </bsu-list-item>\n        </ng-template>\n\n        <ng-template\n            #dynamicItemTemplate\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bnrc-dynamic-item-component\n                [component]=\"viewSetting.RowOlgo\"\n                [mo]=\"mo\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [moDataList]=\"moDataList\"\n                [showDetailsInRow]=\"showDetailsInRow\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [detailsColumns]=\"detailsColumns\"\n                [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n                [cartableTemplate]=\"cartableTemplates[mo.RelatedMo?.$TypeDefId]\"\n                [cartableMo]=\"mo.RelatedMo\"\n                [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n                [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n                [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n                [detailsComponent]=\"detailsComponent\"\n                [isChecked]=\"mo.$IsChecked\"\n                [visibility]=\"mo.$Visibility\"\n                [expanded]=\"mo.$Expanded\"\n                [level]=\"mo.$Level\"\n                [parentExpanded]=\"mo.$Parent?.$Expanded\"\n                [moDataListCount]=\"moDataListCount\"\n                [columnsCount]=\"columnsCount - detailsColumns.length\"\n                [typeDefId]=\"typeDefId\"\n                [extraRelation]=\"extraRelation\"\n                [formSetting]=\"formSetting\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"viewSetting\"\n                [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n                [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [access]=\"access\"\n                [inlineEditMode]=\"inlineEditMode\"\n                [allowInlineEdit]=\"allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [allColumns]=\"allColumns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                [rowIndicator]=\"columns[0].MetaFieldTypeId === '41'\"\n                (events)=\"onOlgoEvents($event)\"\n            >\n            </bnrc-dynamic-item-component>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [".fd-list__group-header{column-gap:10px;align-items:center}.header th{border-left:none!important;border-right:none!important}.clearCheckAll{text-decoration:none!important}.fd-list--navigation-indication .fd-list__item:after{min-width:0!important}li.standard-list-row{padding-top:.2rem;padding-bottom:.2rem;min-height:4rem;justify-content:space-evenly;column-gap:10px}li.standard-list-row:hover:not(.selected){background-color:var(--sapBackgroundColor, #f7f7f7)}li.standard-list-row .fd-list__content{row-gap:.4rem}li.standard-list-row .fd-list__content .fd-list__byline{padding:0;font-size:.775rem}li.standard-list-row ::ng-deep .fd-form-item{position:static}li.standard-list-row ::ng-deep .fd-form-item .fd-checkbox__label--compact{padding:0;margin-left:0}li.standard-list-row ::ng-deep fd-icon{font-size:.75rem!important}fd-layout-panel{height:100%}.li-link.checklink[rtl=true]{padding-right:0!important}.li-link.checklist[rtl=false]{padding-left:0!important}.standard-list-group-label{padding-top:10px;padding-bottom:3px}fd-layout-panel-header{display:none}fd-layout-panel.popup-mode.size-s{box-shadow:none!important}fd-layout-panel.popup-mode.size-s fd-layout-panel-header{display:none!important}.popup-mode fd-layout-panel-header{display:flex;min-height:1rem;height:1rem;border:none!important}.popup-mode fd-layout-panel-header h4{font-weight:700;font-size:1rem}.popup-mode fd-layout-panel-head{display:flex;column-gap:5px;align-items:center;justify-content:center}.popup-mode ::ng-deep li{border:none!important}.popup-mode fd-layout-panel-body{margin-top:.3rem}.popup-mode fd-layout-panel-filters{border:none!important;padding:0 1rem}.popup-mode .drop-down{width:100%;max-width:100%;max-height:2rem!important;height:2rem!important;background:var(--sapButton_Background)!important;border:1px solid #ccc!important}.popup-mode .drop-down ::ng-deep span{font-size:1rem!important;line-height:1.2rem!important}.popup-mode .drop-down ::ng-deep fd-icon{position:absolute;left:10px}fd-popover{width:100%;max-width:100%}\n"] }]
+            args: [{ selector: 'bsu-ui-list-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngTemplateOutlet=\"selectedPresentaionTemplate\"></ng-container>\n\n<ng-template #popupMode>\n    <ng-container *ngTemplateOutlet=\"deviceSize === 's' ? mobileTpl : desktopTpl\"></ng-container>\n\n    <!-- <fd-menu [appendTo]=\"_el\"\n    #menu [mobile]=\"deviceSize === 's'\" >\n    </fd-menu> -->\n</ng-template>\n<ng-template #mobileTpl>\n    <div class=\"popup-mode\">\n        <ng-container *ngTemplateOutlet=\"buttonDropDown; context: { menu: menu }\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n    <fd-menu #menu [mobile]=\"true\" [mobileConfig]=\"{ title: title | bbbTranslate, hasCloseButton: true }\">\n        <ng-container *ngTemplateOutlet=\"defaultMode; context: { popover: menu, popupMode: true }\"></ng-container>\n    </fd-menu>\n</ng-template>\n<ng-template #desktopTpl>\n    <fd-popover #popover fillControlMode=\"equal\">\n        <fd-popover-control class=\"popup-mode\">\n            <ng-container *ngTemplateOutlet=\"buttonDropDown\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"defaultMode; context: { popover: popover, popupMode: true }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n</ng-template>\n<ng-template #buttonDropDown let-menu=\"menu\">\n    <button class=\"drop-down\" fd-button [label]=\"title | bbbTranslate\" [fdMenu]=\"true\" [fdMenuTrigger]=\"menu\">\n        <span\n            *ngIf=\"selectedCount > 0 && isCheckList\"\n            fd-object-status\n            [inverted]=\"true\"\n            [label]=\"selectedCount\"\n            [title]=\"selectedCount\"\n        ></span>\n    </button>\n</ng-template>\n<ng-template #tokensTpl>\n    <div\n        *ngIf=\"isCheckList && hasSelected\"\n        style=\"padding: 5px; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px\"\n    >\n        <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n            <fd-token *ngIf=\"mo.$IsChecked\" fdCozy [readOnly]=\"false\" (onCloseClick)=\"onRowCheck({mo, index})\">{{\n                columns[0].Caption | rval: mo:columns:true\n            }}</fd-token>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultMode let-popover=\"popover\" let-popupMode=\"popupMode\">\n    <fd-layout-panel [class.popup-mode]=\"popupMode\" [ngClass]=\"'size-' + deviceSize\">\n        <fd-layout-panel-header>\n            <fd-layout-panel-head>\n                <h4 fd-layout-panel-title>{{ title | bbbTranslate }}</h4>\n                <span\n                    *ngIf=\"selectedCount > 0\"\n                    fd-object-status\n                    [inverted]=\"true\"\n                    [label]=\"selectedCount\"\n                    [title]=\"selectedCount\"\n                ></span>\n            </fd-layout-panel-head>\n            <fd-layout-panel-actions>\n                <button\n                    *ngIf=\"deviceSize !== 's'\"\n                    style=\"margin-top: 5px\"\n                    fd-button\n                    glyph=\"decline\"\n                    fdType=\"transparent\"\n                    (click)=\"popover.close()\"\n                ></button>\n            </fd-layout-panel-actions>\n        </fd-layout-panel-header>\n        <fd-layout-panel-filters *ngIf=\"isCheckList\">\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <a class=\"clearCheckAll\" (click)=\"onAllCheckbox($event)\" fd-link [aria-label]=\"'All' | bbbTranslate\">{{\n                    'All' | bbbTranslate\n                }}</a>\n                <label fd-toolbar-label style=\"font-size: 1rem; font-weight: bold\">.</label>\n                <a\n                    (click)=\"onClearCheckbox()\"\n                    fd-toolbar-item\n                    class=\"clearCheckAll\"\n                    fd-link\n                    [aria-label]=\"'Clear' | bbbTranslate\"\n                    >{{ 'Clear' | bbbTranslate }}</a\n                >\n            </fd-toolbar>\n        </fd-layout-panel-filters>\n\n        <fd-layout-panel-body [bleed]=\"true\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    isDisplayType ? displayListTemplate : standardListTemplate;\n                    context: {\n                        $implicit: moDataList,\n                        isCheckList: isCheckList,\n                        groupby: groupby,\n                        conditionalFormats: conditionalFormats,\n                        deviceName: deviceName,\n                        viewSetting: viewSetting,\n                        allColumns: allColumns,\n                        access: access,\n                        rtl: rtl,\n                        popover: popover\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-layout-panel-body>\n    </fd-layout-panel>\n</ng-template>\n\n<!--display list-->\n<ng-template\n    #displayListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-allColumns=\"allColumns\"\n    let-viewSetting=\"viewSetting\"\n    let-access=\"access\"\n    let-rtl=\"rtl\"\n>\n    <ul\n        fd-list\n        class=\"display-list fd-list--navigation\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; let last = last\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n<!--standard list-->\n<ng-template\n    #standardListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-allColumns=\"allColumns\"\n    let-deviceName=\"deviceName\"\n    let-access=\"access\"\n    let-viewSetting=\"viewSetting\"\n    let-rtl=\"rtl\"\n    let-last=\"last\"\n>\n    <ul\n        class=\"fd-list--navigation\"\n        [class.fd-list--byline]=\"!isDisplayType\"\n        fd-list\n        [byline]=\"true\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<!--noData-->\n<ng-template #noData>\n    <bsu-no-data></bsu-no-data>\n</ng-template>\n<ng-template\n    #itemTemplate\n    let-mo\n    let-index=\"index\"\n    let-last=\"last\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n>\n    <li\n        fd-list-group-header\n        *ngIf=\"mo.group || mo.group === ''; else listItemTemplate\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [attr.level]=\"mo.level\"\n        [class.root-group]=\"mo.level === 0\"\n    >\n        <fd-icon\n            [glyph]=\"mo.expanded ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n            class=\"cell-expand\"\n            (click)=\"onExpandClick(mo)\"\n        ></fd-icon>\n        <span fd-list-title>{{ mo.group }}</span>\n    </li>\n    <ng-template #listItemTemplate>\n        <ng-container\n            *ngTemplateOutlet=\"\n                hasRowOlgo ? dynamicItemTemplate : defaultItem;\n                context: {\n                    $implicit: mo,\n                    index: index,\n                    columns: columns,\n                    moDataList: moDataList,\n                    moDataListCount: moDataList.length\n                }\n            \"\n        ></ng-container>\n        <ng-template\n            #defaultItem\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bsu-list-item\n                *ngIf=\"!hasRowOlgo; else dynamicItemTemplate\"\n                [isDisplayType]=\"isDisplayType\"\n                [mo]=\"mo\"\n                [isChecked]=\"mo.$IsChecked\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"listSetting\"\n                [editMode]=\"inlineEditMode\"\n                [rtl]=\"rtl\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [formSetting]=\"formSetting\"\n                [allColumns]=\"allColumns\"\n                [contentDensity]=\"contentDensity\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                (rowCheck)=\"onRowCheck($event)\"\n                (rowClick)=\"onRowClick($event)\"\n                (ulvCommand)=\"onUlvCommand($event)\"\n                (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n            >\n            </bsu-list-item>\n        </ng-template>\n\n        <ng-template\n            #dynamicItemTemplate\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bnrc-dynamic-item-component\n                [component]=\"viewSetting.RowOlgo\"\n                [mo]=\"mo\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [moDataList]=\"moDataList\"\n                [showDetailsInRow]=\"showDetailsInRow\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [detailsColumns]=\"detailsColumns\"\n                [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n                [cartableTemplate]=\"cartableTemplates[mo.RelatedMo?.$TypeDefId]\"\n                [cartableMo]=\"mo.RelatedMo\"\n                [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n                [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n                [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n                [detailsComponent]=\"detailsComponent\"\n                [isChecked]=\"mo.$IsChecked\"\n                [visibility]=\"mo.$Visibility\"\n                [expanded]=\"mo.$Expanded\"\n                [level]=\"mo.$Level\"\n                [parentExpanded]=\"mo.$Parent?.$Expanded\"\n                [moDataListCount]=\"moDataListCount\"\n                [columnsCount]=\"columnsCount - detailsColumns.length\"\n                [typeDefId]=\"typeDefId\"\n                [extraRelation]=\"extraRelation\"\n                [formSetting]=\"formSetting\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"viewSetting\"\n                [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n                [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [access]=\"access\"\n                [inlineEditMode]=\"inlineEditMode\"\n                [allowInlineEdit]=\"allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [allColumns]=\"allColumns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                [rowIndicator]=\"columns[0].MetaFieldTypeId === '41'\"\n                (events)=\"onOlgoEvents($event)\"\n            >\n            </bnrc-dynamic-item-component>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [".fd-list__group-header{column-gap:10px;align-items:center}.header th{border-left:none!important;border-right:none!important}.clearCheckAll{text-decoration:none!important}.fd-list--navigation-indication .fd-list__item:after{min-width:0!important}li.standard-list-row{padding-top:.2rem;padding-bottom:.2rem;min-height:4rem;justify-content:space-evenly;column-gap:10px}li.standard-list-row:hover:not(.selected){background-color:var(--sapBackgroundColor, #f7f7f7)}li.standard-list-row .fd-list__content{row-gap:.4rem}li.standard-list-row .fd-list__content .fd-list__byline{padding:0;font-size:.775rem}li.standard-list-row ::ng-deep .fd-form-item{position:static}li.standard-list-row ::ng-deep .fd-form-item .fd-checkbox__label--compact{padding:0;margin-left:0}li.standard-list-row ::ng-deep fd-icon{font-size:.75rem!important}fd-layout-panel{height:100%}.li-link.checklink[rtl=true]{padding-right:0!important}.li-link.checklist[rtl=false]{padding-left:0!important}.standard-list-group-label{padding-top:10px;padding-bottom:3px}fd-layout-panel-header{display:none}fd-layout-panel.popup-mode.size-s{box-shadow:none!important}fd-layout-panel.popup-mode.size-s fd-layout-panel-header{display:none!important}.popup-mode fd-layout-panel-header{display:flex;min-height:1rem;height:1rem;border:none!important}.popup-mode fd-layout-panel-header h4{font-weight:700;font-size:1rem}.popup-mode fd-layout-panel-head{display:flex;column-gap:5px;align-items:center;justify-content:center}.popup-mode ::ng-deep li{border:none!important}.popup-mode fd-layout-panel-body{margin-top:.3rem}.popup-mode fd-layout-panel-filters{border:none!important;padding:0 1rem}.popup-mode .drop-down{width:100%;max-width:100%;max-height:2rem!important;height:2rem!important;background:var(--sapButton_Background)!important;border:1px solid #ccc!important}.popup-mode .drop-down ::ng-deep span{font-size:1rem!important;line-height:1.2rem!important}.popup-mode .drop-down ::ng-deep fd-icon{position:absolute;left:10px}fd-popover{width:100%;max-width:100%}\n"] }]
         }], propDecorators: { popupModeTemplateRef: [{
                 type: ViewChild,
                 args: ['popupMode', { static: true, read: TemplateRef }]
@@ -5041,6 +5065,10 @@ class BarsaTableHeaderComponent extends BaseComponent {
         if (this.resizedByUser) {
             return;
         }
+        if (this.deviceSize === 's') {
+            columns.forEach((column) => (column.$Width2 = 'auto'));
+            return;
+        }
         this.columnsWidth = sum;
         if (sum > val && val > 0) {
             columns.forEach((column) => (column.$Width2 = this.inlineEditMode ? '210px' : (column.Width * 100) / val + '%'));
@@ -5077,10 +5105,10 @@ class BarsaTableHeaderComponent extends BaseComponent {
     }
 }
 BarsaTableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTableHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BarsaTableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTableHeaderComponent, selector: "bsu-barsa-table-header", inputs: { allChecked: "allChecked", isCheckList: "isCheckList", columns: "columns", fitWidth: "fitWidth", contextMenuItems: "contextMenuItems", canView: "canView", hasSelected: "hasSelected", hideOpenIcon: "hideOpenIcon", disableOverflowContextMenu: "disableOverflowContextMenu", inlineEditMode: "inlineEditMode", hideHeader: "hideHeader", showDetailsInRow: "showDetailsInRow", viewSetting: "viewSetting", tableWidth: "tableWidth", resizedByUser: "resizedByUser", disableResponsive: "disableResponsive", rowIndicator: "rowIndicator" }, outputs: { allCheckbox: "allCheckbox", sortAscending: "sortAscending", sortDescending: "sortDescending", filter: "filter" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead\n    fd-table-header\n    [class.inline-edit]=\"inlineEditMode\"\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\n    [attr.columnsWidth]=\"columnsWidth\"\n    [attr.tableWidth]=\"tableWidth\"\n>\n    <tr fd-table-row>\n        <ng-container *ngIf=\"!hideHeader\">\n            <th *ngIf=\"rowIndicator\" fd-table-cell fd-table-status-indicator></th>\n            <th fd-table-cell *ngIf=\"isCheckList\">\n                <fd-checkbox\n                    name=\"allCheckbox\"\n                    [ngModel]=\"allChecked\"\n                    (ngModelChange)=\"onAllCheckbox($event)\"\n                ></fd-checkbox>\n            </th>\n            <th fd-table-cell *ngIf=\"!isCheckList\" class=\"single-select\"></th>\n            <ng-container *ngFor=\"let column of columns; let i = index; let last = last; trackBy: _trackByColumn\">\n                <th\n                    *ngIf=\"startIndex <= i\"\n                    [columnIndex]=\"i\"\n                    fd-table-cell\n                    [style.width]=\"column.FieldTypeId === 38 ? '40px' : column.$Width2\"\n                    [style.min-width]=\"inlineEditMode ? '210px' : last ? '100%' : 'auto'\"\n                    columnResizer\n                    [disableResponsive]=\"disableResponsive\"\n                    [tableWidth]=\"tableWidth\"\n                    [columnsWidth]=\"columnsWidth\"\n                    [attr.columnName]=\"column.Name\"\n                    [attr.index]=\"i\"\n                    [ngClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\n                    [class.displayIcon]=\"column.Extra?.IconDisplayTypeEnum\"\n                >\n                    <fd-popover #menu>\n                        <fd-popover-control>\n                            <div style=\"display: flex\">\n                                <!-- FieldTypeId 38 means it is auto row number field-->\n                                <img\n                                    [src]=\"column.Icon\"\n                                    *ngIf=\"column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42\"\n                                />\n                                {{\n                                    column.Extra?.IconDisplayTypeEnum !== 'Image' && column.FieldTypeId !== 38\n                                        ? (column.Caption | bbbTranslate)\n                                        : ''\n                                }}\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body>\n                            <ul fd-list>\n                                <li fd-list-item>\n                                    <a fd-list-link (click)=\"onSortAscending(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"sort-ascending\"></fd-menu-addon>\n                                        <span fd-list-title\n                                            >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\n                                        >\n                                    </a>\n                                </li>\n                                <li fd-list-item>\n                                    <a fd-list-link (click)=\"onSortDescending(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"sort-descending\"></fd-menu-addon>\n                                        <span fd-list-title\n                                            >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\n                                        >\n                                    </a>\n                                </li>\n                                <!-- <li fd-list-item>\n                                    <a fd-list-link (click)=\"onFilter(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"filter\"></fd-menu-addon>\n                                        <span fd-list-title>{{ 'Filter' | bbbTranslate }}</span>\n                                    </a>\n                                </li> -->\n                            </ul>\n                        </fd-popover-body>\n                    </fd-popover>\n                </th>\n            </ng-container>\n            <ng-container *ngIf=\"contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode\">\n                <th\n                    class=\"col-header col-context-menu\"\n                    fd-table-cell\n                    [fitContent]=\"disableOverflowContextMenu\"\n                    [style.width]=\"disableOverflowContextMenu ? '100%' : contextMenuItems.length > 1 ? '40px' : '100px'\"\n                ></th>\n            </ng-container>\n            <th\n                class=\"col-header col-details\"\n                fd-table-cell\n                style=\"width: 120px\"\n                *ngIf=\"showDetailsInRow && !inlineEditMode\"\n            ></th>\n            <th\n                class=\"col-header col-view\"\n                fd-table-cell\n                style=\"width: 40px\"\n                *ngIf=\"canView && !inlineEditMode && !hideOpenIcon\"\n            ></th>\n        </ng-container>\n    </tr>\n</thead>\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.ColumnResizerDirective, selector: "[columnResizer]", inputs: ["disableResizer"] }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i9.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i4$4.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i4$4.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i4$4.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i4$4.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaTableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTableHeaderComponent, selector: "bsu-barsa-table-header", inputs: { allChecked: "allChecked", isCheckList: "isCheckList", columns: "columns", fitWidth: "fitWidth", contextMenuItems: "contextMenuItems", canView: "canView", hasSelected: "hasSelected", hideOpenIcon: "hideOpenIcon", disableOverflowContextMenu: "disableOverflowContextMenu", inlineEditMode: "inlineEditMode", hideHeader: "hideHeader", showDetailsInRow: "showDetailsInRow", viewSetting: "viewSetting", tableWidth: "tableWidth", resizedByUser: "resizedByUser", disableResponsive: "disableResponsive", rowIndicator: "rowIndicator", deviceSize: "deviceSize" }, outputs: { allCheckbox: "allCheckbox", sortAscending: "sortAscending", sortDescending: "sortDescending", filter: "filter" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead\n    fd-table-header\n    [class.inline-edit]=\"inlineEditMode\"\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\n    [attr.columnsWidth]=\"columnsWidth\"\n    [attr.tableWidth]=\"tableWidth\"\n>\n    <tr fd-table-row>\n        <ng-container *ngIf=\"!hideHeader\">\n            <th *ngIf=\"rowIndicator\" fd-table-cell fd-table-status-indicator></th>\n            <th fd-table-cell *ngIf=\"isCheckList\">\n                <fd-checkbox\n                    name=\"allCheckbox\"\n                    [ngModel]=\"allChecked\"\n                    (ngModelChange)=\"onAllCheckbox($event)\"\n                ></fd-checkbox>\n            </th>\n            <th fd-table-cell *ngIf=\"!isCheckList\" class=\"single-select\"></th>\n            <ng-container *ngFor=\"let column of columns; let i = index; let last = last; trackBy: _trackByColumn\">\n                <th\n                    *ngIf=\"startIndex <= i\"\n                    [columnIndex]=\"i\"\n                    fd-table-cell\n                    [style.width]=\"column.FieldTypeId === 38 ? '40px' : column.$Width2\"\n                    [style.min-width]=\"inlineEditMode ? '210px' : last ? '100%' : 'auto'\"\n                    columnResizer\n                    [disableResponsive]=\"disableResponsive\"\n                    [tableWidth]=\"tableWidth\"\n                    [columnsWidth]=\"columnsWidth\"\n                    [attr.columnName]=\"column.Name\"\n                    [attr.index]=\"i\"\n                    [ngClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\n                    [class.displayIcon]=\"column.Extra?.IconDisplayTypeEnum\"\n                >\n                    <fd-popover #menu>\n                        <fd-popover-control>\n                            <div style=\"display: flex\">\n                                <!-- FieldTypeId 38 means it is auto row number field-->\n                                <img\n                                    [src]=\"column.Icon\"\n                                    *ngIf=\"column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42\"\n                                />\n                                {{\n                                    column.Extra?.IconDisplayTypeEnum !== 'Image' && column.FieldTypeId !== 38\n                                        ? (column.Caption | bbbTranslate)\n                                        : ''\n                                }}\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body>\n                            <ul fd-list>\n                                <li fd-list-item>\n                                    <a fd-list-link (click)=\"onSortAscending(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"sort-ascending\"></fd-menu-addon>\n                                        <span fd-list-title\n                                            >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\n                                        >\n                                    </a>\n                                </li>\n                                <li fd-list-item>\n                                    <a fd-list-link (click)=\"onSortDescending(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"sort-descending\"></fd-menu-addon>\n                                        <span fd-list-title\n                                            >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\n                                        >\n                                    </a>\n                                </li>\n                                <!-- <li fd-list-item>\n                                    <a fd-list-link (click)=\"onFilter(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"filter\"></fd-menu-addon>\n                                        <span fd-list-title>{{ 'Filter' | bbbTranslate }}</span>\n                                    </a>\n                                </li> -->\n                            </ul>\n                        </fd-popover-body>\n                    </fd-popover>\n                </th>\n            </ng-container>\n            <ng-container *ngIf=\"contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode\">\n                <th\n                    class=\"col-header col-context-menu\"\n                    fd-table-cell\n                    [fitContent]=\"disableOverflowContextMenu\"\n                    [style.width]=\"disableOverflowContextMenu ? '100%' : contextMenuItems.length > 1 ? '40px' : '100px'\"\n                ></th>\n            </ng-container>\n            <th\n                class=\"col-header col-details\"\n                [style.width]=\"deviceSize === 's' ? 'auto' : '120px'\"\n                fd-table-cell\n                *ngIf=\"showDetailsInRow && !inlineEditMode\"\n            ></th>\n            <th\n                class=\"col-header col-view\"\n                [style.width]=\"deviceSize === 's' ? 'auto' : '40px'\"\n                fd-table-cell\n                *ngIf=\"canView && !inlineEditMode && !hideOpenIcon\"\n            ></th>\n        </ng-container>\n    </tr>\n</thead>\n", styles: [":host{display:contents;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.ColumnResizerDirective, selector: "[columnResizer]", inputs: ["disableResizer"] }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i9.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i4$4.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i4$4.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i4$4.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i4$4.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTableHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-table-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<thead\n    fd-table-header\n    [class.inline-edit]=\"inlineEditMode\"\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\n    [attr.columnsWidth]=\"columnsWidth\"\n    [attr.tableWidth]=\"tableWidth\"\n>\n    <tr fd-table-row>\n        <ng-container *ngIf=\"!hideHeader\">\n            <th *ngIf=\"rowIndicator\" fd-table-cell fd-table-status-indicator></th>\n            <th fd-table-cell *ngIf=\"isCheckList\">\n                <fd-checkbox\n                    name=\"allCheckbox\"\n                    [ngModel]=\"allChecked\"\n                    (ngModelChange)=\"onAllCheckbox($event)\"\n                ></fd-checkbox>\n            </th>\n            <th fd-table-cell *ngIf=\"!isCheckList\" class=\"single-select\"></th>\n            <ng-container *ngFor=\"let column of columns; let i = index; let last = last; trackBy: _trackByColumn\">\n                <th\n                    *ngIf=\"startIndex <= i\"\n                    [columnIndex]=\"i\"\n                    fd-table-cell\n                    [style.width]=\"column.FieldTypeId === 38 ? '40px' : column.$Width2\"\n                    [style.min-width]=\"inlineEditMode ? '210px' : last ? '100%' : 'auto'\"\n                    columnResizer\n                    [disableResponsive]=\"disableResponsive\"\n                    [tableWidth]=\"tableWidth\"\n                    [columnsWidth]=\"columnsWidth\"\n                    [attr.columnName]=\"column.Name\"\n                    [attr.index]=\"i\"\n                    [ngClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\n                    [class.displayIcon]=\"column.Extra?.IconDisplayTypeEnum\"\n                >\n                    <fd-popover #menu>\n                        <fd-popover-control>\n                            <div style=\"display: flex\">\n                                <!-- FieldTypeId 38 means it is auto row number field-->\n                                <img\n                                    [src]=\"column.Icon\"\n                                    *ngIf=\"column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42\"\n                                />\n                                {{\n                                    column.Extra?.IconDisplayTypeEnum !== 'Image' && column.FieldTypeId !== 38\n                                        ? (column.Caption | bbbTranslate)\n                                        : ''\n                                }}\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body>\n                            <ul fd-list>\n                                <li fd-list-item>\n                                    <a fd-list-link (click)=\"onSortAscending(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"sort-ascending\"></fd-menu-addon>\n                                        <span fd-list-title\n                                            >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\n                                        >\n                                    </a>\n                                </li>\n                                <li fd-list-item>\n                                    <a fd-list-link (click)=\"onSortDescending(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"sort-descending\"></fd-menu-addon>\n                                        <span fd-list-title\n                                            >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\n                                        >\n                                    </a>\n                                </li>\n                                <!-- <li fd-list-item>\n                                    <a fd-list-link (click)=\"onFilter(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"filter\"></fd-menu-addon>\n                                        <span fd-list-title>{{ 'Filter' | bbbTranslate }}</span>\n                                    </a>\n                                </li> -->\n                            </ul>\n                        </fd-popover-body>\n                    </fd-popover>\n                </th>\n            </ng-container>\n            <ng-container *ngIf=\"contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode\">\n                <th\n                    class=\"col-header col-context-menu\"\n                    fd-table-cell\n                    [fitContent]=\"disableOverflowContextMenu\"\n                    [style.width]=\"disableOverflowContextMenu ? '100%' : contextMenuItems.length > 1 ? '40px' : '100px'\"\n                ></th>\n            </ng-container>\n            <th\n                class=\"col-header col-details\"\n                fd-table-cell\n                style=\"width: 120px\"\n                *ngIf=\"showDetailsInRow && !inlineEditMode\"\n            ></th>\n            <th\n                class=\"col-header col-view\"\n                fd-table-cell\n                style=\"width: 40px\"\n                *ngIf=\"canView && !inlineEditMode && !hideOpenIcon\"\n            ></th>\n        </ng-container>\n    </tr>\n</thead>\n", styles: [":host{display:contents;width:100%}\n"] }]
+            args: [{ selector: 'bsu-barsa-table-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<thead\n    fd-table-header\n    [class.inline-edit]=\"inlineEditMode\"\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\n    [attr.columnsWidth]=\"columnsWidth\"\n    [attr.tableWidth]=\"tableWidth\"\n>\n    <tr fd-table-row>\n        <ng-container *ngIf=\"!hideHeader\">\n            <th *ngIf=\"rowIndicator\" fd-table-cell fd-table-status-indicator></th>\n            <th fd-table-cell *ngIf=\"isCheckList\">\n                <fd-checkbox\n                    name=\"allCheckbox\"\n                    [ngModel]=\"allChecked\"\n                    (ngModelChange)=\"onAllCheckbox($event)\"\n                ></fd-checkbox>\n            </th>\n            <th fd-table-cell *ngIf=\"!isCheckList\" class=\"single-select\"></th>\n            <ng-container *ngFor=\"let column of columns; let i = index; let last = last; trackBy: _trackByColumn\">\n                <th\n                    *ngIf=\"startIndex <= i\"\n                    [columnIndex]=\"i\"\n                    fd-table-cell\n                    [style.width]=\"column.FieldTypeId === 38 ? '40px' : column.$Width2\"\n                    [style.min-width]=\"inlineEditMode ? '210px' : last ? '100%' : 'auto'\"\n                    columnResizer\n                    [disableResponsive]=\"disableResponsive\"\n                    [tableWidth]=\"tableWidth\"\n                    [columnsWidth]=\"columnsWidth\"\n                    [attr.columnName]=\"column.Name\"\n                    [attr.index]=\"i\"\n                    [ngClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\n                    [class.displayIcon]=\"column.Extra?.IconDisplayTypeEnum\"\n                >\n                    <fd-popover #menu>\n                        <fd-popover-control>\n                            <div style=\"display: flex\">\n                                <!-- FieldTypeId 38 means it is auto row number field-->\n                                <img\n                                    [src]=\"column.Icon\"\n                                    *ngIf=\"column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42\"\n                                />\n                                {{\n                                    column.Extra?.IconDisplayTypeEnum !== 'Image' && column.FieldTypeId !== 38\n                                        ? (column.Caption | bbbTranslate)\n                                        : ''\n                                }}\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body>\n                            <ul fd-list>\n                                <li fd-list-item>\n                                    <a fd-list-link (click)=\"onSortAscending(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"sort-ascending\"></fd-menu-addon>\n                                        <span fd-list-title\n                                            >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\n                                        >\n                                    </a>\n                                </li>\n                                <li fd-list-item>\n                                    <a fd-list-link (click)=\"onSortDescending(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"sort-descending\"></fd-menu-addon>\n                                        <span fd-list-title\n                                            >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\n                                        >\n                                    </a>\n                                </li>\n                                <!-- <li fd-list-item>\n                                    <a fd-list-link (click)=\"onFilter(column, menu)\">\n                                        <fd-menu-addon position=\"before\" glyph=\"filter\"></fd-menu-addon>\n                                        <span fd-list-title>{{ 'Filter' | bbbTranslate }}</span>\n                                    </a>\n                                </li> -->\n                            </ul>\n                        </fd-popover-body>\n                    </fd-popover>\n                </th>\n            </ng-container>\n            <ng-container *ngIf=\"contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode\">\n                <th\n                    class=\"col-header col-context-menu\"\n                    fd-table-cell\n                    [fitContent]=\"disableOverflowContextMenu\"\n                    [style.width]=\"disableOverflowContextMenu ? '100%' : contextMenuItems.length > 1 ? '40px' : '100px'\"\n                ></th>\n            </ng-container>\n            <th\n                class=\"col-header col-details\"\n                [style.width]=\"deviceSize === 's' ? 'auto' : '120px'\"\n                fd-table-cell\n                *ngIf=\"showDetailsInRow && !inlineEditMode\"\n            ></th>\n            <th\n                class=\"col-header col-view\"\n                [style.width]=\"deviceSize === 's' ? 'auto' : '40px'\"\n                fd-table-cell\n                *ngIf=\"canView && !inlineEditMode && !hideOpenIcon\"\n            ></th>\n        </ng-container>\n    </tr>\n</thead>\n", styles: [":host{display:contents;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { allChecked: [{
                 type: Input
             }], isCheckList: [{
@@ -5115,6 +5143,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }], rowIndicator: [{
                 type: Input
+            }], deviceSize: [{
+                type: Input
             }], allCheckbox: [{
                 type: Output
             }], sortAscending: [{
@@ -5258,6 +5288,10 @@ class UiTableViewComponent extends ReportViewBaseComponent {
             ((_b = this.detailsComponent) === null || _b === void 0 ? void 0 : _b.Selector) ||
             (cartableTemplates && Object.keys(cartableTemplates).length > 0)) {
             this.showDetailsInRow = true;
+            this.hasDetailsInRow.emit(true);
+        }
+        else {
+            this.hasDetailsInRow.emit(false);
         }
     }
     _containerWidthChanged(val) {
@@ -5271,10 +5305,10 @@ class UiTableViewComponent extends ReportViewBaseComponent {
     }
 }
 UiTableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiTableViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiTableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiTableViewComponent, selector: "bsu-ui-table-view", inputs: { columnWidth: "columnWidth", minWidth: "minWidth", minHeight: "minHeight", rowResizer: "rowResizer", enableResizing: "enableResizing" }, host: { properties: { "style.height.px": "this.height", "style.max-height": "this.maxHeight" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\n    fd-table\n    [popIn]=\"popin\"\n    [class.fixed]=\"!contextView?.Grid_HideHeader && (!popin || secondaryColumns.length === 0)\"\n    [noBorderX]=\"viewSetting?.NoVerticalBorders === true || (popin && secondaryColumns.length > 0)\"\n    [noBorderY]=\"viewSetting?.NoHoriztonalBorders === true || (popin && secondaryColumns.length > 0)\"\n    tableResizer\n    [fitWidth]=\"fitWidth\"\n    (columnResized)=\"onColumnResized($event)\"\n    [containerWidth]=\"containerWidth\"\n    [minWidth]=\"30\"\n    [minHeight]=\"22\"\n    [rowResizer]=\"rowResizer\"\n    [enableResizing]=\"enableResizing\"\n>\n    <ng-container\n        *ngIf=\"columns | mergeFieldsToColumns: viewSetting?.MergeFieldsToColumns?.MoDataList as mergeFieldsToColumns\"\n    >\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n    </ng-container>\n</table>\n<ng-template #headerTemplate let-columns>\n    <bsu-barsa-table-header\n        [tableWidth]=\"elWidth\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [resizedByUser]=\"resizedByUser\"\n        [allChecked]=\"allChecked\"\n        [disableResponsive]=\"disableResponsive\"\n        [isCheckList]=\"isCheckList\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [fitWidth]=\"fitWidth\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [viewSetting]=\"viewSetting\"\n        [hideHeader]=\"contextView.Grid_HideHeader\"\n        [rowIndicator]=\"rowIndicator\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n    ></bsu-barsa-table-header>\n</ng-template>\n<ng-template #bodyTemplate let-columns>\n    <tbody\n        fd-table-body\n        [noBorderX]=\"popin && secondaryColumns.length > 0\"\n        [noBorderY]=\"popin && secondaryColumns.length > 0\"\n    >\n        <ng-container *ngIf=\"moDataList && moDataList.length > 0; else noData\">\n            <ng-container\n                *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; trackBy: _trackByRow\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        hasRowOlgo ? rowOlgoTemplate : rowTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            columns: columns | columnCustomComponent: viewSetting?.ColumnComponents?.MoDataList,\n                            secondaryColumns:\n                                secondaryColumns | columnCustomComponent: viewSetting?.ColumnComponents?.MoDataList,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length,\n                            cartableTemplate:\n                                cartableTemplates[mo.RelatedMo?.$TypeDefId + '@' + mo.CartableSettings?.Id]\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </tbody>\n</ng-template>\n<ng-template #footerTemplate let-columns>\n    <tfoot fd-table-footer *ngIf=\"hasSummary\">\n        <tr fd-table-row class=\"row-summary\">\n            <td fd-table-cell *ngIf=\"isCheckList\" columnResizer>\n                <strong class=\"col-total-text\">{{ 'Total' | bbbTranslate }}</strong>\n            </td>\n            <td fd-table-cell *ngIf=\"!isCheckList\" class=\"single-select\">\n                <strong class=\"col-total-text\">{{ 'Total' | bbbTranslate }}</strong>\n            </td>\n            <td *ngFor=\"let column of columns; let i = index\">\n                <ng-container *ngIf=\"column.HasSummary\">\n                    <strong style=\"direction: ltr; display: block\">\n                        {{ moDataList | totalSummary: column.Name | number }}</strong\n                    >\n                </ng-container>\n            </td>\n            <ng-container *ngIf=\"contextMenuItems && contextMenuItems.length > 0\">\n                <td fd-table-cell style=\"width: 100px\"></td>\n            </ng-container>\n            <td fd-table-cell *ngIf=\"canView\"></td>\n        </tr>\n    </tfoot>\n</ng-template>\n<ng-template\n    #rowOlgoTemplate\n    let-mo\n    let-index=\"index\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n    let-cartableTemplate=\"cartableTemplate\"\n    let-secondaryColumns=\"secondaryColumns\"\n>\n    <bnrc-dynamic-item-component\n        [component]=\"viewSetting.RowOlgo\"\n        [mo]=\"mo\"\n        [moDataList]=\"moDataList\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [detailsColumns]=\"detailsColumns\"\n        [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n        [cartableTemplate]=\"cartableTemplate\"\n        [cartableMo]=\"mo.RelatedMo\"\n        [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n        [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n        [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n        [detailsComponent]=\"detailsComponent\"\n        [isChecked]=\"mo.$IsChecked\"\n        [visibility]=\"mo.$Visibility\"\n        [expanded]=\"mo.$Expanded\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [workflowState]=\"mo.$WorkflowState\"\n        [level]=\"mo.$Level\"\n        [parentExpanded]=\"mo.$Parent?.$Expanded\"\n        [moDataListCount]=\"moDataListCount\"\n        [columnsCount]=\"columnsCount - detailsColumns.length\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [formSetting]=\"formSetting\"\n        [index]=\"index\"\n        [setting]=\"viewSetting\"\n        [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [isNewInlineMo]=\"mo.$NewInlineMo\"\n        [access]=\"access\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        [rowIndicator]=\"rowIndicator\"\n        [rowIndicatorColor]=\"columns[0].Caption | rval: mo:columns\"\n        (events)=\"onOlgoEvents($event)\"\n    >\n    </bnrc-dynamic-item-component>\n</ng-template>\n<ng-template\n    #rowTemplate\n    let-mo\n    let-index=\"index\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n    let-cartableTemplate=\"cartableTemplate\"\n    let-secondaryColumns=\"secondaryColumns\"\n>\n    <bsu-barsa-table-row\n        [mo]=\"mo\"\n        [moDataList]=\"moDataList\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [detailsColumns]=\"detailsColumns\"\n        [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n        [cartableTemplate]=\"cartableTemplate\"\n        [cartableMo]=\"mo.RelatedMo\"\n        [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n        [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n        [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n        [detailsComponent]=\"detailsComponent\"\n        [isChecked]=\"mo.$IsChecked\"\n        [visibility]=\"mo.$Visibility\"\n        [expanded]=\"mo.$Expanded\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [workflowState]=\"mo.$WorkflowState\"\n        [level]=\"mo.$Level\"\n        [parentExpanded]=\"mo.$Parent?.$Expanded\"\n        [moDataListCount]=\"moDataListCount\"\n        [columnsCount]=\"columnsCount - detailsColumns.length\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [formSetting]=\"formSetting\"\n        [index]=\"index\"\n        [setting]=\"viewSetting\"\n        [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [isNewInlineMo]=\"mo.$NewInlineMo\"\n        [access]=\"access\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        [rowIndicator]=\"rowIndicator\"\n        [rowIndicatorColor]=\"columns[0].Caption | rval: mo:columns\"\n        (expandClick)=\"onExpandClick($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n        (deselectAll)=\"onDeselectAll()\"\n        (rowClick)=\"onRowClick($event)\"\n        (ulvCommand)=\"onUlvCommand($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (cartableFormClosed)=\"onCartableFormClosed($event)\"\n    >\n    </bsu-barsa-table-row>\n</ng-template>\n<!--renderColumn-->\n<ng-template #noData>\n    <tr *ngIf=\"!inlineEditMode || !newInlineEditMo\">\n        <td colspan=\"100%\" style=\"padding: 10px\">{{ 'NoData' | bbbTranslate }}</td>\n    </tr>\n</ng-template>\n", styles: [":host{display:block;width:100%;overflow-x:auto;max-width:100vw}table{margin-bottom:5px}table.fixed{table-layout:fixed}table.fixed td{overflow:hidden}tr td{font-weight:inherit}::ng-deep span.fd-toolbar__spacer{display:none}.row-summary{position:relative}.row-summary .col-total-text{position:absolute;top:25%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "directive", type: i2.TableResizerDirective, selector: "[tableResizer]", inputs: ["fitWidth", "minWidth", "minHeight", "containerWidth", "rowResizer", "enableResizing"], outputs: ["columnResized"] }, { kind: "directive", type: i2.ColumnResizerDirective, selector: "[columnResizer]", inputs: ["disableResizer"] }, { kind: "component", type: i4$4.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i4$4.TableFooterDirective, selector: "[fdTableFooter], [fd-table-footer]" }, { kind: "directive", type: i4$4.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i4$4.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i4$4.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "component", type: BarsaTableHeaderComponent, selector: "bsu-barsa-table-header", inputs: ["allChecked", "isCheckList", "columns", "fitWidth", "contextMenuItems", "canView", "hasSelected", "hideOpenIcon", "disableOverflowContextMenu", "inlineEditMode", "hideHeader", "showDetailsInRow", "viewSetting", "tableWidth", "resizedByUser", "disableResponsive", "rowIndicator"], outputs: ["allCheckbox", "sortAscending", "sortDescending", "filter"] }, { kind: "component", type: BarsaTableRowComponent, selector: "bsu-barsa-table-row", inputs: ["showDetailsInRow", "detailsComponent", "detailsColumns", "detailsText", "columnComponents"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.MultipleGroupByPipe, name: "multipleGroupBy" }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.TotalSummaryPipe, name: "totalSummary" }, { kind: "pipe", type: i2.MergeFieldsToColumnsPipe, name: "mergeFieldsToColumns" }, { kind: "pipe", type: i2.FilterColumnsByDetailsPipe, name: "filterColumnsByDetails" }, { kind: "pipe", type: i2.ColumnCustomComponentPipe, name: "columnCustomComponent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiTableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiTableViewComponent, selector: "bsu-ui-table-view", inputs: { columnWidth: "columnWidth", minWidth: "minWidth", minHeight: "minHeight", rowResizer: "rowResizer", enableResizing: "enableResizing" }, host: { properties: { "style.height.px": "this.height", "style.max-height": "this.maxHeight" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\n    fd-table\n    [popIn]=\"popin\"\n    [class.fixed]=\"!contextView?.Grid_HideHeader && (!popin || secondaryColumns.length === 0)\"\n    [noBorderX]=\"viewSetting?.NoVerticalBorders === true || (popin && secondaryColumns.length > 0)\"\n    [noBorderY]=\"viewSetting?.NoHoriztonalBorders === true || (popin && secondaryColumns.length > 0)\"\n    tableResizer\n    [fitWidth]=\"fitWidth\"\n    (columnResized)=\"onColumnResized($event)\"\n    [containerWidth]=\"containerWidth\"\n    [minWidth]=\"30\"\n    [minHeight]=\"22\"\n    [rowResizer]=\"rowResizer\"\n    [enableResizing]=\"enableResizing\"\n>\n    <ng-container\n        *ngIf=\"columns | mergeFieldsToColumns: viewSetting?.MergeFieldsToColumns?.MoDataList as mergeFieldsToColumns\"\n    >\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n    </ng-container>\n</table>\n<ng-template #headerTemplate let-columns>\n    <bsu-barsa-table-header\n        [tableWidth]=\"elWidth\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [resizedByUser]=\"resizedByUser\"\n        [allChecked]=\"allChecked\"\n        [disableResponsive]=\"disableResponsive\"\n        [isCheckList]=\"isCheckList\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [fitWidth]=\"fitWidth\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [deviceSize]=\"deviceSize\"\n        [viewSetting]=\"viewSetting\"\n        [hideHeader]=\"contextView.Grid_HideHeader\"\n        [rowIndicator]=\"rowIndicator\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n    ></bsu-barsa-table-header>\n</ng-template>\n<ng-template #bodyTemplate let-columns>\n    <tbody\n        fd-table-body\n        [noBorderX]=\"popin && secondaryColumns.length > 0\"\n        [noBorderY]=\"popin && secondaryColumns.length > 0\"\n    >\n        <ng-container *ngIf=\"moDataList && moDataList.length > 0; else noData\">\n            <ng-container\n                *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; trackBy: _trackByRow\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        hasRowOlgo ? rowOlgoTemplate : rowTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            columns: columns | columnCustomComponent: viewSetting?.ColumnComponents?.MoDataList,\n                            secondaryColumns:\n                                secondaryColumns | columnCustomComponent: viewSetting?.ColumnComponents?.MoDataList,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length,\n                            cartableTemplate:\n                                cartableTemplates[mo.RelatedMo?.$TypeDefId + '@' + mo.CartableSettings?.Id]\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </tbody>\n</ng-template>\n<ng-template #footerTemplate let-columns>\n    <tfoot fd-table-footer *ngIf=\"hasSummary\">\n        <tr fd-table-row class=\"row-summary\">\n            <td fd-table-cell *ngIf=\"isCheckList\" columnResizer>\n                <strong class=\"col-total-text\">{{ 'Total' | bbbTranslate }}</strong>\n            </td>\n            <td fd-table-cell *ngIf=\"!isCheckList\" class=\"single-select\">\n                <strong class=\"col-total-text\">{{ 'Total' | bbbTranslate }}</strong>\n            </td>\n            <td *ngFor=\"let column of columns; let i = index\">\n                <ng-container *ngIf=\"column.HasSummary\">\n                    <strong style=\"direction: ltr; display: block\">\n                        {{ moDataList | totalSummary: column.Name | number }}</strong\n                    >\n                </ng-container>\n            </td>\n            <ng-container *ngIf=\"contextMenuItems && contextMenuItems.length > 0\">\n                <td fd-table-cell style=\"width: 100px\"></td>\n            </ng-container>\n            <td fd-table-cell *ngIf=\"canView\"></td>\n        </tr>\n    </tfoot>\n</ng-template>\n<ng-template\n    #rowOlgoTemplate\n    let-mo\n    let-index=\"index\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n    let-cartableTemplate=\"cartableTemplate\"\n    let-secondaryColumns=\"secondaryColumns\"\n>\n    <bnrc-dynamic-item-component\n        [component]=\"viewSetting.RowOlgo\"\n        [mo]=\"mo\"\n        [moDataList]=\"moDataList\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [detailsColumns]=\"detailsColumns\"\n        [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n        [cartableTemplate]=\"cartableTemplate\"\n        [cartableMo]=\"mo.RelatedMo\"\n        [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n        [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n        [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n        [detailsComponent]=\"detailsComponent\"\n        [isChecked]=\"mo.$IsChecked\"\n        [visibility]=\"mo.$Visibility\"\n        [expanded]=\"mo.$Expanded\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [workflowState]=\"mo.$WorkflowState\"\n        [level]=\"mo.$Level\"\n        [parentExpanded]=\"mo.$Parent?.$Expanded\"\n        [moDataListCount]=\"moDataListCount\"\n        [columnsCount]=\"columnsCount - detailsColumns.length\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [formSetting]=\"formSetting\"\n        [index]=\"index\"\n        [setting]=\"viewSetting\"\n        [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [isNewInlineMo]=\"mo.$NewInlineMo\"\n        [access]=\"access\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        [rowIndicator]=\"rowIndicator\"\n        [rowIndicatorColor]=\"columns[0].Caption | rval: mo:columns\"\n        (events)=\"onOlgoEvents($event)\"\n    >\n    </bnrc-dynamic-item-component>\n</ng-template>\n<ng-template\n    #rowTemplate\n    let-mo\n    let-index=\"index\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n    let-cartableTemplate=\"cartableTemplate\"\n    let-secondaryColumns=\"secondaryColumns\"\n>\n    <bsu-barsa-table-row\n        [mo]=\"mo\"\n        [moDataList]=\"moDataList\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [detailsColumns]=\"detailsColumns\"\n        [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n        [cartableTemplate]=\"cartableTemplate\"\n        [cartableMo]=\"mo.RelatedMo\"\n        [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n        [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n        [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n        [detailsComponent]=\"detailsComponent\"\n        [isChecked]=\"mo.$IsChecked\"\n        [visibility]=\"mo.$Visibility\"\n        [expanded]=\"mo.$Expanded\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [workflowState]=\"mo.$WorkflowState\"\n        [level]=\"mo.$Level\"\n        [parentExpanded]=\"mo.$Parent?.$Expanded\"\n        [moDataListCount]=\"moDataListCount\"\n        [columnsCount]=\"columnsCount - detailsColumns.length\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [formSetting]=\"formSetting\"\n        [index]=\"index\"\n        [setting]=\"viewSetting\"\n        [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [isNewInlineMo]=\"mo.$NewInlineMo\"\n        [access]=\"access\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        [rowIndicator]=\"rowIndicator\"\n        [rowIndicatorColor]=\"columns[0].Caption | rval: mo:columns\"\n        (expandClick)=\"onExpandClick($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n        (deselectAll)=\"onDeselectAll()\"\n        (rowClick)=\"onRowClick($event)\"\n        (ulvCommand)=\"onUlvCommand($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (cartableFormClosed)=\"onCartableFormClosed($event)\"\n    >\n    </bsu-barsa-table-row>\n</ng-template>\n<!--renderColumn-->\n<ng-template #noData>\n    <tr *ngIf=\"!inlineEditMode || !newInlineEditMo\">\n        <td colspan=\"100%\" style=\"padding: 10px\">{{ 'NoData' | bbbTranslate }}</td>\n    </tr>\n</ng-template>\n", styles: [":host{display:block;width:100%;overflow-x:auto;max-width:100vw}table{margin-bottom:5px}table.fixed{table-layout:fixed}table.fixed td{overflow:hidden}tr td{font-weight:inherit}::ng-deep span.fd-toolbar__spacer{display:none}.row-summary{position:relative}.row-summary .col-total-text{position:absolute;top:25%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "directive", type: i2.TableResizerDirective, selector: "[tableResizer]", inputs: ["fitWidth", "minWidth", "minHeight", "containerWidth", "rowResizer", "enableResizing"], outputs: ["columnResized"] }, { kind: "directive", type: i2.ColumnResizerDirective, selector: "[columnResizer]", inputs: ["disableResizer"] }, { kind: "component", type: i4$4.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i4$4.TableFooterDirective, selector: "[fdTableFooter], [fd-table-footer]" }, { kind: "directive", type: i4$4.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i4$4.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i4$4.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "component", type: BarsaTableHeaderComponent, selector: "bsu-barsa-table-header", inputs: ["allChecked", "isCheckList", "columns", "fitWidth", "contextMenuItems", "canView", "hasSelected", "hideOpenIcon", "disableOverflowContextMenu", "inlineEditMode", "hideHeader", "showDetailsInRow", "viewSetting", "tableWidth", "resizedByUser", "disableResponsive", "rowIndicator", "deviceSize"], outputs: ["allCheckbox", "sortAscending", "sortDescending", "filter"] }, { kind: "component", type: BarsaTableRowComponent, selector: "bsu-barsa-table-row", inputs: ["showDetailsInRow", "detailsComponent", "detailsColumns", "detailsText", "columnComponents"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.MultipleGroupByPipe, name: "multipleGroupBy" }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.TotalSummaryPipe, name: "totalSummary" }, { kind: "pipe", type: i2.MergeFieldsToColumnsPipe, name: "mergeFieldsToColumns" }, { kind: "pipe", type: i2.FilterColumnsByDetailsPipe, name: "filterColumnsByDetails" }, { kind: "pipe", type: i2.ColumnCustomComponentPipe, name: "columnCustomComponent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiTableViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-table-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n    fd-table\n    [popIn]=\"popin\"\n    [class.fixed]=\"!contextView?.Grid_HideHeader && (!popin || secondaryColumns.length === 0)\"\n    [noBorderX]=\"viewSetting?.NoVerticalBorders === true || (popin && secondaryColumns.length > 0)\"\n    [noBorderY]=\"viewSetting?.NoHoriztonalBorders === true || (popin && secondaryColumns.length > 0)\"\n    tableResizer\n    [fitWidth]=\"fitWidth\"\n    (columnResized)=\"onColumnResized($event)\"\n    [containerWidth]=\"containerWidth\"\n    [minWidth]=\"30\"\n    [minHeight]=\"22\"\n    [rowResizer]=\"rowResizer\"\n    [enableResizing]=\"enableResizing\"\n>\n    <ng-container\n        *ngIf=\"columns | mergeFieldsToColumns: viewSetting?.MergeFieldsToColumns?.MoDataList as mergeFieldsToColumns\"\n    >\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n    </ng-container>\n</table>\n<ng-template #headerTemplate let-columns>\n    <bsu-barsa-table-header\n        [tableWidth]=\"elWidth\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [resizedByUser]=\"resizedByUser\"\n        [allChecked]=\"allChecked\"\n        [disableResponsive]=\"disableResponsive\"\n        [isCheckList]=\"isCheckList\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [fitWidth]=\"fitWidth\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [viewSetting]=\"viewSetting\"\n        [hideHeader]=\"contextView.Grid_HideHeader\"\n        [rowIndicator]=\"rowIndicator\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n    ></bsu-barsa-table-header>\n</ng-template>\n<ng-template #bodyTemplate let-columns>\n    <tbody\n        fd-table-body\n        [noBorderX]=\"popin && secondaryColumns.length > 0\"\n        [noBorderY]=\"popin && secondaryColumns.length > 0\"\n    >\n        <ng-container *ngIf=\"moDataList && moDataList.length > 0; else noData\">\n            <ng-container\n                *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; trackBy: _trackByRow\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        hasRowOlgo ? rowOlgoTemplate : rowTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            columns: columns | columnCustomComponent: viewSetting?.ColumnComponents?.MoDataList,\n                            secondaryColumns:\n                                secondaryColumns | columnCustomComponent: viewSetting?.ColumnComponents?.MoDataList,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length,\n                            cartableTemplate:\n                                cartableTemplates[mo.RelatedMo?.$TypeDefId + '@' + mo.CartableSettings?.Id]\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </tbody>\n</ng-template>\n<ng-template #footerTemplate let-columns>\n    <tfoot fd-table-footer *ngIf=\"hasSummary\">\n        <tr fd-table-row class=\"row-summary\">\n            <td fd-table-cell *ngIf=\"isCheckList\" columnResizer>\n                <strong class=\"col-total-text\">{{ 'Total' | bbbTranslate }}</strong>\n            </td>\n            <td fd-table-cell *ngIf=\"!isCheckList\" class=\"single-select\">\n                <strong class=\"col-total-text\">{{ 'Total' | bbbTranslate }}</strong>\n            </td>\n            <td *ngFor=\"let column of columns; let i = index\">\n                <ng-container *ngIf=\"column.HasSummary\">\n                    <strong style=\"direction: ltr; display: block\">\n                        {{ moDataList | totalSummary: column.Name | number }}</strong\n                    >\n                </ng-container>\n            </td>\n            <ng-container *ngIf=\"contextMenuItems && contextMenuItems.length > 0\">\n                <td fd-table-cell style=\"width: 100px\"></td>\n            </ng-container>\n            <td fd-table-cell *ngIf=\"canView\"></td>\n        </tr>\n    </tfoot>\n</ng-template>\n<ng-template\n    #rowOlgoTemplate\n    let-mo\n    let-index=\"index\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n    let-cartableTemplate=\"cartableTemplate\"\n    let-secondaryColumns=\"secondaryColumns\"\n>\n    <bnrc-dynamic-item-component\n        [component]=\"viewSetting.RowOlgo\"\n        [mo]=\"mo\"\n        [moDataList]=\"moDataList\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [detailsColumns]=\"detailsColumns\"\n        [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n        [cartableTemplate]=\"cartableTemplate\"\n        [cartableMo]=\"mo.RelatedMo\"\n        [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n        [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n        [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n        [detailsComponent]=\"detailsComponent\"\n        [isChecked]=\"mo.$IsChecked\"\n        [visibility]=\"mo.$Visibility\"\n        [expanded]=\"mo.$Expanded\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [workflowState]=\"mo.$WorkflowState\"\n        [level]=\"mo.$Level\"\n        [parentExpanded]=\"mo.$Parent?.$Expanded\"\n        [moDataListCount]=\"moDataListCount\"\n        [columnsCount]=\"columnsCount - detailsColumns.length\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [formSetting]=\"formSetting\"\n        [index]=\"index\"\n        [setting]=\"viewSetting\"\n        [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [isNewInlineMo]=\"mo.$NewInlineMo\"\n        [access]=\"access\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        [rowIndicator]=\"rowIndicator\"\n        [rowIndicatorColor]=\"columns[0].Caption | rval: mo:columns\"\n        (events)=\"onOlgoEvents($event)\"\n    >\n    </bnrc-dynamic-item-component>\n</ng-template>\n<ng-template\n    #rowTemplate\n    let-mo\n    let-index=\"index\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n    let-cartableTemplate=\"cartableTemplate\"\n    let-secondaryColumns=\"secondaryColumns\"\n>\n    <bsu-barsa-table-row\n        [mo]=\"mo\"\n        [moDataList]=\"moDataList\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [detailsColumns]=\"detailsColumns\"\n        [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n        [cartableTemplate]=\"cartableTemplate\"\n        [cartableMo]=\"mo.RelatedMo\"\n        [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n        [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n        [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n        [detailsComponent]=\"detailsComponent\"\n        [isChecked]=\"mo.$IsChecked\"\n        [visibility]=\"mo.$Visibility\"\n        [expanded]=\"mo.$Expanded\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [workflowState]=\"mo.$WorkflowState\"\n        [level]=\"mo.$Level\"\n        [parentExpanded]=\"mo.$Parent?.$Expanded\"\n        [moDataListCount]=\"moDataListCount\"\n        [columnsCount]=\"columnsCount - detailsColumns.length\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [formSetting]=\"formSetting\"\n        [index]=\"index\"\n        [setting]=\"viewSetting\"\n        [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [isNewInlineMo]=\"mo.$NewInlineMo\"\n        [access]=\"access\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        [rowIndicator]=\"rowIndicator\"\n        [rowIndicatorColor]=\"columns[0].Caption | rval: mo:columns\"\n        (expandClick)=\"onExpandClick($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n        (deselectAll)=\"onDeselectAll()\"\n        (rowClick)=\"onRowClick($event)\"\n        (ulvCommand)=\"onUlvCommand($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (cartableFormClosed)=\"onCartableFormClosed($event)\"\n    >\n    </bsu-barsa-table-row>\n</ng-template>\n<!--renderColumn-->\n<ng-template #noData>\n    <tr *ngIf=\"!inlineEditMode || !newInlineEditMo\">\n        <td colspan=\"100%\" style=\"padding: 10px\">{{ 'NoData' | bbbTranslate }}</td>\n    </tr>\n</ng-template>\n", styles: [":host{display:block;width:100%;overflow-x:auto;max-width:100vw}table{margin-bottom:5px}table.fixed{table-layout:fixed}table.fixed td{overflow:hidden}tr td{font-weight:inherit}::ng-deep span.fd-toolbar__spacer{display:none}.row-summary{position:relative}.row-summary .col-total-text{position:absolute;top:25%}\n"] }]
+            args: [{ selector: 'bsu-ui-table-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n    fd-table\n    [popIn]=\"popin\"\n    [class.fixed]=\"!contextView?.Grid_HideHeader && (!popin || secondaryColumns.length === 0)\"\n    [noBorderX]=\"viewSetting?.NoVerticalBorders === true || (popin && secondaryColumns.length > 0)\"\n    [noBorderY]=\"viewSetting?.NoHoriztonalBorders === true || (popin && secondaryColumns.length > 0)\"\n    tableResizer\n    [fitWidth]=\"fitWidth\"\n    (columnResized)=\"onColumnResized($event)\"\n    [containerWidth]=\"containerWidth\"\n    [minWidth]=\"30\"\n    [minHeight]=\"22\"\n    [rowResizer]=\"rowResizer\"\n    [enableResizing]=\"enableResizing\"\n>\n    <ng-container\n        *ngIf=\"columns | mergeFieldsToColumns: viewSetting?.MergeFieldsToColumns?.MoDataList as mergeFieldsToColumns\"\n    >\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: mergeFieldsToColumns }\"></ng-container>\n    </ng-container>\n</table>\n<ng-template #headerTemplate let-columns>\n    <bsu-barsa-table-header\n        [tableWidth]=\"elWidth\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [resizedByUser]=\"resizedByUser\"\n        [allChecked]=\"allChecked\"\n        [disableResponsive]=\"disableResponsive\"\n        [isCheckList]=\"isCheckList\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [fitWidth]=\"fitWidth\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [deviceSize]=\"deviceSize\"\n        [viewSetting]=\"viewSetting\"\n        [hideHeader]=\"contextView.Grid_HideHeader\"\n        [rowIndicator]=\"rowIndicator\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n    ></bsu-barsa-table-header>\n</ng-template>\n<ng-template #bodyTemplate let-columns>\n    <tbody\n        fd-table-body\n        [noBorderX]=\"popin && secondaryColumns.length > 0\"\n        [noBorderY]=\"popin && secondaryColumns.length > 0\"\n    >\n        <ng-container *ngIf=\"moDataList && moDataList.length > 0; else noData\">\n            <ng-container\n                *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; trackBy: _trackByRow\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        hasRowOlgo ? rowOlgoTemplate : rowTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            columns: columns | columnCustomComponent: viewSetting?.ColumnComponents?.MoDataList,\n                            secondaryColumns:\n                                secondaryColumns | columnCustomComponent: viewSetting?.ColumnComponents?.MoDataList,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length,\n                            cartableTemplate:\n                                cartableTemplates[mo.RelatedMo?.$TypeDefId + '@' + mo.CartableSettings?.Id]\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </tbody>\n</ng-template>\n<ng-template #footerTemplate let-columns>\n    <tfoot fd-table-footer *ngIf=\"hasSummary\">\n        <tr fd-table-row class=\"row-summary\">\n            <td fd-table-cell *ngIf=\"isCheckList\" columnResizer>\n                <strong class=\"col-total-text\">{{ 'Total' | bbbTranslate }}</strong>\n            </td>\n            <td fd-table-cell *ngIf=\"!isCheckList\" class=\"single-select\">\n                <strong class=\"col-total-text\">{{ 'Total' | bbbTranslate }}</strong>\n            </td>\n            <td *ngFor=\"let column of columns; let i = index\">\n                <ng-container *ngIf=\"column.HasSummary\">\n                    <strong style=\"direction: ltr; display: block\">\n                        {{ moDataList | totalSummary: column.Name | number }}</strong\n                    >\n                </ng-container>\n            </td>\n            <ng-container *ngIf=\"contextMenuItems && contextMenuItems.length > 0\">\n                <td fd-table-cell style=\"width: 100px\"></td>\n            </ng-container>\n            <td fd-table-cell *ngIf=\"canView\"></td>\n        </tr>\n    </tfoot>\n</ng-template>\n<ng-template\n    #rowOlgoTemplate\n    let-mo\n    let-index=\"index\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n    let-cartableTemplate=\"cartableTemplate\"\n    let-secondaryColumns=\"secondaryColumns\"\n>\n    <bnrc-dynamic-item-component\n        [component]=\"viewSetting.RowOlgo\"\n        [mo]=\"mo\"\n        [moDataList]=\"moDataList\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [detailsColumns]=\"detailsColumns\"\n        [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n        [cartableTemplate]=\"cartableTemplate\"\n        [cartableMo]=\"mo.RelatedMo\"\n        [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n        [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n        [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n        [detailsComponent]=\"detailsComponent\"\n        [isChecked]=\"mo.$IsChecked\"\n        [visibility]=\"mo.$Visibility\"\n        [expanded]=\"mo.$Expanded\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [workflowState]=\"mo.$WorkflowState\"\n        [level]=\"mo.$Level\"\n        [parentExpanded]=\"mo.$Parent?.$Expanded\"\n        [moDataListCount]=\"moDataListCount\"\n        [columnsCount]=\"columnsCount - detailsColumns.length\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [formSetting]=\"formSetting\"\n        [index]=\"index\"\n        [setting]=\"viewSetting\"\n        [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [isNewInlineMo]=\"mo.$NewInlineMo\"\n        [access]=\"access\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        [rowIndicator]=\"rowIndicator\"\n        [rowIndicatorColor]=\"columns[0].Caption | rval: mo:columns\"\n        (events)=\"onOlgoEvents($event)\"\n    >\n    </bnrc-dynamic-item-component>\n</ng-template>\n<ng-template\n    #rowTemplate\n    let-mo\n    let-index=\"index\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n    let-cartableTemplate=\"cartableTemplate\"\n    let-secondaryColumns=\"secondaryColumns\"\n>\n    <bsu-barsa-table-row\n        [mo]=\"mo\"\n        [moDataList]=\"moDataList\"\n        [showDetailsInRow]=\"showDetailsInRow\"\n        [hideOpenIcon]=\"hideOpenIcon\"\n        [detailsColumns]=\"detailsColumns\"\n        [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n        [cartableTemplate]=\"cartableTemplate\"\n        [cartableMo]=\"mo.RelatedMo\"\n        [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n        [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n        [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n        [detailsComponent]=\"detailsComponent\"\n        [isChecked]=\"mo.$IsChecked\"\n        [visibility]=\"mo.$Visibility\"\n        [expanded]=\"mo.$Expanded\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [workflowState]=\"mo.$WorkflowState\"\n        [level]=\"mo.$Level\"\n        [parentExpanded]=\"mo.$Parent?.$Expanded\"\n        [moDataListCount]=\"moDataListCount\"\n        [columnsCount]=\"columnsCount - detailsColumns.length\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [formSetting]=\"formSetting\"\n        [index]=\"index\"\n        [setting]=\"viewSetting\"\n        [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n        [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n        [isNewInlineMo]=\"mo.$NewInlineMo\"\n        [access]=\"access\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        [rowIndicator]=\"rowIndicator\"\n        [rowIndicatorColor]=\"columns[0].Caption | rval: mo:columns\"\n        (expandClick)=\"onExpandClick($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n        (deselectAll)=\"onDeselectAll()\"\n        (rowClick)=\"onRowClick($event)\"\n        (ulvCommand)=\"onUlvCommand($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (cartableFormClosed)=\"onCartableFormClosed($event)\"\n    >\n    </bsu-barsa-table-row>\n</ng-template>\n<!--renderColumn-->\n<ng-template #noData>\n    <tr *ngIf=\"!inlineEditMode || !newInlineEditMo\">\n        <td colspan=\"100%\" style=\"padding: 10px\">{{ 'NoData' | bbbTranslate }}</td>\n    </tr>\n</ng-template>\n", styles: [":host{display:block;width:100%;overflow-x:auto;max-width:100vw}table{margin-bottom:5px}table.fixed{table-layout:fixed}table.fixed td{overflow:hidden}tr td{font-weight:inherit}::ng-deep span.fd-toolbar__spacer{display:none}.row-summary{position:relative}.row-summary .col-total-text{position:absolute;top:25%}\n"] }]
         }], propDecorators: { columnWidth: [{
                 type: Input
             }], minWidth: [{
@@ -5795,7 +5829,8 @@ class ReportNavigatorComponent extends BaseComponent {
         super.ngOnInit();
         this._activatedRoute.params
             .pipe(takeUntil(this._onDestroy$), tap(() => this._setLoading(true)), map((params) => ({
-            Id: params.id.split('__')[0]
+            Id: params.id.split('__')[0],
+            ReportId: params.id.split('__').length > 2 ? params.id.split('__')[2] : ''
         })), switchMap((navItem) => this._portalService.renderUlvMainUi(navItem, this.containerRef, this._injector, true)), tap((ulv) => this._setActiveReport(ulv)))
             .subscribe(() => {
             this._setLoading(false);
@@ -5819,13 +5854,13 @@ class ReportNavigatorComponent extends BaseComponent {
     }
 }
 ReportNavigatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ReportNavigatorComponent, deps: [{ token: i2$4.ActivatedRoute }, { token: i2.PortalService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ReportNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ReportNavigatorComponent, selector: "bsu-report-navigator", viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `<ng-container #containerRef></ng-container>
+ReportNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ReportNavigatorComponent, selector: "bsu-report-navigator", viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `<ng-container #containerRef></ng-container>
         <bsu-mask *ngIf="(loading$ | async) === true"></bsu-mask> `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ReportNavigatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bsu-report-navigator',
-                    template: `<ng-container #containerRef></ng-container>
+                    template: `<ng-container #containerRef></ng-container>
         <bsu-mask *ngIf="(loading$ | async) === true"></bsu-mask> `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
@@ -6001,10 +6036,10 @@ class BarsaUlvMainComponent extends BaseComponent {
     }
 }
 BarsaUlvMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaUlvMainComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BarsaUlvMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: { viewerControl: "viewerControl", loading: "loading", viewerLoading: "viewerLoading", isReportPage: "isReportPage", deviceSize: "deviceSize", title: "title", searchPanelUi: "searchPanelUi", breadCrumbs: "breadCrumbs", allSearchPanelSettings: "allSearchPanelSettings", isAnonymous: "isAnonymous", canSaveGridSetting: "canSaveGridSetting", rtl: "rtl", selectedSearchPanelSettings: "selectedSearchPanelSettings", searchPanelMoChanged: "searchPanelMoChanged", selectedSearchPanelSettingsId: "selectedSearchPanelSettingsId", hideSearchPanel: "hideSearchPanel", pagingSetting: "pagingSetting", contentDensity: "contentDensity", context: "context", isMobile: "isMobile" }, outputs: { close: "close", searchPanelMoChange: "searchPanelMoChange", openManageFilters: "openManageFilters", collapsedChange: "collapsedChange", hideSearchPanelClick: "hideSearchPanelClick", filterSave: "filterSave", filterSaveAs: "filterSaveAs", pageChange: "pageChange", showFilterFieldsSetting: "showFilterFieldsSetting", manageFilters: "manageFilters", clearSearch: "clearSearch", search: "search", selectSearchPanelSettings: "selectSearchPanelSettings" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <ng-container *ngIf=\"isReportPage; else reportTemplate\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            reportPageTemplate;\n            context: {\n                $implicit: viewerControl,\n                tabMode: viewerControl.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n            }\n        \"\n    >\n    </ng-container>\n</ng-container> -->\n<ng-container\n    *ngTemplateOutlet=\"\n        isReportPage ? reportPageTemplate : reportTemplate;\n        context: {\n            $implicit: viewerControl,\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n        }\n    \"\n>\n</ng-container>\n<bsu-mask *ngIf=\"loading\" size=\"m\"></bsu-mask>\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\n    <fd-dynamic-page\n        formClose\n        mobile\n        [attr.isMobile]=\"isMobile\"\n        [isMobile]=\"isMobile\"\n        [size]=\"deviceSize | dynamicPageSize\"\n        [attr.tabMode]=\"tabMode\"\n        [autoResponsive]=\"false\"\n    >\n        <fd-dynamic-page-header\n            [title]=\"\n                (title | bbbTranslate)\n                    ? (title | bbbTranslate)\n                    : isMobile && breadCrumbs.length\n                    ? breadCrumbs[breadCrumbs.length - 1].label\n                    : ''\n            \"\n            class=\"p-b0\"\n        >\n            <fd-breadcrumb *ngIf=\"!isMobile\">\n                <ng-container *ngIf=\"breadCrumbs\">\n                    <ng-container\n                        *ngFor=\"\n                            let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length;\n                            let i = index;\n                            let last = last\n                        \"\n                    >\n                        <fd-breadcrumb-item *ngIf=\"last\">\n                            <bsu-breadcrumb\n                                [index]=\"i\"\n                                [isLast]=\"last\"\n                                [breadCrumb]=\"breadCrumb\"\n                                [allBreadCrumb]=\"breadCrumbs\"\n                            ></bsu-breadcrumb>\n                        </fd-breadcrumb-item>\n                    </ng-container>\n                </ng-container>\n            </fd-breadcrumb>\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\n\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\n                <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n                <!-- added this because in mobile landscape toolbar disapper -->\n                <fd-toolbar\n                    *ngIf=\"searchPanelUi\"\n                    class=\"global-actions\"\n                    fdType=\"transparent\"\n                    [clearBorder]=\"true\"\n                    [shouldOverflow]=\"deviceSize === 's'\"\n                >\n                    <fd-popover\n                        fd-toolbar-item\n                        #popover\n                        fdOverflowPriority=\"never\"\n                        *ngIf=\"isAnonymous === false && canSaveGridSetting\"\n                    >\n                        <fd-popover-control>\n                            <div style=\"display: flex; align-items: center\">\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\n                                    {{\n                                        selectedSearchPanelSettings?.IsStandard\n                                            ? ''\n                                            : selectedSearchPanelSettings?.Title\n                                    }}\n                                    <strong *ngIf=\"searchPanelMoChanged\">*</strong>\n                                </h3>\n                                <fdp-button\n                                    glyph=\"slim-arrow-down\"\n                                    buttonType=\"transparent\"\n                                    [fdContentDensity]=\"contentDensity\"\n                                ></fdp-button>\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body mobile>\n                            <div fd-popover-body-header>\n                                <div fd-bar [fdCozy]>\n                                    <div fd-bar-left>\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\n                                    </div>\n                                </div>\n                            </div>\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\n                                <li\n                                    fd-list-item\n                                    *ngFor=\"let option of allSearchPanelSettings\"\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\n                                >\n                                    <span fd-list-title>{{ option.Title }}</span>\n                                </li>\n                            </ul>\n                            <div fd-popover-body-footer>\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\n                                    <div fd-bar-right *ngIf=\"selectedSearchPanelSettings\">\n                                        <fd-button-bar\n                                            *ngIf=\"!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged\"\n                                            [label]=\"'Save' | bbbTranslate\"\n                                            fdType=\"emphasized\"\n                                            (click)=\"onFilterSave(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            *ngIf=\"searchPanelMoChanged\"\n                                            [label]=\"'SaveAs' | bbbTranslate\"\n                                            [fdType]=\"\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\n                                            \"\n                                            (click)=\"onFilterSaveAs(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            [label]=\"'Manage' | bbbTranslate\"\n                                            fdInitialFocus\n                                            fdType=\"transparent\"\n                                            (click)=\"onManageFilters(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                    </div>\n                                </div>\n                            </div>\n                        </fd-popover-body>\n                    </fd-popover>\n                    <fd-toolbar-spacer *ngIf=\"deviceSize !== 's'\"></fd-toolbar-spacer>\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        buttonType=\"emphasized\"\n                        [label]=\"'Search' | bbbTranslate\"\n                        (click)=\"onSearch()\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"low\"\n                        [label]=\"'Filters' | bbbTranslate\"\n                        (click)=\"onShowFilterFieldsSetting()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"low\"\n                        [label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClearSearch()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                        (click)=\"onHideSearchPanelClick()\"\n                        fdOverflowPriority=\"low\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\" *ngIf=\"!hideSearchPanel && searchPanelUi\">\n            <ng-container>\n                <bsu-search-panel\n                    [hideButtons]=\"true\"\n                    [searchPanelUi]=\"searchPanelUi\"\n                    (moChanged)=\"onSearchPanelMoChanged()\"\n                ></bsu-search-panel>\n            </ng-container>\n        </fd-dynamic-page-subheader>\n        <fd-dynamic-page-content *ngIf=\"!tabMode\">\n            <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer *ngIf=\"pagingSetting?.TotalPages\">\n            <!-- page footer content goes here -->\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-middle>\n                    <ng-container\n                        [renderUlvPaging]=\"context\"\n                        [pagingSetting]=\"pagingSetting\"\n                        (pageChange)=\"onPageChange($event)\"\n                    ></ng-container>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n    <ng-container *ngIf=\"tabMode\">\n        <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #reportTemplate>\n    <bsu-mask *ngIf=\"loading\" size=\"s\"></bsu-mask>\n    <ng-container *ngIf=\"!hideSearchPanel && searchPanelUi\">\n        <bsu-search-panel [searchPanelUi]=\"searchPanelUi\" (moChanged)=\"onSearchPanelMoChanged()\"></bsu-search-panel>\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    <ng-container\n        *ngIf=\"pagingSetting?.TotalPages\"\n        [renderUlvPaging]=\"context\"\n        [pagingSetting]=\"pagingSetting\"\n        (pageChange)=\"onPageChange($event)\"\n    ></ng-container>\n</ng-template>\n<ng-template #viewerTemplate>\n    <div\n        class=\"viewer-container\"\n        [style.height]=\"viewerLoading ? '100%' : 'auto'\"\n        [style.position]=\"viewerLoading ? 'relative' : null\"\n    >\n        <bsu-mask *ngIf=\"viewerLoading\" size=\"m\"></bsu-mask>\n        <ng-container *ngIf=\"viewerControl\" [renderUlvViewer]=\"viewerControl\"></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;flex-grow:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{margin:0!important}:host ::ng-deep .fd-dynamic-page__collapsible-header{padding-top:0!important;padding-bottom:0!important}:host ::ng-deep .fd-dynamic-page__toolbar-container{flex:1}:host ::ng-deep .fdp-search-field__input-group{outline:none}:host ::ng-deep .fdp-search-field__input-group :-webkit-autofill,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:hover,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:focus,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px white inset!important}:host ::ng-deep .global-actions .fd-toolbar{padding:0}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page .fd-dynamic-page__collapsible-header-visibility-container{box-shadow:none}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.fd-dynamic-page,fd-dynamic-page-content{padding:1rem 0!important}.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RenderUlvViewerDirective, selector: "[renderUlvViewer]", inputs: ["mask", "renderUlvViewer"] }, { kind: "directive", type: i2.RenderUlvPaginDirective, selector: "[renderUlvPaging]", inputs: ["mask", "pagingSetting", "renderUlvPaging"], outputs: ["pageChange"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i3$7.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i5$2.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$2.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$6.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i7$6.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i7$6.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i7$6.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i7$6.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i7$6.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i7$6.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$2.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "directive", type: i7$1.ToolbarOverflowGroupDirective, selector: "[fdOverflowGroup]", inputs: ["fdOverflowGroup"] }, { kind: "component", type: i13.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: SearchPanelComponent, selector: "bsu-search-panel", inputs: ["searchPanelUi", "hideButtons"], outputs: ["moChanged"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DynamicPageSizePipe, name: "dynamicPageSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaUlvMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: { viewerControl: "viewerControl", loading: "loading", viewerLoading: "viewerLoading", isReportPage: "isReportPage", deviceSize: "deviceSize", title: "title", searchPanelUi: "searchPanelUi", breadCrumbs: "breadCrumbs", allSearchPanelSettings: "allSearchPanelSettings", isAnonymous: "isAnonymous", canSaveGridSetting: "canSaveGridSetting", rtl: "rtl", selectedSearchPanelSettings: "selectedSearchPanelSettings", searchPanelMoChanged: "searchPanelMoChanged", selectedSearchPanelSettingsId: "selectedSearchPanelSettingsId", hideSearchPanel: "hideSearchPanel", pagingSetting: "pagingSetting", contentDensity: "contentDensity", context: "context", isMobile: "isMobile" }, outputs: { close: "close", searchPanelMoChange: "searchPanelMoChange", openManageFilters: "openManageFilters", collapsedChange: "collapsedChange", hideSearchPanelClick: "hideSearchPanelClick", filterSave: "filterSave", filterSaveAs: "filterSaveAs", pageChange: "pageChange", showFilterFieldsSetting: "showFilterFieldsSetting", manageFilters: "manageFilters", clearSearch: "clearSearch", search: "search", selectSearchPanelSettings: "selectSearchPanelSettings" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <ng-container *ngIf=\"isReportPage; else reportTemplate\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            reportPageTemplate;\n            context: {\n                $implicit: viewerControl,\n                tabMode: viewerControl.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n            }\n        \"\n    >\n    </ng-container>\n</ng-container> -->\n<ng-container\n    *ngTemplateOutlet=\"\n        isReportPage ? reportPageTemplate : reportTemplate;\n        context: {\n            $implicit: viewerControl,\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n        }\n    \"\n>\n</ng-container>\n<bsu-mask *ngIf=\"loading\" size=\"m\"></bsu-mask>\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\n    <fd-dynamic-page\n        formClose\n        mobile\n        [attr.isMobile]=\"isMobile\"\n        [isMobile]=\"isMobile\"\n        [size]=\"deviceSize | dynamicPageSize\"\n        [attr.tabMode]=\"tabMode\"\n        [autoResponsive]=\"false\"\n    >\n        <fd-dynamic-page-header\n            [title]=\"\n                (title | bbbTranslate)\n                    ? (title | bbbTranslate)\n                    : isMobile && breadCrumbs.length\n                    ? breadCrumbs[breadCrumbs.length - 1].label\n                    : ''\n            \"\n            class=\"p-b0\"\n        >\n            <fd-breadcrumb *ngIf=\"!isMobile\">\n                <ng-container *ngIf=\"breadCrumbs\">\n                    <ng-container\n                        *ngFor=\"\n                            let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length;\n                            let i = index;\n                            let last = last\n                        \"\n                    >\n                        <fd-breadcrumb-item *ngIf=\"last\">\n                            <bsu-breadcrumb\n                                [index]=\"i\"\n                                [isLast]=\"last\"\n                                [breadCrumb]=\"breadCrumb\"\n                                [allBreadCrumb]=\"breadCrumbs\"\n                            ></bsu-breadcrumb>\n                        </fd-breadcrumb-item>\n                    </ng-container>\n                </ng-container>\n            </fd-breadcrumb>\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\n\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\n                <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n                <!-- added this because in mobile landscape toolbar disapper -->\n                <fd-toolbar\n                    *ngIf=\"searchPanelUi\"\n                    class=\"global-actions\"\n                    fdType=\"transparent\"\n                    [clearBorder]=\"true\"\n                    [shouldOverflow]=\"deviceSize === 's'\"\n                >\n                    <fd-popover\n                        fd-toolbar-item\n                        #popover\n                        fdOverflowPriority=\"never\"\n                        *ngIf=\"isAnonymous === false && canSaveGridSetting\"\n                    >\n                        <fd-popover-control>\n                            <div style=\"display: flex; align-items: center\">\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\n                                    {{\n                                        selectedSearchPanelSettings?.IsStandard\n                                            ? ''\n                                            : selectedSearchPanelSettings?.Title\n                                    }}\n                                    <strong *ngIf=\"searchPanelMoChanged\">*</strong>\n                                </h3>\n                                <fdp-button\n                                    glyph=\"slim-arrow-down\"\n                                    buttonType=\"transparent\"\n                                    [fdContentDensity]=\"contentDensity\"\n                                ></fdp-button>\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body mobile>\n                            <div fd-popover-body-header>\n                                <div fd-bar [fdCozy]>\n                                    <div fd-bar-left>\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\n                                    </div>\n                                </div>\n                            </div>\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\n                                <li\n                                    fd-list-item\n                                    *ngFor=\"let option of allSearchPanelSettings\"\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\n                                >\n                                    <span fd-list-title>{{ option.Title }}</span>\n                                </li>\n                            </ul>\n                            <div fd-popover-body-footer>\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\n                                    <div fd-bar-right *ngIf=\"selectedSearchPanelSettings\">\n                                        <fd-button-bar\n                                            *ngIf=\"!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged\"\n                                            [label]=\"'Save' | bbbTranslate\"\n                                            fdType=\"emphasized\"\n                                            (click)=\"onFilterSave(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            *ngIf=\"searchPanelMoChanged\"\n                                            [label]=\"'SaveAs' | bbbTranslate\"\n                                            [fdType]=\"\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\n                                            \"\n                                            (click)=\"onFilterSaveAs(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            [label]=\"'Manage' | bbbTranslate\"\n                                            fdInitialFocus\n                                            fdType=\"transparent\"\n                                            (click)=\"onManageFilters(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                    </div>\n                                </div>\n                            </div>\n                        </fd-popover-body>\n                    </fd-popover>\n                    <fd-toolbar-spacer *ngIf=\"deviceSize !== 's'\"></fd-toolbar-spacer>\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        buttonType=\"emphasized\"\n                        [label]=\"'Search' | bbbTranslate\"\n                        (click)=\"onSearch()\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"low\"\n                        [label]=\"'Filters' | bbbTranslate\"\n                        (click)=\"onShowFilterFieldsSetting()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"low\"\n                        [label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClearSearch()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                        (click)=\"onHideSearchPanelClick()\"\n                        fdOverflowPriority=\"low\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\" *ngIf=\"!hideSearchPanel && searchPanelUi\">\n            <ng-container>\n                <bsu-search-panel\n                    [hideButtons]=\"true\"\n                    [searchPanelUi]=\"searchPanelUi\"\n                    (moChanged)=\"onSearchPanelMoChanged()\"\n                ></bsu-search-panel>\n            </ng-container>\n        </fd-dynamic-page-subheader>\n        <fd-dynamic-page-content *ngIf=\"!tabMode\">\n            <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer *ngIf=\"pagingSetting?.TotalPages\">\n            <!-- page footer content goes here -->\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-middle>\n                    <ng-container\n                        [renderUlvPaging]=\"context\"\n                        [pagingSetting]=\"pagingSetting\"\n                        (pageChange)=\"onPageChange($event)\"\n                    ></ng-container>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n    <ng-container *ngIf=\"tabMode\">\n        <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #reportTemplate>\n    <bsu-mask *ngIf=\"loading\" size=\"s\"></bsu-mask>\n    <ng-container *ngIf=\"!hideSearchPanel && searchPanelUi\">\n        <bsu-search-panel [searchPanelUi]=\"searchPanelUi\" (moChanged)=\"onSearchPanelMoChanged()\"></bsu-search-panel>\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    <ng-container\n        *ngIf=\"pagingSetting?.TotalPages\"\n        [renderUlvPaging]=\"context\"\n        [pagingSetting]=\"pagingSetting\"\n        (pageChange)=\"onPageChange($event)\"\n    ></ng-container>\n</ng-template>\n<ng-template #viewerTemplate>\n    <div\n        class=\"viewer-container\"\n        [style.height]=\"viewerLoading ? '100%' : 'auto'\"\n        [style.position]=\"viewerLoading ? 'relative' : null\"\n    >\n        <bsu-mask *ngIf=\"viewerLoading\" size=\"m\"></bsu-mask>\n        <ng-container *ngIf=\"viewerControl\" [renderUlvViewer]=\"viewerControl\"></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;flex-grow:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{margin:0!important}:host ::ng-deep .fd-dynamic-page__collapsible-header{padding-top:0!important;padding-bottom:0!important}:host ::ng-deep .fd-dynamic-page__toolbar-container{flex:1}:host ::ng-deep .fdp-search-field__input-group{outline:none}:host ::ng-deep .fdp-search-field__input-group :-webkit-autofill,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:hover,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:focus,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px white inset!important}:host ::ng-deep .global-actions .fd-toolbar{padding:0}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page .fd-dynamic-page__collapsible-header-visibility-container{box-shadow:none}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.fd-dynamic-page,fd-dynamic-page-content{padding:1rem 0!important}.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}.viewer-container{background:var(--sapBaseColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RenderUlvViewerDirective, selector: "[renderUlvViewer]", inputs: ["mask", "renderUlvViewer"] }, { kind: "directive", type: i2.RenderUlvPaginDirective, selector: "[renderUlvPaging]", inputs: ["mask", "pagingSetting", "renderUlvPaging"], outputs: ["pageChange"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i3$7.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i5$3.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$3.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$6.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i7$6.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i7$6.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i7$6.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i7$6.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i7$6.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i7$6.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$2.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "directive", type: i7$1.ToolbarOverflowGroupDirective, selector: "[fdOverflowGroup]", inputs: ["fdOverflowGroup"] }, { kind: "component", type: i13.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: SearchPanelComponent, selector: "bsu-search-panel", inputs: ["searchPanelUi", "hideButtons"], outputs: ["moChanged"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DynamicPageSizePipe, name: "dynamicPageSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaUlvMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-ulv-main', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <ng-container *ngIf=\"isReportPage; else reportTemplate\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            reportPageTemplate;\n            context: {\n                $implicit: viewerControl,\n                tabMode: viewerControl.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n            }\n        \"\n    >\n    </ng-container>\n</ng-container> -->\n<ng-container\n    *ngTemplateOutlet=\"\n        isReportPage ? reportPageTemplate : reportTemplate;\n        context: {\n            $implicit: viewerControl,\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n        }\n    \"\n>\n</ng-container>\n<bsu-mask *ngIf=\"loading\" size=\"m\"></bsu-mask>\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\n    <fd-dynamic-page\n        formClose\n        mobile\n        [attr.isMobile]=\"isMobile\"\n        [isMobile]=\"isMobile\"\n        [size]=\"deviceSize | dynamicPageSize\"\n        [attr.tabMode]=\"tabMode\"\n        [autoResponsive]=\"false\"\n    >\n        <fd-dynamic-page-header\n            [title]=\"\n                (title | bbbTranslate)\n                    ? (title | bbbTranslate)\n                    : isMobile && breadCrumbs.length\n                    ? breadCrumbs[breadCrumbs.length - 1].label\n                    : ''\n            \"\n            class=\"p-b0\"\n        >\n            <fd-breadcrumb *ngIf=\"!isMobile\">\n                <ng-container *ngIf=\"breadCrumbs\">\n                    <ng-container\n                        *ngFor=\"\n                            let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length;\n                            let i = index;\n                            let last = last\n                        \"\n                    >\n                        <fd-breadcrumb-item *ngIf=\"last\">\n                            <bsu-breadcrumb\n                                [index]=\"i\"\n                                [isLast]=\"last\"\n                                [breadCrumb]=\"breadCrumb\"\n                                [allBreadCrumb]=\"breadCrumbs\"\n                            ></bsu-breadcrumb>\n                        </fd-breadcrumb-item>\n                    </ng-container>\n                </ng-container>\n            </fd-breadcrumb>\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\n\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\n                <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n                <!-- added this because in mobile landscape toolbar disapper -->\n                <fd-toolbar\n                    *ngIf=\"searchPanelUi\"\n                    class=\"global-actions\"\n                    fdType=\"transparent\"\n                    [clearBorder]=\"true\"\n                    [shouldOverflow]=\"deviceSize === 's'\"\n                >\n                    <fd-popover\n                        fd-toolbar-item\n                        #popover\n                        fdOverflowPriority=\"never\"\n                        *ngIf=\"isAnonymous === false && canSaveGridSetting\"\n                    >\n                        <fd-popover-control>\n                            <div style=\"display: flex; align-items: center\">\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\n                                    {{\n                                        selectedSearchPanelSettings?.IsStandard\n                                            ? ''\n                                            : selectedSearchPanelSettings?.Title\n                                    }}\n                                    <strong *ngIf=\"searchPanelMoChanged\">*</strong>\n                                </h3>\n                                <fdp-button\n                                    glyph=\"slim-arrow-down\"\n                                    buttonType=\"transparent\"\n                                    [fdContentDensity]=\"contentDensity\"\n                                ></fdp-button>\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body mobile>\n                            <div fd-popover-body-header>\n                                <div fd-bar [fdCozy]>\n                                    <div fd-bar-left>\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\n                                    </div>\n                                </div>\n                            </div>\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\n                                <li\n                                    fd-list-item\n                                    *ngFor=\"let option of allSearchPanelSettings\"\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\n                                >\n                                    <span fd-list-title>{{ option.Title }}</span>\n                                </li>\n                            </ul>\n                            <div fd-popover-body-footer>\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\n                                    <div fd-bar-right *ngIf=\"selectedSearchPanelSettings\">\n                                        <fd-button-bar\n                                            *ngIf=\"!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged\"\n                                            [label]=\"'Save' | bbbTranslate\"\n                                            fdType=\"emphasized\"\n                                            (click)=\"onFilterSave(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            *ngIf=\"searchPanelMoChanged\"\n                                            [label]=\"'SaveAs' | bbbTranslate\"\n                                            [fdType]=\"\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\n                                            \"\n                                            (click)=\"onFilterSaveAs(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            [label]=\"'Manage' | bbbTranslate\"\n                                            fdInitialFocus\n                                            fdType=\"transparent\"\n                                            (click)=\"onManageFilters(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                    </div>\n                                </div>\n                            </div>\n                        </fd-popover-body>\n                    </fd-popover>\n                    <fd-toolbar-spacer *ngIf=\"deviceSize !== 's'\"></fd-toolbar-spacer>\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        buttonType=\"emphasized\"\n                        [label]=\"'Search' | bbbTranslate\"\n                        (click)=\"onSearch()\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"low\"\n                        [label]=\"'Filters' | bbbTranslate\"\n                        (click)=\"onShowFilterFieldsSetting()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"low\"\n                        [label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClearSearch()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                        (click)=\"onHideSearchPanelClick()\"\n                        fdOverflowPriority=\"low\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\" *ngIf=\"!hideSearchPanel && searchPanelUi\">\n            <ng-container>\n                <bsu-search-panel\n                    [hideButtons]=\"true\"\n                    [searchPanelUi]=\"searchPanelUi\"\n                    (moChanged)=\"onSearchPanelMoChanged()\"\n                ></bsu-search-panel>\n            </ng-container>\n        </fd-dynamic-page-subheader>\n        <fd-dynamic-page-content *ngIf=\"!tabMode\">\n            <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer *ngIf=\"pagingSetting?.TotalPages\">\n            <!-- page footer content goes here -->\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-middle>\n                    <ng-container\n                        [renderUlvPaging]=\"context\"\n                        [pagingSetting]=\"pagingSetting\"\n                        (pageChange)=\"onPageChange($event)\"\n                    ></ng-container>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n    <ng-container *ngIf=\"tabMode\">\n        <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #reportTemplate>\n    <bsu-mask *ngIf=\"loading\" size=\"s\"></bsu-mask>\n    <ng-container *ngIf=\"!hideSearchPanel && searchPanelUi\">\n        <bsu-search-panel [searchPanelUi]=\"searchPanelUi\" (moChanged)=\"onSearchPanelMoChanged()\"></bsu-search-panel>\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    <ng-container\n        *ngIf=\"pagingSetting?.TotalPages\"\n        [renderUlvPaging]=\"context\"\n        [pagingSetting]=\"pagingSetting\"\n        (pageChange)=\"onPageChange($event)\"\n    ></ng-container>\n</ng-template>\n<ng-template #viewerTemplate>\n    <div\n        class=\"viewer-container\"\n        [style.height]=\"viewerLoading ? '100%' : 'auto'\"\n        [style.position]=\"viewerLoading ? 'relative' : null\"\n    >\n        <bsu-mask *ngIf=\"viewerLoading\" size=\"m\"></bsu-mask>\n        <ng-container *ngIf=\"viewerControl\" [renderUlvViewer]=\"viewerControl\"></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;flex-grow:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{margin:0!important}:host ::ng-deep .fd-dynamic-page__collapsible-header{padding-top:0!important;padding-bottom:0!important}:host ::ng-deep .fd-dynamic-page__toolbar-container{flex:1}:host ::ng-deep .fdp-search-field__input-group{outline:none}:host ::ng-deep .fdp-search-field__input-group :-webkit-autofill,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:hover,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:focus,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px white inset!important}:host ::ng-deep .global-actions .fd-toolbar{padding:0}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page .fd-dynamic-page__collapsible-header-visibility-container{box-shadow:none}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.fd-dynamic-page,fd-dynamic-page-content{padding:1rem 0!important}.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"] }]
+            args: [{ selector: 'bsu-barsa-ulv-main', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <ng-container *ngIf=\"isReportPage; else reportTemplate\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            reportPageTemplate;\n            context: {\n                $implicit: viewerControl,\n                tabMode: viewerControl.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n            }\n        \"\n    >\n    </ng-container>\n</ng-container> -->\n<ng-container\n    *ngTemplateOutlet=\"\n        isReportPage ? reportPageTemplate : reportTemplate;\n        context: {\n            $implicit: viewerControl,\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n        }\n    \"\n>\n</ng-container>\n<bsu-mask *ngIf=\"loading\" size=\"m\"></bsu-mask>\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\n    <fd-dynamic-page\n        formClose\n        mobile\n        [attr.isMobile]=\"isMobile\"\n        [isMobile]=\"isMobile\"\n        [size]=\"deviceSize | dynamicPageSize\"\n        [attr.tabMode]=\"tabMode\"\n        [autoResponsive]=\"false\"\n    >\n        <fd-dynamic-page-header\n            [title]=\"\n                (title | bbbTranslate)\n                    ? (title | bbbTranslate)\n                    : isMobile && breadCrumbs.length\n                    ? breadCrumbs[breadCrumbs.length - 1].label\n                    : ''\n            \"\n            class=\"p-b0\"\n        >\n            <fd-breadcrumb *ngIf=\"!isMobile\">\n                <ng-container *ngIf=\"breadCrumbs\">\n                    <ng-container\n                        *ngFor=\"\n                            let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length;\n                            let i = index;\n                            let last = last\n                        \"\n                    >\n                        <fd-breadcrumb-item *ngIf=\"last\">\n                            <bsu-breadcrumb\n                                [index]=\"i\"\n                                [isLast]=\"last\"\n                                [breadCrumb]=\"breadCrumb\"\n                                [allBreadCrumb]=\"breadCrumbs\"\n                            ></bsu-breadcrumb>\n                        </fd-breadcrumb-item>\n                    </ng-container>\n                </ng-container>\n            </fd-breadcrumb>\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\n\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\n                <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n                <!-- added this because in mobile landscape toolbar disapper -->\n                <fd-toolbar\n                    *ngIf=\"searchPanelUi\"\n                    class=\"global-actions\"\n                    fdType=\"transparent\"\n                    [clearBorder]=\"true\"\n                    [shouldOverflow]=\"deviceSize === 's'\"\n                >\n                    <fd-popover\n                        fd-toolbar-item\n                        #popover\n                        fdOverflowPriority=\"never\"\n                        *ngIf=\"isAnonymous === false && canSaveGridSetting\"\n                    >\n                        <fd-popover-control>\n                            <div style=\"display: flex; align-items: center\">\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\n                                    {{\n                                        selectedSearchPanelSettings?.IsStandard\n                                            ? ''\n                                            : selectedSearchPanelSettings?.Title\n                                    }}\n                                    <strong *ngIf=\"searchPanelMoChanged\">*</strong>\n                                </h3>\n                                <fdp-button\n                                    glyph=\"slim-arrow-down\"\n                                    buttonType=\"transparent\"\n                                    [fdContentDensity]=\"contentDensity\"\n                                ></fdp-button>\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body mobile>\n                            <div fd-popover-body-header>\n                                <div fd-bar [fdCozy]>\n                                    <div fd-bar-left>\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\n                                    </div>\n                                </div>\n                            </div>\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\n                                <li\n                                    fd-list-item\n                                    *ngFor=\"let option of allSearchPanelSettings\"\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\n                                >\n                                    <span fd-list-title>{{ option.Title }}</span>\n                                </li>\n                            </ul>\n                            <div fd-popover-body-footer>\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\n                                    <div fd-bar-right *ngIf=\"selectedSearchPanelSettings\">\n                                        <fd-button-bar\n                                            *ngIf=\"!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged\"\n                                            [label]=\"'Save' | bbbTranslate\"\n                                            fdType=\"emphasized\"\n                                            (click)=\"onFilterSave(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            *ngIf=\"searchPanelMoChanged\"\n                                            [label]=\"'SaveAs' | bbbTranslate\"\n                                            [fdType]=\"\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\n                                            \"\n                                            (click)=\"onFilterSaveAs(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            [label]=\"'Manage' | bbbTranslate\"\n                                            fdInitialFocus\n                                            fdType=\"transparent\"\n                                            (click)=\"onManageFilters(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                    </div>\n                                </div>\n                            </div>\n                        </fd-popover-body>\n                    </fd-popover>\n                    <fd-toolbar-spacer *ngIf=\"deviceSize !== 's'\"></fd-toolbar-spacer>\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        buttonType=\"emphasized\"\n                        [label]=\"'Search' | bbbTranslate\"\n                        (click)=\"onSearch()\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"low\"\n                        [label]=\"'Filters' | bbbTranslate\"\n                        (click)=\"onShowFilterFieldsSetting()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"low\"\n                        [label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClearSearch()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                        (click)=\"onHideSearchPanelClick()\"\n                        fdOverflowPriority=\"low\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\" *ngIf=\"!hideSearchPanel && searchPanelUi\">\n            <ng-container>\n                <bsu-search-panel\n                    [hideButtons]=\"true\"\n                    [searchPanelUi]=\"searchPanelUi\"\n                    (moChanged)=\"onSearchPanelMoChanged()\"\n                ></bsu-search-panel>\n            </ng-container>\n        </fd-dynamic-page-subheader>\n        <fd-dynamic-page-content *ngIf=\"!tabMode\">\n            <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer *ngIf=\"pagingSetting?.TotalPages\">\n            <!-- page footer content goes here -->\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-middle>\n                    <ng-container\n                        [renderUlvPaging]=\"context\"\n                        [pagingSetting]=\"pagingSetting\"\n                        (pageChange)=\"onPageChange($event)\"\n                    ></ng-container>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n    <ng-container *ngIf=\"tabMode\">\n        <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #reportTemplate>\n    <bsu-mask *ngIf=\"loading\" size=\"s\"></bsu-mask>\n    <ng-container *ngIf=\"!hideSearchPanel && searchPanelUi\">\n        <bsu-search-panel [searchPanelUi]=\"searchPanelUi\" (moChanged)=\"onSearchPanelMoChanged()\"></bsu-search-panel>\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    <ng-container\n        *ngIf=\"pagingSetting?.TotalPages\"\n        [renderUlvPaging]=\"context\"\n        [pagingSetting]=\"pagingSetting\"\n        (pageChange)=\"onPageChange($event)\"\n    ></ng-container>\n</ng-template>\n<ng-template #viewerTemplate>\n    <div\n        class=\"viewer-container\"\n        [style.height]=\"viewerLoading ? '100%' : 'auto'\"\n        [style.position]=\"viewerLoading ? 'relative' : null\"\n    >\n        <bsu-mask *ngIf=\"viewerLoading\" size=\"m\"></bsu-mask>\n        <ng-container *ngIf=\"viewerControl\" [renderUlvViewer]=\"viewerControl\"></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;flex-grow:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{margin:0!important}:host ::ng-deep .fd-dynamic-page__collapsible-header{padding-top:0!important;padding-bottom:0!important}:host ::ng-deep .fd-dynamic-page__toolbar-container{flex:1}:host ::ng-deep .fdp-search-field__input-group{outline:none}:host ::ng-deep .fdp-search-field__input-group :-webkit-autofill,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:hover,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:focus,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px white inset!important}:host ::ng-deep .global-actions .fd-toolbar{padding:0}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page .fd-dynamic-page__collapsible-header-visibility-container{box-shadow:none}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.fd-dynamic-page,fd-dynamic-page-content{padding:1rem 0!important}.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}.viewer-container{background:var(--sapBaseColor)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _dynamicPageComponent: [{
                 type: ViewChild,
                 args: [DynamicPageComponent]
@@ -6367,7 +6402,7 @@ class UiColorUiComponent extends FieldBaseComponent {
     }
 }
 UiColorUiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiColorUiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiColorUiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiColorUiComponent, selector: "bsu-ui-color-ui", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"readonly$ | async; else editable\" class=\"read-only\">\r\n    <div [style.background-color]=\"value\"></div>\r\n    <span>{{ value }}</span>\r\n    <button\r\n        fd-button\r\n        [cdkCopyToClipboard]=\"value\"\r\n        [fdType]=\"'transparent'\"\r\n        [glyph]=\"'copy'\"\r\n        aria-label=\"copy\"\r\n        title=\"copy\"\r\n    ></button>\r\n</div>\r\n\r\n<ng-template #editable>\r\n    <fd-popover #popover>\r\n        <fd-popover-control>\r\n            <button [style.background-color]=\"value\" fd-button></button>\r\n        </fd-popover-control>\r\n\r\n        <fd-popover-body>\r\n            <color-chrome\r\n                *ngIf=\"!isVisibleSwatches\"\r\n                [color]=\"value\"\r\n                className=\"color-box\"\r\n                (colorChange)=\"onColorChang($event)\"\r\n            ></color-chrome>\r\n            <color-swatches\r\n                *ngIf=\"isVisibleSwatches\"\r\n                [color]=\"value\"\r\n                (colorChange)=\"onColorChang($event)\"\r\n            ></color-swatches>\r\n            <fd-toolbar style=\"background-color: white\">\r\n                <button\r\n                    fd-toolbar-item\r\n                    fd-button\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                    (click)=\"onCancel(popover)\"\r\n                    [compact]=\"true\"\r\n                ></button>\r\n                <button\r\n                    fd-toolbar-item\r\n                    fd-button\r\n                    [label]=\"'Ok' | bbbTranslate\"\r\n                    (click)=\"onApply(popover)\"\r\n                    [compact]=\"true\"\r\n                ></button>\r\n                <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                <button\r\n                    fd-toolbar-item\r\n                    fd-button\r\n                    [label]=\"switchText\"\r\n                    (click)=\"onSwatchClick()\"\r\n                    [compact]=\"true\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n", styles: [".read-only{display:flex;justify-content:flex-start;column-gap:3px}.read-only div{width:25px;height:20px;border-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i3$2.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i5$3.SwatchesComponent, selector: "color-swatches", inputs: ["width", "height", "colors", "zDepth", "radius", "background"] }, { kind: "component", type: i6$3.ChromeComponent, selector: "color-chrome", inputs: ["disableAlpha"] }, { kind: "directive", type: i7$7.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiColorUiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiColorUiComponent, selector: "bsu-ui-color-ui", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"readonly$ | async; else editable\" class=\"read-only\">\r\n    <div [style.background-color]=\"value\"></div>\r\n    <span>{{ value }}</span>\r\n    <button\r\n        fd-button\r\n        [cdkCopyToClipboard]=\"value\"\r\n        [fdType]=\"'transparent'\"\r\n        [glyph]=\"'copy'\"\r\n        aria-label=\"copy\"\r\n        title=\"copy\"\r\n    ></button>\r\n</div>\r\n\r\n<ng-template #editable>\r\n    <fd-popover #popover>\r\n        <fd-popover-control>\r\n            <button [style.background-color]=\"value\" fd-button></button>\r\n        </fd-popover-control>\r\n\r\n        <fd-popover-body>\r\n            <color-chrome\r\n                *ngIf=\"!isVisibleSwatches\"\r\n                [color]=\"value\"\r\n                className=\"color-box\"\r\n                (colorChange)=\"onColorChang($event)\"\r\n            ></color-chrome>\r\n            <color-swatches\r\n                *ngIf=\"isVisibleSwatches\"\r\n                [color]=\"value\"\r\n                (colorChange)=\"onColorChang($event)\"\r\n            ></color-swatches>\r\n            <fd-toolbar style=\"background-color: white\">\r\n                <button\r\n                    fd-toolbar-item\r\n                    fd-button\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                    (click)=\"onCancel(popover)\"\r\n                    [compact]=\"true\"\r\n                ></button>\r\n                <button\r\n                    fd-toolbar-item\r\n                    fd-button\r\n                    [label]=\"'Ok' | bbbTranslate\"\r\n                    (click)=\"onApply(popover)\"\r\n                    [compact]=\"true\"\r\n                ></button>\r\n                <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                <button\r\n                    fd-toolbar-item\r\n                    fd-button\r\n                    [label]=\"switchText\"\r\n                    (click)=\"onSwatchClick()\"\r\n                    [compact]=\"true\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n", styles: [".read-only{display:flex;justify-content:flex-start;column-gap:3px}.read-only div{width:25px;height:20px;border-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i3$2.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i5$4.SwatchesComponent, selector: "color-swatches", inputs: ["width", "height", "colors", "zDepth", "radius", "background"] }, { kind: "component", type: i6$3.ChromeComponent, selector: "color-chrome", inputs: ["disableAlpha"] }, { kind: "directive", type: i7$7.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiColorUiComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-color-ui', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"readonly$ | async; else editable\" class=\"read-only\">\r\n    <div [style.background-color]=\"value\"></div>\r\n    <span>{{ value }}</span>\r\n    <button\r\n        fd-button\r\n        [cdkCopyToClipboard]=\"value\"\r\n        [fdType]=\"'transparent'\"\r\n        [glyph]=\"'copy'\"\r\n        aria-label=\"copy\"\r\n        title=\"copy\"\r\n    ></button>\r\n</div>\r\n\r\n<ng-template #editable>\r\n    <fd-popover #popover>\r\n        <fd-popover-control>\r\n            <button [style.background-color]=\"value\" fd-button></button>\r\n        </fd-popover-control>\r\n\r\n        <fd-popover-body>\r\n            <color-chrome\r\n                *ngIf=\"!isVisibleSwatches\"\r\n                [color]=\"value\"\r\n                className=\"color-box\"\r\n                (colorChange)=\"onColorChang($event)\"\r\n            ></color-chrome>\r\n            <color-swatches\r\n                *ngIf=\"isVisibleSwatches\"\r\n                [color]=\"value\"\r\n                (colorChange)=\"onColorChang($event)\"\r\n            ></color-swatches>\r\n            <fd-toolbar style=\"background-color: white\">\r\n                <button\r\n                    fd-toolbar-item\r\n                    fd-button\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                    (click)=\"onCancel(popover)\"\r\n                    [compact]=\"true\"\r\n                ></button>\r\n                <button\r\n                    fd-toolbar-item\r\n                    fd-button\r\n                    [label]=\"'Ok' | bbbTranslate\"\r\n                    (click)=\"onApply(popover)\"\r\n                    [compact]=\"true\"\r\n                ></button>\r\n                <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                <button\r\n                    fd-toolbar-item\r\n                    fd-button\r\n                    [label]=\"switchText\"\r\n                    (click)=\"onSwatchClick()\"\r\n                    [compact]=\"true\"\r\n                ></button>\r\n            </fd-toolbar>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n", styles: [".read-only{display:flex;justify-content:flex-start;column-gap:3px}.read-only div{width:25px;height:20px;border-radius:5px}\n"] }]
@@ -6680,7 +6715,8 @@ class BarsaTinyemceComponent extends BaseComponent {
                             type: 'menuitem',
                             text: item.Title || item.Html.replace(/<br\s*\/?>/gi, ' '),
                             onAction: () => {
-                                ed.execCommand('mceInsertRawHTML', false, item.Html);
+                                // ed.execCommand('mceInsertRawHTML', false, item.Html);
+                                ed.insertContent(item.Html, { format: 'raw' });
                             }
                         });
                     });
@@ -6892,7 +6928,7 @@ class BarsaTinyemceComponent extends BaseComponent {
     }
 }
 BarsaTinyemceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTinyemceComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BarsaTinyemceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTinyemceComponent, selector: "bsu-barsa-tinyemce", inputs: { Setting: "Setting", isReadonly: "isReadonly", value: "value" }, outputs: { valueChange: "valueChange", tinyInit: "tinyInit" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-input tinywrapper\" [style.min-height.px]=\"height\" [id]=\"tinyHostId\"></div>\r\n\r\n<!-- <textarea [id]=\"tinyHostId\" style=\"height: 100%; visibility: hidden\"></textarea> -->\r\n", styles: [":host{display:block;width:100%;height:100%}.tinywrapper{overflow:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaTinyemceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTinyemceComponent, selector: "bsu-barsa-tinyemce", inputs: { Setting: "Setting", isReadonly: "isReadonly", value: "value", defaultVerbs: "defaultVerbs" }, outputs: { valueChange: "valueChange", tinyInit: "tinyInit" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-input tinywrapper\" [style.min-height.px]=\"height\" [id]=\"tinyHostId\"></div>\r\n\r\n<!-- <textarea [id]=\"tinyHostId\" style=\"height: 100%; visibility: hidden\"></textarea> -->\r\n", styles: [":host{display:block;width:100%;height:100%}.tinywrapper{overflow:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTinyemceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-barsa-tinyemce', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fd-input tinywrapper\" [style.min-height.px]=\"height\" [id]=\"tinyHostId\"></div>\r\n\r\n<!-- <textarea [id]=\"tinyHostId\" style=\"height: 100%; visibility: hidden\"></textarea> -->\r\n", styles: [":host{display:block;width:100%;height:100%}.tinywrapper{overflow:auto}\n"] }]
@@ -6902,6 +6938,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], defaultVerbs: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], tinyInit: [{
@@ -7241,7 +7279,7 @@ class UiFileLinearListBoxComponent extends DeviceInfoFieldBaseComponent {
     }
 }
 UiFileLinearListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiFileLinearListBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiFileLinearListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiFileLinearListBoxComponent, selector: "bsu-ui-file-linear-list-box", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "fileUploadComponent", first: true, predicate: FileUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"value\">\r\n    <div class=\"token-container\">\r\n        <div class=\"token-wrapper\">\r\n            <ng-container *ngFor=\"let file of value; trackBy: trackById\">\r\n                <fd-popover *ngIf=\"!file.IsDeleted\">\r\n                    <fd-popover-control>\r\n                        <fd-token (onCloseClick)=\"onFileDeleted(file.Id)\" [readOnly]=\"(disableOrReadonly$ | async)!!\"\r\n                            >{{ file.FileName }}\r\n                            <ng-container *ngIf=\"file.IsNew\">\r\n                                <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                                    <span\r\n                                        *ngIf=\"valueExtra[file.Id].UploadState !== 'Complete'\"\r\n                                        fd-object-status\r\n                                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\r\n                                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\r\n                                        [title]=\"valueExtra[file.Id]?.UploadState\"\r\n                                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\r\n                                    ></span>\r\n                                    <fd-object-number\r\n                                        *ngIf=\"valueExtra[file.Id].Progress\"\r\n                                        [number]=\"valueExtra[file.Id].Progress || 0\"\r\n                                        unit=\"%\"\r\n                                        status=\"informative\"\r\n                                    ></fd-object-number>\r\n                                    <ng-container *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\">\r\n                                        <fd-busy-indicator [loading]=\"true\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </fd-token>\r\n                    </fd-popover-control>\r\n                    <fd-popover-body>\r\n                        <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                            <ul\r\n                                fd-list\r\n                                *ngIf=\"\r\n                                    valueExtra[file.Id].UploadState !== 'Error' ||\r\n                                    valueExtra[file.Id].UploadState === 'Complete'\r\n                                \"\r\n                            >\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link (click)=\"onDownloadFile(file)\">\r\n                                        <i fd-list-icon glyph=\"download\"></i>\r\n                                        <span fd-list-title>\r\n                                            {{ 'Download' | bbbTranslate }}\r\n                                        </span>\r\n                                        <fd-busy-indicator [loading]=\"fileDownloading\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </ng-container>\r\n                    </fd-popover-body>\r\n                </fd-popover>\r\n            </ng-container>\r\n            <div style=\"display: flex\">\r\n                <div style=\"position: relative; width: 3rem\" *ngIf=\"loading\">\r\n                    <bsu-mask [size]=\"'s'\" style=\"background: transparent\"></bsu-mask>\r\n                </div>\r\n                <fd-file-uploader\r\n                    *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\"\r\n                    class=\"file-linear-upload\"\r\n                    fd-toolbar-item\r\n                    [id]=\"id\"\r\n                    [name]=\"'linear_' + id\"\r\n                    [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [accept]=\"validExtension\"\r\n                    [multiple]=\"maxFileCount > 1 || Setting.IsMultiSelect\"\r\n                    (selectedFilesChanged)=\"onFileSelection($event)\"\r\n                    [contentDensity]=\"(contentDensity$ | async)!!\"\r\n                ></fd-file-uploader>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}:host.isMobile ::ng-deep fd-token>span{-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;height:auto;text-align:right}:host.isMobile ::ng-deep body[dir=ltr] fd-token>span{text-align:left}.token-container{background:transparent;padding:3px;display:flex}.token-wrapper{align-items:center;flex-grow:1;display:flex;flex-wrap:wrap}.token-wrapper fd-token,.token-wrapper .file-linear-upload{padding:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i6$4.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i5$4.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i9$2.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.CanUploadFilePipe, name: "canUploadFile" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: UploadFileStatusPipe, name: "uploadFileStatus" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiFileLinearListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiFileLinearListBoxComponent, selector: "bsu-ui-file-linear-list-box", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "fileUploadComponent", first: true, predicate: FileUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"value\">\r\n    <div class=\"token-container\">\r\n        <div class=\"token-wrapper\">\r\n            <ng-container *ngFor=\"let file of value; trackBy: trackById\">\r\n                <fd-popover *ngIf=\"!file.IsDeleted\">\r\n                    <fd-popover-control>\r\n                        <fd-token (onCloseClick)=\"onFileDeleted(file.Id)\" [readOnly]=\"(disableOrReadonly$ | async)!!\"\r\n                            >{{ file.FileName }}\r\n                            <ng-container *ngIf=\"file.IsNew\">\r\n                                <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                                    <span\r\n                                        *ngIf=\"valueExtra[file.Id].UploadState !== 'Complete'\"\r\n                                        fd-object-status\r\n                                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\r\n                                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\r\n                                        [title]=\"valueExtra[file.Id]?.UploadState\"\r\n                                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\r\n                                    ></span>\r\n                                    <fd-object-number\r\n                                        *ngIf=\"valueExtra[file.Id].Progress\"\r\n                                        [number]=\"valueExtra[file.Id].Progress || 0\"\r\n                                        unit=\"%\"\r\n                                        status=\"informative\"\r\n                                    ></fd-object-number>\r\n                                    <ng-container *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\">\r\n                                        <fd-busy-indicator [loading]=\"true\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </fd-token>\r\n                    </fd-popover-control>\r\n                    <fd-popover-body>\r\n                        <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                            <ul\r\n                                fd-list\r\n                                *ngIf=\"\r\n                                    valueExtra[file.Id].UploadState !== 'Error' ||\r\n                                    valueExtra[file.Id].UploadState === 'Complete'\r\n                                \"\r\n                            >\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link (click)=\"onDownloadFile(file)\">\r\n                                        <i fd-list-icon glyph=\"download\"></i>\r\n                                        <span fd-list-title>\r\n                                            {{ 'Download' | bbbTranslate }}\r\n                                        </span>\r\n                                        <fd-busy-indicator [loading]=\"fileDownloading\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </ng-container>\r\n                    </fd-popover-body>\r\n                </fd-popover>\r\n            </ng-container>\r\n            <div style=\"display: flex\">\r\n                <div style=\"position: relative; width: 3rem\" *ngIf=\"loading\">\r\n                    <bsu-mask [size]=\"'s'\" style=\"background: transparent\"></bsu-mask>\r\n                </div>\r\n                <fd-file-uploader\r\n                    *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\"\r\n                    class=\"file-linear-upload\"\r\n                    fd-toolbar-item\r\n                    [id]=\"id\"\r\n                    [name]=\"'linear_' + id\"\r\n                    [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [accept]=\"validExtension\"\r\n                    [multiple]=\"maxFileCount > 1 || Setting.IsMultiSelect\"\r\n                    (selectedFilesChanged)=\"onFileSelection($event)\"\r\n                    [contentDensity]=\"(contentDensity$ | async)!!\"\r\n                ></fd-file-uploader>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}:host.isMobile ::ng-deep fd-token>span{-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;height:auto;text-align:right}:host.isMobile ::ng-deep body[dir=ltr] fd-token>span{text-align:left}.token-container{background:transparent;padding:3px;display:flex}.token-wrapper{align-items:center;flex-grow:1;display:flex;flex-wrap:wrap}.token-wrapper fd-token,.token-wrapper .file-linear-upload{padding:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i6$4.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i5$5.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i9$2.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.CanUploadFilePipe, name: "canUploadFile" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: UploadFileStatusPipe, name: "uploadFileStatus" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiFileLinearListBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-file-linear-list-box', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"value\">\r\n    <div class=\"token-container\">\r\n        <div class=\"token-wrapper\">\r\n            <ng-container *ngFor=\"let file of value; trackBy: trackById\">\r\n                <fd-popover *ngIf=\"!file.IsDeleted\">\r\n                    <fd-popover-control>\r\n                        <fd-token (onCloseClick)=\"onFileDeleted(file.Id)\" [readOnly]=\"(disableOrReadonly$ | async)!!\"\r\n                            >{{ file.FileName }}\r\n                            <ng-container *ngIf=\"file.IsNew\">\r\n                                <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                                    <span\r\n                                        *ngIf=\"valueExtra[file.Id].UploadState !== 'Complete'\"\r\n                                        fd-object-status\r\n                                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\r\n                                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\r\n                                        [title]=\"valueExtra[file.Id]?.UploadState\"\r\n                                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\r\n                                    ></span>\r\n                                    <fd-object-number\r\n                                        *ngIf=\"valueExtra[file.Id].Progress\"\r\n                                        [number]=\"valueExtra[file.Id].Progress || 0\"\r\n                                        unit=\"%\"\r\n                                        status=\"informative\"\r\n                                    ></fd-object-number>\r\n                                    <ng-container *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\">\r\n                                        <fd-busy-indicator [loading]=\"true\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </fd-token>\r\n                    </fd-popover-control>\r\n                    <fd-popover-body>\r\n                        <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                            <ul\r\n                                fd-list\r\n                                *ngIf=\"\r\n                                    valueExtra[file.Id].UploadState !== 'Error' ||\r\n                                    valueExtra[file.Id].UploadState === 'Complete'\r\n                                \"\r\n                            >\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link (click)=\"onDownloadFile(file)\">\r\n                                        <i fd-list-icon glyph=\"download\"></i>\r\n                                        <span fd-list-title>\r\n                                            {{ 'Download' | bbbTranslate }}\r\n                                        </span>\r\n                                        <fd-busy-indicator [loading]=\"fileDownloading\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </ng-container>\r\n                    </fd-popover-body>\r\n                </fd-popover>\r\n            </ng-container>\r\n            <div style=\"display: flex\">\r\n                <div style=\"position: relative; width: 3rem\" *ngIf=\"loading\">\r\n                    <bsu-mask [size]=\"'s'\" style=\"background: transparent\"></bsu-mask>\r\n                </div>\r\n                <fd-file-uploader\r\n                    *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\"\r\n                    class=\"file-linear-upload\"\r\n                    fd-toolbar-item\r\n                    [id]=\"id\"\r\n                    [name]=\"'linear_' + id\"\r\n                    [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [accept]=\"validExtension\"\r\n                    [multiple]=\"maxFileCount > 1 || Setting.IsMultiSelect\"\r\n                    (selectedFilesChanged)=\"onFileSelection($event)\"\r\n                    [contentDensity]=\"(contentDensity$ | async)!!\"\r\n                ></fd-file-uploader>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}:host.isMobile ::ng-deep fd-token>span{-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;height:auto;text-align:right}:host.isMobile ::ng-deep body[dir=ltr] fd-token>span{text-align:left}.token-container{background:transparent;padding:3px;display:flex}.token-wrapper{align-items:center;flex-grow:1;display:flex;flex-wrap:wrap}.token-wrapper fd-token,.token-wrapper .file-linear-upload{padding:4px}\n"] }]
@@ -7534,10 +7572,10 @@ class LyLayoutContainerComponent extends LayoutPanelBaseComponent {
     }
 }
 LyLayoutContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LyLayoutContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LyLayoutContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LyLayoutContainerComponent, selector: "bsu-ly-layout-container", inputs: { renderItems: "renderItems", isRoot: "isRoot", SetVisible: "SetVisible", SetEnable: "SetEnable", SetReadonly: "SetReadonly" }, host: { properties: { "attr.maxLabelWidth": "this.maxLabelWidth", "style.display": "this.display", "style.flex": "this.flex" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<canvas #canvas style=\"display: none\"></canvas>\r\n<ng-container *ngFor=\"let item of config | filterToolbarControl\">\r\n    <ng-container [ngSwitch]=\"item.xtype\">\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutTabPanel'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutPanel'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutContainer'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: {\r\n                        $implicit: item,\r\n                        name: 'LyLayoutContainerComponent',\r\n                        selector: 'bsu-ly-layout-container'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.EmptySpace'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.SimpleLabel'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutLine'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\r\n            <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            selector: 'bsu-ly-horizontal-layout',\r\n                            name: 'LyLayoutHorizontalComponent'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n            </ng-container>\r\n            <ng-template #verticalJoin>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            selector: 'bsu-ly-vertical-layout',\r\n                            name: 'LyLayoutVerticalComponent'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutControl'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: {\r\n                        $implicit: item,\r\n                        selector: 'bsu-layout-control',\r\n                        name: 'LayoutControlComponent'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-container>\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\r\n    <bnrc-dynamic-layout\r\n        [config]=\"config\"\r\n        [selector]=\"selector\"\r\n        [name]=\"name\"\r\n        [module]=\"'BarsaSapUi'\"\r\n        [moduleFileName]=\"'BarsaSapUi'\"\r\n        [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n        [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n        [isSearchPanel]=\"isSearchPanel\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n", 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}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LyLayoutContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LyLayoutContainerComponent, selector: "bsu-ly-layout-container", inputs: { renderItems: "renderItems", isRoot: "isRoot", SetVisible: "SetVisible", SetEnable: "SetEnable", SetReadonly: "SetReadonly" }, host: { properties: { "attr.maxLabelWidth": "this.maxLabelWidth", "style.display": "this.display", "style.flex": "this.flex" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of config | filterToolbarControl\">\n    <ng-container [ngSwitch]=\"item.xtype\">\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n            <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\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            </ng-container>\n            <ng-template #verticalJoin>\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            </ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n    </ng-container>\n</ng-container>\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$ | async)!!\"\n        [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n        [isSearchPanel]=\"isSearchPanel\"\n    >\n    </bnrc-dynamic-layout>\n</ng-template>\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}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LyLayoutContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-layout-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "<canvas #canvas style=\"display: none\"></canvas>\r\n<ng-container *ngFor=\"let item of config | filterToolbarControl\">\r\n    <ng-container [ngSwitch]=\"item.xtype\">\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutTabPanel'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutPanel'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutContainer'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: {\r\n                        $implicit: item,\r\n                        name: 'LyLayoutContainerComponent',\r\n                        selector: 'bsu-ly-layout-container'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.EmptySpace'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.SimpleLabel'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutLine'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\r\n            <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            selector: 'bsu-ly-horizontal-layout',\r\n                            name: 'LyLayoutHorizontalComponent'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n            </ng-container>\r\n            <ng-template #verticalJoin>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            selector: 'bsu-ly-vertical-layout',\r\n                            name: 'LyLayoutVerticalComponent'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'Ly.LayoutControl'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dynamicLayout;\r\n                    context: {\r\n                        $implicit: item,\r\n                        selector: 'bsu-layout-control',\r\n                        name: 'LayoutControlComponent'\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-container>\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\r\n    <bnrc-dynamic-layout\r\n        [config]=\"config\"\r\n        [selector]=\"selector\"\r\n        [name]=\"name\"\r\n        [module]=\"'BarsaSapUi'\"\r\n        [moduleFileName]=\"'BarsaSapUi'\"\r\n        [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n        [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n        [isSearchPanel]=\"isSearchPanel\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n", 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}}\n"] }]
+            args: [{ selector: 'bsu-ly-layout-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "<ng-container *ngFor=\"let item of config | filterToolbarControl\">\n    <ng-container [ngSwitch]=\"item.xtype\">\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n            <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\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            </ng-container>\n            <ng-template #verticalJoin>\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            </ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n    </ng-container>\n</ng-container>\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$ | async)!!\"\n        [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n        [isSearchPanel]=\"isSearchPanel\"\n    >\n    </bnrc-dynamic-layout>\n</ng-template>\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}}\n"] }]
         }], propDecorators: { renderItems: [{
                 type: Input
             }], isRoot: [{
@@ -7633,10 +7671,10 @@ class LyTabPageComponent extends LayoutPanelBaseComponent {
     }
 }
 LyTabPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LyTabPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LyTabPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: { renderItems: "renderItems", tablist: "tablist" }, host: { properties: { "style.flex": "this.flex", "attr.title": "this.title" } }, providers: [LayoutService], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["placeholder"], descendants: true, read: ViewContainerRef }, { propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<canvas #canvas style=\"display: none\"></canvas>\r\n\r\n<ng-container *untilInView=\"el\">\r\n    <ng-container *ngFor=\"let item of config | filterToolbarControl\">\r\n        <ng-container [ngSwitch]=\"item.xtype\">\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutTabPanel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutPanel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutContainer'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            name: 'LyLayoutContainerComponent',\r\n                            selector: 'bsu-ly-layout-container'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.EmptySpace'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.SimpleLabel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutLine'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\r\n                <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                selector: 'bsu-ly-horizontal-layout',\r\n                                name: 'LyLayoutHorizontalComponent'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n                </ng-container>\r\n                <ng-template #verticalJoin>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                selector: 'bsu-ly-vertical-layout',\r\n                                name: 'LyLayoutVerticalComponent'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutControl'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            selector: 'bsu-layout-control',\r\n                            name: 'LayoutControlComponent'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LyTabPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: { renderItems: "renderItems", tablist: "tablist" }, host: { properties: { "style.flex": "this.flex", "attr.title": "this.title" } }, providers: [LayoutService], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["placeholder"], descendants: true, read: ViewContainerRef }, { propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\n    <ng-container *ngFor=\"let item of config | filterToolbarControl\">\n        <ng-container [ngSwitch]=\"item.xtype\">\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n                <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\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                </ng-container>\n                <ng-template #verticalJoin>\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                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n        </ng-container>\n    </ng-container>\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$ | async)!!\"\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n            [isSearchPanel]=\"isSearchPanel\"\n        >\n        </bnrc-dynamic-layout>\n    </ng-template>\n</ng-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LyTabPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-tab-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "<canvas #canvas style=\"display: none\"></canvas>\r\n\r\n<ng-container *untilInView=\"el\">\r\n    <ng-container *ngFor=\"let item of config | filterToolbarControl\">\r\n        <ng-container [ngSwitch]=\"item.xtype\">\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutTabPanel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutPanel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutContainer'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            name: 'LyLayoutContainerComponent',\r\n                            selector: 'bsu-ly-layout-container'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.EmptySpace'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.SimpleLabel'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutLine'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\r\n                <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                selector: 'bsu-ly-horizontal-layout',\r\n                                name: 'LyLayoutHorizontalComponent'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n                </ng-container>\r\n                <ng-template #verticalJoin>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                selector: 'bsu-ly-vertical-layout',\r\n                                name: 'LyLayoutVerticalComponent'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Ly.LayoutControl'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dynamicLayout;\r\n                        context: {\r\n                            $implicit: item,\r\n                            selector: 'bsu-layout-control',\r\n                            name: 'LayoutControlComponent'\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'bsu-ly-tab-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "<ng-container *untilInView=\"el\">\n    <ng-container *ngFor=\"let item of config | filterToolbarControl\">\n        <ng-container [ngSwitch]=\"item.xtype\">\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n            <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n                <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\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                </ng-container>\n                <ng-template #verticalJoin>\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                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'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            </ng-container>\n        </ng-container>\n    </ng-container>\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$ | async)!!\"\n            [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n            [isSearchPanel]=\"isSearchPanel\"\n        >\n        </bnrc-dynamic-layout>\n    </ng-template>\n</ng-container>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { vcr: [{
                 type: ViewChild,
                 args: ['placeholder', { read: ViewContainerRef }]
@@ -7713,7 +7751,7 @@ class FundamentalDynamicFormComponent extends BaseComponent {
     onDynamicComponentEvents(e) { }
 }
 FundamentalDynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FundamentalDynamicFormComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-FundamentalDynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FundamentalDynamicFormComponent, selector: "bsu-fundamental-dynamic-form", inputs: { breadCrumbs: "breadCrumbs", toolbarVisible: "toolbarVisible", toolbarItems: "toolbarItems", layoutActions: "layoutActions", layout94: "layout94", parameters: "parameters", workflowPanelUi: "workflowPanelUi", context: "context", title: "title", subtitle: "subtitle", description: "description", facetList: "facetList", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", rtl: "rtl", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", formVisibilityStatus: "formVisibilityStatus" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true, static: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "closeFormTemplate", first: true, predicate: ["closeForm"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"mask\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\n    <bsu-mask size=\"m\"></bsu-mask>\n</div>\n\n<fd-dynamic-page\n    [size]=\"isMobile ? 'small' : 'large'\"\n    [class.header-border]=\"!removeHeaderBorder\"\n    [attr.isMobile]=\"isMobile\"\n    [attr.contentIsPage]=\"contentIsPage\"\n    mobile\n    formClose\n    [isMobile]=\"isMobile\"\n>\n    <fd-dynamic-page-header\n        [class.simple-title]=\"!description\"\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\n        [subtitle]=\"subtitle | bbbTranslate\"\n        [class.p-b0]=\"removeContentPadding\"\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\n        #titleRef\n    >\n        <fd-breadcrumb *ngIf=\"!isMobile\">\n            <ng-container *ngIf=\"breadCrumbs && !isMobile\">\n                <ng-container\n                    *ngFor=\"let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; let i = index; let last = last\"\n                >\n                    <fd-breadcrumb-item>\n                        <bsu-breadcrumb\n                            [index]=\"i\"\n                            [isLast]=\"last\"\n                            [breadCrumb]=\"breadCrumb\"\n                            [allBreadCrumb]=\"breadCrumbs\"\n                        ></bsu-breadcrumb>\n                    </fd-breadcrumb-item>\n                </ng-container>\n            </ng-container>\n        </fd-breadcrumb>\n        <fd-dynamic-page-global-actions>\n            <!-- global actions -->\n\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n            <!-- added this because in mobile landscape toolbar disapper -->\n            <fd-toolbar\n                *ngIf=\"toolbarVisible\"\n                #formToolbar\n                fdType=\"transparent\"\n                [clearBorder]=\"true\"\n                [shouldOverflow]=\"deviceSize === 's'\"\n                [class.firefox]=\"isFirefox\"\n            >\n                <ng-container *ngFor=\"let btn of toolbarItems; let i = index; let last = last; let first = first\">\n                    <fd-toolbar-separator\n                        [attr.i]=\"i\"\n                        [attr.last]=\"last\"\n                        [attr.first]=\"first\"\n                        *ngIf=\"(btn === '-' || btn.text === '-') && !last && !first\"\n                    ></fd-toolbar-separator>\n                    <ng-container *ngIf=\"btn.IAmMenu; else simpleButton\">\n                        <fd-split-button\n                            [dir]=\"dirValue\"\n                            fd-toolbar-item\n                            [attr.fdOverflowPriority]=\"'low'\"\n                            [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\n                            [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\n                            (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\n                            (click)=\"menu.open()\"\n                        >\n                            <fd-menu #menu>\n                                <li\n                                    fd-menu-item\n                                    *ngFor=\"let menuItem of btn.menu.items\"\n                                    [disabled]=\"menuItem.disabled\"\n                                    (click)=\"onToolbarClick(menuItem, menu)\"\n                                >\n                                    <div fd-menu-interactive>\n                                        <fd-menu-addon\n                                            position=\"before\"\n                                            [glyph]=\"\n                                                menuItem.newIcon ? menuItem.newIcon : menuItem.Data?.JsonExtraProp?.Icon\n                                            \"\n                                        >\n                                        </fd-menu-addon>\n                                        <img\n                                            class=\"mr8\"\n                                            *ngIf=\"!menuItem.newIcon && menuItem.icon\"\n                                            [src]=\"menuItem.icon\"\n                                        />\n                                        <span fd-menu-title>{{ menuItem.text }}</span>\n                                    </div>\n                                </li>\n                            </fd-menu>\n                        </fd-split-button>\n                    </ng-container>\n                    <ng-template #simpleButton>\n                        <ng-container *ngIf=\"!(btn === '-' || btn.text === '-')\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate;\n                                    context: { $implicit: btn }\n                                \"\n                            ></ng-container>\n                            <ng-template #btnTemplate let-btn>\n                                <button\n                                    fd-toolbar-item\n                                    fd-button\n                                    [disabled]=\"btn.disabled\"\n                                    [attr.fdOverflowPriority]=\"btn.priority\"\n                                    [fdType]=\"\n                                        btn.isWorkflow\n                                            ? 'positive'\n                                            : btn.design\n                                            ? btn.design\n                                            : btn.Data?.JsonExtraProp?.Design\n                                    \"\n                                    [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                                    (click)=\"onToolbarClick(btn)\"\n                                >\n                                    <img\n                                        *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                        width=\"16\"\n                                        [src]=\"btn.icon\"\n                                    />\n                                    <span *ngIf=\"btn.text\">{{ btn.text }}</span>\n                                </button>\n                            </ng-template>\n                            <ng-template #dynamicBtnTemplate let-btn>\n                                <bnrc-dynamic-form-toolbaritem\n                                    fd-toolbar-item\n                                    [component]=\"btn.Data.CustomUi\"\n                                    [context]=\"btn\"\n                                    [isEnable]=\"btn.Command?._isEnable\"\n                                    (btnClick)=\"onToolbarClick(btn)\"\n                                ></bnrc-dynamic-form-toolbaritem>\n                            </ng-template>\n                        </ng-container>\n\n                        <!-- <button\n                            *ngIf=\"!(btn === '-' || btn.text === '-')\"\n                            fd-toolbar-item\n                            fd-button\n                            [buttonType]=\"\n                                btn.isWorkflow ? 'positive' : btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\n                            \"\n                            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                            (click)=\"onToolbarClick(btn)\"\n                        >\n                            <img\n                                *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                width=\"16\"\n                                [src]=\"btn.icon\"\n                            />\n                            <span>{{ btn.text }}</span>\n                        </button> -->\n                    </ng-template>\n                </ng-container>\n            </fd-toolbar>\n            <!-- <bsu-ui-form-panel-toolbar\n        [buttons]=\"toolbarItems | tlbButtons: 'inFooter':false\"\n        [size]=\"size\"\n        [deviceSize]=\"deviceSize$ | async\"\n        [visible]=\"toolbarVisible\"\n        (toolClick)=\"onToolbarClick($event)\"\n      ></bsu-ui-form-panel-toolbar> -->\n        </fd-dynamic-page-global-actions>\n        <fd-dynamic-page-layout-actions>\n            <!-- layout actions -->\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\n            <fd-toolbar *ngIf=\"!hideClose\" fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\n            </fd-toolbar>\n        </fd-dynamic-page-layout-actions>\n    </fd-dynamic-page-header>\n    <fd-dynamic-page-subheader\n        *ngIf=\"description || facetList.length > 0 || workflowInfoText || avatar\"\n        [class.header-no-description]=\"!(description || workflowInfoText)\"\n        [class.no-pin]=\"hidePin\"\n        [collapsible]=\"!!workflowInfoText || (facetList && facetList.length > 0)\"\n        [pinnable]=\"true\"\n        [collapsed]=\"(!facetList || facetList.length === 0) && !workflowInfoText\"\n    >\n        <fd-message-strip [type]=\"'warning'\" *ngIf=\"workflowInfoText\" [dismissible]=\"false\">\n            {{ workflowInfoText | bbbTranslate }}\n        </fd-message-strip>\n        <fd-facet-group ariaLabel=\"Facet Group\">\n            <fd-facet *ngIf=\"avatar\" type=\"image\">\n                <fd-avatar\n                    title=\"avatar\"\n                    [glyph]=\"avatar\"\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\n                    [transparent]=\"true\"\n                ></fd-avatar>\n                <!-- <div\n                    class=\"fd-avatar fd-avatar--circle\"\n                    [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\n                >\n                    <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\n                </div> -->\n            </fd-facet>\n            <fd-facet\n                *ngFor=\"let facet of facetList\"\n                [type]=\"facet.type\"\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\n            >\n                <fd-facet-content *ngFor=\"let item of facet.mo.ItemList?.MoDataList\">\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\n                    <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\n                </fd-facet-content>\n                <span\n                    *ngIf=\"\n                        !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector;\n                        else dynamicComponentTpl\n                    \"\n                    fd-object-status\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [title]=\"facet.mo.Text | facetValue\"\n                    [aria-label]=\"facet.mo.Text | facetValue\"\n                    [glyph]=\"facet.mo.Icon\"\n                >\n                </span>\n                <ng-template #dynamicComponentTpl>\n                    <bnrc-dynamic-component\n                        [class]=\"'fd-object-status--' + facet.mo.Status | facetValue\"\n                        [class.fd-object-status--large]=\"facet.mo.IsLarge\"\n                        [component]=\"facet.mo.Component\"\n                        [value]=\"facet.mo.Text\"\n                    ></bnrc-dynamic-component>\n                </ng-template>\n                <fd-object-number\n                    *ngIf=\"facet.mo.IsNumber && facet.type === 'key-value'\"\n                    [number]=\"facet.mo.Text | facetValue\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [unit]=\"facet.mo.Unit | facetValue\"\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [decimal]=\"facet.mo.Decimal | facetValue\"\n                ></fd-object-number>\n\n                <div *ngIf=\"facet.type === 'plain-text'\" [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\n                    <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\n                </div>\n\n                <fd-facet-content *ngIf=\"facet.type === 'rating-indicator'\">\n                    <fd-rating-indicator\n                        style=\"pointer-events: none\"\n                        size=\"md\"\n                        [dynamicTextIndicator]=\"facet.mo.Footer\"\n                        [displayMode]=\"true\"\n                        [value]=\"facet.mo | facetValue: facet.type\"\n                    ></fd-rating-indicator>\n                </fd-facet-content>\n                <div *ngIf=\"facet.type === 'progress'\" [style.width]=\"'10rem'\">\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\n                    <fd-progress-indicator\n                        style=\"width: 10r em\"\n                        [state]=\"facet.mo.State\"\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\n                        [valueMax]=\"10\"\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\n                    ></fd-progress-indicator>\n                    <!-- <ui5-progress-indicator\n                        style=\"width: 10rem\"\n                        [valueState]=\"facet.mo.State\"\n                        [value]=\"getNumber(facet.mo.Value)\"\n                    ></ui5-progress-indicator> -->\n                </div>\n                <div *ngIf=\"facet.type === 'microcharts'\">\n                    <label wrap>in progress ...</label>\n                </div>\n            </fd-facet>\n        </fd-facet-group>\n        <span *ngIf=\"description\">{{ description }}</span>\n    </fd-dynamic-page-subheader>\n\n    <fd-tab-list\n        (selectedTabChange)=\"onTabChanged($event)\"\n        *ngIf=\"!contentIsPage && modernTabs && modernTabs.length > 0 && !parameters?.LayoutComponent; else renderLayout\"\n        [collapseOverflow]=\"true\"\n        [stackContent]=\"false\"\n        maxContentHeight=\"auto\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        #tablist\n    >\n        <fd-tab *ngFor=\"let tab of modernTabs; let i = index\" [title]=\"tab.Title!! | bbbTranslate\">\n            <fd-dynamic-page-content [id]=\"tab.id\">\n                <bsu-ly-tab-page [config]=\"tab\" [tablist]=\"tablist\"></bsu-ly-tab-page>\n            </fd-dynamic-page-content>\n        </fd-tab>\n    </fd-tab-list>\n    <ng-template #renderLayout>\n        <fd-dynamic-page-content [class.no-padding]=\"removeContentPadding\" *ngIf=\"!contentIsPage\">\n            <!-- <bsu-ly-layout-container-of-root\n            [config]=\"layout94\"\n            [isPanel]=\"false\"\n            [isRoot]=\"true\"\n        ></bsu-ly-layout-container-of-root> -->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\n                    context: {\n                        $implicit: parameters?.LayoutComponent,\n                        layout94: layout94\n                    }\n                \"\n            ></ng-container>\n        </fd-dynamic-page-content>\n    </ng-template>\n    <fd-dynamic-page-footer>\n        <bsu-layout-actions\n            [canSend]=\"canSend\"\n            [buttons]=\"layoutActions\"\n            [isMobile]=\"isMobile\"\n            [landscape]=\"landscape\"\n            [standalone]=\"standalone\"\n            [workflowButtons]=\"workflowButtons\"\n            [workflowButtonsComboMode]=\"workflowButtonsComboMode\"\n            [deviceSize]=\"deviceSize\"\n            [rtl]=\"rtl\"\n            (toolClick)=\"onToolbarClick($event)\"\n            (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\n        >\n        </bsu-layout-actions>\n    </fd-dynamic-page-footer>\n</fd-dynamic-page>\n<ng-container *ngIf=\"contentIsPage\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            renderLayoutComponent;\n            context: {\n                $implicit: parameters?.LayoutComponent,\n                layout94: layout94\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\n    <bsu-ly-layout-container-of-root\n        [config]=\"layout94\"\n        [isPanel]=\"false\"\n        [isRoot]=\"true\"\n    ></bsu-ly-layout-container-of-root>\n</ng-template>\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\n    <bnrc-dynamic-form-component\n        [component]=\"component\"\n        [removeContentPadding]=\"removeContentPadding\"\n        [breadCrumbs]=\"breadCrumbs\"\n        [description]=\"description\"\n        [title]=\"title\"\n        [subtitle]=\"subtitle\"\n        [toolbarItems]=\"toolbarItems\"\n        [layoutActions]=\"layoutActions\"\n        [facetList]=\"facetList\"\n        [settings]=\"component.Settings\"\n        [workflowPanelUi]=\"workflowPanelUi\"\n        [isMobile]=\"isMobile\"\n        [mo]=\"mo\"\n        [layout94]=\"layout94\"\n        [context]=\"context\"\n        [rtl]=\"rtl\"\n        [fieldDict]=\"fieldDict\"\n        [mask]=\"mask\"\n        [dirValue]=\"dirValue\"\n        [deviceSize]=\"deviceSize\"\n        [contentDensity]=\"contentDensity\"\n        [modernTabs]=\"modernTabs\"\n        [avatar]=\"avatar\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-form-component>\n</ng-template>\n<ng-template #closeForm>\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n    </button>\n</ng-template>\n", styles: [":host{display:block;height:auto;width:100%}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .fd-progress-indicator__container,:host ::ng-deep .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "layout94", "settings", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "value"], outputs: ["events"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i5$2.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$2.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$6.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i7$6.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i7$6.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i7$6.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i7$6.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i7$6.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i7$6.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i7$9.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "id", "alignEnd"] }, { kind: "component", type: i7$9.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i7$9.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i9.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i5$4.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i13$1.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["class", "name", "ariaLabel", "ariaLabelledBy", "disabled", "displayMode", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator"], outputs: ["ratingChanged"] }, { kind: "component", type: i4$3.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "disabled", "mainActionTitle", "fdType", "expandButtonAriaLabel", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i15.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i15.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "component", type: i18.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.HeaderFacetValuePipe, name: "facetValue" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FundamentalDynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FundamentalDynamicFormComponent, selector: "bsu-fundamental-dynamic-form", inputs: { breadCrumbs: "breadCrumbs", toolbarVisible: "toolbarVisible", toolbarItems: "toolbarItems", layoutActions: "layoutActions", layout94: "layout94", parameters: "parameters", workflowPanelUi: "workflowPanelUi", context: "context", title: "title", subtitle: "subtitle", description: "description", facetList: "facetList", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", rtl: "rtl", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", formVisibilityStatus: "formVisibilityStatus" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true, static: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "closeFormTemplate", first: true, predicate: ["closeForm"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"mask\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\n    <bsu-mask size=\"m\"></bsu-mask>\n</div>\n\n<fd-dynamic-page\n    [size]=\"isMobile ? 'small' : 'large'\"\n    [class.header-border]=\"!removeHeaderBorder\"\n    [attr.isMobile]=\"isMobile\"\n    [attr.contentIsPage]=\"contentIsPage\"\n    mobile\n    formClose\n    [isMobile]=\"isMobile\"\n>\n    <fd-dynamic-page-header\n        [class.simple-title]=\"!description\"\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\n        [subtitle]=\"subtitle | bbbTranslate\"\n        [class.p-b0]=\"removeContentPadding\"\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\n        #titleRef\n    >\n        <fd-breadcrumb *ngIf=\"!isMobile\">\n            <ng-container *ngIf=\"breadCrumbs && !isMobile\">\n                <ng-container\n                    *ngFor=\"let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; let i = index; let last = last\"\n                >\n                    <fd-breadcrumb-item>\n                        <bsu-breadcrumb\n                            [index]=\"i\"\n                            [isLast]=\"last\"\n                            [breadCrumb]=\"breadCrumb\"\n                            [allBreadCrumb]=\"breadCrumbs\"\n                        ></bsu-breadcrumb>\n                    </fd-breadcrumb-item>\n                </ng-container>\n            </ng-container>\n        </fd-breadcrumb>\n        <fd-dynamic-page-global-actions>\n            <!-- global actions -->\n\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n            <!-- added this because in mobile landscape toolbar disapper -->\n            <fd-toolbar\n                *ngIf=\"toolbarVisible\"\n                #formToolbar\n                fdType=\"transparent\"\n                [clearBorder]=\"true\"\n                [shouldOverflow]=\"deviceSize === 's'\"\n                [class.firefox]=\"isFirefox\"\n            >\n                <ng-container *ngFor=\"let btn of toolbarItems; let i = index; let last = last; let first = first\">\n                    <fd-toolbar-separator\n                        [attr.i]=\"i\"\n                        [attr.last]=\"last\"\n                        [attr.first]=\"first\"\n                        *ngIf=\"(btn === '-' || btn.text === '-') && !last && !first\"\n                    ></fd-toolbar-separator>\n                    <ng-container *ngIf=\"btn.IAmMenu; else simpleButton\">\n                        <fd-split-button\n                            [dir]=\"dirValue\"\n                            fd-toolbar-item\n                            [attr.fdOverflowPriority]=\"'low'\"\n                            [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\n                            [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\n                            (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\n                            (click)=\"menu.open()\"\n                        >\n                            <fd-menu #menu>\n                                <li\n                                    fd-menu-item\n                                    *ngFor=\"let menuItem of btn.menu.items\"\n                                    [disabled]=\"menuItem.disabled\"\n                                    (click)=\"onToolbarClick(menuItem, menu)\"\n                                >\n                                    <div fd-menu-interactive>\n                                        <fd-menu-addon\n                                            position=\"before\"\n                                            [glyph]=\"\n                                                menuItem.newIcon ? menuItem.newIcon : menuItem.Data?.JsonExtraProp?.Icon\n                                            \"\n                                        >\n                                        </fd-menu-addon>\n                                        <img\n                                            class=\"mr8\"\n                                            *ngIf=\"!menuItem.newIcon && menuItem.icon\"\n                                            [src]=\"menuItem.icon\"\n                                        />\n                                        <span fd-menu-title>{{ menuItem.text }}</span>\n                                    </div>\n                                </li>\n                            </fd-menu>\n                        </fd-split-button>\n                    </ng-container>\n                    <ng-template #simpleButton>\n                        <ng-container *ngIf=\"!(btn === '-' || btn.text === '-')\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate;\n                                    context: { $implicit: btn }\n                                \"\n                            ></ng-container>\n                            <ng-template #btnTemplate let-btn>\n                                <button\n                                    fd-toolbar-item\n                                    fd-button\n                                    [disabled]=\"btn.disabled\"\n                                    [attr.fdOverflowPriority]=\"btn.priority\"\n                                    [fdType]=\"\n                                        btn.isWorkflow\n                                            ? 'positive'\n                                            : btn.design\n                                            ? btn.design\n                                            : btn.Data?.JsonExtraProp?.Design\n                                    \"\n                                    [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                                    (click)=\"onToolbarClick(btn)\"\n                                >\n                                    <img\n                                        *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                        width=\"16\"\n                                        [src]=\"btn.icon\"\n                                    />\n                                    <span *ngIf=\"btn.text\">{{ btn.text }}</span>\n                                </button>\n                            </ng-template>\n                            <ng-template #dynamicBtnTemplate let-btn>\n                                <bnrc-dynamic-form-toolbaritem\n                                    fd-toolbar-item\n                                    [component]=\"btn.Data.CustomUi\"\n                                    [context]=\"btn\"\n                                    [isEnable]=\"btn.Command?._isEnable\"\n                                    (btnClick)=\"onToolbarClick(btn)\"\n                                ></bnrc-dynamic-form-toolbaritem>\n                            </ng-template>\n                        </ng-container>\n\n                        <!-- <button\n                            *ngIf=\"!(btn === '-' || btn.text === '-')\"\n                            fd-toolbar-item\n                            fd-button\n                            [buttonType]=\"\n                                btn.isWorkflow ? 'positive' : btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\n                            \"\n                            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                            (click)=\"onToolbarClick(btn)\"\n                        >\n                            <img\n                                *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                width=\"16\"\n                                [src]=\"btn.icon\"\n                            />\n                            <span>{{ btn.text }}</span>\n                        </button> -->\n                    </ng-template>\n                </ng-container>\n            </fd-toolbar>\n            <!-- <bsu-ui-form-panel-toolbar\n        [buttons]=\"toolbarItems | tlbButtons: 'inFooter':false\"\n        [size]=\"size\"\n        [deviceSize]=\"deviceSize$ | async\"\n        [visible]=\"toolbarVisible\"\n        (toolClick)=\"onToolbarClick($event)\"\n      ></bsu-ui-form-panel-toolbar> -->\n        </fd-dynamic-page-global-actions>\n        <fd-dynamic-page-layout-actions>\n            <!-- layout actions -->\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\n            <fd-toolbar *ngIf=\"!hideClose\" fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\n            </fd-toolbar>\n        </fd-dynamic-page-layout-actions>\n    </fd-dynamic-page-header>\n    <fd-dynamic-page-subheader\n        *ngIf=\"description || facetList.length > 0 || workflowInfoText || avatar\"\n        [class.header-no-description]=\"!(description || workflowInfoText)\"\n        [class.no-pin]=\"hidePin\"\n        [collapsible]=\"!!workflowInfoText || (facetList && facetList.length > 0)\"\n        [pinnable]=\"true\"\n        [collapsed]=\"(!facetList || facetList.length === 0) && !workflowInfoText\"\n    >\n        <fd-message-strip [type]=\"'warning'\" *ngIf=\"workflowInfoText\" [dismissible]=\"false\">\n            {{ workflowInfoText | bbbTranslate }}\n        </fd-message-strip>\n        <fd-facet-group ariaLabel=\"Facet Group\">\n            <fd-facet *ngIf=\"avatar\" type=\"image\">\n                <fd-avatar\n                    title=\"avatar\"\n                    [glyph]=\"avatar\"\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\n                    [transparent]=\"true\"\n                ></fd-avatar>\n                <!-- <div\n                    class=\"fd-avatar fd-avatar--circle\"\n                    [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\n                >\n                    <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\n                </div> -->\n            </fd-facet>\n            <fd-facet\n                *ngFor=\"let facet of facetList\"\n                [type]=\"facet.type\"\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\n            >\n                <fd-facet-content *ngFor=\"let item of facet.mo.ItemList?.MoDataList\">\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\n                    <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\n                </fd-facet-content>\n                <span\n                    *ngIf=\"\n                        !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector;\n                        else dynamicComponentTpl\n                    \"\n                    fd-object-status\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [title]=\"facet.mo.Text | facetValue\"\n                    [aria-label]=\"facet.mo.Text | facetValue\"\n                    [glyph]=\"facet.mo.Icon\"\n                >\n                </span>\n                <ng-template #dynamicComponentTpl>\n                    <bnrc-dynamic-component\n                        [class]=\"'fd-object-status--' + facet.mo.Status | facetValue\"\n                        [class.fd-object-status--large]=\"facet.mo.IsLarge\"\n                        [component]=\"facet.mo.Component\"\n                        [value]=\"facet.mo.Text\"\n                    ></bnrc-dynamic-component>\n                </ng-template>\n                <fd-object-number\n                    *ngIf=\"facet.mo.IsNumber && facet.type === 'key-value'\"\n                    [number]=\"facet.mo.Text | facetValue\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [unit]=\"facet.mo.Unit | facetValue\"\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [decimal]=\"facet.mo.Decimal | facetValue\"\n                ></fd-object-number>\n\n                <div *ngIf=\"facet.type === 'plain-text'\" [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\n                    <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\n                </div>\n\n                <fd-facet-content *ngIf=\"facet.type === 'rating-indicator'\">\n                    <fd-rating-indicator\n                        style=\"pointer-events: none\"\n                        size=\"md\"\n                        [dynamicTextIndicator]=\"facet.mo.Footer\"\n                        [displayMode]=\"true\"\n                        [value]=\"facet.mo | facetValue: facet.type\"\n                    ></fd-rating-indicator>\n                </fd-facet-content>\n                <div *ngIf=\"facet.type === 'progress'\" [style.width]=\"'10rem'\">\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\n                    <fd-progress-indicator\n                        style=\"width: 10r em\"\n                        [state]=\"facet.mo.State\"\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\n                        [valueMax]=\"10\"\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\n                    ></fd-progress-indicator>\n                    <!-- <ui5-progress-indicator\n                        style=\"width: 10rem\"\n                        [valueState]=\"facet.mo.State\"\n                        [value]=\"getNumber(facet.mo.Value)\"\n                    ></ui5-progress-indicator> -->\n                </div>\n                <div *ngIf=\"facet.type === 'microcharts'\">\n                    <label wrap>in progress ...</label>\n                </div>\n            </fd-facet>\n        </fd-facet-group>\n        <span *ngIf=\"description\">{{ description }}</span>\n    </fd-dynamic-page-subheader>\n\n    <fd-tab-list\n        (selectedTabChange)=\"onTabChanged($event)\"\n        *ngIf=\"!contentIsPage && modernTabs && modernTabs.length > 0 && !parameters?.LayoutComponent; else renderLayout\"\n        [collapseOverflow]=\"true\"\n        [stackContent]=\"false\"\n        maxContentHeight=\"auto\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        #tablist\n    >\n        <fd-tab *ngFor=\"let tab of modernTabs; let i = index\" [title]=\"tab.Title!! | bbbTranslate\">\n            <fd-dynamic-page-content [id]=\"tab.id\">\n                <bsu-ly-tab-page [config]=\"tab\" [tablist]=\"tablist\"></bsu-ly-tab-page>\n            </fd-dynamic-page-content>\n        </fd-tab>\n    </fd-tab-list>\n    <ng-template #renderLayout>\n        <fd-dynamic-page-content [class.no-padding]=\"removeContentPadding\" *ngIf=\"!contentIsPage\">\n            <!-- <bsu-ly-layout-container-of-root\n            [config]=\"layout94\"\n            [isPanel]=\"false\"\n            [isRoot]=\"true\"\n        ></bsu-ly-layout-container-of-root> -->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\n                    context: {\n                        $implicit: parameters?.LayoutComponent,\n                        layout94: layout94\n                    }\n                \"\n            ></ng-container>\n        </fd-dynamic-page-content>\n    </ng-template>\n    <fd-dynamic-page-footer>\n        <bsu-layout-actions\n            [canSend]=\"canSend\"\n            [buttons]=\"layoutActions\"\n            [isMobile]=\"isMobile\"\n            [landscape]=\"landscape\"\n            [standalone]=\"standalone\"\n            [workflowButtons]=\"workflowButtons\"\n            [workflowButtonsComboMode]=\"workflowButtonsComboMode\"\n            [deviceSize]=\"deviceSize\"\n            [rtl]=\"rtl\"\n            (toolClick)=\"onToolbarClick($event)\"\n            (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\n        >\n        </bsu-layout-actions>\n    </fd-dynamic-page-footer>\n</fd-dynamic-page>\n<ng-container *ngIf=\"contentIsPage\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            renderLayoutComponent;\n            context: {\n                $implicit: parameters?.LayoutComponent,\n                layout94: layout94\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\n    <bsu-ly-layout-container-of-root\n        [config]=\"layout94\"\n        [isPanel]=\"false\"\n        [isRoot]=\"true\"\n    ></bsu-ly-layout-container-of-root>\n</ng-template>\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\n    <bnrc-dynamic-form-component\n        [component]=\"component\"\n        [removeContentPadding]=\"removeContentPadding\"\n        [breadCrumbs]=\"breadCrumbs\"\n        [description]=\"description\"\n        [title]=\"title\"\n        [subtitle]=\"subtitle\"\n        [toolbarItems]=\"toolbarItems\"\n        [layoutActions]=\"layoutActions\"\n        [facetList]=\"facetList\"\n        [settings]=\"component.Settings\"\n        [workflowPanelUi]=\"workflowPanelUi\"\n        [isMobile]=\"isMobile\"\n        [mo]=\"mo\"\n        [layout94]=\"layout94\"\n        [context]=\"context\"\n        [rtl]=\"rtl\"\n        [fieldDict]=\"fieldDict\"\n        [mask]=\"mask\"\n        [dirValue]=\"dirValue\"\n        [deviceSize]=\"deviceSize\"\n        [contentDensity]=\"contentDensity\"\n        [modernTabs]=\"modernTabs\"\n        [avatar]=\"avatar\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-form-component>\n</ng-template>\n<ng-template #closeForm>\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n    </button>\n</ng-template>\n", styles: [":host{display:block;height:auto;width:100%}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .fd-progress-indicator__container,:host ::ng-deep .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "layout94", "settings", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "value"], outputs: ["events"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i5$3.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$3.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$6.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i7$6.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i7$6.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i7$6.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i7$6.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i7$6.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i7$6.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i7$9.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "id", "alignEnd"] }, { kind: "component", type: i7$9.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i7$9.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i9.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i5$5.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i13$1.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["class", "name", "ariaLabel", "ariaLabelledBy", "disabled", "displayMode", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator"], outputs: ["ratingChanged"] }, { kind: "component", type: i4$3.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "disabled", "mainActionTitle", "fdType", "expandButtonAriaLabel", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i15.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i15.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "component", type: i18.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.HeaderFacetValuePipe, name: "facetValue" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FundamentalDynamicFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-fundamental-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"mask\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\n    <bsu-mask size=\"m\"></bsu-mask>\n</div>\n\n<fd-dynamic-page\n    [size]=\"isMobile ? 'small' : 'large'\"\n    [class.header-border]=\"!removeHeaderBorder\"\n    [attr.isMobile]=\"isMobile\"\n    [attr.contentIsPage]=\"contentIsPage\"\n    mobile\n    formClose\n    [isMobile]=\"isMobile\"\n>\n    <fd-dynamic-page-header\n        [class.simple-title]=\"!description\"\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\n        [subtitle]=\"subtitle | bbbTranslate\"\n        [class.p-b0]=\"removeContentPadding\"\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\n        #titleRef\n    >\n        <fd-breadcrumb *ngIf=\"!isMobile\">\n            <ng-container *ngIf=\"breadCrumbs && !isMobile\">\n                <ng-container\n                    *ngFor=\"let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; let i = index; let last = last\"\n                >\n                    <fd-breadcrumb-item>\n                        <bsu-breadcrumb\n                            [index]=\"i\"\n                            [isLast]=\"last\"\n                            [breadCrumb]=\"breadCrumb\"\n                            [allBreadCrumb]=\"breadCrumbs\"\n                        ></bsu-breadcrumb>\n                    </fd-breadcrumb-item>\n                </ng-container>\n            </ng-container>\n        </fd-breadcrumb>\n        <fd-dynamic-page-global-actions>\n            <!-- global actions -->\n\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n            <!-- added this because in mobile landscape toolbar disapper -->\n            <fd-toolbar\n                *ngIf=\"toolbarVisible\"\n                #formToolbar\n                fdType=\"transparent\"\n                [clearBorder]=\"true\"\n                [shouldOverflow]=\"deviceSize === 's'\"\n                [class.firefox]=\"isFirefox\"\n            >\n                <ng-container *ngFor=\"let btn of toolbarItems; let i = index; let last = last; let first = first\">\n                    <fd-toolbar-separator\n                        [attr.i]=\"i\"\n                        [attr.last]=\"last\"\n                        [attr.first]=\"first\"\n                        *ngIf=\"(btn === '-' || btn.text === '-') && !last && !first\"\n                    ></fd-toolbar-separator>\n                    <ng-container *ngIf=\"btn.IAmMenu; else simpleButton\">\n                        <fd-split-button\n                            [dir]=\"dirValue\"\n                            fd-toolbar-item\n                            [attr.fdOverflowPriority]=\"'low'\"\n                            [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\n                            [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\n                            (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\n                            (click)=\"menu.open()\"\n                        >\n                            <fd-menu #menu>\n                                <li\n                                    fd-menu-item\n                                    *ngFor=\"let menuItem of btn.menu.items\"\n                                    [disabled]=\"menuItem.disabled\"\n                                    (click)=\"onToolbarClick(menuItem, menu)\"\n                                >\n                                    <div fd-menu-interactive>\n                                        <fd-menu-addon\n                                            position=\"before\"\n                                            [glyph]=\"\n                                                menuItem.newIcon ? menuItem.newIcon : menuItem.Data?.JsonExtraProp?.Icon\n                                            \"\n                                        >\n                                        </fd-menu-addon>\n                                        <img\n                                            class=\"mr8\"\n                                            *ngIf=\"!menuItem.newIcon && menuItem.icon\"\n                                            [src]=\"menuItem.icon\"\n                                        />\n                                        <span fd-menu-title>{{ menuItem.text }}</span>\n                                    </div>\n                                </li>\n                            </fd-menu>\n                        </fd-split-button>\n                    </ng-container>\n                    <ng-template #simpleButton>\n                        <ng-container *ngIf=\"!(btn === '-' || btn.text === '-')\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate;\n                                    context: { $implicit: btn }\n                                \"\n                            ></ng-container>\n                            <ng-template #btnTemplate let-btn>\n                                <button\n                                    fd-toolbar-item\n                                    fd-button\n                                    [disabled]=\"btn.disabled\"\n                                    [attr.fdOverflowPriority]=\"btn.priority\"\n                                    [fdType]=\"\n                                        btn.isWorkflow\n                                            ? 'positive'\n                                            : btn.design\n                                            ? btn.design\n                                            : btn.Data?.JsonExtraProp?.Design\n                                    \"\n                                    [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                                    (click)=\"onToolbarClick(btn)\"\n                                >\n                                    <img\n                                        *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                        width=\"16\"\n                                        [src]=\"btn.icon\"\n                                    />\n                                    <span *ngIf=\"btn.text\">{{ btn.text }}</span>\n                                </button>\n                            </ng-template>\n                            <ng-template #dynamicBtnTemplate let-btn>\n                                <bnrc-dynamic-form-toolbaritem\n                                    fd-toolbar-item\n                                    [component]=\"btn.Data.CustomUi\"\n                                    [context]=\"btn\"\n                                    [isEnable]=\"btn.Command?._isEnable\"\n                                    (btnClick)=\"onToolbarClick(btn)\"\n                                ></bnrc-dynamic-form-toolbaritem>\n                            </ng-template>\n                        </ng-container>\n\n                        <!-- <button\n                            *ngIf=\"!(btn === '-' || btn.text === '-')\"\n                            fd-toolbar-item\n                            fd-button\n                            [buttonType]=\"\n                                btn.isWorkflow ? 'positive' : btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\n                            \"\n                            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                            (click)=\"onToolbarClick(btn)\"\n                        >\n                            <img\n                                *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                width=\"16\"\n                                [src]=\"btn.icon\"\n                            />\n                            <span>{{ btn.text }}</span>\n                        </button> -->\n                    </ng-template>\n                </ng-container>\n            </fd-toolbar>\n            <!-- <bsu-ui-form-panel-toolbar\n        [buttons]=\"toolbarItems | tlbButtons: 'inFooter':false\"\n        [size]=\"size\"\n        [deviceSize]=\"deviceSize$ | async\"\n        [visible]=\"toolbarVisible\"\n        (toolClick)=\"onToolbarClick($event)\"\n      ></bsu-ui-form-panel-toolbar> -->\n        </fd-dynamic-page-global-actions>\n        <fd-dynamic-page-layout-actions>\n            <!-- layout actions -->\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\n            <fd-toolbar *ngIf=\"!hideClose\" fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\n            </fd-toolbar>\n        </fd-dynamic-page-layout-actions>\n    </fd-dynamic-page-header>\n    <fd-dynamic-page-subheader\n        *ngIf=\"description || facetList.length > 0 || workflowInfoText || avatar\"\n        [class.header-no-description]=\"!(description || workflowInfoText)\"\n        [class.no-pin]=\"hidePin\"\n        [collapsible]=\"!!workflowInfoText || (facetList && facetList.length > 0)\"\n        [pinnable]=\"true\"\n        [collapsed]=\"(!facetList || facetList.length === 0) && !workflowInfoText\"\n    >\n        <fd-message-strip [type]=\"'warning'\" *ngIf=\"workflowInfoText\" [dismissible]=\"false\">\n            {{ workflowInfoText | bbbTranslate }}\n        </fd-message-strip>\n        <fd-facet-group ariaLabel=\"Facet Group\">\n            <fd-facet *ngIf=\"avatar\" type=\"image\">\n                <fd-avatar\n                    title=\"avatar\"\n                    [glyph]=\"avatar\"\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\n                    [transparent]=\"true\"\n                ></fd-avatar>\n                <!-- <div\n                    class=\"fd-avatar fd-avatar--circle\"\n                    [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\n                >\n                    <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\n                </div> -->\n            </fd-facet>\n            <fd-facet\n                *ngFor=\"let facet of facetList\"\n                [type]=\"facet.type\"\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\n            >\n                <fd-facet-content *ngFor=\"let item of facet.mo.ItemList?.MoDataList\">\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\n                    <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\n                </fd-facet-content>\n                <span\n                    *ngIf=\"\n                        !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector;\n                        else dynamicComponentTpl\n                    \"\n                    fd-object-status\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [title]=\"facet.mo.Text | facetValue\"\n                    [aria-label]=\"facet.mo.Text | facetValue\"\n                    [glyph]=\"facet.mo.Icon\"\n                >\n                </span>\n                <ng-template #dynamicComponentTpl>\n                    <bnrc-dynamic-component\n                        [class]=\"'fd-object-status--' + facet.mo.Status | facetValue\"\n                        [class.fd-object-status--large]=\"facet.mo.IsLarge\"\n                        [component]=\"facet.mo.Component\"\n                        [value]=\"facet.mo.Text\"\n                    ></bnrc-dynamic-component>\n                </ng-template>\n                <fd-object-number\n                    *ngIf=\"facet.mo.IsNumber && facet.type === 'key-value'\"\n                    [number]=\"facet.mo.Text | facetValue\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [unit]=\"facet.mo.Unit | facetValue\"\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [decimal]=\"facet.mo.Decimal | facetValue\"\n                ></fd-object-number>\n\n                <div *ngIf=\"facet.type === 'plain-text'\" [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\n                    <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\n                </div>\n\n                <fd-facet-content *ngIf=\"facet.type === 'rating-indicator'\">\n                    <fd-rating-indicator\n                        style=\"pointer-events: none\"\n                        size=\"md\"\n                        [dynamicTextIndicator]=\"facet.mo.Footer\"\n                        [displayMode]=\"true\"\n                        [value]=\"facet.mo | facetValue: facet.type\"\n                    ></fd-rating-indicator>\n                </fd-facet-content>\n                <div *ngIf=\"facet.type === 'progress'\" [style.width]=\"'10rem'\">\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\n                    <fd-progress-indicator\n                        style=\"width: 10r em\"\n                        [state]=\"facet.mo.State\"\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\n                        [valueMax]=\"10\"\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\n                    ></fd-progress-indicator>\n                    <!-- <ui5-progress-indicator\n                        style=\"width: 10rem\"\n                        [valueState]=\"facet.mo.State\"\n                        [value]=\"getNumber(facet.mo.Value)\"\n                    ></ui5-progress-indicator> -->\n                </div>\n                <div *ngIf=\"facet.type === 'microcharts'\">\n                    <label wrap>in progress ...</label>\n                </div>\n            </fd-facet>\n        </fd-facet-group>\n        <span *ngIf=\"description\">{{ description }}</span>\n    </fd-dynamic-page-subheader>\n\n    <fd-tab-list\n        (selectedTabChange)=\"onTabChanged($event)\"\n        *ngIf=\"!contentIsPage && modernTabs && modernTabs.length > 0 && !parameters?.LayoutComponent; else renderLayout\"\n        [collapseOverflow]=\"true\"\n        [stackContent]=\"false\"\n        maxContentHeight=\"auto\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        #tablist\n    >\n        <fd-tab *ngFor=\"let tab of modernTabs; let i = index\" [title]=\"tab.Title!! | bbbTranslate\">\n            <fd-dynamic-page-content [id]=\"tab.id\">\n                <bsu-ly-tab-page [config]=\"tab\" [tablist]=\"tablist\"></bsu-ly-tab-page>\n            </fd-dynamic-page-content>\n        </fd-tab>\n    </fd-tab-list>\n    <ng-template #renderLayout>\n        <fd-dynamic-page-content [class.no-padding]=\"removeContentPadding\" *ngIf=\"!contentIsPage\">\n            <!-- <bsu-ly-layout-container-of-root\n            [config]=\"layout94\"\n            [isPanel]=\"false\"\n            [isRoot]=\"true\"\n        ></bsu-ly-layout-container-of-root> -->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\n                    context: {\n                        $implicit: parameters?.LayoutComponent,\n                        layout94: layout94\n                    }\n                \"\n            ></ng-container>\n        </fd-dynamic-page-content>\n    </ng-template>\n    <fd-dynamic-page-footer>\n        <bsu-layout-actions\n            [canSend]=\"canSend\"\n            [buttons]=\"layoutActions\"\n            [isMobile]=\"isMobile\"\n            [landscape]=\"landscape\"\n            [standalone]=\"standalone\"\n            [workflowButtons]=\"workflowButtons\"\n            [workflowButtonsComboMode]=\"workflowButtonsComboMode\"\n            [deviceSize]=\"deviceSize\"\n            [rtl]=\"rtl\"\n            (toolClick)=\"onToolbarClick($event)\"\n            (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\n        >\n        </bsu-layout-actions>\n    </fd-dynamic-page-footer>\n</fd-dynamic-page>\n<ng-container *ngIf=\"contentIsPage\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            renderLayoutComponent;\n            context: {\n                $implicit: parameters?.LayoutComponent,\n                layout94: layout94\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\n    <bsu-ly-layout-container-of-root\n        [config]=\"layout94\"\n        [isPanel]=\"false\"\n        [isRoot]=\"true\"\n    ></bsu-ly-layout-container-of-root>\n</ng-template>\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\n    <bnrc-dynamic-form-component\n        [component]=\"component\"\n        [removeContentPadding]=\"removeContentPadding\"\n        [breadCrumbs]=\"breadCrumbs\"\n        [description]=\"description\"\n        [title]=\"title\"\n        [subtitle]=\"subtitle\"\n        [toolbarItems]=\"toolbarItems\"\n        [layoutActions]=\"layoutActions\"\n        [facetList]=\"facetList\"\n        [settings]=\"component.Settings\"\n        [workflowPanelUi]=\"workflowPanelUi\"\n        [isMobile]=\"isMobile\"\n        [mo]=\"mo\"\n        [layout94]=\"layout94\"\n        [context]=\"context\"\n        [rtl]=\"rtl\"\n        [fieldDict]=\"fieldDict\"\n        [mask]=\"mask\"\n        [dirValue]=\"dirValue\"\n        [deviceSize]=\"deviceSize\"\n        [contentDensity]=\"contentDensity\"\n        [modernTabs]=\"modernTabs\"\n        [avatar]=\"avatar\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-form-component>\n</ng-template>\n<ng-template #closeForm>\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\n    </button>\n</ng-template>\n", styles: [":host{display:block;height:auto;width:100%}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .fd-progress-indicator__container,:host ::ng-deep .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"] }]
@@ -7877,7 +7915,7 @@ class UiLinearListContainerWithButtonComponent extends DeviceInfoFieldBaseCompon
         this.originalMoList = [...this.value];
         this.termSource
             .asObservable()
-            .pipe(takeUntil(this._onDestroy$), tap((term) => {
+            .pipe(takeUntil(this._onDestroy$), debounceTime(200), tap((term) => {
             this.term = term;
             if (!term) {
                 this.dropDownValuesSource.next([]);
@@ -8614,7 +8652,7 @@ class PageWithHeaderComponent extends PageWithFormHandlerBaseComponent {
     }
 }
 PageWithHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PageWithHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PageWithHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PageWithHeaderComponent, selector: "bsu-page-with-header", host: { properties: { "class.form-page-content": "this.formpageContentClass" } }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: ElementRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!headerLayout || !title; else pageWithHeader\">\r\n    <div #content></div>\r\n</ng-container>\r\n<ng-template #pageWithHeader>\r\n    <fdp-dynamic-page [size]=\"isMobile ? 'small' : 'large'\" [class.header-border]=\"!removeHeaderBorder\">\r\n        <fdp-dynamic-page-title\r\n            [class.simple-title]=\"!headerLayout.Description\"\r\n            [title]=\"title\"\r\n            [subtitle]=\"subtitle\"\r\n            [class.p-b0]=\"headerLayout?.RemoveContentPadding\"\r\n            #titleRef\r\n        >\r\n            <fd-breadcrumb>\r\n                <fd-breadcrumb-item>\r\n                    <span>{{ headerLayout.BreadCrumb }}</span>\r\n                </fd-breadcrumb-item>\r\n            </fd-breadcrumb>\r\n            <ng-container *ngFor=\"let facetColumn of headerLayout.FacetList?.MoDataList\">\r\n                <fdp-dynamic-page-key-info>\r\n                    <ng-container [ngSwitch]=\"facetColumn.ColumnType.$Caption\">\r\n                        <bsu-header-facet-key-value\r\n                            *ngSwitchCase=\"'KeyValue'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-key-value>\r\n                        <bsu-header-facet-form\r\n                            *ngSwitchCase=\"'Form'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-form>\r\n                        <bsu-header-facet-plain-text\r\n                            *ngSwitchCase=\"'PlainText'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-plain-text>\r\n                        <bsu-header-facet-rate\r\n                            *ngSwitchCase=\"'Rate'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-rate>\r\n                        <bsu-header-facet-progress\r\n                            *ngSwitchCase=\"'Progress'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-progress>\r\n                        <bsu-header-facet-microchart\r\n                            *ngSwitchCase=\"'Microchart'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-microchart>\r\n                        <div *ngSwitchDefault></div>\r\n                    </ng-container>\r\n                </fdp-dynamic-page-key-info>\r\n            </ng-container>\r\n            <fdp-dynamic-page-global-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\" [showOverflow]=\"true\">\r\n                    <ng-container *ngFor=\"let btn of commands\">\r\n                        <button\r\n                            fd-toolbar-item\r\n                            fd-button\r\n                            [fdType]=\"btn.Design\"\r\n                            [label]=\"btn.Title\"\r\n                            [glyph]=\"btn.Icon\"\r\n                            (click)=\"onCommandClick(btn)\"\r\n                        ></button>\r\n                    </ng-container>\r\n                    <bsu-global-search\r\n                        *ngIf=\"headerLayout.HasGlobalSearch\"\r\n                        [mo]=\"headerLayout.GlobalSearchSettings.GlobalSearchResult\"\r\n                    ></bsu-global-search>\r\n                </fd-toolbar>\r\n            </fdp-dynamic-page-global-actions>\r\n            <fdp-dynamic-page-layout-actions> </fdp-dynamic-page-layout-actions>\r\n        </fdp-dynamic-page-title>\r\n        <fdp-dynamic-page-header\r\n            [class.hide]=\"!headerLayout.Description\"\r\n            [collapsible]=\"true\"\r\n            [pinnable]=\"false\"\r\n            [collapsed]=\"true\"\r\n        >\r\n            <span *ngIf=\"headerLayout.Description\">{{ headerLayout.Description }}</span>\r\n        </fdp-dynamic-page-header>\r\n        <fdp-dynamic-page-content [class.no-padding]=\"removeContentPadding\">\r\n            <div #content></div>\r\n        </fdp-dynamic-page-content>\r\n    </fdp-dynamic-page>\r\n    <ng-template #headerAvatar let-avatar let-isIcon=\"isIcon\" let-isNullImage=\"isNullImage\">\r\n        <div class=\"fd-dynamic-page__avatar\">\r\n            <bsu-header-avatar\r\n                [icon]=\"isIcon ? avatar : ''\"\r\n                [fileId]=\"isNullImage ? '' : avatar.FileId\"\r\n                [size]=\"'m'\"\r\n            ></bsu-header-avatar>\r\n        </div>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-dynamic-page__header-fixed{position:relative!important}:host ::ng-deep .fd-dynamic-page__footer{position:absolute!important}:host ::ng-deep .fd-dynamic-page__content{top:0!important;overflow-y:hidden!important;height:auto!important}:host ::ng-deep .header-border header{border-bottom:1px solid #e4e4e4;box-shadow:0 4px 2px -3px #e4e4e4!important}:host ::ng-deep .no-padding{padding:0!important}:host ::ng-deep .fd-dynamic-page__title-container{flex-wrap:wrap;align-items:flex-start}.simple-title{cursor:default!important}.simple-title:hover{background-color:var(--sapObjectHeader_Background, #fff)!important}.fd-dynamic-page__avatar{padding-left:10px}.fd-dynamic-page__avatar fd-icon{font-size:2rem}@media (max-width: 600px){::ng-deep .fd-dynamic-page__content{padding:4px}.fd-dynamic-page__avatar fd-icon{font-size:1.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5$2.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$2.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i5$5.DynamicPageComponent, selector: "fdp-dynamic-page", inputs: ["role", "ariaLabel", "stackContent", "background", "size", "offset", "autoResponsive", "expandContent"], outputs: ["tabChange"] }, { kind: "component", type: i5$5.DynamicPageTitleComponent, selector: "fdp-dynamic-page-title", inputs: ["title", "subtitle", "background", "size"] }, { kind: "component", type: i5$5.DynamicPageKeyInfoComponent, selector: "fdp-dynamic-page-key-info" }, { kind: "component", type: i5$5.DynamicPageGlobalActionsComponent, selector: "fdp-dynamic-page-global-actions" }, { kind: "component", type: i5$5.DynamicPageLayoutActionsComponent, selector: "fdp-dynamic-page-layout-actions" }, { kind: "component", type: i5$5.DynamicPageHeaderComponent, selector: "fdp-dynamic-page-header", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel", "background", "size"], outputs: ["collapsedChange", "collapseChange"] }, { kind: "component", type: i5$5.DynamicPageContentComponent, selector: "fdp-dynamic-page-content", inputs: ["tabLabel", "id", "background", "size"] }, { kind: "component", type: HeaderFacetKeyValueComponent, selector: "bsu-header-facet-key-value", inputs: ["settings"] }, { kind: "component", type: HeaderFacetFormComponent, selector: "bsu-header-facet-form", inputs: ["settings"] }, { kind: "component", type: HeaderFacetRateComponent, selector: "bsu-header-facet-rate", inputs: ["settings"] }, { kind: "component", type: HeaderFacetProgressComponent, selector: "bsu-header-facet-progress", inputs: ["settings"] }, { kind: "component", type: HeaderFacetMicrochartComponent, selector: "bsu-header-facet-microchart", inputs: ["settings"] }, { kind: "component", type: HeaderFacetPlainTextComponent, selector: "bsu-header-facet-plain-text", inputs: ["settings"] }, { kind: "component", type: HeaderAvatarComponent, selector: "bsu-header-avatar", inputs: ["fileId", "icon"] }, { kind: "component", type: GlobalSearchComponent, selector: "bsu-global-search", inputs: ["mo", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PageWithHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PageWithHeaderComponent, selector: "bsu-page-with-header", host: { properties: { "class.form-page-content": "this.formpageContentClass" } }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: ElementRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!headerLayout || !title; else pageWithHeader\">\r\n    <div #content></div>\r\n</ng-container>\r\n<ng-template #pageWithHeader>\r\n    <fdp-dynamic-page [size]=\"isMobile ? 'small' : 'large'\" [class.header-border]=\"!removeHeaderBorder\">\r\n        <fdp-dynamic-page-title\r\n            [class.simple-title]=\"!headerLayout.Description\"\r\n            [title]=\"title\"\r\n            [subtitle]=\"subtitle\"\r\n            [class.p-b0]=\"headerLayout?.RemoveContentPadding\"\r\n            #titleRef\r\n        >\r\n            <fd-breadcrumb>\r\n                <fd-breadcrumb-item>\r\n                    <span>{{ headerLayout.BreadCrumb }}</span>\r\n                </fd-breadcrumb-item>\r\n            </fd-breadcrumb>\r\n            <ng-container *ngFor=\"let facetColumn of headerLayout.FacetList?.MoDataList\">\r\n                <fdp-dynamic-page-key-info>\r\n                    <ng-container [ngSwitch]=\"facetColumn.ColumnType.$Caption\">\r\n                        <bsu-header-facet-key-value\r\n                            *ngSwitchCase=\"'KeyValue'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-key-value>\r\n                        <bsu-header-facet-form\r\n                            *ngSwitchCase=\"'Form'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-form>\r\n                        <bsu-header-facet-plain-text\r\n                            *ngSwitchCase=\"'PlainText'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-plain-text>\r\n                        <bsu-header-facet-rate\r\n                            *ngSwitchCase=\"'Rate'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-rate>\r\n                        <bsu-header-facet-progress\r\n                            *ngSwitchCase=\"'Progress'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-progress>\r\n                        <bsu-header-facet-microchart\r\n                            *ngSwitchCase=\"'Microchart'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-microchart>\r\n                        <div *ngSwitchDefault></div>\r\n                    </ng-container>\r\n                </fdp-dynamic-page-key-info>\r\n            </ng-container>\r\n            <fdp-dynamic-page-global-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\" [showOverflow]=\"true\">\r\n                    <ng-container *ngFor=\"let btn of commands\">\r\n                        <button\r\n                            fd-toolbar-item\r\n                            fd-button\r\n                            [fdType]=\"btn.Design\"\r\n                            [label]=\"btn.Title\"\r\n                            [glyph]=\"btn.Icon\"\r\n                            (click)=\"onCommandClick(btn)\"\r\n                        ></button>\r\n                    </ng-container>\r\n                    <bsu-global-search\r\n                        *ngIf=\"headerLayout.HasGlobalSearch\"\r\n                        [mo]=\"headerLayout.GlobalSearchSettings.GlobalSearchResult\"\r\n                    ></bsu-global-search>\r\n                </fd-toolbar>\r\n            </fdp-dynamic-page-global-actions>\r\n            <fdp-dynamic-page-layout-actions> </fdp-dynamic-page-layout-actions>\r\n        </fdp-dynamic-page-title>\r\n        <fdp-dynamic-page-header\r\n            [class.hide]=\"!headerLayout.Description\"\r\n            [collapsible]=\"true\"\r\n            [pinnable]=\"false\"\r\n            [collapsed]=\"true\"\r\n        >\r\n            <span *ngIf=\"headerLayout.Description\">{{ headerLayout.Description }}</span>\r\n        </fdp-dynamic-page-header>\r\n        <fdp-dynamic-page-content [class.no-padding]=\"removeContentPadding\">\r\n            <div #content></div>\r\n        </fdp-dynamic-page-content>\r\n    </fdp-dynamic-page>\r\n    <ng-template #headerAvatar let-avatar let-isIcon=\"isIcon\" let-isNullImage=\"isNullImage\">\r\n        <div class=\"fd-dynamic-page__avatar\">\r\n            <bsu-header-avatar\r\n                [icon]=\"isIcon ? avatar : ''\"\r\n                [fileId]=\"isNullImage ? '' : avatar.FileId\"\r\n                [size]=\"'m'\"\r\n            ></bsu-header-avatar>\r\n        </div>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-dynamic-page__header-fixed{position:relative!important}:host ::ng-deep .fd-dynamic-page__footer{position:absolute!important}:host ::ng-deep .fd-dynamic-page__content{top:0!important;overflow-y:hidden!important;height:auto!important}:host ::ng-deep .header-border header{border-bottom:1px solid #e4e4e4;box-shadow:0 4px 2px -3px #e4e4e4!important}:host ::ng-deep .no-padding{padding:0!important}:host ::ng-deep .fd-dynamic-page__title-container{flex-wrap:wrap;align-items:flex-start}.simple-title{cursor:default!important}.simple-title:hover{background-color:var(--sapObjectHeader_Background, #fff)!important}.fd-dynamic-page__avatar{padding-left:10px}.fd-dynamic-page__avatar fd-icon{font-size:2rem}@media (max-width: 600px){::ng-deep .fd-dynamic-page__content{padding:4px}.fd-dynamic-page__avatar fd-icon{font-size:1.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5$3.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$3.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i5$6.DynamicPageComponent, selector: "fdp-dynamic-page", inputs: ["role", "ariaLabel", "stackContent", "background", "size", "offset", "autoResponsive", "expandContent"], outputs: ["tabChange"] }, { kind: "component", type: i5$6.DynamicPageTitleComponent, selector: "fdp-dynamic-page-title", inputs: ["title", "subtitle", "background", "size"] }, { kind: "component", type: i5$6.DynamicPageKeyInfoComponent, selector: "fdp-dynamic-page-key-info" }, { kind: "component", type: i5$6.DynamicPageGlobalActionsComponent, selector: "fdp-dynamic-page-global-actions" }, { kind: "component", type: i5$6.DynamicPageLayoutActionsComponent, selector: "fdp-dynamic-page-layout-actions" }, { kind: "component", type: i5$6.DynamicPageHeaderComponent, selector: "fdp-dynamic-page-header", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel", "background", "size"], outputs: ["collapsedChange", "collapseChange"] }, { kind: "component", type: i5$6.DynamicPageContentComponent, selector: "fdp-dynamic-page-content", inputs: ["tabLabel", "id", "background", "size"] }, { kind: "component", type: HeaderFacetKeyValueComponent, selector: "bsu-header-facet-key-value", inputs: ["settings"] }, { kind: "component", type: HeaderFacetFormComponent, selector: "bsu-header-facet-form", inputs: ["settings"] }, { kind: "component", type: HeaderFacetRateComponent, selector: "bsu-header-facet-rate", inputs: ["settings"] }, { kind: "component", type: HeaderFacetProgressComponent, selector: "bsu-header-facet-progress", inputs: ["settings"] }, { kind: "component", type: HeaderFacetMicrochartComponent, selector: "bsu-header-facet-microchart", inputs: ["settings"] }, { kind: "component", type: HeaderFacetPlainTextComponent, selector: "bsu-header-facet-plain-text", inputs: ["settings"] }, { kind: "component", type: HeaderAvatarComponent, selector: "bsu-header-avatar", inputs: ["fileId", "icon"] }, { kind: "component", type: GlobalSearchComponent, selector: "bsu-global-search", inputs: ["mo", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PageWithHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-page-with-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!headerLayout || !title; else pageWithHeader\">\r\n    <div #content></div>\r\n</ng-container>\r\n<ng-template #pageWithHeader>\r\n    <fdp-dynamic-page [size]=\"isMobile ? 'small' : 'large'\" [class.header-border]=\"!removeHeaderBorder\">\r\n        <fdp-dynamic-page-title\r\n            [class.simple-title]=\"!headerLayout.Description\"\r\n            [title]=\"title\"\r\n            [subtitle]=\"subtitle\"\r\n            [class.p-b0]=\"headerLayout?.RemoveContentPadding\"\r\n            #titleRef\r\n        >\r\n            <fd-breadcrumb>\r\n                <fd-breadcrumb-item>\r\n                    <span>{{ headerLayout.BreadCrumb }}</span>\r\n                </fd-breadcrumb-item>\r\n            </fd-breadcrumb>\r\n            <ng-container *ngFor=\"let facetColumn of headerLayout.FacetList?.MoDataList\">\r\n                <fdp-dynamic-page-key-info>\r\n                    <ng-container [ngSwitch]=\"facetColumn.ColumnType.$Caption\">\r\n                        <bsu-header-facet-key-value\r\n                            *ngSwitchCase=\"'KeyValue'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-key-value>\r\n                        <bsu-header-facet-form\r\n                            *ngSwitchCase=\"'Form'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-form>\r\n                        <bsu-header-facet-plain-text\r\n                            *ngSwitchCase=\"'PlainText'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-plain-text>\r\n                        <bsu-header-facet-rate\r\n                            *ngSwitchCase=\"'Rate'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-rate>\r\n                        <bsu-header-facet-progress\r\n                            *ngSwitchCase=\"'Progress'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-progress>\r\n                        <bsu-header-facet-microchart\r\n                            *ngSwitchCase=\"'Microchart'\"\r\n                            [settings]=\"facetColumn.ColumnSettings.$FormPanelSetting.Data.Mo\"\r\n                        ></bsu-header-facet-microchart>\r\n                        <div *ngSwitchDefault></div>\r\n                    </ng-container>\r\n                </fdp-dynamic-page-key-info>\r\n            </ng-container>\r\n            <fdp-dynamic-page-global-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\" [showOverflow]=\"true\">\r\n                    <ng-container *ngFor=\"let btn of commands\">\r\n                        <button\r\n                            fd-toolbar-item\r\n                            fd-button\r\n                            [fdType]=\"btn.Design\"\r\n                            [label]=\"btn.Title\"\r\n                            [glyph]=\"btn.Icon\"\r\n                            (click)=\"onCommandClick(btn)\"\r\n                        ></button>\r\n                    </ng-container>\r\n                    <bsu-global-search\r\n                        *ngIf=\"headerLayout.HasGlobalSearch\"\r\n                        [mo]=\"headerLayout.GlobalSearchSettings.GlobalSearchResult\"\r\n                    ></bsu-global-search>\r\n                </fd-toolbar>\r\n            </fdp-dynamic-page-global-actions>\r\n            <fdp-dynamic-page-layout-actions> </fdp-dynamic-page-layout-actions>\r\n        </fdp-dynamic-page-title>\r\n        <fdp-dynamic-page-header\r\n            [class.hide]=\"!headerLayout.Description\"\r\n            [collapsible]=\"true\"\r\n            [pinnable]=\"false\"\r\n            [collapsed]=\"true\"\r\n        >\r\n            <span *ngIf=\"headerLayout.Description\">{{ headerLayout.Description }}</span>\r\n        </fdp-dynamic-page-header>\r\n        <fdp-dynamic-page-content [class.no-padding]=\"removeContentPadding\">\r\n            <div #content></div>\r\n        </fdp-dynamic-page-content>\r\n    </fdp-dynamic-page>\r\n    <ng-template #headerAvatar let-avatar let-isIcon=\"isIcon\" let-isNullImage=\"isNullImage\">\r\n        <div class=\"fd-dynamic-page__avatar\">\r\n            <bsu-header-avatar\r\n                [icon]=\"isIcon ? avatar : ''\"\r\n                [fileId]=\"isNullImage ? '' : avatar.FileId\"\r\n                [size]=\"'m'\"\r\n            ></bsu-header-avatar>\r\n        </div>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-dynamic-page__header-fixed{position:relative!important}:host ::ng-deep .fd-dynamic-page__footer{position:absolute!important}:host ::ng-deep .fd-dynamic-page__content{top:0!important;overflow-y:hidden!important;height:auto!important}:host ::ng-deep .header-border header{border-bottom:1px solid #e4e4e4;box-shadow:0 4px 2px -3px #e4e4e4!important}:host ::ng-deep .no-padding{padding:0!important}:host ::ng-deep .fd-dynamic-page__title-container{flex-wrap:wrap;align-items:flex-start}.simple-title{cursor:default!important}.simple-title:hover{background-color:var(--sapObjectHeader_Background, #fff)!important}.fd-dynamic-page__avatar{padding-left:10px}.fd-dynamic-page__avatar fd-icon{font-size:2rem}@media (max-width: 600px){::ng-deep .fd-dynamic-page__content{padding:4px}.fd-dynamic-page__avatar fd-icon{font-size:1.5rem}}\n"] }]
@@ -9086,7 +9124,7 @@ class UiPicturesInfoComponent extends DeviceInfoFieldBaseComponent {
     }
 }
 UiPicturesInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiPicturesInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiPicturesInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiPicturesInfoComponent, selector: "bsu-ui-pictures-info", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<fd-file-uploader\n    #uploader\n    [style.display]=\"'none'\"\n    [id]=\"id\"\n    [name]=\"'pictures_' + id\"\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n    [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n    [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\n            <div\n                *ngFor=\"let media of mediaData; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(media, i)\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        cardTpl;\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n                    \"\n                ></ng-container>\n            </div>\n            <div\n                *ngIf=\"!inDialog && (disableOrReadonly$ | async) === true ? false : true\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n            >\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n        <fd-card-content style=\"text-align: center; height: 120px\">\n            <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" />\n        </fd-card-content>\n        <fd-card-footer *ngIf=\"!inDialog\">\n            <button\n                glyph=\"message-information\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                [fd-inline-help]=\"media.title\"\n                [triggers]=\"['click']\"\n                [closeOnOutsideClick]=\"true\"\n            ></button>\n            <button\n                glyph=\"full-screen\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                (click)=\"onFullscreen(media, mediaData)\"\n            ></button>\n            <ng-container *ngIf=\"(disableOrReadonly$ | async) === true ? false : true\">\n                <button\n                    glyph=\"delete\"\n                    *fdCardFooterActionItem\n                    fd-button\n                    fdType=\"transparent\"\n                    (click)=\"onDelete(index)\"\n                ></button>\n            </ng-container>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n<ng-template #newFile>\n    <div style=\"position: relative; height: 100%\">\n        <fd-card>\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n                <button\n                    fd-button\n                    glyph=\"add-photo\"\n                    fdType=\"transparent\"\n                    [label]=\"'AttachFile' | bbbTranslate\"\n                    (click)=\"uploader.open()\"\n                ></button>\n            </fd-card-content>\n\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n                <fd-menu #menu>\n                    <li fd-menu-item (click)=\"onScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                    <li fd-menu-item (click)=\"onAdvanceScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                </fd-menu>\n            </fd-card-footer>\n        </fd-card>\n        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"Fit image size\"\n                        [glyph]=\"'resize'\"\n                        [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                        (click)=\"fillWidth = !fillWidth\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body #fdbody>\n            <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n                <div\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\n                    class=\"column big-imgs-box\"\n                    [class.fill-width]=\"fillWidth\"\n                    [class.fill-all]=\"fillAll\"\n                    [class.fill-original]=\"fillOriginal\"\n                    [ngClass]=\"selectedZoom\"\n                >\n                    <div class=\"pics\" [id]=\"i\">\n                        <bsu-mask></bsu-mask>\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\n            </div>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:rgb(85,84,84);border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-width img{width:100%!important}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i5$1.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i5$1.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i6$4.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "directive", type: i7$b.InlineHelpDirective, selector: "[fd-inline-help], [fd-inline-help-template]", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { kind: "component", type: i4$5.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$5.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$5.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i9.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiPicturesInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiPicturesInfoComponent, selector: "bsu-ui-pictures-info", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<fd-file-uploader\n    #uploader\n    [style.display]=\"'none'\"\n    [id]=\"id\"\n    [name]=\"'pictures_' + id\"\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n    [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n    [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\n            <div\n                *ngFor=\"let media of mediaData; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(media, i)\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        cardTpl;\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n                    \"\n                ></ng-container>\n            </div>\n            <div\n                *ngIf=\"!inDialog && (disableOrReadonly$ | async) === true ? false : true\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n            >\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n        <fd-card-content style=\"text-align: center; height: 120px\">\n            <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" />\n        </fd-card-content>\n        <fd-card-footer *ngIf=\"!inDialog\">\n            <button\n                glyph=\"message-information\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                [fd-inline-help]=\"media.title\"\n                [triggers]=\"['click']\"\n                [closeOnOutsideClick]=\"true\"\n            ></button>\n            <button\n                glyph=\"full-screen\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                (click)=\"onFullscreen(media, mediaData)\"\n            ></button>\n            <ng-container *ngIf=\"(disableOrReadonly$ | async) === true ? false : true\">\n                <button\n                    glyph=\"delete\"\n                    *fdCardFooterActionItem\n                    fd-button\n                    fdType=\"transparent\"\n                    (click)=\"onDelete(index)\"\n                ></button>\n            </ng-container>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n<ng-template #newFile>\n    <div style=\"position: relative; height: 100%\">\n        <fd-card>\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n                <button\n                    fd-button\n                    glyph=\"add-photo\"\n                    fdType=\"transparent\"\n                    [label]=\"'AttachFile' | bbbTranslate\"\n                    (click)=\"uploader.open()\"\n                ></button>\n            </fd-card-content>\n\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n                <fd-menu #menu>\n                    <li fd-menu-item (click)=\"onScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                    <li fd-menu-item (click)=\"onAdvanceScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                </fd-menu>\n            </fd-card-footer>\n        </fd-card>\n        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"Fit image size\"\n                        [glyph]=\"'resize'\"\n                        [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                        (click)=\"fillWidth = !fillWidth\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body #fdbody>\n            <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n                <div\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\n                    class=\"column big-imgs-box\"\n                    [class.fill-width]=\"fillWidth\"\n                    [class.fill-all]=\"fillAll\"\n                    [class.fill-original]=\"fillOriginal\"\n                    [ngClass]=\"selectedZoom\"\n                >\n                    <div class=\"pics\" [id]=\"i\">\n                        <bsu-mask></bsu-mask>\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\n            </div>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:rgb(85,84,84);border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-width img{width:100%!important}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i5$1.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i5$1.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i6$4.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "directive", type: i5$2.InlineHelpDirective, selector: "[fd-inline-help], [fd-inline-help-template]", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { kind: "component", type: i4$5.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$5.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$5.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i9.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiPicturesInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-file-uploader\n    #uploader\n    [style.display]=\"'none'\"\n    [id]=\"id\"\n    [name]=\"'pictures_' + id\"\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n    [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n    [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\n            <div\n                *ngFor=\"let media of mediaData; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(media, i)\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        cardTpl;\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n                    \"\n                ></ng-container>\n            </div>\n            <div\n                *ngIf=\"!inDialog && (disableOrReadonly$ | async) === true ? false : true\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n            >\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n        <fd-card-content style=\"text-align: center; height: 120px\">\n            <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" />\n        </fd-card-content>\n        <fd-card-footer *ngIf=\"!inDialog\">\n            <button\n                glyph=\"message-information\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                [fd-inline-help]=\"media.title\"\n                [triggers]=\"['click']\"\n                [closeOnOutsideClick]=\"true\"\n            ></button>\n            <button\n                glyph=\"full-screen\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                (click)=\"onFullscreen(media, mediaData)\"\n            ></button>\n            <ng-container *ngIf=\"(disableOrReadonly$ | async) === true ? false : true\">\n                <button\n                    glyph=\"delete\"\n                    *fdCardFooterActionItem\n                    fd-button\n                    fdType=\"transparent\"\n                    (click)=\"onDelete(index)\"\n                ></button>\n            </ng-container>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n<ng-template #newFile>\n    <div style=\"position: relative; height: 100%\">\n        <fd-card>\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n                <button\n                    fd-button\n                    glyph=\"add-photo\"\n                    fdType=\"transparent\"\n                    [label]=\"'AttachFile' | bbbTranslate\"\n                    (click)=\"uploader.open()\"\n                ></button>\n            </fd-card-content>\n\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n                <fd-menu #menu>\n                    <li fd-menu-item (click)=\"onScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                    <li fd-menu-item (click)=\"onAdvanceScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                </fd-menu>\n            </fd-card-footer>\n        </fd-card>\n        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"Fit image size\"\n                        [glyph]=\"'resize'\"\n                        [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                        (click)=\"fillWidth = !fillWidth\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body #fdbody>\n            <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n                <div\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\n                    class=\"column big-imgs-box\"\n                    [class.fill-width]=\"fillWidth\"\n                    [class.fill-all]=\"fillAll\"\n                    [class.fill-original]=\"fillOriginal\"\n                    [ngClass]=\"selectedZoom\"\n                >\n                    <div class=\"pics\" [id]=\"i\">\n                        <bsu-mask></bsu-mask>\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\n            </div>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:rgb(85,84,84);border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-width img{width:100%!important}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
@@ -9903,7 +9941,7 @@ UiDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useFactory: getDateService$1,
             deps: [LogService]
         }
-    ], viewQueries: [{ propertyName: "datetimePickerRef", first: true, predicate: ["datetimePicker"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "durationPickerRef", first: true, predicate: ["durationPicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n    *ngIf=\"(disableOrReadonly$ | async)!!; else datetime\"\n    fd-form-control\n    type=\"text\"\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\n    [value]=\"value ? valueCaption : ''\"\n/>\n<ng-template #datetime>\n    <div\n        [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\n        [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : 'rtl'\"\n    >\n        <bc-date-time-picker\n            [value]=\"value\"\n            [showDate]=\"Setting.ShowDate1\"\n            [showTime]=\"Setting.ShowTime1\"\n            [primaryCalendarType]=\"Setting.CalendarType\"\n            [formatPattern]=\"formatPattern\"\n            (valueChange)=\"onDateChange2($event)\"\n            [readonly]=\"(readonly$ | async) === true ? true : false\"\n            [disabled]=\"(disable$ | async) === true ? true : false\"\n        >\n        </bc-date-time-picker>\n    </div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i2$1.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i1$4.DateTimePickerComponent, selector: "bc-date-time-picker", inputs: ["placeholder", "primaryCalendarType", "formatPattern", "value", "timeValue", "startRangeDate", "endRangeDate", "isRangePicker", "showTime", "showDate", "rtl", "readonly", "disabled"], outputs: ["rangeChange", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "datetimePickerRef", first: true, predicate: ["datetimePicker"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "durationPickerRef", first: true, predicate: ["durationPicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n    *ngIf=\"(disableOrReadonly$ | async)!!; else datetime\"\n    fd-form-control\n    type=\"text\"\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\n    [value]=\"value ? valueCaption : ''\"\n/>\n<ng-template #datetime>\n    <div\n        [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\n        [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : 'rtl'\"\n    >\n        <bc-date-time-picker\n            [value]=\"value\"\n            [showDate]=\"Setting.ShowDate1\"\n            [showTime]=\"Setting.ShowTime1\"\n            [placeholder]=\"formatPattern\"\n            [primaryCalendarType]=\"Setting.CalendarType\"\n            [formatPattern]=\"formatPattern\"\n            (valueChange)=\"onDateChange2($event)\"\n            [readonly]=\"(readonly$ | async) === true ? true : false\"\n            [disabled]=\"(disable$ | async) === true ? true : false\"\n        >\n        </bc-date-time-picker>\n    </div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i2$1.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i1$4.DateTimePickerComponent, selector: "bc-date-time-picker", inputs: ["placeholder", "primaryCalendarType", "formatPattern", "value", "timeValue", "startRangeDate", "endRangeDate", "isRangePicker", "showTime", "showDate", "rtl", "readonly", "disabled"], outputs: ["rangeChange", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-date-time', providers: [
@@ -9912,7 +9950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                             useFactory: getDateService$1,
                             deps: [LogService]
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n    *ngIf=\"(disableOrReadonly$ | async)!!; else datetime\"\n    fd-form-control\n    type=\"text\"\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\n    [value]=\"value ? valueCaption : ''\"\n/>\n<ng-template #datetime>\n    <div\n        [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\n        [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : 'rtl'\"\n    >\n        <bc-date-time-picker\n            [value]=\"value\"\n            [showDate]=\"Setting.ShowDate1\"\n            [showTime]=\"Setting.ShowTime1\"\n            [primaryCalendarType]=\"Setting.CalendarType\"\n            [formatPattern]=\"formatPattern\"\n            (valueChange)=\"onDateChange2($event)\"\n            [readonly]=\"(readonly$ | async) === true ? true : false\"\n            [disabled]=\"(disable$ | async) === true ? true : false\"\n        >\n        </bc-date-time-picker>\n    </div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n    *ngIf=\"(disableOrReadonly$ | async)!!; else datetime\"\n    fd-form-control\n    type=\"text\"\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\n    [value]=\"value ? valueCaption : ''\"\n/>\n<ng-template #datetime>\n    <div\n        [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\n        [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : 'rtl'\"\n    >\n        <bc-date-time-picker\n            [value]=\"value\"\n            [showDate]=\"Setting.ShowDate1\"\n            [showTime]=\"Setting.ShowTime1\"\n            [placeholder]=\"formatPattern\"\n            [primaryCalendarType]=\"Setting.CalendarType\"\n            [formatPattern]=\"formatPattern\"\n            (valueChange)=\"onDateChange2($event)\"\n            [readonly]=\"(readonly$ | async) === true ? true : false\"\n            [disabled]=\"(disable$ | async) === true ? true : false\"\n        >\n        </bc-date-time-picker>\n    </div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { datetimePickerRef: [{
                 type: ViewChild,
                 args: ['datetimePicker']
@@ -9989,10 +10027,10 @@ class UiTinymceComponent extends FieldBaseComponent {
     }
 }
 UiTinymceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiTinymceComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiTinymceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiTinymceComponent, selector: "bsu-ui-tinymce", host: { properties: { "style.min-height": "this.tinyHeight" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    <div\r\n        class=\"html-readonly\"\r\n        *ngIf=\"Setting.IsHtmlViewer || (disableOrReadonly$ | async); else textarea\"\r\n        [class.readonly]=\"readonly$ | async\"\r\n        [class.anonymous]=\"isAnonymous\"\r\n        [class.disable]=\"disable$ | async\"\r\n        [innerHtml]=\"Setting.IsHtmlViewer ? sefeValue : ''\"\r\n    ></div>\r\n    <ng-template #textarea>\r\n        <bsu-mask *ngIf=\"!tinyInit\"></bsu-mask>\r\n        <bsu-barsa-tinyemce\r\n            [Setting]=\"Setting\"\r\n            [value]=\"value\"\r\n            (tinyInit)=\"onTinyInit()\"\r\n            (valueChange)=\"onTinyChanged($event)\"\r\n            [readonly]=\"isReadonly\"\r\n        ></bsu-barsa-tinyemce>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;height:100%;width:100%;align-self:flex-start;min-width:320px}:host ::ng-deep .tox.tox-tinymce{border:none}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.readonly{background:var(--sapBackgroundColor);height:100%}.disable{background:var(--sapBackgroundColor);height:100%;opacity:.5}.readonly.anonymous{background-color:transparent;border:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BarsaTinyemceComponent, selector: "bsu-barsa-tinyemce", inputs: ["Setting", "isReadonly", "value"], outputs: ["valueChange", "tinyInit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiTinymceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiTinymceComponent, selector: "bsu-ui-tinymce", host: { properties: { "style.min-height": "this.tinyHeight" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\n    <div\n        class=\"html-readonly\"\n        *ngIf=\"Setting.IsHtmlViewer || (disableOrReadonly$ | async); else textarea\"\n        [class.readonly]=\"readonly$ | async\"\n        [class.anonymous]=\"isAnonymous\"\n        [class.disable]=\"disable$ | async\"\n        [innerHtml]=\"Setting.IsHtmlViewer ? sefeValue : ''\"\n    ></div>\n    <ng-template #textarea>\n        <bsu-mask *ngIf=\"!tinyInit\"></bsu-mask>\n        <bsu-barsa-tinyemce\n            [Setting]=\"Setting\"\n            [value]=\"value\"\n            [defaultVerbs]=\"context.defaultVerbs\"\n            (tinyInit)=\"onTinyInit()\"\n            (valueChange)=\"onTinyChanged($event)\"\n            [readonly]=\"isReadonly\"\n        ></bsu-barsa-tinyemce>\n    </ng-template>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;height:100%;width:100%;align-self:flex-start;min-width:320px}:host ::ng-deep .tox.tox-tinymce{border:none}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.readonly{background:var(--sapBackgroundColor);height:100%}.disable{background:var(--sapBackgroundColor);height:100%;opacity:.5}.readonly.anonymous{background-color:transparent;border:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BarsaTinyemceComponent, selector: "bsu-barsa-tinyemce", inputs: ["Setting", "isReadonly", "value", "defaultVerbs"], outputs: ["valueChange", "tinyInit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiTinymceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-tinymce', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *untilInView=\"el\">\r\n    <div\r\n        class=\"html-readonly\"\r\n        *ngIf=\"Setting.IsHtmlViewer || (disableOrReadonly$ | async); else textarea\"\r\n        [class.readonly]=\"readonly$ | async\"\r\n        [class.anonymous]=\"isAnonymous\"\r\n        [class.disable]=\"disable$ | async\"\r\n        [innerHtml]=\"Setting.IsHtmlViewer ? sefeValue : ''\"\r\n    ></div>\r\n    <ng-template #textarea>\r\n        <bsu-mask *ngIf=\"!tinyInit\"></bsu-mask>\r\n        <bsu-barsa-tinyemce\r\n            [Setting]=\"Setting\"\r\n            [value]=\"value\"\r\n            (tinyInit)=\"onTinyInit()\"\r\n            (valueChange)=\"onTinyChanged($event)\"\r\n            [readonly]=\"isReadonly\"\r\n        ></bsu-barsa-tinyemce>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;height:100%;width:100%;align-self:flex-start;min-width:320px}:host ::ng-deep .tox.tox-tinymce{border:none}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.readonly{background:var(--sapBackgroundColor);height:100%}.disable{background:var(--sapBackgroundColor);height:100%;opacity:.5}.readonly.anonymous{background-color:transparent;border:none}\n"] }]
+            args: [{ selector: 'bsu-ui-tinymce', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *untilInView=\"el\">\n    <div\n        class=\"html-readonly\"\n        *ngIf=\"Setting.IsHtmlViewer || (disableOrReadonly$ | async); else textarea\"\n        [class.readonly]=\"readonly$ | async\"\n        [class.anonymous]=\"isAnonymous\"\n        [class.disable]=\"disable$ | async\"\n        [innerHtml]=\"Setting.IsHtmlViewer ? sefeValue : ''\"\n    ></div>\n    <ng-template #textarea>\n        <bsu-mask *ngIf=\"!tinyInit\"></bsu-mask>\n        <bsu-barsa-tinyemce\n            [Setting]=\"Setting\"\n            [value]=\"value\"\n            [defaultVerbs]=\"context.defaultVerbs\"\n            (tinyInit)=\"onTinyInit()\"\n            (valueChange)=\"onTinyChanged($event)\"\n            [readonly]=\"isReadonly\"\n        ></bsu-barsa-tinyemce>\n    </ng-template>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;height:100%;width:100%;align-self:flex-start;min-width:320px}:host ::ng-deep .tox.tox-tinymce{border:none}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.readonly{background:var(--sapBackgroundColor);height:100%}.disable{background:var(--sapBackgroundColor);height:100%;opacity:.5}.readonly.anonymous{background-color:transparent;border:none}\n"] }]
         }], propDecorators: { tinyHeight: [{
                 type: HostBinding,
                 args: ['style.min-height']
@@ -10074,7 +10112,7 @@ class UlvSettingsComponent extends BaseComponent {
     }
 }
 UlvSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvSettingsComponent, deps: [{ token: i1$1.DialogService }, { token: i2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-UlvSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvSettingsComponent, selector: "bsu-ulv-settings", inputs: { context: "context", open: "open" }, outputs: { changed: "changed", restore: "restore" }, viewQueries: [{ propertyName: "dialogTemplateRef", first: true, predicate: ["dialogTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "gridColumnsComponent", first: true, predicate: ["gridColumnsRef"], descendants: true }, { propertyName: "gridSortComponent", first: true, predicate: ["gridSortRef"], descendants: true }, { propertyName: "gridGroupComponent", first: true, predicate: ["gridGroupRef"], descendants: true }, { propertyName: "settingButtonRef", predicate: ["settingButtons"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplateRef>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 fd-title>{{ 'Settings' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body class=\"setting-wrapper\">\r\n            <fd-segmented-button>\r\n                <button\r\n                    (click)=\"onSettingButtonsSelectionChange(i)\"\r\n                    #settingButtons\r\n                    *ngFor=\"let button of settingButtons; let i = index\"\r\n                    [class.is-selected]=\"selectedSettingButton === i ? true : null\"\r\n                    fd-button\r\n                    [label]=\"button.text\"\r\n                ></button>\r\n            </fd-segmented-button>\r\n            <div\r\n                class=\"setting-section\"\r\n                [class.section-visible]=\"settingButtons[selectedSettingButton]?.text === ('Columns' | bbbTranslate)\"\r\n            >\r\n                <bsu-ui-grid-columns [columns]=\"allColumns\" #gridColumnsRef></bsu-ui-grid-columns>\r\n            </div>\r\n            <div\r\n                class=\"setting-section\"\r\n                [class.section-visible]=\"settingButtons[selectedSettingButton]?.text === ('Sort' | bbbTranslate)\"\r\n            >\r\n                <bsu-ui-grid-sort-setting\r\n                    #gridSortRef\r\n                    [columns]=\"allColumns\"\r\n                    [sortSettings]=\"sortSettings\"\r\n                    (changeSetting)=\"onChangeSetting()\"\r\n                ></bsu-ui-grid-sort-setting>\r\n            </div>\r\n\r\n            <div\r\n                class=\"setting-section\"\r\n                [class.section-visible]=\"settingButtons[selectedSettingButton]?.text === ('Groups' | bbbTranslate)\"\r\n            >\r\n                <bsu-ui-grid-sort-setting\r\n                    #gridGroupRef\r\n                    [columns]=\"allColumns\"\r\n                    [class.section-visible]=\"selectedSettingButton === 1\"\r\n                    [sortSettings]=\"sortSettings\"\r\n                    [showGroups]=\"true\"\r\n                    (changeSetting)=\"onChangeSetting()\"\r\n                ></bsu-ui-grid-sort-setting>\r\n            </div>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button fdType=\"emphasized\" (click)=\"onOkClick()\" [label]=\"'OK' | bbbTranslate\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button (click)=\"onCancelSettings()\" [label]=\"'Cancel' | bbbTranslate\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"onRestoreClick()\"\r\n                    [label]=\"'Restore' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [".popover-content{width:60vw;height:60vh;background-color:var(--sapBackgroundColor)}.segemented-wrapper{box-shadow:var(--sapContent_HeaderShadow)}ui5-responsive-popover{background-color:var(--sapBackgroundColor)}.header-settings{padding:10px 0 2px;display:flex;flex-direction:column;align-items:stretch;width:100%}.header-settings ui5-title{align-self:flex-start}fd-segmented-button{display:flex;justify-content:stretch;width:100%;height:36px}fd-segmented-button button{width:100%}.setting-wrapper{min-height:calc(60vh - 25px)}.setting-section{display:none;overflow:hidden;padding:15px 0;max-height:50vh}.section-visible{overflow:auto;display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i4.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i4.DialogFooterButtonComponent, selector: "fd-dialog-footer-button" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i7$c.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { kind: "component", type: UiGridSortSettingComponent, selector: "bsu-ui-grid-sort-setting", inputs: ["showGroups", "columns", "sortSettings"], outputs: ["changeSetting"] }, { kind: "component", type: UiGridColumnsComponent, selector: "bsu-ui-grid-columns", inputs: ["columns", "selectedColumns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UlvSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvSettingsComponent, selector: "bsu-ulv-settings", inputs: { context: "context", open: "open" }, outputs: { changed: "changed", restore: "restore" }, viewQueries: [{ propertyName: "dialogTemplateRef", first: true, predicate: ["dialogTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "gridColumnsComponent", first: true, predicate: ["gridColumnsRef"], descendants: true }, { propertyName: "gridSortComponent", first: true, predicate: ["gridSortRef"], descendants: true }, { propertyName: "gridGroupComponent", first: true, predicate: ["gridGroupRef"], descendants: true }, { propertyName: "settingButtonRef", predicate: ["settingButtons"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplateRef>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 fd-title>{{ 'Settings' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body class=\"setting-wrapper\">\r\n            <fd-segmented-button>\r\n                <button\r\n                    (click)=\"onSettingButtonsSelectionChange(i)\"\r\n                    #settingButtons\r\n                    *ngFor=\"let button of settingButtons; let i = index\"\r\n                    [class.is-selected]=\"selectedSettingButton === i ? true : null\"\r\n                    fd-button\r\n                    [label]=\"button.text\"\r\n                ></button>\r\n            </fd-segmented-button>\r\n            <div\r\n                class=\"setting-section\"\r\n                [class.section-visible]=\"settingButtons[selectedSettingButton]?.text === ('Columns' | bbbTranslate)\"\r\n            >\r\n                <bsu-ui-grid-columns [columns]=\"allColumns\" #gridColumnsRef></bsu-ui-grid-columns>\r\n            </div>\r\n            <div\r\n                class=\"setting-section\"\r\n                [class.section-visible]=\"settingButtons[selectedSettingButton]?.text === ('Sort' | bbbTranslate)\"\r\n            >\r\n                <bsu-ui-grid-sort-setting\r\n                    #gridSortRef\r\n                    [columns]=\"allColumns\"\r\n                    [sortSettings]=\"sortSettings\"\r\n                    (changeSetting)=\"onChangeSetting()\"\r\n                ></bsu-ui-grid-sort-setting>\r\n            </div>\r\n\r\n            <div\r\n                class=\"setting-section\"\r\n                [class.section-visible]=\"settingButtons[selectedSettingButton]?.text === ('Groups' | bbbTranslate)\"\r\n            >\r\n                <bsu-ui-grid-sort-setting\r\n                    #gridGroupRef\r\n                    [columns]=\"allColumns\"\r\n                    [class.section-visible]=\"selectedSettingButton === 1\"\r\n                    [sortSettings]=\"sortSettings\"\r\n                    [showGroups]=\"true\"\r\n                    (changeSetting)=\"onChangeSetting()\"\r\n                ></bsu-ui-grid-sort-setting>\r\n            </div>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button fdType=\"emphasized\" (click)=\"onOkClick()\" [label]=\"'OK' | bbbTranslate\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button (click)=\"onCancelSettings()\" [label]=\"'Cancel' | bbbTranslate\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"onRestoreClick()\"\r\n                    [label]=\"'Restore' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [".popover-content{width:60vw;height:60vh;background-color:var(--sapBackgroundColor)}.segemented-wrapper{box-shadow:var(--sapContent_HeaderShadow)}ui5-responsive-popover{background-color:var(--sapBackgroundColor)}.header-settings{padding:10px 0 2px;display:flex;flex-direction:column;align-items:stretch;width:100%}.header-settings ui5-title{align-self:flex-start}fd-segmented-button{display:flex;justify-content:stretch;width:100%;height:36px}fd-segmented-button button{width:100%}.setting-wrapper{min-height:calc(60vh - 25px)}.setting-section{display:none;overflow:hidden;padding:15px 0;max-height:50vh}.section-visible{overflow:auto;display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i4.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i4.DialogFooterButtonComponent, selector: "fd-dialog-footer-button" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i7$b.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { kind: "component", type: UiGridSortSettingComponent, selector: "bsu-ui-grid-sort-setting", inputs: ["showGroups", "columns", "sortSettings"], outputs: ["changeSetting"] }, { kind: "component", type: UiGridColumnsComponent, selector: "bsu-ui-grid-columns", inputs: ["columns", "selectedColumns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ulv-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplateRef>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 fd-title>{{ 'Settings' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body class=\"setting-wrapper\">\r\n            <fd-segmented-button>\r\n                <button\r\n                    (click)=\"onSettingButtonsSelectionChange(i)\"\r\n                    #settingButtons\r\n                    *ngFor=\"let button of settingButtons; let i = index\"\r\n                    [class.is-selected]=\"selectedSettingButton === i ? true : null\"\r\n                    fd-button\r\n                    [label]=\"button.text\"\r\n                ></button>\r\n            </fd-segmented-button>\r\n            <div\r\n                class=\"setting-section\"\r\n                [class.section-visible]=\"settingButtons[selectedSettingButton]?.text === ('Columns' | bbbTranslate)\"\r\n            >\r\n                <bsu-ui-grid-columns [columns]=\"allColumns\" #gridColumnsRef></bsu-ui-grid-columns>\r\n            </div>\r\n            <div\r\n                class=\"setting-section\"\r\n                [class.section-visible]=\"settingButtons[selectedSettingButton]?.text === ('Sort' | bbbTranslate)\"\r\n            >\r\n                <bsu-ui-grid-sort-setting\r\n                    #gridSortRef\r\n                    [columns]=\"allColumns\"\r\n                    [sortSettings]=\"sortSettings\"\r\n                    (changeSetting)=\"onChangeSetting()\"\r\n                ></bsu-ui-grid-sort-setting>\r\n            </div>\r\n\r\n            <div\r\n                class=\"setting-section\"\r\n                [class.section-visible]=\"settingButtons[selectedSettingButton]?.text === ('Groups' | bbbTranslate)\"\r\n            >\r\n                <bsu-ui-grid-sort-setting\r\n                    #gridGroupRef\r\n                    [columns]=\"allColumns\"\r\n                    [class.section-visible]=\"selectedSettingButton === 1\"\r\n                    [sortSettings]=\"sortSettings\"\r\n                    [showGroups]=\"true\"\r\n                    (changeSetting)=\"onChangeSetting()\"\r\n                ></bsu-ui-grid-sort-setting>\r\n            </div>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button fdType=\"emphasized\" (click)=\"onOkClick()\" [label]=\"'OK' | bbbTranslate\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button (click)=\"onCancelSettings()\" [label]=\"'Cancel' | bbbTranslate\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"onRestoreClick()\"\r\n                    [label]=\"'Restore' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [".popover-content{width:60vw;height:60vh;background-color:var(--sapBackgroundColor)}.segemented-wrapper{box-shadow:var(--sapContent_HeaderShadow)}ui5-responsive-popover{background-color:var(--sapBackgroundColor)}.header-settings{padding:10px 0 2px;display:flex;flex-direction:column;align-items:stretch;width:100%}.header-settings ui5-title{align-self:flex-start}fd-segmented-button{display:flex;justify-content:stretch;width:100%;height:36px}fd-segmented-button button{width:100%}.setting-wrapper{min-height:calc(60vh - 25px)}.setting-section{display:none;overflow:hidden;padding:15px 0;max-height:50vh}.section-visible{overflow:auto;display:block}\n"] }]
@@ -10992,6 +11030,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
         }] });
 
 class UiReadOnlyFieldComponent extends FieldBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.isEllipsis = true;
+    }
     ngOnInit() {
         super.ngOnInit();
         this._setText();
@@ -11009,10 +11051,10 @@ class UiReadOnlyFieldComponent extends FieldBaseComponent {
     }
 }
 UiReadOnlyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiReadOnlyFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiReadOnlyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiReadOnlyFieldComponent, selector: "bsu-ui-read-only-field", usesInheritance: true, ngImport: i0, template: "<fd-text\n    style=\"color: var(--fdIcon_Tab_Bar_Selection_Color)\"\n    [class.empty-bracket]=\"!text\"\n    [text]=\"text || 'Empty_Bracket' | bbbTranslate\"\n    [class.bold]=\"text !== null && text !== ''\"\n    [whitespaces]=\"true\"\n    [maxLines]=\"2\"\n></fd-text>\n<button\n    *ngIf=\"parameters?.ShowCopy && text\"\n    fd-button\n    glyph=\"copy\"\n    [fdCompact]\n    fdType=\"transparent\"\n    [copy]=\"text | bbbTranslate\"\n></button>\n", styles: [":host{display:flex;width:100%;height:100%;align-items:center}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CopyDirective, selector: "[copy]", inputs: ["copy"] }, { kind: "directive", type: i3$7.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiReadOnlyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiReadOnlyFieldComponent, selector: "bsu-ui-read-only-field", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"controlTpl; context: { maxlines: parameters?.MaxLines }\"></ng-container>\n\n<button\n    *ngIf=\"parameters?.ShowCopy && text\"\n    fd-button\n    glyph=\"copy\"\n    [fdCompact]\n    fdType=\"transparent\"\n    [copy]=\"text | bbbTranslate\"\n></button>\n<!-- <fd-popover *ngIf=\"text\">\n    <fd-popover-control>\n        <button\n            *ngIf=\"isEllipsis\"\n            fd-button\n            glyph=\"overflow\"\n            [fdCompact]\n            fdType=\"transparent\"\n            [title]=\"text | bbbTranslate\"\n        ></button>\n    </fd-popover-control>\n    <fd-popover-body>\n        <ng-container *ngTemplateOutlet=\"controlTpl\"></ng-container>\n    </fd-popover-body>\n</fd-popover>\n-->\n<ng-template #controlTpl let-maxlines>\n    <fd-text\n        style=\"color: var(--fdIcon_Tab_Bar_Selection_Color)\"\n        [class.empty-bracket]=\"!text\"\n        [text]=\"text || 'Empty_Bracket' | bbbTranslate\"\n        [class.bold]=\"text !== null && text !== ''\"\n        [whitespaces]=\"true\"\n        [maxLines]=\"maxlines ? maxlines : 0\"\n    ></fd-text>\n</ng-template>\n", styles: [":host{display:flex;width:100%;height:100%;align-items:center}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CopyDirective, selector: "[copy]", inputs: ["copy"] }, { kind: "directive", type: i3$7.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiReadOnlyFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-read-only-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-text\n    style=\"color: var(--fdIcon_Tab_Bar_Selection_Color)\"\n    [class.empty-bracket]=\"!text\"\n    [text]=\"text || 'Empty_Bracket' | bbbTranslate\"\n    [class.bold]=\"text !== null && text !== ''\"\n    [whitespaces]=\"true\"\n    [maxLines]=\"2\"\n></fd-text>\n<button\n    *ngIf=\"parameters?.ShowCopy && text\"\n    fd-button\n    glyph=\"copy\"\n    [fdCompact]\n    fdType=\"transparent\"\n    [copy]=\"text | bbbTranslate\"\n></button>\n", styles: [":host{display:flex;width:100%;height:100%;align-items:center}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}\n"] }]
+            args: [{ selector: 'bsu-ui-read-only-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngTemplateOutlet=\"controlTpl; context: { maxlines: parameters?.MaxLines }\"></ng-container>\n\n<button\n    *ngIf=\"parameters?.ShowCopy && text\"\n    fd-button\n    glyph=\"copy\"\n    [fdCompact]\n    fdType=\"transparent\"\n    [copy]=\"text | bbbTranslate\"\n></button>\n<!-- <fd-popover *ngIf=\"text\">\n    <fd-popover-control>\n        <button\n            *ngIf=\"isEllipsis\"\n            fd-button\n            glyph=\"overflow\"\n            [fdCompact]\n            fdType=\"transparent\"\n            [title]=\"text | bbbTranslate\"\n        ></button>\n    </fd-popover-control>\n    <fd-popover-body>\n        <ng-container *ngTemplateOutlet=\"controlTpl\"></ng-container>\n    </fd-popover-body>\n</fd-popover>\n-->\n<ng-template #controlTpl let-maxlines>\n    <fd-text\n        style=\"color: var(--fdIcon_Tab_Bar_Selection_Color)\"\n        [class.empty-bracket]=\"!text\"\n        [text]=\"text || 'Empty_Bracket' | bbbTranslate\"\n        [class.bold]=\"text !== null && text !== ''\"\n        [whitespaces]=\"true\"\n        [maxLines]=\"maxlines ? maxlines : 0\"\n    ></fd-text>\n</ng-template>\n", styles: [":host{display:flex;width:100%;height:100%;align-items:center}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}\n"] }]
         }] });
 
 class LyLayoutPanelComponent extends LayoutPanelBaseComponent {
@@ -11056,10 +11098,10 @@ class LyLayoutPanelComponent extends LayoutPanelBaseComponent {
     }
 }
 LyLayoutPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LyLayoutPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LyLayoutPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LyLayoutPanelComponent, selector: "bsu-ly-layout-panel", inputs: { renderItems: "renderItems", isRoot: "isRoot" }, 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: "<canvas #canvas style=\"display: none\"></canvas>\n<fd-panel\n    [fixed]=\"!config.ExpandButtonVisible\"\n    *ngIf=\"visible\"\n    [class.hide-header]=\"!config.TextVisible\"\n    [attr.maxWidth]=\"maxWidth\"\n    [expanded]=\"config.Expanded\"\n>\n    <h5 fd-panel-title>\n        {{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}\n    </h5>\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\n        <ng-container *ngFor=\"let item of config | filterToolbarControl\">\n            <ng-container [ngSwitch]=\"item.xtype\">\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n                    <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\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                    </ng-container>\n                    <ng-template #verticalJoin>\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                    </ng-template>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n            </ng-container>\n        </ng-container>\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", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}:host ::ng-deep .hide-header .fd-panel__header{display:none}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "component", type: i3$9.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$9.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$9.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LyLayoutPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LyLayoutPanelComponent, selector: "bsu-ly-layout-panel", inputs: { renderItems: "renderItems", isRoot: "isRoot" }, 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: "<fd-panel\n    [fixed]=\"!config.ExpandButtonVisible\"\n    *ngIf=\"visible\"\n    [class.hide-header]=\"!config.TextVisible\"\n    [attr.maxWidth]=\"maxWidth\"\n    [expanded]=\"config.Expanded\"\n>\n    <h5 fd-panel-title>\n        {{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}\n    </h5>\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\n        <ng-container *ngFor=\"let item of config | filterToolbarControl\">\n            <ng-container [ngSwitch]=\"item.xtype\">\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n                    <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\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                    </ng-container>\n                    <ng-template #verticalJoin>\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                    </ng-template>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n            </ng-container>\n        </ng-container>\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", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}:host ::ng-deep .hide-header .fd-panel__header{display:none}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "component", type: i3$9.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$9.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$9.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "pipe", type: i1.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: "14.2.7", ngImport: i0, type: LyLayoutPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-layout-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "<canvas #canvas style=\"display: none\"></canvas>\n<fd-panel\n    [fixed]=\"!config.ExpandButtonVisible\"\n    *ngIf=\"visible\"\n    [class.hide-header]=\"!config.TextVisible\"\n    [attr.maxWidth]=\"maxWidth\"\n    [expanded]=\"config.Expanded\"\n>\n    <h5 fd-panel-title>\n        {{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}\n    </h5>\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\n        <ng-container *ngFor=\"let item of config | filterToolbarControl\">\n            <ng-container [ngSwitch]=\"item.xtype\">\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n                    <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\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                    </ng-container>\n                    <ng-template #verticalJoin>\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                    </ng-template>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n            </ng-container>\n        </ng-container>\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", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}:host ::ng-deep .hide-header .fd-panel__header{display:none}.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: "<fd-panel\n    [fixed]=\"!config.ExpandButtonVisible\"\n    *ngIf=\"visible\"\n    [class.hide-header]=\"!config.TextVisible\"\n    [attr.maxWidth]=\"maxWidth\"\n    [expanded]=\"config.Expanded\"\n>\n    <h5 fd-panel-title>\n        {{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}\n    </h5>\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\n        <ng-container *ngFor=\"let item of config | filterToolbarControl\">\n            <ng-container [ngSwitch]=\"item.xtype\">\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n                    <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\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                    </ng-container>\n                    <ng-template #verticalJoin>\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                    </ng-template>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\n            </ng-container>\n        </ng-container>\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", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}:host ::ng-deep .hide-header .fd-panel__header{display:none}.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: [{
@@ -11087,10 +11129,10 @@ class UiGridComponent extends SapUiReportBaseComponent {
     }
 }
 UiGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiGridComponent, selector: "bsu-ui-grid", inputs: { showOkCancelButtons: "showOkCancelButtons" }, usesInheritance: true, ngImport: i0, template: "<canvas #canvas style=\"display: none\"></canvas>\n<!--render container-->\n<ng-container\n    *ngTemplateOutlet=\"\n        renderContainer;\n        context: {\n            $implicit: gridDataSource.data$ | async,\n            allChecked: allChecked$ | async,\n            groupby: groupby$ | async,\n            isCheckList: context.Setting.View?.IsCheckList,\n            hasSummary: context.Setting.View?.HasSummaryRow,\n            columns: columns$ | async,\n            columnsCount: columnsCount$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            onlyInlineEdit: onlyInlineEdit$ | async,\n            secondaryColumns: secondaryColumns$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            popin: (mobileOrTablet$ | async) || (secondaryColumnsCount$ | async)!! > 0 ? true : false,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: conditionalFormats$ | async,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            mobileOrTablet: mobileOrTablet$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            extraRelation: context.Setting.Extra?.Relation,\n            title: title$ | async,\n            rtl: rtl$ | async,\n            hideToolbar: hideToolbar$ | async,\n            allColumns: allColumns,\n            gridSetting: gridSetting$ | async,\n            contentDensity: contentDensity$ | async,\n            formSetting: context.Setting.FormTemplate,\n            hasSelected: hasSelected$ | async,\n            showOkCancelButtons: showOkCancelButtons,\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\n            navigationArrow: navigationArrow$ | async,\n            containerWidth: containerWidth$ | async,\n            newInlineEditMo: newInlineEditMo$ | async,\n            typeDefId: context.Setting.Extra.Report.TypeDefId,\n            contextView: context.Setting.View,\n            cartableTemplates: cartableTemplates$ | async,\n            cartableChildsMo: cartableChildsMo$ | async,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            disableResponsive: disableResponsive$ | async,\n            fullscreen: fullscreen$ | async,\n            selectedMo: selectedMo$ | async\n        }\n    \"\n></ng-container>\n<!--render container -->\n<ng-template\n    #renderContainer\n    let-moDataList\n    let-allChecked=\"allChecked\"\n    let-isCheckList=\"isCheckList\"\n    let-columns=\"columns\"\n    let-columnsCount=\"columnsCount\"\n    let-groupby=\"groupby\"\n    let-secondaryColumns=\"secondaryColumns\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-access=\"access\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-popin=\"popin\"\n    let-mobileOrTablet=\"mobileOrTablet\"\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-formSetting=\"formSetting\"\n    let-hasSelected=\"hasSelected\"\n    let-showOkCancelButtons=\"showOkCancelButtons\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-navigationArrow=\"navigationArrow\"\n    let-containerWidth=\"containerWidth\"\n    let-newInlineEditMo=\"newInlineEditMo\"\n    let-hasSummary=\"hasSummary\"\n    let-extraRelation=\"extraRelation\"\n    let-typeDefId=\"typeDefId\"\n    let-contextView=\"contextView\"\n    let-cartableTemplates=\"cartableTemplates\"\n    let-cartableChildsMo=\"cartableChildsMo\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-fullscreen=\"fullscreen\"\n    let-selectedMo=\"selectedMo\"\n    let-disableResponsive=\"disableResponsive\"\n>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [hideTitle]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [hasSelected]=\"hasSelected\"\n        [access]=\"access\"\n        [disableResponsive]=\"disableResponsive\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [contentDensity]=\"contentDensity\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        (sortClick)=\"onSortSettings(deviceName)\"\n        (groupbyClick)=\"onGroupbySettings(deviceName)\"\n        (columnClick)=\"onColumnSettings(deviceName)\"\n        (editModeClick)=\"onEditMode()\"\n        (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\n    ></bsu-ulv-toolbar>\n    <bsu-ui-table-view\n        [cartableTemplates]=\"cartableTemplates\"\n        [parentHeight]=\"parentHeight\"\n        [fullscreen]=\"fullscreen\"\n        [selectedMo]=\"selectedMo\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [cartableChildsMo]=\"cartableChildsMo\"\n        [contextView]=\"contextView\"\n        [containerWidth]=\"containerWidth\"\n        [isCheckList]=\"isCheckList\"\n        [allChecked]=\"allChecked\"\n        [moDataList]=\"moDataList\"\n        [access]=\"access\"\n        [groupby]=\"groupby\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [navigationArrow]=\"navigationArrow\"\n        [title]=\"title\"\n        [mobileOrTablet]=\"mobileOrTablet\"\n        [disableResponsive]=\"disableResponsive\"\n        [popin]=\"popin\"\n        [secondaryColumns]=\"secondaryColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [columns]=\"columns\"\n        [columnWidth]=\"100 / columns.length\"\n        [columnsCount]=\"columnsCount\"\n        [rowHoverable]=\"rowHoverable\"\n        [rowActivable]=\"rowActivable\"\n        [formSetting]=\"formSetting\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [showOkCancelButtons]=\"showOkCancelButtons\"\n        [fitWidth]=\"false\"\n        [hasSummary]=\"hasSummary\"\n        [rowResizer]=\"rowResizer\"\n        [enableResizing]=\"enableResizing\"\n        [newInlineEditMo]=\"newInlineEditMo\"\n        (ulvCommandClick)=\"onUlvCommand($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n    >\n    </bsu-ui-table-view>\n</ng-template>\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: ["useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "hasSelected", "config", "hidden", "buttons"], outputs: ["search", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo"] }, { kind: "component", type: UiTableViewComponent, selector: "bsu-ui-table-view", inputs: ["columnWidth", "minWidth", "minHeight", "rowResizer", "enableResizing"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }, { kind: "pipe", type: i2.ContextMenuPipe, name: "contextMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiGridComponent, selector: "bsu-ui-grid", inputs: { showOkCancelButtons: "showOkCancelButtons" }, usesInheritance: true, ngImport: i0, template: "<!--render container-->\n<ng-container\n    *ngTemplateOutlet=\"\n        renderContainer;\n        context: {\n            $implicit: gridDataSource.data$ | async,\n            allChecked: allChecked$ | async,\n            groupby: groupby$ | async,\n            isCheckList: context.Setting.View?.IsCheckList,\n            hasSummary: context.Setting.View?.HasSummaryRow,\n            columns: columns$ | async,\n            columnsCount: columnsCount$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            onlyInlineEdit: onlyInlineEdit$ | async,\n            secondaryColumns: secondaryColumns$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            popin: (mobileOrTablet$ | async) || (secondaryColumnsCount$ | async)!! > 0 ? true : false,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: conditionalFormats$ | async,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            mobileOrTablet: mobileOrTablet$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            extraRelation: context.Setting.Extra?.Relation,\n            title: title$ | async,\n            rtl: rtl$ | async,\n            hideToolbar: hideToolbar$ | async,\n            allColumns: allColumns,\n            gridSetting: gridSetting$ | async,\n            contentDensity: contentDensity$ | async,\n            formSetting: context.Setting.FormTemplate,\n            hasSelected: hasSelected$ | async,\n            showOkCancelButtons: showOkCancelButtons,\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\n            navigationArrow: navigationArrow$ | async,\n            containerWidth: containerWidth$ | async,\n            newInlineEditMo: newInlineEditMo$ | async,\n            typeDefId: context.Setting.Extra.Report.TypeDefId,\n            contextView: context.Setting.View,\n            cartableTemplates: cartableTemplates$ | async,\n            cartableChildsMo: cartableChildsMo$ | async,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            disableResponsive: disableResponsive$ | async,\n            fullscreen: fullscreen$ | async,\n            selectedMo: selectedMo$ | async\n        }\n    \"\n></ng-container>\n<!--render container -->\n<ng-template\n    #renderContainer\n    let-moDataList\n    let-allChecked=\"allChecked\"\n    let-isCheckList=\"isCheckList\"\n    let-columns=\"columns\"\n    let-columnsCount=\"columnsCount\"\n    let-groupby=\"groupby\"\n    let-secondaryColumns=\"secondaryColumns\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-access=\"access\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-popin=\"popin\"\n    let-mobileOrTablet=\"mobileOrTablet\"\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-formSetting=\"formSetting\"\n    let-hasSelected=\"hasSelected\"\n    let-showOkCancelButtons=\"showOkCancelButtons\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-navigationArrow=\"navigationArrow\"\n    let-containerWidth=\"containerWidth\"\n    let-newInlineEditMo=\"newInlineEditMo\"\n    let-hasSummary=\"hasSummary\"\n    let-extraRelation=\"extraRelation\"\n    let-typeDefId=\"typeDefId\"\n    let-contextView=\"contextView\"\n    let-cartableTemplates=\"cartableTemplates\"\n    let-cartableChildsMo=\"cartableChildsMo\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-fullscreen=\"fullscreen\"\n    let-selectedMo=\"selectedMo\"\n    let-disableResponsive=\"disableResponsive\"\n>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [hideTitle]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [hasSelected]=\"hasSelected\"\n        [access]=\"access\"\n        [disableResponsive]=\"disableResponsive\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [contentDensity]=\"contentDensity\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        (sortClick)=\"onSortSettings(deviceName)\"\n        (groupbyClick)=\"onGroupbySettings(deviceName)\"\n        (columnClick)=\"onColumnSettings(deviceName)\"\n        (editModeClick)=\"onEditMode()\"\n        (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\n    ></bsu-ulv-toolbar>\n    <bsu-ui-table-view\n        [cartableTemplates]=\"cartableTemplates\"\n        [parentHeight]=\"parentHeight\"\n        [fullscreen]=\"fullscreen\"\n        [selectedMo]=\"selectedMo\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [cartableChildsMo]=\"cartableChildsMo\"\n        [contextView]=\"contextView\"\n        [containerWidth]=\"containerWidth\"\n        [isCheckList]=\"isCheckList\"\n        [allChecked]=\"allChecked\"\n        [moDataList]=\"moDataList\"\n        [access]=\"access\"\n        [groupby]=\"groupby\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [navigationArrow]=\"navigationArrow\"\n        [title]=\"title\"\n        [mobileOrTablet]=\"mobileOrTablet\"\n        [disableResponsive]=\"disableResponsive\"\n        [popin]=\"popin\"\n        [secondaryColumns]=\"secondaryColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [columns]=\"columns\"\n        [columnWidth]=\"100 / columns.length\"\n        [columnsCount]=\"columnsCount\"\n        [rowHoverable]=\"rowHoverable\"\n        [rowActivable]=\"rowActivable\"\n        [formSetting]=\"formSetting\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [showOkCancelButtons]=\"showOkCancelButtons\"\n        [fitWidth]=\"false\"\n        [hasSummary]=\"hasSummary\"\n        [rowResizer]=\"rowResizer\"\n        [enableResizing]=\"enableResizing\"\n        [newInlineEditMo]=\"newInlineEditMo\"\n        (ulvCommandClick)=\"onUlvCommand($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n    >\n    </bsu-ui-table-view>\n</ng-template>\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UlvToolbarComponent, selector: "bsu-ulv-toolbar", inputs: ["useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "hasSelected", "config", "hidden", "buttons"], outputs: ["search", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo"] }, { kind: "component", type: UiTableViewComponent, selector: "bsu-ui-table-view", inputs: ["columnWidth", "minWidth", "minHeight", "rowResizer", "enableResizing"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }, { kind: "pipe", type: i2.ContextMenuPipe, name: "contextMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<canvas #canvas style=\"display: none\"></canvas>\n<!--render container-->\n<ng-container\n    *ngTemplateOutlet=\"\n        renderContainer;\n        context: {\n            $implicit: gridDataSource.data$ | async,\n            allChecked: allChecked$ | async,\n            groupby: groupby$ | async,\n            isCheckList: context.Setting.View?.IsCheckList,\n            hasSummary: context.Setting.View?.HasSummaryRow,\n            columns: columns$ | async,\n            columnsCount: columnsCount$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            onlyInlineEdit: onlyInlineEdit$ | async,\n            secondaryColumns: secondaryColumns$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            popin: (mobileOrTablet$ | async) || (secondaryColumnsCount$ | async)!! > 0 ? true : false,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: conditionalFormats$ | async,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            mobileOrTablet: mobileOrTablet$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            extraRelation: context.Setting.Extra?.Relation,\n            title: title$ | async,\n            rtl: rtl$ | async,\n            hideToolbar: hideToolbar$ | async,\n            allColumns: allColumns,\n            gridSetting: gridSetting$ | async,\n            contentDensity: contentDensity$ | async,\n            formSetting: context.Setting.FormTemplate,\n            hasSelected: hasSelected$ | async,\n            showOkCancelButtons: showOkCancelButtons,\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\n            navigationArrow: navigationArrow$ | async,\n            containerWidth: containerWidth$ | async,\n            newInlineEditMo: newInlineEditMo$ | async,\n            typeDefId: context.Setting.Extra.Report.TypeDefId,\n            contextView: context.Setting.View,\n            cartableTemplates: cartableTemplates$ | async,\n            cartableChildsMo: cartableChildsMo$ | async,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            disableResponsive: disableResponsive$ | async,\n            fullscreen: fullscreen$ | async,\n            selectedMo: selectedMo$ | async\n        }\n    \"\n></ng-container>\n<!--render container -->\n<ng-template\n    #renderContainer\n    let-moDataList\n    let-allChecked=\"allChecked\"\n    let-isCheckList=\"isCheckList\"\n    let-columns=\"columns\"\n    let-columnsCount=\"columnsCount\"\n    let-groupby=\"groupby\"\n    let-secondaryColumns=\"secondaryColumns\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-access=\"access\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-popin=\"popin\"\n    let-mobileOrTablet=\"mobileOrTablet\"\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-formSetting=\"formSetting\"\n    let-hasSelected=\"hasSelected\"\n    let-showOkCancelButtons=\"showOkCancelButtons\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-navigationArrow=\"navigationArrow\"\n    let-containerWidth=\"containerWidth\"\n    let-newInlineEditMo=\"newInlineEditMo\"\n    let-hasSummary=\"hasSummary\"\n    let-extraRelation=\"extraRelation\"\n    let-typeDefId=\"typeDefId\"\n    let-contextView=\"contextView\"\n    let-cartableTemplates=\"cartableTemplates\"\n    let-cartableChildsMo=\"cartableChildsMo\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-fullscreen=\"fullscreen\"\n    let-selectedMo=\"selectedMo\"\n    let-disableResponsive=\"disableResponsive\"\n>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [hideTitle]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [hasSelected]=\"hasSelected\"\n        [access]=\"access\"\n        [disableResponsive]=\"disableResponsive\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [contentDensity]=\"contentDensity\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        (sortClick)=\"onSortSettings(deviceName)\"\n        (groupbyClick)=\"onGroupbySettings(deviceName)\"\n        (columnClick)=\"onColumnSettings(deviceName)\"\n        (editModeClick)=\"onEditMode()\"\n        (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\n    ></bsu-ulv-toolbar>\n    <bsu-ui-table-view\n        [cartableTemplates]=\"cartableTemplates\"\n        [parentHeight]=\"parentHeight\"\n        [fullscreen]=\"fullscreen\"\n        [selectedMo]=\"selectedMo\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [cartableChildsMo]=\"cartableChildsMo\"\n        [contextView]=\"contextView\"\n        [containerWidth]=\"containerWidth\"\n        [isCheckList]=\"isCheckList\"\n        [allChecked]=\"allChecked\"\n        [moDataList]=\"moDataList\"\n        [access]=\"access\"\n        [groupby]=\"groupby\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [navigationArrow]=\"navigationArrow\"\n        [title]=\"title\"\n        [mobileOrTablet]=\"mobileOrTablet\"\n        [disableResponsive]=\"disableResponsive\"\n        [popin]=\"popin\"\n        [secondaryColumns]=\"secondaryColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [columns]=\"columns\"\n        [columnWidth]=\"100 / columns.length\"\n        [columnsCount]=\"columnsCount\"\n        [rowHoverable]=\"rowHoverable\"\n        [rowActivable]=\"rowActivable\"\n        [formSetting]=\"formSetting\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [showOkCancelButtons]=\"showOkCancelButtons\"\n        [fitWidth]=\"false\"\n        [hasSummary]=\"hasSummary\"\n        [rowResizer]=\"rowResizer\"\n        [enableResizing]=\"enableResizing\"\n        [newInlineEditMo]=\"newInlineEditMo\"\n        (ulvCommandClick)=\"onUlvCommand($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n    >\n    </bsu-ui-table-view>\n</ng-template>\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}\n"] }]
+            args: [{ selector: 'bsu-ui-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--render container-->\n<ng-container\n    *ngTemplateOutlet=\"\n        renderContainer;\n        context: {\n            $implicit: gridDataSource.data$ | async,\n            allChecked: allChecked$ | async,\n            groupby: groupby$ | async,\n            isCheckList: context.Setting.View?.IsCheckList,\n            hasSummary: context.Setting.View?.HasSummaryRow,\n            columns: columns$ | async,\n            columnsCount: columnsCount$ | async,\n            allowInlineEdit: allowInlineEdit$ | async,\n            inlineEditMode: inlineEditMode$ | async,\n            onlyInlineEdit: onlyInlineEdit$ | async,\n            secondaryColumns: secondaryColumns$ | async,\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\n            popin: (mobileOrTablet$ | async) || (secondaryColumnsCount$ | async)!! > 0 ? true : false,\n            contextMenuItems: menuItems$ | async | contextMenu: context.Setting.View?.IsCheckList,\n            conditionalFormats: conditionalFormats$ | async,\n            deviceName: deviceName$ | async,\n            deviceSize: deviceSize$ | async,\n            mobileOrTablet: mobileOrTablet$ | async,\n            access: context.Setting.Extra?.DefaultCommandsAccess,\n            extraRelation: context.Setting.Extra?.Relation,\n            title: title$ | async,\n            rtl: rtl$ | async,\n            hideToolbar: hideToolbar$ | async,\n            allColumns: allColumns,\n            gridSetting: gridSetting$ | async,\n            contentDensity: contentDensity$ | async,\n            formSetting: context.Setting.FormTemplate,\n            hasSelected: hasSelected$ | async,\n            showOkCancelButtons: showOkCancelButtons,\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\n            navigationArrow: navigationArrow$ | async,\n            containerWidth: containerWidth$ | async,\n            newInlineEditMo: newInlineEditMo$ | async,\n            typeDefId: context.Setting.Extra.Report.TypeDefId,\n            contextView: context.Setting.View,\n            cartableTemplates: cartableTemplates$ | async,\n            cartableChildsMo: cartableChildsMo$ | async,\n            inDialog: inDialog$ | async,\n            isMultiSelect: isMultiSelect$ | async,\n            disableResponsive: disableResponsive$ | async,\n            fullscreen: fullscreen$ | async,\n            selectedMo: selectedMo$ | async\n        }\n    \"\n></ng-container>\n<!--render container -->\n<ng-template\n    #renderContainer\n    let-moDataList\n    let-allChecked=\"allChecked\"\n    let-isCheckList=\"isCheckList\"\n    let-columns=\"columns\"\n    let-columnsCount=\"columnsCount\"\n    let-groupby=\"groupby\"\n    let-secondaryColumns=\"secondaryColumns\"\n    let-contextMenuItems=\"contextMenuItems\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-deviceSize=\"deviceSize\"\n    let-access=\"access\"\n    let-toolbarButtons=\"toolbarButtons\"\n    let-popin=\"popin\"\n    let-mobileOrTablet=\"mobileOrTablet\"\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-formSetting=\"formSetting\"\n    let-hasSelected=\"hasSelected\"\n    let-showOkCancelButtons=\"showOkCancelButtons\"\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\n    let-navigationArrow=\"navigationArrow\"\n    let-containerWidth=\"containerWidth\"\n    let-newInlineEditMo=\"newInlineEditMo\"\n    let-hasSummary=\"hasSummary\"\n    let-extraRelation=\"extraRelation\"\n    let-typeDefId=\"typeDefId\"\n    let-contextView=\"contextView\"\n    let-cartableTemplates=\"cartableTemplates\"\n    let-cartableChildsMo=\"cartableChildsMo\"\n    let-inDialog=\"inDialog\"\n    let-isMultiSelect=\"isMultiSelect\"\n    let-fullscreen=\"fullscreen\"\n    let-selectedMo=\"selectedMo\"\n    let-disableResponsive=\"disableResponsive\"\n>\n    <bsu-ulv-toolbar\n        [hideToolbar]=\"hideToolbar\"\n        [deviceName]=\"deviceName\"\n        [hideTitle]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        [toolbarButtons]=\"toolbarButtons\"\n        [gridSetting]=\"gridSetting\"\n        [title]=\"title\"\n        [hasSelected]=\"hasSelected\"\n        [access]=\"access\"\n        [disableResponsive]=\"disableResponsive\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [contentDensity]=\"contentDensity\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        (sortClick)=\"onSortSettings(deviceName)\"\n        (groupbyClick)=\"onGroupbySettings(deviceName)\"\n        (columnClick)=\"onColumnSettings(deviceName)\"\n        (editModeClick)=\"onEditMode()\"\n        (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\n    ></bsu-ulv-toolbar>\n    <bsu-ui-table-view\n        [cartableTemplates]=\"cartableTemplates\"\n        [parentHeight]=\"parentHeight\"\n        [fullscreen]=\"fullscreen\"\n        [selectedMo]=\"selectedMo\"\n        [inDialog]=\"inDialog\"\n        [isMultiSelect]=\"isMultiSelect\"\n        [cartableChildsMo]=\"cartableChildsMo\"\n        [contextView]=\"contextView\"\n        [containerWidth]=\"containerWidth\"\n        [isCheckList]=\"isCheckList\"\n        [allChecked]=\"allChecked\"\n        [moDataList]=\"moDataList\"\n        [access]=\"access\"\n        [groupby]=\"groupby\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [navigationArrow]=\"navigationArrow\"\n        [title]=\"title\"\n        [mobileOrTablet]=\"mobileOrTablet\"\n        [disableResponsive]=\"disableResponsive\"\n        [popin]=\"popin\"\n        [secondaryColumns]=\"secondaryColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [inlineEditMode]=\"inlineEditMode && allowInlineEdit\"\n        [allowInlineEdit]=\"allowInlineEdit\"\n        [columns]=\"columns\"\n        [columnWidth]=\"100 / columns.length\"\n        [columnsCount]=\"columnsCount\"\n        [rowHoverable]=\"rowHoverable\"\n        [rowActivable]=\"rowActivable\"\n        [formSetting]=\"formSetting\"\n        [typeDefId]=\"typeDefId\"\n        [extraRelation]=\"extraRelation\"\n        [showOkCancelButtons]=\"showOkCancelButtons\"\n        [fitWidth]=\"false\"\n        [hasSummary]=\"hasSummary\"\n        [rowResizer]=\"rowResizer\"\n        [enableResizing]=\"enableResizing\"\n        [newInlineEditMo]=\"newInlineEditMo\"\n        (ulvCommandClick)=\"onUlvCommand($event)\"\n        (selectNextInlineRecord)=\"onSelectNextInlineRecord($event)\"\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n        (editFormPanelValueChange)=\"onEditFormPanelValueChange($event)\"\n        (sortAscending)=\"onSortAscending($event)\"\n        (sortDescending)=\"onSortDescending($event)\"\n        (filter)=\"onFilter($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (rowCheck)=\"onRowCheck($event)\"\n        (allCheckbox)=\"onAllCheckbox($event)\"\n        (expandClick)=\"onExpandClick($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (workflowShareButtons)=\"onWorkflowShareButtons($event)\"\n    >\n    </bsu-ui-table-view>\n</ng-template>\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}\n"] }]
         }], propDecorators: { showOkCancelButtons: [{
                 type: Input
             }] } });
@@ -11611,10 +11653,10 @@ class BarsaCartableFormComponent extends FormBaseComponent {
     }
 }
 BarsaCartableFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaCartableFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BarsaCartableFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaCartableFormComponent, selector: "bsu-barsa-cartable-form", host: { properties: { "class.smallDevice": "this._isSmallDevice" } }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"layout94$ | async as layout94\">\n    <div class=\"groups-wrapper\">\n        <bsu-layout-control\n            class=\"search-group\"\n            *ngIf=\"'\u062C\u0633\u062A\u062C\u0648 \u06AF\u0631\u0648\u0647' | controlUi: layout94 as configUi\"\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        <bsu-layout-control\n            class=\"cartable-groups\"\n            *ngIf=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94 as configUi\"\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    </div>\n    <bsu-layout-control\n        class=\"cartable-radif\"\n        *ngIf=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644' | controlUi: layout94 as configUi\"\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</ng-container>\n", styles: [":host{display:flex;width:100%;height:100%;border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);background-color:#fff}: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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaCartableFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaCartableFormComponent, selector: "bsu-barsa-cartable-form", host: { properties: { "class.smallDevice": "this._isSmallDevice" } }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"layout94$ | async as layout94\">\n    <div class=\"groups-wrapper\">\n        <bsu-layout-control\n            class=\"search-group\"\n            *ngIf=\"'\u062C\u0633\u062A\u062C\u0648 \u06AF\u0631\u0648\u0647' | controlUi: layout94 as configUi\"\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        <bsu-layout-control\n            class=\"cartable-groups\"\n            *ngIf=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94 as configUi\"\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    </div>\n    <bsu-layout-control\n        class=\"cartable-radif\"\n        *ngIf=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644' | controlUi: layout94 as configUi\"\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</ng-container>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaCartableFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-cartable-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [FormPanelService], template: "<ng-container *ngIf=\"layout94$ | async as layout94\">\n    <div class=\"groups-wrapper\">\n        <bsu-layout-control\n            class=\"search-group\"\n            *ngIf=\"'\u062C\u0633\u062A\u062C\u0648 \u06AF\u0631\u0648\u0647' | controlUi: layout94 as configUi\"\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        <bsu-layout-control\n            class=\"cartable-groups\"\n            *ngIf=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94 as configUi\"\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    </div>\n    <bsu-layout-control\n        class=\"cartable-radif\"\n        *ngIf=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644' | controlUi: layout94 as configUi\"\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</ng-container>\n", styles: [":host{display:flex;width:100%;height:100%;border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);background-color:#fff}: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"] }]
+            args: [{ selector: 'bsu-barsa-cartable-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [FormPanelService], template: "<ng-container *ngIf=\"layout94$ | async as layout94\">\n    <div class=\"groups-wrapper\">\n        <bsu-layout-control\n            class=\"search-group\"\n            *ngIf=\"'\u062C\u0633\u062A\u062C\u0648 \u06AF\u0631\u0648\u0647' | controlUi: layout94 as configUi\"\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        <bsu-layout-control\n            class=\"cartable-groups\"\n            *ngIf=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94 as configUi\"\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    </div>\n    <bsu-layout-control\n        class=\"cartable-radif\"\n        *ngIf=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644' | controlUi: layout94 as configUi\"\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</ng-container>\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"] }]
         }], propDecorators: { _isSmallDevice: [{
                 type: HostBinding,
                 args: ['class.smallDevice']
@@ -11751,18 +11793,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
             }] } });
 
 class BarsaToolbaritemSearchComponent extends BaseFormToolbaritemPropsComponent {
+    constructor() {
+        super(...arguments);
+        this.searchMode = false;
+    }
     onClick(e) {
         PreventDefaulEvent(e);
     }
     onSearchSubmit($event) {
         executeUlvCommandHandler(this.context, { searchText: $event.text });
     }
+    onSearchModeChange() {
+        this.searchMode = !this.searchMode;
+        this._cdr.detectChanges();
+    }
 }
 BarsaToolbaritemSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaToolbaritemSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BarsaToolbaritemSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaToolbaritemSearchComponent, selector: "bsu-barsa-toolbaritem-search", host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<fdp-search-field\n    fd-toolbar-item\n    style=\"width: 220px\"\n    placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n    [suggestions]=\"[]\"\n    (searchSubmit)=\"onSearchSubmit($event)\"\n></fdp-search-field>\n", styles: [":host{display:contents;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7.SearchFieldComponent, selector: "fdp-search-field", inputs: ["placeholder", "mobile", "mobileConfig", "disableRefresh", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaToolbaritemSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaToolbaritemSearchComponent, selector: "bsu-barsa-toolbaritem-search", host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"searchTpl\"> </ng-container>\n<!-- <ng-container *ngTemplateOutlet=\"deviceSize !== 's' ? searchTpl : btnTpl\"> </ng-container> -->\n\n<ng-template #btnTpl>\n    <button fd-button glyph=\"search\" fdType=\"transparent\" (click)=\"onSearchModeChange()\"></button>\n    <div *ngIf=\"searchMode\" style=\"z-index: 1; position: absolute; left: 0; top: 0; bottom: 0; right: 0\">\n        <ng-container *ngTemplateOutlet=\"searchTpl\"></ng-container>\n    </div>\n</ng-template>\n<ng-template #searchTpl>\n    <!-- <button fd-button glyph=\"arrow-right\" fdType=\"transparent\"></button> -->\n    <!-- <fd-input-group placement=\"before\" glyph=\"arrow-right\" glyphAriaLabel=\"search\" placeholder=\"Search\">\n    </fd-input-group> -->\n\n    <fdp-search-field\n        fd-toolbar-item\n        [style.width]=\"deviceSize === 's' ? '100%' : '220px'\"\n        placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n        [suggestions]=\"[]\"\n        (searchSubmit)=\"onSearchSubmit($event)\"\n    ></fdp-search-field>\n</ng-template>\n", styles: [":host{display:contents;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7.SearchFieldComponent, selector: "fdp-search-field", inputs: ["placeholder", "mobile", "mobileConfig", "disableRefresh", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaToolbaritemSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-toolbaritem-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fdp-search-field\n    fd-toolbar-item\n    style=\"width: 220px\"\n    placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n    [suggestions]=\"[]\"\n    (searchSubmit)=\"onSearchSubmit($event)\"\n></fdp-search-field>\n", styles: [":host{display:contents;width:100%;height:100%}\n"] }]
+            args: [{ selector: 'bsu-barsa-toolbaritem-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngTemplateOutlet=\"searchTpl\"> </ng-container>\n<!-- <ng-container *ngTemplateOutlet=\"deviceSize !== 's' ? searchTpl : btnTpl\"> </ng-container> -->\n\n<ng-template #btnTpl>\n    <button fd-button glyph=\"search\" fdType=\"transparent\" (click)=\"onSearchModeChange()\"></button>\n    <div *ngIf=\"searchMode\" style=\"z-index: 1; position: absolute; left: 0; top: 0; bottom: 0; right: 0\">\n        <ng-container *ngTemplateOutlet=\"searchTpl\"></ng-container>\n    </div>\n</ng-template>\n<ng-template #searchTpl>\n    <!-- <button fd-button glyph=\"arrow-right\" fdType=\"transparent\"></button> -->\n    <!-- <fd-input-group placement=\"before\" glyph=\"arrow-right\" glyphAriaLabel=\"search\" placeholder=\"Search\">\n    </fd-input-group> -->\n\n    <fdp-search-field\n        fd-toolbar-item\n        [style.width]=\"deviceSize === 's' ? '100%' : '220px'\"\n        placeholder=\"\u0639\u0628\u0627\u0631\u062A \u062C\u0633\u062A\u062C\u0648\"\n        [suggestions]=\"[]\"\n        (searchSubmit)=\"onSearchSubmit($event)\"\n    ></fdp-search-field>\n</ng-template>\n", styles: [":host{display:contents;width:100%;height:100%}\n"] }]
         }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -11915,6 +11965,35 @@ class PayamClassType {
     }
 }
 
+class BarsaTextEllipsisComponent extends BaseComponent {
+    constructor(_el, _renderer2, _cdr) {
+        super();
+        this._el = _el;
+        this._renderer2 = _renderer2;
+        this._cdr = _cdr;
+        this.ellipsised = false;
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+    }
+    onEllapsised(val) {
+        this.ellipsised = val;
+        this._cdr.detectChanges();
+    }
+}
+BarsaTextEllipsisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTextEllipsisComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BarsaTextEllipsisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTextEllipsisComponent, selector: "bsu-barsa-text-ellipsis,[textEllipsis]", inputs: { text: "text", fontSize: "fontSize", deviceSize: "deviceSize" }, usesInheritance: true, ngImport: i0, template: "<div (ellapsised)=\"onEllapsised($event)\" ellapsisText [ellapsisText]=\"text | bbbTranslate\">\n    {{ text | bbbTranslate }}\n</div>\n<fd-popover *ngIf=\"ellipsised\">\n    <fd-popover-control>\n        <button style=\"position: absolute; left: 0\" fd-button glyph=\"overflow\" fdType=\"transparent\" fdCompact></button>\n    </fd-popover-control>\n    <fd-popover-body style=\"max-width: 320px\">\n        <fd-text [text]=\"text | bbbTranslate\" [whitespaces]=\"true\"></fd-text>\n    </fd-popover-body>\n</fd-popover>\n", styles: [":host{display:block;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize"], outputs: ["ellapsised"] }, { kind: "directive", type: i3$7.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTextEllipsisComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsu-barsa-text-ellipsis,[textEllipsis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div (ellapsised)=\"onEllapsised($event)\" ellapsisText [ellapsisText]=\"text | bbbTranslate\">\n    {{ text | bbbTranslate }}\n</div>\n<fd-popover *ngIf=\"ellipsised\">\n    <fd-popover-control>\n        <button style=\"position: absolute; left: 0\" fd-button glyph=\"overflow\" fdType=\"transparent\" fdCompact></button>\n    </fd-popover-control>\n    <fd-popover-body style=\"max-width: 320px\">\n        <fd-text [text]=\"text | bbbTranslate\" [whitespaces]=\"true\"></fd-text>\n    </fd-popover-body>\n</fd-popover>\n", styles: [":host{display:block;position:relative}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }] } });
+
 const components = [
     UiTextFieldComponent,
     LyLayoutFieldLabelComponent,
@@ -12073,7 +12152,8 @@ const components = [
     BarsaFieldKeyValueComponent,
     BarsaToolbaritemSearchComponent,
     UiHtmlViewerComponent,
-    BarsaPishnamayeshPayamComponent
+    BarsaPishnamayeshPayamComponent,
+    BarsaTextEllipsisComponent
 ];
 const pipes = [
     UploadFileStatusPipe,
@@ -12304,7 +12384,7 @@ class BarsaSapUiModule extends BaseModule {
     }
 }
 BarsaSapUiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaSapUiModule, deps: [{ token: i2.DynamicComponentService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.NgModule });
-BarsaSapUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: BarsaSapUiModule, declarations: [UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelToolbarComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, HeaderFacetKeyValueComponent, HeaderFacetFormComponent, HeaderFacetRateComponent, HeaderFacetProgressComponent, HeaderFacetMicrochartComponent, HeaderFacetPlainTextComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, PageWithHeaderComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ReportNavigatorComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, ExecutePushNotificationCommandComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective], imports: [CommonModule,
+BarsaSapUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: BarsaSapUiModule, declarations: [UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelToolbarComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, HeaderFacetKeyValueComponent, HeaderFacetFormComponent, HeaderFacetRateComponent, HeaderFacetProgressComponent, HeaderFacetMicrochartComponent, HeaderFacetPlainTextComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, PageWithHeaderComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ReportNavigatorComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, ExecutePushNotificationCommandComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, BarsaTextEllipsisComponent, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         BarsaNovinRayCoreModule,
@@ -12323,7 +12403,7 @@ BarsaSapUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         ClipboardModule,
         BarsaCalendarModule,
         BarsaSapUiRoutingModule,
-        PdfJsViewerModule, i1$1.ContentDensityModule], exports: [UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelToolbarComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, HeaderFacetKeyValueComponent, HeaderFacetFormComponent, HeaderFacetRateComponent, HeaderFacetProgressComponent, HeaderFacetMicrochartComponent, HeaderFacetPlainTextComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, PageWithHeaderComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ReportNavigatorComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, ExecutePushNotificationCommandComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe] });
+        PdfJsViewerModule, i1$1.ContentDensityModule], exports: [UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelToolbarComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, HeaderFacetKeyValueComponent, HeaderFacetFormComponent, HeaderFacetRateComponent, HeaderFacetProgressComponent, HeaderFacetMicrochartComponent, HeaderFacetPlainTextComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, PageWithHeaderComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ReportNavigatorComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, ExecutePushNotificationCommandComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, BarsaTextEllipsisComponent, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe] });
 BarsaSapUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaSapUiModule, providers: [{ provide: DIALOG_SERVICE, useClass: DialogService }], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -12390,5 +12470,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApplyConditionalFormatsDirective, BarsaAspViewerComponent, BarsaCartableFormComponent, BarsaCartableGroupComponent, BarsaCartableTemplateComponent, BarsaColumnIndicatorComponent, BarsaDateTimePickerComponent, BarsaFieldKeyValueComponent, BarsaListFileLinearComponent, BarsaMonacoEditorComponent, BarsaNetworkOfflineComponent, BarsaPishnamayeshPayamComponent, BarsaSapUiModule, BarsaSapUiRoutingModule, BarsaSearchFormComponent, BarsaTableColumnComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTinyemceComponent, BarsaToolbaritemSearchComponent, BarsaTreeItemComponent, BarsaUlvMainComponent, BlobViewerComponent, BreadcrumbComponent, CaptchaFieldComponent, CardItemComponent, CardViewContentComponent, ColRendererDirective, ColumnMatrixRendererComponent, ColumnRendererComponent, CustomDateTimeComponent, DeviceInfoFieldBaseComponent, DownloadFilesDirective, DynamicPageSizePipe, ExecutePushNotificationCommandComponent, FileInDialogComponent, FileViewerComponent, FileViewerContentComponent, FileViewerPopoverComponent, FormDialogComponent, FormDialogLessComponent, FormToolbarButtonComponent, FormWizardComponent, FullscreenDialogDirective, FullscreenFilesDirective, FundamentalDynamicFormComponent, GanttDhtmlChartViewComponent, GlobalSearchComponent, GlobalSearchModuleComponent, GlobalSearchPanelComponent, HeaderAvatarComponent, HeaderFacetFormComponent, HeaderFacetKeyValueComponent, HeaderFacetMicrochartComponent, HeaderFacetPlainTextComponent, HeaderFacetProgressComponent, HeaderFacetRateComponent, HtreeCreateNewComponent, HyperlinkComponent, IconBusinessSuite, IconTNT, InlineSaveAndCancelComponent, LayoutActionsComponent, LayoutControlComponent, LayoutWizardComponent, ListItemComponent, LyEmptySpaceComponent, LyHorizontalLayoutComponent, LyLabelComponent, LyLayoutContainerComponent, LyLayoutContainerOfRootComponent, LyLayoutFieldLabelComponent, LyLayoutPanelComponent, LyLineComponent, LySimpleLabelComponent, LyTabContainerComponent, LyTabPageComponent, LyVerticalLayoutComponent, ManageFiltersReportComponent, MaskComponent, MatrixValuePipe, MessageStripComponent, NoDataComponent, NodeHasOneDepthLevelPipe, NotificationItemComponent, PageWithHeaderComponent, ProgressIndicatorComponent, ReportNavigatorComponent, ReportNewTopFormComponent, ReportSearchFieldsHiddenSettingsComponent, ReportSearchFieldsManageComponent, ReportSearchPanelSaveComponent, ReportViewRendererDirective, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, RichTextStaticComponent, SapFontClassPipe, SapFontPipe, SapUiReportBaseComponent, SearchPanelComponent, StaticTextComponent, StringToArrayPipe, TitleComponent, UiAspReportViewerComponent, UiButtonComponent, UiCalendarComponent, UiCardViewComponent, UiCardViewHorizontalGroupComponent, UiCheckBoxComponent, UiColorUiComponent, UiContainerWithButtonComponent, UiDateRangeExComponent, UiDateTimeComponent, UiEditableGridComponent, UiExceptionFormComponent, UiFileLinearListBoxComponent, UiFormPanelComponent, UiFormPanelToolbarComponent, UiGanttChartComponent, UiGraphComponent, UiGridColumnsComponent, UiGridComponent, UiGridFilterItemComponent, UiGridFilterSettingsComponent, UiGridSortItemComponent, UiGridSortSettingComponent, UiHtmlViewerComponent, UiInfoBarPanelComponent, UiLabelComponent, UiLinearListContainerWithButtonComponent, UiListViewComponent, UiMatrixViewComponent, UiMoInfoComboViewerComponent, UiMoInfoGeneralObjectUiComponent, UiMoInfoSubFormUiComponent, UiMoInfoUlvComboComponent, UiMonacoEditorComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiPdfViewerComponent, UiPictureFileComponent, UiPicturesInfoComponent, UiRadioGroupComponent, UiReadOnlyFieldComponent, UiReportContainerComponent, UiSearchCommandInfoUiComponent, UiSimpleComboComponent, UiSinglePictureComponent, UiSwitchButtonComponent, UiTableViewComponent, UiTextAreaComponent, UiTextFieldAutoCompleteComponent, UiTextFieldComponent, UiTimeSpanComponent, UiTinymceComponent, UiTreeComponent, UiTreeViewComponent, UiUlvFormMultiSelectUiComponent, UiUlvMainUiComponent, UiWorkflowPanelUiComponent, UlLoadingMaskUiComponent, UlMsgBoxAdapterComponent, UlNotifyPopupComponent, UlToastAdapterComponent, UlvColumnSettingsComponent, UlvContextMenuComponent, UlvFilterSettingsComponent, UlvFormMultiSelectComponent, UlvGroupbySettingsComponent, UlvPagingComponent, UlvSelectionComponent, UlvSettingsComponent, UlvSortSettingsComponent, UlvToolbarComponent, UploadFileStatusPipe, WidthTypeEnum, WizardLayoutDirective, _trimEnd, getNestedValue, insertAvatar, sort$1 as sort };
+export { ApplyConditionalFormatsDirective, BarsaAspViewerComponent, BarsaCartableFormComponent, BarsaCartableGroupComponent, BarsaCartableTemplateComponent, BarsaColumnIndicatorComponent, BarsaDateTimePickerComponent, BarsaFieldKeyValueComponent, BarsaListFileLinearComponent, BarsaMonacoEditorComponent, BarsaNetworkOfflineComponent, BarsaPishnamayeshPayamComponent, BarsaSapUiModule, BarsaSapUiRoutingModule, BarsaSearchFormComponent, BarsaTableColumnComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTextEllipsisComponent, BarsaTinyemceComponent, BarsaToolbaritemSearchComponent, BarsaTreeItemComponent, BarsaUlvMainComponent, BlobViewerComponent, BreadcrumbComponent, CaptchaFieldComponent, CardItemComponent, CardViewContentComponent, ColRendererDirective, ColumnMatrixRendererComponent, ColumnRendererComponent, CustomDateTimeComponent, DeviceInfoFieldBaseComponent, DownloadFilesDirective, DynamicPageSizePipe, ExecutePushNotificationCommandComponent, FileInDialogComponent, FileViewerComponent, FileViewerContentComponent, FileViewerPopoverComponent, FormDialogComponent, FormDialogLessComponent, FormToolbarButtonComponent, FormWizardComponent, FullscreenDialogDirective, FullscreenFilesDirective, FundamentalDynamicFormComponent, GanttDhtmlChartViewComponent, GlobalSearchComponent, GlobalSearchModuleComponent, GlobalSearchPanelComponent, HeaderAvatarComponent, HeaderFacetFormComponent, HeaderFacetKeyValueComponent, HeaderFacetMicrochartComponent, HeaderFacetPlainTextComponent, HeaderFacetProgressComponent, HeaderFacetRateComponent, HtreeCreateNewComponent, HyperlinkComponent, IconBusinessSuite, IconTNT, InlineSaveAndCancelComponent, LayoutActionsComponent, LayoutControlComponent, LayoutWizardComponent, ListItemComponent, LyEmptySpaceComponent, LyHorizontalLayoutComponent, LyLabelComponent, LyLayoutContainerComponent, LyLayoutContainerOfRootComponent, LyLayoutFieldLabelComponent, LyLayoutPanelComponent, LyLineComponent, LySimpleLabelComponent, LyTabContainerComponent, LyTabPageComponent, LyVerticalLayoutComponent, ManageFiltersReportComponent, MaskComponent, MatrixValuePipe, MessageStripComponent, NoDataComponent, NodeHasOneDepthLevelPipe, NotificationItemComponent, PageWithHeaderComponent, ProgressIndicatorComponent, ReportNavigatorComponent, ReportNewTopFormComponent, ReportSearchFieldsHiddenSettingsComponent, ReportSearchFieldsManageComponent, ReportSearchPanelSaveComponent, ReportViewRendererDirective, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, RichTextStaticComponent, SapFontClassPipe, SapFontPipe, SapUiReportBaseComponent, SearchPanelComponent, StaticTextComponent, StringToArrayPipe, TitleComponent, UiAspReportViewerComponent, UiButtonComponent, UiCalendarComponent, UiCardViewComponent, UiCardViewHorizontalGroupComponent, UiCheckBoxComponent, UiColorUiComponent, UiContainerWithButtonComponent, UiDateRangeExComponent, UiDateTimeComponent, UiEditableGridComponent, UiExceptionFormComponent, UiFileLinearListBoxComponent, UiFormPanelComponent, UiFormPanelToolbarComponent, UiGanttChartComponent, UiGraphComponent, UiGridColumnsComponent, UiGridComponent, UiGridFilterItemComponent, UiGridFilterSettingsComponent, UiGridSortItemComponent, UiGridSortSettingComponent, UiHtmlViewerComponent, UiInfoBarPanelComponent, UiLabelComponent, UiLinearListContainerWithButtonComponent, UiListViewComponent, UiMatrixViewComponent, UiMoInfoComboViewerComponent, UiMoInfoGeneralObjectUiComponent, UiMoInfoSubFormUiComponent, UiMoInfoUlvComboComponent, UiMonacoEditorComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiPdfViewerComponent, UiPictureFileComponent, UiPicturesInfoComponent, UiRadioGroupComponent, UiReadOnlyFieldComponent, UiReportContainerComponent, UiSearchCommandInfoUiComponent, UiSimpleComboComponent, UiSinglePictureComponent, UiSwitchButtonComponent, UiTableViewComponent, UiTextAreaComponent, UiTextFieldAutoCompleteComponent, UiTextFieldComponent, UiTimeSpanComponent, UiTinymceComponent, UiTreeComponent, UiTreeViewComponent, UiUlvFormMultiSelectUiComponent, UiUlvMainUiComponent, UiWorkflowPanelUiComponent, UlLoadingMaskUiComponent, UlMsgBoxAdapterComponent, UlNotifyPopupComponent, UlToastAdapterComponent, UlvColumnSettingsComponent, UlvContextMenuComponent, UlvFilterSettingsComponent, UlvFormMultiSelectComponent, UlvGroupbySettingsComponent, UlvPagingComponent, UlvSelectionComponent, UlvSettingsComponent, UlvSortSettingsComponent, UlvToolbarComponent, UploadFileStatusPipe, WidthTypeEnum, WizardLayoutDirective, _trimEnd, getNestedValue, insertAvatar, sort$1 as sort };
 //# sourceMappingURL=barsa-sap-ui.mjs.map