barsa-sap-ui 2.3.125 → 2.3.129

package/fesm2022/barsa-sap-ui.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, Component, Input, Pipe, EventEmitter, inject, NgZone, Renderer2, ElementRef, Output, HostBinding, ViewChild, ViewEncapsulation, ChangeDetectorRef, ViewChildren, DOCUMENT, TemplateRef, HostListener, Directive, signal, ViewContainerRef, Injector, computed, ComponentFactoryResolver, NgModule, input, output, EnvironmentInjector, afterNextRender, runInInjectionContext, Injectable, provideAppInitializer, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from 'barsa-novin-ray-core';
-import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, BbbTranslatePipe, LayoutService, measureText, getLabelWidth, SortDirection, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, BaseSettingsService, FormPanelService, LayoutMainContentService, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, FieldBaseComponent, PortalService, getDateService as getDateService$1, DateService, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, DynamicDarkColorPipe, EllipsifyDirective, createGridEditorFormPanel, TabpageService, LocalStorageService, CalendarSettingsService, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, PictureFieldSourcePipe, RotateImage, isImage, getIcon, GetViewableExtensions, UploadService, LayoutPanelBaseComponent, UlvMainService, BaseColumnPropsComponent, ColumnService, BaseViewContentPropsComponent, CardViewService, enumValueToStringSize, PreventDefaulEvent, setTableThWidth, TableHeaderWidthMode, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, calculateColumnWidth, calculateColumnContent, calculateColumnWidthFitToContainer, calculateFreeColumnSize, UlvHeightSizeType, NotificationService, DateRanges, LogService, BreadcrumbService, isFirefox, IsDarkMode, isFunction, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, FormBaseComponent, getFieldValue, ContainerComponent, DialogParams, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, FormPropsBaseComponent, UiService, measureText2, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, NetworkStatusService, isInLocalMode, executeUlvCommandHandler, FillAllLayoutControls, ApplicationCtrlrService, DeviceWidth, FORM_DIALOG_COMPONENT, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule, ResizableModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
+import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, BbbTranslatePipe, LayoutService, measureText, getLabelWidth, SortDirection, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, BaseSettingsService, FormPanelService, LayoutMainContentService, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, FieldBaseComponent, PortalService, getDateService as getDateService$1, DateService, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, DynamicDarkColorPipe, EllipsifyDirective, createGridEditorFormPanel, TabpageService, LocalStorageService, CalendarSettingsService, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, PictureFieldSourcePipe, RotateImage, isImage, getIcon, GetViewableExtensions, UploadService, LayoutPanelBaseComponent, UlvMainService, BaseColumnPropsComponent, ColumnService, BaseViewContentPropsComponent, CardViewService, enumValueToStringSize, PreventDefaulEvent, setTableThWidth, TableHeaderWidthMode, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, calculateColumnWidth, calculateColumnContent, calculateColumnWidthFitToContainer, calculateFreeColumnSize, UlvHeightSizeType, NotificationService, DateRanges, LogService, BreadcrumbService, isFirefox, IsDarkMode, isFunction, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, FormBaseComponent, getFieldValue, ContainerComponent, DialogParams, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, FormPropsBaseComponent, UiService, measureText2, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, NetworkStatusService, isInLocalMode, executeUlvCommandHandler, FillAllLayoutControls, ApplicationCtrlrService, ReportNavigatorComponent, DeviceWidth, FORM_DIALOG_COMPONENT, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule, ResizableModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
 import moment from 'moment';
 import jmoment from 'moment-jalaali';
 import { combineLatest, of, BehaviorSubject, Subject, takeUntil as takeUntil$1, debounceTime as debounceTime$1, from, concatMap, delay, tap as tap$1, Observable, fromEvent, first as first$1, skip, map as map$1 } from 'rxjs';
 import { tap, filter, map, distinctUntilChanged, debounceTime, take, takeUntil, throttleTime, withLatestFrom, exhaustMap, finalize, first, switchMap, delay as delay$1, concatMap as concatMap$1, catchError } from 'rxjs/operators';
 import { Overlay } from '@angular/cdk/overlay';
-import * as i239 from '@fundamental-ngx/core';
+import * as i240 from '@fundamental-ngx/core';
 import { DialogRef, ContentDensityService, DialogService, TableComponent, ToolbarComponent, PopoverComponent, GlobalContentDensityService, RadioButtonComponent, DynamicPageComponent, FileUploaderComponent, MultiInputComponent, MessageStripAlertService, TabPanelComponent, WizardComponent, WizardStepComponent, ComboboxComponent, InlineHelpDirective, SliderComponent, ContentDensityMode, ThemingService as ThemingService$1, RtlService, NotificationService as NotificationService$1, NotificationRef as NotificationRef$1, MessageToastService, FundamentalNgxCoreModule, SideNavigationModule, FacetModule, WizardModule, RatingStarLabelPipe, ListGroupPipe, DateTimeFormatPipe, DateFromNowPipe, DateFormatPipe, AvatarIconPipe, ContentDensityModule } from '@fundamental-ngx/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i2$1 from '@fundamental-ngx/core/form';
@@ -800,11 +800,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 class LyLabelComponent extends LayoutItemBaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyLabelComponent, isStandalone: false, selector: "bsu-ly-label", inputs: { originalWidth: "originalWidth", minWidth: "minWidth", translateCaption: "translateCaption", caption: "caption", captionIcon: "captionIcon", helpDescription: "helpDescription", isColumn: "isColumn", isMandatory: "isMandatory", fieldIcon: "fieldIcon", originalXtype: "originalXtype", textVisible: "textVisible" }, usesInheritance: true, ngImport: i0, template: "@if (config.FontIcon) {\r\n<fd-icon\r\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\r\n    [font]=\"config.FontIcon | sapFont\"\r\n    [glyph]=\"config.FontIcon\"\r\n></fd-icon>\r\n} @if(helpDescription){\r\n<fd-icon glyph=\"question-mark\" [fd-inline-help]=\"templateRef\" tabindex=\"0\"></fd-icon>\r\n} @if (textVisible && fieldIcon) {\r\n<img [attrRtl] [src]=\"fieldIcon\" height=\"16px\" width=\"16px\" />\r\n} @if (textVisible) {\r\n<label\r\n    fd-form-label\r\n    [defaultClass]=\"false\"\r\n    class=\"bsu-label-control\"\r\n    [attr.required]=\"isMandatory ? true : null\"\r\n    [attr.title]=\"translateCaption\"\r\n    [attr.column-mode]=\"isColumn\"\r\n    [attrRtl]=\"true\"\r\n    [innerHTML]=\"originalXtype === 'Ui.Button' ? '&zwnj;' : caption\"\r\n    [style.background-color]=\"config.CaptionAppearance?.BColor ? config.CaptionAppearance?.BColor : null\"\r\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\r\n>\r\n</label>\r\n}\r\n<ng-template #templateRef>\r\n    <div [style.display]=\"'flex'\" [style.align-items]=\"'center'\" [innerHtml]=\"helpDescription | sanitizeText\"></div>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative;align-items:center}:host ::ng-deep .field-mandatory{color:var(--sapField_RequiredColor);font-weight:700;font-size:var(--sapFontLargeSize)}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}label{padding:0!important;text-align:var(--_text_align)}label[columnMode=true] label[rtl=true]{text-align:right}label[columnMode=true] label[rtl=false]{text-align:left}\n"], dependencies: [{ kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i4.InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: SapFontPipe, name: "sapFont" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyLabelComponent, isStandalone: false, selector: "bsu-ly-label", inputs: { originalWidth: "originalWidth", minWidth: "minWidth", translateCaption: "translateCaption", caption: "caption", captionIcon: "captionIcon", helpDescription: "helpDescription", isColumn: "isColumn", isMandatory: "isMandatory", fieldIcon: "fieldIcon", originalXtype: "originalXtype", textVisible: "textVisible" }, usesInheritance: true, ngImport: i0, template: "@if (config.FontIcon) {\r\n<fd-icon\r\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\r\n    [font]=\"config.FontIcon | sapFont\"\r\n    [glyph]=\"config.FontIcon\"\r\n></fd-icon>\r\n} @if(helpDescription){\r\n<fd-icon glyph=\"question-mark\" [fd-inline-help]=\"templateRef\" tabindex=\"0\"></fd-icon>\r\n} @if (textVisible && fieldIcon) {\r\n<img [attrRtl] [src]=\"fieldIcon\" height=\"16px\" width=\"16px\" loading=\"lazy\"/>\r\n} @if (textVisible) {\r\n<label\r\n    fd-form-label\r\n    [defaultClass]=\"false\"\r\n    class=\"bsu-label-control\"\r\n    [attr.required]=\"isMandatory ? true : null\"\r\n    [attr.title]=\"translateCaption\"\r\n    [attr.column-mode]=\"isColumn\"\r\n    [attrRtl]=\"true\"\r\n    [innerHTML]=\"originalXtype === 'Ui.Button' ? '&zwnj;' : caption\"\r\n    [style.background-color]=\"config.CaptionAppearance?.BColor ? config.CaptionAppearance?.BColor : null\"\r\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\r\n>\r\n</label>\r\n}\r\n<ng-template #templateRef>\r\n    <div [style.display]=\"'flex'\" [style.align-items]=\"'center'\" [innerHtml]=\"helpDescription | sanitizeText\"></div>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative;align-items:center}:host ::ng-deep .field-mandatory{color:var(--sapField_RequiredColor);font-weight:700;font-size:var(--sapFontLargeSize)}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}label{padding:0!important;text-align:var(--_text_align)}label[columnMode=true] label[rtl=true]{text-align:right}label[columnMode=true] label[rtl=false]{text-align:left}\n"], dependencies: [{ kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: i4.InlineHelpDirective, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help"] }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: SapFontPipe, name: "sapFont" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (config.FontIcon) {\r\n<fd-icon\r\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\r\n    [font]=\"config.FontIcon | sapFont\"\r\n    [glyph]=\"config.FontIcon\"\r\n></fd-icon>\r\n} @if(helpDescription){\r\n<fd-icon glyph=\"question-mark\" [fd-inline-help]=\"templateRef\" tabindex=\"0\"></fd-icon>\r\n} @if (textVisible && fieldIcon) {\r\n<img [attrRtl] [src]=\"fieldIcon\" height=\"16px\" width=\"16px\" />\r\n} @if (textVisible) {\r\n<label\r\n    fd-form-label\r\n    [defaultClass]=\"false\"\r\n    class=\"bsu-label-control\"\r\n    [attr.required]=\"isMandatory ? true : null\"\r\n    [attr.title]=\"translateCaption\"\r\n    [attr.column-mode]=\"isColumn\"\r\n    [attrRtl]=\"true\"\r\n    [innerHTML]=\"originalXtype === 'Ui.Button' ? '&zwnj;' : caption\"\r\n    [style.background-color]=\"config.CaptionAppearance?.BColor ? config.CaptionAppearance?.BColor : null\"\r\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\r\n>\r\n</label>\r\n}\r\n<ng-template #templateRef>\r\n    <div [style.display]=\"'flex'\" [style.align-items]=\"'center'\" [innerHtml]=\"helpDescription | sanitizeText\"></div>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative;align-items:center}:host ::ng-deep .field-mandatory{color:var(--sapField_RequiredColor);font-weight:700;font-size:var(--sapFontLargeSize)}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}label{padding:0!important;text-align:var(--_text_align)}label[columnMode=true] label[rtl=true]{text-align:right}label[columnMode=true] label[rtl=false]{text-align:left}\n"] }]
+            args: [{ selector: 'bsu-ly-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (config.FontIcon) {\r\n<fd-icon\r\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\r\n    [font]=\"config.FontIcon | sapFont\"\r\n    [glyph]=\"config.FontIcon\"\r\n></fd-icon>\r\n} @if(helpDescription){\r\n<fd-icon glyph=\"question-mark\" [fd-inline-help]=\"templateRef\" tabindex=\"0\"></fd-icon>\r\n} @if (textVisible && fieldIcon) {\r\n<img [attrRtl] [src]=\"fieldIcon\" height=\"16px\" width=\"16px\" loading=\"lazy\"/>\r\n} @if (textVisible) {\r\n<label\r\n    fd-form-label\r\n    [defaultClass]=\"false\"\r\n    class=\"bsu-label-control\"\r\n    [attr.required]=\"isMandatory ? true : null\"\r\n    [attr.title]=\"translateCaption\"\r\n    [attr.column-mode]=\"isColumn\"\r\n    [attrRtl]=\"true\"\r\n    [innerHTML]=\"originalXtype === 'Ui.Button' ? '&zwnj;' : caption\"\r\n    [style.background-color]=\"config.CaptionAppearance?.BColor ? config.CaptionAppearance?.BColor : null\"\r\n    [style.color]=\"config.CaptionAppearance?.FColor ? config.CaptionAppearance?.FColor : null\"\r\n>\r\n</label>\r\n}\r\n<ng-template #templateRef>\r\n    <div [style.display]=\"'flex'\" [style.align-items]=\"'center'\" [innerHtml]=\"helpDescription | sanitizeText\"></div>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative;align-items:center}:host ::ng-deep .field-mandatory{color:var(--sapField_RequiredColor);font-weight:700;font-size:var(--sapFontLargeSize)}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}label{padding:0!important;text-align:var(--_text_align)}label[columnMode=true] label[rtl=true]{text-align:right}label[columnMode=true] label[rtl=false]{text-align:left}\n"] }]
         }], propDecorators: { originalWidth: [{
                 type: Input
             }], minWidth: [{
@@ -1301,11 +1301,11 @@ class UiGridColumnsComponent extends BaseComponent {
         return column.Name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiGridColumnsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiGridColumnsComponent, isStandalone: false, selector: "bsu-ui-grid-columns", inputs: { columns: "columns", selectedColumns: "selectedColumns" }, outputs: { columnsChange: "columnsChange" }, usesInheritance: true, ngImport: i0, template: "<h6>{{ 'Select All (' + selectedColumns + '/' + columns.length + ')' }}</h6>\r\n<ul\r\n    fd-list\r\n    [selection]=\"true\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"vertical\"\r\n    (cdkDropListDropped)=\"onDropColumn(columns, $event)\"\r\n>\r\n    @for (column of columns; track trackByMethod($index, column)) {\r\n    <li cdkDrag fd-list-item [selected]=\"!column.Hidden\" (click)=\"onChangeColumnHidden(column)\">\r\n        <fd-checkbox [ngModel]=\"!column.Hidden\"></fd-checkbox>\r\n        <span fd-list-title>\r\n            {{ column.Caption }}\r\n            @if (column.IsMandatory) {\r\n            <strong>*</strong>\r\n            }\r\n        </span>\r\n    </li>\r\n    }\r\n</ul>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}.inputIcon{background:#fafafa;color:#0a6ed1;cursor:pointer;max-width:400px;min-width:200px}.inputIcon:hover{background:#e0e0e080}strong{color:#ce3b3b}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiGridColumnsComponent, isStandalone: false, selector: "bsu-ui-grid-columns", inputs: { columns: "columns", selectedColumns: "selectedColumns" }, outputs: { columnsChange: "columnsChange" }, usesInheritance: true, ngImport: i0, template: "<h6>{{ 'Select All (' + selectedColumns + '/' + columns.length + ')' }}</h6>\r\n<ul\r\n    fd-list\r\n    [selection]=\"true\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"vertical\"\r\n    (cdkDropListDropped)=\"onDropColumn(columns, $event)\"\r\n>\r\n    @for (column of columns; track trackByMethod($index, column)) {\r\n    <li cdkDrag fd-list-item [selected]=\"!column.Hidden\" (click)=\"onChangeColumnHidden(column)\">\r\n        <fd-checkbox [ngModel]=\"!column.Hidden\"></fd-checkbox>\r\n        <span fd-list-title>\r\n            {{ column.Caption }}\r\n            @if (column.IsMandatory) {\r\n            <strong>*</strong>\r\n            }\r\n        </span>\r\n        <fd-icon cdkDragHandle glyph=\"horizontal-grip\" class=\"tw-cursor-move\"></fd-icon>\r\n    </li>\r\n    }\r\n</ul>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}.inputIcon{background:#fafafa;color:#0a6ed1;cursor:pointer;max-width:400px;min-width:200px}.inputIcon:hover{background:#e0e0e080}strong{color:#ce3b3b}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiGridColumnsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-grid-columns', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<h6>{{ 'Select All (' + selectedColumns + '/' + columns.length + ')' }}</h6>\r\n<ul\r\n    fd-list\r\n    [selection]=\"true\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"vertical\"\r\n    (cdkDropListDropped)=\"onDropColumn(columns, $event)\"\r\n>\r\n    @for (column of columns; track trackByMethod($index, column)) {\r\n    <li cdkDrag fd-list-item [selected]=\"!column.Hidden\" (click)=\"onChangeColumnHidden(column)\">\r\n        <fd-checkbox [ngModel]=\"!column.Hidden\"></fd-checkbox>\r\n        <span fd-list-title>\r\n            {{ column.Caption }}\r\n            @if (column.IsMandatory) {\r\n            <strong>*</strong>\r\n            }\r\n        </span>\r\n    </li>\r\n    }\r\n</ul>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}.inputIcon{background:#fafafa;color:#0a6ed1;cursor:pointer;max-width:400px;min-width:200px}.inputIcon:hover{background:#e0e0e080}strong{color:#ce3b3b}\n"] }]
+            args: [{ selector: 'bsu-ui-grid-columns', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<h6>{{ 'Select All (' + selectedColumns + '/' + columns.length + ')' }}</h6>\r\n<ul\r\n    fd-list\r\n    [selection]=\"true\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"vertical\"\r\n    (cdkDropListDropped)=\"onDropColumn(columns, $event)\"\r\n>\r\n    @for (column of columns; track trackByMethod($index, column)) {\r\n    <li cdkDrag fd-list-item [selected]=\"!column.Hidden\" (click)=\"onChangeColumnHidden(column)\">\r\n        <fd-checkbox [ngModel]=\"!column.Hidden\"></fd-checkbox>\r\n        <span fd-list-title>\r\n            {{ column.Caption }}\r\n            @if (column.IsMandatory) {\r\n            <strong>*</strong>\r\n            }\r\n        </span>\r\n        <fd-icon cdkDragHandle glyph=\"horizontal-grip\" class=\"tw-cursor-move\"></fd-icon>\r\n    </li>\r\n    }\r\n</ul>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}.inputIcon{background:#fafafa;color:#0a6ed1;cursor:pointer;max-width:400px;min-width:200px}.inputIcon:hover{background:#e0e0e080}strong{color:#ce3b3b}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], columnsChange: [{
@@ -3419,11 +3419,11 @@ class UlvContextMenuComponent extends BaseComponent {
         this._popoverCmp.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UlvContextMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UlvContextMenuComponent, isStandalone: false, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: { onlyOverflow: "onlyOverflow", rightClickEnable: "rightClickEnable", closeOnOutsideClick: "closeOnOutsideClick", deviceName: "deviceName", menuItems: "menuItems", allColumns: "allColumns", index: "index", mo: "mo", styleIndex: "styleIndex", conditionalFormats: "conditionalFormats", disableOverflowContextMenu: "disableOverflowContextMenu", footerMode: "footerMode", contextMenuOverflowText: "contextMenuOverflowText", appendTo: "appendTo" }, outputs: { commandClick: "commandClick" }, host: { properties: { "class.disableOverflow": "this._disableOverflow" } }, viewQueries: [{ propertyName: "_popoverCmp", first: true, predicate: PopoverComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (footerMode) {\r\n<div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\r\n    <div fd-bar-right>\r\n        <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\r\n    </div>\r\n    <ng-template #footerToolbarTpl>\r\n        <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\" [shouldOverflow]=\"true\">\r\n            @for (cmd of menuItems; track cmd) {\r\n            <span fd-toolbar-item>\r\n                <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n            </span>\r\n            }\r\n        </fd-toolbar>\r\n    </ng-template>\r\n</div>\r\n} @else if(rightClickEnable){\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        overflowCommands;\r\n        context: { $implicit: menuItems, index: index, hideBtn: true, appendTo: appendTo, showText: true }\r\n    \"\r\n></ng-container>\r\n}@else{\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\r\n        context: { $implicit: menuItems, index: index }\r\n    \"\r\n></ng-container>\r\n}\r\n\r\n<ng-template #simpleCommands let-commands let-index=\"index\">\r\n    @for (cmd of commands; track cmd) {\r\n    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template\r\n    #overflowCommands\r\n    let-commands\r\n    let-index=\"index\"\r\n    let-hideBtn=\"hideBtn\"\r\n    let-appendTo=\"appendTo\"\r\n    let-showText=\"showText\"\r\n>\r\n    <fd-popover\r\n        placement=\"bottom\"\r\n        [(isOpen)]=\"isOpenOverflow\"\r\n        [closeOnOutsideClick]=\"closeOnOutsideClick === false ? false : true\"\r\n        [noArrow]=\"true\"\r\n        [appendTo]=\"appendTo\"\r\n        [focusAutoCapture]=\"true\"\r\n        [focusTrapped]=\"true\"\r\n    >\r\n        <fd-popover-control #popover>\r\n            @if(!hideBtn){\r\n            <button\r\n                fd-button\r\n                (click)=\"onOpenOverflow($event)\"\r\n                [fdType]=\"'transparent'\"\r\n                [glyph]=\"!contextMenuOverflowText ? 'overflow' : null\"\r\n                [title]=\"contextMenuOverflowText\"\r\n                [label]=\"contextMenuOverflowText\"\r\n            ></button>\r\n            }\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <ul fd-list class=\"ulv-overflow-buttons\">\r\n                @for (cmd of commands; track cmd) {\r\n                <li fd-list-item>\r\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n\r\n<ng-template #menuButtonTemplate let-cmd>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd, showLabel: true }\"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #menuTemplate let-cmd>\r\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\r\n        <fd-menu>\r\n            @for (btnCommand of cmd.menu.items; track btnCommand) {\r\n            <li\r\n                fd-menu-item\r\n                #liEl\r\n                [applyConditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [dbName]=\"cmd.text\"\r\n                [hostEl]=\"liEl\"\r\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\r\n            >\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n</ng-template>\r\n<ng-template #buttonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\r\n            context: { $implicit: cmd, showLabel: showLabel }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #defaultButtonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <button\r\n        fd-button\r\n        #btnEl\r\n        class=\"!tw-border-none\"\r\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\r\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\r\n        [ulvCommandHandler]=\"cmd\"\r\n        [label]=\"cmd.Command?.NewIcon && cmd.Command?.JsonExtraProp?.Icon ? (cmd.text | bbbTranslate) : ''\"\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [styleIndex]=\"styleIndex\"\r\n        [dbName]=\"cmd.text\"\r\n        [hostEl]=\"btnEl\"\r\n        [disabled]=\"cmd.Command?._isEnable === false\"\r\n        (commandClick)=\"onCommandClick($event)\"\r\n    >\r\n        <!-- \u0686\u0648\u0646 \u0639\u06A9\u0633 \u062F\u0631 \u0633\u0645\u062A \u0631\u0627\u0633\u062A \u0642\u0631\u0627\u0631 \u0628\u06AF\u06CC\u0631\u062F \u0627\u0632 \u0644\u06CC\u0628\u0644 \u062F\u06A9\u0645\u0647 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0646\u06A9\u0631\u062F\u0645 -->\r\n        @if (!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon) {\r\n        <img [src]=\"cmd.icon\" />\r\n        }\r\n        <span *ngIf=\"true || !(cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon)\">{{\r\n            cmd.text | bbbTranslate\r\n        }}</span>\r\n    </button>\r\n</ng-template>\r\n<ng-template #customButtonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <div\r\n        #hostEl\r\n        [dbName]=\"cmd.text\"\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [hostEl]=\"hostEl\"\r\n        [styleIndex]=\"styleIndex\"\r\n    >\r\n        <bnrc-dynamic-form-toolbaritem\r\n            fd-toolbar-item\r\n            [ulvCommandHandler]=\"cmd\"\r\n            [component]=\"cmd.Command?.CustomUi\"\r\n            [mo]=\"mo\"\r\n            [context]=\"cmd\"\r\n            [showText]=\"showLabel || disableOverflowContextMenu === false\"\r\n            [deviceName]=\"deviceName\"\r\n            [index]=\"index\"\r\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\r\n            [allColumns]=\"allColumns\"\r\n            (btnClick)=\"onCommandClick($event)\"\r\n        ></bnrc-dynamic-form-toolbaritem>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center}: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.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", "disable"], outputs: ["commandClick"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i8.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UlvContextMenuComponent, isStandalone: false, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: { onlyOverflow: "onlyOverflow", rightClickEnable: "rightClickEnable", closeOnOutsideClick: "closeOnOutsideClick", deviceName: "deviceName", menuItems: "menuItems", allColumns: "allColumns", index: "index", mo: "mo", styleIndex: "styleIndex", conditionalFormats: "conditionalFormats", disableOverflowContextMenu: "disableOverflowContextMenu", footerMode: "footerMode", contextMenuOverflowText: "contextMenuOverflowText", appendTo: "appendTo" }, outputs: { commandClick: "commandClick" }, host: { properties: { "class.disableOverflow": "this._disableOverflow" } }, viewQueries: [{ propertyName: "_popoverCmp", first: true, predicate: PopoverComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (footerMode) {\r\n<div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\r\n    <div fd-bar-right>\r\n        <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\r\n    </div>\r\n    <ng-template #footerToolbarTpl>\r\n        <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\" [shouldOverflow]=\"true\">\r\n            @for (cmd of menuItems; track cmd) {\r\n            <span fd-toolbar-item>\r\n                <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n            </span>\r\n            }\r\n        </fd-toolbar>\r\n    </ng-template>\r\n</div>\r\n} @else if(rightClickEnable){\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        overflowCommands;\r\n        context: { $implicit: menuItems, index: index, hideBtn: true, appendTo: appendTo, showText: true }\r\n    \"\r\n></ng-container>\r\n}@else{\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\r\n        context: { $implicit: menuItems, index: index }\r\n    \"\r\n></ng-container>\r\n}\r\n\r\n<ng-template #simpleCommands let-commands let-index=\"index\">\r\n    @for (cmd of commands; track cmd) {\r\n    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template\r\n    #overflowCommands\r\n    let-commands\r\n    let-index=\"index\"\r\n    let-hideBtn=\"hideBtn\"\r\n    let-appendTo=\"appendTo\"\r\n    let-showText=\"showText\"\r\n>\r\n    <fd-popover\r\n        placement=\"bottom\"\r\n        [(isOpen)]=\"isOpenOverflow\"\r\n        [closeOnOutsideClick]=\"closeOnOutsideClick === false ? false : true\"\r\n        [noArrow]=\"true\"\r\n        [appendTo]=\"appendTo\"\r\n        [focusAutoCapture]=\"true\"\r\n        [focusTrapped]=\"true\"\r\n    >\r\n        <fd-popover-control #popover>\r\n            @if(!hideBtn){\r\n            <button\r\n                fd-button\r\n                (click)=\"onOpenOverflow($event)\"\r\n                [fdType]=\"'transparent'\"\r\n                [glyph]=\"!contextMenuOverflowText ? 'overflow' : null\"\r\n                [title]=\"contextMenuOverflowText\"\r\n                [label]=\"contextMenuOverflowText\"\r\n            ></button>\r\n            }\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <ul fd-list class=\"ulv-overflow-buttons\">\r\n                @for (cmd of commands; track cmd) {\r\n                <li fd-list-item>\r\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n\r\n<ng-template #menuButtonTemplate let-cmd>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd, showLabel: true }\"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #menuTemplate let-cmd>\r\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\r\n        <fd-menu>\r\n            @for (btnCommand of cmd.menu.items; track btnCommand) {\r\n            <li\r\n                fd-menu-item\r\n                #liEl\r\n                [applyConditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [dbName]=\"cmd.text\"\r\n                [hostEl]=\"liEl\"\r\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\r\n            >\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n</ng-template>\r\n<ng-template #buttonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\r\n            context: { $implicit: cmd, showLabel: showLabel }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #defaultButtonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <button\r\n        fd-button\r\n        #btnEl\r\n        class=\"!tw-border-none\"\r\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\r\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\r\n        [ulvCommandHandler]=\"cmd\"\r\n        [label]=\"cmd.Command?.NewIcon && cmd.Command?.JsonExtraProp?.Icon ? (cmd.text | bbbTranslate) : ''\"\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [styleIndex]=\"styleIndex\"\r\n        [dbName]=\"cmd.text\"\r\n        [hostEl]=\"btnEl\"\r\n        [disabled]=\"cmd.Command?._isEnable === false\"\r\n        (commandClick)=\"onCommandClick($event)\"\r\n    >\r\n        <!-- \u0686\u0648\u0646 \u0639\u06A9\u0633 \u062F\u0631 \u0633\u0645\u062A \u0631\u0627\u0633\u062A \u0642\u0631\u0627\u0631 \u0628\u06AF\u06CC\u0631\u062F \u0627\u0632 \u0644\u06CC\u0628\u0644 \u062F\u06A9\u0645\u0647 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0646\u06A9\u0631\u062F\u0645 -->\r\n        @if (!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon) {\r\n        <img [src]=\"cmd.icon\" loading=\"lazy\"/>\r\n        }\r\n        <span *ngIf=\"true || !(cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon)\">{{\r\n            cmd.text | bbbTranslate\r\n        }}</span>\r\n    </button>\r\n</ng-template>\r\n<ng-template #customButtonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <div\r\n        #hostEl\r\n        [dbName]=\"cmd.text\"\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [hostEl]=\"hostEl\"\r\n        [styleIndex]=\"styleIndex\"\r\n    >\r\n        <bnrc-dynamic-form-toolbaritem\r\n            fd-toolbar-item\r\n            [ulvCommandHandler]=\"cmd\"\r\n            [component]=\"cmd.Command?.CustomUi\"\r\n            [mo]=\"mo\"\r\n            [context]=\"cmd\"\r\n            [showText]=\"showLabel || disableOverflowContextMenu === false\"\r\n            [deviceName]=\"deviceName\"\r\n            [index]=\"index\"\r\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\r\n            [allColumns]=\"allColumns\"\r\n            (btnClick)=\"onCommandClick($event)\"\r\n        ></bnrc-dynamic-form-toolbaritem>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center}: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.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", "disable"], outputs: ["commandClick"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i8.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { 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: "20.0.6", ngImport: i0, type: UlvContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ulv-context-menu,[ulvContextMenu]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (footerMode) {\r\n<div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\r\n    <div fd-bar-right>\r\n        <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\r\n    </div>\r\n    <ng-template #footerToolbarTpl>\r\n        <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\" [shouldOverflow]=\"true\">\r\n            @for (cmd of menuItems; track cmd) {\r\n            <span fd-toolbar-item>\r\n                <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n            </span>\r\n            }\r\n        </fd-toolbar>\r\n    </ng-template>\r\n</div>\r\n} @else if(rightClickEnable){\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        overflowCommands;\r\n        context: { $implicit: menuItems, index: index, hideBtn: true, appendTo: appendTo, showText: true }\r\n    \"\r\n></ng-container>\r\n}@else{\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\r\n        context: { $implicit: menuItems, index: index }\r\n    \"\r\n></ng-container>\r\n}\r\n\r\n<ng-template #simpleCommands let-commands let-index=\"index\">\r\n    @for (cmd of commands; track cmd) {\r\n    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template\r\n    #overflowCommands\r\n    let-commands\r\n    let-index=\"index\"\r\n    let-hideBtn=\"hideBtn\"\r\n    let-appendTo=\"appendTo\"\r\n    let-showText=\"showText\"\r\n>\r\n    <fd-popover\r\n        placement=\"bottom\"\r\n        [(isOpen)]=\"isOpenOverflow\"\r\n        [closeOnOutsideClick]=\"closeOnOutsideClick === false ? false : true\"\r\n        [noArrow]=\"true\"\r\n        [appendTo]=\"appendTo\"\r\n        [focusAutoCapture]=\"true\"\r\n        [focusTrapped]=\"true\"\r\n    >\r\n        <fd-popover-control #popover>\r\n            @if(!hideBtn){\r\n            <button\r\n                fd-button\r\n                (click)=\"onOpenOverflow($event)\"\r\n                [fdType]=\"'transparent'\"\r\n                [glyph]=\"!contextMenuOverflowText ? 'overflow' : null\"\r\n                [title]=\"contextMenuOverflowText\"\r\n                [label]=\"contextMenuOverflowText\"\r\n            ></button>\r\n            }\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <ul fd-list class=\"ulv-overflow-buttons\">\r\n                @for (cmd of commands; track cmd) {\r\n                <li fd-list-item>\r\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n\r\n<ng-template #menuButtonTemplate let-cmd>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd, showLabel: true }\"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #menuTemplate let-cmd>\r\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\r\n        <fd-menu>\r\n            @for (btnCommand of cmd.menu.items; track btnCommand) {\r\n            <li\r\n                fd-menu-item\r\n                #liEl\r\n                [applyConditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [dbName]=\"cmd.text\"\r\n                [hostEl]=\"liEl\"\r\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\r\n            >\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n</ng-template>\r\n<ng-template #buttonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\r\n            context: { $implicit: cmd, showLabel: showLabel }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #defaultButtonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <button\r\n        fd-button\r\n        #btnEl\r\n        class=\"!tw-border-none\"\r\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\r\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\r\n        [ulvCommandHandler]=\"cmd\"\r\n        [label]=\"cmd.Command?.NewIcon && cmd.Command?.JsonExtraProp?.Icon ? (cmd.text | bbbTranslate) : ''\"\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [styleIndex]=\"styleIndex\"\r\n        [dbName]=\"cmd.text\"\r\n        [hostEl]=\"btnEl\"\r\n        [disabled]=\"cmd.Command?._isEnable === false\"\r\n        (commandClick)=\"onCommandClick($event)\"\r\n    >\r\n        <!-- \u0686\u0648\u0646 \u0639\u06A9\u0633 \u062F\u0631 \u0633\u0645\u062A \u0631\u0627\u0633\u062A \u0642\u0631\u0627\u0631 \u0628\u06AF\u06CC\u0631\u062F \u0627\u0632 \u0644\u06CC\u0628\u0644 \u062F\u06A9\u0645\u0647 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0646\u06A9\u0631\u062F\u0645 -->\r\n        @if (!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon) {\r\n        <img [src]=\"cmd.icon\" />\r\n        }\r\n        <span *ngIf=\"true || !(cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon)\">{{\r\n            cmd.text | bbbTranslate\r\n        }}</span>\r\n    </button>\r\n</ng-template>\r\n<ng-template #customButtonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <div\r\n        #hostEl\r\n        [dbName]=\"cmd.text\"\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [hostEl]=\"hostEl\"\r\n        [styleIndex]=\"styleIndex\"\r\n    >\r\n        <bnrc-dynamic-form-toolbaritem\r\n            fd-toolbar-item\r\n            [ulvCommandHandler]=\"cmd\"\r\n            [component]=\"cmd.Command?.CustomUi\"\r\n            [mo]=\"mo\"\r\n            [context]=\"cmd\"\r\n            [showText]=\"showLabel || disableOverflowContextMenu === false\"\r\n            [deviceName]=\"deviceName\"\r\n            [index]=\"index\"\r\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\r\n            [allColumns]=\"allColumns\"\r\n            (btnClick)=\"onCommandClick($event)\"\r\n        ></bnrc-dynamic-form-toolbaritem>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center}: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, standalone: false, template: "@if (footerMode) {\r\n<div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\r\n    <div fd-bar-right>\r\n        <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\r\n    </div>\r\n    <ng-template #footerToolbarTpl>\r\n        <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\" [shouldOverflow]=\"true\">\r\n            @for (cmd of menuItems; track cmd) {\r\n            <span fd-toolbar-item>\r\n                <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n            </span>\r\n            }\r\n        </fd-toolbar>\r\n    </ng-template>\r\n</div>\r\n} @else if(rightClickEnable){\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        overflowCommands;\r\n        context: { $implicit: menuItems, index: index, hideBtn: true, appendTo: appendTo, showText: true }\r\n    \"\r\n></ng-container>\r\n}@else{\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\r\n        context: { $implicit: menuItems, index: index }\r\n    \"\r\n></ng-container>\r\n}\r\n\r\n<ng-template #simpleCommands let-commands let-index=\"index\">\r\n    @for (cmd of commands; track cmd) {\r\n    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template\r\n    #overflowCommands\r\n    let-commands\r\n    let-index=\"index\"\r\n    let-hideBtn=\"hideBtn\"\r\n    let-appendTo=\"appendTo\"\r\n    let-showText=\"showText\"\r\n>\r\n    <fd-popover\r\n        placement=\"bottom\"\r\n        [(isOpen)]=\"isOpenOverflow\"\r\n        [closeOnOutsideClick]=\"closeOnOutsideClick === false ? false : true\"\r\n        [noArrow]=\"true\"\r\n        [appendTo]=\"appendTo\"\r\n        [focusAutoCapture]=\"true\"\r\n        [focusTrapped]=\"true\"\r\n    >\r\n        <fd-popover-control #popover>\r\n            @if(!hideBtn){\r\n            <button\r\n                fd-button\r\n                (click)=\"onOpenOverflow($event)\"\r\n                [fdType]=\"'transparent'\"\r\n                [glyph]=\"!contextMenuOverflowText ? 'overflow' : null\"\r\n                [title]=\"contextMenuOverflowText\"\r\n                [label]=\"contextMenuOverflowText\"\r\n            ></button>\r\n            }\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <ul fd-list class=\"ulv-overflow-buttons\">\r\n                @for (cmd of commands; track cmd) {\r\n                <li fd-list-item>\r\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n\r\n<ng-template #menuButtonTemplate let-cmd>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd, showLabel: true }\"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #menuTemplate let-cmd>\r\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\r\n        <fd-menu>\r\n            @for (btnCommand of cmd.menu.items; track btnCommand) {\r\n            <li\r\n                fd-menu-item\r\n                #liEl\r\n                [applyConditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [dbName]=\"cmd.text\"\r\n                [hostEl]=\"liEl\"\r\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\r\n            >\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n</ng-template>\r\n<ng-template #buttonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\r\n            context: { $implicit: cmd, showLabel: showLabel }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #defaultButtonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <button\r\n        fd-button\r\n        #btnEl\r\n        class=\"!tw-border-none\"\r\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\r\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\r\n        [ulvCommandHandler]=\"cmd\"\r\n        [label]=\"cmd.Command?.NewIcon && cmd.Command?.JsonExtraProp?.Icon ? (cmd.text | bbbTranslate) : ''\"\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [styleIndex]=\"styleIndex\"\r\n        [dbName]=\"cmd.text\"\r\n        [hostEl]=\"btnEl\"\r\n        [disabled]=\"cmd.Command?._isEnable === false\"\r\n        (commandClick)=\"onCommandClick($event)\"\r\n    >\r\n        <!-- \u0686\u0648\u0646 \u0639\u06A9\u0633 \u062F\u0631 \u0633\u0645\u062A \u0631\u0627\u0633\u062A \u0642\u0631\u0627\u0631 \u0628\u06AF\u06CC\u0631\u062F \u0627\u0632 \u0644\u06CC\u0628\u0644 \u062F\u06A9\u0645\u0647 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0646\u06A9\u0631\u062F\u0645 -->\r\n        @if (!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon) {\r\n        <img [src]=\"cmd.icon\" loading=\"lazy\"/>\r\n        }\r\n        <span *ngIf=\"true || !(cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon)\">{{\r\n            cmd.text | bbbTranslate\r\n        }}</span>\r\n    </button>\r\n</ng-template>\r\n<ng-template #customButtonTemplate let-cmd let-showLabel=\"showLabel\">\r\n    <div\r\n        #hostEl\r\n        [dbName]=\"cmd.text\"\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [hostEl]=\"hostEl\"\r\n        [styleIndex]=\"styleIndex\"\r\n    >\r\n        <bnrc-dynamic-form-toolbaritem\r\n            fd-toolbar-item\r\n            [ulvCommandHandler]=\"cmd\"\r\n            [component]=\"cmd.Command?.CustomUi\"\r\n            [mo]=\"mo\"\r\n            [context]=\"cmd\"\r\n            [showText]=\"showLabel || disableOverflowContextMenu === false\"\r\n            [deviceName]=\"deviceName\"\r\n            [index]=\"index\"\r\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\r\n            [allColumns]=\"allColumns\"\r\n            (btnClick)=\"onCommandClick($event)\"\r\n        ></bnrc-dynamic-form-toolbaritem>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center}: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"] }]
         }], propDecorators: { _popoverCmp: [{
                 type: ViewChild,
                 args: [PopoverComponent]
@@ -4133,11 +4133,11 @@ class BarsaTreeItemComponent extends BaseViewItemPropsComponent {
         this.dragMoved.emit($event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTreeItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaTreeItemComponent, isStandalone: false, selector: "bsu-barsa-tree-item", inputs: { node: "node", selectedNode: "selectedNode", relationList: "relationList", hideOpenIcon: "hideOpenIcon", hasArrowIcon: "hasArrowIcon", collapseIcon: "collapseIcon", loading: "loading", hasChildren: "hasChildren", leafCursorPointer: "leafCursorPointer", isExpand: "isExpand", children: "children", parentNode: "parentNode", text: "text", icon: "icon", color: "color", isHetro: "isHetro", enableNodeReordering: "enableNodeReordering", hideIcon: "hideIcon" }, outputs: { createNew: "createNew", select: "select", checkChange: "checkChange", viewClick: "viewClick", loadChildren: "loadChildren", dragMoved: "dragMoved" }, usesInheritance: true, ngImport: i0, template: "<li\r\n    fd-list-item\r\n    #liEl\r\n    [class.!tw-cursor-pointer]=\"leafCursorPointer\"\r\n    [applyConditionalFormats]=\"conditionalFormats\"\r\n    [styleIndex]=\"styleIndex\"\r\n    [hostEl]=\"liEl\"\r\n    [focusable]=\"true\"\r\n    [attr.level]=\"level\"\r\n    [class.root-group]=\"level === 1\"\r\n    [interactive]=\"true\"\r\n    [selected]=\"isChecked\"\r\n    (dblclick)=\"onNodeViewClick()\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!enableNodeReordering\"\r\n    [cdkDragData]=\"node.Data.Id\"\r\n    [class.isdirty]=\"isdirty\"\r\n    (cdkDragMoved)=\"onDragMoved($event)\"\r\n    (click)=\"openOnClick ? onNodeViewClick() : onListItemClick(liEl, $event)\"\r\n>\r\n    <div (click)=\"onRowCheck()\" class=\"spacer\" [style.width]=\"(level - 1) * 4 + 'rem'\"></div>\r\n    @if (enableNodeReordering && !isHetro) {\r\n    <fd-icon glyph=\"grip\" font=\"BusinessSuiteInAppSymbols\" cdkDragHandle></fd-icon>\r\n    } @if (inDialog && isMultiSelect) {\r\n    <fd-checkbox [name]=\"node.Data.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onCheckbox($event)\"></fd-checkbox>\r\n    }\r\n\r\n    <div (click)=\"onRowCheck()\" style=\"display: flex; width: 100%; justify-content: space-between\">\r\n        <div style=\"display: flex; flex: 1; gap: 3px\">\r\n            @if (hasArrowIcon) { @if (hasChildren) {\r\n            <div class=\"arrow-container\">\r\n                <button\r\n                    [attr.rtl]=\"rtl\"\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    class=\"arrow-children\"\r\n                    [fdCompact]\r\n                    [glyph]=\"hasChildren ? (isExpand ? 'slim-arrow-down' : collapseIcon) : ''\"\r\n                    (click)=\"onLoadChildren($event)\"\r\n                    (dblclick)=\"onExpandDblClick($event)\"\r\n                ></button>\r\n            </div>\r\n            } @else { @if (!parentNode?.hasOneDepthLevel) {\r\n            <div class=\"empty-container\" (click)=\"onRowCheck()\">\r\n                <button fd-button></button>\r\n            </div>\r\n            } } @if (loading) {\r\n            <fd-busy-indicator\r\n                style=\"display: flex; align-items: center; width: 2rem\"\r\n                size=\"s\"\r\n                [loading]=\"true\"\r\n            ></fd-busy-indicator>\r\n            } @if(!hideIcon || appComponentIcon){ @if(icon || appComponentIcon){\r\n            <i\r\n                [style.color]=\"appComponentIconColor || color\"\r\n                class=\"icon-item\"\r\n                fd-list-icon\r\n                [glyph]=\"appComponentIcon || icon\"\r\n            ></i>\r\n            }@else {\r\n            <i fd-list-icon class=\"icon-item\" style=\"display: flex; align-items: center; justify-content: center\">\r\n                <img [src]=\"node.icon\" width=\"16px\" />\r\n            </i>\r\n            } } }\r\n            <div\r\n                style=\"display: flex; flex: unset; align-items: center\"\r\n                fd-list-title\r\n                [focusable]=\"true\"\r\n                #divEl\r\n                [style.color]=\"styleIndex ? 'inherit' : color\"\r\n                intersectionObserver\r\n                [intersectionThreshold]=\"0.1\"\r\n                (visibilityChange)=\"onVisibilityChange(divEl, spanEl, $event)\"\r\n            >\r\n                <span\r\n                    class=\"ellapsis\"\r\n                    #spanEl\r\n                    [style.color]=\"styleIndex ? 'inherit' : color\"\r\n                    [class.haschildren]=\"hasChildren\"\r\n                    >{{ text }}</span\r\n                >\r\n                @if (children) {\r\n                <span>{{ ' ( ' + children.length + ' )' }}</span>\r\n                }\r\n            </div>\r\n        </div>\r\n        @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <i\r\n            ulvContextMenu\r\n            [allColumns]=\"allColumns\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"node.Data\"\r\n            [index]=\"index\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n            [deviceName]=\"deviceName\"\r\n        ></i>\r\n        } @if (access?.Add !== false && !inDialog) {\r\n        <bsu-htree-create-new\r\n            [node]=\"node\"\r\n            [relationList]=\"relationList\"\r\n            (createNew)=\"onCreateNew($event)\"\r\n        ></bsu-htree-create-new>\r\n        }\r\n    </div>\r\n    @if (access?.View && !showOkCancelButtons && deviceName !== 'desktop' && !hideOpenIcon) {\r\n    <button fd-button [glyph]=\"navigationArrow\" fdType=\"transparent\" (click)=\"onNodeViewClick()\"></button>\r\n    } @if (actionList?.length && !inlineEditMode) {\r\n    <bsu-barsa-row-inline-actionlist\r\n        [actionList]=\"actionList\"\r\n        (btnClick)=\"actionListClick.emit($event)\"\r\n    ></bsu-barsa-row-inline-actionlist>\r\n    }\r\n\r\n    <bsu-barsa-tree-item\r\n        *cdkDragPreview\r\n        [node]=\"node\"\r\n        [rtl]=\"rtl\"\r\n        [selectedNode]=\"selectedNode\"\r\n        [hasArrowIcon]=\"false\"\r\n    ></bsu-barsa-tree-item>\r\n</li>\r\n", styles: [":host{display:contents}li.isdirty{background:url(/Lib/ui/resources/images/default/grid/dirty.gif);background-repeat:no-repeat}li .cdk-drag-handle{opacity:.5;cursor:move}li .spacer{height:100%}li .arrow-children{border:none!important;background:transparent!important;color:var(--sapButton_Lite_TextColor)!important}li .arrow-container,li .empty-container{display:flex;width:28px;align-items:center;justify-content:center}li .arrow-container fd-icon,li .empty-container fd-icon{cursor:pointer;width:100%;height:100%;text-align:center}li .empty-container{visibility:hidden!important}.cdk-drag{cursor:default}.tree-icon-children{cursor:pointer}.icon-item{width:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i4$3.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: i5$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTreeItemComponent, selector: "bsu-barsa-tree-item", inputs: ["node", "selectedNode", "relationList", "hideOpenIcon", "hasArrowIcon", "collapseIcon", "loading", "hasChildren", "leafCursorPointer", "isExpand", "children", "parentNode", "text", "icon", "color", "isHetro", "enableNodeReordering", "hideIcon"], outputs: ["createNew", "select", "checkChange", "viewClick", "loadChildren", "dragMoved"] }, { kind: "component", type: HtreeCreateNewComponent, selector: "bsu-htree-create-new", inputs: ["relationList", "node"], outputs: ["createNew"] }, { kind: "component", type: BarsaRowInlineActionlistComponent, selector: "bsu-barsa-row-inline-actionlist", inputs: ["actionList", "mo", "index"], outputs: ["btnClick"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaTreeItemComponent, isStandalone: false, selector: "bsu-barsa-tree-item", inputs: { node: "node", selectedNode: "selectedNode", relationList: "relationList", hideOpenIcon: "hideOpenIcon", hasArrowIcon: "hasArrowIcon", collapseIcon: "collapseIcon", loading: "loading", hasChildren: "hasChildren", leafCursorPointer: "leafCursorPointer", isExpand: "isExpand", children: "children", parentNode: "parentNode", text: "text", icon: "icon", color: "color", isHetro: "isHetro", enableNodeReordering: "enableNodeReordering", hideIcon: "hideIcon" }, outputs: { createNew: "createNew", select: "select", checkChange: "checkChange", viewClick: "viewClick", loadChildren: "loadChildren", dragMoved: "dragMoved" }, usesInheritance: true, ngImport: i0, template: "<li\r\n    fd-list-item\r\n    #liEl\r\n    [class.!tw-cursor-pointer]=\"leafCursorPointer\"\r\n    [applyConditionalFormats]=\"conditionalFormats\"\r\n    [styleIndex]=\"styleIndex\"\r\n    [hostEl]=\"liEl\"\r\n    [focusable]=\"true\"\r\n    [attr.level]=\"level\"\r\n    [class.root-group]=\"level === 1\"\r\n    [interactive]=\"true\"\r\n    [selected]=\"isChecked\"\r\n    (dblclick)=\"onNodeViewClick()\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!enableNodeReordering\"\r\n    [cdkDragData]=\"node.Data.Id\"\r\n    [class.isdirty]=\"isdirty\"\r\n    (cdkDragMoved)=\"onDragMoved($event)\"\r\n    (click)=\"openOnClick ? onNodeViewClick() : onListItemClick(liEl, $event)\"\r\n>\r\n    <div\r\n        (click)=\"onRowCheck()\"\r\n        class=\"spacer\"\r\n        [style.padding-right]=\"!rtl ? null : (level - 1) * 4 + 'rem'\"\r\n        [style.padding-left]=\"rtl ? null : (level - 1) * 4 + 'rem'\"\r\n    ></div>\r\n    @if (enableNodeReordering && !isHetro) {\r\n    <fd-icon glyph=\"grip\" font=\"BusinessSuiteInAppSymbols\" cdkDragHandle></fd-icon>\r\n    } @if (inDialog && isMultiSelect) {\r\n    <fd-checkbox [name]=\"node.Data.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onCheckbox($event)\"></fd-checkbox>\r\n    }\r\n\r\n    <div (click)=\"onRowCheck()\" style=\"display: flex; width: 100%; justify-content: space-between;background-color:inherit\">\r\n        <div style=\"display: flex; flex: 1; gap: 3px\">\r\n            @if (hasArrowIcon) { @if (hasChildren) {\r\n            <div class=\"arrow-container\">\r\n                <button\r\n                    [attr.rtl]=\"rtl\"\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    class=\"arrow-children\"\r\n                    [fdCompact]\r\n                    [glyph]=\"hasChildren ? (isExpand ? 'slim-arrow-down' : collapseIcon) : ''\"\r\n                    (click)=\"onLoadChildren($event)\"\r\n                    (dblclick)=\"onExpandDblClick($event)\"\r\n                ></button>\r\n            </div>\r\n            } @else { @if (!parentNode?.hasOneDepthLevel) {\r\n            <div class=\"empty-container\" (click)=\"onRowCheck()\">\r\n                <button fd-button></button>\r\n            </div>\r\n            } } @if (loading) {\r\n            <fd-busy-indicator\r\n                style=\"display: flex; align-items: center; width: 2rem\"\r\n                size=\"s\"\r\n                [loading]=\"true\"\r\n            ></fd-busy-indicator>\r\n            } @if(!hideIcon || appComponentIcon){ @if(icon || appComponentIcon){\r\n            <i\r\n                [style.color]=\"appComponentIconColor || color\"\r\n                class=\"icon-item\"\r\n                fd-list-icon\r\n                [glyph]=\"appComponentIcon || icon\"\r\n            ></i>\r\n            }@else {\r\n            <i fd-list-icon class=\"icon-item\" style=\"display: flex; align-items: center; justify-content: center\">\r\n                <img [src]=\"node.icon\" width=\"16px\" loading=\"lazy\"/>\r\n            </i>\r\n            } } }\r\n            <div\r\n                style=\"display: flex; flex: unset; align-items: center\"\r\n                fd-list-title\r\n                [focusable]=\"true\"\r\n                #divEl\r\n                [style.color]=\"styleIndex ? 'inherit' : color\"\r\n                intersectionObserver\r\n                [intersectionThreshold]=\"0.1\"\r\n                (visibilityChange)=\"onVisibilityChange(divEl, spanEl, $event)\"\r\n            >\r\n                <span\r\n                    class=\"ellapsis\"\r\n                    #spanEl\r\n                    [style.color]=\"styleIndex ? 'inherit' : color\"\r\n                    [class.haschildren]=\"hasChildren\"\r\n                    >{{ text }}</span\r\n                >\r\n                @if (children) {\r\n                <span>{{ ' ( ' + children.length + ' )' }}</span>\r\n                }\r\n            </div>\r\n        </div>\r\n        @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <i\r\n            ulvContextMenu\r\n            [allColumns]=\"allColumns\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"node.Data\"\r\n            [index]=\"index\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n            [deviceName]=\"deviceName\"\r\n        ></i>\r\n        } @if (access?.Add !== false && !inDialog) {\r\n        <bsu-htree-create-new\r\n            [node]=\"node\"\r\n            [relationList]=\"relationList\"\r\n            (createNew)=\"onCreateNew($event)\"\r\n        ></bsu-htree-create-new>\r\n        }\r\n    </div>\r\n    @if (!actionList?.length && access?.View && !showOkCancelButtons && deviceName !== 'desktop' && !hideOpenIcon) {\r\n    <button fd-button [glyph]=\"navigationArrow\" fdType=\"transparent\" (click)=\"onNodeViewClick()\"></button>\r\n    } @if (actionList?.length && !inlineEditMode) {\r\n    <bsu-barsa-row-inline-actionlist\r\n        [actionList]=\"actionList\"\r\n        (btnClick)=\"actionListClick.emit($event)\"\r\n    ></bsu-barsa-row-inline-actionlist>\r\n    }\r\n\r\n    <bsu-barsa-tree-item\r\n        *cdkDragPreview\r\n        [node]=\"node\"\r\n        [rtl]=\"rtl\"\r\n        [selectedNode]=\"selectedNode\"\r\n        [hasArrowIcon]=\"false\"\r\n    ></bsu-barsa-tree-item>\r\n</li>\r\n", styles: [":host{display:contents}li.isdirty{background:url(/Lib/ui/resources/images/default/grid/dirty.gif);background-repeat:no-repeat}li .cdk-drag-handle{opacity:.5;cursor:move}li .spacer{height:100%}li .arrow-children{border:none!important;background:transparent!important;color:var(--sapButton_Lite_TextColor)!important}li .arrow-container,li .empty-container{display:flex;width:28px;align-items:center;justify-content:center}li .arrow-container fd-icon,li .empty-container fd-icon{cursor:pointer;width:100%;height:100%;text-align:center}li .empty-container{visibility:hidden!important}.cdk-drag{cursor:default}.tree-icon-children{cursor:pointer}.icon-item{width:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i4$3.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: i5$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTreeItemComponent, selector: "bsu-barsa-tree-item", inputs: ["node", "selectedNode", "relationList", "hideOpenIcon", "hasArrowIcon", "collapseIcon", "loading", "hasChildren", "leafCursorPointer", "isExpand", "children", "parentNode", "text", "icon", "color", "isHetro", "enableNodeReordering", "hideIcon"], outputs: ["createNew", "select", "checkChange", "viewClick", "loadChildren", "dragMoved"] }, { kind: "component", type: HtreeCreateNewComponent, selector: "bsu-htree-create-new", inputs: ["relationList", "node"], outputs: ["createNew"] }, { kind: "component", type: BarsaRowInlineActionlistComponent, selector: "bsu-barsa-row-inline-actionlist", inputs: ["actionList", "mo", "index"], outputs: ["btnClick"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTreeItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-tree-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<li\r\n    fd-list-item\r\n    #liEl\r\n    [class.!tw-cursor-pointer]=\"leafCursorPointer\"\r\n    [applyConditionalFormats]=\"conditionalFormats\"\r\n    [styleIndex]=\"styleIndex\"\r\n    [hostEl]=\"liEl\"\r\n    [focusable]=\"true\"\r\n    [attr.level]=\"level\"\r\n    [class.root-group]=\"level === 1\"\r\n    [interactive]=\"true\"\r\n    [selected]=\"isChecked\"\r\n    (dblclick)=\"onNodeViewClick()\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!enableNodeReordering\"\r\n    [cdkDragData]=\"node.Data.Id\"\r\n    [class.isdirty]=\"isdirty\"\r\n    (cdkDragMoved)=\"onDragMoved($event)\"\r\n    (click)=\"openOnClick ? onNodeViewClick() : onListItemClick(liEl, $event)\"\r\n>\r\n    <div (click)=\"onRowCheck()\" class=\"spacer\" [style.width]=\"(level - 1) * 4 + 'rem'\"></div>\r\n    @if (enableNodeReordering && !isHetro) {\r\n    <fd-icon glyph=\"grip\" font=\"BusinessSuiteInAppSymbols\" cdkDragHandle></fd-icon>\r\n    } @if (inDialog && isMultiSelect) {\r\n    <fd-checkbox [name]=\"node.Data.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onCheckbox($event)\"></fd-checkbox>\r\n    }\r\n\r\n    <div (click)=\"onRowCheck()\" style=\"display: flex; width: 100%; justify-content: space-between\">\r\n        <div style=\"display: flex; flex: 1; gap: 3px\">\r\n            @if (hasArrowIcon) { @if (hasChildren) {\r\n            <div class=\"arrow-container\">\r\n                <button\r\n                    [attr.rtl]=\"rtl\"\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    class=\"arrow-children\"\r\n                    [fdCompact]\r\n                    [glyph]=\"hasChildren ? (isExpand ? 'slim-arrow-down' : collapseIcon) : ''\"\r\n                    (click)=\"onLoadChildren($event)\"\r\n                    (dblclick)=\"onExpandDblClick($event)\"\r\n                ></button>\r\n            </div>\r\n            } @else { @if (!parentNode?.hasOneDepthLevel) {\r\n            <div class=\"empty-container\" (click)=\"onRowCheck()\">\r\n                <button fd-button></button>\r\n            </div>\r\n            } } @if (loading) {\r\n            <fd-busy-indicator\r\n                style=\"display: flex; align-items: center; width: 2rem\"\r\n                size=\"s\"\r\n                [loading]=\"true\"\r\n            ></fd-busy-indicator>\r\n            } @if(!hideIcon || appComponentIcon){ @if(icon || appComponentIcon){\r\n            <i\r\n                [style.color]=\"appComponentIconColor || color\"\r\n                class=\"icon-item\"\r\n                fd-list-icon\r\n                [glyph]=\"appComponentIcon || icon\"\r\n            ></i>\r\n            }@else {\r\n            <i fd-list-icon class=\"icon-item\" style=\"display: flex; align-items: center; justify-content: center\">\r\n                <img [src]=\"node.icon\" width=\"16px\" />\r\n            </i>\r\n            } } }\r\n            <div\r\n                style=\"display: flex; flex: unset; align-items: center\"\r\n                fd-list-title\r\n                [focusable]=\"true\"\r\n                #divEl\r\n                [style.color]=\"styleIndex ? 'inherit' : color\"\r\n                intersectionObserver\r\n                [intersectionThreshold]=\"0.1\"\r\n                (visibilityChange)=\"onVisibilityChange(divEl, spanEl, $event)\"\r\n            >\r\n                <span\r\n                    class=\"ellapsis\"\r\n                    #spanEl\r\n                    [style.color]=\"styleIndex ? 'inherit' : color\"\r\n                    [class.haschildren]=\"hasChildren\"\r\n                    >{{ text }}</span\r\n                >\r\n                @if (children) {\r\n                <span>{{ ' ( ' + children.length + ' )' }}</span>\r\n                }\r\n            </div>\r\n        </div>\r\n        @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <i\r\n            ulvContextMenu\r\n            [allColumns]=\"allColumns\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"node.Data\"\r\n            [index]=\"index\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n            [deviceName]=\"deviceName\"\r\n        ></i>\r\n        } @if (access?.Add !== false && !inDialog) {\r\n        <bsu-htree-create-new\r\n            [node]=\"node\"\r\n            [relationList]=\"relationList\"\r\n            (createNew)=\"onCreateNew($event)\"\r\n        ></bsu-htree-create-new>\r\n        }\r\n    </div>\r\n    @if (access?.View && !showOkCancelButtons && deviceName !== 'desktop' && !hideOpenIcon) {\r\n    <button fd-button [glyph]=\"navigationArrow\" fdType=\"transparent\" (click)=\"onNodeViewClick()\"></button>\r\n    } @if (actionList?.length && !inlineEditMode) {\r\n    <bsu-barsa-row-inline-actionlist\r\n        [actionList]=\"actionList\"\r\n        (btnClick)=\"actionListClick.emit($event)\"\r\n    ></bsu-barsa-row-inline-actionlist>\r\n    }\r\n\r\n    <bsu-barsa-tree-item\r\n        *cdkDragPreview\r\n        [node]=\"node\"\r\n        [rtl]=\"rtl\"\r\n        [selectedNode]=\"selectedNode\"\r\n        [hasArrowIcon]=\"false\"\r\n    ></bsu-barsa-tree-item>\r\n</li>\r\n", styles: [":host{display:contents}li.isdirty{background:url(/Lib/ui/resources/images/default/grid/dirty.gif);background-repeat:no-repeat}li .cdk-drag-handle{opacity:.5;cursor:move}li .spacer{height:100%}li .arrow-children{border:none!important;background:transparent!important;color:var(--sapButton_Lite_TextColor)!important}li .arrow-container,li .empty-container{display:flex;width:28px;align-items:center;justify-content:center}li .arrow-container fd-icon,li .empty-container fd-icon{cursor:pointer;width:100%;height:100%;text-align:center}li .empty-container{visibility:hidden!important}.cdk-drag{cursor:default}.tree-icon-children{cursor:pointer}.icon-item{width:1rem}\n"] }]
+            args: [{ selector: 'bsu-barsa-tree-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<li\r\n    fd-list-item\r\n    #liEl\r\n    [class.!tw-cursor-pointer]=\"leafCursorPointer\"\r\n    [applyConditionalFormats]=\"conditionalFormats\"\r\n    [styleIndex]=\"styleIndex\"\r\n    [hostEl]=\"liEl\"\r\n    [focusable]=\"true\"\r\n    [attr.level]=\"level\"\r\n    [class.root-group]=\"level === 1\"\r\n    [interactive]=\"true\"\r\n    [selected]=\"isChecked\"\r\n    (dblclick)=\"onNodeViewClick()\"\r\n    cdkDrag\r\n    [cdkDragDisabled]=\"!enableNodeReordering\"\r\n    [cdkDragData]=\"node.Data.Id\"\r\n    [class.isdirty]=\"isdirty\"\r\n    (cdkDragMoved)=\"onDragMoved($event)\"\r\n    (click)=\"openOnClick ? onNodeViewClick() : onListItemClick(liEl, $event)\"\r\n>\r\n    <div\r\n        (click)=\"onRowCheck()\"\r\n        class=\"spacer\"\r\n        [style.padding-right]=\"!rtl ? null : (level - 1) * 4 + 'rem'\"\r\n        [style.padding-left]=\"rtl ? null : (level - 1) * 4 + 'rem'\"\r\n    ></div>\r\n    @if (enableNodeReordering && !isHetro) {\r\n    <fd-icon glyph=\"grip\" font=\"BusinessSuiteInAppSymbols\" cdkDragHandle></fd-icon>\r\n    } @if (inDialog && isMultiSelect) {\r\n    <fd-checkbox [name]=\"node.Data.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onCheckbox($event)\"></fd-checkbox>\r\n    }\r\n\r\n    <div (click)=\"onRowCheck()\" style=\"display: flex; width: 100%; justify-content: space-between;background-color:inherit\">\r\n        <div style=\"display: flex; flex: 1; gap: 3px\">\r\n            @if (hasArrowIcon) { @if (hasChildren) {\r\n            <div class=\"arrow-container\">\r\n                <button\r\n                    [attr.rtl]=\"rtl\"\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    class=\"arrow-children\"\r\n                    [fdCompact]\r\n                    [glyph]=\"hasChildren ? (isExpand ? 'slim-arrow-down' : collapseIcon) : ''\"\r\n                    (click)=\"onLoadChildren($event)\"\r\n                    (dblclick)=\"onExpandDblClick($event)\"\r\n                ></button>\r\n            </div>\r\n            } @else { @if (!parentNode?.hasOneDepthLevel) {\r\n            <div class=\"empty-container\" (click)=\"onRowCheck()\">\r\n                <button fd-button></button>\r\n            </div>\r\n            } } @if (loading) {\r\n            <fd-busy-indicator\r\n                style=\"display: flex; align-items: center; width: 2rem\"\r\n                size=\"s\"\r\n                [loading]=\"true\"\r\n            ></fd-busy-indicator>\r\n            } @if(!hideIcon || appComponentIcon){ @if(icon || appComponentIcon){\r\n            <i\r\n                [style.color]=\"appComponentIconColor || color\"\r\n                class=\"icon-item\"\r\n                fd-list-icon\r\n                [glyph]=\"appComponentIcon || icon\"\r\n            ></i>\r\n            }@else {\r\n            <i fd-list-icon class=\"icon-item\" style=\"display: flex; align-items: center; justify-content: center\">\r\n                <img [src]=\"node.icon\" width=\"16px\" loading=\"lazy\"/>\r\n            </i>\r\n            } } }\r\n            <div\r\n                style=\"display: flex; flex: unset; align-items: center\"\r\n                fd-list-title\r\n                [focusable]=\"true\"\r\n                #divEl\r\n                [style.color]=\"styleIndex ? 'inherit' : color\"\r\n                intersectionObserver\r\n                [intersectionThreshold]=\"0.1\"\r\n                (visibilityChange)=\"onVisibilityChange(divEl, spanEl, $event)\"\r\n            >\r\n                <span\r\n                    class=\"ellapsis\"\r\n                    #spanEl\r\n                    [style.color]=\"styleIndex ? 'inherit' : color\"\r\n                    [class.haschildren]=\"hasChildren\"\r\n                    >{{ text }}</span\r\n                >\r\n                @if (children) {\r\n                <span>{{ ' ( ' + children.length + ' )' }}</span>\r\n                }\r\n            </div>\r\n        </div>\r\n        @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <i\r\n            ulvContextMenu\r\n            [allColumns]=\"allColumns\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"node.Data\"\r\n            [index]=\"index\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n            [deviceName]=\"deviceName\"\r\n        ></i>\r\n        } @if (access?.Add !== false && !inDialog) {\r\n        <bsu-htree-create-new\r\n            [node]=\"node\"\r\n            [relationList]=\"relationList\"\r\n            (createNew)=\"onCreateNew($event)\"\r\n        ></bsu-htree-create-new>\r\n        }\r\n    </div>\r\n    @if (!actionList?.length && access?.View && !showOkCancelButtons && deviceName !== 'desktop' && !hideOpenIcon) {\r\n    <button fd-button [glyph]=\"navigationArrow\" fdType=\"transparent\" (click)=\"onNodeViewClick()\"></button>\r\n    } @if (actionList?.length && !inlineEditMode) {\r\n    <bsu-barsa-row-inline-actionlist\r\n        [actionList]=\"actionList\"\r\n        (btnClick)=\"actionListClick.emit($event)\"\r\n    ></bsu-barsa-row-inline-actionlist>\r\n    }\r\n\r\n    <bsu-barsa-tree-item\r\n        *cdkDragPreview\r\n        [node]=\"node\"\r\n        [rtl]=\"rtl\"\r\n        [selectedNode]=\"selectedNode\"\r\n        [hasArrowIcon]=\"false\"\r\n    ></bsu-barsa-tree-item>\r\n</li>\r\n", styles: [":host{display:contents}li.isdirty{background:url(/Lib/ui/resources/images/default/grid/dirty.gif);background-repeat:no-repeat}li .cdk-drag-handle{opacity:.5;cursor:move}li .spacer{height:100%}li .arrow-children{border:none!important;background:transparent!important;color:var(--sapButton_Lite_TextColor)!important}li .arrow-container,li .empty-container{display:flex;width:28px;align-items:center;justify-content:center}li .arrow-container fd-icon,li .empty-container fd-icon{cursor:pointer;width:100%;height:100%;text-align:center}li .empty-container{visibility:hidden!important}.cdk-drag{cursor:default}.tree-icon-children{cursor:pointer}.icon-item{width:1rem}\n"] }]
         }], propDecorators: { node: [{
                 type: Input
             }], selectedNode: [{
@@ -4436,11 +4436,11 @@ class UiTreeComponent extends ReportTreeBaseComponent {
         this.loadChildren(node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiTreeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiTreeComponent, isStandalone: false, selector: "bsu-ui-tree", inputs: { showOkCancelButtons: "showOkCancelButtons" }, viewQueries: [{ propertyName: "_moveDialog", first: true, predicate: ["moveDialog"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderTree;\r\n        context: {\r\n            $implicit: root$ | async,\r\n            moDataList: flatMoDataList,\r\n            isCheckList: isCheckList,\r\n            columns: visibleColumns$ | async,\r\n            groupby: groupby$ | async,\r\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\r\n            contextMenuItems: menuItems$ | async | contextMenu: isCheckList,\r\n            conditionalFormats: context.Setting.View?.ConditionalFormats,\r\n            deviceName: deviceName$ | async,\r\n            deviceSize: deviceSize$ | async,\r\n            access: context.Setting.Extra?.DefaultCommandsAccess,\r\n            title: title$ | async,\r\n            inlineEditMode: inlineEditMode$ | async,\r\n            allowInlineEdit: allowInlineEdit$ | async,\r\n            hideToolbar: hideToolbar$ | async,\r\n            gridSetting: gridSetting$ | async,\r\n            contentDensity: contentDensity$ | async,\r\n            hasSelected: hasSelected$ | async,\r\n            showOkCancelButtons: showOkCancelButtons,\r\n            hideOpenIcon: viewSetting?.HideOpenIcon,\r\n            openOnClick: viewSetting?.OpenOnClick,\r\n            onlyExecuteLeafNode: viewSetting?.OnlyExecuteLeafNode,\r\n            enableNodeReordering: viewSetting?.EnableNodeReordering,\r\n            viewSettingsContentDensity: viewSetting?.ContentDensity$Caption,\r\n            iconField: viewSetting?.IconField,\r\n            hideIcon: viewSetting?.HideIcon,\r\n            colorField: viewSetting?.ColorField,\r\n            hasInlineEditButton: viewSetting?.HasInlineEditButton,\r\n            hasInlineDeleteButton: viewSetting?.HasInlineDeleteButton,\r\n            selectedNode: selectedNode$ | async,\r\n            navigationArrow: navigationArrow$ | async,\r\n            collapseIcon: collapseIcon$ | async,\r\n            relationList: context.Setting.View.RelationList,\r\n            allColumns: allColumns,\r\n            rtl: rtl$ | async,\r\n            inDialog: inDialog$ | async,\r\n            isMultiSelect: isMultiSelect$ | async,\r\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\r\n            isHetro: context.Setting.ClassNames.DataClass === 'Ul.HetroTreeUlvDataCtrlr',\r\n            selectedMo: selectedMo$ | async\r\n        }\r\n    \"\r\n></ng-container>\r\n\r\n<ng-template\r\n    #renderTree\r\n    let-root\r\n    let-moDataList=\"moDataList\"\r\n    let-deviceName=\"deviceName\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-toolbarButtons=\"toolbarButtons\"\r\n    let-title=\"title\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-allowInlineEdit=\"allowInlineEdit\"\r\n    let-hideToolbar=\"hideToolbar\"\r\n    let-gridSetting=\"gridSetting\"\r\n    let-contentDensity=\"contentDensity\"\r\n    let-access=\"access\"\r\n    let-contextMenuItems=\"contextMenuItems\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-isCheckList=\"isCheckList\"\r\n    let-groupby=\"groupby\"\r\n    let-hasSelected=\"hasSelected\"\r\n    let-showOkCancelButtons=\"showOkCancelButtons\"\r\n    let-selectedNode=\"selectedNode\"\r\n    let-navigationArrow=\"navigationArrow\"\r\n    let-collapseIcon=\"collapseIcon\"\r\n    let-rtl=\"rtl\"\r\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\r\n    let-relationList=\"relationList\"\r\n    let-isHetro=\"isHetro\"\r\n    let-inDialog=\"inDialog\"\r\n    let-isMultiSelect=\"isMultiSelect\"\r\n    let-selectedMo=\"selectedMo\"\r\n    let-hideOpenIcon=\"hideOpenIcon\"\r\n    let-openOnClick=\"openOnClick\"\r\n    let-enableNodeReordering=\"enableNodeReordering\"\r\n    let-onlyExecuteLeafNode=\"onlyExecuteLeafNode\"\r\n    let-iconField=\"iconField\"\r\n    let-colorField=\"colorField\"\r\n    let-allColumns=\"allColumns\"\r\n    let-hideIcon=\"hideIcon\"\r\n    let-viewSettingsContentDensity=\"viewSettingsContentDensity\"\r\n    let-hasInlineDeleteButton=\"hasInlineDeleteButton\"\r\n    let-hasInlineEditButton=\"hasInlineEditButton\"\r\n>\r\n   \r\n    <bsu-ui-tree-view\r\n        *untilInView=\"el\"\r\n        [leafCursorPointer]=\"onlyExecuteLeafNode && openOnClick\"\r\n        [rtl]=\"rtl\"\r\n        [hasInlineDeleteButton]=\"hasInlineDeleteButton\"\r\n        [hasInlineEditButton]=\"hasInlineEditButton\"\r\n        [relationList]=\"relationList\"\r\n        [toolbarButtons]=\"toolbarButtons\"\r\n        [root]=\"root\"\r\n        [allColumns]=\"allColumns\"\r\n        [hideIcon]=\"hideIcon\"\r\n        [selectedMo]=\"selectedMo\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [iconField]=\"iconField\"\r\n        [colorField]=\"colorField\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [collapseIcon]=\"collapseIcon\"\r\n        [selectedNode]=\"selectedNode\"\r\n        [access]=\"access\"\r\n        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [enableNodeReordering]=\"enableNodeReordering\"\r\n        [inDialog]=\"inDialog\"\r\n        [isMultiSelect]=\"isMultiSelect\"\r\n        [openOnClick]=\"openOnClick\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [moDataList]=\"moDataList\"\r\n        [groupby]=\"groupby\"\r\n        [isHetro]=\"isHetro\"\r\n        [isCheckList]=\"isCheckList\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [showOkCancelButtons]=\"showOkCancelButtons\"\r\n        (checkChange)=\"onCheckChange($event)\"\r\n        (itemDrop)=\"onDrop($event)\"\r\n        (itemDragMoved)=\"onDragMoved($event)\"\r\n        (nodeUlvCommand)=\"onNodeUlvCommand($event)\"\r\n        (nodeViewClick)=\"onNodeViewClick($event)\"\r\n        (loadChildren)=\"onLoadChildren($event)\"\r\n        (nodeSelect)=\"onNodeSelect($event)\"\r\n        (rowCheck)=\"onRowCheck($event)\"\r\n        (rowClick)=\"onRowClick($event)\"\r\n        (allCheckbox)=\"onAllCheckbox($event)\"\r\n        (expandClick)=\"onExpandClick($event)\"\r\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\r\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\r\n        (createNew)=\"onCreateNew($event)\"\r\n    >\r\n    </bsu-ui-tree-view>\r\n    <ng-template let-dialog let-dialogConfig=\"dialogConfig\" #moveDialog>\r\n        <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n            <fd-dialog-header>\r\n                <h1 fd-title>{{ 'Move' | bbbTranslate }}</h1>\r\n                <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n            </fd-dialog-header>\r\n\r\n            <fd-dialog-body>\r\n                <div class=\"move-to\" (keydown.enter)=\"onConfirmDialog(dialogSelectedNode)\">\r\n                    <bsu-ui-tree-view\r\n                        [rtl]=\"rtl\"\r\n                        [root]=\"root\"\r\n                        [access]=\"access\"\r\n                        [navigationArrow]=\"navigationArrow\"\r\n                        [collapseIcon]=\"collapseIcon\"\r\n                        [deviceName]=\"deviceName\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\r\n                        [enableNodeReordering]=\"enableNodeReordering\"\r\n                        [openOnClick]=\"openOnClick\"\r\n                        [selectedNode]=\"dialogSelectedNode\"\r\n                        [moDataList]=\"flatMoDataList\"\r\n                        [groupby]=\"groupby\"\r\n                        [isCheckList]=\"isCheckList\"\r\n                        [conditionalFormats]=\"conditionalFormats\"\r\n                        (loadChildren)=\"onLoadChildren($event)\"\r\n                        (nodeSelect)=\"onSelectNodeInMoveDialog($event)\"\r\n                    ></bsu-ui-tree-view>\r\n                </div>\r\n            </fd-dialog-body>\r\n\r\n            <fd-dialog-footer>\r\n                <ng-template fdkTemplate=\"footer\">\r\n                    <div fd-bar-right>\r\n                        <fd-button-bar\r\n                            fdType=\"emphasized\"\r\n                            [label]=\"'OK' | bbbTranslate\"\r\n                            (click)=\"onConfirmDialog(dialogSelectedNode)\"\r\n                        >\r\n                        </fd-button-bar>\r\n                        <fd-button-bar fd-initial-focus [label]=\"'Cancel' | bbbTranslate\" (click)=\"onDismissDialog()\">\r\n                        </fd-button-bar>\r\n                    </div>\r\n                </ng-template>\r\n            </fd-dialog-footer>\r\n        </fd-dialog>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{width:100%;box-sizing:border-box;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i3$3.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: UiTreeViewComponent, selector: "bsu-ui-tree-view", inputs: ["root", "selectedNode", "isHetro", "leafCursorPointer", "relationList", "showOkCancelButtons", "enableNodeReordering", "collapseIcon", "iconField", "colorField", "viewSettingsContentDensity"], outputs: ["checkChange", "nodeSelect", "createNew", "loadChildren", "nodeViewClick", "nodeUlvCommand", "itemDrop", "itemDragMoved"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }, { kind: "pipe", type: i2.ContextMenuPipe, name: "contextMenu" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiTreeComponent, isStandalone: false, selector: "bsu-ui-tree", inputs: { showOkCancelButtons: "showOkCancelButtons" }, viewQueries: [{ propertyName: "_moveDialog", first: true, predicate: ["moveDialog"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderTree;\r\n        context: {\r\n            $implicit: root$ | async,\r\n            moDataList: flatMoDataList,\r\n            isCheckList: isCheckList,\r\n            columns: visibleColumns$ | async,\r\n            groupby: groupby$ | async,\r\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\r\n            contextMenuItems: menuItems$ | async | contextMenu: isCheckList,\r\n            conditionalFormats: context.Setting.View?.ConditionalFormats,\r\n            deviceName: deviceName$ | async,\r\n            deviceSize: deviceSize$ | async,\r\n            access: context.Setting.Extra?.DefaultCommandsAccess,\r\n            title: title$ | async,\r\n            inlineEditMode: inlineEditMode$ | async,\r\n            allowInlineEdit: allowInlineEdit$ | async,\r\n            hideToolbar: hideToolbar$ | async,\r\n            gridSetting: gridSetting$ | async,\r\n            contentDensity: contentDensity$ | async,\r\n            hasSelected: hasSelected$ | async,\r\n            showOkCancelButtons: showOkCancelButtons,\r\n            hideOpenIcon: viewSetting?.HideOpenIcon,\r\n            openOnClick: viewSetting?.OpenOnClick,\r\n            onlyExecuteLeafNode: viewSetting?.OnlyExecuteLeafNode,\r\n            enableNodeReordering: viewSetting?.EnableNodeReordering,\r\n            viewSettingsContentDensity: viewSetting?.ContentDensity$Caption,\r\n            iconField: viewSetting?.IconField,\r\n            hideIcon: viewSetting?.HideIcon,\r\n            colorField: viewSetting?.ColorField,\r\n            hasInlineEditButton: viewSetting?.HasInlineEditButton,\r\n            hasInlineDeleteButton: viewSetting?.HasInlineDeleteButton,\r\n            selectedNode: selectedNode$ | async,\r\n            navigationArrow: navigationArrow$ | async,\r\n            collapseIcon: collapseIcon$ | async,\r\n            relationList: context.Setting.View.RelationList,\r\n            allColumns: allColumns,\r\n            rtl: rtl$ | async,\r\n            inDialog: inDialog$ | async,\r\n            isMultiSelect: isMultiSelect$ | async,\r\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\r\n            isHetro: context.Setting.ClassNames.DataClass === 'Ul.HetroTreeUlvDataCtrlr',\r\n            selectedMo: selectedMo$ | async\r\n        }\r\n    \"\r\n></ng-container>\r\n\r\n<ng-template\r\n    #renderTree\r\n    let-root\r\n    let-moDataList=\"moDataList\"\r\n    let-deviceName=\"deviceName\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-toolbarButtons=\"toolbarButtons\"\r\n    let-title=\"title\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-allowInlineEdit=\"allowInlineEdit\"\r\n    let-hideToolbar=\"hideToolbar\"\r\n    let-gridSetting=\"gridSetting\"\r\n    let-contentDensity=\"contentDensity\"\r\n    let-access=\"access\"\r\n    let-contextMenuItems=\"contextMenuItems\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-isCheckList=\"isCheckList\"\r\n    let-groupby=\"groupby\"\r\n    let-hasSelected=\"hasSelected\"\r\n    let-showOkCancelButtons=\"showOkCancelButtons\"\r\n    let-selectedNode=\"selectedNode\"\r\n    let-navigationArrow=\"navigationArrow\"\r\n    let-collapseIcon=\"collapseIcon\"\r\n    let-rtl=\"rtl\"\r\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\r\n    let-relationList=\"relationList\"\r\n    let-isHetro=\"isHetro\"\r\n    let-inDialog=\"inDialog\"\r\n    let-isMultiSelect=\"isMultiSelect\"\r\n    let-selectedMo=\"selectedMo\"\r\n    let-hideOpenIcon=\"hideOpenIcon\"\r\n    let-openOnClick=\"openOnClick\"\r\n    let-enableNodeReordering=\"enableNodeReordering\"\r\n    let-onlyExecuteLeafNode=\"onlyExecuteLeafNode\"\r\n    let-iconField=\"iconField\"\r\n    let-colorField=\"colorField\"\r\n    let-allColumns=\"allColumns\"\r\n    let-hideIcon=\"hideIcon\"\r\n    let-viewSettingsContentDensity=\"viewSettingsContentDensity\"\r\n    let-hasInlineDeleteButton=\"hasInlineDeleteButton\"\r\n    let-hasInlineEditButton=\"hasInlineEditButton\"\r\n>\r\n   \r\n    <bsu-ui-tree-view\r\n        *untilInView=\"el\"\r\n        [leafCursorPointer]=\"onlyExecuteLeafNode && openOnClick\"\r\n        [rtl]=\"rtl\"\r\n        [hasInlineDeleteButton]=\"hasInlineDeleteButton\"\r\n        [hasInlineEditButton]=\"hasInlineEditButton\"\r\n        [relationList]=\"relationList\"\r\n        [toolbarButtons]=\"toolbarButtons\"\r\n        [root]=\"root\"\r\n        [allColumns]=\"allColumns\"\r\n        [hideIcon]=\"hideIcon\"\r\n        [selectedMo]=\"selectedMo\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [iconField]=\"iconField\"\r\n        [colorField]=\"colorField\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [collapseIcon]=\"collapseIcon\"\r\n        [selectedNode]=\"selectedNode\"\r\n        [access]=\"access\"\r\n        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [enableNodeReordering]=\"enableNodeReordering\"\r\n        [inDialog]=\"inDialog\"\r\n        [isMultiSelect]=\"isMultiSelect\"\r\n        [openOnClick]=\"openOnClick\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [moDataList]=\"moDataList\"\r\n        [groupby]=\"groupby\"\r\n        [isHetro]=\"isHetro\"\r\n        [isCheckList]=\"isCheckList\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [showOkCancelButtons]=\"showOkCancelButtons\"\r\n        (checkChange)=\"onCheckChange($event)\"\r\n        (itemDrop)=\"onDrop($event)\"\r\n        (itemDragMoved)=\"onDragMoved($event)\"\r\n        (nodeUlvCommand)=\"onNodeUlvCommand($event)\"\r\n        (nodeViewClick)=\"onNodeViewClick($event)\"\r\n        (loadChildren)=\"onLoadChildren($event)\"\r\n        (nodeSelect)=\"onNodeSelect($event)\"\r\n        (rowCheck)=\"onRowCheck($event)\"\r\n        (rowClick)=\"onRowClick($event)\"\r\n        (allCheckbox)=\"onAllCheckbox($event)\"\r\n        (expandClick)=\"onExpandClick($event)\"\r\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\r\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\r\n        (createNew)=\"onCreateNew($event)\"\r\n    >\r\n    </bsu-ui-tree-view>\r\n    <ng-template let-dialog let-dialogConfig=\"dialogConfig\" #moveDialog>\r\n        <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n            <fd-dialog-header>\r\n                <h1 fd-title>{{ 'Move' | bbbTranslate }}</h1>\r\n                <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n            </fd-dialog-header>\r\n\r\n            <fd-dialog-body>\r\n                <div class=\"move-to\" (keydown.enter)=\"onConfirmDialog(dialogSelectedNode)\">\r\n                    <bsu-ui-tree-view\r\n                        [rtl]=\"rtl\"\r\n                        [root]=\"root\"\r\n                        [access]=\"access\"\r\n                        [navigationArrow]=\"navigationArrow\"\r\n                        [collapseIcon]=\"collapseIcon\"\r\n                        [deviceName]=\"deviceName\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\r\n                        [enableNodeReordering]=\"enableNodeReordering\"\r\n                        [openOnClick]=\"openOnClick\"\r\n                        [selectedNode]=\"dialogSelectedNode\"\r\n                        [moDataList]=\"flatMoDataList\"\r\n                        [groupby]=\"groupby\"\r\n                        [isCheckList]=\"isCheckList\"\r\n                        [conditionalFormats]=\"conditionalFormats\"\r\n                        (loadChildren)=\"onLoadChildren($event)\"\r\n                        (nodeSelect)=\"onSelectNodeInMoveDialog($event)\"\r\n                    ></bsu-ui-tree-view>\r\n                </div>\r\n            </fd-dialog-body>\r\n\r\n            <fd-dialog-footer>\r\n                <ng-template fdkTemplate=\"footer\">\r\n                    <div fd-bar-right>\r\n                        <fd-button-bar\r\n                            fdType=\"emphasized\"\r\n                            [label]=\"'OK' | bbbTranslate\"\r\n                            (click)=\"onConfirmDialog(dialogSelectedNode)\"\r\n                        >\r\n                        </fd-button-bar>\r\n                        <fd-button-bar fd-initial-focus [label]=\"'Cancel' | bbbTranslate\" (click)=\"onDismissDialog()\">\r\n                        </fd-button-bar>\r\n                    </div>\r\n                </ng-template>\r\n            </fd-dialog-footer>\r\n        </fd-dialog>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{width:100%;box-sizing:border-box;display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i3$3.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: UiTreeViewComponent, selector: "bsu-ui-tree-view", inputs: ["root", "selectedNode", "isHetro", "leafCursorPointer", "relationList", "showOkCancelButtons", "enableNodeReordering", "collapseIcon", "iconField", "colorField", "viewSettingsContentDensity"], outputs: ["checkChange", "nodeSelect", "createNew", "loadChildren", "nodeViewClick", "nodeUlvCommand", "itemDrop", "itemDragMoved"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }, { kind: "pipe", type: i2.ContextMenuPipe, name: "contextMenu" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-tree', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderTree;\r\n        context: {\r\n            $implicit: root$ | async,\r\n            moDataList: flatMoDataList,\r\n            isCheckList: isCheckList,\r\n            columns: visibleColumns$ | async,\r\n            groupby: groupby$ | async,\r\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\r\n            contextMenuItems: menuItems$ | async | contextMenu: isCheckList,\r\n            conditionalFormats: context.Setting.View?.ConditionalFormats,\r\n            deviceName: deviceName$ | async,\r\n            deviceSize: deviceSize$ | async,\r\n            access: context.Setting.Extra?.DefaultCommandsAccess,\r\n            title: title$ | async,\r\n            inlineEditMode: inlineEditMode$ | async,\r\n            allowInlineEdit: allowInlineEdit$ | async,\r\n            hideToolbar: hideToolbar$ | async,\r\n            gridSetting: gridSetting$ | async,\r\n            contentDensity: contentDensity$ | async,\r\n            hasSelected: hasSelected$ | async,\r\n            showOkCancelButtons: showOkCancelButtons,\r\n            hideOpenIcon: viewSetting?.HideOpenIcon,\r\n            openOnClick: viewSetting?.OpenOnClick,\r\n            onlyExecuteLeafNode: viewSetting?.OnlyExecuteLeafNode,\r\n            enableNodeReordering: viewSetting?.EnableNodeReordering,\r\n            viewSettingsContentDensity: viewSetting?.ContentDensity$Caption,\r\n            iconField: viewSetting?.IconField,\r\n            hideIcon: viewSetting?.HideIcon,\r\n            colorField: viewSetting?.ColorField,\r\n            hasInlineEditButton: viewSetting?.HasInlineEditButton,\r\n            hasInlineDeleteButton: viewSetting?.HasInlineDeleteButton,\r\n            selectedNode: selectedNode$ | async,\r\n            navigationArrow: navigationArrow$ | async,\r\n            collapseIcon: collapseIcon$ | async,\r\n            relationList: context.Setting.View.RelationList,\r\n            allColumns: allColumns,\r\n            rtl: rtl$ | async,\r\n            inDialog: inDialog$ | async,\r\n            isMultiSelect: isMultiSelect$ | async,\r\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\r\n            isHetro: context.Setting.ClassNames.DataClass === 'Ul.HetroTreeUlvDataCtrlr',\r\n            selectedMo: selectedMo$ | async\r\n        }\r\n    \"\r\n></ng-container>\r\n\r\n<ng-template\r\n    #renderTree\r\n    let-root\r\n    let-moDataList=\"moDataList\"\r\n    let-deviceName=\"deviceName\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-toolbarButtons=\"toolbarButtons\"\r\n    let-title=\"title\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-allowInlineEdit=\"allowInlineEdit\"\r\n    let-hideToolbar=\"hideToolbar\"\r\n    let-gridSetting=\"gridSetting\"\r\n    let-contentDensity=\"contentDensity\"\r\n    let-access=\"access\"\r\n    let-contextMenuItems=\"contextMenuItems\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-isCheckList=\"isCheckList\"\r\n    let-groupby=\"groupby\"\r\n    let-hasSelected=\"hasSelected\"\r\n    let-showOkCancelButtons=\"showOkCancelButtons\"\r\n    let-selectedNode=\"selectedNode\"\r\n    let-navigationArrow=\"navigationArrow\"\r\n    let-collapseIcon=\"collapseIcon\"\r\n    let-rtl=\"rtl\"\r\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\r\n    let-relationList=\"relationList\"\r\n    let-isHetro=\"isHetro\"\r\n    let-inDialog=\"inDialog\"\r\n    let-isMultiSelect=\"isMultiSelect\"\r\n    let-selectedMo=\"selectedMo\"\r\n    let-hideOpenIcon=\"hideOpenIcon\"\r\n    let-openOnClick=\"openOnClick\"\r\n    let-enableNodeReordering=\"enableNodeReordering\"\r\n    let-onlyExecuteLeafNode=\"onlyExecuteLeafNode\"\r\n    let-iconField=\"iconField\"\r\n    let-colorField=\"colorField\"\r\n    let-allColumns=\"allColumns\"\r\n    let-hideIcon=\"hideIcon\"\r\n    let-viewSettingsContentDensity=\"viewSettingsContentDensity\"\r\n    let-hasInlineDeleteButton=\"hasInlineDeleteButton\"\r\n    let-hasInlineEditButton=\"hasInlineEditButton\"\r\n>\r\n   \r\n    <bsu-ui-tree-view\r\n        *untilInView=\"el\"\r\n        [leafCursorPointer]=\"onlyExecuteLeafNode && openOnClick\"\r\n        [rtl]=\"rtl\"\r\n        [hasInlineDeleteButton]=\"hasInlineDeleteButton\"\r\n        [hasInlineEditButton]=\"hasInlineEditButton\"\r\n        [relationList]=\"relationList\"\r\n        [toolbarButtons]=\"toolbarButtons\"\r\n        [root]=\"root\"\r\n        [allColumns]=\"allColumns\"\r\n        [hideIcon]=\"hideIcon\"\r\n        [selectedMo]=\"selectedMo\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [iconField]=\"iconField\"\r\n        [colorField]=\"colorField\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [collapseIcon]=\"collapseIcon\"\r\n        [selectedNode]=\"selectedNode\"\r\n        [access]=\"access\"\r\n        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [enableNodeReordering]=\"enableNodeReordering\"\r\n        [inDialog]=\"inDialog\"\r\n        [isMultiSelect]=\"isMultiSelect\"\r\n        [openOnClick]=\"openOnClick\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [moDataList]=\"moDataList\"\r\n        [groupby]=\"groupby\"\r\n        [isHetro]=\"isHetro\"\r\n        [isCheckList]=\"isCheckList\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [showOkCancelButtons]=\"showOkCancelButtons\"\r\n        (checkChange)=\"onCheckChange($event)\"\r\n        (itemDrop)=\"onDrop($event)\"\r\n        (itemDragMoved)=\"onDragMoved($event)\"\r\n        (nodeUlvCommand)=\"onNodeUlvCommand($event)\"\r\n        (nodeViewClick)=\"onNodeViewClick($event)\"\r\n        (loadChildren)=\"onLoadChildren($event)\"\r\n        (nodeSelect)=\"onNodeSelect($event)\"\r\n        (rowCheck)=\"onRowCheck($event)\"\r\n        (rowClick)=\"onRowClick($event)\"\r\n        (allCheckbox)=\"onAllCheckbox($event)\"\r\n        (expandClick)=\"onExpandClick($event)\"\r\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\r\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\r\n        (createNew)=\"onCreateNew($event)\"\r\n    >\r\n    </bsu-ui-tree-view>\r\n    <ng-template let-dialog let-dialogConfig=\"dialogConfig\" #moveDialog>\r\n        <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n            <fd-dialog-header>\r\n                <h1 fd-title>{{ 'Move' | bbbTranslate }}</h1>\r\n                <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n            </fd-dialog-header>\r\n\r\n            <fd-dialog-body>\r\n                <div class=\"move-to\" (keydown.enter)=\"onConfirmDialog(dialogSelectedNode)\">\r\n                    <bsu-ui-tree-view\r\n                        [rtl]=\"rtl\"\r\n                        [root]=\"root\"\r\n                        [access]=\"access\"\r\n                        [navigationArrow]=\"navigationArrow\"\r\n                        [collapseIcon]=\"collapseIcon\"\r\n                        [deviceName]=\"deviceName\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\r\n                        [enableNodeReordering]=\"enableNodeReordering\"\r\n                        [openOnClick]=\"openOnClick\"\r\n                        [selectedNode]=\"dialogSelectedNode\"\r\n                        [moDataList]=\"flatMoDataList\"\r\n                        [groupby]=\"groupby\"\r\n                        [isCheckList]=\"isCheckList\"\r\n                        [conditionalFormats]=\"conditionalFormats\"\r\n                        (loadChildren)=\"onLoadChildren($event)\"\r\n                        (nodeSelect)=\"onSelectNodeInMoveDialog($event)\"\r\n                    ></bsu-ui-tree-view>\r\n                </div>\r\n            </fd-dialog-body>\r\n\r\n            <fd-dialog-footer>\r\n                <ng-template fdkTemplate=\"footer\">\r\n                    <div fd-bar-right>\r\n                        <fd-button-bar\r\n                            fdType=\"emphasized\"\r\n                            [label]=\"'OK' | bbbTranslate\"\r\n                            (click)=\"onConfirmDialog(dialogSelectedNode)\"\r\n                        >\r\n                        </fd-button-bar>\r\n                        <fd-button-bar fd-initial-focus [label]=\"'Cancel' | bbbTranslate\" (click)=\"onDismissDialog()\">\r\n                        </fd-button-bar>\r\n                    </div>\r\n                </ng-template>\r\n            </fd-dialog-footer>\r\n        </fd-dialog>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{width:100%;box-sizing:border-box;display:inline-block}\n"] }]
+            args: [{ selector: 'bsu-ui-tree', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderTree;\r\n        context: {\r\n            $implicit: root$ | async,\r\n            moDataList: flatMoDataList,\r\n            isCheckList: isCheckList,\r\n            columns: visibleColumns$ | async,\r\n            groupby: groupby$ | async,\r\n            toolbarButtons: (toolbarButtons$ | async)!! | seperatorFix,\r\n            contextMenuItems: menuItems$ | async | contextMenu: isCheckList,\r\n            conditionalFormats: context.Setting.View?.ConditionalFormats,\r\n            deviceName: deviceName$ | async,\r\n            deviceSize: deviceSize$ | async,\r\n            access: context.Setting.Extra?.DefaultCommandsAccess,\r\n            title: title$ | async,\r\n            inlineEditMode: inlineEditMode$ | async,\r\n            allowInlineEdit: allowInlineEdit$ | async,\r\n            hideToolbar: hideToolbar$ | async,\r\n            gridSetting: gridSetting$ | async,\r\n            contentDensity: contentDensity$ | async,\r\n            hasSelected: hasSelected$ | async,\r\n            showOkCancelButtons: showOkCancelButtons,\r\n            hideOpenIcon: viewSetting?.HideOpenIcon,\r\n            openOnClick: viewSetting?.OpenOnClick,\r\n            onlyExecuteLeafNode: viewSetting?.OnlyExecuteLeafNode,\r\n            enableNodeReordering: viewSetting?.EnableNodeReordering,\r\n            viewSettingsContentDensity: viewSetting?.ContentDensity$Caption,\r\n            iconField: viewSetting?.IconField,\r\n            hideIcon: viewSetting?.HideIcon,\r\n            colorField: viewSetting?.ColorField,\r\n            hasInlineEditButton: viewSetting?.HasInlineEditButton,\r\n            hasInlineDeleteButton: viewSetting?.HasInlineDeleteButton,\r\n            selectedNode: selectedNode$ | async,\r\n            navigationArrow: navigationArrow$ | async,\r\n            collapseIcon: collapseIcon$ | async,\r\n            relationList: context.Setting.View.RelationList,\r\n            allColumns: allColumns,\r\n            rtl: rtl$ | async,\r\n            inDialog: inDialog$ | async,\r\n            isMultiSelect: isMultiSelect$ | async,\r\n            disableOverflowContextMenu: viewSetting?.DisableOverflowContextMenu,\r\n            isHetro: context.Setting.ClassNames.DataClass === 'Ul.HetroTreeUlvDataCtrlr',\r\n            selectedMo: selectedMo$ | async\r\n        }\r\n    \"\r\n></ng-container>\r\n\r\n<ng-template\r\n    #renderTree\r\n    let-root\r\n    let-moDataList=\"moDataList\"\r\n    let-deviceName=\"deviceName\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-toolbarButtons=\"toolbarButtons\"\r\n    let-title=\"title\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-allowInlineEdit=\"allowInlineEdit\"\r\n    let-hideToolbar=\"hideToolbar\"\r\n    let-gridSetting=\"gridSetting\"\r\n    let-contentDensity=\"contentDensity\"\r\n    let-access=\"access\"\r\n    let-contextMenuItems=\"contextMenuItems\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-isCheckList=\"isCheckList\"\r\n    let-groupby=\"groupby\"\r\n    let-hasSelected=\"hasSelected\"\r\n    let-showOkCancelButtons=\"showOkCancelButtons\"\r\n    let-selectedNode=\"selectedNode\"\r\n    let-navigationArrow=\"navigationArrow\"\r\n    let-collapseIcon=\"collapseIcon\"\r\n    let-rtl=\"rtl\"\r\n    let-disableOverflowContextMenu=\"disableOverflowContextMenu\"\r\n    let-relationList=\"relationList\"\r\n    let-isHetro=\"isHetro\"\r\n    let-inDialog=\"inDialog\"\r\n    let-isMultiSelect=\"isMultiSelect\"\r\n    let-selectedMo=\"selectedMo\"\r\n    let-hideOpenIcon=\"hideOpenIcon\"\r\n    let-openOnClick=\"openOnClick\"\r\n    let-enableNodeReordering=\"enableNodeReordering\"\r\n    let-onlyExecuteLeafNode=\"onlyExecuteLeafNode\"\r\n    let-iconField=\"iconField\"\r\n    let-colorField=\"colorField\"\r\n    let-allColumns=\"allColumns\"\r\n    let-hideIcon=\"hideIcon\"\r\n    let-viewSettingsContentDensity=\"viewSettingsContentDensity\"\r\n    let-hasInlineDeleteButton=\"hasInlineDeleteButton\"\r\n    let-hasInlineEditButton=\"hasInlineEditButton\"\r\n>\r\n   \r\n    <bsu-ui-tree-view\r\n        *untilInView=\"el\"\r\n        [leafCursorPointer]=\"onlyExecuteLeafNode && openOnClick\"\r\n        [rtl]=\"rtl\"\r\n        [hasInlineDeleteButton]=\"hasInlineDeleteButton\"\r\n        [hasInlineEditButton]=\"hasInlineEditButton\"\r\n        [relationList]=\"relationList\"\r\n        [toolbarButtons]=\"toolbarButtons\"\r\n        [root]=\"root\"\r\n        [allColumns]=\"allColumns\"\r\n        [hideIcon]=\"hideIcon\"\r\n        [selectedMo]=\"selectedMo\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [iconField]=\"iconField\"\r\n        [colorField]=\"colorField\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [collapseIcon]=\"collapseIcon\"\r\n        [selectedNode]=\"selectedNode\"\r\n        [access]=\"access\"\r\n        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [enableNodeReordering]=\"enableNodeReordering\"\r\n        [inDialog]=\"inDialog\"\r\n        [isMultiSelect]=\"isMultiSelect\"\r\n        [openOnClick]=\"openOnClick\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [moDataList]=\"moDataList\"\r\n        [groupby]=\"groupby\"\r\n        [isHetro]=\"isHetro\"\r\n        [isCheckList]=\"isCheckList\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [showOkCancelButtons]=\"showOkCancelButtons\"\r\n        (checkChange)=\"onCheckChange($event)\"\r\n        (itemDrop)=\"onDrop($event)\"\r\n        (itemDragMoved)=\"onDragMoved($event)\"\r\n        (nodeUlvCommand)=\"onNodeUlvCommand($event)\"\r\n        (nodeViewClick)=\"onNodeViewClick($event)\"\r\n        (loadChildren)=\"onLoadChildren($event)\"\r\n        (nodeSelect)=\"onNodeSelect($event)\"\r\n        (rowCheck)=\"onRowCheck($event)\"\r\n        (rowClick)=\"onRowClick($event)\"\r\n        (allCheckbox)=\"onAllCheckbox($event)\"\r\n        (expandClick)=\"onExpandClick($event)\"\r\n        (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\r\n        (editFormPanelSave)=\"onEditFormPanelSave($event)\"\r\n        (createNew)=\"onCreateNew($event)\"\r\n    >\r\n    </bsu-ui-tree-view>\r\n    <ng-template let-dialog let-dialogConfig=\"dialogConfig\" #moveDialog>\r\n        <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n            <fd-dialog-header>\r\n                <h1 fd-title>{{ 'Move' | bbbTranslate }}</h1>\r\n                <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n            </fd-dialog-header>\r\n\r\n            <fd-dialog-body>\r\n                <div class=\"move-to\" (keydown.enter)=\"onConfirmDialog(dialogSelectedNode)\">\r\n                    <bsu-ui-tree-view\r\n                        [rtl]=\"rtl\"\r\n                        [root]=\"root\"\r\n                        [access]=\"access\"\r\n                        [navigationArrow]=\"navigationArrow\"\r\n                        [collapseIcon]=\"collapseIcon\"\r\n                        [deviceName]=\"deviceName\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [viewSettingsContentDensity]=\"viewSettingsContentDensity\"\r\n                        [enableNodeReordering]=\"enableNodeReordering\"\r\n                        [openOnClick]=\"openOnClick\"\r\n                        [selectedNode]=\"dialogSelectedNode\"\r\n                        [moDataList]=\"flatMoDataList\"\r\n                        [groupby]=\"groupby\"\r\n                        [isCheckList]=\"isCheckList\"\r\n                        [conditionalFormats]=\"conditionalFormats\"\r\n                        (loadChildren)=\"onLoadChildren($event)\"\r\n                        (nodeSelect)=\"onSelectNodeInMoveDialog($event)\"\r\n                    ></bsu-ui-tree-view>\r\n                </div>\r\n            </fd-dialog-body>\r\n\r\n            <fd-dialog-footer>\r\n                <ng-template fdkTemplate=\"footer\">\r\n                    <div fd-bar-right>\r\n                        <fd-button-bar\r\n                            fdType=\"emphasized\"\r\n                            [label]=\"'OK' | bbbTranslate\"\r\n                            (click)=\"onConfirmDialog(dialogSelectedNode)\"\r\n                        >\r\n                        </fd-button-bar>\r\n                        <fd-button-bar fd-initial-focus [label]=\"'Cancel' | bbbTranslate\" (click)=\"onDismissDialog()\">\r\n                        </fd-button-bar>\r\n                    </div>\r\n                </ng-template>\r\n            </fd-dialog-footer>\r\n        </fd-dialog>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{width:100%;box-sizing:border-box;display:block}\n"] }]
         }], propDecorators: { _moveDialog: [{
                 type: ViewChild,
                 args: ['moveDialog', { static: false, read: TemplateRef }]
@@ -5045,11 +5045,11 @@ class ColumnRendererComponent extends BaseComponent {
         this._renderer2.setStyle(this._filePopover.nativeElement, 'max-width', `${this.containerDom?.offsetWidth}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ColumnRendererComponent, isStandalone: false, selector: "bsu-column-renderer,[colRenderer]", inputs: { cellEdit: "cellEdit", column: "column", allColumns: "allColumns", mo: "mo", index: "index", editMode: "editMode", attachmentViewType: "attachmentViewType", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", disableEllapsis: "disableEllapsis", rtl: "rtl", isMobile: "isMobile", fdTextMode: "fdTextMode", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, viewQueries: [{ propertyName: "_filePopover", first: true, predicate: ["fileviewerPopover"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (column) {\r\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\r\n}\r\n<ng-template #renderCellTemplate>\r\n    @switch (column.FieldTypeId) { @case (42) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\r\n    } @case (33) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\r\n    } @case (31) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\r\n    } @case (11) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\r\n    } @case (5) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\r\n    ></ng-container>\r\n    } @default {\r\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\r\n    } }\r\n</ng-template>\r\n<ng-template #renderGeneral>\r\n    <div\r\n        class=\"renderGeneral\"\r\n        [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\"\r\n        [style.width]=\"\"\r\n        [attr.title]=\"value\"\r\n    >\r\n        @if (icon) {\r\n        <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\r\n        }\r\n        <!-- <fd-text\r\n    #fdText\r\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n    [maxLines]=\"1\"\r\n    [text]=\"value\"\r\n    [fd-inline-help]=\"value\"\r\n    [disabled]=\"!fdText._hasMore\"\r\n  ></fd-text> -->\r\n\r\n        <!-- <bsu-barsa-text-ellipsis\r\n  [style.width]=\"column.$Width\"\r\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n  [text]=\"value\"\r\n></bsu-barsa-text-ellipsis> -->\r\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\r\n{{ value }}\r\n</div> -->\r\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\r\n        <div            \r\n            [ellapsisText]=\"value\"\r\n            [disableEllapsis]=\"editMode\"\r\n            [class.ellapsis]=\"!disableEllapsis\"\r\n            [columnValue]=\"value\"\r\n            (ellapsised)=\"onElapsised($event)\"\r\n        ></div>\r\n        } @else{\r\n        <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\r\n        } }\r\n    </div>\r\n</ng-template>\r\n<ng-template #formControlTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\r\n                ? renderCellTemplate\r\n                : layoutControlTemplate\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #layoutControlTemplate>\r\n    @if (controlUi) {\r\n    <bsu-layout-control\r\n        [inlineEdit]=\"true\"\r\n        [caption]=\"column.Caption\"\r\n        [cellEdit]=\"cellEdit\"\r\n        [config]=\"controlUi\"\r\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\r\n        [showLabel]=\"formLayoutShowLabel\"\r\n    ></bsu-layout-control>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellListTasavir>\r\n    @if (mo[column.Name] && mo[column.Name].Images) {\r\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\r\n        @for (pic of mo[column.Name].Images; track pic) {\r\n        <img\r\n            fullscreen\r\n            fullscreenFiles\r\n            [files]=\"mo[column.Name].Images\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\r\n            style=\"width: 3rem; height: 3rem\"\r\n        />\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileListKhati>\r\n    @if (mo[column.Name]) {\r\n    <div class=\"file-viewer-attachments\">\r\n        @for (file of mo[column.Name].Files; track file;let index=$index) { @if (!file.IsDeleted) {\r\n        <bsu-file-viewer-popover\r\n            #fileviewerPopover\r\n            intersectionObserver\r\n            [intersectionThreshold]=\"0.1\"\r\n            (visibilityChange)=\"$event === 'Visible' && onSetMaxWidth()\"\r\n            [file]=\"file\"\r\n            [index]=\"index\"\r\n            [attachmentViewType]=\"+attachmentViewType\"\r\n            [files]=\"mo[column.Name].Files\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [canDownload]=\"true\"\r\n            [disableRemove]=\"true\"\r\n            [fdType]=\"'transparent'\"\r\n            preventDefault\r\n            stopPropagation\r\n        ></bsu-file-viewer-popover>\r\n        }\r\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileInfo>\r\n    @if (mo[column.Name]) {\r\n    <fd-avatar\r\n        [transparent]=\"true\"\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellChecbox>\r\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\r\n</ng-template>\r\n<ng-template #renderChecboxImage>\r\n    @if (column.Extra?.TrueImage === '') {\r\n    {{ value }}\r\n    } @if (column.Extra?.TrueImage !== '') {\r\n    <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellImage>\r\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\r\n    <fd-avatar\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [transparent]=\"true\"\r\n        [image]=\"mo[column.Name]['Url']\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize", "disableEllapsis"], outputs: ["ellapsised"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[stopPropagation]" }, { kind: "directive", type: i2.PreventDefaultDirective, selector: "[preventDefault]" }, { kind: "directive", type: i2.ColumnValueDirective, selector: "[columnValue]", inputs: ["columnValue"] }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "cellEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "index", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "selectedId", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ColumnRendererComponent, isStandalone: false, selector: "bsu-column-renderer,[colRenderer]", inputs: { cellEdit: "cellEdit", column: "column", allColumns: "allColumns", mo: "mo", index: "index", editMode: "editMode", attachmentViewType: "attachmentViewType", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", disableEllapsis: "disableEllapsis", rtl: "rtl", isMobile: "isMobile", fdTextMode: "fdTextMode", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, viewQueries: [{ propertyName: "_filePopover", first: true, predicate: ["fileviewerPopover"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (column) {\r\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\r\n}\r\n<ng-template #renderCellTemplate>\r\n    @switch (column.FieldTypeId) { @case (42) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\r\n    } @case (33) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\r\n    } @case (31) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\r\n    } @case (11) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\r\n    } @case (5) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\r\n    ></ng-container>\r\n    } @default {\r\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\r\n    } }\r\n</ng-template>\r\n<ng-template #renderGeneral>\r\n    <div\r\n        class=\"renderGeneral\"\r\n        [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\"\r\n        [style.width]=\"\"\r\n        [attr.title]=\"value\"\r\n    >\r\n        @if (icon) {\r\n        <img loading=\"lazy\" [attr.rtl]=\"rtl\" [src]=\"icon\" />\r\n        }\r\n        <!-- <fd-text\r\n    #fdText\r\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n    [maxLines]=\"1\"\r\n    [text]=\"value\"\r\n    [fd-inline-help]=\"value\"\r\n    [disabled]=\"!fdText._hasMore\"\r\n  ></fd-text> -->\r\n\r\n        <!-- <bsu-barsa-text-ellipsis\r\n  [style.width]=\"column.$Width\"\r\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n  [text]=\"value\"\r\n></bsu-barsa-text-ellipsis> -->\r\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\r\n{{ value }}\r\n</div> -->\r\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\r\n        <div            \r\n            [ellapsisText]=\"value\"\r\n            [disableEllapsis]=\"editMode\"\r\n            [class.ellapsis]=\"!disableEllapsis\"\r\n            [columnValue]=\"value\"\r\n            (ellapsised)=\"onElapsised($event)\"\r\n        ></div>\r\n        } @else{\r\n        <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\r\n        } }\r\n    </div>\r\n</ng-template>\r\n<ng-template #formControlTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\r\n                ? renderCellTemplate\r\n                : layoutControlTemplate\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #layoutControlTemplate>\r\n    @if (controlUi) {\r\n    <bsu-layout-control\r\n        [inlineEdit]=\"true\"\r\n        [caption]=\"column.Caption\"\r\n        [cellEdit]=\"cellEdit\"\r\n        [config]=\"controlUi\"\r\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\r\n        [showLabel]=\"formLayoutShowLabel\"\r\n    ></bsu-layout-control>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellListTasavir>\r\n    @if (mo[column.Name] && mo[column.Name].Images) {\r\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\r\n        @for (pic of mo[column.Name].Images; track pic) {\r\n        <img\r\n            fullscreen\r\n            fullscreenFiles\r\n            [files]=\"mo[column.Name].Images\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\r\n            style=\"width: 3rem; height: 3rem\"\r\n            loading=\"lazy\"\r\n        />\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileListKhati>\r\n    @if (mo[column.Name]) {\r\n    <div class=\"file-viewer-attachments\">\r\n        @for (file of mo[column.Name].Files; track file;let index=$index) { @if (!file.IsDeleted) {\r\n        <bsu-file-viewer-popover\r\n            #fileviewerPopover\r\n            intersectionObserver\r\n            [intersectionThreshold]=\"0.1\"\r\n            (visibilityChange)=\"$event === 'Visible' && onSetMaxWidth()\"\r\n            [file]=\"file\"\r\n            [index]=\"index\"\r\n            [attachmentViewType]=\"+attachmentViewType\"\r\n            [files]=\"mo[column.Name].Files\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [canDownload]=\"true\"\r\n            [disableRemove]=\"true\"\r\n            [fdType]=\"'transparent'\"\r\n            preventDefault\r\n            stopPropagation\r\n        ></bsu-file-viewer-popover>\r\n        }\r\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileInfo>\r\n    @if (mo[column.Name]) {\r\n    <fd-avatar\r\n        [transparent]=\"true\"\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellChecbox>\r\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\r\n</ng-template>\r\n<ng-template #renderChecboxImage>\r\n    @if (column.Extra?.TrueImage === '') {\r\n    {{ value }}\r\n    } @if (column.Extra?.TrueImage !== '') {\r\n    <img loading=\"lazy\" [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellImage>\r\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\r\n    <fd-avatar\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [transparent]=\"true\"\r\n        [image]=\"mo[column.Name]['Url']\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize", "disableEllapsis"], outputs: ["ellapsised"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[stopPropagation]" }, { kind: "directive", type: i2.PreventDefaultDirective, selector: "[preventDefault]" }, { kind: "directive", type: i2.ColumnValueDirective, selector: "[columnValue]", inputs: ["columnValue"] }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "cellEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "index", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "selectedId", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColumnRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (column) {\r\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\r\n}\r\n<ng-template #renderCellTemplate>\r\n    @switch (column.FieldTypeId) { @case (42) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\r\n    } @case (33) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\r\n    } @case (31) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\r\n    } @case (11) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\r\n    } @case (5) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\r\n    ></ng-container>\r\n    } @default {\r\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\r\n    } }\r\n</ng-template>\r\n<ng-template #renderGeneral>\r\n    <div\r\n        class=\"renderGeneral\"\r\n        [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\"\r\n        [style.width]=\"\"\r\n        [attr.title]=\"value\"\r\n    >\r\n        @if (icon) {\r\n        <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\r\n        }\r\n        <!-- <fd-text\r\n    #fdText\r\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n    [maxLines]=\"1\"\r\n    [text]=\"value\"\r\n    [fd-inline-help]=\"value\"\r\n    [disabled]=\"!fdText._hasMore\"\r\n  ></fd-text> -->\r\n\r\n        <!-- <bsu-barsa-text-ellipsis\r\n  [style.width]=\"column.$Width\"\r\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n  [text]=\"value\"\r\n></bsu-barsa-text-ellipsis> -->\r\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\r\n{{ value }}\r\n</div> -->\r\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\r\n        <div            \r\n            [ellapsisText]=\"value\"\r\n            [disableEllapsis]=\"editMode\"\r\n            [class.ellapsis]=\"!disableEllapsis\"\r\n            [columnValue]=\"value\"\r\n            (ellapsised)=\"onElapsised($event)\"\r\n        ></div>\r\n        } @else{\r\n        <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\r\n        } }\r\n    </div>\r\n</ng-template>\r\n<ng-template #formControlTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\r\n                ? renderCellTemplate\r\n                : layoutControlTemplate\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #layoutControlTemplate>\r\n    @if (controlUi) {\r\n    <bsu-layout-control\r\n        [inlineEdit]=\"true\"\r\n        [caption]=\"column.Caption\"\r\n        [cellEdit]=\"cellEdit\"\r\n        [config]=\"controlUi\"\r\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\r\n        [showLabel]=\"formLayoutShowLabel\"\r\n    ></bsu-layout-control>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellListTasavir>\r\n    @if (mo[column.Name] && mo[column.Name].Images) {\r\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\r\n        @for (pic of mo[column.Name].Images; track pic) {\r\n        <img\r\n            fullscreen\r\n            fullscreenFiles\r\n            [files]=\"mo[column.Name].Images\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\r\n            style=\"width: 3rem; height: 3rem\"\r\n        />\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileListKhati>\r\n    @if (mo[column.Name]) {\r\n    <div class=\"file-viewer-attachments\">\r\n        @for (file of mo[column.Name].Files; track file;let index=$index) { @if (!file.IsDeleted) {\r\n        <bsu-file-viewer-popover\r\n            #fileviewerPopover\r\n            intersectionObserver\r\n            [intersectionThreshold]=\"0.1\"\r\n            (visibilityChange)=\"$event === 'Visible' && onSetMaxWidth()\"\r\n            [file]=\"file\"\r\n            [index]=\"index\"\r\n            [attachmentViewType]=\"+attachmentViewType\"\r\n            [files]=\"mo[column.Name].Files\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [canDownload]=\"true\"\r\n            [disableRemove]=\"true\"\r\n            [fdType]=\"'transparent'\"\r\n            preventDefault\r\n            stopPropagation\r\n        ></bsu-file-viewer-popover>\r\n        }\r\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileInfo>\r\n    @if (mo[column.Name]) {\r\n    <fd-avatar\r\n        [transparent]=\"true\"\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellChecbox>\r\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\r\n</ng-template>\r\n<ng-template #renderChecboxImage>\r\n    @if (column.Extra?.TrueImage === '') {\r\n    {{ value }}\r\n    } @if (column.Extra?.TrueImage !== '') {\r\n    <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellImage>\r\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\r\n    <fd-avatar\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [transparent]=\"true\"\r\n        [image]=\"mo[column.Name]['Url']\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit}\n"] }]
+            args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (column) {\r\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\r\n}\r\n<ng-template #renderCellTemplate>\r\n    @switch (column.FieldTypeId) { @case (42) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\r\n    } @case (33) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\r\n    } @case (31) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\r\n    } @case (11) {\r\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\r\n    } @case (5) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\r\n    ></ng-container>\r\n    } @default {\r\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\r\n    } }\r\n</ng-template>\r\n<ng-template #renderGeneral>\r\n    <div\r\n        class=\"renderGeneral\"\r\n        [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\"\r\n        [style.width]=\"\"\r\n        [attr.title]=\"value\"\r\n    >\r\n        @if (icon) {\r\n        <img loading=\"lazy\" [attr.rtl]=\"rtl\" [src]=\"icon\" />\r\n        }\r\n        <!-- <fd-text\r\n    #fdText\r\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n    [maxLines]=\"1\"\r\n    [text]=\"value\"\r\n    [fd-inline-help]=\"value\"\r\n    [disabled]=\"!fdText._hasMore\"\r\n  ></fd-text> -->\r\n\r\n        <!-- <bsu-barsa-text-ellipsis\r\n  [style.width]=\"column.$Width\"\r\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\r\n  [text]=\"value\"\r\n></bsu-barsa-text-ellipsis> -->\r\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\r\n{{ value }}\r\n</div> -->\r\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\r\n        <div            \r\n            [ellapsisText]=\"value\"\r\n            [disableEllapsis]=\"editMode\"\r\n            [class.ellapsis]=\"!disableEllapsis\"\r\n            [columnValue]=\"value\"\r\n            (ellapsised)=\"onElapsised($event)\"\r\n        ></div>\r\n        } @else{\r\n        <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\r\n        } }\r\n    </div>\r\n</ng-template>\r\n<ng-template #formControlTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\r\n                ? renderCellTemplate\r\n                : layoutControlTemplate\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #layoutControlTemplate>\r\n    @if (controlUi) {\r\n    <bsu-layout-control\r\n        [inlineEdit]=\"true\"\r\n        [caption]=\"column.Caption\"\r\n        [cellEdit]=\"cellEdit\"\r\n        [config]=\"controlUi\"\r\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\r\n        [showLabel]=\"formLayoutShowLabel\"\r\n    ></bsu-layout-control>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellListTasavir>\r\n    @if (mo[column.Name] && mo[column.Name].Images) {\r\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\r\n        @for (pic of mo[column.Name].Images; track pic) {\r\n        <img\r\n            fullscreen\r\n            fullscreenFiles\r\n            [files]=\"mo[column.Name].Images\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\r\n            style=\"width: 3rem; height: 3rem\"\r\n            loading=\"lazy\"\r\n        />\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileListKhati>\r\n    @if (mo[column.Name]) {\r\n    <div class=\"file-viewer-attachments\">\r\n        @for (file of mo[column.Name].Files; track file;let index=$index) { @if (!file.IsDeleted) {\r\n        <bsu-file-viewer-popover\r\n            #fileviewerPopover\r\n            intersectionObserver\r\n            [intersectionThreshold]=\"0.1\"\r\n            (visibilityChange)=\"$event === 'Visible' && onSetMaxWidth()\"\r\n            [file]=\"file\"\r\n            [index]=\"index\"\r\n            [attachmentViewType]=\"+attachmentViewType\"\r\n            [files]=\"mo[column.Name].Files\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [canDownload]=\"true\"\r\n            [disableRemove]=\"true\"\r\n            [fdType]=\"'transparent'\"\r\n            preventDefault\r\n            stopPropagation\r\n        ></bsu-file-viewer-popover>\r\n        }\r\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellFileInfo>\r\n    @if (mo[column.Name]) {\r\n    <fd-avatar\r\n        [transparent]=\"true\"\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellChecbox>\r\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\r\n</ng-template>\r\n<ng-template #renderChecboxImage>\r\n    @if (column.Extra?.TrueImage === '') {\r\n    {{ value }}\r\n    } @if (column.Extra?.TrueImage !== '') {\r\n    <img loading=\"lazy\" [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\r\n    }\r\n</ng-template>\r\n<ng-template #renderCellImage>\r\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\r\n    <fd-avatar\r\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\r\n        [transparent]=\"true\"\r\n        [image]=\"mo[column.Name]['Url']\"\r\n    ></fd-avatar>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit}\n"] }]
         }], propDecorators: { _filePopover: [{
                 type: ViewChild,
                 args: ['fileviewerPopover', { static: false, read: ElementRef }]
@@ -5106,11 +5106,11 @@ class LyLayoutContainerOfRootComponent extends LayoutPanelBaseComponent {
         this.isMobile = getDeviceIsMobile();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyLayoutContainerOfRootComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyLayoutContainerOfRootComponent, isStandalone: false, selector: "bsu-ly-layout-container-of-root", host: { properties: { "class.ismobile": "this.isMobile" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (config) { @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case\r\n('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} }\r\n<ng-content></ng-content>\r\n}\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" let-name=\"name\">\r\n    <bnrc-dynamic-layout\r\n        [config]=\"config\"\r\n        [selector]=\"selector\"\r\n        [name]=\"name\"\r\n        [module]=\"'BarsaSapUi'\"\r\n        [moduleFileName]=\"'BarsaSapUi'\"\r\n        [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n        [flex]=\"config.Bounds.width\"\r\n        [isSearchPanel]=\"isSearchPanel\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n}\r\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyLayoutContainerOfRootComponent, isStandalone: false, selector: "bsu-ly-layout-container-of-root", host: { properties: { "class.ismobile": "this.isMobile" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (config) { @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case\r\n('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} }\r\n<ng-content></ng-content>\r\n}\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" let-name=\"name\" let-module=\"module\"> \r\n    <bnrc-dynamic-layout\r\n        [config]=\"config\"\r\n        [selector]=\"selector\"\r\n        [name]=\"name\"\r\n        [module]=\"module || 'BarsaSapUi'\"\r\n        [moduleFileName]=\"'BarsaSapUi'\"\r\n        [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n        [flex]=\"config.Bounds.width\"\r\n        [isSearchPanel]=\"isSearchPanel\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n}\r\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyLayoutContainerOfRootComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-layout-container-of-root', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "@if (config) { @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case\r\n('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} }\r\n<ng-content></ng-content>\r\n}\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" let-name=\"name\">\r\n    <bnrc-dynamic-layout\r\n        [config]=\"config\"\r\n        [selector]=\"selector\"\r\n        [name]=\"name\"\r\n        [module]=\"'BarsaSapUi'\"\r\n        [moduleFileName]=\"'BarsaSapUi'\"\r\n        [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n        [flex]=\"config.Bounds.width\"\r\n        [isSearchPanel]=\"isSearchPanel\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n}\r\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"] }]
+            args: [{ selector: 'bsu-ly-layout-container-of-root', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "@if (config) { @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case\r\n('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} }\r\n<ng-content></ng-content>\r\n}\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" let-name=\"name\" let-module=\"module\"> \r\n    <bnrc-dynamic-layout\r\n        [config]=\"config\"\r\n        [selector]=\"selector\"\r\n        [name]=\"name\"\r\n        [module]=\"module || 'BarsaSapUi'\"\r\n        [moduleFileName]=\"'BarsaSapUi'\"\r\n        [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n        [flex]=\"config.Bounds.width\"\r\n        [isSearchPanel]=\"isSearchPanel\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n}\r\n", styles: [":host{display:block;width:100%;height:auto;position:relative}\n"] }]
         }], propDecorators: { viewRef: [{
                 type: ViewChild,
                 args: ['viewRefTemplate', { read: ViewContainerRef, static: true }]
@@ -5700,11 +5700,11 @@ class CardItemComponent extends BaseViewItemPropsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CardItemComponent, isStandalone: false, selector: "bsu-card-item", inputs: { setting: "setting", extraFooterComponent: "extraFooterComponent" }, providers: [FormPanelService], viewQueries: [{ propertyName: "_quickViewTemplate", first: true, predicate: ["quickViewTemplate"], descendants: true, static: true }, { propertyName: "_contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-card\r\n    [cardType]=\"setting.CardType$Caption\"\r\n    [interactive]=\"setting.IsInteractive === false ? false : true\"\r\n    class=\"docs-flex-item-margin\"\r\n    [class.openOnClick]=\"setting.openOnClick\"\r\n    [class.hide-header-border]=\"setting.HideHeaderBorder\"\r\n    [style.width]=\"cardWidth\"\r\n    [style.min-width]=\"minWidth\"\r\n    [style.max-width]=\"maxWidth\"\r\n    [class.card-media]=\"cardMedia\"\r\n    (click)=\"onRowCheck()\"\r\n    (dblclick)=\"onRowClick()\"\r\n>\r\n    @if(cardMedia){\r\n    <fd-card-media>\r\n        @if(isCardTypeBanner){\r\n        <div\r\n            fd-card-media-content-container\r\n            [legendColor]=\"setting.CustomColor ? null : 13\"\r\n            [style.background]=\"setting.CustomColor ? setting.CustomColor : null\"\r\n        >\r\n            <div fd-card-media-heading [level]=\"2\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            <p fd-card-media-text>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </p>\r\n            @if (contextMenuItems.length ) {\r\n\r\n            <bsu-ulv-context-menu\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [mo]=\"mo\"\r\n                [index]=\"index\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n                [deviceName]=\"deviceName\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [allColumns]=\"allColumns\"\r\n            ></bsu-ulv-context-menu>\r\n            }\r\n        </div>\r\n        }\r\n        <div fd-card-media-image-container #container>\r\n            <img\r\n                fd-card-media-image\r\n                [src]=\"\r\n                    setting.MediaField\r\n                        ? (mo[setting.MediaField.Name]?.FileId | picFieldSrc: 'ID':setting.MediaField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                alt=\"pic not loaded\"\r\n                [style.max-height.px]=\"isCardTypeBanner ? setting?.SliderHeight || 300 : null\"\r\n            />\r\n        </div>\r\n    </fd-card-media>\r\n    } @if(!isCardTypeBanner){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\r\n            context: {\r\n                $implicit: mo,\r\n                index: this.index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    } @if (!noContent || contextMenuItems) {\r\n    <fd-card-content ellipsify class=\"tw-flex tw-flex-col tw-justify-stretch tw-items-stretch\">\r\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\" class=\"tw-h-full tw-w-full tw-flex-1\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplateRef;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: setting.ContentComponent,\r\n                        componentSettings: setting.ContentComponent?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            @for(item of setting.ContentComponents?.MoDataList;track item.Id){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    contentTemplateComponent;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: item.Component,\r\n                        componentSettings: item.Component?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n        </div>\r\n    </fd-card-content>\r\n    } @if(detailsText || contextMenuEnabled && !isCardTypeBanner){\r\n    <fd-card-footer\r\n        [class.extra-footer]=\"extraFooterComponent?.Selector\"\r\n        [class.hasDetailsAndContextMenu]=\"detailsText && contextMenuEnabled && contextMenuInFooter\"\r\n    >\r\n        @if(extraFooterComponent?.Selector){\r\n        <bnrc-dynamic-item-component\r\n            style=\"display: block; flex: 1\"\r\n            [component]=\"extraFooterComponent\"\r\n            [mo]=\"mo\"\r\n            [styleIndex]=\"mo.$StyleIndex\"\r\n            [isChecked]=\"isChecked\"\r\n            [setting]=\"setting\"\r\n            [parameters]=\"extraFooterComponent.Settings\"\r\n            [editMode]=\"inlineEditMode\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [allColumns]=\"allColumns\"\r\n        ></bnrc-dynamic-item-component>\r\n        } @if(detailsText){<button *fdCardFooterActionItem fd-button fdType=\"transparent\" [fdPopoverTrigger]=\"popover\">\r\n            {{ detailsText }}\r\n        </button>\r\n        } @if(contextMenuInFooter){\r\n        <div\r\n            *fdCardFooterActionItem\r\n            ulvContextMenu\r\n            [allColumns]=\"allColumns\"\r\n            [footerMode]=\"false\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"mo\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n        ></div>\r\n        }\r\n        <fd-popover #popover>\r\n            @if (detailsColumns?.length) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    detailsColumnsTemplate;\r\n                    context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover>\r\n    </fd-card-footer>\r\n    }\r\n</fd-card>\r\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            detailsFormItems;\r\n            context: {\r\n                $implicit: detailsColumns,\r\n                mo: this.mo,\r\n                inlineEditMode: this.inlineEditMode,\r\n                layout94: layout94\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template\r\n    #detailsFormItems\r\n    let-detailsColumns\r\n    let-mo=\"mo\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    <div class=\"form-items\" class=\"tw-p-2\">\r\n        @for (column of detailsColumns; track column; let columnIndex = $index) {\r\n        <div\r\n            fd-form-item\r\n            class=\"!tw-flex-row\"\r\n            [dynCommand]=\"column.$CustomComponent?.DynamicCommand\"\r\n            [mo]=\"mo\"\r\n            [enableCommand]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n            bodyClick\r\n            [class.tw-cursor-pointer]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n        >\r\n            @if(!column.$CustomComponent?.HideColumnCaption) {<label fd-form-label for=\"input-2\"\r\n                >{{ column.Caption }}<span>:</span></label\r\n            >}\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    columnTemplate;\r\n                    context: {\r\n                        $implicit: column,\r\n                        mo: mo,\r\n                        index: columnIndex,\r\n                        inlineEditMode: inlineEditMode,\r\n                        layout94: layout94\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template\r\n    #columnTemplate\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n    let-disableEllapsis=\"disableEllapsis\"\r\n    let-fdTextMode=\"fdTextMode\"\r\n>\r\n    @if (column) {\r\n    <bsu-barsa-table-column\r\n        [mo]=\"mo\"\r\n        [allColumns]=\"allColumns\"\r\n        [column]=\"column\"\r\n        [isdirty]=\"false\"\r\n        [value]=\"column | columnValue: mo\"\r\n        [icon]=\"column | columnIcon: mo\"\r\n        [customComponent]=\"column.$CustomComponent\"\r\n        [column]=\"column\"\r\n        [disableEllapsis]=\"disableEllapsis === false ? false : true\"\r\n        [fdTextMode]=\"fdTextMode\"\r\n        [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\r\n        [inlineEditMode]=\"inlineEditMode\"\r\n        [isChecked]=\"isChecked\"\r\n        [index]=\"index\"\r\n        [formSetting]=\"formSetting\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [layout94]=\"layout94\"\r\n        (save)=\"onEditFormPanelSave(null)\"\r\n        (cancel)=\"onEditFormPanelCancel(null)\"\r\n        (tab)=\"onTabKeyDown($event, index)\"\r\n        (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\r\n    >\r\n    </bsu-barsa-table-column>\r\n\r\n    }\r\n</ng-template>\r\n<ng-template #quickViewTemplate let-mo let-index=\"index\">\r\n    @if (!noContent) {\r\n    <fd-quick-view [id]=\"'id'\">\r\n        <fd-quick-view-group>\r\n            @for (column of setting.FieldListMapped; track column) {\r\n            <fd-quick-view-group-item [class.rowDirection]=\"column?.$CustomComponent?.IsRowDirection\">\r\n                @if (column) { @if(!column.$CustomComponent?.HideColumnCaption) {<fd-quick-view-group-item-label>\r\n                    {{ column.Caption | bbbTranslate }} </fd-quick-view-group-item-label\r\n                >}\r\n                <fd-quick-view-group-item-content>\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: column,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            } @if (setting.DescriptionField) {\r\n            <fd-quick-view-group-item>\r\n                <fd-quick-view-group-item-content>\r\n                    @if (inlineEditMode && allowInlineEdit) {\r\n                    <fd-quick-view-group-item-label>\r\n                        {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                    </fd-quick-view-group-item-label>\r\n                    }\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.DescriptionField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                @if (setting.ActionFieldNameField) {\r\n                <fd-quick-view-group-item-content\r\n                    class=\"action\"\r\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\r\n                >\r\n                    <a fd-link>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.ActionFieldNameField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </a>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            }\r\n        </fd-quick-view-group>\r\n    </fd-quick-view>\r\n    }\r\n</ng-template>\r\n<ng-template #contentTemplate let-mo let-index=\"index\">\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow style=\"align-items: center\">\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @for (column of setting.FieldListMapped; track column) {\r\n                <div style=\"display: flex\">\r\n                    <label fd-form-label [colon]=\"true\">{{ column.Caption | bbbTranslate }}</label>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            columnTemplate;\r\n                            context: {\r\n                                $implicit: column,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                index: index\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (setting.DescriptionField) {\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @if (inlineEditMode && allowInlineEdit) {\r\n                <label>\r\n                    {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                </label>\r\n                }\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.DescriptionField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            }\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n<ng-template #avatar let-avatar let-visible=\"visible\" let-circle=\"circle\" let-avatarField=\"avatarField\">\r\n    @if (visible) {\r\n    <fd-avatar\r\n        alterIcon=\"alt|content|backup|default-icon\"\r\n        [circle]=\"circle\"\r\n        [image]=\"avatarField ? (mo[avatarField.Name]?.FileId | picFieldSrc: 'ID':avatarField.FieldDefId) : ''\"\r\n        [size]=\"\r\n            deviceSize === 'xl' || deviceSize === 'l' ? setting.AvatarSizeDesktop$Caption : setting.AvatarSize$Caption\r\n        \"\r\n        [glyph]=\"avatar || (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\"\r\n    >\r\n    </fd-avatar>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template\r\n    #contentTemplateComponent\r\n    let-mo\r\n    let-index=\"index\"\r\n    let-componentSettings=\"componentSettings\"\r\n    let-component=\"component\"\r\n>\r\n    <bnrc-dynamic-item-component\r\n        [component]=\"component\"\r\n        [mo]=\"mo\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"componentSettings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n    ></bnrc-dynamic-item-component>\r\n</ng-template>\r\n\r\n<ng-template #renderHeader let-mo let-index=\"index\">\r\n    @if(!hideOpenIcon && (openOnClick || (canView && deviceName !== 'desktop'))){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderMobileCanView;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }@else{\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderDesktop;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #renderHeaderDesktop let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderDesktop\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if (setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n            <span fd-card-counter status=\"positive\" [class.!tw-hidden]=\"!setting.CounterField\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></div>\r\n            }\r\n        </fd-card-main-header>\r\n        <ng-container *ngTemplateOutlet=\"extendedHeader\"></ng-container>\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #extendedHeader>\r\n  @if(setting.hasExtHeader){\r\n        <fd-card-extended-header>\r\n            <div fd-card-header-column>\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fd-card-header-column [align]=\"'right'\">\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </fd-card-extended-header>\r\n        }\r\n</ng-template>\r\n<ng-template #renderHeaderMobileCanView let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderMobileCanView\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if ( setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></div>\r\n            }@else {\r\n            <button\r\n                fd-button\r\n                fd-card-header-action\r\n                class=\"view-btn\"\r\n                stopPropagation\r\n                (click)=\"onRowClick()\"\r\n                [glyph]=\"navigationArrow\"\r\n                fdType=\"transparent\"\r\n            ></button>\r\n            }\r\n        </fd-card-main-header>\r\n        @if(setting.hasExtHeader){\r\n        <fd-card-extended-header>\r\n            <div fd-card-header-column>\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fd-card-header-column [align]=\"'right'\">\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </fd-card-extended-header>\r\n        }\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\r\n    <bnrc-card-dynamic-item-component\r\n        [component]=\"setting.HeaderComponent\"\r\n        [maxHeightHeader]=\"maxHeightHeader\"\r\n        [mo]=\"mo\"\r\n        [columnTemplate]=\"columnTemplate\"\r\n        [extendedHeaderTemplate]=\"extendedHeader\"\r\n        [layout94$]=\"layout$\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"setting.HeaderComponent.Settings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [canView]=\"canView\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [isCheckList]=\"isCheckList\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-card-dynamic-item-component>\r\n</ng-template>\r\n", styles: ["fd-card.fd-card--banner>fd-card-media{border-radius:inherit}fd-card.fd-card--banner>fd-card-media .fd-card__media-image-container{z-index:4}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card fd-card-content ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.extra-footer{flex-wrap:wrap}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card.hide-header-border ::ng-deep fd-card-header fd-card-main-header>.fd-card__header-main{border:none}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "hideOpenIcon", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "maxHeightHeader", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "component", type: i2.CardDynamicItemComponent, selector: "bnrc-card-dynamic-item-component", inputs: ["columnTemplate", "extendedHeaderTemplate"] }, { kind: "directive", type: i2.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[stopPropagation]" }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$3.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "directive", type: i7$3.CardHeaderActionDirective, selector: "[fd-card-header-action]" }, { kind: "component", type: i7$3.CardExtendedHeaderComponent, selector: "fd-card-extended-header", inputs: ["ariaRoleDescription", "align"] }, { kind: "directive", type: i7$3.CardHeaderRowDirective, selector: "[fd-card-header-row]" }, { kind: "directive", type: i7$3.CardHeaderColumnDirective, selector: "[fd-card-header-column]", inputs: ["align"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$3.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i7$3.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "directive", type: i7$3.CardCounterDirective, selector: "[fd-card-counter]", inputs: ["statusInput"] }, { kind: "component", type: i7$3.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$3.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i7$3.CardMediaComponent, selector: "fd-card-media", inputs: ["ariaRoleDescription", "hasPadding", "shellColor", "legendColor"] }, { kind: "directive", type: i7$3.CardMediaImageDirective, selector: "[fd-card-media-image]" }, { kind: "directive", type: i7$3.CardMediaImageContainerDirective, selector: "[fd-card-media-image-container]" }, { kind: "directive", type: i7$3.CardMediaContentContainerDirective, selector: "[fd-card-media-content-container]", inputs: ["isOverlay", "shellColor", "legendColor"] }, { kind: "directive", type: i7$3.CardMediaHeadingDirective, selector: "[fd-card-media-heading]", inputs: ["id", "level"] }, { kind: "directive", type: i7$3.CardMediaTextDirective, selector: "[fd-card-media-text]" }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i7$1.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i12.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i12.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i12.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i12.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: ["disableEllapsis", "fdTextMode"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CardItemComponent, isStandalone: false, selector: "bsu-card-item", inputs: { setting: "setting", extraFooterComponent: "extraFooterComponent" }, providers: [FormPanelService], viewQueries: [{ propertyName: "_quickViewTemplate", first: true, predicate: ["quickViewTemplate"], descendants: true, static: true }, { propertyName: "_contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-card\r\n    [cardType]=\"setting.CardType$Caption\"\r\n    [interactive]=\"setting.IsInteractive === false ? false : true\"\r\n    class=\"docs-flex-item-margin\"\r\n    [class.openOnClick]=\"setting.openOnClick\"\r\n    [class.hide-header-border]=\"setting.HideHeaderBorder\"\r\n    [style.width]=\"cardWidth\"\r\n    [style.min-width]=\"minWidth\"\r\n    [style.max-width]=\"maxWidth\"\r\n    [class.card-media]=\"cardMedia\"\r\n    (click)=\"onRowCheck()\"\r\n    (dblclick)=\"onRowClick()\"\r\n>\r\n    @if(cardMedia){\r\n    <fd-card-media>\r\n        @if(isCardTypeBanner){\r\n        <div\r\n            fd-card-media-content-container\r\n            [legendColor]=\"setting.CustomColor ? null : 13\"\r\n            [style.background]=\"setting.CustomColor ? setting.CustomColor : null\"\r\n        >\r\n            <div fd-card-media-heading [level]=\"2\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            <p fd-card-media-text>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </p>\r\n            @if (contextMenuItems.length ) {\r\n\r\n            <bsu-ulv-context-menu\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [mo]=\"mo\"\r\n                [index]=\"index\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n                [deviceName]=\"deviceName\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [allColumns]=\"allColumns\"\r\n            ></bsu-ulv-context-menu>\r\n            }\r\n        </div>\r\n        }\r\n        <div fd-card-media-image-container #container>\r\n            <img\r\n                fd-card-media-image\r\n                [src]=\"\r\n                    setting.MediaField\r\n                        ? (mo[setting.MediaField.Name]?.FileId | picFieldSrc: 'ID':setting.MediaField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                alt=\"pic not loaded\"\r\n                [style.max-height.px]=\"isCardTypeBanner ? setting?.SliderHeight || 300 : null\"\r\n                loading=\"lazy\"\r\n            />\r\n        </div>\r\n    </fd-card-media>\r\n    } @if(!isCardTypeBanner){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\r\n            context: {\r\n                $implicit: mo,\r\n                index: this.index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    } @if (!noContent || contextMenuItems) {\r\n    <fd-card-content ellipsify class=\"tw-flex tw-flex-col tw-justify-stretch tw-items-stretch\">\r\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\" class=\"tw-h-full tw-w-full tw-flex-1\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplateRef;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: setting.ContentComponent,\r\n                        componentSettings: setting.ContentComponent?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            @for(item of setting.ContentComponents?.MoDataList;track item.Id){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    contentTemplateComponent;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: item.Component,\r\n                        componentSettings: item.Component?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n        </div>\r\n    </fd-card-content>\r\n    } @if(detailsText || contextMenuEnabled && !isCardTypeBanner){\r\n    <fd-card-footer\r\n        [class.extra-footer]=\"extraFooterComponent?.Selector\"\r\n        [class.hasDetailsAndContextMenu]=\"detailsText && contextMenuEnabled && contextMenuInFooter\"\r\n    >\r\n        @if(extraFooterComponent?.Selector){\r\n        <bnrc-dynamic-item-component\r\n            style=\"display: block; flex: 1\"\r\n            [component]=\"extraFooterComponent\"\r\n            [mo]=\"mo\"\r\n            [styleIndex]=\"mo.$StyleIndex\"\r\n            [isChecked]=\"isChecked\"\r\n            [setting]=\"setting\"\r\n            [parameters]=\"extraFooterComponent.Settings\"\r\n            [editMode]=\"inlineEditMode\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [allColumns]=\"allColumns\"\r\n        ></bnrc-dynamic-item-component>\r\n        } @if(detailsText){<button *fdCardFooterActionItem fd-button fdType=\"transparent\" [fdPopoverTrigger]=\"popover\">\r\n            {{ detailsText }}\r\n        </button>\r\n        } @if(contextMenuInFooter){\r\n        <div\r\n            *fdCardFooterActionItem\r\n            ulvContextMenu\r\n            [allColumns]=\"allColumns\"\r\n            [footerMode]=\"false\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"mo\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n        ></div>\r\n        }\r\n        <fd-popover #popover>\r\n            @if (detailsColumns?.length) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    detailsColumnsTemplate;\r\n                    context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover>\r\n    </fd-card-footer>\r\n    }\r\n</fd-card>\r\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            detailsFormItems;\r\n            context: {\r\n                $implicit: detailsColumns,\r\n                mo: this.mo,\r\n                inlineEditMode: this.inlineEditMode,\r\n                layout94: layout94\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template\r\n    #detailsFormItems\r\n    let-detailsColumns\r\n    let-mo=\"mo\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    <div class=\"form-items\" class=\"tw-p-2\">\r\n        @for (column of detailsColumns; track column; let columnIndex = $index) {\r\n        <div\r\n            fd-form-item\r\n            class=\"!tw-flex-row\"\r\n            [dynCommand]=\"column.$CustomComponent?.DynamicCommand\"\r\n            [mo]=\"mo\"\r\n            [enableCommand]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n            bodyClick\r\n            [class.tw-cursor-pointer]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n        >\r\n            @if(!column.$CustomComponent?.HideColumnCaption) {<label fd-form-label for=\"input-2\"\r\n                >{{ column.Caption }}<span>:</span></label\r\n            >}\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    columnTemplate;\r\n                    context: {\r\n                        $implicit: column,\r\n                        mo: mo,\r\n                        index: columnIndex,\r\n                        inlineEditMode: inlineEditMode,\r\n                        layout94: layout94\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template\r\n    #columnTemplate\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n    let-disableEllapsis=\"disableEllapsis\"\r\n    let-fdTextMode=\"fdTextMode\"\r\n>\r\n    @if (column) {\r\n    <bsu-barsa-table-column\r\n        [mo]=\"mo\"\r\n        [allColumns]=\"allColumns\"\r\n        [column]=\"column\"\r\n        [isdirty]=\"false\"\r\n        [value]=\"column | columnValue: mo\"\r\n        [icon]=\"column | columnIcon: mo\"\r\n        [customComponent]=\"column.$CustomComponent\"\r\n        [column]=\"column\"\r\n        [disableEllapsis]=\"disableEllapsis === false ? false : true\"\r\n        [fdTextMode]=\"fdTextMode\"\r\n        [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\r\n        [inlineEditMode]=\"inlineEditMode\"\r\n        [isChecked]=\"isChecked\"\r\n        [index]=\"index\"\r\n        [formSetting]=\"formSetting\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [layout94]=\"layout94\"\r\n        (save)=\"onEditFormPanelSave(null)\"\r\n        (cancel)=\"onEditFormPanelCancel(null)\"\r\n        (tab)=\"onTabKeyDown($event, index)\"\r\n        (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\r\n    >\r\n    </bsu-barsa-table-column>\r\n\r\n    }\r\n</ng-template>\r\n<ng-template #quickViewTemplate let-mo let-index=\"index\">\r\n    @if (!noContent) {\r\n    <fd-quick-view [id]=\"'id'\">\r\n        <fd-quick-view-group>\r\n            @for (column of setting.FieldListMapped; track column) {\r\n            <fd-quick-view-group-item [class.rowDirection]=\"column?.$CustomComponent?.IsRowDirection\">\r\n                @if (column) { @if(!column.$CustomComponent?.HideColumnCaption) {<fd-quick-view-group-item-label>\r\n                    {{ column.Caption | bbbTranslate }} </fd-quick-view-group-item-label\r\n                >}\r\n                <fd-quick-view-group-item-content>\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: column,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            } @if (setting.DescriptionField) {\r\n            <fd-quick-view-group-item>\r\n                <fd-quick-view-group-item-content>\r\n                    @if (inlineEditMode && allowInlineEdit) {\r\n                    <fd-quick-view-group-item-label>\r\n                        {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                    </fd-quick-view-group-item-label>\r\n                    }\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.DescriptionField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                @if (setting.ActionFieldNameField) {\r\n                <fd-quick-view-group-item-content\r\n                    class=\"action\"\r\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\r\n                >\r\n                    <a fd-link>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.ActionFieldNameField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </a>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            }\r\n        </fd-quick-view-group>\r\n    </fd-quick-view>\r\n    }\r\n</ng-template>\r\n<ng-template #contentTemplate let-mo let-index=\"index\">\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow style=\"align-items: center\">\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @for (column of setting.FieldListMapped; track column) {\r\n                <div style=\"display: flex\">\r\n                    <label fd-form-label [colon]=\"true\">{{ column.Caption | bbbTranslate }}</label>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            columnTemplate;\r\n                            context: {\r\n                                $implicit: column,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                index: index\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (setting.DescriptionField) {\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @if (inlineEditMode && allowInlineEdit) {\r\n                <label>\r\n                    {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                </label>\r\n                }\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.DescriptionField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            }\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n<ng-template #avatar let-avatar let-visible=\"visible\" let-circle=\"circle\" let-avatarField=\"avatarField\">\r\n    @if (visible) {\r\n    <fd-avatar\r\n        alterIcon=\"alt|content|backup|default-icon\"\r\n        [circle]=\"circle\"\r\n        [image]=\"avatarField ? (mo[avatarField.Name]?.FileId | picFieldSrc: 'ID':avatarField.FieldDefId) : ''\"\r\n        [size]=\"\r\n            deviceSize === 'xl' || deviceSize === 'l' ? setting.AvatarSizeDesktop$Caption : setting.AvatarSize$Caption\r\n        \"\r\n        [glyph]=\"avatar || (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\"\r\n    >\r\n    </fd-avatar>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template\r\n    #contentTemplateComponent\r\n    let-mo\r\n    let-index=\"index\"\r\n    let-componentSettings=\"componentSettings\"\r\n    let-component=\"component\"\r\n>\r\n    <bnrc-dynamic-item-component\r\n        [component]=\"component\"\r\n        [mo]=\"mo\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"componentSettings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n    ></bnrc-dynamic-item-component>\r\n</ng-template>\r\n\r\n<ng-template #renderHeader let-mo let-index=\"index\">\r\n    @if(!hideOpenIcon && (openOnClick || (canView && deviceName !== 'desktop'))){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderMobileCanView;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }@else{\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderDesktop;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #renderHeaderDesktop let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderDesktop\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if (setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n            <span fd-card-counter status=\"positive\" [class.!tw-hidden]=\"!setting.CounterField\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></div>\r\n            }\r\n        </fd-card-main-header>\r\n        <ng-container *ngTemplateOutlet=\"extendedHeader\"></ng-container>\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #extendedHeader>\r\n  @if(setting.hasExtHeader){\r\n        <fd-card-extended-header>\r\n            <div fd-card-header-column>\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fd-card-header-column [align]=\"'right'\">\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </fd-card-extended-header>\r\n        }\r\n</ng-template>\r\n<ng-template #renderHeaderMobileCanView let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderMobileCanView\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if ( setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></div>\r\n            }@else {\r\n            <button\r\n                fd-button\r\n                fd-card-header-action\r\n                class=\"view-btn\"\r\n                stopPropagation\r\n                (click)=\"onRowClick()\"\r\n                [glyph]=\"navigationArrow\"\r\n                fdType=\"transparent\"\r\n            ></button>\r\n            }\r\n        </fd-card-main-header>\r\n        @if(setting.hasExtHeader){\r\n        <fd-card-extended-header>\r\n            <div fd-card-header-column>\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fd-card-header-column [align]=\"'right'\">\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </fd-card-extended-header>\r\n        }\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\r\n    <bnrc-card-dynamic-item-component\r\n        [component]=\"setting.HeaderComponent\"\r\n        [maxHeightHeader]=\"maxHeightHeader\"\r\n        [mo]=\"mo\"\r\n        [columnTemplate]=\"columnTemplate\"\r\n        [extendedHeaderTemplate]=\"extendedHeader\"\r\n        [layout94$]=\"layout$\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"setting.HeaderComponent.Settings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [canView]=\"canView\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [isCheckList]=\"isCheckList\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-card-dynamic-item-component>\r\n</ng-template>\r\n", styles: ["fd-card.fd-card--banner>fd-card-media{border-radius:inherit}fd-card.fd-card--banner>fd-card-media .fd-card__media-image-container{z-index:4}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card fd-card-content ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.extra-footer{flex-wrap:wrap}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card.hide-header-border ::ng-deep fd-card-header fd-card-main-header>.fd-card__header-main{border:none}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "hideOpenIcon", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "maxHeightHeader", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "component", type: i2.CardDynamicItemComponent, selector: "bnrc-card-dynamic-item-component", inputs: ["columnTemplate", "extendedHeaderTemplate"] }, { kind: "directive", type: i2.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[stopPropagation]" }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$3.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "directive", type: i7$3.CardHeaderActionDirective, selector: "[fd-card-header-action]" }, { kind: "component", type: i7$3.CardExtendedHeaderComponent, selector: "fd-card-extended-header", inputs: ["ariaRoleDescription", "align"] }, { kind: "directive", type: i7$3.CardHeaderRowDirective, selector: "[fd-card-header-row]" }, { kind: "directive", type: i7$3.CardHeaderColumnDirective, selector: "[fd-card-header-column]", inputs: ["align"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$3.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i7$3.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "directive", type: i7$3.CardCounterDirective, selector: "[fd-card-counter]", inputs: ["statusInput"] }, { kind: "component", type: i7$3.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$3.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i7$3.CardMediaComponent, selector: "fd-card-media", inputs: ["ariaRoleDescription", "hasPadding", "shellColor", "legendColor"] }, { kind: "directive", type: i7$3.CardMediaImageDirective, selector: "[fd-card-media-image]" }, { kind: "directive", type: i7$3.CardMediaImageContainerDirective, selector: "[fd-card-media-image-container]" }, { kind: "directive", type: i7$3.CardMediaContentContainerDirective, selector: "[fd-card-media-content-container]", inputs: ["isOverlay", "shellColor", "legendColor"] }, { kind: "directive", type: i7$3.CardMediaHeadingDirective, selector: "[fd-card-media-heading]", inputs: ["id", "level"] }, { kind: "directive", type: i7$3.CardMediaTextDirective, selector: "[fd-card-media-text]" }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i7$1.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i12.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i12.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i12.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i12.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: ["disableEllapsis", "fdTextMode"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-card-item', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-card\r\n    [cardType]=\"setting.CardType$Caption\"\r\n    [interactive]=\"setting.IsInteractive === false ? false : true\"\r\n    class=\"docs-flex-item-margin\"\r\n    [class.openOnClick]=\"setting.openOnClick\"\r\n    [class.hide-header-border]=\"setting.HideHeaderBorder\"\r\n    [style.width]=\"cardWidth\"\r\n    [style.min-width]=\"minWidth\"\r\n    [style.max-width]=\"maxWidth\"\r\n    [class.card-media]=\"cardMedia\"\r\n    (click)=\"onRowCheck()\"\r\n    (dblclick)=\"onRowClick()\"\r\n>\r\n    @if(cardMedia){\r\n    <fd-card-media>\r\n        @if(isCardTypeBanner){\r\n        <div\r\n            fd-card-media-content-container\r\n            [legendColor]=\"setting.CustomColor ? null : 13\"\r\n            [style.background]=\"setting.CustomColor ? setting.CustomColor : null\"\r\n        >\r\n            <div fd-card-media-heading [level]=\"2\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            <p fd-card-media-text>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </p>\r\n            @if (contextMenuItems.length ) {\r\n\r\n            <bsu-ulv-context-menu\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [mo]=\"mo\"\r\n                [index]=\"index\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n                [deviceName]=\"deviceName\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [allColumns]=\"allColumns\"\r\n            ></bsu-ulv-context-menu>\r\n            }\r\n        </div>\r\n        }\r\n        <div fd-card-media-image-container #container>\r\n            <img\r\n                fd-card-media-image\r\n                [src]=\"\r\n                    setting.MediaField\r\n                        ? (mo[setting.MediaField.Name]?.FileId | picFieldSrc: 'ID':setting.MediaField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                alt=\"pic not loaded\"\r\n                [style.max-height.px]=\"isCardTypeBanner ? setting?.SliderHeight || 300 : null\"\r\n            />\r\n        </div>\r\n    </fd-card-media>\r\n    } @if(!isCardTypeBanner){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\r\n            context: {\r\n                $implicit: mo,\r\n                index: this.index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    } @if (!noContent || contextMenuItems) {\r\n    <fd-card-content ellipsify class=\"tw-flex tw-flex-col tw-justify-stretch tw-items-stretch\">\r\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\" class=\"tw-h-full tw-w-full tw-flex-1\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplateRef;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: setting.ContentComponent,\r\n                        componentSettings: setting.ContentComponent?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            @for(item of setting.ContentComponents?.MoDataList;track item.Id){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    contentTemplateComponent;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: item.Component,\r\n                        componentSettings: item.Component?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n        </div>\r\n    </fd-card-content>\r\n    } @if(detailsText || contextMenuEnabled && !isCardTypeBanner){\r\n    <fd-card-footer\r\n        [class.extra-footer]=\"extraFooterComponent?.Selector\"\r\n        [class.hasDetailsAndContextMenu]=\"detailsText && contextMenuEnabled && contextMenuInFooter\"\r\n    >\r\n        @if(extraFooterComponent?.Selector){\r\n        <bnrc-dynamic-item-component\r\n            style=\"display: block; flex: 1\"\r\n            [component]=\"extraFooterComponent\"\r\n            [mo]=\"mo\"\r\n            [styleIndex]=\"mo.$StyleIndex\"\r\n            [isChecked]=\"isChecked\"\r\n            [setting]=\"setting\"\r\n            [parameters]=\"extraFooterComponent.Settings\"\r\n            [editMode]=\"inlineEditMode\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [allColumns]=\"allColumns\"\r\n        ></bnrc-dynamic-item-component>\r\n        } @if(detailsText){<button *fdCardFooterActionItem fd-button fdType=\"transparent\" [fdPopoverTrigger]=\"popover\">\r\n            {{ detailsText }}\r\n        </button>\r\n        } @if(contextMenuInFooter){\r\n        <div\r\n            *fdCardFooterActionItem\r\n            ulvContextMenu\r\n            [allColumns]=\"allColumns\"\r\n            [footerMode]=\"false\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"mo\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n        ></div>\r\n        }\r\n        <fd-popover #popover>\r\n            @if (detailsColumns?.length) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    detailsColumnsTemplate;\r\n                    context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover>\r\n    </fd-card-footer>\r\n    }\r\n</fd-card>\r\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            detailsFormItems;\r\n            context: {\r\n                $implicit: detailsColumns,\r\n                mo: this.mo,\r\n                inlineEditMode: this.inlineEditMode,\r\n                layout94: layout94\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template\r\n    #detailsFormItems\r\n    let-detailsColumns\r\n    let-mo=\"mo\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    <div class=\"form-items\" class=\"tw-p-2\">\r\n        @for (column of detailsColumns; track column; let columnIndex = $index) {\r\n        <div\r\n            fd-form-item\r\n            class=\"!tw-flex-row\"\r\n            [dynCommand]=\"column.$CustomComponent?.DynamicCommand\"\r\n            [mo]=\"mo\"\r\n            [enableCommand]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n            bodyClick\r\n            [class.tw-cursor-pointer]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n        >\r\n            @if(!column.$CustomComponent?.HideColumnCaption) {<label fd-form-label for=\"input-2\"\r\n                >{{ column.Caption }}<span>:</span></label\r\n            >}\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    columnTemplate;\r\n                    context: {\r\n                        $implicit: column,\r\n                        mo: mo,\r\n                        index: columnIndex,\r\n                        inlineEditMode: inlineEditMode,\r\n                        layout94: layout94\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template\r\n    #columnTemplate\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n    let-disableEllapsis=\"disableEllapsis\"\r\n    let-fdTextMode=\"fdTextMode\"\r\n>\r\n    @if (column) {\r\n    <bsu-barsa-table-column\r\n        [mo]=\"mo\"\r\n        [allColumns]=\"allColumns\"\r\n        [column]=\"column\"\r\n        [isdirty]=\"false\"\r\n        [value]=\"column | columnValue: mo\"\r\n        [icon]=\"column | columnIcon: mo\"\r\n        [customComponent]=\"column.$CustomComponent\"\r\n        [column]=\"column\"\r\n        [disableEllapsis]=\"disableEllapsis === false ? false : true\"\r\n        [fdTextMode]=\"fdTextMode\"\r\n        [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\r\n        [inlineEditMode]=\"inlineEditMode\"\r\n        [isChecked]=\"isChecked\"\r\n        [index]=\"index\"\r\n        [formSetting]=\"formSetting\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [layout94]=\"layout94\"\r\n        (save)=\"onEditFormPanelSave(null)\"\r\n        (cancel)=\"onEditFormPanelCancel(null)\"\r\n        (tab)=\"onTabKeyDown($event, index)\"\r\n        (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\r\n    >\r\n    </bsu-barsa-table-column>\r\n\r\n    }\r\n</ng-template>\r\n<ng-template #quickViewTemplate let-mo let-index=\"index\">\r\n    @if (!noContent) {\r\n    <fd-quick-view [id]=\"'id'\">\r\n        <fd-quick-view-group>\r\n            @for (column of setting.FieldListMapped; track column) {\r\n            <fd-quick-view-group-item [class.rowDirection]=\"column?.$CustomComponent?.IsRowDirection\">\r\n                @if (column) { @if(!column.$CustomComponent?.HideColumnCaption) {<fd-quick-view-group-item-label>\r\n                    {{ column.Caption | bbbTranslate }} </fd-quick-view-group-item-label\r\n                >}\r\n                <fd-quick-view-group-item-content>\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: column,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            } @if (setting.DescriptionField) {\r\n            <fd-quick-view-group-item>\r\n                <fd-quick-view-group-item-content>\r\n                    @if (inlineEditMode && allowInlineEdit) {\r\n                    <fd-quick-view-group-item-label>\r\n                        {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                    </fd-quick-view-group-item-label>\r\n                    }\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.DescriptionField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                @if (setting.ActionFieldNameField) {\r\n                <fd-quick-view-group-item-content\r\n                    class=\"action\"\r\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\r\n                >\r\n                    <a fd-link>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.ActionFieldNameField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </a>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            }\r\n        </fd-quick-view-group>\r\n    </fd-quick-view>\r\n    }\r\n</ng-template>\r\n<ng-template #contentTemplate let-mo let-index=\"index\">\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow style=\"align-items: center\">\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @for (column of setting.FieldListMapped; track column) {\r\n                <div style=\"display: flex\">\r\n                    <label fd-form-label [colon]=\"true\">{{ column.Caption | bbbTranslate }}</label>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            columnTemplate;\r\n                            context: {\r\n                                $implicit: column,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                index: index\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (setting.DescriptionField) {\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @if (inlineEditMode && allowInlineEdit) {\r\n                <label>\r\n                    {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                </label>\r\n                }\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.DescriptionField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            }\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n<ng-template #avatar let-avatar let-visible=\"visible\" let-circle=\"circle\" let-avatarField=\"avatarField\">\r\n    @if (visible) {\r\n    <fd-avatar\r\n        alterIcon=\"alt|content|backup|default-icon\"\r\n        [circle]=\"circle\"\r\n        [image]=\"avatarField ? (mo[avatarField.Name]?.FileId | picFieldSrc: 'ID':avatarField.FieldDefId) : ''\"\r\n        [size]=\"\r\n            deviceSize === 'xl' || deviceSize === 'l' ? setting.AvatarSizeDesktop$Caption : setting.AvatarSize$Caption\r\n        \"\r\n        [glyph]=\"avatar || (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\"\r\n    >\r\n    </fd-avatar>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template\r\n    #contentTemplateComponent\r\n    let-mo\r\n    let-index=\"index\"\r\n    let-componentSettings=\"componentSettings\"\r\n    let-component=\"component\"\r\n>\r\n    <bnrc-dynamic-item-component\r\n        [component]=\"component\"\r\n        [mo]=\"mo\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"componentSettings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n    ></bnrc-dynamic-item-component>\r\n</ng-template>\r\n\r\n<ng-template #renderHeader let-mo let-index=\"index\">\r\n    @if(!hideOpenIcon && (openOnClick || (canView && deviceName !== 'desktop'))){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderMobileCanView;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }@else{\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderDesktop;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #renderHeaderDesktop let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderDesktop\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if (setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n            <span fd-card-counter status=\"positive\" [class.!tw-hidden]=\"!setting.CounterField\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></div>\r\n            }\r\n        </fd-card-main-header>\r\n        <ng-container *ngTemplateOutlet=\"extendedHeader\"></ng-container>\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #extendedHeader>\r\n  @if(setting.hasExtHeader){\r\n        <fd-card-extended-header>\r\n            <div fd-card-header-column>\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fd-card-header-column [align]=\"'right'\">\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </fd-card-extended-header>\r\n        }\r\n</ng-template>\r\n<ng-template #renderHeaderMobileCanView let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderMobileCanView\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if ( setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></div>\r\n            }@else {\r\n            <button\r\n                fd-button\r\n                fd-card-header-action\r\n                class=\"view-btn\"\r\n                stopPropagation\r\n                (click)=\"onRowClick()\"\r\n                [glyph]=\"navigationArrow\"\r\n                fdType=\"transparent\"\r\n            ></button>\r\n            }\r\n        </fd-card-main-header>\r\n        @if(setting.hasExtHeader){\r\n        <fd-card-extended-header>\r\n            <div fd-card-header-column>\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fd-card-header-column [align]=\"'right'\">\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </fd-card-extended-header>\r\n        }\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\r\n    <bnrc-card-dynamic-item-component\r\n        [component]=\"setting.HeaderComponent\"\r\n        [maxHeightHeader]=\"maxHeightHeader\"\r\n        [mo]=\"mo\"\r\n        [columnTemplate]=\"columnTemplate\"\r\n        [extendedHeaderTemplate]=\"extendedHeader\"\r\n        [layout94$]=\"layout$\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"setting.HeaderComponent.Settings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [canView]=\"canView\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [isCheckList]=\"isCheckList\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-card-dynamic-item-component>\r\n</ng-template>\r\n", styles: ["fd-card.fd-card--banner>fd-card-media{border-radius:inherit}fd-card.fd-card--banner>fd-card-media .fd-card__media-image-container{z-index:4}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card fd-card-content ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.extra-footer{flex-wrap:wrap}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card.hide-header-border ::ng-deep fd-card-header fd-card-main-header>.fd-card__header-main{border:none}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"] }]
+            args: [{ selector: 'bsu-card-item', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-card\r\n    [cardType]=\"setting.CardType$Caption\"\r\n    [interactive]=\"setting.IsInteractive === false ? false : true\"\r\n    class=\"docs-flex-item-margin\"\r\n    [class.openOnClick]=\"setting.openOnClick\"\r\n    [class.hide-header-border]=\"setting.HideHeaderBorder\"\r\n    [style.width]=\"cardWidth\"\r\n    [style.min-width]=\"minWidth\"\r\n    [style.max-width]=\"maxWidth\"\r\n    [class.card-media]=\"cardMedia\"\r\n    (click)=\"onRowCheck()\"\r\n    (dblclick)=\"onRowClick()\"\r\n>\r\n    @if(cardMedia){\r\n    <fd-card-media>\r\n        @if(isCardTypeBanner){\r\n        <div\r\n            fd-card-media-content-container\r\n            [legendColor]=\"setting.CustomColor ? null : 13\"\r\n            [style.background]=\"setting.CustomColor ? setting.CustomColor : null\"\r\n        >\r\n            <div fd-card-media-heading [level]=\"2\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            <p fd-card-media-text>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </p>\r\n            @if (contextMenuItems.length ) {\r\n\r\n            <bsu-ulv-context-menu\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [mo]=\"mo\"\r\n                [index]=\"index\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n                [deviceName]=\"deviceName\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [allColumns]=\"allColumns\"\r\n            ></bsu-ulv-context-menu>\r\n            }\r\n        </div>\r\n        }\r\n        <div fd-card-media-image-container #container>\r\n            <img\r\n                fd-card-media-image\r\n                [src]=\"\r\n                    setting.MediaField\r\n                        ? (mo[setting.MediaField.Name]?.FileId | picFieldSrc: 'ID':setting.MediaField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                alt=\"pic not loaded\"\r\n                [style.max-height.px]=\"isCardTypeBanner ? setting?.SliderHeight || 300 : null\"\r\n                loading=\"lazy\"\r\n            />\r\n        </div>\r\n    </fd-card-media>\r\n    } @if(!isCardTypeBanner){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\r\n            context: {\r\n                $implicit: mo,\r\n                index: this.index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    } @if (!noContent || contextMenuItems) {\r\n    <fd-card-content ellipsify class=\"tw-flex tw-flex-col tw-justify-stretch tw-items-stretch\">\r\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\" class=\"tw-h-full tw-w-full tw-flex-1\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplateRef;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: setting.ContentComponent,\r\n                        componentSettings: setting.ContentComponent?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            @for(item of setting.ContentComponents?.MoDataList;track item.Id){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    contentTemplateComponent;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: item.Component,\r\n                        componentSettings: item.Component?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n        </div>\r\n    </fd-card-content>\r\n    } @if(detailsText || contextMenuEnabled && !isCardTypeBanner){\r\n    <fd-card-footer\r\n        [class.extra-footer]=\"extraFooterComponent?.Selector\"\r\n        [class.hasDetailsAndContextMenu]=\"detailsText && contextMenuEnabled && contextMenuInFooter\"\r\n    >\r\n        @if(extraFooterComponent?.Selector){\r\n        <bnrc-dynamic-item-component\r\n            style=\"display: block; flex: 1\"\r\n            [component]=\"extraFooterComponent\"\r\n            [mo]=\"mo\"\r\n            [styleIndex]=\"mo.$StyleIndex\"\r\n            [isChecked]=\"isChecked\"\r\n            [setting]=\"setting\"\r\n            [parameters]=\"extraFooterComponent.Settings\"\r\n            [editMode]=\"inlineEditMode\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [allColumns]=\"allColumns\"\r\n        ></bnrc-dynamic-item-component>\r\n        } @if(detailsText){<button *fdCardFooterActionItem fd-button fdType=\"transparent\" [fdPopoverTrigger]=\"popover\">\r\n            {{ detailsText }}\r\n        </button>\r\n        } @if(contextMenuInFooter){\r\n        <div\r\n            *fdCardFooterActionItem\r\n            ulvContextMenu\r\n            [allColumns]=\"allColumns\"\r\n            [footerMode]=\"false\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"mo\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n        ></div>\r\n        }\r\n        <fd-popover #popover>\r\n            @if (detailsColumns?.length) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    detailsColumnsTemplate;\r\n                    context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover>\r\n    </fd-card-footer>\r\n    }\r\n</fd-card>\r\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            detailsFormItems;\r\n            context: {\r\n                $implicit: detailsColumns,\r\n                mo: this.mo,\r\n                inlineEditMode: this.inlineEditMode,\r\n                layout94: layout94\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template\r\n    #detailsFormItems\r\n    let-detailsColumns\r\n    let-mo=\"mo\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    <div class=\"form-items\" class=\"tw-p-2\">\r\n        @for (column of detailsColumns; track column; let columnIndex = $index) {\r\n        <div\r\n            fd-form-item\r\n            class=\"!tw-flex-row\"\r\n            [dynCommand]=\"column.$CustomComponent?.DynamicCommand\"\r\n            [mo]=\"mo\"\r\n            [enableCommand]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n            bodyClick\r\n            [class.tw-cursor-pointer]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n        >\r\n            @if(!column.$CustomComponent?.HideColumnCaption) {<label fd-form-label for=\"input-2\"\r\n                >{{ column.Caption }}<span>:</span></label\r\n            >}\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    columnTemplate;\r\n                    context: {\r\n                        $implicit: column,\r\n                        mo: mo,\r\n                        index: columnIndex,\r\n                        inlineEditMode: inlineEditMode,\r\n                        layout94: layout94\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template\r\n    #columnTemplate\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n    let-disableEllapsis=\"disableEllapsis\"\r\n    let-fdTextMode=\"fdTextMode\"\r\n>\r\n    @if (column) {\r\n    <bsu-barsa-table-column\r\n        [mo]=\"mo\"\r\n        [allColumns]=\"allColumns\"\r\n        [column]=\"column\"\r\n        [isdirty]=\"false\"\r\n        [value]=\"column | columnValue: mo\"\r\n        [icon]=\"column | columnIcon: mo\"\r\n        [customComponent]=\"column.$CustomComponent\"\r\n        [column]=\"column\"\r\n        [disableEllapsis]=\"disableEllapsis === false ? false : true\"\r\n        [fdTextMode]=\"fdTextMode\"\r\n        [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\r\n        [inlineEditMode]=\"inlineEditMode\"\r\n        [isChecked]=\"isChecked\"\r\n        [index]=\"index\"\r\n        [formSetting]=\"formSetting\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [layout94]=\"layout94\"\r\n        (save)=\"onEditFormPanelSave(null)\"\r\n        (cancel)=\"onEditFormPanelCancel(null)\"\r\n        (tab)=\"onTabKeyDown($event, index)\"\r\n        (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\r\n    >\r\n    </bsu-barsa-table-column>\r\n\r\n    }\r\n</ng-template>\r\n<ng-template #quickViewTemplate let-mo let-index=\"index\">\r\n    @if (!noContent) {\r\n    <fd-quick-view [id]=\"'id'\">\r\n        <fd-quick-view-group>\r\n            @for (column of setting.FieldListMapped; track column) {\r\n            <fd-quick-view-group-item [class.rowDirection]=\"column?.$CustomComponent?.IsRowDirection\">\r\n                @if (column) { @if(!column.$CustomComponent?.HideColumnCaption) {<fd-quick-view-group-item-label>\r\n                    {{ column.Caption | bbbTranslate }} </fd-quick-view-group-item-label\r\n                >}\r\n                <fd-quick-view-group-item-content>\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: column,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            } @if (setting.DescriptionField) {\r\n            <fd-quick-view-group-item>\r\n                <fd-quick-view-group-item-content>\r\n                    @if (inlineEditMode && allowInlineEdit) {\r\n                    <fd-quick-view-group-item-label>\r\n                        {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                    </fd-quick-view-group-item-label>\r\n                    }\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.DescriptionField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                @if (setting.ActionFieldNameField) {\r\n                <fd-quick-view-group-item-content\r\n                    class=\"action\"\r\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\r\n                >\r\n                    <a fd-link>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.ActionFieldNameField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </a>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            }\r\n        </fd-quick-view-group>\r\n    </fd-quick-view>\r\n    }\r\n</ng-template>\r\n<ng-template #contentTemplate let-mo let-index=\"index\">\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow style=\"align-items: center\">\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @for (column of setting.FieldListMapped; track column) {\r\n                <div style=\"display: flex\">\r\n                    <label fd-form-label [colon]=\"true\">{{ column.Caption | bbbTranslate }}</label>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            columnTemplate;\r\n                            context: {\r\n                                $implicit: column,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                index: index\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (setting.DescriptionField) {\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @if (inlineEditMode && allowInlineEdit) {\r\n                <label>\r\n                    {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                </label>\r\n                }\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.DescriptionField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            }\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n<ng-template #avatar let-avatar let-visible=\"visible\" let-circle=\"circle\" let-avatarField=\"avatarField\">\r\n    @if (visible) {\r\n    <fd-avatar\r\n        alterIcon=\"alt|content|backup|default-icon\"\r\n        [circle]=\"circle\"\r\n        [image]=\"avatarField ? (mo[avatarField.Name]?.FileId | picFieldSrc: 'ID':avatarField.FieldDefId) : ''\"\r\n        [size]=\"\r\n            deviceSize === 'xl' || deviceSize === 'l' ? setting.AvatarSizeDesktop$Caption : setting.AvatarSize$Caption\r\n        \"\r\n        [glyph]=\"avatar || (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\"\r\n    >\r\n    </fd-avatar>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template\r\n    #contentTemplateComponent\r\n    let-mo\r\n    let-index=\"index\"\r\n    let-componentSettings=\"componentSettings\"\r\n    let-component=\"component\"\r\n>\r\n    <bnrc-dynamic-item-component\r\n        [component]=\"component\"\r\n        [mo]=\"mo\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"componentSettings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n    ></bnrc-dynamic-item-component>\r\n</ng-template>\r\n\r\n<ng-template #renderHeader let-mo let-index=\"index\">\r\n    @if(!hideOpenIcon && (openOnClick || (canView && deviceName !== 'desktop'))){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderMobileCanView;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }@else{\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderDesktop;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #renderHeaderDesktop let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderDesktop\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if (setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n            <span fd-card-counter status=\"positive\" [class.!tw-hidden]=\"!setting.CounterField\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></div>\r\n            }\r\n        </fd-card-main-header>\r\n        <ng-container *ngTemplateOutlet=\"extendedHeader\"></ng-container>\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #extendedHeader>\r\n  @if(setting.hasExtHeader){\r\n        <fd-card-extended-header>\r\n            <div fd-card-header-column>\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fd-card-header-column [align]=\"'right'\">\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </fd-card-extended-header>\r\n        }\r\n</ng-template>\r\n<ng-template #renderHeaderMobileCanView let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderMobileCanView\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if ( setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></div>\r\n            }@else {\r\n            <button\r\n                fd-button\r\n                fd-card-header-action\r\n                class=\"view-btn\"\r\n                stopPropagation\r\n                (click)=\"onRowClick()\"\r\n                [glyph]=\"navigationArrow\"\r\n                fdType=\"transparent\"\r\n            ></button>\r\n            }\r\n        </fd-card-main-header>\r\n        @if(setting.hasExtHeader){\r\n        <fd-card-extended-header>\r\n            <div fd-card-header-column>\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fd-card-header-column [align]=\"'right'\">\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"columnTemplate; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </fd-card-extended-header>\r\n        }\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\r\n    <bnrc-card-dynamic-item-component\r\n        [component]=\"setting.HeaderComponent\"\r\n        [maxHeightHeader]=\"maxHeightHeader\"\r\n        [mo]=\"mo\"\r\n        [columnTemplate]=\"columnTemplate\"\r\n        [extendedHeaderTemplate]=\"extendedHeader\"\r\n        [layout94$]=\"layout$\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"setting.HeaderComponent.Settings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [canView]=\"canView\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [isCheckList]=\"isCheckList\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-card-dynamic-item-component>\r\n</ng-template>\r\n", styles: ["fd-card.fd-card--banner>fd-card-media{border-radius:inherit}fd-card.fd-card--banner>fd-card-media .fd-card__media-image-container{z-index:4}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card fd-card-content ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.extra-footer{flex-wrap:wrap}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card.hide-header-border ::ng-deep fd-card-header fd-card-main-header>.fd-card__header-main{border:none}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"] }]
         }], propDecorators: { setting: [{
                 type: Input
             }], _quickViewTemplate: [{
@@ -5828,11 +5828,11 @@ class ListItemComponent extends BaseViewItemPropsComponent {
         PreventDefaulEvent(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ListItemComponent, isStandalone: false, selector: "bsu-list-item", inputs: { setting: "setting", isDisplayType: "isDisplayType" }, usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\r\n></ng-container>\r\n<ng-template #standardTemplate let-mo>\r\n    <li\r\n        fd-list-item\r\n        class=\"standard-list-row\"\r\n        [ngClass]=\"deviceSize\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n        [class.selected]=\"isChecked === true\"\r\n        [selected]=\"isChecked === true\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n    >\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n        >\r\n            @if (isCheckList) {\r\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\r\n            } @if (setting.IconFont || setting.AvatarField) {\r\n            <span fd-list-thumbnail>\r\n                <fd-avatar\r\n                    alterIcon=\"alt|content|backup|default-icon\"\r\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\r\n                    [circle]=\"true\"\r\n                    [image]=\"\r\n                        setting.AvatarField\r\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                            : ''\r\n                    \"\r\n                    [size]=\"avatarSize\"\r\n                    [transparent]=\"true\"\r\n                    [glyph]=\"\r\n                        setting.IconFont ??\r\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                    \"\r\n                >\r\n                </fd-avatar>\r\n            </span>\r\n            }\r\n            <div fd-list-content>\r\n                <div fd-list-byline [twoCol]=\"true\">\r\n                    <div fd-list-title>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.TitleField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats,\r\n                                    index: 0\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.StatusField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </div>\r\n                <div fd-list-byline>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderColumn;\r\n                            context: {\r\n                                $implicit: setting.SubtitleField,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                conditionalFormats: conditionalFormats\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n            @if (contextMenuItems.length) {\r\n            <bsu-ulv-context-menu\r\n                [menuItems]=\"contextMenuItems\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></bsu-ulv-context-menu>\r\n            } @if (canView && !hideOpenIcon) {\r\n            <button (click)=\"onRowClick()\" fdType=\"transparent\" [glyph]=\"navigationArrow\" fd-button></button>\r\n            }\r\n        </a>\r\n    </li>\r\n</ng-template>\r\n<ng-template #displayTemplate let-mo>\r\n    @if (!mo.parent || mo.parent?.expanded) {\r\n    <li\r\n        class=\"display\"\r\n        [ngClass]=\"deviceSize\"\r\n        fd-list-item\r\n        [interactive]=\"false\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n    >\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            style=\"cursor: default\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n            style=\"column-gap: 3px\"\r\n        >\r\n            @if (setting.AvatarField) {\r\n            <img\r\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\r\n                style=\"width: 24px; height: 24px\"\r\n            />\r\n            } @if (setting.IconFont) {\r\n            <i fd-list-icon [glyph]=\"setting.IconFont\" [style.color]=\"setting.IconColor ? setting.IconColor : null\">\r\n            </i>\r\n            } @if (!setting.IconFont && mo.$State === 'New' && !isChecked) {\r\n            <i fd-list-icon glyph=\"favorite\"></i>\r\n            } @if (!setting.IconFont && inlineEditMode && isChecked) {\r\n            <i fd-list-icon glyph=\"edit\"></i>\r\n            } @if (isCheckList) {\r\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\r\n            }\r\n            <span fd-list-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: 0\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\" [class.flex1]=\"contextMenuItems.length === 0\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                @if (canView && !hideOpenIcon) {\r\n                <button fd-button (click)=\"onRowClick()\" [glyph]=\"navigationArrow\" fdType=\"transparent\"></button>\r\n                } @if (contextMenuItems.length) {\r\n                <bsu-ulv-context-menu\r\n                    [menuItems]=\"contextMenuItems\"\r\n                    [conditionalFormats]=\"conditionalFormats\"\r\n                    [styleIndex]=\"styleIndex\"\r\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                    [mo]=\"mo\"\r\n                    (commandClick)=\"onUlvCommand()\"\r\n                ></bsu-ulv-context-menu>\r\n                }\r\n            </span>\r\n        </a>\r\n    </li>\r\n    }\r\n</ng-template>\r\n<ng-template\r\n    #renderColumn\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    @if (column) {\r\n    <div\r\n        #divEl\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [styleIndex]=\"styleIndex\"\r\n        [hostEl]=\"divEl\"\r\n        [dbName]=\"column.Name\"\r\n    >\r\n        <bsu-column-renderer\r\n            [mo]=\"mo\"\r\n            [column]=\"column\"\r\n            [disableEllapsis]=\"true\"\r\n            [value]=\"column | columnValue: mo | bbbTranslate\"\r\n            [icon]=\"column | columnIcon: mo\"\r\n            [editMode]=\"inlineEditMode && allowInlineEdit\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\r\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\r\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\r\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\r\n            [formLayoutShowLabel]=\"true\"\r\n        ></bsu-column-renderer>\r\n    </div>\r\n    }\r\n</ng-template>\r\n", styles: [":host li.s{height:auto}:host .flex1{flex:1;display:flex;justify-content:start;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i7.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i7.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i2$7.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["cellEdit", "column", "allColumns", "mo", "index", "editMode", "attachmentViewType", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "disableEllapsis", "rtl", "isMobile", "fdTextMode", "deviceName", "deviceSize", "value", "icon"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ListItemComponent, isStandalone: false, selector: "bsu-list-item", inputs: { setting: "setting", isDisplayType: "isDisplayType" }, usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\r\n></ng-container>\r\n<ng-template #standardTemplate let-mo>\r\n    <li\r\n        fd-list-item\r\n        class=\"standard-list-row\"\r\n        [ngClass]=\"deviceSize\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n        [class.selected]=\"isChecked === true\"\r\n        [selected]=\"isChecked === true\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n    >\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n        >\r\n            @if (isCheckList) {\r\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\r\n            } @if (setting.IconFont || setting.AvatarField) {\r\n            <span fd-list-thumbnail>\r\n                <fd-avatar\r\n                    alterIcon=\"alt|content|backup|default-icon\"\r\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\r\n                    [circle]=\"true\"\r\n                    [image]=\"\r\n                        setting.AvatarField\r\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                            : ''\r\n                    \"\r\n                    [size]=\"avatarSize\"\r\n                    [transparent]=\"true\"\r\n                    [glyph]=\"\r\n                        setting.IconFont ??\r\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                    \"\r\n                >\r\n                </fd-avatar>\r\n            </span>\r\n            }\r\n            <div fd-list-content>\r\n                <div fd-list-byline [twoCol]=\"true\">\r\n                    <div fd-list-title>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.TitleField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats,\r\n                                    index: 0\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.StatusField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </div>\r\n                <div fd-list-byline>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderColumn;\r\n                            context: {\r\n                                $implicit: setting.SubtitleField,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                conditionalFormats: conditionalFormats\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n            @if (contextMenuItems.length) {\r\n            <bsu-ulv-context-menu\r\n                [menuItems]=\"contextMenuItems\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></bsu-ulv-context-menu>\r\n            } @if (canView && !hideOpenIcon) {\r\n            <button (click)=\"onRowClick()\" fdType=\"transparent\" [glyph]=\"navigationArrow\" fd-button></button>\r\n            }\r\n        </a>\r\n    </li>\r\n</ng-template>\r\n<ng-template #displayTemplate let-mo>\r\n    @if (!mo.parent || mo.parent?.expanded) {\r\n    <li\r\n        class=\"display\"\r\n        [ngClass]=\"deviceSize\"\r\n        fd-list-item\r\n        [interactive]=\"false\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n    >\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            style=\"cursor: default\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n            style=\"column-gap: 3px\"\r\n        >\r\n            @if (setting.AvatarField) {\r\n            <img\r\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\r\n                style=\"width: 24px; height: 24px\"\r\n                loading=\"lazy\"\r\n            />\r\n            } @if (setting.IconFont) {\r\n            <i fd-list-icon [glyph]=\"setting.IconFont\" [style.color]=\"setting.IconColor ? setting.IconColor : null\">\r\n            </i>\r\n            } @if (!setting.IconFont && mo.$State === 'New' && !isChecked) {\r\n            <i fd-list-icon glyph=\"favorite\"></i>\r\n            } @if (!setting.IconFont && inlineEditMode && isChecked) {\r\n            <i fd-list-icon glyph=\"edit\"></i>\r\n            } @if (isCheckList) {\r\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\r\n            }\r\n            <span fd-list-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: 0\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\" [class.flex1]=\"contextMenuItems.length === 0\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                @if (canView && !hideOpenIcon) {\r\n                <button fd-button (click)=\"onRowClick()\" [glyph]=\"navigationArrow\" fdType=\"transparent\"></button>\r\n                } @if (contextMenuItems.length) {\r\n                <bsu-ulv-context-menu\r\n                    [menuItems]=\"contextMenuItems\"\r\n                    [conditionalFormats]=\"conditionalFormats\"\r\n                    [styleIndex]=\"styleIndex\"\r\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                    [mo]=\"mo\"\r\n                    (commandClick)=\"onUlvCommand()\"\r\n                ></bsu-ulv-context-menu>\r\n                }\r\n            </span>\r\n        </a>\r\n    </li>\r\n    }\r\n</ng-template>\r\n<ng-template\r\n    #renderColumn\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    @if (column) {\r\n    <div\r\n        #divEl\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [styleIndex]=\"styleIndex\"\r\n        [hostEl]=\"divEl\"\r\n        [dbName]=\"column.Name\"\r\n    >\r\n        <bsu-column-renderer\r\n            [mo]=\"mo\"\r\n            [column]=\"column\"\r\n            [disableEllapsis]=\"true\"\r\n            [value]=\"column | columnValue: mo | bbbTranslate\"\r\n            [icon]=\"column | columnIcon: mo\"\r\n            [editMode]=\"inlineEditMode && allowInlineEdit\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\r\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\r\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\r\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\r\n            [formLayoutShowLabel]=\"true\"\r\n        ></bsu-column-renderer>\r\n    </div>\r\n    }\r\n</ng-template>\r\n", styles: [":host li.s{height:auto}:host .flex1{flex:1;display:flex;justify-content:start;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i7.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i7.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i2$7.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["cellEdit", "column", "allColumns", "mo", "index", "editMode", "attachmentViewType", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "disableEllapsis", "rtl", "isMobile", "fdTextMode", "deviceName", "deviceSize", "value", "icon"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-list-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\r\n></ng-container>\r\n<ng-template #standardTemplate let-mo>\r\n    <li\r\n        fd-list-item\r\n        class=\"standard-list-row\"\r\n        [ngClass]=\"deviceSize\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n        [class.selected]=\"isChecked === true\"\r\n        [selected]=\"isChecked === true\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n    >\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n        >\r\n            @if (isCheckList) {\r\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\r\n            } @if (setting.IconFont || setting.AvatarField) {\r\n            <span fd-list-thumbnail>\r\n                <fd-avatar\r\n                    alterIcon=\"alt|content|backup|default-icon\"\r\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\r\n                    [circle]=\"true\"\r\n                    [image]=\"\r\n                        setting.AvatarField\r\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                            : ''\r\n                    \"\r\n                    [size]=\"avatarSize\"\r\n                    [transparent]=\"true\"\r\n                    [glyph]=\"\r\n                        setting.IconFont ??\r\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                    \"\r\n                >\r\n                </fd-avatar>\r\n            </span>\r\n            }\r\n            <div fd-list-content>\r\n                <div fd-list-byline [twoCol]=\"true\">\r\n                    <div fd-list-title>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.TitleField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats,\r\n                                    index: 0\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.StatusField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </div>\r\n                <div fd-list-byline>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderColumn;\r\n                            context: {\r\n                                $implicit: setting.SubtitleField,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                conditionalFormats: conditionalFormats\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n            @if (contextMenuItems.length) {\r\n            <bsu-ulv-context-menu\r\n                [menuItems]=\"contextMenuItems\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></bsu-ulv-context-menu>\r\n            } @if (canView && !hideOpenIcon) {\r\n            <button (click)=\"onRowClick()\" fdType=\"transparent\" [glyph]=\"navigationArrow\" fd-button></button>\r\n            }\r\n        </a>\r\n    </li>\r\n</ng-template>\r\n<ng-template #displayTemplate let-mo>\r\n    @if (!mo.parent || mo.parent?.expanded) {\r\n    <li\r\n        class=\"display\"\r\n        [ngClass]=\"deviceSize\"\r\n        fd-list-item\r\n        [interactive]=\"false\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n    >\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            style=\"cursor: default\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n            style=\"column-gap: 3px\"\r\n        >\r\n            @if (setting.AvatarField) {\r\n            <img\r\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\r\n                style=\"width: 24px; height: 24px\"\r\n            />\r\n            } @if (setting.IconFont) {\r\n            <i fd-list-icon [glyph]=\"setting.IconFont\" [style.color]=\"setting.IconColor ? setting.IconColor : null\">\r\n            </i>\r\n            } @if (!setting.IconFont && mo.$State === 'New' && !isChecked) {\r\n            <i fd-list-icon glyph=\"favorite\"></i>\r\n            } @if (!setting.IconFont && inlineEditMode && isChecked) {\r\n            <i fd-list-icon glyph=\"edit\"></i>\r\n            } @if (isCheckList) {\r\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\r\n            }\r\n            <span fd-list-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: 0\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\" [class.flex1]=\"contextMenuItems.length === 0\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                @if (canView && !hideOpenIcon) {\r\n                <button fd-button (click)=\"onRowClick()\" [glyph]=\"navigationArrow\" fdType=\"transparent\"></button>\r\n                } @if (contextMenuItems.length) {\r\n                <bsu-ulv-context-menu\r\n                    [menuItems]=\"contextMenuItems\"\r\n                    [conditionalFormats]=\"conditionalFormats\"\r\n                    [styleIndex]=\"styleIndex\"\r\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                    [mo]=\"mo\"\r\n                    (commandClick)=\"onUlvCommand()\"\r\n                ></bsu-ulv-context-menu>\r\n                }\r\n            </span>\r\n        </a>\r\n    </li>\r\n    }\r\n</ng-template>\r\n<ng-template\r\n    #renderColumn\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    @if (column) {\r\n    <div\r\n        #divEl\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [styleIndex]=\"styleIndex\"\r\n        [hostEl]=\"divEl\"\r\n        [dbName]=\"column.Name\"\r\n    >\r\n        <bsu-column-renderer\r\n            [mo]=\"mo\"\r\n            [column]=\"column\"\r\n            [disableEllapsis]=\"true\"\r\n            [value]=\"column | columnValue: mo | bbbTranslate\"\r\n            [icon]=\"column | columnIcon: mo\"\r\n            [editMode]=\"inlineEditMode && allowInlineEdit\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\r\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\r\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\r\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\r\n            [formLayoutShowLabel]=\"true\"\r\n        ></bsu-column-renderer>\r\n    </div>\r\n    }\r\n</ng-template>\r\n", styles: [":host li.s{height:auto}:host .flex1{flex:1;display:flex;justify-content:start;flex-direction:row-reverse}\n"] }]
+            args: [{ selector: 'bsu-list-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\r\n></ng-container>\r\n<ng-template #standardTemplate let-mo>\r\n    <li\r\n        fd-list-item\r\n        class=\"standard-list-row\"\r\n        [ngClass]=\"deviceSize\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n        [class.selected]=\"isChecked === true\"\r\n        [selected]=\"isChecked === true\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n    >\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n        >\r\n            @if (isCheckList) {\r\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\r\n            } @if (setting.IconFont || setting.AvatarField) {\r\n            <span fd-list-thumbnail>\r\n                <fd-avatar\r\n                    alterIcon=\"alt|content|backup|default-icon\"\r\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\r\n                    [circle]=\"true\"\r\n                    [image]=\"\r\n                        setting.AvatarField\r\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                            : ''\r\n                    \"\r\n                    [size]=\"avatarSize\"\r\n                    [transparent]=\"true\"\r\n                    [glyph]=\"\r\n                        setting.IconFont ??\r\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                    \"\r\n                >\r\n                </fd-avatar>\r\n            </span>\r\n            }\r\n            <div fd-list-content>\r\n                <div fd-list-byline [twoCol]=\"true\">\r\n                    <div fd-list-title>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.TitleField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats,\r\n                                    index: 0\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.StatusField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </div>\r\n                <div fd-list-byline>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderColumn;\r\n                            context: {\r\n                                $implicit: setting.SubtitleField,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                conditionalFormats: conditionalFormats\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n            @if (contextMenuItems.length) {\r\n            <bsu-ulv-context-menu\r\n                [menuItems]=\"contextMenuItems\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n            ></bsu-ulv-context-menu>\r\n            } @if (canView && !hideOpenIcon) {\r\n            <button (click)=\"onRowClick()\" fdType=\"transparent\" [glyph]=\"navigationArrow\" fd-button></button>\r\n            }\r\n        </a>\r\n    </li>\r\n</ng-template>\r\n<ng-template #displayTemplate let-mo>\r\n    @if (!mo.parent || mo.parent?.expanded) {\r\n    <li\r\n        class=\"display\"\r\n        [ngClass]=\"deviceSize\"\r\n        fd-list-item\r\n        [interactive]=\"false\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n    >\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            style=\"cursor: default\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n            style=\"column-gap: 3px\"\r\n        >\r\n            @if (setting.AvatarField) {\r\n            <img\r\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\r\n                style=\"width: 24px; height: 24px\"\r\n                loading=\"lazy\"\r\n            />\r\n            } @if (setting.IconFont) {\r\n            <i fd-list-icon [glyph]=\"setting.IconFont\" [style.color]=\"setting.IconColor ? setting.IconColor : null\">\r\n            </i>\r\n            } @if (!setting.IconFont && mo.$State === 'New' && !isChecked) {\r\n            <i fd-list-icon glyph=\"favorite\"></i>\r\n            } @if (!setting.IconFont && inlineEditMode && isChecked) {\r\n            <i fd-list-icon glyph=\"edit\"></i>\r\n            } @if (isCheckList) {\r\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\r\n            }\r\n            <span fd-list-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: 0\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\" [class.flex1]=\"contextMenuItems.length === 0\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                @if (canView && !hideOpenIcon) {\r\n                <button fd-button (click)=\"onRowClick()\" [glyph]=\"navigationArrow\" fdType=\"transparent\"></button>\r\n                } @if (contextMenuItems.length) {\r\n                <bsu-ulv-context-menu\r\n                    [menuItems]=\"contextMenuItems\"\r\n                    [conditionalFormats]=\"conditionalFormats\"\r\n                    [styleIndex]=\"styleIndex\"\r\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                    [mo]=\"mo\"\r\n                    (commandClick)=\"onUlvCommand()\"\r\n                ></bsu-ulv-context-menu>\r\n                }\r\n            </span>\r\n        </a>\r\n    </li>\r\n    }\r\n</ng-template>\r\n<ng-template\r\n    #renderColumn\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    @if (column) {\r\n    <div\r\n        #divEl\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [styleIndex]=\"styleIndex\"\r\n        [hostEl]=\"divEl\"\r\n        [dbName]=\"column.Name\"\r\n    >\r\n        <bsu-column-renderer\r\n            [mo]=\"mo\"\r\n            [column]=\"column\"\r\n            [disableEllapsis]=\"true\"\r\n            [value]=\"column | columnValue: mo | bbbTranslate\"\r\n            [icon]=\"column | columnIcon: mo\"\r\n            [editMode]=\"inlineEditMode && allowInlineEdit\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\r\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\r\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\r\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\r\n            [formLayoutShowLabel]=\"true\"\r\n        ></bsu-column-renderer>\r\n    </div>\r\n    }\r\n</ng-template>\r\n", styles: [":host li.s{height:auto}:host .flex1{flex:1;display:flex;justify-content:start;flex-direction:row-reverse}\n"] }]
         }], propDecorators: { setting: [{
                 type: Input
             }], isDisplayType: [{
@@ -6119,11 +6119,11 @@ class BarsaTableHeaderComponent extends BaseComponent {
         return `${column.Name}${index}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTableHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaTableHeaderComponent, isStandalone: false, selector: "bsu-barsa-table-header", inputs: { allChecked: "allChecked", isCheckList: "isCheckList", attachmentViewType: "attachmentViewType", columns: "columns", fitWidth: "fitWidth", contextMenuItems: "contextMenuItems", contextMenuWidth: "contextMenuWidth", showViewButton: "showViewButton", hasSelected: "hasSelected", isMobile: "isMobile", hideOpenIcon: "hideOpenIcon", disableOverflowContextMenu: "disableOverflowContextMenu", inlineEditMode: "inlineEditMode", hideHeader: "hideHeader", showDetailsInRow: "showDetailsInRow", viewSetting: "viewSetting", tableWidth: "tableWidth", resizedByUser: "resizedByUser", disableResponsive: "disableResponsive", actionList: "actionList", rowIndicator: "rowIndicator", rtl: "rtl", sticky: "sticky", showRowNumber: "showRowNumber", hasSecondaryColumns: "hasSecondaryColumns", disableResize: "disableResize", disableHeaderContextMenu: "disableHeaderContextMenu", deviceSize: "deviceSize", tableHeaderMode: "tableHeaderMode" }, outputs: { allCheckbox: "allCheckbox", columnResize: "columnResize", columnResizing: "columnResizing", fitToContent: "fitToContent", fitToContainer: "fitToContainer", freeColumnSize: "freeColumnSize", sortAscending: "sortAscending", sortDescending: "sortDescending", filter: "filter", resetGridSettings: "resetGridSettings", headerRender: "headerRender" }, viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "thList", predicate: ["thRef"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead\r\n    fd-table-header\r\n    [class.inline-edit]=\"inlineEditMode\"\r\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\r\n    class=\"ellapsis\"\r\n    [class.sticky-header]=\"sticky\"\r\n    #theadRef\r\n>\r\n    <tr fd-table-row>\r\n        @if (!hideHeader) { @if (rowIndicator) {\r\n        <th fd-table-cell fd-table-status-indicator #rowIndicator></th>\r\n        } @if (showRowNumber) {\r\n        <th fd-table-cell style=\"width: 40px; max-width: 40px\"></th>\r\n        } @if (isCheckList) {\r\n        <th fd-table-cell>\r\n            <fd-checkbox\r\n                name=\"allCheckbox\"\r\n                [ngModel]=\"allChecked\"\r\n                (ngModelChange)=\"onAllCheckbox($event)\"\r\n            ></fd-checkbox>\r\n        </th>\r\n        } @if (!isCheckList && !showRowNumber) {\r\n        <th fd-table-cell class=\"single-select\"></th>\r\n        } @for (column of columns; track _trackByColumn(i, column); let i = $index; let last = $last) {\r\n        <th\r\n            #thRef\r\n            tableth\r\n            [hasSecondaryColumns]=\"hasSecondaryColumns\"\r\n            fd-table-cell\r\n            resizable\r\n            [index]=\"i\"\r\n            [last]=\"last\"\r\n            [columnsLength]=\"columns.length\"\r\n            [column]=\"column\"\r\n            [tableHeaderMode]=\"tableHeaderMode\"\r\n            [fieldTypeId]=\"+column.FieldTypeId\"\r\n            [rtl]=\"rtl\"\r\n            [caption]=\"column.Caption | bbbTranslate\"\r\n            [name]=\"column.Name\"\r\n            [icon]=\"column.Icon\"\r\n            [colClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\r\n            [displayType]=\"column.Extra?.IconDisplayTypeEnum\"\r\n            [isImageOrIcon]=\"(column | thImageOrIcon) === true\"\r\n            [disableResize]=\"\r\n                hasSecondaryColumns ||\r\n                disableResize ||\r\n                (tableHeaderMode === 2 && last) ||\r\n                (column | thImageOrIcon) === true\r\n            \"\r\n            [disableHeaderContextMenu]=\"disableHeaderContextMenu\"\r\n            [disableResponsive]=\"disableResponsive\"\r\n            (sortAscending)=\"sortAscending.emit(column)\"\r\n            (sortDescending)=\"sortDescending.emit(column)\"\r\n            (filter)=\"filter.emit(column)\"\r\n            (resetGridSettings)=\"resetGridSettings.emit()\"\r\n            (widthChange)=\"!hasSecondaryColumns && onColumnWidthChange(column)\"\r\n            (widthChanging)=\"!hasSecondaryColumns && onColumnWidthChanging(i, column, $event)\"\r\n            [style.width]=\"hasSecondaryColumns ? (columns.length === 1 ? '100% !important' : '50% !important') : null\"\r\n        >\r\n            @if(!disableHeaderContextMenu){\r\n            <fd-popover #menu>\r\n                <fd-popover-control>\r\n                    <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n                </fd-popover-control>\r\n                <fd-popover-body>\r\n                    <ul fd-list>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortAscending(column, menu)\">\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-ascending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortDescending(column, menu)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-descending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onFitToContent(column, i)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Fit Column To Content' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"fitToContainer.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('All Columns In Page' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"freeColumnSize.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Free Columns Size' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onResetColumnsSettings()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"reset\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ 'GridSettingBase' | bbbTranslate }}</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </fd-popover-body>\r\n            </fd-popover>\r\n            } @else{\r\n            <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n            }\r\n        </th>\r\n        } @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <th\r\n            class=\"col-header col-context-menu\"\r\n            fd-table-cell\r\n            [fitContent]=\"disableOverflowContextMenu\"\r\n            [style.width.px]=\"contextMenuWidth\"\r\n        ></th>\r\n        } @if (showDetailsInRow && !inlineEditMode) {\r\n        <th class=\"col-header col-details\" [style.width]=\"deviceSize === 's' ? '44px' : '120px'\" fd-table-cell></th>\r\n        } @if (showViewButton) {\r\n        <th class=\"col-header col-view\" [style.width.px]=\"36 * (actionList?.length ?? 0) + 8\" fd-table-cell></th>\r\n        } } @if (!hideHeader) {\r\n        <th fd-table-cell style=\"width: 0.1%\"></th>\r\n        }\r\n    </tr>\r\n</thead>\r\n<ng-template #headerValue let-column>\r\n    <div\r\n        style=\"display: flex\"\r\n        [attr.title]=\"column.Caption | bbbTranslate\"\r\n        [style.min-width]=\"isMobile ? 'max-content' : null\"\r\n    >\r\n        @if ( (column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42) && column.Icon) {\r\n        <img [src]=\"column.Icon\" />\r\n        } @else if(column.FieldTypeId!==38) {\r\n        {{ column.Caption | bbbTranslate }}\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents;width:100%}:host.has-toolbar thead{border-top:none!important}:host>thead.sticky-header{position:sticky;top:0;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i3$4.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY", "nonInteractive"] }, { kind: "directive", type: i3$4.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i3$4.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: i3$4.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "component", type: i2.ResizableComponent, selector: "th[resizable]", inputs: ["disableResize", "rtl"], outputs: ["widthChange", "widthChanging"] }, { kind: "directive", type: TableThDirective, selector: "[tableth]", inputs: ["fieldTypeId", "caption", "icon", "inlineEditMode", "isImageOrIcon", "columnsLength", "tableWidth", "last", "rtl", "column", "disableResponsive", "disableResize", "disableHeaderContextMenu", "hasSecondaryColumns", "tableHeaderMode", "colClass", "displayType", "name", "index"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ThImageOrIconePipe, name: "thImageOrIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaTableHeaderComponent, isStandalone: false, selector: "bsu-barsa-table-header", inputs: { allChecked: "allChecked", isCheckList: "isCheckList", attachmentViewType: "attachmentViewType", columns: "columns", fitWidth: "fitWidth", contextMenuItems: "contextMenuItems", contextMenuWidth: "contextMenuWidth", showViewButton: "showViewButton", hasSelected: "hasSelected", isMobile: "isMobile", hideOpenIcon: "hideOpenIcon", disableOverflowContextMenu: "disableOverflowContextMenu", inlineEditMode: "inlineEditMode", hideHeader: "hideHeader", showDetailsInRow: "showDetailsInRow", viewSetting: "viewSetting", tableWidth: "tableWidth", resizedByUser: "resizedByUser", disableResponsive: "disableResponsive", actionList: "actionList", rowIndicator: "rowIndicator", rtl: "rtl", sticky: "sticky", showRowNumber: "showRowNumber", hasSecondaryColumns: "hasSecondaryColumns", disableResize: "disableResize", disableHeaderContextMenu: "disableHeaderContextMenu", deviceSize: "deviceSize", tableHeaderMode: "tableHeaderMode" }, outputs: { allCheckbox: "allCheckbox", columnResize: "columnResize", columnResizing: "columnResizing", fitToContent: "fitToContent", fitToContainer: "fitToContainer", freeColumnSize: "freeColumnSize", sortAscending: "sortAscending", sortDescending: "sortDescending", filter: "filter", resetGridSettings: "resetGridSettings", headerRender: "headerRender" }, viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "thList", predicate: ["thRef"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead\r\n    fd-table-header\r\n    [class.inline-edit]=\"inlineEditMode\"\r\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\r\n    class=\"ellapsis\"\r\n    [class.sticky-header]=\"sticky\"\r\n    #theadRef\r\n>\r\n    <tr fd-table-row>\r\n        @if (!hideHeader) { @if (rowIndicator) {\r\n        <th fd-table-cell fd-table-status-indicator #rowIndicator></th>\r\n        } @if (showRowNumber) {\r\n        <th fd-table-cell style=\"width: 40px; max-width: 40px\"></th>\r\n        } @if (isCheckList) {\r\n        <th fd-table-cell>\r\n            <fd-checkbox\r\n                name=\"allCheckbox\"\r\n                [ngModel]=\"allChecked\"\r\n                (ngModelChange)=\"onAllCheckbox($event)\"\r\n            ></fd-checkbox>\r\n        </th>\r\n        } @if (!isCheckList && !showRowNumber) {\r\n        <th fd-table-cell class=\"single-select\"></th>\r\n        } @for (column of columns; track _trackByColumn(i, column); let i = $index; let last = $last) {\r\n        <th\r\n            #thRef\r\n            tableth\r\n            [hasSecondaryColumns]=\"hasSecondaryColumns\"\r\n            fd-table-cell\r\n            resizable\r\n            [index]=\"i\"\r\n            [last]=\"last\"\r\n            [columnsLength]=\"columns.length\"\r\n            [column]=\"column\"\r\n            [tableHeaderMode]=\"tableHeaderMode\"\r\n            [fieldTypeId]=\"+column.FieldTypeId\"\r\n            [rtl]=\"rtl\"\r\n            [caption]=\"column.Caption | bbbTranslate\"\r\n            [name]=\"column.Name\"\r\n            [icon]=\"column.Icon\"\r\n            [colClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\r\n            [displayType]=\"column.Extra?.IconDisplayTypeEnum\"\r\n            [isImageOrIcon]=\"(column | thImageOrIcon) === true\"\r\n            [disableResize]=\"\r\n                hasSecondaryColumns ||\r\n                disableResize ||\r\n                (tableHeaderMode === 2 && last) ||\r\n                (column | thImageOrIcon) === true\r\n            \"\r\n            [disableHeaderContextMenu]=\"disableHeaderContextMenu\"\r\n            [disableResponsive]=\"disableResponsive\"\r\n            (sortAscending)=\"sortAscending.emit(column)\"\r\n            (sortDescending)=\"sortDescending.emit(column)\"\r\n            (filter)=\"filter.emit(column)\"\r\n            (resetGridSettings)=\"resetGridSettings.emit()\"\r\n            (widthChange)=\"!hasSecondaryColumns && onColumnWidthChange(column)\"\r\n            (widthChanging)=\"!hasSecondaryColumns && onColumnWidthChanging(i, column, $event)\"\r\n            [style.width]=\"hasSecondaryColumns ? (columns.length === 1 ? '100% !important' : '50% !important') : null\"\r\n        >\r\n            @if(!disableHeaderContextMenu){\r\n            <fd-popover #menu>\r\n                <fd-popover-control>\r\n                    <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n                </fd-popover-control>\r\n                <fd-popover-body>\r\n                    <ul fd-list>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortAscending(column, menu)\">\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-ascending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortDescending(column, menu)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-descending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onFitToContent(column, i)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Fit Column To Content' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"fitToContainer.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('All Columns In Page' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"freeColumnSize.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Free Columns Size' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onResetColumnsSettings()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"reset\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ 'GridSettingBase' | bbbTranslate }}</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </fd-popover-body>\r\n            </fd-popover>\r\n            } @else{\r\n            <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n            }\r\n        </th>\r\n        } @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <th\r\n            class=\"col-header col-context-menu\"\r\n            fd-table-cell\r\n            [fitContent]=\"disableOverflowContextMenu\"\r\n            [style.width.px]=\"contextMenuWidth\"\r\n        ></th>\r\n        } @if (showDetailsInRow && !inlineEditMode) {\r\n        <th class=\"col-header col-details\" [style.width]=\"deviceSize === 's' ? '44px' : '120px'\" fd-table-cell></th>\r\n        } @if (showViewButton) {\r\n        <th class=\"col-header col-view\" [style.width.px]=\"36 * (actionList?.length ?? 0) + 8\" fd-table-cell></th>\r\n        } } @if (!hideHeader) {\r\n        <th fd-table-cell style=\"width: 0.1%\"></th>\r\n        }\r\n    </tr>\r\n</thead>\r\n<ng-template #headerValue let-column>\r\n    <div\r\n        style=\"display: flex\"\r\n        [attr.title]=\"column.Caption | bbbTranslate\"\r\n        [style.min-width]=\"isMobile ? 'max-content' : null\"\r\n    >\r\n        @if ( (column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42) && column.Icon) {\r\n        <img [src]=\"column.Icon\" loading=\"lazy\"/>\r\n        } @else if(column.FieldTypeId!==38) {\r\n        {{ column.Caption | bbbTranslate }}\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents;width:100%}:host.has-toolbar thead{border-top:none!important}:host>thead.sticky-header{position:sticky;top:0;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i3$4.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY", "nonInteractive"] }, { kind: "directive", type: i3$4.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i3$4.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: i3$4.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "component", type: i2.ResizableComponent, selector: "th[resizable]", inputs: ["disableResize", "rtl"], outputs: ["widthChange", "widthChanging"] }, { kind: "directive", type: TableThDirective, selector: "[tableth]", inputs: ["fieldTypeId", "caption", "icon", "inlineEditMode", "isImageOrIcon", "columnsLength", "tableWidth", "last", "rtl", "column", "disableResponsive", "disableResize", "disableHeaderContextMenu", "hasSecondaryColumns", "tableHeaderMode", "colClass", "displayType", "name", "index"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ThImageOrIconePipe, name: "thImageOrIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaTableHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-table-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<thead\r\n    fd-table-header\r\n    [class.inline-edit]=\"inlineEditMode\"\r\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\r\n    class=\"ellapsis\"\r\n    [class.sticky-header]=\"sticky\"\r\n    #theadRef\r\n>\r\n    <tr fd-table-row>\r\n        @if (!hideHeader) { @if (rowIndicator) {\r\n        <th fd-table-cell fd-table-status-indicator #rowIndicator></th>\r\n        } @if (showRowNumber) {\r\n        <th fd-table-cell style=\"width: 40px; max-width: 40px\"></th>\r\n        } @if (isCheckList) {\r\n        <th fd-table-cell>\r\n            <fd-checkbox\r\n                name=\"allCheckbox\"\r\n                [ngModel]=\"allChecked\"\r\n                (ngModelChange)=\"onAllCheckbox($event)\"\r\n            ></fd-checkbox>\r\n        </th>\r\n        } @if (!isCheckList && !showRowNumber) {\r\n        <th fd-table-cell class=\"single-select\"></th>\r\n        } @for (column of columns; track _trackByColumn(i, column); let i = $index; let last = $last) {\r\n        <th\r\n            #thRef\r\n            tableth\r\n            [hasSecondaryColumns]=\"hasSecondaryColumns\"\r\n            fd-table-cell\r\n            resizable\r\n            [index]=\"i\"\r\n            [last]=\"last\"\r\n            [columnsLength]=\"columns.length\"\r\n            [column]=\"column\"\r\n            [tableHeaderMode]=\"tableHeaderMode\"\r\n            [fieldTypeId]=\"+column.FieldTypeId\"\r\n            [rtl]=\"rtl\"\r\n            [caption]=\"column.Caption | bbbTranslate\"\r\n            [name]=\"column.Name\"\r\n            [icon]=\"column.Icon\"\r\n            [colClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\r\n            [displayType]=\"column.Extra?.IconDisplayTypeEnum\"\r\n            [isImageOrIcon]=\"(column | thImageOrIcon) === true\"\r\n            [disableResize]=\"\r\n                hasSecondaryColumns ||\r\n                disableResize ||\r\n                (tableHeaderMode === 2 && last) ||\r\n                (column | thImageOrIcon) === true\r\n            \"\r\n            [disableHeaderContextMenu]=\"disableHeaderContextMenu\"\r\n            [disableResponsive]=\"disableResponsive\"\r\n            (sortAscending)=\"sortAscending.emit(column)\"\r\n            (sortDescending)=\"sortDescending.emit(column)\"\r\n            (filter)=\"filter.emit(column)\"\r\n            (resetGridSettings)=\"resetGridSettings.emit()\"\r\n            (widthChange)=\"!hasSecondaryColumns && onColumnWidthChange(column)\"\r\n            (widthChanging)=\"!hasSecondaryColumns && onColumnWidthChanging(i, column, $event)\"\r\n            [style.width]=\"hasSecondaryColumns ? (columns.length === 1 ? '100% !important' : '50% !important') : null\"\r\n        >\r\n            @if(!disableHeaderContextMenu){\r\n            <fd-popover #menu>\r\n                <fd-popover-control>\r\n                    <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n                </fd-popover-control>\r\n                <fd-popover-body>\r\n                    <ul fd-list>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortAscending(column, menu)\">\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-ascending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortDescending(column, menu)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-descending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onFitToContent(column, i)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Fit Column To Content' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"fitToContainer.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('All Columns In Page' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"freeColumnSize.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Free Columns Size' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onResetColumnsSettings()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"reset\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ 'GridSettingBase' | bbbTranslate }}</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </fd-popover-body>\r\n            </fd-popover>\r\n            } @else{\r\n            <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n            }\r\n        </th>\r\n        } @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <th\r\n            class=\"col-header col-context-menu\"\r\n            fd-table-cell\r\n            [fitContent]=\"disableOverflowContextMenu\"\r\n            [style.width.px]=\"contextMenuWidth\"\r\n        ></th>\r\n        } @if (showDetailsInRow && !inlineEditMode) {\r\n        <th class=\"col-header col-details\" [style.width]=\"deviceSize === 's' ? '44px' : '120px'\" fd-table-cell></th>\r\n        } @if (showViewButton) {\r\n        <th class=\"col-header col-view\" [style.width.px]=\"36 * (actionList?.length ?? 0) + 8\" fd-table-cell></th>\r\n        } } @if (!hideHeader) {\r\n        <th fd-table-cell style=\"width: 0.1%\"></th>\r\n        }\r\n    </tr>\r\n</thead>\r\n<ng-template #headerValue let-column>\r\n    <div\r\n        style=\"display: flex\"\r\n        [attr.title]=\"column.Caption | bbbTranslate\"\r\n        [style.min-width]=\"isMobile ? 'max-content' : null\"\r\n    >\r\n        @if ( (column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42) && column.Icon) {\r\n        <img [src]=\"column.Icon\" />\r\n        } @else if(column.FieldTypeId!==38) {\r\n        {{ column.Caption | bbbTranslate }}\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents;width:100%}:host.has-toolbar thead{border-top:none!important}:host>thead.sticky-header{position:sticky;top:0;z-index:1}\n"] }]
+            args: [{ selector: 'bsu-barsa-table-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<thead\r\n    fd-table-header\r\n    [class.inline-edit]=\"inlineEditMode\"\r\n    [class.smallColumns]=\"columnsSmallerThanTableWidth\"\r\n    class=\"ellapsis\"\r\n    [class.sticky-header]=\"sticky\"\r\n    #theadRef\r\n>\r\n    <tr fd-table-row>\r\n        @if (!hideHeader) { @if (rowIndicator) {\r\n        <th fd-table-cell fd-table-status-indicator #rowIndicator></th>\r\n        } @if (showRowNumber) {\r\n        <th fd-table-cell style=\"width: 40px; max-width: 40px\"></th>\r\n        } @if (isCheckList) {\r\n        <th fd-table-cell>\r\n            <fd-checkbox\r\n                name=\"allCheckbox\"\r\n                [ngModel]=\"allChecked\"\r\n                (ngModelChange)=\"onAllCheckbox($event)\"\r\n            ></fd-checkbox>\r\n        </th>\r\n        } @if (!isCheckList && !showRowNumber) {\r\n        <th fd-table-cell class=\"single-select\"></th>\r\n        } @for (column of columns; track _trackByColumn(i, column); let i = $index; let last = $last) {\r\n        <th\r\n            #thRef\r\n            tableth\r\n            [hasSecondaryColumns]=\"hasSecondaryColumns\"\r\n            fd-table-cell\r\n            resizable\r\n            [index]=\"i\"\r\n            [last]=\"last\"\r\n            [columnsLength]=\"columns.length\"\r\n            [column]=\"column\"\r\n            [tableHeaderMode]=\"tableHeaderMode\"\r\n            [fieldTypeId]=\"+column.FieldTypeId\"\r\n            [rtl]=\"rtl\"\r\n            [caption]=\"column.Caption | bbbTranslate\"\r\n            [name]=\"column.Name\"\r\n            [icon]=\"column.Icon\"\r\n            [colClass]=\"column.$CSSClassName + ' column__' + column.Caption\"\r\n            [displayType]=\"column.Extra?.IconDisplayTypeEnum\"\r\n            [isImageOrIcon]=\"(column | thImageOrIcon) === true\"\r\n            [disableResize]=\"\r\n                hasSecondaryColumns ||\r\n                disableResize ||\r\n                (tableHeaderMode === 2 && last) ||\r\n                (column | thImageOrIcon) === true\r\n            \"\r\n            [disableHeaderContextMenu]=\"disableHeaderContextMenu\"\r\n            [disableResponsive]=\"disableResponsive\"\r\n            (sortAscending)=\"sortAscending.emit(column)\"\r\n            (sortDescending)=\"sortDescending.emit(column)\"\r\n            (filter)=\"filter.emit(column)\"\r\n            (resetGridSettings)=\"resetGridSettings.emit()\"\r\n            (widthChange)=\"!hasSecondaryColumns && onColumnWidthChange(column)\"\r\n            (widthChanging)=\"!hasSecondaryColumns && onColumnWidthChanging(i, column, $event)\"\r\n            [style.width]=\"hasSecondaryColumns ? (columns.length === 1 ? '100% !important' : '50% !important') : null\"\r\n        >\r\n            @if(!disableHeaderContextMenu){\r\n            <fd-popover #menu>\r\n                <fd-popover-control>\r\n                    <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n                </fd-popover-control>\r\n                <fd-popover-body>\r\n                    <ul fd-list>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortAscending(column, menu)\">\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-ascending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Ascending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onSortDescending(column, menu)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"sort-descending\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title\r\n                                    >{{ ('Sort' | bbbTranslate) + ' ' }} {{ 'Descending' | bbbTranslate }}</span\r\n                                >\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onFitToContent(column, i)\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Fit Column To Content' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"fitToContainer.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('All Columns In Page' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"freeColumnSize.emit()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ ('Free Columns Size' | bbbTranslate) + ' ' }}</span>\r\n                            </a>\r\n                        </li>\r\n                        <li fd-list-item>\r\n                            <a fd-list-link (click)=\"onResetColumnsSettings()\" bodyClick>\r\n                                <fd-menu-addon position=\"before\" glyph=\"reset\" fd-list-icon></fd-menu-addon>\r\n                                <span fd-list-title>{{ 'GridSettingBase' | bbbTranslate }}</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </fd-popover-body>\r\n            </fd-popover>\r\n            } @else{\r\n            <ng-container *ngTemplateOutlet=\"headerValue; context: { $implicit: column }\"></ng-container>\r\n            }\r\n        </th>\r\n        } @if (contextMenuItems && contextMenuItems.length > 0) {\r\n        <th\r\n            class=\"col-header col-context-menu\"\r\n            fd-table-cell\r\n            [fitContent]=\"disableOverflowContextMenu\"\r\n            [style.width.px]=\"contextMenuWidth\"\r\n        ></th>\r\n        } @if (showDetailsInRow && !inlineEditMode) {\r\n        <th class=\"col-header col-details\" [style.width]=\"deviceSize === 's' ? '44px' : '120px'\" fd-table-cell></th>\r\n        } @if (showViewButton) {\r\n        <th class=\"col-header col-view\" [style.width.px]=\"36 * (actionList?.length ?? 0) + 8\" fd-table-cell></th>\r\n        } } @if (!hideHeader) {\r\n        <th fd-table-cell style=\"width: 0.1%\"></th>\r\n        }\r\n    </tr>\r\n</thead>\r\n<ng-template #headerValue let-column>\r\n    <div\r\n        style=\"display: flex\"\r\n        [attr.title]=\"column.Caption | bbbTranslate\"\r\n        [style.min-width]=\"isMobile ? 'max-content' : null\"\r\n    >\r\n        @if ( (column.Extra?.IconDisplayTypeEnum === 'Image' || column.FieldTypeId === 42) && column.Icon) {\r\n        <img [src]=\"column.Icon\" loading=\"lazy\"/>\r\n        } @else if(column.FieldTypeId!==38) {\r\n        {{ column.Caption | bbbTranslate }}\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents;width:100%}:host.has-toolbar thead{border-top:none!important}:host>thead.sticky-header{position:sticky;top:0;z-index:1}\n"] }]
         }], propDecorators: { thList: [{
                 type: ViewChildren,
                 args: ['thRef', { read: ElementRef }]
@@ -7494,11 +7494,11 @@ class BarsaUlvMainComponent extends BaseComponent {
         this._customBackground = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaUlvMainComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaUlvMainComponent, isStandalone: false, selector: "bsu-barsa-ulv-main", inputs: { component: "component", viewerControl: "viewerControl", hideViewerLoading: "hideViewerLoading", loading: "loading", hidePaging: "hidePaging", viewerLoading: "viewerLoading", isReportPage: "isReportPage", cssBackground: "cssBackground", deviceSize: "deviceSize", shortcuts: "shortcuts", title: "title", searchPanelUi: "searchPanelUi", breadCrumbs: "breadCrumbs", allSearchPanelSettings: "allSearchPanelSettings", isAnonymous: "isAnonymous", canSaveGridSetting: "canSaveGridSetting", rtl: "rtl", hideUlvPageTitle: "hideUlvPageTitle", selectedSearchPanelSettings: "selectedSearchPanelSettings", searchPanelMoChanged: "searchPanelMoChanged", selectedSearchPanelSettingsId: "selectedSearchPanelSettingsId", hideSearchPanel: "hideSearchPanel", pagingSetting: "pagingSetting", contentDensity: "contentDensity", context: "context", isMobile: "isMobile", standalone: "standalone", landscape: "landscape", toolbarSettings: "toolbarSettings", layoutInfo: "layoutInfo", viewSettings: "viewSettings", formSetting: "formSetting", allowGridColumnSort: "allowGridColumnSort", useLayoutItemTextForControl: "useLayoutItemTextForControl", hideTitle: "hideTitle", deviceName: "deviceName", access: "access", hideToolbar: "hideToolbar", toolbarButtons: "toolbarButtons", toolbarButtonsReportView: "toolbarButtonsReportView", inlineEditMode: "inlineEditMode", allowInlineEdit: "allowInlineEdit", gridSetting: "gridSetting", viewCollection: "viewCollection", reportView: "reportView", inDialog: "inDialog", isMultiSelect: "isMultiSelect", hiddenOverflowContent: "hiddenOverflowContent", cls: "cls", hasSelected: "hasSelected", ulvHeightSizeType: "ulvHeightSizeType", ulvHeightSize: "ulvHeightSize" }, outputs: { toggleMultiSelect: "toggleMultiSelect", groupbyClick: "groupbyClick", sortClick: "sortClick", columnClick: "columnClick", editModeClick: "editModeClick", viewClick: "viewClick", createNewInlineMo: "createNewInlineMo", contentHeightChange: "contentHeightChange", closeEvent: "closeEvent", searchPanelMoChange: "searchPanelMoChange", openManageFilters: "openManageFilters", collapsedChange: "collapsedChange", hideSearchPanelClick: "hideSearchPanelClick", filterSave: "filterSave", filterSaveAs: "filterSaveAs", pageChange: "pageChange", showFilterFieldsSetting: "showFilterFieldsSetting", manageFilters: "manageFilters", clearSearch: "clearSearch", search: "search", selectSearchPanelSettings: "selectSearchPanelSettings" }, host: { properties: { "style.background-color": "this._backgroundColor", "style.background-image": "this._backgroundUrl", "style.background-repeat": "this._backgroundRepeat", "class.custom-background": "this._customBackground" } }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["searchpanelDialog"], descendants: true }, { propertyName: "_ulvToolbar", first: true, predicate: ["ulvToolbar"], descendants: true, read: ElementRef }, { propertyName: "_ulvPaging", first: true, predicate: ["ulvPaging"], descendants: true, read: ElementRef }, { propertyName: "_ulvSearchPanel", first: true, predicate: SearchPanelComponent, descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isReportPage ? reportPageTemplate : reportTemplate;\r\n        context: {\r\n            $implicit: viewerControl,\r\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n@if (loading) {\r\n<bsu-mask size=\"m\"></bsu-mask>\r\n}\r\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\r\n    <fd-dynamic-page\r\n        darkClass\r\n        formClose\r\n        mobile\r\n        [attr.isMobile]=\"isMobile ? true : null\"\r\n        [isMobile]=\"isMobile\"\r\n        [size]=\"deviceSize | dynamicPageSize\"\r\n        [attr.tabMode]=\"tabMode\"\r\n        [autoResponsive]=\"false\"\r\n        [class.notitle]=\"title.length < 2 || hideUlvPageTitle\"\r\n        [class.nosearchpanel]=\"!searchPanelUi\"\r\n        [class.hideSearchPanel]=\"hideSearchPanel\"\r\n        [class.sideContentMode]=\"sideContentMode\"\r\n    >\r\n        <fd-dynamic-page-header\r\n            [title]=\"\r\n                (title | bbbTranslate) && !hideUlvPageTitle\r\n                    ? (title | bbbTranslate)\r\n                    : isMobile && breadCrumbs.length\r\n                    ? breadCrumbs[breadCrumbs.length - 1].label\r\n                    : ''\r\n            \"\r\n            class=\"p-b0\"\r\n        >\r\n            <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n                <fd-breadcrumb>\r\n                    @for ( breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track breadCrumb.url; let i =\r\n                    $index; let last = $last) { @if(i>0) {\r\n                    <fd-breadcrumb-item>\r\n                        <bsu-breadcrumb\r\n                            [index]=\"i\"\r\n                            [isLast]=\"last\"\r\n                            [breadCrumb]=\"breadCrumb\"\r\n                            [allBreadCrumb]=\"breadCrumbs\"\r\n                        ></bsu-breadcrumb>\r\n                    </fd-breadcrumb-item>\r\n                    }}\r\n                </fd-breadcrumb>\r\n            </fd-dynamic-page-breadcrumb>\r\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\r\n\r\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\r\n                <fd-toolbar [shouldOverflow]=\"true\" style=\"display: none\"> </fd-toolbar>\r\n                <!-- added this because in mobile landscape toolbar disapper -->\r\n                @if ( searchPanelUi && isMobile) {\r\n                <fd-toolbar\r\n                    class=\"global-actions\"\r\n                    fdType=\"transparent\"\r\n                    [clearBorder]=\"true\"\r\n                    [shouldOverflow]=\"deviceSize === 's'\"\r\n                >\r\n                    @if (isAnonymous === false && canSaveGridSetting) {\r\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\">\r\n                        <fd-popover-control>\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\r\n                                    {{\r\n                                        selectedSearchPanelSettings?.IsStandard\r\n                                            ? ''\r\n                                            : selectedSearchPanelSettings?.Title\r\n                                    }}\r\n                                    @if (searchPanelMoChanged) {\r\n                                    <strong>*</strong>\r\n                                    }\r\n                                </h3>\r\n                                <button\r\n                                    fd-button\r\n                                    glyph=\"slim-arrow-down\"\r\n                                    fdType=\"transparent\"\r\n                                    [fdContentDensity]=\"contentDensity\"\r\n                                ></button>\r\n                            </div>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body mobile>\r\n                            <div fd-popover-body-header>\r\n                                <div fd-bar [fdCozy]>\r\n                                    <div fd-bar-left>\r\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\r\n                                @for (option of allSearchPanelSettings; track option) {\r\n                                <li\r\n                                    fd-list-item\r\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\r\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\r\n                                >\r\n                                    <span fd-list-title>{{ option.Title }}</span>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                            <div fd-popover-body-footer>\r\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\r\n                                    @if (selectedSearchPanelSettings) {\r\n                                    <div fd-bar-right>\r\n                                        @if (!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Save' | bbbTranslate\"\r\n                                            fdType=\"emphasized\"\r\n                                            (click)=\"onFilterSave(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        } @if (searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'SaveAs' | bbbTranslate\"\r\n                                            [fdType]=\"\r\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\r\n                                            \"\r\n                                            (click)=\"onFilterSaveAs(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        }\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Manage' | bbbTranslate\"\r\n                                            fdkInitialFocus\r\n                                            fdType=\"transparent\"\r\n                                            (click)=\"onManageFilters(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if (deviceSize !== 's') {\r\n                    <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                    } @if (isMobile && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        (click)=\"onShowSearchpanelDialog()\"\r\n                        [glyph]=\"'filter'\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    }\r\n                </fd-toolbar>\r\n                }\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"closeEvent.emit()\" title=\"Close\">\r\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n        <fd-dynamic-page-subheader [pinnable]=\"false\" [collapsible]=\"true\">\r\n            @if (!isMobile) {\r\n            <bsu-search-panel\r\n                [hideButtons]=\"false\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-dynamic-page-subheader>\r\n        } @if (!tabMode) {\r\n\r\n        <fd-dynamic-page-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    sideContentMode ? sideContentTemplate : viewerTemplate;\r\n                    context: { noRenderPageing: true }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n\r\n        } @if (pagingSetting?.TotalPages) {\r\n        <fd-dynamic-page-footer>\r\n            <!-- page footer content goes here -->\r\n            <div fd-bar [barDesign]=\"'footer'\">\r\n                <div fd-bar-middle>\r\n                    <ng-container\r\n                        [renderUlvPaging]=\"context\"\r\n                        [pagingSetting]=\"pagingSetting\"\r\n                        (pageChange)=\"onPageChange($event)\"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n        }\r\n    </fd-dynamic-page>\r\n    @if (tabMode) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"sideContentMode ? sideContentTemplate : viewerTemplate; context: { noRenderPageing: true }\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #reportTemplate>\r\n    @if (loading) {\r\n    <bsu-mask size=\"s\"></bsu-mask>\r\n    } @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n    <ng-container *ngTemplateOutlet=\"searchpanelTemplate; context: { hideButtons: false }\"></ng-container>\r\n    }\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            sideContentMode ? sideContentTemplate : viewerTemplate;\r\n            context: { simpleReport: 'simpleReport' }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #sideContentTemplate let-simpleReport=\"simpleReport\">\r\n    <fd-dynamic-side-content\r\n        [class.rtl]=\"rtl\"\r\n        [size]=\"deviceSize | sapSize\"\r\n        fillEmptySpace\r\n        [decrement]=\"'2rem'\"\r\n        [disable]=\"isReportPage\"\r\n        [setMinHeight]=\"true\"\r\n        *untilInView=\"el\"\r\n    >\r\n        <fd-dynamic-side-content-side>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"searchpanelTemplate; context: { isSearcPanelInSideContent: true }\"\r\n            ></ng-container>\r\n        </fd-dynamic-side-content-side>\r\n        <fd-dynamic-side-content-main [style.width]=\"deviceSize !== 's' ? mainContentWidth : null\">\r\n            <fd-card>\r\n                <fd-card-content class=\"tw-flex tw-flex-col\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"viewerTemplate; context: { noRenderPageing: isReportPage ? true : false }\"\r\n                    ></ng-container>\r\n                </fd-card-content>\r\n            </fd-card>\r\n        </fd-dynamic-side-content-main>\r\n    </fd-dynamic-side-content>\r\n</ng-template>\r\n<ng-template\r\n    #searchpanelTemplate\r\n    let-isSearcPanelInSideContent=\"isSearcPanelInSideContent\"\r\n    let-hideButtons=\"hideButtons\"\r\n>\r\n    @if (!isSearcPanelInSideContent) { @if (!hideSearchPanel && searchPanelUi) {\r\n    <bsu-search-panel\r\n        darkClass\r\n        [searchPanelUi]=\"searchPanelUi\"\r\n        [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n        [hideButtons]=\"false\"\r\n        (moChanged)=\"onSearchPanelMoChanged()\"\r\n    ></bsu-search-panel>\r\n    } } @else {\r\n    <fd-card class=\"searchpanel-card\" darkClass>\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <h2 fd-card-title>\r\n                    <fd-icon glyph=\"filter\"></fd-icon><span>{{ 'Filter' | bbbTranslate }}</span>\r\n                </h2>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content style=\"flex-grow: 0\">\r\n            @if (!hideSearchPanel && searchPanelUi) {\r\n            <bsu-search-panel\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                [hideButtons]=\"true\"\r\n                [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-card-content>\r\n        <fd-card-footer style=\"border-bottom: none\">\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"emphasized\"\r\n                [label]=\"'Search' | bbbTranslate\"\r\n                (click)=\"onSearch()\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [label]=\"('Delete' | bbbTranslate) + ' ' + ('Filters' | bbbTranslate)\"\r\n                (click)=\"onClearSearch()\"\r\n                [fdOverflowGroup]=\"1\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n        </fd-card-footer>\r\n    </fd-card>\r\n    }\r\n</ng-template>\r\n<ng-template #viewerTemplate let-noRenderPageing=\"noRenderPageing\">\r\n    <div\r\n        darkClass\r\n        class=\"viewer-container\"\r\n        fillEmptySpace\r\n        [shortcutHandler]=\"shortcuts\"\r\n        [disable]=\"!isReportPage || !fillPage\"\r\n        [decrement]=\"deviceSize !== 's' ? '100px' : '75px'\"\r\n        [style.height]=\"viewerLoading && !hideViewerLoading ? '100%' : 'auto'\"\r\n        [style.min-height]=\"isReportPage ? '100%' : null\"\r\n        [style.position]=\"viewerLoading && !hideViewerLoading ? 'relative' : null\"\r\n    >\r\n        <bnrc-dynamic-ulv-toolbar-component\r\n            #ulvToolbar\r\n            [component]=\"ulvToolbarComponent\"\r\n            [viewSettings]=\"viewSettings\"\r\n            [hideToolbar]=\"hideToolbar\"\r\n            [deviceName]=\"deviceName\"\r\n            [hideTitle]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [toolbarButtons]=\"toolbarButtons | ulvToolbarSettings: toolbarSettings\"\r\n            [toolbarButtonsReportView]=\"toolbarButtonsReportView\"\r\n            [gridSetting]=\"gridSetting\"\r\n            [title]=\"title\"\r\n            [hasSelected]=\"hasSelected\"\r\n            [access]=\"access\"\r\n            [inDialog]=\"inDialog\"\r\n            [isMultiSelect]=\"isMultiSelect\"\r\n            [contentDensity]=\"contentDensity\"\r\n            [inlineEditMode]=\"inlineEditMode && allowInlineEdit && formSetting\"\r\n            [allowInlineEdit]=\"allowInlineEdit && formSetting\"\r\n            [allowGridColumnSort]=\"allowGridColumnSort\"\r\n            [FnHandleEvents]=\"FnHandleUlvToolbarEvents\"\r\n        ></bnrc-dynamic-ulv-toolbar-component>\r\n        @if (viewerLoading) {\r\n        <bsu-mask size=\"m\"></bsu-mask>\r\n        } @if (viewerControl) {\r\n\r\n        <ng-container\r\n            [renderUlvViewer]=\"viewerControl\"\r\n            [layoutInfo]=\"layoutInfo\"\r\n            [isReportPage]=\"isReportPage\"\r\n        ></ng-container>\r\n        }@else{\r\n        <fd-message-page type=\"no-items\" class=\"!tw-bg-transparent\">\r\n            <fd-message-page-title>\u0627\u0628\u062A\u062F\u0627 \u0641\u06CC\u0644\u062A\u0631 \u0631\u0627 \u062A\u0646\u0638\u06CC\u0645 \u06A9\u0646\u06CC\u062F \u0648 \u062C\u0633\u062A\u062C\u0648 \u0646\u0645\u0627\u06CC\u06CC\u062F.</fd-message-page-title>\r\n        </fd-message-page>\r\n        }\r\n    </div>\r\n    @if (!noRenderPageing && pagingSetting?.TotalPages && !hidePageing && !hidePaging) {\r\n    <bnrc-dynamic-ulv-paging-component\r\n        #ulvPaging\r\n        [component]=\"ulvPaginComponent\"\r\n        [pagingSetting]=\"pagingSetting\"\r\n        [context]=\"context\"\r\n        [FnHandleEvents]=\"FnHandleUlvPagingEvents\"\r\n    ></bnrc-dynamic-ulv-paging-component>\r\n    }\r\n</ng-template>\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #searchpanelDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Filters' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <bsu-search-panel\r\n                [hideButtons]=\"false\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdkInitialFocus\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"dialog.dismiss(); onSearch()\"\r\n                    [label]=\"'Search' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button [label]=\"'Clear' | bbbTranslate\" (click)=\"onClearSearch()\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"dialog.dismiss('Close button')\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%;flex-grow:1}:host .searchpanel-card fd-card-header{pointer-events:none;cursor:default;padding:.5rem}:host .searchpanel-card h2[fd-card-title]{font-size:1rem;display:flex;align-items:center;gap:.5rem}:host .searchpanel-card h2[fd-card-title] fd-icon{font-size:1.2rem}:host fd-dynamic-side-content{gap:1rem}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content{border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-side{border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content.rtl fd-dynamic-side-content-side{border-right:none;border-left:1px solid #ccc!important}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-main fd-card{transition:.25s background-color!important}:host.custom-background ::ng-deep article.fd-dynamic-page,:host.custom-background ::ng-deep fd-dynamic-page-content,:host.custom-background ::ng-deep .report-view,:host.custom-background ::ng-deep fd-dynamic-side-content-main>fd-card{background-color:transparent!important}:host>fd-dynamic-page>fd-dynamic-page-header.hide-container ::ng-deep .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile).notitle.sideContentMode ::ng-deep>article>header .fd-dynamic-page__title-container,fd-dynamic-page:not(.mobile).notitle.nosearchpanel ::ng-deep>article>header .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile) ::ng-deep>article>div{display:flex;flex:1}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%}fd-dynamic-page[tabmode=true] ::ng-deep>article{height:auto!important}fd-dynamic-side-content{min-height:100%;height:auto}fd-dynamic-side-content-main fd-card-content ::ng-deep>div{flex:1}fd-dynamic-side-content-main ::ng-deep fd-toolbar{border:none!important}fd-dynamic-side-content-main ::ng-deep bsu-ui-table-view{padding-bottom:0!important;overflow-y:hidden}fd-dynamic-side-content-side fd-card-content{padding:.5rem}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicUlvToolbarComponent, selector: "bnrc-dynamic-ulv-toolbar-component", inputs: ["viewSettings", "allowGridColumnSort", "useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "icon", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "toolbarButtonsReportView", "reportView", "inDialog", "isMultiSelect", "cls", "hasSelected", "config", "hidden", "buttons", "moDataListCount"] }, { kind: "component", type: i2.DynamicUlvPagingComponent, selector: "bnrc-dynamic-ulv-paging-component", inputs: ["pagingSetting", "context"] }, { kind: "directive", type: i2.RenderUlvViewerDirective, selector: "[renderUlvViewer]", inputs: ["mask", "isReportPage", "layoutInfo", "renderUlvViewer"] }, { kind: "directive", type: i2.RenderUlvPaginDirective, selector: "[renderUlvPaging]", inputs: ["mask", "pagingSetting", "renderUlvPaging"], outputs: ["pageChange"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight", "setMaxHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i2.ShortcutHandlerDirective, selector: "[shortcutHandler]", inputs: ["shortcutHandler"], outputs: ["shortCutCommand"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i4$5.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i4$5.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "directive", type: i4$3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$3.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$3.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "component", type: i7$3.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$3.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i8$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i8$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i8$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i8$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i8$2.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i8$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i8$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i8$2.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i9.DynamicSideContentComponent, selector: "fd-dynamic-side-content", inputs: ["position", "size", "id"] }, { kind: "component", type: i9.DynamicSideContentSideComponent, selector: "fd-dynamic-side-content-side", inputs: ["id"] }, { kind: "component", type: i9.DynamicSideContentMainComponent, selector: "fd-dynamic-side-content-main", inputs: ["id"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i3$3.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i4$2.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: i7$1.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$1.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i7$2.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i17.MessagePageComponent, selector: "fd-message-page", inputs: ["class", "type", "hasIcon", "glyphFont", "glyph"] }, { kind: "component", type: i17.MessagePageTitleComponent, selector: "fd-message-page-title" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: SearchPanelComponent, selector: "bsu-search-panel", inputs: ["searchPanelUi", "hideButtons", "isSearcPanelInSideContent"], outputs: ["moChanged"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "directive", type: DarkClassDirective, selector: "[darkClass]" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ToolbarSettingsPipe, name: "ulvToolbarSettings" }, { kind: "pipe", type: DynamicPageSizePipe, name: "dynamicPageSize" }, { kind: "pipe", type: SapSizePipe, name: "sapSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaUlvMainComponent, isStandalone: false, selector: "bsu-barsa-ulv-main", inputs: { component: "component", viewerControl: "viewerControl", hideViewerLoading: "hideViewerLoading", loading: "loading", hidePaging: "hidePaging", viewerLoading: "viewerLoading", isReportPage: "isReportPage", cssBackground: "cssBackground", deviceSize: "deviceSize", shortcuts: "shortcuts", title: "title", searchPanelUi: "searchPanelUi", breadCrumbs: "breadCrumbs", allSearchPanelSettings: "allSearchPanelSettings", isAnonymous: "isAnonymous", canSaveGridSetting: "canSaveGridSetting", rtl: "rtl", hideUlvPageTitle: "hideUlvPageTitle", selectedSearchPanelSettings: "selectedSearchPanelSettings", searchPanelMoChanged: "searchPanelMoChanged", selectedSearchPanelSettingsId: "selectedSearchPanelSettingsId", hideSearchPanel: "hideSearchPanel", pagingSetting: "pagingSetting", contentDensity: "contentDensity", context: "context", isMobile: "isMobile", standalone: "standalone", landscape: "landscape", toolbarSettings: "toolbarSettings", layoutInfo: "layoutInfo", viewSettings: "viewSettings", formSetting: "formSetting", allowGridColumnSort: "allowGridColumnSort", useLayoutItemTextForControl: "useLayoutItemTextForControl", hideTitle: "hideTitle", deviceName: "deviceName", access: "access", hideToolbar: "hideToolbar", toolbarButtons: "toolbarButtons", toolbarButtonsReportView: "toolbarButtonsReportView", inlineEditMode: "inlineEditMode", allowInlineEdit: "allowInlineEdit", gridSetting: "gridSetting", viewCollection: "viewCollection", reportView: "reportView", inDialog: "inDialog", isMultiSelect: "isMultiSelect", hiddenOverflowContent: "hiddenOverflowContent", cls: "cls", hasSelected: "hasSelected", ulvHeightSizeType: "ulvHeightSizeType", ulvHeightSize: "ulvHeightSize" }, outputs: { toggleMultiSelect: "toggleMultiSelect", groupbyClick: "groupbyClick", sortClick: "sortClick", columnClick: "columnClick", editModeClick: "editModeClick", viewClick: "viewClick", createNewInlineMo: "createNewInlineMo", contentHeightChange: "contentHeightChange", closeEvent: "closeEvent", searchPanelMoChange: "searchPanelMoChange", openManageFilters: "openManageFilters", collapsedChange: "collapsedChange", hideSearchPanelClick: "hideSearchPanelClick", filterSave: "filterSave", filterSaveAs: "filterSaveAs", pageChange: "pageChange", showFilterFieldsSetting: "showFilterFieldsSetting", manageFilters: "manageFilters", clearSearch: "clearSearch", search: "search", selectSearchPanelSettings: "selectSearchPanelSettings" }, host: { properties: { "style.background-color": "this._backgroundColor", "style.background-image": "this._backgroundUrl", "style.background-repeat": "this._backgroundRepeat", "class.custom-background": "this._customBackground" } }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["searchpanelDialog"], descendants: true }, { propertyName: "_ulvToolbar", first: true, predicate: ["ulvToolbar"], descendants: true, read: ElementRef }, { propertyName: "_ulvPaging", first: true, predicate: ["ulvPaging"], descendants: true, read: ElementRef }, { propertyName: "_ulvSearchPanel", first: true, predicate: SearchPanelComponent, descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isReportPage ? reportPageTemplate : reportTemplate;\r\n        context: {\r\n            $implicit: viewerControl,\r\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n@if (loading) {\r\n<bsu-mask size=\"m\"></bsu-mask>\r\n}\r\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\r\n    <fd-dynamic-page\r\n        darkClass\r\n        formClose\r\n        mobile\r\n        [attr.isMobile]=\"isMobile ? true : null\"\r\n        [isMobile]=\"isMobile\"\r\n        [size]=\"deviceSize | dynamicPageSize\"\r\n        [attr.tabMode]=\"tabMode\"\r\n        [autoResponsive]=\"false\"\r\n        [class.notitle]=\"title.length < 2 || hideUlvPageTitle\"\r\n        [class.nosearchpanel]=\"!searchPanelUi\"\r\n        [class.hideSearchPanel]=\"hideSearchPanel\"\r\n        [class.sideContentMode]=\"sideContentMode\"\r\n    >\r\n        <fd-dynamic-page-header\r\n            [title]=\"\r\n                (title | bbbTranslate) && !hideUlvPageTitle\r\n                    ? (title | bbbTranslate)\r\n                    : isMobile && breadCrumbs.length\r\n                    ? breadCrumbs[breadCrumbs.length - 1].label\r\n                    : ''\r\n            \"\r\n            class=\"p-b0\"\r\n        >\r\n            <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n                <fd-breadcrumb>\r\n                    @for ( breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track breadCrumb.url; let i =\r\n                    $index; let last = $last) { @if(i>0) {\r\n                    <fd-breadcrumb-item>\r\n                        <bsu-breadcrumb\r\n                            [index]=\"i\"\r\n                            [isLast]=\"last\"\r\n                            [breadCrumb]=\"breadCrumb\"\r\n                            [allBreadCrumb]=\"breadCrumbs\"\r\n                        ></bsu-breadcrumb>\r\n                    </fd-breadcrumb-item>\r\n                    }}\r\n                </fd-breadcrumb>\r\n            </fd-dynamic-page-breadcrumb>\r\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\r\n\r\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\r\n                <fd-toolbar [shouldOverflow]=\"true\" style=\"display: none\"> </fd-toolbar>\r\n                <!-- added this because in mobile landscape toolbar disapper -->\r\n                @if ( searchPanelUi && isMobile) {\r\n                <fd-toolbar\r\n                    class=\"global-actions\"\r\n                    fdType=\"transparent\"\r\n                    [clearBorder]=\"true\"\r\n                    [shouldOverflow]=\"deviceSize === 's'\"\r\n                >\r\n                    @if (isAnonymous === false && canSaveGridSetting) {\r\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\">\r\n                        <fd-popover-control>\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\r\n                                    {{\r\n                                        selectedSearchPanelSettings?.IsStandard\r\n                                            ? ''\r\n                                            : selectedSearchPanelSettings?.Title\r\n                                    }}\r\n                                    @if (searchPanelMoChanged) {\r\n                                    <strong>*</strong>\r\n                                    }\r\n                                </h3>\r\n                                <button\r\n                                    fd-button\r\n                                    glyph=\"slim-arrow-down\"\r\n                                    fdType=\"transparent\"\r\n                                    [fdContentDensity]=\"contentDensity\"\r\n                                ></button>\r\n                            </div>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body mobile>\r\n                            <div fd-popover-body-header>\r\n                                <div fd-bar [fdCozy]>\r\n                                    <div fd-bar-left>\r\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\r\n                                @for (option of allSearchPanelSettings; track option) {\r\n                                <li\r\n                                    fd-list-item\r\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\r\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\r\n                                >\r\n                                    <span fd-list-title>{{ option.Title }}</span>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                            <div fd-popover-body-footer>\r\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\r\n                                    @if (selectedSearchPanelSettings) {\r\n                                    <div fd-bar-right>\r\n                                        @if (!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Save' | bbbTranslate\"\r\n                                            fdType=\"emphasized\"\r\n                                            (click)=\"onFilterSave(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        } @if (searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'SaveAs' | bbbTranslate\"\r\n                                            [fdType]=\"\r\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\r\n                                            \"\r\n                                            (click)=\"onFilterSaveAs(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        }\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Manage' | bbbTranslate\"\r\n                                            fdkInitialFocus\r\n                                            fdType=\"transparent\"\r\n                                            (click)=\"onManageFilters(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if (deviceSize !== 's') {\r\n                    <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                    } @if (isMobile && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        (click)=\"onShowSearchpanelDialog()\"\r\n                        [glyph]=\"'filter'\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    }\r\n                </fd-toolbar>\r\n                }\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"closeEvent.emit()\" title=\"Close\">\r\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n        <fd-dynamic-page-subheader [pinnable]=\"false\" [collapsible]=\"!isMobile\">\r\n            @if (!isMobile) {\r\n            <bsu-search-panel\r\n                [hideButtons]=\"false\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-dynamic-page-subheader>\r\n        } @if (!tabMode) {\r\n        <fd-dynamic-page-content [class.!tw-px-4]=\"!isMobile\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    sideContentMode ? sideContentTemplate : viewerTemplate;\r\n                    context: { noRenderPageing: true }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n\r\n        } @if (pagingSetting?.TotalPages) {\r\n        <fd-dynamic-page-footer>\r\n            <!-- page footer content goes here -->\r\n            <div fd-bar [barDesign]=\"'footer'\">\r\n                <div fd-bar-middle>\r\n                    <ng-container\r\n                        [renderUlvPaging]=\"context\"\r\n                        [pagingSetting]=\"pagingSetting\"\r\n                        (pageChange)=\"onPageChange($event)\"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n        }\r\n    </fd-dynamic-page>\r\n    @if (tabMode) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"sideContentMode ? sideContentTemplate : viewerTemplate; context: { noRenderPageing: true }\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #reportTemplate>\r\n    @if (loading) {\r\n    <bsu-mask size=\"s\"></bsu-mask>\r\n    } @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n    <ng-container *ngTemplateOutlet=\"searchpanelTemplate; context: { hideButtons: false }\"></ng-container>\r\n    }\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            sideContentMode ? sideContentTemplate : viewerTemplate;\r\n            context: { simpleReport: 'simpleReport' }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #sideContentTemplate let-simpleReport=\"simpleReport\">\r\n    <fd-dynamic-side-content\r\n        [class.rtl]=\"rtl\"\r\n        [size]=\"deviceSize | sapSize\"\r\n        fillEmptySpace\r\n        [decrement]=\"'2rem'\"\r\n        [disable]=\"isReportPage\"\r\n        [setMinHeight]=\"true\"\r\n        *untilInView=\"el\"\r\n    >\r\n        <fd-dynamic-side-content-side>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"searchpanelTemplate; context: { isSearcPanelInSideContent: true }\"\r\n            ></ng-container>\r\n        </fd-dynamic-side-content-side>\r\n        <fd-dynamic-side-content-main [style.width]=\"deviceSize !== 's' ? mainContentWidth : null\">\r\n            <fd-card>\r\n                <fd-card-content class=\"tw-flex tw-flex-col\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"viewerTemplate; context: { noRenderPageing: isReportPage ? true : false }\"\r\n                    ></ng-container>\r\n                </fd-card-content>\r\n            </fd-card>\r\n        </fd-dynamic-side-content-main>\r\n    </fd-dynamic-side-content>\r\n</ng-template>\r\n<ng-template\r\n    #searchpanelTemplate\r\n    let-isSearcPanelInSideContent=\"isSearcPanelInSideContent\"\r\n    let-hideButtons=\"hideButtons\"\r\n>\r\n    @if (!isSearcPanelInSideContent) { @if (!hideSearchPanel && searchPanelUi) {\r\n    <bsu-search-panel\r\n        darkClass\r\n        [searchPanelUi]=\"searchPanelUi\"\r\n        [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n        [hideButtons]=\"false\"\r\n        (moChanged)=\"onSearchPanelMoChanged()\"\r\n    ></bsu-search-panel>\r\n    } } @else {\r\n    <fd-card class=\"searchpanel-card\" darkClass>\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <h2 fd-card-title>\r\n                    <fd-icon glyph=\"filter\"></fd-icon><span>{{ 'Filter' | bbbTranslate }}</span>\r\n                </h2>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content style=\"flex-grow: 0\">\r\n            @if (!hideSearchPanel && searchPanelUi) {\r\n            <bsu-search-panel\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                [hideButtons]=\"true\"\r\n                [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-card-content>\r\n        <fd-card-footer style=\"border-bottom: none\">\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"emphasized\"\r\n                [label]=\"'Search' | bbbTranslate\"\r\n                (click)=\"onSearch()\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [label]=\"('Delete' | bbbTranslate) + ' ' + ('Filters' | bbbTranslate)\"\r\n                (click)=\"onClearSearch()\"\r\n                [fdOverflowGroup]=\"1\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n        </fd-card-footer>\r\n    </fd-card>\r\n    }\r\n</ng-template>\r\n<ng-template #viewerTemplate let-noRenderPageing=\"noRenderPageing\">\r\n    <div\r\n        darkClass\r\n        class=\"viewer-container\"\r\n        fillEmptySpace\r\n        [shortcutHandler]=\"shortcuts\"\r\n        [disable]=\"!isReportPage || !fillPage\"\r\n        [decrement]=\"deviceSize !== 's' ? '100px' : '75px'\"\r\n        [style.height]=\"viewerLoading && !hideViewerLoading ? '100%' : 'auto'\"\r\n        [style.min-height]=\"isReportPage ? '100%' : null\"\r\n        [style.position]=\"viewerLoading && !hideViewerLoading ? 'relative' : null\"\r\n    >\r\n        <bnrc-dynamic-ulv-toolbar-component\r\n            #ulvToolbar\r\n            [component]=\"ulvToolbarComponent\"\r\n            [viewSettings]=\"viewSettings\"\r\n            [hideToolbar]=\"hideToolbar\"\r\n            [deviceName]=\"deviceName\"\r\n            [hideTitle]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [toolbarButtons]=\"toolbarButtons | ulvToolbarSettings: toolbarSettings\"\r\n            [toolbarButtonsReportView]=\"toolbarButtonsReportView\"\r\n            [gridSetting]=\"gridSetting\"\r\n            [title]=\"title\"\r\n            [hasSelected]=\"hasSelected\"\r\n            [access]=\"access\"\r\n            [inDialog]=\"inDialog\"\r\n            [isMultiSelect]=\"isMultiSelect\"\r\n            [contentDensity]=\"contentDensity\"\r\n            [inlineEditMode]=\"inlineEditMode && allowInlineEdit && formSetting\"\r\n            [allowInlineEdit]=\"allowInlineEdit && formSetting\"\r\n            [allowGridColumnSort]=\"allowGridColumnSort\"\r\n            [FnHandleEvents]=\"FnHandleUlvToolbarEvents\"\r\n        ></bnrc-dynamic-ulv-toolbar-component>\r\n        @if (viewerLoading) {\r\n        <bsu-mask size=\"m\"></bsu-mask>\r\n        } @if (viewerControl) {\r\n\r\n        <ng-container\r\n            [renderUlvViewer]=\"viewerControl\"\r\n            [layoutInfo]=\"layoutInfo\"\r\n            [isReportPage]=\"isReportPage\"\r\n        ></ng-container>\r\n        }@else{\r\n        <fd-message-page type=\"no-items\" class=\"!tw-bg-transparent\" [class.mobile]=\"isMobile\">\r\n            <fd-message-page-title>\u0627\u0628\u062A\u062F\u0627 \u0641\u06CC\u0644\u062A\u0631 \u0631\u0627 \u062A\u0646\u0638\u06CC\u0645 \u06A9\u0646\u06CC\u062F \u0648 \u062C\u0633\u062A\u062C\u0648 \u0646\u0645\u0627\u06CC\u06CC\u062F.</fd-message-page-title>\r\n        </fd-message-page>\r\n        }\r\n    </div>\r\n    @if (!noRenderPageing && pagingSetting?.TotalPages && !hidePageing && !hidePaging) {\r\n    <bnrc-dynamic-ulv-paging-component\r\n        #ulvPaging\r\n        [component]=\"ulvPaginComponent\"\r\n        [pagingSetting]=\"pagingSetting\"\r\n        [context]=\"context\"\r\n        [FnHandleEvents]=\"FnHandleUlvPagingEvents\"\r\n    ></bnrc-dynamic-ulv-paging-component>\r\n    }\r\n</ng-template>\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #searchpanelDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Filters' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <bsu-search-panel\r\n                [hideButtons]=\"false\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdkInitialFocus\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"dialog.dismiss(); onSearch()\"\r\n                    [label]=\"'Search' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button [label]=\"'Clear' | bbbTranslate\" (click)=\"onClearSearch()\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"dialog.dismiss('Close button')\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%;flex-grow:1}:host .searchpanel-card fd-card-header{pointer-events:none;cursor:default;padding:.5rem}:host .searchpanel-card h2[fd-card-title]{font-size:1rem;display:flex;align-items:center;gap:.5rem}:host .searchpanel-card h2[fd-card-title] fd-icon{font-size:1.2rem}:host fd-dynamic-side-content{gap:1rem}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content{border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-side{border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content.rtl fd-dynamic-side-content-side{border-right:none;border-left:1px solid #ccc!important}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-main fd-card{transition:.25s background-color!important}:host.custom-background ::ng-deep article.fd-dynamic-page,:host.custom-background ::ng-deep fd-dynamic-page-content,:host.custom-background ::ng-deep .report-view,:host.custom-background ::ng-deep fd-dynamic-side-content-main>fd-card{background-color:transparent!important}:host>fd-dynamic-page>fd-dynamic-page-header.hide-container ::ng-deep .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile).notitle.sideContentMode ::ng-deep>article>header .fd-dynamic-page__title-container,fd-dynamic-page:not(.mobile).notitle.nosearchpanel ::ng-deep>article>header .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile) ::ng-deep>article>div{display:flex;flex:1}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%}fd-dynamic-page[tabmode=true] ::ng-deep>article{height:auto!important}fd-dynamic-side-content{min-height:100%;height:auto}fd-dynamic-side-content-main fd-card-content ::ng-deep>div{flex:1}fd-dynamic-side-content-main ::ng-deep fd-toolbar{border:none!important}fd-dynamic-side-content-main ::ng-deep bsu-ui-table-view{padding-bottom:0!important;overflow-y:hidden}fd-dynamic-side-content-side fd-card-content{padding:.5rem}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}fd-message-page.mobile ::ng-deep>div{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicUlvToolbarComponent, selector: "bnrc-dynamic-ulv-toolbar-component", inputs: ["viewSettings", "allowGridColumnSort", "useLayoutItemTextForControl", "enableSearch", "hideTitle", "title", "icon", "deviceName", "deviceSize", "access", "hideToolbar", "toolbarButtons", "contentDensity", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "toolbarButtonsReportView", "reportView", "inDialog", "isMultiSelect", "cls", "hasSelected", "config", "hidden", "buttons", "moDataListCount"] }, { kind: "component", type: i2.DynamicUlvPagingComponent, selector: "bnrc-dynamic-ulv-paging-component", inputs: ["pagingSetting", "context"] }, { kind: "directive", type: i2.RenderUlvViewerDirective, selector: "[renderUlvViewer]", inputs: ["mask", "isReportPage", "layoutInfo", "renderUlvViewer"] }, { kind: "directive", type: i2.RenderUlvPaginDirective, selector: "[renderUlvPaging]", inputs: ["mask", "pagingSetting", "renderUlvPaging"], outputs: ["pageChange"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight", "setMaxHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i2.ShortcutHandlerDirective, selector: "[shortcutHandler]", inputs: ["shortcutHandler"], outputs: ["shortCutCommand"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i4$5.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i4$5.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "directive", type: i4$3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$3.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$3.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "component", type: i7$3.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$3.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i8$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i8$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i8$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i8$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i8$2.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i8$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i8$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i8$2.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i9.DynamicSideContentComponent, selector: "fd-dynamic-side-content", inputs: ["position", "size", "id"] }, { kind: "component", type: i9.DynamicSideContentSideComponent, selector: "fd-dynamic-side-content-side", inputs: ["id"] }, { kind: "component", type: i9.DynamicSideContentMainComponent, selector: "fd-dynamic-side-content-main", inputs: ["id"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i3$3.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i4$2.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: i7$1.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$1.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i7$2.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i17.MessagePageComponent, selector: "fd-message-page", inputs: ["class", "type", "hasIcon", "glyphFont", "glyph"] }, { kind: "component", type: i17.MessagePageTitleComponent, selector: "fd-message-page-title" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: SearchPanelComponent, selector: "bsu-search-panel", inputs: ["searchPanelUi", "hideButtons", "isSearcPanelInSideContent"], outputs: ["moChanged"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "directive", type: DarkClassDirective, selector: "[darkClass]" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ToolbarSettingsPipe, name: "ulvToolbarSettings" }, { kind: "pipe", type: DynamicPageSizePipe, name: "dynamicPageSize" }, { kind: "pipe", type: SapSizePipe, name: "sapSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaUlvMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-ulv-main', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isReportPage ? reportPageTemplate : reportTemplate;\r\n        context: {\r\n            $implicit: viewerControl,\r\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n@if (loading) {\r\n<bsu-mask size=\"m\"></bsu-mask>\r\n}\r\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\r\n    <fd-dynamic-page\r\n        darkClass\r\n        formClose\r\n        mobile\r\n        [attr.isMobile]=\"isMobile ? true : null\"\r\n        [isMobile]=\"isMobile\"\r\n        [size]=\"deviceSize | dynamicPageSize\"\r\n        [attr.tabMode]=\"tabMode\"\r\n        [autoResponsive]=\"false\"\r\n        [class.notitle]=\"title.length < 2 || hideUlvPageTitle\"\r\n        [class.nosearchpanel]=\"!searchPanelUi\"\r\n        [class.hideSearchPanel]=\"hideSearchPanel\"\r\n        [class.sideContentMode]=\"sideContentMode\"\r\n    >\r\n        <fd-dynamic-page-header\r\n            [title]=\"\r\n                (title | bbbTranslate) && !hideUlvPageTitle\r\n                    ? (title | bbbTranslate)\r\n                    : isMobile && breadCrumbs.length\r\n                    ? breadCrumbs[breadCrumbs.length - 1].label\r\n                    : ''\r\n            \"\r\n            class=\"p-b0\"\r\n        >\r\n            <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n                <fd-breadcrumb>\r\n                    @for ( breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track breadCrumb.url; let i =\r\n                    $index; let last = $last) { @if(i>0) {\r\n                    <fd-breadcrumb-item>\r\n                        <bsu-breadcrumb\r\n                            [index]=\"i\"\r\n                            [isLast]=\"last\"\r\n                            [breadCrumb]=\"breadCrumb\"\r\n                            [allBreadCrumb]=\"breadCrumbs\"\r\n                        ></bsu-breadcrumb>\r\n                    </fd-breadcrumb-item>\r\n                    }}\r\n                </fd-breadcrumb>\r\n            </fd-dynamic-page-breadcrumb>\r\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\r\n\r\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\r\n                <fd-toolbar [shouldOverflow]=\"true\" style=\"display: none\"> </fd-toolbar>\r\n                <!-- added this because in mobile landscape toolbar disapper -->\r\n                @if ( searchPanelUi && isMobile) {\r\n                <fd-toolbar\r\n                    class=\"global-actions\"\r\n                    fdType=\"transparent\"\r\n                    [clearBorder]=\"true\"\r\n                    [shouldOverflow]=\"deviceSize === 's'\"\r\n                >\r\n                    @if (isAnonymous === false && canSaveGridSetting) {\r\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\">\r\n                        <fd-popover-control>\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\r\n                                    {{\r\n                                        selectedSearchPanelSettings?.IsStandard\r\n                                            ? ''\r\n                                            : selectedSearchPanelSettings?.Title\r\n                                    }}\r\n                                    @if (searchPanelMoChanged) {\r\n                                    <strong>*</strong>\r\n                                    }\r\n                                </h3>\r\n                                <button\r\n                                    fd-button\r\n                                    glyph=\"slim-arrow-down\"\r\n                                    fdType=\"transparent\"\r\n                                    [fdContentDensity]=\"contentDensity\"\r\n                                ></button>\r\n                            </div>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body mobile>\r\n                            <div fd-popover-body-header>\r\n                                <div fd-bar [fdCozy]>\r\n                                    <div fd-bar-left>\r\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\r\n                                @for (option of allSearchPanelSettings; track option) {\r\n                                <li\r\n                                    fd-list-item\r\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\r\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\r\n                                >\r\n                                    <span fd-list-title>{{ option.Title }}</span>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                            <div fd-popover-body-footer>\r\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\r\n                                    @if (selectedSearchPanelSettings) {\r\n                                    <div fd-bar-right>\r\n                                        @if (!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Save' | bbbTranslate\"\r\n                                            fdType=\"emphasized\"\r\n                                            (click)=\"onFilterSave(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        } @if (searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'SaveAs' | bbbTranslate\"\r\n                                            [fdType]=\"\r\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\r\n                                            \"\r\n                                            (click)=\"onFilterSaveAs(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        }\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Manage' | bbbTranslate\"\r\n                                            fdkInitialFocus\r\n                                            fdType=\"transparent\"\r\n                                            (click)=\"onManageFilters(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if (deviceSize !== 's') {\r\n                    <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                    } @if (isMobile && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        (click)=\"onShowSearchpanelDialog()\"\r\n                        [glyph]=\"'filter'\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    }\r\n                </fd-toolbar>\r\n                }\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"closeEvent.emit()\" title=\"Close\">\r\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n        <fd-dynamic-page-subheader [pinnable]=\"false\" [collapsible]=\"true\">\r\n            @if (!isMobile) {\r\n            <bsu-search-panel\r\n                [hideButtons]=\"false\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-dynamic-page-subheader>\r\n        } @if (!tabMode) {\r\n\r\n        <fd-dynamic-page-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    sideContentMode ? sideContentTemplate : viewerTemplate;\r\n                    context: { noRenderPageing: true }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n\r\n        } @if (pagingSetting?.TotalPages) {\r\n        <fd-dynamic-page-footer>\r\n            <!-- page footer content goes here -->\r\n            <div fd-bar [barDesign]=\"'footer'\">\r\n                <div fd-bar-middle>\r\n                    <ng-container\r\n                        [renderUlvPaging]=\"context\"\r\n                        [pagingSetting]=\"pagingSetting\"\r\n                        (pageChange)=\"onPageChange($event)\"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n        }\r\n    </fd-dynamic-page>\r\n    @if (tabMode) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"sideContentMode ? sideContentTemplate : viewerTemplate; context: { noRenderPageing: true }\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #reportTemplate>\r\n    @if (loading) {\r\n    <bsu-mask size=\"s\"></bsu-mask>\r\n    } @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n    <ng-container *ngTemplateOutlet=\"searchpanelTemplate; context: { hideButtons: false }\"></ng-container>\r\n    }\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            sideContentMode ? sideContentTemplate : viewerTemplate;\r\n            context: { simpleReport: 'simpleReport' }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #sideContentTemplate let-simpleReport=\"simpleReport\">\r\n    <fd-dynamic-side-content\r\n        [class.rtl]=\"rtl\"\r\n        [size]=\"deviceSize | sapSize\"\r\n        fillEmptySpace\r\n        [decrement]=\"'2rem'\"\r\n        [disable]=\"isReportPage\"\r\n        [setMinHeight]=\"true\"\r\n        *untilInView=\"el\"\r\n    >\r\n        <fd-dynamic-side-content-side>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"searchpanelTemplate; context: { isSearcPanelInSideContent: true }\"\r\n            ></ng-container>\r\n        </fd-dynamic-side-content-side>\r\n        <fd-dynamic-side-content-main [style.width]=\"deviceSize !== 's' ? mainContentWidth : null\">\r\n            <fd-card>\r\n                <fd-card-content class=\"tw-flex tw-flex-col\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"viewerTemplate; context: { noRenderPageing: isReportPage ? true : false }\"\r\n                    ></ng-container>\r\n                </fd-card-content>\r\n            </fd-card>\r\n        </fd-dynamic-side-content-main>\r\n    </fd-dynamic-side-content>\r\n</ng-template>\r\n<ng-template\r\n    #searchpanelTemplate\r\n    let-isSearcPanelInSideContent=\"isSearcPanelInSideContent\"\r\n    let-hideButtons=\"hideButtons\"\r\n>\r\n    @if (!isSearcPanelInSideContent) { @if (!hideSearchPanel && searchPanelUi) {\r\n    <bsu-search-panel\r\n        darkClass\r\n        [searchPanelUi]=\"searchPanelUi\"\r\n        [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n        [hideButtons]=\"false\"\r\n        (moChanged)=\"onSearchPanelMoChanged()\"\r\n    ></bsu-search-panel>\r\n    } } @else {\r\n    <fd-card class=\"searchpanel-card\" darkClass>\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <h2 fd-card-title>\r\n                    <fd-icon glyph=\"filter\"></fd-icon><span>{{ 'Filter' | bbbTranslate }}</span>\r\n                </h2>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content style=\"flex-grow: 0\">\r\n            @if (!hideSearchPanel && searchPanelUi) {\r\n            <bsu-search-panel\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                [hideButtons]=\"true\"\r\n                [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-card-content>\r\n        <fd-card-footer style=\"border-bottom: none\">\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"emphasized\"\r\n                [label]=\"'Search' | bbbTranslate\"\r\n                (click)=\"onSearch()\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [label]=\"('Delete' | bbbTranslate) + ' ' + ('Filters' | bbbTranslate)\"\r\n                (click)=\"onClearSearch()\"\r\n                [fdOverflowGroup]=\"1\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n        </fd-card-footer>\r\n    </fd-card>\r\n    }\r\n</ng-template>\r\n<ng-template #viewerTemplate let-noRenderPageing=\"noRenderPageing\">\r\n    <div\r\n        darkClass\r\n        class=\"viewer-container\"\r\n        fillEmptySpace\r\n        [shortcutHandler]=\"shortcuts\"\r\n        [disable]=\"!isReportPage || !fillPage\"\r\n        [decrement]=\"deviceSize !== 's' ? '100px' : '75px'\"\r\n        [style.height]=\"viewerLoading && !hideViewerLoading ? '100%' : 'auto'\"\r\n        [style.min-height]=\"isReportPage ? '100%' : null\"\r\n        [style.position]=\"viewerLoading && !hideViewerLoading ? 'relative' : null\"\r\n    >\r\n        <bnrc-dynamic-ulv-toolbar-component\r\n            #ulvToolbar\r\n            [component]=\"ulvToolbarComponent\"\r\n            [viewSettings]=\"viewSettings\"\r\n            [hideToolbar]=\"hideToolbar\"\r\n            [deviceName]=\"deviceName\"\r\n            [hideTitle]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [toolbarButtons]=\"toolbarButtons | ulvToolbarSettings: toolbarSettings\"\r\n            [toolbarButtonsReportView]=\"toolbarButtonsReportView\"\r\n            [gridSetting]=\"gridSetting\"\r\n            [title]=\"title\"\r\n            [hasSelected]=\"hasSelected\"\r\n            [access]=\"access\"\r\n            [inDialog]=\"inDialog\"\r\n            [isMultiSelect]=\"isMultiSelect\"\r\n            [contentDensity]=\"contentDensity\"\r\n            [inlineEditMode]=\"inlineEditMode && allowInlineEdit && formSetting\"\r\n            [allowInlineEdit]=\"allowInlineEdit && formSetting\"\r\n            [allowGridColumnSort]=\"allowGridColumnSort\"\r\n            [FnHandleEvents]=\"FnHandleUlvToolbarEvents\"\r\n        ></bnrc-dynamic-ulv-toolbar-component>\r\n        @if (viewerLoading) {\r\n        <bsu-mask size=\"m\"></bsu-mask>\r\n        } @if (viewerControl) {\r\n\r\n        <ng-container\r\n            [renderUlvViewer]=\"viewerControl\"\r\n            [layoutInfo]=\"layoutInfo\"\r\n            [isReportPage]=\"isReportPage\"\r\n        ></ng-container>\r\n        }@else{\r\n        <fd-message-page type=\"no-items\" class=\"!tw-bg-transparent\">\r\n            <fd-message-page-title>\u0627\u0628\u062A\u062F\u0627 \u0641\u06CC\u0644\u062A\u0631 \u0631\u0627 \u062A\u0646\u0638\u06CC\u0645 \u06A9\u0646\u06CC\u062F \u0648 \u062C\u0633\u062A\u062C\u0648 \u0646\u0645\u0627\u06CC\u06CC\u062F.</fd-message-page-title>\r\n        </fd-message-page>\r\n        }\r\n    </div>\r\n    @if (!noRenderPageing && pagingSetting?.TotalPages && !hidePageing && !hidePaging) {\r\n    <bnrc-dynamic-ulv-paging-component\r\n        #ulvPaging\r\n        [component]=\"ulvPaginComponent\"\r\n        [pagingSetting]=\"pagingSetting\"\r\n        [context]=\"context\"\r\n        [FnHandleEvents]=\"FnHandleUlvPagingEvents\"\r\n    ></bnrc-dynamic-ulv-paging-component>\r\n    }\r\n</ng-template>\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #searchpanelDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Filters' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <bsu-search-panel\r\n                [hideButtons]=\"false\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdkInitialFocus\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"dialog.dismiss(); onSearch()\"\r\n                    [label]=\"'Search' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button [label]=\"'Clear' | bbbTranslate\" (click)=\"onClearSearch()\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"dialog.dismiss('Close button')\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%;flex-grow:1}:host .searchpanel-card fd-card-header{pointer-events:none;cursor:default;padding:.5rem}:host .searchpanel-card h2[fd-card-title]{font-size:1rem;display:flex;align-items:center;gap:.5rem}:host .searchpanel-card h2[fd-card-title] fd-icon{font-size:1.2rem}:host fd-dynamic-side-content{gap:1rem}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content{border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-side{border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content.rtl fd-dynamic-side-content-side{border-right:none;border-left:1px solid #ccc!important}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-main fd-card{transition:.25s background-color!important}:host.custom-background ::ng-deep article.fd-dynamic-page,:host.custom-background ::ng-deep fd-dynamic-page-content,:host.custom-background ::ng-deep .report-view,:host.custom-background ::ng-deep fd-dynamic-side-content-main>fd-card{background-color:transparent!important}:host>fd-dynamic-page>fd-dynamic-page-header.hide-container ::ng-deep .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile).notitle.sideContentMode ::ng-deep>article>header .fd-dynamic-page__title-container,fd-dynamic-page:not(.mobile).notitle.nosearchpanel ::ng-deep>article>header .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile) ::ng-deep>article>div{display:flex;flex:1}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%}fd-dynamic-page[tabmode=true] ::ng-deep>article{height:auto!important}fd-dynamic-side-content{min-height:100%;height:auto}fd-dynamic-side-content-main fd-card-content ::ng-deep>div{flex:1}fd-dynamic-side-content-main ::ng-deep fd-toolbar{border:none!important}fd-dynamic-side-content-main ::ng-deep bsu-ui-table-view{padding-bottom:0!important;overflow-y:hidden}fd-dynamic-side-content-side fd-card-content{padding:.5rem}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"] }]
+            args: [{ selector: 'bsu-barsa-ulv-main', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isReportPage ? reportPageTemplate : reportTemplate;\r\n        context: {\r\n            $implicit: viewerControl,\r\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n@if (loading) {\r\n<bsu-mask size=\"m\"></bsu-mask>\r\n}\r\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\r\n    <fd-dynamic-page\r\n        darkClass\r\n        formClose\r\n        mobile\r\n        [attr.isMobile]=\"isMobile ? true : null\"\r\n        [isMobile]=\"isMobile\"\r\n        [size]=\"deviceSize | dynamicPageSize\"\r\n        [attr.tabMode]=\"tabMode\"\r\n        [autoResponsive]=\"false\"\r\n        [class.notitle]=\"title.length < 2 || hideUlvPageTitle\"\r\n        [class.nosearchpanel]=\"!searchPanelUi\"\r\n        [class.hideSearchPanel]=\"hideSearchPanel\"\r\n        [class.sideContentMode]=\"sideContentMode\"\r\n    >\r\n        <fd-dynamic-page-header\r\n            [title]=\"\r\n                (title | bbbTranslate) && !hideUlvPageTitle\r\n                    ? (title | bbbTranslate)\r\n                    : isMobile && breadCrumbs.length\r\n                    ? breadCrumbs[breadCrumbs.length - 1].label\r\n                    : ''\r\n            \"\r\n            class=\"p-b0\"\r\n        >\r\n            <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile\">\r\n                <fd-breadcrumb>\r\n                    @for ( breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track breadCrumb.url; let i =\r\n                    $index; let last = $last) { @if(i>0) {\r\n                    <fd-breadcrumb-item>\r\n                        <bsu-breadcrumb\r\n                            [index]=\"i\"\r\n                            [isLast]=\"last\"\r\n                            [breadCrumb]=\"breadCrumb\"\r\n                            [allBreadCrumb]=\"breadCrumbs\"\r\n                        ></bsu-breadcrumb>\r\n                    </fd-breadcrumb-item>\r\n                    }}\r\n                </fd-breadcrumb>\r\n            </fd-dynamic-page-breadcrumb>\r\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\r\n\r\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: auto\">\r\n                <fd-toolbar [shouldOverflow]=\"true\" style=\"display: none\"> </fd-toolbar>\r\n                <!-- added this because in mobile landscape toolbar disapper -->\r\n                @if ( searchPanelUi && isMobile) {\r\n                <fd-toolbar\r\n                    class=\"global-actions\"\r\n                    fdType=\"transparent\"\r\n                    [clearBorder]=\"true\"\r\n                    [shouldOverflow]=\"deviceSize === 's'\"\r\n                >\r\n                    @if (isAnonymous === false && canSaveGridSetting) {\r\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\">\r\n                        <fd-popover-control>\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\r\n                                    {{\r\n                                        selectedSearchPanelSettings?.IsStandard\r\n                                            ? ''\r\n                                            : selectedSearchPanelSettings?.Title\r\n                                    }}\r\n                                    @if (searchPanelMoChanged) {\r\n                                    <strong>*</strong>\r\n                                    }\r\n                                </h3>\r\n                                <button\r\n                                    fd-button\r\n                                    glyph=\"slim-arrow-down\"\r\n                                    fdType=\"transparent\"\r\n                                    [fdContentDensity]=\"contentDensity\"\r\n                                ></button>\r\n                            </div>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body mobile>\r\n                            <div fd-popover-body-header>\r\n                                <div fd-bar [fdCozy]>\r\n                                    <div fd-bar-left>\r\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\r\n                                @for (option of allSearchPanelSettings; track option) {\r\n                                <li\r\n                                    fd-list-item\r\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\r\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\r\n                                >\r\n                                    <span fd-list-title>{{ option.Title }}</span>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                            <div fd-popover-body-footer>\r\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\r\n                                    @if (selectedSearchPanelSettings) {\r\n                                    <div fd-bar-right>\r\n                                        @if (!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Save' | bbbTranslate\"\r\n                                            fdType=\"emphasized\"\r\n                                            (click)=\"onFilterSave(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        } @if (searchPanelMoChanged) {\r\n                                        <fd-button-bar\r\n                                            [label]=\"'SaveAs' | bbbTranslate\"\r\n                                            [fdType]=\"\r\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\r\n                                            \"\r\n                                            (click)=\"onFilterSaveAs(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                        }\r\n                                        <fd-button-bar\r\n                                            [label]=\"'Manage' | bbbTranslate\"\r\n                                            fdkInitialFocus\r\n                                            fdType=\"transparent\"\r\n                                            (click)=\"onManageFilters(popover)\"\r\n                                        >\r\n                                        </fd-button-bar>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if (deviceSize !== 's') {\r\n                    <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                    } @if (isMobile && searchPanelUi) {\r\n                    <button\r\n                        fd-button\r\n                        fd-toolbar-item\r\n                        fdOverflowPriority=\"never\"\r\n                        (click)=\"onShowSearchpanelDialog()\"\r\n                        [glyph]=\"'filter'\"\r\n                        [fdContentDensity]=\"contentDensity\"\r\n                    ></button>\r\n                    }\r\n                </fd-toolbar>\r\n                }\r\n            </fd-dynamic-page-global-actions>\r\n            <fd-dynamic-page-layout-actions>\r\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"closeEvent.emit()\" title=\"Close\">\r\n                        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n                    </button>\r\n                </fd-toolbar>\r\n            </fd-dynamic-page-layout-actions>\r\n        </fd-dynamic-page-header>\r\n        @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n        <fd-dynamic-page-subheader [pinnable]=\"false\" [collapsible]=\"!isMobile\">\r\n            @if (!isMobile) {\r\n            <bsu-search-panel\r\n                [hideButtons]=\"false\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-dynamic-page-subheader>\r\n        } @if (!tabMode) {\r\n        <fd-dynamic-page-content [class.!tw-px-4]=\"!isMobile\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    sideContentMode ? sideContentTemplate : viewerTemplate;\r\n                    context: { noRenderPageing: true }\r\n                \"\r\n            ></ng-container>\r\n        </fd-dynamic-page-content>\r\n\r\n        } @if (pagingSetting?.TotalPages) {\r\n        <fd-dynamic-page-footer>\r\n            <!-- page footer content goes here -->\r\n            <div fd-bar [barDesign]=\"'footer'\">\r\n                <div fd-bar-middle>\r\n                    <ng-container\r\n                        [renderUlvPaging]=\"context\"\r\n                        [pagingSetting]=\"pagingSetting\"\r\n                        (pageChange)=\"onPageChange($event)\"\r\n                    ></ng-container>\r\n                </div>\r\n            </div>\r\n        </fd-dynamic-page-footer>\r\n        }\r\n    </fd-dynamic-page>\r\n    @if (tabMode) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"sideContentMode ? sideContentTemplate : viewerTemplate; context: { noRenderPageing: true }\"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #reportTemplate>\r\n    @if (loading) {\r\n    <bsu-mask size=\"s\"></bsu-mask>\r\n    } @if (!hideSearchPanel && searchPanelUi && !sideContentMode) {\r\n    <ng-container *ngTemplateOutlet=\"searchpanelTemplate; context: { hideButtons: false }\"></ng-container>\r\n    }\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            sideContentMode ? sideContentTemplate : viewerTemplate;\r\n            context: { simpleReport: 'simpleReport' }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #sideContentTemplate let-simpleReport=\"simpleReport\">\r\n    <fd-dynamic-side-content\r\n        [class.rtl]=\"rtl\"\r\n        [size]=\"deviceSize | sapSize\"\r\n        fillEmptySpace\r\n        [decrement]=\"'2rem'\"\r\n        [disable]=\"isReportPage\"\r\n        [setMinHeight]=\"true\"\r\n        *untilInView=\"el\"\r\n    >\r\n        <fd-dynamic-side-content-side>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"searchpanelTemplate; context: { isSearcPanelInSideContent: true }\"\r\n            ></ng-container>\r\n        </fd-dynamic-side-content-side>\r\n        <fd-dynamic-side-content-main [style.width]=\"deviceSize !== 's' ? mainContentWidth : null\">\r\n            <fd-card>\r\n                <fd-card-content class=\"tw-flex tw-flex-col\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"viewerTemplate; context: { noRenderPageing: isReportPage ? true : false }\"\r\n                    ></ng-container>\r\n                </fd-card-content>\r\n            </fd-card>\r\n        </fd-dynamic-side-content-main>\r\n    </fd-dynamic-side-content>\r\n</ng-template>\r\n<ng-template\r\n    #searchpanelTemplate\r\n    let-isSearcPanelInSideContent=\"isSearcPanelInSideContent\"\r\n    let-hideButtons=\"hideButtons\"\r\n>\r\n    @if (!isSearcPanelInSideContent) { @if (!hideSearchPanel && searchPanelUi) {\r\n    <bsu-search-panel\r\n        darkClass\r\n        [searchPanelUi]=\"searchPanelUi\"\r\n        [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n        [hideButtons]=\"false\"\r\n        (moChanged)=\"onSearchPanelMoChanged()\"\r\n    ></bsu-search-panel>\r\n    } } @else {\r\n    <fd-card class=\"searchpanel-card\" darkClass>\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <h2 fd-card-title>\r\n                    <fd-icon glyph=\"filter\"></fd-icon><span>{{ 'Filter' | bbbTranslate }}</span>\r\n                </h2>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content style=\"flex-grow: 0\">\r\n            @if (!hideSearchPanel && searchPanelUi) {\r\n            <bsu-search-panel\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                [hideButtons]=\"true\"\r\n                [isSearcPanelInSideContent]=\"isSearcPanelInSideContent\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n            }\r\n        </fd-card-content>\r\n        <fd-card-footer style=\"border-bottom: none\">\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"emphasized\"\r\n                [label]=\"'Search' | bbbTranslate\"\r\n                (click)=\"onSearch()\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n            <button\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [label]=\"('Delete' | bbbTranslate) + ' ' + ('Filters' | bbbTranslate)\"\r\n                (click)=\"onClearSearch()\"\r\n                [fdOverflowGroup]=\"1\"\r\n                [fdContentDensity]=\"contentDensity\"\r\n            ></button>\r\n        </fd-card-footer>\r\n    </fd-card>\r\n    }\r\n</ng-template>\r\n<ng-template #viewerTemplate let-noRenderPageing=\"noRenderPageing\">\r\n    <div\r\n        darkClass\r\n        class=\"viewer-container\"\r\n        fillEmptySpace\r\n        [shortcutHandler]=\"shortcuts\"\r\n        [disable]=\"!isReportPage || !fillPage\"\r\n        [decrement]=\"deviceSize !== 's' ? '100px' : '75px'\"\r\n        [style.height]=\"viewerLoading && !hideViewerLoading ? '100%' : 'auto'\"\r\n        [style.min-height]=\"isReportPage ? '100%' : null\"\r\n        [style.position]=\"viewerLoading && !hideViewerLoading ? 'relative' : null\"\r\n    >\r\n        <bnrc-dynamic-ulv-toolbar-component\r\n            #ulvToolbar\r\n            [component]=\"ulvToolbarComponent\"\r\n            [viewSettings]=\"viewSettings\"\r\n            [hideToolbar]=\"hideToolbar\"\r\n            [deviceName]=\"deviceName\"\r\n            [hideTitle]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [toolbarButtons]=\"toolbarButtons | ulvToolbarSettings: toolbarSettings\"\r\n            [toolbarButtonsReportView]=\"toolbarButtonsReportView\"\r\n            [gridSetting]=\"gridSetting\"\r\n            [title]=\"title\"\r\n            [hasSelected]=\"hasSelected\"\r\n            [access]=\"access\"\r\n            [inDialog]=\"inDialog\"\r\n            [isMultiSelect]=\"isMultiSelect\"\r\n            [contentDensity]=\"contentDensity\"\r\n            [inlineEditMode]=\"inlineEditMode && allowInlineEdit && formSetting\"\r\n            [allowInlineEdit]=\"allowInlineEdit && formSetting\"\r\n            [allowGridColumnSort]=\"allowGridColumnSort\"\r\n            [FnHandleEvents]=\"FnHandleUlvToolbarEvents\"\r\n        ></bnrc-dynamic-ulv-toolbar-component>\r\n        @if (viewerLoading) {\r\n        <bsu-mask size=\"m\"></bsu-mask>\r\n        } @if (viewerControl) {\r\n\r\n        <ng-container\r\n            [renderUlvViewer]=\"viewerControl\"\r\n            [layoutInfo]=\"layoutInfo\"\r\n            [isReportPage]=\"isReportPage\"\r\n        ></ng-container>\r\n        }@else{\r\n        <fd-message-page type=\"no-items\" class=\"!tw-bg-transparent\" [class.mobile]=\"isMobile\">\r\n            <fd-message-page-title>\u0627\u0628\u062A\u062F\u0627 \u0641\u06CC\u0644\u062A\u0631 \u0631\u0627 \u062A\u0646\u0638\u06CC\u0645 \u06A9\u0646\u06CC\u062F \u0648 \u062C\u0633\u062A\u062C\u0648 \u0646\u0645\u0627\u06CC\u06CC\u062F.</fd-message-page-title>\r\n        </fd-message-page>\r\n        }\r\n    </div>\r\n    @if (!noRenderPageing && pagingSetting?.TotalPages && !hidePageing && !hidePaging) {\r\n    <bnrc-dynamic-ulv-paging-component\r\n        #ulvPaging\r\n        [component]=\"ulvPaginComponent\"\r\n        [pagingSetting]=\"pagingSetting\"\r\n        [context]=\"context\"\r\n        [FnHandleEvents]=\"FnHandleUlvPagingEvents\"\r\n    ></bnrc-dynamic-ulv-paging-component>\r\n    }\r\n</ng-template>\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #searchpanelDialog>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Filters' | bbbTranslate }}</h1>\r\n            <button fd-dialog-close-button (click)=\"dialog.dismiss('Close button')\"></button>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <bsu-search-panel\r\n                [hideButtons]=\"false\"\r\n                [searchPanelUi]=\"searchPanelUi\"\r\n                (moChanged)=\"onSearchPanelMoChanged()\"\r\n            ></bsu-search-panel>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdkInitialFocus\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"dialog.dismiss(); onSearch()\"\r\n                    [label]=\"'Search' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button fd-button [label]=\"'Clear' | bbbTranslate\" (click)=\"onClearSearch()\"></button>\r\n            </fd-dialog-footer-button>\r\n            <fd-dialog-footer-button>\r\n                <button\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    (click)=\"dialog.dismiss('Close button')\"\r\n                    [label]=\"'Cancel' | bbbTranslate\"\r\n                ></button>\r\n            </fd-dialog-footer-button>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%;flex-grow:1}:host .searchpanel-card fd-card-header{pointer-events:none;cursor:default;padding:.5rem}:host .searchpanel-card h2[fd-card-title]{font-size:1rem;display:flex;align-items:center;gap:.5rem}:host .searchpanel-card h2[fd-card-title] fd-icon{font-size:1.2rem}:host fd-dynamic-side-content{gap:1rem}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content{border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-side{border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content.rtl fd-dynamic-side-content-side{border-right:none;border-left:1px solid #ccc!important}:host[uiviewer=bsu-ui-card-view]>fd-dynamic-side-content fd-dynamic-side-content-main fd-card{transition:.25s background-color!important}:host.custom-background ::ng-deep article.fd-dynamic-page,:host.custom-background ::ng-deep fd-dynamic-page-content,:host.custom-background ::ng-deep .report-view,:host.custom-background ::ng-deep fd-dynamic-side-content-main>fd-card{background-color:transparent!important}:host>fd-dynamic-page>fd-dynamic-page-header.hide-container ::ng-deep .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile).notitle.sideContentMode ::ng-deep>article>header .fd-dynamic-page__title-container,fd-dynamic-page:not(.mobile).notitle.nosearchpanel ::ng-deep>article>header .fd-dynamic-page__title-container{display:none}fd-dynamic-page:not(.mobile) ::ng-deep>article>div{display:flex;flex:1}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page:not(.mobile) ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%}fd-dynamic-page[tabmode=true] ::ng-deep>article{height:auto!important}fd-dynamic-side-content{min-height:100%;height:auto}fd-dynamic-side-content-main fd-card-content ::ng-deep>div{flex:1}fd-dynamic-side-content-main ::ng-deep fd-toolbar{border:none!important}fd-dynamic-side-content-main ::ng-deep bsu-ui-table-view{padding-bottom:0!important;overflow-y:hidden}fd-dynamic-side-content-side fd-card-content{padding:.5rem}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}fd-popover-body{min-width:380px}fd-popover-body.mobile{min-width:80vw}@media (max-width: 599px){.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}fd-message-page.mobile ::ng-deep>div{width:100%}\n"] }]
         }], propDecorators: { _dynamicPageComponent: [{
                 type: ViewChild,
                 args: [DynamicPageComponent]
@@ -8043,7 +8043,7 @@ class UiUlvMainUiComponent extends BaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiUlvMainUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiUlvMainUiComponent, isStandalone: false, selector: "bsu-ui-ulv-main-ui", inputs: { context: "context", isReportPage: "isReportPage", inDialog: "inDialog", isMultiSelect: "isMultiSelect", layoutInfo: "layoutInfo", fullscreen: "fullscreen" }, host: { properties: { "class.control-readonly": "this.readonly", "class.control-disabled": "this.disable", "class.margin-ulv": "this.marginUlv" } }, providers: [UlvMainService], viewQueries: [{ propertyName: "_barsaUlvComponent", first: true, predicate: BarsaUlvMainComponent, descendants: true }, { propertyName: "searchPanelComponent", first: true, predicate: SearchPanelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bsu-barsa-ulv-main\r\n    [shortcutHandler]=\"shortCuts$ | async\"\r\n    [style.style.width]=\"!isMobile ? null : '100%'\"\r\n    [layoutInfo]=\"layoutInfo\"\r\n    [attr.isReportPage]=\"isReportPage\"    \r\n    [viewSettings]=\"(viewSettings$ | async)!!\"\r\n    [viewerControl]=\"viewer$ | async\"\r\n    [loading]=\"(mask$ | async) === true\"\r\n    [viewerLoading]=\"(viwerMask$ | async) === true\"\r\n    [hideViewerLoading]=\"(hideViewerLoading$ | async) === true\"\r\n    [toolbarButtonsReportView]=\"(toolbarButtonsReportView$ | async)!!\"\r\n    [cssBackground]=\"cssBackground$ | async\"\r\n    [standalone]=\"(standalone$ | async) === true\"\r\n    [landscape]=\"(landscape$ | async) === true\"\r\n    [hiddenOverflowContent]=\"(hiddenOverflowContent$ | async) === true\"\r\n    [hideUlvPageTitle]=\"(hideUlvPageTitle$ | async) === true\"\r\n    [isReportPage]=\"isReportPage\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [title]=\"title\"\r\n    [toolbarSettings]=\"(toolbarSettings$ | async)!!\"\r\n    [allowGridColumnSort]=\"(gridAllowSort$ | async) === true\"\r\n    [hidePaging]=\"(hidePaging$ | async) === true\"\r\n    [searchPanelUi]=\"(searchPanelUi$ | async)!!\"\r\n    [breadCrumbs]=\"(breadCrumbs$ | async)!!\"\r\n    [allSearchPanelSettings]=\"(allSearchPanelSettings$ | async)!!\"\r\n    [isAnonymous]=\"(isAnonymous$ | async)!!\"\r\n    [canSaveGridSetting]=\"(canSaveGridSetting$ | async) === true\"\r\n    [rtl]=\"(rtl$ | async)!!\"\r\n    [hasSelected]=\"(hasSelected$ | async) === true\"\r\n    [toolbarButtons]=\"(toolbarButtons$ | async)!! | seperatorFix\"\r\n    [hideToolbar]=\"(hideToolbar$ | async) === true\"\r\n    [gridSetting]=\"(gridSetting$ | async)!!\"\r\n    [access]=\"(commandsAccess$ | async)!!\"\r\n    [inDialog]=\"(inDialog$ | async) === true\"\r\n    [inlineEditMode]=\"(inlineEditMode$ | async) === true\"\r\n    [allowInlineEdit]=\"(allowInlineEdit$ | async) === true\"\r\n    [ulvHeightSizeType]=\"(ulvHeightSizeType$ | async)!!\"\r\n    [ulvHeightSize]=\"(ulvHeightSize$ | async)!!\"\r\n    [viewCollection]=\"(viewCollection$ | async)!!\"\r\n    [isMultiSelect]=\"(isMultiSelect$ | async) === true\"\r\n    [useLayoutItemTextForControl]=\"(useLayoutItemTextForControl$ | async) === true\"\r\n    [formSetting]=\"context.Setting.FormTemplate\"\r\n    [hideTitle]=\"(hideTitle$ | async) === true\"\r\n    [selectedSearchPanelSettings]=\"(selectedSearchPanelSettings$ | async)!!\"\r\n    [searchPanelMoChanged]=\"(searchPanelMoChanged$ | async)!!\"\r\n    [selectedSearchPanelSettingsId]=\"(selectedSearchPanelSettingsId$ | async)!!\"\r\n    [hideSearchPanel]=\"(hideSearchPanel$ | async)!!\"\r\n    [pagingSetting]=\"(pagingSetting$ | async)!!\"\r\n    [context]=\"context\"\r\n    [contentDensity]=\"contentDensity$ | async\"\r\n    (closeEvent)=\"onClose()\"\r\n    (searchPanelMoChange)=\"onSearchPanelMoChanged()\"\r\n    (openManageFilters)=\"onOpenManageFilters()\"\r\n    (collapsedChange)=\"onCollapsedChange($event)\"\r\n    (hideSearchPanelClick)=\"onHideSearchPanelClick()\"\r\n    (filterSave)=\"onFilterSave()\"\r\n    (filterSaveAs)=\"onFilterSaveAs()\"\r\n    (showFilterFieldsSetting)=\"onShowFilterFieldsSetting()\"\r\n    (manageFilters)=\"onManageFilters()\"\r\n    (clearSearch)=\"onClearSearch()\"\r\n    (search)=\"onSearch()\"\r\n    (pageChange)=\"onPageChange($event)\"\r\n    (selectSearchPanelSettings)=\"onSelectSearchPanelSettings($event)\"\r\n    (shortCutCommand)=\"onShortcutCommand($event)\"\r\n    (sortClick)=\"onSortSettings()\"\r\n    (groupbyClick)=\"onGroupbySettings()\"\r\n    (columnClick)=\"onColumnSettings()\"\r\n    (toggleMultiSelect)=\"onToggleMultiSelect()\"\r\n    (editModeClick)=\"onEditMode()\"\r\n    (viewClick)=\"onChangeView($event)\"\r\n    (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\r\n    (contentHeightChange)=\"onContentHeightChange($event)\"\r\n>\r\n</bsu-barsa-ulv-main>\r\n", styles: [":host{width:100%;min-height:100%;height:auto;display:flex;flex-direction:column;cursor:default}.margin-ulv{margin-bottom:.25rem;margin-top:.1875rem}\n"], dependencies: [{ kind: "directive", type: i2.ShortcutHandlerDirective, selector: "[shortcutHandler]", inputs: ["shortcutHandler"], outputs: ["shortCutCommand"] }, { kind: "component", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: ["component", "viewerControl", "hideViewerLoading", "loading", "hidePaging", "viewerLoading", "isReportPage", "cssBackground", "deviceSize", "shortcuts", "title", "searchPanelUi", "breadCrumbs", "allSearchPanelSettings", "isAnonymous", "canSaveGridSetting", "rtl", "hideUlvPageTitle", "selectedSearchPanelSettings", "searchPanelMoChanged", "selectedSearchPanelSettingsId", "hideSearchPanel", "pagingSetting", "contentDensity", "context", "isMobile", "standalone", "landscape", "toolbarSettings", "layoutInfo", "viewSettings", "formSetting", "allowGridColumnSort", "useLayoutItemTextForControl", "hideTitle", "deviceName", "access", "hideToolbar", "toolbarButtons", "toolbarButtonsReportView", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "hiddenOverflowContent", "cls", "hasSelected", "ulvHeightSizeType", "ulvHeightSize"], outputs: ["toggleMultiSelect", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo", "contentHeightChange", "closeEvent", "searchPanelMoChange", "openManageFilters", "collapsedChange", "hideSearchPanelClick", "filterSave", "filterSaveAs", "pageChange", "showFilterFieldsSetting", "manageFilters", "clearSearch", "search", "selectSearchPanelSettings"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiUlvMainUiComponent, isStandalone: false, selector: "bsu-ui-ulv-main-ui", inputs: { context: "context", isReportPage: "isReportPage", inDialog: "inDialog", isMultiSelect: "isMultiSelect", layoutInfo: "layoutInfo", fullscreen: "fullscreen" }, host: { properties: { "class.control-readonly": "this.readonly", "class.control-disabled": "this.disable", "class.margin-ulv": "this.marginUlv" } }, providers: [UlvMainService], viewQueries: [{ propertyName: "_barsaUlvComponent", first: true, predicate: BarsaUlvMainComponent, descendants: true, static: true }, { propertyName: "searchPanelComponent", first: true, predicate: SearchPanelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bsu-barsa-ulv-main\r\n    [shortcutHandler]=\"shortCuts$ | async\"\r\n    [style.style.width]=\"!isMobile ? null : '100%'\"\r\n    [layoutInfo]=\"layoutInfo\"\r\n    [attr.isReportPage]=\"isReportPage\"    \r\n    [viewSettings]=\"(viewSettings$ | async)!!\"\r\n    [viewerControl]=\"viewer$ | async\"\r\n    [loading]=\"(mask$ | async) === true\"\r\n    [viewerLoading]=\"(viwerMask$ | async) === true\"\r\n    [hideViewerLoading]=\"(hideViewerLoading$ | async) === true\"\r\n    [toolbarButtonsReportView]=\"(toolbarButtonsReportView$ | async)!!\"\r\n    [cssBackground]=\"cssBackground$ | async\"\r\n    [standalone]=\"(standalone$ | async) === true\"\r\n    [landscape]=\"(landscape$ | async) === true\"\r\n    [hiddenOverflowContent]=\"(hiddenOverflowContent$ | async) === true\"\r\n    [hideUlvPageTitle]=\"(hideUlvPageTitle$ | async) === true\"\r\n    [isReportPage]=\"isReportPage\"\r\n    [deviceSize]=\"(deviceSize$ | async)!!\"\r\n    [title]=\"title\"\r\n    [toolbarSettings]=\"(toolbarSettings$ | async)!!\"\r\n    [allowGridColumnSort]=\"(gridAllowSort$ | async) === true\"\r\n    [hidePaging]=\"(hidePaging$ | async) === true\"\r\n    [searchPanelUi]=\"(searchPanelUi$ | async)!!\"\r\n    [breadCrumbs]=\"(breadCrumbs$ | async)!!\"\r\n    [allSearchPanelSettings]=\"(allSearchPanelSettings$ | async)!!\"\r\n    [isAnonymous]=\"(isAnonymous$ | async)!!\"\r\n    [canSaveGridSetting]=\"(canSaveGridSetting$ | async) === true\"\r\n    [rtl]=\"(rtl$ | async)!!\"\r\n    [hasSelected]=\"(hasSelected$ | async) === true\"\r\n    [toolbarButtons]=\"(toolbarButtons$ | async)!! | seperatorFix\"\r\n    [hideToolbar]=\"(hideToolbar$ | async) === true\"\r\n    [gridSetting]=\"(gridSetting$ | async)!!\"\r\n    [access]=\"(commandsAccess$ | async)!!\"\r\n    [inDialog]=\"(inDialog$ | async) === true\"\r\n    [inlineEditMode]=\"(inlineEditMode$ | async) === true\"\r\n    [allowInlineEdit]=\"(allowInlineEdit$ | async) === true\"\r\n    [ulvHeightSizeType]=\"(ulvHeightSizeType$ | async)!!\"\r\n    [ulvHeightSize]=\"(ulvHeightSize$ | async)!!\"\r\n    [viewCollection]=\"(viewCollection$ | async)!!\"\r\n    [isMultiSelect]=\"(isMultiSelect$ | async) === true\"\r\n    [useLayoutItemTextForControl]=\"(useLayoutItemTextForControl$ | async) === true\"\r\n    [formSetting]=\"context.Setting.FormTemplate\"\r\n    [hideTitle]=\"(hideTitle$ | async) === true\"\r\n    [selectedSearchPanelSettings]=\"(selectedSearchPanelSettings$ | async)!!\"\r\n    [searchPanelMoChanged]=\"(searchPanelMoChanged$ | async)!!\"\r\n    [selectedSearchPanelSettingsId]=\"(selectedSearchPanelSettingsId$ | async)!!\"\r\n    [hideSearchPanel]=\"(hideSearchPanel$ | async)!!\"\r\n    [pagingSetting]=\"(pagingSetting$ | async)!!\"\r\n    [context]=\"context\"\r\n    [contentDensity]=\"contentDensity$ | async\"\r\n    (closeEvent)=\"onClose()\"\r\n    (searchPanelMoChange)=\"onSearchPanelMoChanged()\"\r\n    (openManageFilters)=\"onOpenManageFilters()\"\r\n    (collapsedChange)=\"onCollapsedChange($event)\"\r\n    (hideSearchPanelClick)=\"onHideSearchPanelClick()\"\r\n    (filterSave)=\"onFilterSave()\"\r\n    (filterSaveAs)=\"onFilterSaveAs()\"\r\n    (showFilterFieldsSetting)=\"onShowFilterFieldsSetting()\"\r\n    (manageFilters)=\"onManageFilters()\"\r\n    (clearSearch)=\"onClearSearch()\"\r\n    (search)=\"onSearch()\"\r\n    (pageChange)=\"onPageChange($event)\"\r\n    (selectSearchPanelSettings)=\"onSelectSearchPanelSettings($event)\"\r\n    (shortCutCommand)=\"onShortcutCommand($event)\"\r\n    (sortClick)=\"onSortSettings()\"\r\n    (groupbyClick)=\"onGroupbySettings()\"\r\n    (columnClick)=\"onColumnSettings()\"\r\n    (toggleMultiSelect)=\"onToggleMultiSelect()\"\r\n    (editModeClick)=\"onEditMode()\"\r\n    (viewClick)=\"onChangeView($event)\"\r\n    (createNewInlineMo)=\"onToolbarCreateNewInlineMo()\"\r\n    (contentHeightChange)=\"onContentHeightChange($event)\"\r\n>\r\n</bsu-barsa-ulv-main>\r\n", styles: [":host{width:100%;min-height:100%;height:auto;display:flex;flex-direction:column;cursor:default}.margin-ulv{margin-bottom:.25rem;margin-top:.1875rem}\n"], dependencies: [{ kind: "directive", type: i2.ShortcutHandlerDirective, selector: "[shortcutHandler]", inputs: ["shortcutHandler"], outputs: ["shortCutCommand"] }, { kind: "component", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: ["component", "viewerControl", "hideViewerLoading", "loading", "hidePaging", "viewerLoading", "isReportPage", "cssBackground", "deviceSize", "shortcuts", "title", "searchPanelUi", "breadCrumbs", "allSearchPanelSettings", "isAnonymous", "canSaveGridSetting", "rtl", "hideUlvPageTitle", "selectedSearchPanelSettings", "searchPanelMoChanged", "selectedSearchPanelSettingsId", "hideSearchPanel", "pagingSetting", "contentDensity", "context", "isMobile", "standalone", "landscape", "toolbarSettings", "layoutInfo", "viewSettings", "formSetting", "allowGridColumnSort", "useLayoutItemTextForControl", "hideTitle", "deviceName", "access", "hideToolbar", "toolbarButtons", "toolbarButtonsReportView", "inlineEditMode", "allowInlineEdit", "gridSetting", "viewCollection", "reportView", "inDialog", "isMultiSelect", "hiddenOverflowContent", "cls", "hasSelected", "ulvHeightSizeType", "ulvHeightSize"], outputs: ["toggleMultiSelect", "groupbyClick", "sortClick", "columnClick", "editModeClick", "viewClick", "createNewInlineMo", "contentHeightChange", "closeEvent", "searchPanelMoChange", "openManageFilters", "collapsedChange", "hideSearchPanelClick", "filterSave", "filterSaveAs", "pageChange", "showFilterFieldsSetting", "manageFilters", "clearSearch", "search", "selectSearchPanelSettings"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SeperatorFixPipe, name: "seperatorFix" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiUlvMainUiComponent, decorators: [{
             type: Component,
@@ -8060,7 +8060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Input
             }], _barsaUlvComponent: [{
                 type: ViewChild,
-                args: [BarsaUlvMainComponent]
+                args: [BarsaUlvMainComponent, { static: true }]
             }], readonly: [{
                 type: HostBinding,
                 args: ['class.control-readonly']
@@ -8386,7 +8386,7 @@ class BarsaTinyemceComponent extends BaseComponent {
         this.tinyMCEConfig.width = '100%';
         this.tinyMCEConfig.selector = '#' + this.tinyHostId;
         this.tinyMCEConfig.placeholder = this.Setting.ControlFieldCaptionTranslated;
-        this.tinyMCEConfig.content_style = `body > p { overflow:auto }`;
+        this.tinyMCEConfig.content_style = `body > p { overflow:unset }`; // اسکرول می افتد در متن پیشرفته که p دارد  , فکر کنم از ورود کپی پیست کردن
         this.tinyMCEConfig.directionality = 'rtl';
         this.tinyMCEConfig.language = 'fa_IR';
         this.tinyMCEConfig.promotion = false;
@@ -9430,11 +9430,11 @@ class LyLayoutContainerComponent extends LayoutPanelBaseComponent {
         this.display = this.visible ? 'flex' : 'none';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyLayoutContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyLayoutContainerComponent, isStandalone: false, 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: "@for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module:item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' :'',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} } }\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-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]=\"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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyLayoutContainerComponent, isStandalone: false, 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: "@for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module:item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' :'',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} } }\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\" let-module=\"module\">\r\n    <bnrc-dynamic-layout\r\n        [config]=\"config\"\r\n        [selector]=\"selector\"\r\n        [name]=\"name\"\r\n        [module]=\"module || 'BarsaSapUi'\"\r\n        [moduleFileName]=\"'BarsaSapUi'\"\r\n        [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n        [flex]=\"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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyLayoutContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-layout-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "@for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module:item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' :'',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} } }\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-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]=\"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], standalone: false, template: "@for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module:item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' :'',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} } }\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\" let-module=\"module\">\r\n    <bnrc-dynamic-layout\r\n        [config]=\"config\"\r\n        [selector]=\"selector\"\r\n        [name]=\"name\"\r\n        [module]=\"module || 'BarsaSapUi'\"\r\n        [moduleFileName]=\"'BarsaSapUi'\"\r\n        [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n        [flex]=\"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"] }]
         }], propDecorators: { renderItems: [{
                 type: Input
             }], isRoot: [{
@@ -9546,11 +9546,11 @@ class LyTabPageComponent extends LayoutPanelBaseComponent {
         this._layoutService.refreshLayout();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyTabPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyTabPageComponent, isStandalone: false, selector: "bsu-ly-tab-page", inputs: { renderItems: "renderItems" }, host: { properties: { "style.flex": "this.flex", "attr.tabtitle": "this.title", "class": "this._classes" } }, providers: [LayoutService, TabpageService], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["placeholder"], descendants: true, read: ViewContainerRef }, { propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n                name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n                selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyTabPageComponent, isStandalone: false, selector: "bsu-ly-tab-page", inputs: { renderItems: "renderItems" }, host: { properties: { "style.flex": "this.flex", "attr.tabtitle": "this.title", "class": "this._classes" } }, providers: [LayoutService, TabpageService], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["placeholder"], descendants: true, read: ViewContainerRef }, { propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n                name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n                selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\" let-module=\"module\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"module || 'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyTabPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-tab-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService, TabpageService], standalone: false, template: "<ng-container *untilInView=\"el\">\r\n    @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n                name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n                selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"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, TabpageService], standalone: false, template: "<ng-container *untilInView=\"el\">\r\n    @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n                name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n                selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\" let-module=\"module\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"module || 'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"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"] }]
         }], propDecorators: { vcr: [{
                 type: ViewChild,
                 args: ['placeholder', { read: ViewContainerRef }]
@@ -9623,11 +9623,11 @@ class FormToolbarComponent extends FormToolbarBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormToolbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FormToolbarComponent, isStandalone: false, selector: "bsu-form-toolbar", outputs: { toolbarClick: "toolbarClick" }, viewQueries: [{ propertyName: "_tlbCmp", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "_divTempWidth", first: true, predicate: ["divTempWidth"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    resizeHandler\r\n    [fnResize]=\"onResize\"\r\n    #divTempWidth\r\n></div>\r\n<fd-toolbar\r\n    #formToolbar\r\n    fdType=\"transparent\"\r\n    [clearBorder]=\"true\"\r\n    [shouldOverflow]=\"true\"\r\n    [forceOverflow]=\"true\"\r\n    [style.width]=\"width\"\r\n    [class.firefox]=\"isFirefox\"\r\n    [style.width]=\"'100%'\">\r\n    @for (btn of buttons; track btn; let i = $index; let last = $last; let first = $first) { @if ((btn === '-' ||\r\n    btn.text === '-') && !last && !first && deviceSize !== 's') {\r\n    <fd-toolbar-separator [attr.i]=\"i\" [attr.last]=\"last\" [attr.first]=\"first\"></fd-toolbar-separator>\r\n    } @if (btn.IAmMenu) { @if (btn.isBuiltin) {\r\n    <fd-split-button\r\n        [dir]=\"dirValue === 'rtl' ? 'rtl' : 'ltr'\"\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\r\n        (click)=\"menu2.open()\"\r\n    >\r\n        <fd-menu #menu2>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu2)\">\r\n                <div fd-menu-interactive>\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [glyph]=\"menuItem.newIcon ? menuItem.newIcon : menuItem.Data?.JsonExtraProp?.Icon\"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    @if (!menuItem.newIcon && menuItem.icon) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" />\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    } @if (!btn.isBuiltin) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [attr.text]=\"btn.text\"\r\n        [attr.itemId]=\"btn.itemId\"\r\n        [attr.name]=\"btn.name\"\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [glyph]=\"btn.FontIcon\"\r\n        [style.color]=\"btn.IconColor\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n    >\r\n        @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" />\r\n        }\r\n        <fd-menu #menu>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu)\">\r\n                <div fd-menu-interactive>\r\n                    @if ( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon || menuItem.FontIcon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon ) {\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [ngClass]=\"\r\n                            menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                ? 'fd-button--' + menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                : ''\r\n                        \"\r\n                        [style.color]=\"menuItem.IconColor\"\r\n                        [attr.name]=\"menuItem.name\"\r\n                        [attr.itemId]=\"menuItem.itemId\"\r\n                        [attr.text]=\"menuItem.text\"\r\n                        [glyph]=\"\r\n                            menuItem.newIcon ||\r\n                            menuItem.Data?.JsonExtraProp?.Icon ||\r\n                            menuItem.FontIcon ||\r\n                            menuItem.Data?.CustomUi?.Parameters?.Icon\r\n                        \"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    } @if ( !( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon || menuItem.FontIcon ) && menuItem.icon ) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" />\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } } @else { @if (!(btn === '-' || btn.text === '-')) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate; context: { $implicit: btn }\"\r\n    ></ng-container>\r\n    <ng-template #btnTemplate let-btn>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [disabled]=\"btn.disabled\"\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [fdOverflowPriority]=\"btn.overflowPriority\"\r\n            [fdOverflowGroup]=\"btn.overflowGroup\"\r\n            [fdType]=\"btn.isWorkflow ? 'positive' : btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\r\n            (click)=\"onToolbarClick(btn)\"\r\n        >\r\n            @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n            <img width=\"16\" [src]=\"btn.icon\" />\r\n            } @if (btn.text) {\r\n            <span>{{ btn.text }}</span>\r\n            }\r\n        </button>\r\n    </ng-template>\r\n    <ng-template #dynamicBtnTemplate let-btn>\r\n        <bnrc-dynamic-form-toolbaritem\r\n            fd-toolbar-item\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [component]=\"btn.Data.CustomUi\"\r\n            [context]=\"btn\"\r\n            [isEnable]=\"btn.Command?._isEnable\"\r\n            (btnClick)=\"onToolbarClick(btn)\"\r\n        ></bnrc-dynamic-form-toolbaritem>\r\n    </ng-template>\r\n    } } }\r\n</fd-toolbar>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column}:host fd-toolbar ::ng-deep .fd-toolbar__spacer{max-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.ResizeHandlerDirective, selector: "[resizeHandler]", inputs: ["fnResize"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i7$2.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: i2$7.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FormToolbarComponent, isStandalone: false, selector: "bsu-form-toolbar", outputs: { toolbarClick: "toolbarClick" }, viewQueries: [{ propertyName: "_tlbCmp", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "_divTempWidth", first: true, predicate: ["divTempWidth"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    resizeHandler\r\n    [fnResize]=\"onResize\"\r\n    #divTempWidth\r\n></div>\r\n<fd-toolbar\r\n    #formToolbar\r\n    fdType=\"transparent\"\r\n    [clearBorder]=\"true\"\r\n    [shouldOverflow]=\"true\"\r\n    [forceOverflow]=\"true\"\r\n    [style.width]=\"width\"\r\n    [class.firefox]=\"isFirefox\"\r\n    [style.width]=\"'100%'\">\r\n    @for (btn of buttons; track btn; let i = $index; let last = $last; let first = $first) { @if ((btn === '-' ||\r\n    btn.text === '-') && !last && !first && deviceSize !== 's') {\r\n    <fd-toolbar-separator [attr.i]=\"i\" [attr.last]=\"last\" [attr.first]=\"first\"></fd-toolbar-separator>\r\n    } @if (btn.IAmMenu) { @if (btn.isBuiltin) {\r\n    <fd-split-button\r\n        [dir]=\"dirValue === 'rtl' ? 'rtl' : 'ltr'\"\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\r\n        (click)=\"menu2.open()\"\r\n    >\r\n        <fd-menu #menu2>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu2)\">\r\n                <div fd-menu-interactive>\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [glyph]=\"menuItem.newIcon ? menuItem.newIcon : menuItem.Data?.JsonExtraProp?.Icon\"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    @if (!menuItem.newIcon && menuItem.icon) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" loading=\"lazy\"/>\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    } @if (!btn.isBuiltin) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [attr.text]=\"btn.text\"\r\n        [attr.itemId]=\"btn.itemId\"\r\n        [attr.name]=\"btn.name\"\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [glyph]=\"btn.FontIcon\"\r\n        [style.color]=\"btn.IconColor\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n    >\r\n        @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\"/>\r\n        }\r\n        <fd-menu #menu>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu)\">\r\n                <div fd-menu-interactive>\r\n                    @if ( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon || menuItem.FontIcon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon ) {\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [ngClass]=\"\r\n                            menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                ? 'fd-button--' + menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                : ''\r\n                        \"\r\n                        [style.color]=\"menuItem.IconColor\"\r\n                        [attr.name]=\"menuItem.name\"\r\n                        [attr.itemId]=\"menuItem.itemId\"\r\n                        [attr.text]=\"menuItem.text\"\r\n                        [glyph]=\"\r\n                            menuItem.newIcon ||\r\n                            menuItem.Data?.JsonExtraProp?.Icon ||\r\n                            menuItem.FontIcon ||\r\n                            menuItem.Data?.CustomUi?.Parameters?.Icon\r\n                        \"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    } @if ( !( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon || menuItem.FontIcon ) && menuItem.icon ) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" loading=\"lazy\"/>\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } } @else { @if (!(btn === '-' || btn.text === '-')) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate; context: { $implicit: btn }\"\r\n    ></ng-container>\r\n    <ng-template #btnTemplate let-btn>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [disabled]=\"btn.disabled\"\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [fdOverflowPriority]=\"btn.overflowPriority\"\r\n            [fdOverflowGroup]=\"btn.overflowGroup\"\r\n            [fdType]=\"btn.isWorkflow ? 'positive' : btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\r\n            (click)=\"onToolbarClick(btn)\"\r\n        >\r\n            @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n            <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\"/>\r\n            } @if (btn.text) {\r\n            <span>{{ btn.text }}</span>\r\n            }\r\n        </button>\r\n    </ng-template>\r\n    <ng-template #dynamicBtnTemplate let-btn>\r\n        <bnrc-dynamic-form-toolbaritem\r\n            fd-toolbar-item\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [component]=\"btn.Data.CustomUi\"\r\n            [context]=\"btn\"\r\n            [isEnable]=\"btn.Command?._isEnable\"\r\n            (btnClick)=\"onToolbarClick(btn)\"\r\n        ></bnrc-dynamic-form-toolbaritem>\r\n    </ng-template>\r\n    } } }\r\n</fd-toolbar>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column}:host fd-toolbar ::ng-deep .fd-toolbar__spacer{max-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.ResizeHandlerDirective, selector: "[resizeHandler]", inputs: ["fnResize"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i7$2.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: i2$7.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-form-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "\r\n<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    resizeHandler\r\n    [fnResize]=\"onResize\"\r\n    #divTempWidth\r\n></div>\r\n<fd-toolbar\r\n    #formToolbar\r\n    fdType=\"transparent\"\r\n    [clearBorder]=\"true\"\r\n    [shouldOverflow]=\"true\"\r\n    [forceOverflow]=\"true\"\r\n    [style.width]=\"width\"\r\n    [class.firefox]=\"isFirefox\"\r\n    [style.width]=\"'100%'\">\r\n    @for (btn of buttons; track btn; let i = $index; let last = $last; let first = $first) { @if ((btn === '-' ||\r\n    btn.text === '-') && !last && !first && deviceSize !== 's') {\r\n    <fd-toolbar-separator [attr.i]=\"i\" [attr.last]=\"last\" [attr.first]=\"first\"></fd-toolbar-separator>\r\n    } @if (btn.IAmMenu) { @if (btn.isBuiltin) {\r\n    <fd-split-button\r\n        [dir]=\"dirValue === 'rtl' ? 'rtl' : 'ltr'\"\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\r\n        (click)=\"menu2.open()\"\r\n    >\r\n        <fd-menu #menu2>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu2)\">\r\n                <div fd-menu-interactive>\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [glyph]=\"menuItem.newIcon ? menuItem.newIcon : menuItem.Data?.JsonExtraProp?.Icon\"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    @if (!menuItem.newIcon && menuItem.icon) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" />\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    } @if (!btn.isBuiltin) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [attr.text]=\"btn.text\"\r\n        [attr.itemId]=\"btn.itemId\"\r\n        [attr.name]=\"btn.name\"\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [glyph]=\"btn.FontIcon\"\r\n        [style.color]=\"btn.IconColor\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n    >\r\n        @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" />\r\n        }\r\n        <fd-menu #menu>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu)\">\r\n                <div fd-menu-interactive>\r\n                    @if ( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon || menuItem.FontIcon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon ) {\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [ngClass]=\"\r\n                            menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                ? 'fd-button--' + menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                : ''\r\n                        \"\r\n                        [style.color]=\"menuItem.IconColor\"\r\n                        [attr.name]=\"menuItem.name\"\r\n                        [attr.itemId]=\"menuItem.itemId\"\r\n                        [attr.text]=\"menuItem.text\"\r\n                        [glyph]=\"\r\n                            menuItem.newIcon ||\r\n                            menuItem.Data?.JsonExtraProp?.Icon ||\r\n                            menuItem.FontIcon ||\r\n                            menuItem.Data?.CustomUi?.Parameters?.Icon\r\n                        \"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    } @if ( !( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon || menuItem.FontIcon ) && menuItem.icon ) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" />\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } } @else { @if (!(btn === '-' || btn.text === '-')) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate; context: { $implicit: btn }\"\r\n    ></ng-container>\r\n    <ng-template #btnTemplate let-btn>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [disabled]=\"btn.disabled\"\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [fdOverflowPriority]=\"btn.overflowPriority\"\r\n            [fdOverflowGroup]=\"btn.overflowGroup\"\r\n            [fdType]=\"btn.isWorkflow ? 'positive' : btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\r\n            (click)=\"onToolbarClick(btn)\"\r\n        >\r\n            @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n            <img width=\"16\" [src]=\"btn.icon\" />\r\n            } @if (btn.text) {\r\n            <span>{{ btn.text }}</span>\r\n            }\r\n        </button>\r\n    </ng-template>\r\n    <ng-template #dynamicBtnTemplate let-btn>\r\n        <bnrc-dynamic-form-toolbaritem\r\n            fd-toolbar-item\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [component]=\"btn.Data.CustomUi\"\r\n            [context]=\"btn\"\r\n            [isEnable]=\"btn.Command?._isEnable\"\r\n            (btnClick)=\"onToolbarClick(btn)\"\r\n        ></bnrc-dynamic-form-toolbaritem>\r\n    </ng-template>\r\n    } } }\r\n</fd-toolbar>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column}:host fd-toolbar ::ng-deep .fd-toolbar__spacer{max-width:0}\n"] }]
+            args: [{ selector: 'bsu-form-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "\r\n<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    resizeHandler\r\n    [fnResize]=\"onResize\"\r\n    #divTempWidth\r\n></div>\r\n<fd-toolbar\r\n    #formToolbar\r\n    fdType=\"transparent\"\r\n    [clearBorder]=\"true\"\r\n    [shouldOverflow]=\"true\"\r\n    [forceOverflow]=\"true\"\r\n    [style.width]=\"width\"\r\n    [class.firefox]=\"isFirefox\"\r\n    [style.width]=\"'100%'\">\r\n    @for (btn of buttons; track btn; let i = $index; let last = $last; let first = $first) { @if ((btn === '-' ||\r\n    btn.text === '-') && !last && !first && deviceSize !== 's') {\r\n    <fd-toolbar-separator [attr.i]=\"i\" [attr.last]=\"last\" [attr.first]=\"first\"></fd-toolbar-separator>\r\n    } @if (btn.IAmMenu) { @if (btn.isBuiltin) {\r\n    <fd-split-button\r\n        [dir]=\"dirValue === 'rtl' ? 'rtl' : 'ltr'\"\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\r\n        (click)=\"menu2.open()\"\r\n    >\r\n        <fd-menu #menu2>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu2)\">\r\n                <div fd-menu-interactive>\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [glyph]=\"menuItem.newIcon ? menuItem.newIcon : menuItem.Data?.JsonExtraProp?.Icon\"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    @if (!menuItem.newIcon && menuItem.icon) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" loading=\"lazy\"/>\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    } @if (!btn.isBuiltin) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [attr.text]=\"btn.text\"\r\n        [attr.itemId]=\"btn.itemId\"\r\n        [attr.name]=\"btn.name\"\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [glyph]=\"btn.FontIcon\"\r\n        [style.color]=\"btn.IconColor\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n    >\r\n        @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\"/>\r\n        }\r\n        <fd-menu #menu>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu)\">\r\n                <div fd-menu-interactive>\r\n                    @if ( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon || menuItem.FontIcon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon ) {\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [ngClass]=\"\r\n                            menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                ? 'fd-button--' + menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                : ''\r\n                        \"\r\n                        [style.color]=\"menuItem.IconColor\"\r\n                        [attr.name]=\"menuItem.name\"\r\n                        [attr.itemId]=\"menuItem.itemId\"\r\n                        [attr.text]=\"menuItem.text\"\r\n                        [glyph]=\"\r\n                            menuItem.newIcon ||\r\n                            menuItem.Data?.JsonExtraProp?.Icon ||\r\n                            menuItem.FontIcon ||\r\n                            menuItem.Data?.CustomUi?.Parameters?.Icon\r\n                        \"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    } @if ( !( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon || menuItem.FontIcon ) && menuItem.icon ) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" loading=\"lazy\"/>\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } } @else { @if (!(btn === '-' || btn.text === '-')) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate; context: { $implicit: btn }\"\r\n    ></ng-container>\r\n    <ng-template #btnTemplate let-btn>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [disabled]=\"btn.disabled\"\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [fdOverflowPriority]=\"btn.overflowPriority\"\r\n            [fdOverflowGroup]=\"btn.overflowGroup\"\r\n            [fdType]=\"btn.isWorkflow ? 'positive' : btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\r\n            (click)=\"onToolbarClick(btn)\"\r\n        >\r\n            @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n            <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\"/>\r\n            } @if (btn.text) {\r\n            <span>{{ btn.text }}</span>\r\n            }\r\n        </button>\r\n    </ng-template>\r\n    <ng-template #dynamicBtnTemplate let-btn>\r\n        <bnrc-dynamic-form-toolbaritem\r\n            fd-toolbar-item\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [component]=\"btn.Data.CustomUi\"\r\n            [context]=\"btn\"\r\n            [isEnable]=\"btn.Command?._isEnable\"\r\n            (btnClick)=\"onToolbarClick(btn)\"\r\n        ></bnrc-dynamic-form-toolbaritem>\r\n    </ng-template>\r\n    } } }\r\n</fd-toolbar>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column}:host fd-toolbar ::ng-deep .fd-toolbar__spacer{max-width:0}\n"] }]
         }], propDecorators: { toolbarClick: [{
                 type: Output
             }], _tlbCmp: [{
@@ -9976,12 +9976,17 @@ class UiLinearListContainerWithButtonComponent extends DeviceInfoFieldBaseCompon
         // this._setIdsOMoByValue();
         // const oldHanlde = this.multiInputComponent._addOnButtonClicked;
         const m = this.multiInputComponent;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const me = this;
         m._addOnButtonClicked = () => {
             this._handleAddonButtonClicked();
         };
         // m.filterFn = (dropdownValues, searchTerm) => dropdownValues;
         m._onCheckboxClick = function (option, event, index, isListItem = false) {
             const toggledSelection = !m._selectionModel.isSelected(option.id);
+            if (event.key === 'Enter') {
+                me._changeDropDownOpenState(false, true);
+            }
             m._rangeSelector.onRangeElementToggled(index, event);
             const sub = m._viewModel$.pipe(first()).subscribe((vm) => {
                 m._rangeSelector.applyValueToEachInRange((idx) => m._handleSelect(toggledSelection, vm.displayedOptions[idx], false));
@@ -10084,10 +10089,11 @@ class UiLinearListContainerWithButtonComponent extends DeviceInfoFieldBaseCompon
     _setIdsOMoByValue() {
         this.idsOfMo = this.originalMoList.map((c) => c.Id);
     }
-    _changeDropDownOpenState(val) {
+    _changeDropDownOpenState(val, focusToInput = false) {
         if (this.multiInputComponent && this.multiInputComponent.open !== val) {
             this.multiInputComponent.open = val;
         }
+        focusToInput && this.multiInputComponent?.searchInputElement.nativeElement.focus();
     }
     _openUlv() {
         if (this.report && !this.term && this._triggerClicked) {
@@ -10228,7 +10234,7 @@ class UiLinearListContainerWithButtonComponent extends DeviceInfoFieldBaseCompon
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiLinearListContainerWithButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiLinearListContainerWithButtonComponent, isStandalone: false, selector: "bsu-ui-linear-list-container-with-button", inputs: { UlvUi: "UlvUi", GetTextItemValue: "GetTextItemValue", show: "show", hide: "hide", hidden: "hidden", GetSelectionData: "GetSelectionData" }, host: { listeners: { "keydown.enter": "onKeyEnter($event)", "keydown.arrowdown": "onKeyDown($event)", "keydown.esc": "onKeyEsc($event)" } }, viewQueries: [{ propertyName: "multiInputComponent", first: true, predicate: MultiInputComponent, descendants: true, static: true }, { propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<fd-multi-input\r\n    [inputId]=\"id\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.1\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n    [class.control-readonly]=\"(readonly$ | async) === true\"\r\n    [dropdownValues]=\"(dropDownValues$ | async)!!\"\r\n    [placeholder]=\"Setting.ControlFieldCaptionTranslated | bbbTranslate\"\r\n    [displayFn]=\"displayFunc\"\r\n    [showAllButton]=\"false\"\r\n    [displayAddonButton]=\"(disableOrReadonly$ | async) !== true\"\r\n    [allowNewTokens]=\"false\"\r\n    [includes]=\"true\"\r\n    [(ngModel)]=\"idsOfMo\"\r\n    [disabled]=\"(disable$ | async) === true\"\r\n    [valueFn]=\"valueFn\"\r\n    (searchTermChange)=\"onSearchTermChange($event)\"\r\n    (selectedChange)=\"onSelectedChange($event)\"\r\n    (addOnButtonClicked)=\"_handleAddonButtonClicked()\"\r\n></fd-multi-input>\r\n\r\n<!-- <button\r\n*ngIf=\"report\"\r\nfd-button\r\n[attr.rtl]=\"rtl\"\r\n[aria-label]=\"'Advanced' | bbbTranslate\"\r\nglyph=\"value-help\"\r\n[disabled]=\"(disableOrReadonly$ | async)!!\"\r\n(click)=\"onOpenReport()\"\r\n></button> -->\r\n\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\r\n        <fd-dialog-header>\r\n            <ng-template fdkTemplate=\"header\">\r\n                <div fd-bar-left>\r\n                    <fd-bar-element>\r\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\r\n                    </fd-bar-element>\r\n                </div>\r\n                <div fd-bar-right>\r\n                    @if (dialogConfig.height !== '100vh') {\r\n                    <fd-button-bar\r\n                        ariaLabel=\"fullscreen\"                        \r\n                        fullscreenDialog\r\n                        [glyph]=\"(dialog.fullScreen | async) === true ? 'exitfullscreen' : 'resize'\"\r\n                        (click)=\"dialog.toggleFullScreen()\"\r\n                    ></fd-button-bar>\r\n                    }\r\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onDismiss()\"></fd-button-bar>\r\n                </div>\r\n            </ng-template>\r\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\r\n      <button fd-dialog-close-button></button> -->\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            @if (dialog.data.ulvUi; as ulvUi) {\r\n            <bsu-ui-ulv-main-ui [context]=\"ulvUi\" class=\"linear-list-selection\"></bsu-ui-ulv-main-ui>\r\n\r\n            }\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer class=\"ulvSelection\">\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div\r\n                    class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\r\n                    [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\r\n                >\r\n                    <h5 fd-title class=\"selected-and-condition-title\">\r\n                        <ng-container>\r\n                            <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\r\n                            ({{ dialog.data.selectedItems?.length || 0 }})\r\n                        </ng-container>\r\n                    </h5>\r\n                    <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\r\n                        <div class=\"ulv-selection-form-dialog__tokens\">\r\n                            @if (dialog.data.selectedItems) {\r\n                            <fd-toolbar [shouldOverflow]=\"true\" style=\"overflow-y:auto\">\r\n                                <!-- Selected items -->\r\n                                @for ( item of dialog.data.selectedItems; track _trackBySelectedFn(selectedIndex, item);\r\n                                let selectedIndex = $index) {\r\n                                <fd-token\r\n                                    fd-toolbar-item\r\n                                    fdOverflowPriority=\"high\"\r\n                                    class=\"fdp-value-help-dialog__selection-token\"\r\n                                    (onCloseClick)=\"onRemoveSelected(item)\"\r\n                                    >{{ item.Text }}\r\n                                </fd-token>\r\n                                }\r\n                            </fd-toolbar>\r\n                            }\r\n                        </div>\r\n                        <button\r\n                            class=\"ulv-selection-form-dialog__tokens-clear\"\r\n                            fd-button\r\n                            fdType=\"transparent\"\r\n                            glyph=\"decline\"\r\n                            [aria-label]=\"'Clear' | bbbTranslate\"\r\n                            (click)=\"onClear()\"\r\n                        ></button>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n        <fd-dialog-footer>\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div class=\"fd-bar__right\">\r\n                    <button\r\n                        fd-button\r\n                        data-succes\r\n                        [label]=\"'OK' | bbbTranslate\"\r\n                        fdType=\"emphasized\"\r\n                        (click)=\"onOk()\"\r\n                    ></button>\r\n                    <button\r\n                        fd-button\r\n                        data-dismiss-dialog\r\n                        fd-dialog-decisive-button\r\n                        [label]=\"'Cancel' | bbbTranslate\"\r\n                        fdType=\"transparent\"\r\n                        (click)=\"onDismiss()\"\r\n                    ></button>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:flex;align-items:center}:host ::ng-deep fd-multi-input .fd-input-group{cursor:default}fd-multi-input{flex-grow:1}button[rtl=true]{margin-right:5px}button[rtl=false]{margin-left:5px}::ng-deep .fd-toolbar{display:flex;flex-wrap:wrap;row-gap:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8$4.MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "glyphFont", "dropdownValues", "openDropdownOnAddOnClicked", "addonIconTitle", "searchTerm", "inputId", "highlight", "selected", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "optionItemIdentifier", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "byline", "autoComplete", "open", "displayAddonButton", "addOnButtonAriaLabel"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i13.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: UiUlvMainUiComponent, selector: "bsu-ui-ulv-main-ui", inputs: ["context", "isReportPage", "inDialog", "isMultiSelect", "layoutInfo", "fullscreen"] }, { kind: "directive", type: FullscreenDialogDirective, selector: "[fullscreenDialog]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiLinearListContainerWithButtonComponent, isStandalone: false, selector: "bsu-ui-linear-list-container-with-button", inputs: { UlvUi: "UlvUi", GetTextItemValue: "GetTextItemValue", show: "show", hide: "hide", hidden: "hidden", GetSelectionData: "GetSelectionData" }, host: { listeners: { "keydown.enter": "onKeyEnter()", "keydown.arrowdown": "onKeyDown()", "keydown.esc": "onKeyEsc()" } }, viewQueries: [{ propertyName: "multiInputComponent", first: true, predicate: MultiInputComponent, descendants: true, static: true }, { propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<fd-multi-input\r\n    [inputId]=\"id\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.1\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n    [class.control-readonly]=\"(readonly$ | async) === true\"\r\n    [dropdownValues]=\"(dropDownValues$ | async)!!\"\r\n    [placeholder]=\"Setting.ControlFieldCaptionTranslated | bbbTranslate\"\r\n    [displayFn]=\"displayFunc\"\r\n    [showAllButton]=\"false\"\r\n    [displayAddonButton]=\"(disableOrReadonly$ | async) !== true\"\r\n    [allowNewTokens]=\"false\"\r\n    [includes]=\"true\"\r\n    [(ngModel)]=\"idsOfMo\"\r\n    [disabled]=\"(disable$ | async) === true\"\r\n    [valueFn]=\"valueFn\"\r\n    (searchTermChange)=\"onSearchTermChange($event)\"\r\n    (selectedChange)=\"onSelectedChange($event)\"\r\n    (addOnButtonClicked)=\"_handleAddonButtonClicked()\"\r\n></fd-multi-input>\r\n\r\n<!-- <button\r\n*ngIf=\"report\"\r\nfd-button\r\n[attr.rtl]=\"rtl\"\r\n[aria-label]=\"'Advanced' | bbbTranslate\"\r\nglyph=\"value-help\"\r\n[disabled]=\"(disableOrReadonly$ | async)!!\"\r\n(click)=\"onOpenReport()\"\r\n></button> -->\r\n\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\r\n        <fd-dialog-header>\r\n            <ng-template fdkTemplate=\"header\">\r\n                <div fd-bar-left>\r\n                    <fd-bar-element>\r\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\r\n                    </fd-bar-element>\r\n                </div>\r\n                <div fd-bar-right>\r\n                    @if (dialogConfig.height !== '100vh') {\r\n                    <fd-button-bar\r\n                        ariaLabel=\"fullscreen\"                        \r\n                        fullscreenDialog\r\n                        [glyph]=\"(dialog.fullScreen | async) === true ? 'exitfullscreen' : 'resize'\"\r\n                        (click)=\"dialog.toggleFullScreen()\"\r\n                    ></fd-button-bar>\r\n                    }\r\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onDismiss()\"></fd-button-bar>\r\n                </div>\r\n            </ng-template>\r\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\r\n      <button fd-dialog-close-button></button> -->\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            @if (dialog.data.ulvUi; as ulvUi) {\r\n            <bsu-ui-ulv-main-ui [context]=\"ulvUi\" class=\"linear-list-selection\"></bsu-ui-ulv-main-ui>\r\n\r\n            }\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer class=\"ulvSelection\">\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div\r\n                    class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\r\n                    [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\r\n                >\r\n                    <h5 fd-title class=\"selected-and-condition-title\">\r\n                        <ng-container>\r\n                            <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\r\n                            ({{ dialog.data.selectedItems?.length || 0 }})\r\n                        </ng-container>\r\n                    </h5>\r\n                    <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\r\n                        <div class=\"ulv-selection-form-dialog__tokens\">\r\n                            @if (dialog.data.selectedItems) {\r\n                            <fd-toolbar [shouldOverflow]=\"true\" style=\"overflow-y:auto\">\r\n                                <!-- Selected items -->\r\n                                @for ( item of dialog.data.selectedItems; track _trackBySelectedFn(selectedIndex, item);\r\n                                let selectedIndex = $index) {\r\n                                <fd-token\r\n                                    fd-toolbar-item\r\n                                    fdOverflowPriority=\"high\"\r\n                                    class=\"fdp-value-help-dialog__selection-token\"\r\n                                    (onCloseClick)=\"onRemoveSelected(item)\"\r\n                                    >{{ item.Text }}\r\n                                </fd-token>\r\n                                }\r\n                            </fd-toolbar>\r\n                            }\r\n                        </div>\r\n                        <button\r\n                            class=\"ulv-selection-form-dialog__tokens-clear\"\r\n                            fd-button\r\n                            fdType=\"transparent\"\r\n                            glyph=\"decline\"\r\n                            [aria-label]=\"'Clear' | bbbTranslate\"\r\n                            (click)=\"onClear()\"\r\n                        ></button>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n        <fd-dialog-footer>\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div class=\"fd-bar__right\">\r\n                    <button\r\n                        fd-button\r\n                        data-succes\r\n                        [label]=\"'OK' | bbbTranslate\"\r\n                        fdType=\"emphasized\"\r\n                        (click)=\"onOk()\"\r\n                    ></button>\r\n                    <button\r\n                        fd-button\r\n                        data-dismiss-dialog\r\n                        fd-dialog-decisive-button\r\n                        [label]=\"'Cancel' | bbbTranslate\"\r\n                        fdType=\"transparent\"\r\n                        (click)=\"onDismiss()\"\r\n                    ></button>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:flex;align-items:center}:host ::ng-deep fd-multi-input .fd-input-group{cursor:default}fd-multi-input{flex-grow:1}button[rtl=true]{margin-right:5px}button[rtl=false]{margin-left:5px}::ng-deep .fd-toolbar{display:flex;flex-wrap:wrap;row-gap:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8$4.MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "glyphFont", "dropdownValues", "openDropdownOnAddOnClicked", "addonIconTitle", "searchTerm", "inputId", "highlight", "selected", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "optionItemIdentifier", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "byline", "autoComplete", "open", "displayAddonButton", "addOnButtonAriaLabel"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i13.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: UiUlvMainUiComponent, selector: "bsu-ui-ulv-main-ui", inputs: ["context", "isReportPage", "inDialog", "isMultiSelect", "layoutInfo", "fullscreen"] }, { kind: "directive", type: FullscreenDialogDirective, selector: "[fullscreenDialog]" }, { 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: "20.0.6", ngImport: i0, type: UiLinearListContainerWithButtonComponent, decorators: [{
             type: Component,
@@ -10243,13 +10249,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Input
             }], onKeyEnter: [{
                 type: HostListener,
-                args: ['keydown.enter', ['$event']]
+                args: ['keydown.enter']
             }], onKeyDown: [{
                 type: HostListener,
-                args: ['keydown.arrowdown', ['$event']]
+                args: ['keydown.arrowdown']
             }], onKeyEsc: [{
                 type: HostListener,
-                args: ['keydown.esc', ['$event']]
+                args: ['keydown.esc']
             }], GetTextItemValue: [{
                 type: Input
             }], show: [{
@@ -10457,11 +10463,11 @@ class CaptchaFieldComponent extends FieldBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CaptchaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: CaptchaFieldComponent, isStandalone: false, selector: "bsu-captcha-field", usesInheritance: true, ngImport: i0, template: "<input\r\n    fd-form-control\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\r\n    type=\"text\"\r\n    [value]=\"!value ? '' : value\"\r\n    [id]=\"id\"\r\n    (input)=\"onValueChange($event)\"\r\n/>\r\n<div id=\"captchaCommand\">\r\n    <img [src]=\"'/api/auth/captcha?capId=' + capId() + '&t=' + now\"  (load)=\"onLoadCaptchaImage()\"/>\r\n    <button\r\n        fd-button\r\n        [fdType]=\"'transparent'\"\r\n        [glyph]=\"'refresh'\"\r\n        aria-label=\"refresh\"\r\n        title=\"captcha\"\r\n        (click)=\"onRefresh()\"\r\n    ></button>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;gap:.2rem}#captchaCommand{flex-grow:1;display:flex;width:100%;align-items:center;justify-content:start}img{flex-grow:1;max-width:170px;height:40px;width:auto}input{font-size:1rem}@media (max-width: 599px){img{max-width:140px}}\n"], dependencies: [{ kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: CaptchaFieldComponent, isStandalone: false, selector: "bsu-captcha-field", usesInheritance: true, ngImport: i0, template: "<input\r\n    fd-form-control\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\r\n    type=\"text\"\r\n    [value]=\"!value ? '' : value\"\r\n    [id]=\"id\"\r\n    (input)=\"onValueChange($event)\"\r\n/>\r\n<div id=\"captchaCommand\">\r\n    <img [src]=\"'/api/auth/captcha?capId=' + capId() + '&t=' + now\"  (load)=\"onLoadCaptchaImage()\" loading=\"lazy\"/>\r\n    <button\r\n        fd-button\r\n        [fdType]=\"'transparent'\"\r\n        [glyph]=\"'refresh'\"\r\n        aria-label=\"refresh\"\r\n        title=\"captcha\"\r\n        (click)=\"onRefresh()\"\r\n    ></button>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;gap:.2rem}#captchaCommand{flex-grow:1;display:flex;width:100%;align-items:center;justify-content:start}img{flex-grow:1;max-width:170px;height:40px;width:auto}input{font-size:1rem}@media (max-width: 599px){img{max-width:140px}}\n"], dependencies: [{ kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CaptchaFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-captcha-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<input\r\n    fd-form-control\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\r\n    type=\"text\"\r\n    [value]=\"!value ? '' : value\"\r\n    [id]=\"id\"\r\n    (input)=\"onValueChange($event)\"\r\n/>\r\n<div id=\"captchaCommand\">\r\n    <img [src]=\"'/api/auth/captcha?capId=' + capId() + '&t=' + now\"  (load)=\"onLoadCaptchaImage()\"/>\r\n    <button\r\n        fd-button\r\n        [fdType]=\"'transparent'\"\r\n        [glyph]=\"'refresh'\"\r\n        aria-label=\"refresh\"\r\n        title=\"captcha\"\r\n        (click)=\"onRefresh()\"\r\n    ></button>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;gap:.2rem}#captchaCommand{flex-grow:1;display:flex;width:100%;align-items:center;justify-content:start}img{flex-grow:1;max-width:170px;height:40px;width:auto}input{font-size:1rem}@media (max-width: 599px){img{max-width:140px}}\n"] }]
+            args: [{ selector: 'bsu-captcha-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<input\r\n    fd-form-control\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\r\n    type=\"text\"\r\n    [value]=\"!value ? '' : value\"\r\n    [id]=\"id\"\r\n    (input)=\"onValueChange($event)\"\r\n/>\r\n<div id=\"captchaCommand\">\r\n    <img [src]=\"'/api/auth/captcha?capId=' + capId() + '&t=' + now\"  (load)=\"onLoadCaptchaImage()\" loading=\"lazy\"/>\r\n    <button\r\n        fd-button\r\n        [fdType]=\"'transparent'\"\r\n        [glyph]=\"'refresh'\"\r\n        aria-label=\"refresh\"\r\n        title=\"captcha\"\r\n        (click)=\"onRefresh()\"\r\n    ></button>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;gap:.2rem}#captchaCommand{flex-grow:1;display:flex;width:100%;align-items:center;justify-content:start}img{flex-grow:1;max-width:170px;height:40px;width:auto}input{font-size:1rem}@media (max-width: 599px){img{max-width:140px}}\n"] }]
         }] });
 
 class UiTextFieldAutoCompleteComponent extends FieldBaseComponent {
@@ -10637,11 +10643,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 class HeaderAvatarComponent extends BaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: HeaderAvatarComponent, isStandalone: false, selector: "bsu-header-avatar", inputs: { fileId: "fileId", icon: "icon" }, usesInheritance: true, ngImport: i0, template: "@if (icon) {\r\n<fd-icon [glyph]=\"icon\"></fd-icon>\r\n} @if (fileId) {\r\n<img width=\"1.5rem\" height=\"auto\" [src]=\"fileId ? (fileId | picFieldSrc: 'ID':null:fileId) : ''\" />\r\n}\r\n<!-- <fd-avatar\r\n[transparent]=\"fileId ? false : true\"\r\n[circle]=\"true\"\r\n[border]=\"true\"\r\n[size]=\"size\"\r\n[glyph]=\"icon\"\r\n[image]=\"fileId ? (fileId | picFieldSrc: 'ID':null:fileId) : ''\"\r\n></fd-avatar> -->\r\n", styles: ["fd-avatar{border-color:var(--sapContent_IconColor, #0854a0)!important}fd-icon{font-size:2rem}\n"], dependencies: [{ kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: HeaderAvatarComponent, isStandalone: false, selector: "bsu-header-avatar", inputs: { fileId: "fileId", icon: "icon" }, usesInheritance: true, ngImport: i0, template: "@if (icon) {\r\n<fd-icon [glyph]=\"icon\"></fd-icon>\r\n} @if (fileId) {\r\n<img width=\"1.5rem\" height=\"auto\" [src]=\"fileId ? (fileId | picFieldSrc: 'ID':null:fileId) : ''\" loading=\"lazy\"/>\r\n}\r\n<!-- <fd-avatar\r\n[transparent]=\"fileId ? false : true\"\r\n[circle]=\"true\"\r\n[border]=\"true\"\r\n[size]=\"size\"\r\n[glyph]=\"icon\"\r\n[image]=\"fileId ? (fileId | picFieldSrc: 'ID':null:fileId) : ''\"\r\n></fd-avatar> -->\r\n", styles: ["fd-avatar{border-color:var(--sapContent_IconColor, #0854a0)!important}fd-icon{font-size:2rem}\n"], dependencies: [{ kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-header-avatar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (icon) {\r\n<fd-icon [glyph]=\"icon\"></fd-icon>\r\n} @if (fileId) {\r\n<img width=\"1.5rem\" height=\"auto\" [src]=\"fileId ? (fileId | picFieldSrc: 'ID':null:fileId) : ''\" />\r\n}\r\n<!-- <fd-avatar\r\n[transparent]=\"fileId ? false : true\"\r\n[circle]=\"true\"\r\n[border]=\"true\"\r\n[size]=\"size\"\r\n[glyph]=\"icon\"\r\n[image]=\"fileId ? (fileId | picFieldSrc: 'ID':null:fileId) : ''\"\r\n></fd-avatar> -->\r\n", styles: ["fd-avatar{border-color:var(--sapContent_IconColor, #0854a0)!important}fd-icon{font-size:2rem}\n"] }]
+            args: [{ selector: 'bsu-header-avatar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (icon) {\r\n<fd-icon [glyph]=\"icon\"></fd-icon>\r\n} @if (fileId) {\r\n<img width=\"1.5rem\" height=\"auto\" [src]=\"fileId ? (fileId | picFieldSrc: 'ID':null:fileId) : ''\" loading=\"lazy\"/>\r\n}\r\n<!-- <fd-avatar\r\n[transparent]=\"fileId ? false : true\"\r\n[circle]=\"true\"\r\n[border]=\"true\"\r\n[size]=\"size\"\r\n[glyph]=\"icon\"\r\n[image]=\"fileId ? (fileId | picFieldSrc: 'ID':null:fileId) : ''\"\r\n></fd-avatar> -->\r\n", styles: ["fd-avatar{border-color:var(--sapContent_IconColor, #0854a0)!important}fd-icon{font-size:2rem}\n"] }]
         }], propDecorators: { fileId: [{
                 type: Input
             }], icon: [{
@@ -10871,11 +10877,11 @@ class LyVerticalLayoutComponent extends LayoutItemBaseComponent {
         this.layoutService.removeHorizontal(this.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyVerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyVerticalLayoutComponent, isStandalone: false, selector: "bsu-ly-vertical-layout", outputs: { events: "events" }, host: { properties: { "style.flex": "this.flex", "style.flex-wrap": "this.flexWrap", "attr.groupname": "this.groupName" } }, viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} } }\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-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\"\r\n        (events)=\"events.emit($event)\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep>bsu-ly-layout-panel:not(:first-of-type){margin-top:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyVerticalLayoutComponent, isStandalone: false, selector: "bsu-ly-vertical-layout", outputs: { events: "events" }, host: { properties: { "style.flex": "this.flex", "style.flex-wrap": "this.flexWrap", "attr.groupname": "this.groupName" } }, viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} } }\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\" let-module=\"module\">\r\n    <bnrc-dynamic-layout\r\n        [config]=\"config\"\r\n        [selector]=\"selector\"\r\n        [name]=\"name\"\r\n        [module]=\"module || 'BarsaSapUi'\"\r\n        [moduleFileName]=\"'BarsaSapUi'\"\r\n        [maxLabelWidth]=\"maxLabelWidth\"\r\n        (events)=\"events.emit($event)\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep>bsu-ly-layout-panel:not(:first-of-type){margin-top:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyVerticalLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-vertical-layout', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} } }\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-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\"\r\n        (events)=\"events.emit($event)\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep>bsu-ly-layout-panel:not(:first-of-type){margin-top:.5rem}\n"] }]
+            args: [{ selector: 'bsu-ly-vertical-layout', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-tab-container' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n} @case ('Ly.LayoutPanel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LyLayoutPanelComponent', selector: 'bsu-ly-layout-panel' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n} @case ('Ly.LayoutContainer') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            name: 'LyLayoutContainerComponent',\r\n            selector: 'bsu-ly-layout-container'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n} @case ('Ly.EmptySpace') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n            name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n            selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n} @case ('Ly.SimpleLabel') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: { $implicit: item, name: 'LySimpleLabelComponent', selector: 'bsu-ly-simple-label' }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n} @case ('Ly.LayoutLine') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"dynamicLayout; context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\"\r\n></ng-container>\r\n<!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n} @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-horizontal-layout',\r\n            name: 'LyLayoutHorizontalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n} @else {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-ly-vertical-layout',\r\n            name: 'LyLayoutVerticalComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n} } @case ('Ly.LayoutControl') {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        dynamicLayout;\r\n        context: {\r\n            $implicit: item,\r\n            selector: 'bsu-layout-control',\r\n            name: 'LayoutControlComponent'\r\n        }\r\n    \"\r\n></ng-container>\r\n<!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n} } }\r\n<ng-template #dynamicLayout let-config let-selector=\"selector\" let-name=\"name\" let-module=\"module\">\r\n    <bnrc-dynamic-layout\r\n        [config]=\"config\"\r\n        [selector]=\"selector\"\r\n        [name]=\"name\"\r\n        [module]=\"module || 'BarsaSapUi'\"\r\n        [moduleFileName]=\"'BarsaSapUi'\"\r\n        [maxLabelWidth]=\"maxLabelWidth\"\r\n        (events)=\"events.emit($event)\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep>bsu-ly-layout-panel:not(:first-of-type){margin-top:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { flex: [{
                 type: HostBinding,
                 args: ['style.flex']
@@ -10999,11 +11005,11 @@ class FileCardViewerComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileCardViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileCardViewerComponent, isStandalone: false, selector: "bsu-file-card-viewer", inputs: { mediaData: "mediaData", inDialog: "inDialog", disableOrReadonly: "disableOrReadonly", deviceSize: "deviceSize", uploadingState: "uploadingState", uploader: "uploader", scanMenu: "scanMenu", groupList: "groupList" }, outputs: { openUploader: "openUploader", rotateMedia: "rotateMedia", deleteMedia: "deleteMedia" }, usesInheritance: true, ngImport: i0, template: "@for (groupItem of groupList; track groupItem.Id; let i = $index) {\r\n<fd-panel>\r\n    <div fd-panel-title>{{ groupItem.Name }}</div>\r\n    <div fd-panel-content class=\"tw-transition-all tw-duration-300\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                cardFiles;\r\n                context: {\r\n                    $implicit: mediaData | picturesByGroupId: groupItem.Id,\r\n                    groupItem: groupItem,\r\n                    allFiles: mediaData\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n    </div>\r\n</fd-panel>\r\n\r\n} @if(!groupList?.length){\r\n<ng-container *ngTemplateOutlet=\"cardFiles; context: { $implicit: mediaData, allFiles: mediaData, groupItem: null }\">\r\n</ng-container>\r\n}\r\n<ng-template #cardFiles let-files let-groupItem=\"groupItem\" let-allFiles=\"allFiles\">\r\n    <div resizeHandler [fnResize]=\"ResizeRefresh\">\r\n        <div class=\"tw-grid tw-gap-4 tw-transition-all tw-duration-300\" [ngClass]=\"gridColsClass()\">\r\n            @for (media of files; track media.Id; let i = $index) {\r\n            <div>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        cardTpl;\r\n                        context: {\r\n                            $implicit: media,\r\n                            files: files,\r\n                            inDialog: inDialog,\r\n                            index: i,\r\n                            disableOrReadonly: disableOrReadonly,\r\n                            allFiles: allFiles\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            } @if (!inDialog && !disableOrReadonly) {\r\n            <div>\r\n                <ng-container *ngTemplateOutlet=\"newFile; context: { $implicit: groupItem }\"></ng-container>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #cardTpl\r\n    let-media\r\n    let-groupId=\"groupId\"\r\n    let-files=\"files\"\r\n    let-allFiles=\"allFiles\"\r\n    let-inDialog=\"inDialog\"\r\n    let-index=\"index\"\r\n    let-disableOrReadonly=\"disableOrReadonly\"\r\n>\r\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\r\n        <fd-card-content class=\"tw-flex tw-h-32\">\r\n            <img class=\"tw-w-full\" imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img />\r\n        </fd-card-content>\r\n        @if (!inDialog) {\r\n        <fd-card-footer>\r\n            <button\r\n                glyph=\"print\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [files]=\"[media]\"\r\n                printFiles\r\n            ></button>\r\n            <button\r\n                glyph=\"full-screen\"\r\n                [title]=\"'FullScreen' | bbbTranslate\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                fullscreenFiles\r\n                [deviceSize]=\"deviceSize\"\r\n                [isImageGallery]=\"true\"\r\n                [selectedId]=\"media.Id\"\r\n                [files]=\"[media]\"\r\n            ></button>\r\n\r\n            <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n            <fd-menu #menu>\r\n                <li fd-menu-item [files]=\"files\" printFiles>\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"print\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Print' | bbbTranslate }} {{ 'All' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li fd-menu-item [name]=\"media.label\" [src]=\"media.mediaUrl\" saveImage>\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"download\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Download' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                @if (!disableOrReadonly) {\r\n                <li fd-menu-item (click)=\"onRotate(img, media)\">\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"rotate\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Rotate' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li fd-menu-item (click)=\"deleteMedia.emit(media.Id)\">\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"delete\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Delete' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li\r\n                    fd-menu-item\r\n                    fullscreenFiles\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [isImageGallery]=\"true\"                    \r\n                    [files]=\"allFiles\"\r\n                >\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"full-screen\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'FullScreen' | bbbTranslate }} {{ 'All' | bbbTranslate }} </span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </fd-menu>\r\n        </fd-card-footer>\r\n        }\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #newFile let-groupItem>\r\n    <div style=\"position: relative; height: 100%\">\r\n        <fd-card>\r\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\r\n                <button\r\n                    fd-button\r\n                    glyph=\"add-photo\"\r\n                    fdType=\"transparent\"\r\n                    [label]=\"'AttachFile' | bbbTranslate\"\r\n                    (click)=\"openUploader.emit(groupItem)\"\r\n                ></button>\r\n            </fd-card-content>\r\n\r\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\r\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"scanMenu\"></button>\r\n            </fd-card-footer>\r\n        </fd-card>\r\n        @if (uploadingState?.uploading === true) {\r\n        <bsu-mask></bsu-mask>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:flex;gap:.5rem;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i2.SaveImageDirective, selector: "[saveImage]", inputs: ["name", "src"] }, { kind: "directive", type: i2.ResizeHandlerDirective, selector: "[resizeHandler]", inputs: ["fnResize"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i7$3.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$3.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i3$6.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$6.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i3$6.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "selectedId", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.PicturesByGroupIdPipe, name: "picturesByGroupId" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileCardViewerComponent, isStandalone: false, selector: "bsu-file-card-viewer", inputs: { mediaData: "mediaData", inDialog: "inDialog", disableOrReadonly: "disableOrReadonly", deviceSize: "deviceSize", uploadingState: "uploadingState", uploader: "uploader", scanMenu: "scanMenu", groupList: "groupList" }, outputs: { openUploader: "openUploader", rotateMedia: "rotateMedia", deleteMedia: "deleteMedia" }, usesInheritance: true, ngImport: i0, template: "@for (groupItem of groupList; track groupItem.Id; let i = $index) {\r\n<fd-panel>\r\n    <div fd-panel-title>{{ groupItem.Name }}</div>\r\n    <div fd-panel-content class=\"tw-transition-all tw-duration-300\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                cardFiles;\r\n                context: {\r\n                    $implicit: mediaData | picturesByGroupId: groupItem.Id,\r\n                    groupItem: groupItem,\r\n                    allFiles: mediaData\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n    </div>\r\n</fd-panel>\r\n\r\n} @if(!groupList?.length){\r\n<ng-container *ngTemplateOutlet=\"cardFiles; context: { $implicit: mediaData, allFiles: mediaData, groupItem: null }\">\r\n</ng-container>\r\n}\r\n<ng-template #cardFiles let-files let-groupItem=\"groupItem\" let-allFiles=\"allFiles\">\r\n    <div resizeHandler [fnResize]=\"ResizeRefresh\">\r\n        <div class=\"tw-grid tw-gap-4 tw-transition-all tw-duration-300\" [ngClass]=\"gridColsClass()\">\r\n            @for (media of files; track media.Id; let i = $index) {\r\n            <div>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        cardTpl;\r\n                        context: {\r\n                            $implicit: media,\r\n                            files: files,\r\n                            inDialog: inDialog,\r\n                            index: i,\r\n                            disableOrReadonly: disableOrReadonly,\r\n                            allFiles: allFiles\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            } @if (!inDialog && !disableOrReadonly) {\r\n            <div>\r\n                <ng-container *ngTemplateOutlet=\"newFile; context: { $implicit: groupItem }\"></ng-container>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #cardTpl\r\n    let-media\r\n    let-groupId=\"groupId\"\r\n    let-files=\"files\"\r\n    let-allFiles=\"allFiles\"\r\n    let-inDialog=\"inDialog\"\r\n    let-index=\"index\"\r\n    let-disableOrReadonly=\"disableOrReadonly\"\r\n>\r\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\r\n        <fd-card-content class=\"tw-flex tw-h-32\">\r\n            <img class=\"tw-w-full\" imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img  />\r\n        </fd-card-content>\r\n        @if (!inDialog) {\r\n        <fd-card-footer>\r\n            <button\r\n                glyph=\"print\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [files]=\"[media]\"\r\n                printFiles\r\n            ></button>\r\n            <button\r\n                glyph=\"full-screen\"\r\n                [title]=\"'FullScreen' | bbbTranslate\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                fullscreenFiles\r\n                [deviceSize]=\"deviceSize\"\r\n                [isImageGallery]=\"true\"\r\n                [selectedId]=\"media.Id\"\r\n                [files]=\"[media]\"\r\n            ></button>\r\n\r\n            <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n            <fd-menu #menu>\r\n                <li fd-menu-item [files]=\"files\" printFiles>\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"print\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Print' | bbbTranslate }} {{ 'All' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li fd-menu-item [name]=\"media.label\" [src]=\"media.mediaUrl\" saveImage>\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"download\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Download' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                @if (!disableOrReadonly) {\r\n                <li fd-menu-item (click)=\"onRotate(img, media)\">\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"rotate\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Rotate' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li fd-menu-item (click)=\"deleteMedia.emit(media.Id)\">\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"delete\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Delete' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li\r\n                    fd-menu-item\r\n                    fullscreenFiles\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [isImageGallery]=\"true\"                    \r\n                    [files]=\"allFiles\"\r\n                >\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"full-screen\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'FullScreen' | bbbTranslate }} {{ 'All' | bbbTranslate }} </span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </fd-menu>\r\n        </fd-card-footer>\r\n        }\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #newFile let-groupItem>\r\n    <div style=\"position: relative; height: 100%\">\r\n        <fd-card>\r\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\r\n                <button\r\n                    fd-button\r\n                    glyph=\"add-photo\"\r\n                    fdType=\"transparent\"\r\n                    [label]=\"'AttachFile' | bbbTranslate\"\r\n                    (click)=\"openUploader.emit(groupItem)\"\r\n                ></button>\r\n            </fd-card-content>\r\n\r\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\r\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"scanMenu\"></button>\r\n            </fd-card-footer>\r\n        </fd-card>\r\n        @if (uploadingState?.uploading === true) {\r\n        <bsu-mask></bsu-mask>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:flex;gap:.5rem;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i2.SaveImageDirective, selector: "[saveImage]", inputs: ["name", "src"] }, { kind: "directive", type: i2.ResizeHandlerDirective, selector: "[resizeHandler]", inputs: ["fnResize"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i7$3.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$3.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i3$6.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$6.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i3$6.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "selectedId", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.PicturesByGroupIdPipe, name: "picturesByGroupId" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileCardViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-file-card-viewer', standalone: false, template: "@for (groupItem of groupList; track groupItem.Id; let i = $index) {\r\n<fd-panel>\r\n    <div fd-panel-title>{{ groupItem.Name }}</div>\r\n    <div fd-panel-content class=\"tw-transition-all tw-duration-300\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                cardFiles;\r\n                context: {\r\n                    $implicit: mediaData | picturesByGroupId: groupItem.Id,\r\n                    groupItem: groupItem,\r\n                    allFiles: mediaData\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n    </div>\r\n</fd-panel>\r\n\r\n} @if(!groupList?.length){\r\n<ng-container *ngTemplateOutlet=\"cardFiles; context: { $implicit: mediaData, allFiles: mediaData, groupItem: null }\">\r\n</ng-container>\r\n}\r\n<ng-template #cardFiles let-files let-groupItem=\"groupItem\" let-allFiles=\"allFiles\">\r\n    <div resizeHandler [fnResize]=\"ResizeRefresh\">\r\n        <div class=\"tw-grid tw-gap-4 tw-transition-all tw-duration-300\" [ngClass]=\"gridColsClass()\">\r\n            @for (media of files; track media.Id; let i = $index) {\r\n            <div>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        cardTpl;\r\n                        context: {\r\n                            $implicit: media,\r\n                            files: files,\r\n                            inDialog: inDialog,\r\n                            index: i,\r\n                            disableOrReadonly: disableOrReadonly,\r\n                            allFiles: allFiles\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            } @if (!inDialog && !disableOrReadonly) {\r\n            <div>\r\n                <ng-container *ngTemplateOutlet=\"newFile; context: { $implicit: groupItem }\"></ng-container>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #cardTpl\r\n    let-media\r\n    let-groupId=\"groupId\"\r\n    let-files=\"files\"\r\n    let-allFiles=\"allFiles\"\r\n    let-inDialog=\"inDialog\"\r\n    let-index=\"index\"\r\n    let-disableOrReadonly=\"disableOrReadonly\"\r\n>\r\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\r\n        <fd-card-content class=\"tw-flex tw-h-32\">\r\n            <img class=\"tw-w-full\" imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img />\r\n        </fd-card-content>\r\n        @if (!inDialog) {\r\n        <fd-card-footer>\r\n            <button\r\n                glyph=\"print\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [files]=\"[media]\"\r\n                printFiles\r\n            ></button>\r\n            <button\r\n                glyph=\"full-screen\"\r\n                [title]=\"'FullScreen' | bbbTranslate\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                fullscreenFiles\r\n                [deviceSize]=\"deviceSize\"\r\n                [isImageGallery]=\"true\"\r\n                [selectedId]=\"media.Id\"\r\n                [files]=\"[media]\"\r\n            ></button>\r\n\r\n            <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n            <fd-menu #menu>\r\n                <li fd-menu-item [files]=\"files\" printFiles>\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"print\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Print' | bbbTranslate }} {{ 'All' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li fd-menu-item [name]=\"media.label\" [src]=\"media.mediaUrl\" saveImage>\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"download\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Download' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                @if (!disableOrReadonly) {\r\n                <li fd-menu-item (click)=\"onRotate(img, media)\">\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"rotate\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Rotate' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li fd-menu-item (click)=\"deleteMedia.emit(media.Id)\">\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"delete\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Delete' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li\r\n                    fd-menu-item\r\n                    fullscreenFiles\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [isImageGallery]=\"true\"                    \r\n                    [files]=\"allFiles\"\r\n                >\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"full-screen\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'FullScreen' | bbbTranslate }} {{ 'All' | bbbTranslate }} </span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </fd-menu>\r\n        </fd-card-footer>\r\n        }\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #newFile let-groupItem>\r\n    <div style=\"position: relative; height: 100%\">\r\n        <fd-card>\r\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\r\n                <button\r\n                    fd-button\r\n                    glyph=\"add-photo\"\r\n                    fdType=\"transparent\"\r\n                    [label]=\"'AttachFile' | bbbTranslate\"\r\n                    (click)=\"openUploader.emit(groupItem)\"\r\n                ></button>\r\n            </fd-card-content>\r\n\r\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\r\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"scanMenu\"></button>\r\n            </fd-card-footer>\r\n        </fd-card>\r\n        @if (uploadingState?.uploading === true) {\r\n        <bsu-mask></bsu-mask>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:flex;gap:.5rem;flex-direction:column}\n"] }]
+            args: [{ selector: 'bsu-file-card-viewer', standalone: false, template: "@for (groupItem of groupList; track groupItem.Id; let i = $index) {\r\n<fd-panel>\r\n    <div fd-panel-title>{{ groupItem.Name }}</div>\r\n    <div fd-panel-content class=\"tw-transition-all tw-duration-300\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                cardFiles;\r\n                context: {\r\n                    $implicit: mediaData | picturesByGroupId: groupItem.Id,\r\n                    groupItem: groupItem,\r\n                    allFiles: mediaData\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n    </div>\r\n</fd-panel>\r\n\r\n} @if(!groupList?.length){\r\n<ng-container *ngTemplateOutlet=\"cardFiles; context: { $implicit: mediaData, allFiles: mediaData, groupItem: null }\">\r\n</ng-container>\r\n}\r\n<ng-template #cardFiles let-files let-groupItem=\"groupItem\" let-allFiles=\"allFiles\">\r\n    <div resizeHandler [fnResize]=\"ResizeRefresh\">\r\n        <div class=\"tw-grid tw-gap-4 tw-transition-all tw-duration-300\" [ngClass]=\"gridColsClass()\">\r\n            @for (media of files; track media.Id; let i = $index) {\r\n            <div>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        cardTpl;\r\n                        context: {\r\n                            $implicit: media,\r\n                            files: files,\r\n                            inDialog: inDialog,\r\n                            index: i,\r\n                            disableOrReadonly: disableOrReadonly,\r\n                            allFiles: allFiles\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            } @if (!inDialog && !disableOrReadonly) {\r\n            <div>\r\n                <ng-container *ngTemplateOutlet=\"newFile; context: { $implicit: groupItem }\"></ng-container>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #cardTpl\r\n    let-media\r\n    let-groupId=\"groupId\"\r\n    let-files=\"files\"\r\n    let-allFiles=\"allFiles\"\r\n    let-inDialog=\"inDialog\"\r\n    let-index=\"index\"\r\n    let-disableOrReadonly=\"disableOrReadonly\"\r\n>\r\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\r\n        <fd-card-content class=\"tw-flex tw-h-32\">\r\n            <img class=\"tw-w-full\" imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img  />\r\n        </fd-card-content>\r\n        @if (!inDialog) {\r\n        <fd-card-footer>\r\n            <button\r\n                glyph=\"print\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [files]=\"[media]\"\r\n                printFiles\r\n            ></button>\r\n            <button\r\n                glyph=\"full-screen\"\r\n                [title]=\"'FullScreen' | bbbTranslate\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                fullscreenFiles\r\n                [deviceSize]=\"deviceSize\"\r\n                [isImageGallery]=\"true\"\r\n                [selectedId]=\"media.Id\"\r\n                [files]=\"[media]\"\r\n            ></button>\r\n\r\n            <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n            <fd-menu #menu>\r\n                <li fd-menu-item [files]=\"files\" printFiles>\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"print\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Print' | bbbTranslate }} {{ 'All' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li fd-menu-item [name]=\"media.label\" [src]=\"media.mediaUrl\" saveImage>\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"download\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Download' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                @if (!disableOrReadonly) {\r\n                <li fd-menu-item (click)=\"onRotate(img, media)\">\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"rotate\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Rotate' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li fd-menu-item (click)=\"deleteMedia.emit(media.Id)\">\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"delete\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'Delete' | bbbTranslate }}</span>\r\n                    </a>\r\n                </li>\r\n                <li\r\n                    fd-menu-item\r\n                    fullscreenFiles\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [isImageGallery]=\"true\"                    \r\n                    [files]=\"allFiles\"\r\n                >\r\n                    <a fd-menu-interactive>\r\n                        <fd-menu-addon position=\"before\" glyph=\"full-screen\"></fd-menu-addon>\r\n                        <span fd-menu-title>{{ 'FullScreen' | bbbTranslate }} {{ 'All' | bbbTranslate }} </span>\r\n                    </a>\r\n                </li>\r\n                }\r\n            </fd-menu>\r\n        </fd-card-footer>\r\n        }\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #newFile let-groupItem>\r\n    <div style=\"position: relative; height: 100%\">\r\n        <fd-card>\r\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\r\n                <button\r\n                    fd-button\r\n                    glyph=\"add-photo\"\r\n                    fdType=\"transparent\"\r\n                    [label]=\"'AttachFile' | bbbTranslate\"\r\n                    (click)=\"openUploader.emit(groupItem)\"\r\n                ></button>\r\n            </fd-card-content>\r\n\r\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\r\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"scanMenu\"></button>\r\n            </fd-card-footer>\r\n        </fd-card>\r\n        @if (uploadingState?.uploading === true) {\r\n        <bsu-mask></bsu-mask>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:flex;gap:.5rem;flex-direction:column}\n"] }]
         }], propDecorators: { mediaData: [{
                 type: Input
             }], inDialog: [{
@@ -11882,38 +11888,21 @@ class UiTextAreaComponent extends FieldBaseComponent {
         if (minHeight < layoutInfo.MinSize.height) {
             minHeight = layoutInfo.MinSize.height;
         }
+        this.maxHeight = layoutInfo.ControlMaxSize.height;
         this.minHeight = minHeight;
         this.isEmbedHtml = this.parameters?.IsEmbedHtml;
         this.fixHeightValue = this.parameters?.FixHeightValue;
     }
-    onVisibilityChange(e) {
-        if (e === 'Visible' && !this._firstVisiblity) {
-            this._firstVisiblity = true;
-            this._calcTextAreaHeight2();
-        }
-    }
     onValueChange(e) {
         this.value = e.target.value;
         this.valueChange.emit(this.value);
     }
-    onKeyup() {
-        this._calcTextAreaHeight2();
-    }
-    _calcTextAreaHeight2() {
-        if (this.isEmbedHtml || !this.textarea || this.fixHeightValue) {
-            return;
-        }
-        const elTextArea = this.textarea.nativeElement;
-        elTextArea.style.height = '1px';
-        elTextArea.style.height = 10 + elTextArea.scrollHeight + 'px';
-        this._cdr.detectChanges();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiTextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiTextAreaComponent, isStandalone: false, selector: "bsu-ui-text-area", viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isEmbedHtml) {\r\n<textarea\r\n    #textarea\r\n    fd-form-control\r\n    [id]=\"id\"\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [disabled]=\"(disable$ | async) === true ? true : null\"\r\n    growing=\"true\"\r\n    wrapType=\"hard\"\r\n    [attr.title]=\"value\"\r\n    [value]=\"!value ? '' : value\"\r\n    (input)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    (keyup)=\"onKeyup()\"\r\n    [style.min-height.px]=\"minHeight\"\r\n    [style.height]=\"fixHeightValue ? fixHeightValue : null\"\r\n    [style.overflow-y]=\"fixHeightValue ? 'auto' : null\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.5\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n></textarea>\r\n} @else {\r\n<textarea fd-form-control [innerHTML]=\"value | sanitizeText\"></textarea>\r\n}\r\n", styles: [":host{display:block}textarea{width:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiTextAreaComponent, isStandalone: false, selector: "bsu-ui-text-area", viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isEmbedHtml) {\r\n<textarea\r\n    #textarea\r\n    fd-form-control\r\n    [id]=\"id\"\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [disabled]=\"(disable$ | async) === true ? true : null\"\r\n    growing=\"true\"\r\n    wrapType=\"hard\"\r\n    [attr.title]=\"value\"\r\n    [value]=\"!value ? '' : value\"\r\n    (input)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    [style.min-height.px]=\"minHeight\"\r\n    [style.max-height]=\"fixHeightValue ? fixHeightValue : maxHeight ? maxHeight + 'px' : null\"\r\n    [style.height]=\"fixHeightValue ? fixHeightValue : null\"\r\n    [style.overflow-y]=\"fixHeightValue ? 'auto' : null\"\r\n></textarea>\r\n} @else {\r\n<textarea fd-form-control [innerHTML]=\"value | sanitizeText\"></textarea>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}textarea{width:100%;overflow-x:hidden;field-sizing:content;min-height:var(--fdInput_Compact_Height, var(--sapElement_Compact_Height));resize:none;word-break:break-word}\n"], dependencies: [{ kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiTextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-text-area', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (!isEmbedHtml) {\r\n<textarea\r\n    #textarea\r\n    fd-form-control\r\n    [id]=\"id\"\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [disabled]=\"(disable$ | async) === true ? true : null\"\r\n    growing=\"true\"\r\n    wrapType=\"hard\"\r\n    [attr.title]=\"value\"\r\n    [value]=\"!value ? '' : value\"\r\n    (input)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    (keyup)=\"onKeyup()\"\r\n    [style.min-height.px]=\"minHeight\"\r\n    [style.height]=\"fixHeightValue ? fixHeightValue : null\"\r\n    [style.overflow-y]=\"fixHeightValue ? 'auto' : null\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.5\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n></textarea>\r\n} @else {\r\n<textarea fd-form-control [innerHTML]=\"value | sanitizeText\"></textarea>\r\n}\r\n", styles: [":host{display:block}textarea{width:100%;overflow:hidden}\n"] }]
+            args: [{ selector: 'bsu-ui-text-area', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (!isEmbedHtml) {\r\n<textarea\r\n    #textarea\r\n    fd-form-control\r\n    [id]=\"id\"\r\n    [placeholder]=\"Setting.NullText || ''\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : null\"\r\n    [disabled]=\"(disable$ | async) === true ? true : null\"\r\n    growing=\"true\"\r\n    wrapType=\"hard\"\r\n    [attr.title]=\"value\"\r\n    [value]=\"!value ? '' : value\"\r\n    (input)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    [style.min-height.px]=\"minHeight\"\r\n    [style.max-height]=\"fixHeightValue ? fixHeightValue : maxHeight ? maxHeight + 'px' : null\"\r\n    [style.height]=\"fixHeightValue ? fixHeightValue : null\"\r\n    [style.overflow-y]=\"fixHeightValue ? 'auto' : null\"\r\n></textarea>\r\n} @else {\r\n<textarea fd-form-control [innerHTML]=\"value | sanitizeText\"></textarea>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}textarea{width:100%;overflow-x:hidden;field-sizing:content;min-height:var(--fdInput_Compact_Height, var(--sapElement_Compact_Height));resize:none;word-break:break-word}\n"] }]
         }], propDecorators: { textarea: [{
                 type: ViewChild,
                 args: ['textarea', { read: ElementRef }]
@@ -12024,11 +12013,11 @@ class ResponsiveToolbarComponent extends BaseComponent {
         this.btnClick.emit(button);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ResponsiveToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ResponsiveToolbarComponent, isStandalone: false, selector: "bsu-responsive-toolbar", inputs: { buttons: "buttons" }, outputs: { btnClick: "btnClick" }, viewQueries: [{ propertyName: "btnListRef", predicate: ["btnRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div style=\"width: 100%; height: 0; visibility: hidden\" #containerRef>\r\n<ng-container\r\n  *ngTemplateOutlet=\"renderToolbar; context: { $implicit: buttons }\"\r\n></ng-container>\r\n</div>\r\n<bsu-responsive-toolbar-renderer\r\n  *ngIf=\"buttonsCalculated\"\r\n  [buttons]=\"buttonsCalculated\"\r\n  (btnClick)=\"onButtonClick($event)\"\r\n  [renderToolbar]=\"renderToolbar\"\r\n></bsu-responsive-toolbar-renderer>\r\n\r\n<ng-template #renderToolbar let-btnList>\r\n  <ng-container *ngFor=\"let btn of btnList\">\r\n    <ng-container *ngIf=\"btn === '-' || btn.text === '-'; else btnCommand\">\r\n      <span #btnRef class=\"toolbar-btn toolbar-vseperator\"></span>\r\n    </ng-container>\r\n    <ng-template #btnCommand>\r\n      <ui5-button\r\n        #btnRef\r\n        (click)=\"onButtonClick(btn)\"\r\n        [attr.disabled]=\"btn.enable === false ? true : null\"\r\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n        class=\"toolbar-btn\"\r\n        [attr.design]=\"btn.emphasized ? 'Emphasized' : 'Transparent'\"\r\n        [attr.icon]=\"btn.newIcon ? btn.newIcon : null\"\r\n        >{{ btn.text }}\r\n        <img *ngIf=\"!btn.newIcon && !btn.isBuiltin\" width=\"16\" [src]=\"btn.icon\"\r\n        /></ui5-button>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-template> -->\r\n\r\n<fd-toolbar [shouldOverflow]=\"true\" [style.direction]=\"dirValue$ | async\">\r\n    @for (btn of btns; track btn) { @if (btn === '-' || btn.text === '-') {\r\n    <fd-toolbar-separator></fd-toolbar-separator>\r\n    } @else {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        (click)=\"onButtonClick(btn)\"\r\n        [attr.disabled]=\"btn.enable === false ? true : null\"\r\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n        [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\r\n        [label]=\"btn.text\"\r\n        [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n    >\r\n        @if (!btn.newIcon && !btn.isBuiltin) {\r\n        <img width=\"16\" [src]=\"btn.icon\" />\r\n        }\r\n    </button>\r\n    }\r\n    <ng-template #btnCommand>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            (click)=\"onButtonClick(btn)\"\r\n            [attr.disabled]=\"btn.enable === false ? true : null\"\r\n            [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n            [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\r\n            [label]=\"btn.text\"\r\n            [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n        >\r\n            @if (!btn.newIcon && !btn.isBuiltin) {\r\n            <img width=\"16\" [src]=\"btn.icon\" />\r\n            }\r\n        </button>\r\n    </ng-template>\r\n    }\r\n</fd-toolbar>\r\n", styles: [":host{display:block;width:100%;position:relative}:host ::ng-deep .fd-toolbar--solid{background-color:var(--sapBackgroundColor, #f7f7f7);border:none}\n"], dependencies: [{ kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i7$2.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ResponsiveToolbarComponent, isStandalone: false, selector: "bsu-responsive-toolbar", inputs: { buttons: "buttons" }, outputs: { btnClick: "btnClick" }, viewQueries: [{ propertyName: "btnListRef", predicate: ["btnRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div style=\"width: 100%; height: 0; visibility: hidden\" #containerRef>\r\n<ng-container\r\n  *ngTemplateOutlet=\"renderToolbar; context: { $implicit: buttons }\"\r\n></ng-container>\r\n</div>\r\n<bsu-responsive-toolbar-renderer\r\n  *ngIf=\"buttonsCalculated\"\r\n  [buttons]=\"buttonsCalculated\"\r\n  (btnClick)=\"onButtonClick($event)\"\r\n  [renderToolbar]=\"renderToolbar\"\r\n></bsu-responsive-toolbar-renderer>\r\n\r\n<ng-template #renderToolbar let-btnList>\r\n  <ng-container *ngFor=\"let btn of btnList\">\r\n    <ng-container *ngIf=\"btn === '-' || btn.text === '-'; else btnCommand\">\r\n      <span #btnRef class=\"toolbar-btn toolbar-vseperator\"></span>\r\n    </ng-container>\r\n    <ng-template #btnCommand>\r\n      <ui5-button\r\n        #btnRef\r\n        (click)=\"onButtonClick(btn)\"\r\n        [attr.disabled]=\"btn.enable === false ? true : null\"\r\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n        class=\"toolbar-btn\"\r\n        [attr.design]=\"btn.emphasized ? 'Emphasized' : 'Transparent'\"\r\n        [attr.icon]=\"btn.newIcon ? btn.newIcon : null\"\r\n        >{{ btn.text }}\r\n        <img *ngIf=\"!btn.newIcon && !btn.isBuiltin\" width=\"16\" [src]=\"btn.icon\"\r\n        /></ui5-button>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-template> -->\r\n\r\n<fd-toolbar [shouldOverflow]=\"true\" [style.direction]=\"dirValue$ | async\">\r\n    @for (btn of btns; track btn) { @if (btn === '-' || btn.text === '-') {\r\n    <fd-toolbar-separator></fd-toolbar-separator>\r\n    } @else {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        (click)=\"onButtonClick(btn)\"\r\n        [attr.disabled]=\"btn.enable === false ? true : null\"\r\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n        [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\r\n        [label]=\"btn.text\"\r\n        [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n    >\r\n        @if (!btn.newIcon && !btn.isBuiltin) {\r\n        <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\"/>\r\n        }\r\n    </button>\r\n    }\r\n    <ng-template #btnCommand>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            (click)=\"onButtonClick(btn)\"\r\n            [attr.disabled]=\"btn.enable === false ? true : null\"\r\n            [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n            [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\r\n            [label]=\"btn.text\"\r\n            [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n        >\r\n            @if (!btn.newIcon && !btn.isBuiltin) {\r\n            <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\"/>\r\n            }\r\n        </button>\r\n    </ng-template>\r\n    }\r\n</fd-toolbar>\r\n", styles: [":host{display:block;width:100%;position:relative}:host ::ng-deep .fd-toolbar--solid{background-color:var(--sapBackgroundColor, #f7f7f7);border:none}\n"], dependencies: [{ kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i7$2.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ResponsiveToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-responsive-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- <div style=\"width: 100%; height: 0; visibility: hidden\" #containerRef>\r\n<ng-container\r\n  *ngTemplateOutlet=\"renderToolbar; context: { $implicit: buttons }\"\r\n></ng-container>\r\n</div>\r\n<bsu-responsive-toolbar-renderer\r\n  *ngIf=\"buttonsCalculated\"\r\n  [buttons]=\"buttonsCalculated\"\r\n  (btnClick)=\"onButtonClick($event)\"\r\n  [renderToolbar]=\"renderToolbar\"\r\n></bsu-responsive-toolbar-renderer>\r\n\r\n<ng-template #renderToolbar let-btnList>\r\n  <ng-container *ngFor=\"let btn of btnList\">\r\n    <ng-container *ngIf=\"btn === '-' || btn.text === '-'; else btnCommand\">\r\n      <span #btnRef class=\"toolbar-btn toolbar-vseperator\"></span>\r\n    </ng-container>\r\n    <ng-template #btnCommand>\r\n      <ui5-button\r\n        #btnRef\r\n        (click)=\"onButtonClick(btn)\"\r\n        [attr.disabled]=\"btn.enable === false ? true : null\"\r\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n        class=\"toolbar-btn\"\r\n        [attr.design]=\"btn.emphasized ? 'Emphasized' : 'Transparent'\"\r\n        [attr.icon]=\"btn.newIcon ? btn.newIcon : null\"\r\n        >{{ btn.text }}\r\n        <img *ngIf=\"!btn.newIcon && !btn.isBuiltin\" width=\"16\" [src]=\"btn.icon\"\r\n        /></ui5-button>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-template> -->\r\n\r\n<fd-toolbar [shouldOverflow]=\"true\" [style.direction]=\"dirValue$ | async\">\r\n    @for (btn of btns; track btn) { @if (btn === '-' || btn.text === '-') {\r\n    <fd-toolbar-separator></fd-toolbar-separator>\r\n    } @else {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        (click)=\"onButtonClick(btn)\"\r\n        [attr.disabled]=\"btn.enable === false ? true : null\"\r\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n        [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\r\n        [label]=\"btn.text\"\r\n        [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n    >\r\n        @if (!btn.newIcon && !btn.isBuiltin) {\r\n        <img width=\"16\" [src]=\"btn.icon\" />\r\n        }\r\n    </button>\r\n    }\r\n    <ng-template #btnCommand>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            (click)=\"onButtonClick(btn)\"\r\n            [attr.disabled]=\"btn.enable === false ? true : null\"\r\n            [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n            [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\r\n            [label]=\"btn.text\"\r\n            [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n        >\r\n            @if (!btn.newIcon && !btn.isBuiltin) {\r\n            <img width=\"16\" [src]=\"btn.icon\" />\r\n            }\r\n        </button>\r\n    </ng-template>\r\n    }\r\n</fd-toolbar>\r\n", styles: [":host{display:block;width:100%;position:relative}:host ::ng-deep .fd-toolbar--solid{background-color:var(--sapBackgroundColor, #f7f7f7);border:none}\n"] }]
+            args: [{ selector: 'bsu-responsive-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- <div style=\"width: 100%; height: 0; visibility: hidden\" #containerRef>\r\n<ng-container\r\n  *ngTemplateOutlet=\"renderToolbar; context: { $implicit: buttons }\"\r\n></ng-container>\r\n</div>\r\n<bsu-responsive-toolbar-renderer\r\n  *ngIf=\"buttonsCalculated\"\r\n  [buttons]=\"buttonsCalculated\"\r\n  (btnClick)=\"onButtonClick($event)\"\r\n  [renderToolbar]=\"renderToolbar\"\r\n></bsu-responsive-toolbar-renderer>\r\n\r\n<ng-template #renderToolbar let-btnList>\r\n  <ng-container *ngFor=\"let btn of btnList\">\r\n    <ng-container *ngIf=\"btn === '-' || btn.text === '-'; else btnCommand\">\r\n      <span #btnRef class=\"toolbar-btn toolbar-vseperator\"></span>\r\n    </ng-container>\r\n    <ng-template #btnCommand>\r\n      <ui5-button\r\n        #btnRef\r\n        (click)=\"onButtonClick(btn)\"\r\n        [attr.disabled]=\"btn.enable === false ? true : null\"\r\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n        class=\"toolbar-btn\"\r\n        [attr.design]=\"btn.emphasized ? 'Emphasized' : 'Transparent'\"\r\n        [attr.icon]=\"btn.newIcon ? btn.newIcon : null\"\r\n        >{{ btn.text }}\r\n        <img *ngIf=\"!btn.newIcon && !btn.isBuiltin\" width=\"16\" [src]=\"btn.icon\"\r\n        /></ui5-button>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-template> -->\r\n\r\n<fd-toolbar [shouldOverflow]=\"true\" [style.direction]=\"dirValue$ | async\">\r\n    @for (btn of btns; track btn) { @if (btn === '-' || btn.text === '-') {\r\n    <fd-toolbar-separator></fd-toolbar-separator>\r\n    } @else {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        (click)=\"onButtonClick(btn)\"\r\n        [attr.disabled]=\"btn.enable === false ? true : null\"\r\n        [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n        [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\r\n        [label]=\"btn.text\"\r\n        [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n    >\r\n        @if (!btn.newIcon && !btn.isBuiltin) {\r\n        <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\"/>\r\n        }\r\n    </button>\r\n    }\r\n    <ng-template #btnCommand>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            (click)=\"onButtonClick(btn)\"\r\n            [attr.disabled]=\"btn.enable === false ? true : null\"\r\n            [attr.disabled]=\"btn.readonly === true ? true : null\"\r\n            [fdType]=\"btn.emphasized ? 'emphasized' : 'transparent'\"\r\n            [label]=\"btn.text\"\r\n            [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n        >\r\n            @if (!btn.newIcon && !btn.isBuiltin) {\r\n            <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\"/>\r\n            }\r\n        </button>\r\n    </ng-template>\r\n    }\r\n</fd-toolbar>\r\n", styles: [":host{display:block;width:100%;position:relative}:host ::ng-deep .fd-toolbar--solid{background-color:var(--sapBackgroundColor, #f7f7f7);border:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { buttons: [{
                 type: Input
             }], btnClick: [{
@@ -12458,11 +12447,11 @@ class UiButtonComponent extends FieldBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiButtonComponent, isStandalone: false, selector: "bsu-ui-button", host: { properties: { "style.margin": "this.designMode" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n    (click)=\"onClick()\"\r\n    [disabled]=\"(disable$ | async)!!\"\r\n    fd-button\r\n    [fdType]=\"parameters?.FdType$Caption\"\r\n    [glyph]=\"parameters?.Icon\"\r\n    [title]=\"label | bbbTranslate\"\r\n>\r\n    @if (!parameters?.Icon && context?.Setting?.FieldIcon && !JsonExtraProp?.Icon) {\r\n    <img [src]=\"context?.Setting.FieldIcon\" />\r\n    } @if (label && !JsonExtraProp?.OnlyIcon && !parameters?.OnlyIcon) {\r\n    <span class=\"fd-button__text\">{{ label | bbbTranslate }}</span>\r\n    }\r\n</button>\r\n<input fd-form-control class=\"extra-input-hidden\" />\r\n", styles: [":host{display:flex;height:100%;align-items:center}button{width:100%}.fd-button__text{font-size:.78rem}\n"], dependencies: [{ kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiButtonComponent, isStandalone: false, selector: "bsu-ui-button", host: { properties: { "style.margin": "this.designMode" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n    (click)=\"onClick()\"\r\n    [disabled]=\"(disable$ | async)!!\"\r\n    fd-button\r\n    [fdType]=\"parameters?.FdType$Caption\"\r\n    [glyph]=\"parameters?.Icon\"\r\n    [title]=\"label | bbbTranslate\"\r\n>\r\n    @if (!parameters?.Icon && context?.Setting?.FieldIcon && !JsonExtraProp?.Icon) {\r\n    <img [src]=\"context?.Setting.FieldIcon\" loading=\"lazy\"/>\r\n    } @if (label && !JsonExtraProp?.OnlyIcon && !parameters?.OnlyIcon) {\r\n    <span class=\"fd-button__text\">{{ label | bbbTranslate }}</span>\r\n    }\r\n</button>\r\n<input fd-form-control class=\"extra-input-hidden\" />\r\n", styles: [":host{display:flex;height:100%;align-items:center}button{width:100%}.fd-button__text{font-size:.78rem}\n"], dependencies: [{ kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\r\n    (click)=\"onClick()\"\r\n    [disabled]=\"(disable$ | async)!!\"\r\n    fd-button\r\n    [fdType]=\"parameters?.FdType$Caption\"\r\n    [glyph]=\"parameters?.Icon\"\r\n    [title]=\"label | bbbTranslate\"\r\n>\r\n    @if (!parameters?.Icon && context?.Setting?.FieldIcon && !JsonExtraProp?.Icon) {\r\n    <img [src]=\"context?.Setting.FieldIcon\" />\r\n    } @if (label && !JsonExtraProp?.OnlyIcon && !parameters?.OnlyIcon) {\r\n    <span class=\"fd-button__text\">{{ label | bbbTranslate }}</span>\r\n    }\r\n</button>\r\n<input fd-form-control class=\"extra-input-hidden\" />\r\n", styles: [":host{display:flex;height:100%;align-items:center}button{width:100%}.fd-button__text{font-size:.78rem}\n"] }]
+            args: [{ selector: 'bsu-ui-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\r\n    (click)=\"onClick()\"\r\n    [disabled]=\"(disable$ | async)!!\"\r\n    fd-button\r\n    [fdType]=\"parameters?.FdType$Caption\"\r\n    [glyph]=\"parameters?.Icon\"\r\n    [title]=\"label | bbbTranslate\"\r\n>\r\n    @if (!parameters?.Icon && context?.Setting?.FieldIcon && !JsonExtraProp?.Icon) {\r\n    <img [src]=\"context?.Setting.FieldIcon\" loading=\"lazy\"/>\r\n    } @if (label && !JsonExtraProp?.OnlyIcon && !parameters?.OnlyIcon) {\r\n    <span class=\"fd-button__text\">{{ label | bbbTranslate }}</span>\r\n    }\r\n</button>\r\n<input fd-form-control class=\"extra-input-hidden\" />\r\n", styles: [":host{display:flex;height:100%;align-items:center}button{width:100%}.fd-button__text{font-size:.78rem}\n"] }]
         }], propDecorators: { designMode: [{
                 type: HostBinding,
                 args: ['style.margin']
@@ -12496,11 +12485,11 @@ class UiTinymceComponent extends FieldBaseComponent {
         this.context.fireEvent('change', this, newValue, this.value, {});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiTinymceComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiTinymceComponent, isStandalone: false, selector: "bsu-ui-tinymce", host: { properties: { "style.min-height": "this.tinyHeight", "style.min-width": "this._minWidth" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            (Setting.IsHtmlViewer || (disableOrReadonly$ | async)) === true ? readonlyMode : editMode;\r\n            context: { disable: (disable$ | async) === true }\r\n        \"\r\n    ></ng-container>\r\n    <ng-template #readonlyMode let-disable=\"disable\">\r\n        <input fd-form-control class=\"hide\" />\r\n        <div\r\n            class=\"html-readonly fd-input\"\r\n            contentDensity\r\n            [attr.readonly]=\"true\"\r\n            [class.readonly]=\"true\"\r\n            [class.anonymous]=\"isAnonymous\"\r\n            [class.disable]=\"disable\"\r\n            [innerHtml]=\"value | sanitizeText\"\r\n            [style.pointer-event]=\"disable ? 'none' : null\"\r\n            style=\"height: auto !important;text-wrap: auto;\"\r\n        ></div>\r\n    </ng-template>\r\n\r\n    <ng-template #editMode>\r\n        <bsu-mask *ngIf=\"!tinyInit\"></bsu-mask>\r\n        <bsu-barsa-tinyemce\r\n            [attr.ismobile]=\"isMobile\"\r\n            [attr.ismobile]=\"isTablet\"\r\n            [Setting]=\"Setting\"\r\n            [IsInline]=\"parameters?.IsInline === true\"\r\n            [value]=\"value\"\r\n            [defaultVerbs]=\"context.defaultVerbs\"\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}:host ::ng-deep .tox.tox-tinymce{border-radius:0%;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.html-readonly ::ng-deep>p{overflow:unset}.html-readonly ::ng-deep ol,.html-readonly ::ng-deep ul{list-style:revert!important;margin:revert!important;padding:revert!important}.html-readonly ::ng-deep li{border-width:revert;border-style:revert;border-color:revert}.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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BarsaTinyemceComponent, selector: "bsu-barsa-tinyemce", inputs: ["Setting", "isReadonly", "value", "IsInline", "defaultVerbs"], outputs: ["valueChange", "tinyInit"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiTinymceComponent, isStandalone: false, selector: "bsu-ui-tinymce", host: { properties: { "style.min-height": "this.tinyHeight", "style.min-width": "this._minWidth" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            (Setting.IsHtmlViewer || (disableOrReadonly$ | async)) === true ? readonlyMode : editMode;\r\n            context: { disable: (disable$ | async) === true }\r\n        \"\r\n    ></ng-container>\r\n    <ng-template #readonlyMode let-disable=\"disable\">\r\n        <input fd-form-control class=\"hide\" />\r\n        <div\r\n            class=\"html-readonly fd-input\"\r\n            contentDensity\r\n            [attr.id]=\"id\"\r\n            [attr.readonly]=\"true\"\r\n            [class.readonly]=\"true\"\r\n            [class.anonymous]=\"isAnonymous\"\r\n            [class.disable]=\"disable\"\r\n            [innerHtml]=\"value | scopedCss: '#' + id | sanitizeText\"\r\n            [style.pointer-event]=\"disable ? 'none' : null\"\r\n            style=\"height: auto !important; text-wrap: auto\"\r\n        ></div>\r\n    </ng-template>\r\n\r\n    <ng-template #editMode>\r\n        <bsu-mask *ngIf=\"!tinyInit\"></bsu-mask>\r\n        <bsu-barsa-tinyemce\r\n            [attr.ismobile]=\"isMobile\"\r\n            [attr.ismobile]=\"isTablet\"\r\n            [Setting]=\"Setting\"\r\n            [IsInline]=\"parameters?.IsInline === true\"\r\n            [value]=\"value\"\r\n            [defaultVerbs]=\"context.defaultVerbs\"\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}:host ::ng-deep .tox.tox-tinymce{border-radius:0%;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.html-readonly ::ng-deep>p{overflow:unset}.html-readonly ::ng-deep ol,.html-readonly ::ng-deep ul{list-style:revert!important;margin:revert!important;padding:revert!important}.html-readonly ::ng-deep li{border-width:revert;border-style:revert;border-color:revert}.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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BarsaTinyemceComponent, selector: "bsu-barsa-tinyemce", inputs: ["Setting", "isReadonly", "value", "IsInline", "defaultVerbs"], outputs: ["valueChange", "tinyInit"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: i2.ScopedCssPipe, name: "scopedCss" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiTinymceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-tinymce', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *untilInView=\"el\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            (Setting.IsHtmlViewer || (disableOrReadonly$ | async)) === true ? readonlyMode : editMode;\r\n            context: { disable: (disable$ | async) === true }\r\n        \"\r\n    ></ng-container>\r\n    <ng-template #readonlyMode let-disable=\"disable\">\r\n        <input fd-form-control class=\"hide\" />\r\n        <div\r\n            class=\"html-readonly fd-input\"\r\n            contentDensity\r\n            [attr.readonly]=\"true\"\r\n            [class.readonly]=\"true\"\r\n            [class.anonymous]=\"isAnonymous\"\r\n            [class.disable]=\"disable\"\r\n            [innerHtml]=\"value | sanitizeText\"\r\n            [style.pointer-event]=\"disable ? 'none' : null\"\r\n            style=\"height: auto !important;text-wrap: auto;\"\r\n        ></div>\r\n    </ng-template>\r\n\r\n    <ng-template #editMode>\r\n        <bsu-mask *ngIf=\"!tinyInit\"></bsu-mask>\r\n        <bsu-barsa-tinyemce\r\n            [attr.ismobile]=\"isMobile\"\r\n            [attr.ismobile]=\"isTablet\"\r\n            [Setting]=\"Setting\"\r\n            [IsInline]=\"parameters?.IsInline === true\"\r\n            [value]=\"value\"\r\n            [defaultVerbs]=\"context.defaultVerbs\"\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}:host ::ng-deep .tox.tox-tinymce{border-radius:0%;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.html-readonly ::ng-deep>p{overflow:unset}.html-readonly ::ng-deep ol,.html-readonly ::ng-deep ul{list-style:revert!important;margin:revert!important;padding:revert!important}.html-readonly ::ng-deep li{border-width:revert;border-style:revert;border-color:revert}.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, standalone: false, template: "<ng-container *untilInView=\"el\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            (Setting.IsHtmlViewer || (disableOrReadonly$ | async)) === true ? readonlyMode : editMode;\r\n            context: { disable: (disable$ | async) === true }\r\n        \"\r\n    ></ng-container>\r\n    <ng-template #readonlyMode let-disable=\"disable\">\r\n        <input fd-form-control class=\"hide\" />\r\n        <div\r\n            class=\"html-readonly fd-input\"\r\n            contentDensity\r\n            [attr.id]=\"id\"\r\n            [attr.readonly]=\"true\"\r\n            [class.readonly]=\"true\"\r\n            [class.anonymous]=\"isAnonymous\"\r\n            [class.disable]=\"disable\"\r\n            [innerHtml]=\"value | scopedCss: '#' + id | sanitizeText\"\r\n            [style.pointer-event]=\"disable ? 'none' : null\"\r\n            style=\"height: auto !important; text-wrap: auto\"\r\n        ></div>\r\n    </ng-template>\r\n\r\n    <ng-template #editMode>\r\n        <bsu-mask *ngIf=\"!tinyInit\"></bsu-mask>\r\n        <bsu-barsa-tinyemce\r\n            [attr.ismobile]=\"isMobile\"\r\n            [attr.ismobile]=\"isTablet\"\r\n            [Setting]=\"Setting\"\r\n            [IsInline]=\"parameters?.IsInline === true\"\r\n            [value]=\"value\"\r\n            [defaultVerbs]=\"context.defaultVerbs\"\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}:host ::ng-deep .tox.tox-tinymce{border-radius:0%;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.html-readonly ::ng-deep>p{overflow:unset}.html-readonly ::ng-deep ol,.html-readonly ::ng-deep ul{list-style:revert!important;margin:revert!important;padding:revert!important}.html-readonly ::ng-deep li{border-width:revert;border-style:revert;border-color:revert}.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']
@@ -12807,11 +12796,11 @@ class UlvToolbarComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UlvToolbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UlvToolbarComponent, isStandalone: false, selector: "bsu-ulv-toolbar", inputs: { viewSettings: "viewSettings", allowGridColumnSort: "allowGridColumnSort", useLayoutItemTextForControl: "useLayoutItemTextForControl", hideTitle: "hideTitle", title: "title", icon: "icon", deviceName: "deviceName", deviceSize: "deviceSize", access: "access", hideToolbar: "hideToolbar", toolbarButtons: "toolbarButtons", toolbarButtonsReportView: "toolbarButtonsReportView", contentDensity: "contentDensity", inlineEditMode: "inlineEditMode", allowInlineEdit: "allowInlineEdit", gridSetting: "gridSetting", viewCollection: "viewCollection", reportView: "reportView", inDialog: "inDialog", isMultiSelect: "isMultiSelect", cls: "cls", hasSelected: "hasSelected" }, outputs: { groupbyClick: "groupbyClick", toggleMultiSelect: "toggleMultiSelect", sortClick: "sortClick", columnClick: "columnClick", editModeClick: "editModeClick", viewClick: "viewClick", createNewInlineMo: "createNewInlineMo" }, viewQueries: [{ propertyName: "_tlbCmp", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "_divTempWidth", first: true, predicate: ["divTempWidth"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    resizeHandler\r\n    [fnResize]=\"onResize\"\r\n    #divTempWidth\r\n></div>\r\n@if (!useLayoutItemTextForControl && !hideToolbar && visibled()) {\r\n<fd-toolbar\r\n    #toolbar\r\n    [shouldOverflow]=\"true\"\r\n    [ngClass]=\"deviceSize\"\r\n    [hasTitle]=\"!hideTitle\"\r\n    [forceOverflow]=\"true\"\r\n    [ngClass]=\"cls\"\r\n    [style.width]=\"ulvWidth()\"\r\n>\r\n    @if(!hideTitle && deviceSize !== 's' ? (title | bbbTranslate) : ''){ @if(icon){\r\n    <fd-icon [glyph]=\"icon\"></fd-icon>\r\n    }\r\n    <h4 fd-title>{{ title | bbbTranslate }}</h4>\r\n    } @if (deviceSize !== 's') {\r\n    <!-- <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer> -->\r\n    } @if (!hideToolbar) {\r\n    <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n    @if (gridSetting && gridSetting.Hidden !== true && !viewSettings?.Grid_DisableColumnHeaders) { @if (deviceSize ===\r\n    's') {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onGroupbySettings()\"\r\n        [label]=\"'Groups' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    @if(allowGridColumnSort){\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onSortSettings()\"\r\n        [label]=\"'Sort' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onColumnSettings()\"\r\n        [label]=\"'Columns' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (deviceSize !== 's') {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        fdOverflowPriority=\"never\"\r\n        [fdOverflowGroup]=\"9\"\r\n        [fdMenu]=\"true\"\r\n        fdType=\"transparent\"\r\n        glyph=\"action-settings\"\r\n        [title]=\"'Settings' | bbbTranslate\"\r\n        [fdMenuTrigger]=\"tableMenuSettings\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n\r\n    <fd-menu #tableMenuSettings>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onMultiSelect()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"checklist\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ isMultiSelect ? ('Single Select' | bbbTranslate) : ('Multi Select' | bbbTranslate) }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onColumnSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"action-settings\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Columns' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        @if(allowGridColumnSort){\r\n\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onSortSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"sort\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Sort' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        }\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onGroupbySettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"group-2\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Groups' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n    </fd-menu>\r\n    } @if (viewCollection && viewCollection.length > 1) {\r\n    <fd-split-button\r\n        fd-toolbar-item\r\n        fdOverflowPriority=\"never\"\r\n        [fdOverflowGroup]=\"10\"\r\n        [fdType]=\"'transparent'\"\r\n        [mainAction]=\"{\r\n            keepMainAction: true,\r\n            mainActionTitle: splitBtnTitle\r\n        }\"\r\n    >\r\n        <fd-menu>\r\n            @for (viewObject of viewCollection; track viewObject) {\r\n            <li fd-menu-item>\r\n                <div fd-menu-interactive (click)=\"onChangeView(viewObject)\" bodyClick>\r\n                    <span fd-menu-title>\r\n                        <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    } @if (allowInlineEdit && access?.Edit) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\r\n        [glyph]=\"'edit'\"\r\n        [label]=\"deviceSize === 's' ? ('Inline Edit In List' | bbbTranslate) : ''\"\r\n        (click)=\"onEditMode()\"\r\n        fdOverflowPriority=\"low\"\r\n        [fdOverflowGroup]=\"11\"\r\n        [title]=\"'Inline Edit In List' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <ng-template #splitBtnTitle>\r\n        <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\r\n    </ng-template>\r\n    <ng-template #splitBtnSettings>\r\n        <fd-icon [glyph]=\"'action-settings'\"></fd-icon>\r\n    </ng-template>\r\n    @for (btn of toolbarButtons | reverse; track _trackBy(i, btn); let i = $index) { @if (btn !== '-' && btn.Command &&\r\n    !btn.Command.CustomUi && !btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"btn.priority\"\r\n        [fdOverflowGroup]=\"btn.priorityGroup\"\r\n        [ulvCommandHandler]=\"btn\"\r\n        [disable]=\"inlineEditMode && btn.itemId === 'New'\"\r\n        [disabled]=\"btn.Command._isEnable === false ? true : false\"\r\n        [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\r\n        [glyph]=\"deviceSize === 's' ? null : btn.newIcon || btn.Command.JsonExtraProp?.Icon\"\r\n        [title]=\"(btn.Command?.IsBuiltin ? btn.text : '') | bbbTranslate\"\r\n        (click)=\"inlineEditMode && btn.itemId === 'New' && createNewInlineMo.emit()\"\r\n        bodyClick\r\n    >\r\n        @if (!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" />\r\n        } @if (!btn.hideText || deviceSize === 's') {\r\n        <span>{{ (!btn.text && btn.isCustom ? btn.itemId : btn.text) | bbbTranslate }}</span>\r\n        }\r\n    </button>\r\n    } @if ((btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile') {\r\n    <fd-toolbar-separator fd-toolbar-item></fd-toolbar-separator>\r\n    } @if (btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [fdType]=\"btn.Command?.IsBuiltin ? 'standard' : 'transparent'\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n        bodyClick\r\n    >\r\n        <fd-menu #menu>\r\n            @for (btnCommand of btn.menu.items; track btnCommand) {\r\n            <li fd-menu-item [ulvCommandHandler]=\"btnCommand\" (click)=\"menu.close()\">\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } @if (btn !== '-' && btn.Command && btn.Command.CustomUi) {\r\n    <bnrc-dynamic-form-toolbaritem\r\n        fd-toolbar-item\r\n        [ulvCommandHandler]=\"btn\"\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [component]=\"btn.Command?.CustomUi\"\r\n        [context]=\"btn\"\r\n        [isEnable]=\"btn.Command?._isEnable\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        bodyClick\r\n    ></bnrc-dynamic-form-toolbaritem>\r\n    } } @for (btn of toolbarButtonsReportView | reverse; track btn.id; let i = $index) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"'high'\"\r\n        [fdOverflowGroup]=\"1\"\r\n        [glyph]=\"btn.icon\"\r\n        [title]=\"btn.text | bbbTranslate\"\r\n        [label]=\"btn.hideText ? '' : (btn.text | bbbTranslate)\"\r\n        (click)=\"btn.handler()\"\r\n        [disabled]=\"!btn.isEnable\"\r\n        bodyClick\r\n    ></button>\r\n    } }\r\n</fd-toolbar>\r\n}\r\n", styles: [":host{display:block;width:100%;position:relative}:host fd-toolbar.border-b-0{border-bottom-width:0px!important}: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)}:host fd-toolbar.s ::ng-deep .fd-toolbar{justify-content:end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "disable"], outputs: ["commandClick"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i2.ResizeHandlerDirective, selector: "[resizeHandler]", inputs: ["fnResize"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i7$2.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ReversePipe, name: "reverse" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UlvToolbarComponent, isStandalone: false, selector: "bsu-ulv-toolbar", inputs: { viewSettings: "viewSettings", allowGridColumnSort: "allowGridColumnSort", useLayoutItemTextForControl: "useLayoutItemTextForControl", hideTitle: "hideTitle", title: "title", icon: "icon", deviceName: "deviceName", deviceSize: "deviceSize", access: "access", hideToolbar: "hideToolbar", toolbarButtons: "toolbarButtons", toolbarButtonsReportView: "toolbarButtonsReportView", contentDensity: "contentDensity", inlineEditMode: "inlineEditMode", allowInlineEdit: "allowInlineEdit", gridSetting: "gridSetting", viewCollection: "viewCollection", reportView: "reportView", inDialog: "inDialog", isMultiSelect: "isMultiSelect", cls: "cls", hasSelected: "hasSelected" }, outputs: { groupbyClick: "groupbyClick", toggleMultiSelect: "toggleMultiSelect", sortClick: "sortClick", columnClick: "columnClick", editModeClick: "editModeClick", viewClick: "viewClick", createNewInlineMo: "createNewInlineMo" }, viewQueries: [{ propertyName: "_tlbCmp", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "_divTempWidth", first: true, predicate: ["divTempWidth"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    resizeHandler\r\n    [fnResize]=\"onResize\"\r\n    #divTempWidth\r\n></div>\r\n@if (!useLayoutItemTextForControl && !hideToolbar && visibled()) {\r\n<fd-toolbar\r\n    #toolbar\r\n    [shouldOverflow]=\"true\"\r\n    [ngClass]=\"deviceSize\"\r\n    [hasTitle]=\"!hideTitle\"\r\n    [forceOverflow]=\"true\"\r\n    [ngClass]=\"cls\"\r\n    [style.width]=\"ulvWidth()\"\r\n>\r\n    @if(!hideTitle && deviceSize !== 's' ? (title | bbbTranslate) : ''){ @if(icon){\r\n    <fd-icon [glyph]=\"icon\"></fd-icon>\r\n    }\r\n    <h4 fd-title>{{ title | bbbTranslate }}</h4>\r\n    } @if (deviceSize !== 's') {\r\n    <!-- <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer> -->\r\n    } @if (!hideToolbar) {\r\n    <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n    @if (gridSetting && gridSetting.Hidden !== true && !viewSettings?.Grid_DisableColumnHeaders && !viewSettings?.Grid_HideHeader) { @if (deviceSize ===\r\n    's') {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onGroupbySettings()\"\r\n        [label]=\"'Groups' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    @if(allowGridColumnSort){\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onSortSettings()\"\r\n        [label]=\"'Sort' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onColumnSettings()\"\r\n        [label]=\"'Columns' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (deviceSize !== 's') {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        fdOverflowPriority=\"never\"\r\n        [fdOverflowGroup]=\"9\"\r\n        [fdMenu]=\"true\"\r\n        fdType=\"transparent\"\r\n        glyph=\"action-settings\"\r\n        [title]=\"'Settings' | bbbTranslate\"\r\n        [fdMenuTrigger]=\"tableMenuSettings\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n\r\n    <fd-menu #tableMenuSettings>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onMultiSelect()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"checklist\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ isMultiSelect ? ('Single Select' | bbbTranslate) : ('Multi Select' | bbbTranslate) }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onColumnSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"action-settings\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Columns' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        @if(allowGridColumnSort){\r\n\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onSortSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"sort\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Sort' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        }\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onGroupbySettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"group-2\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Groups' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n    </fd-menu>\r\n    } @if (viewCollection && viewCollection.length > 1) {\r\n    <fd-split-button\r\n        fd-toolbar-item\r\n        fdOverflowPriority=\"never\"\r\n        [fdOverflowGroup]=\"10\"\r\n        [fdType]=\"'transparent'\"\r\n        [mainAction]=\"{\r\n            keepMainAction: true,\r\n            mainActionTitle: splitBtnTitle\r\n        }\"\r\n    >\r\n        <fd-menu>\r\n            @for (viewObject of viewCollection; track viewObject) {\r\n            <li fd-menu-item>\r\n                <div fd-menu-interactive (click)=\"onChangeView(viewObject)\" bodyClick>\r\n                    <span fd-menu-title>\r\n                        <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    } @if (allowInlineEdit && access?.Edit) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\r\n        [glyph]=\"'edit'\"\r\n        [label]=\"deviceSize === 's' ? ('Inline Edit In List' | bbbTranslate) : ''\"\r\n        (click)=\"onEditMode()\"\r\n        fdOverflowPriority=\"low\"\r\n        [fdOverflowGroup]=\"11\"\r\n        [title]=\"'Inline Edit In List' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <ng-template #splitBtnTitle>\r\n        <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\r\n    </ng-template>\r\n    <ng-template #splitBtnSettings>\r\n        <fd-icon [glyph]=\"'action-settings'\"></fd-icon>\r\n    </ng-template>\r\n    @for (btn of toolbarButtons | reverse; track _trackBy(i, btn); let i = $index) { @if (btn !== '-' && btn.Command &&\r\n    !btn.Command.CustomUi && !btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"btn.priority\"\r\n        [fdOverflowGroup]=\"btn.priorityGroup\"\r\n        [ulvCommandHandler]=\"btn\"\r\n        [disable]=\"inlineEditMode && btn.itemId === 'New'\"\r\n        [disabled]=\"btn.Command._isEnable === false ? true : false\"\r\n        [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\r\n        [glyph]=\"deviceSize === 's' ? null : btn.newIcon || btn.Command.JsonExtraProp?.Icon\"\r\n        [title]=\"(btn.Command?.IsBuiltin ? btn.text : '') | bbbTranslate\"\r\n        (click)=\"inlineEditMode && btn.itemId === 'New' && createNewInlineMo.emit()\"\r\n        bodyClick\r\n    >\r\n        @if (!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\"/>\r\n        } @if (!btn.hideText || deviceSize === 's') {\r\n        <span>{{ (!btn.text && btn.isCustom ? btn.itemId : btn.text) | bbbTranslate }}</span>\r\n        }\r\n    </button>\r\n    } @if ((btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile') {\r\n    <fd-toolbar-separator fd-toolbar-item></fd-toolbar-separator>\r\n    } @if (btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [fdType]=\"btn.Command?.IsBuiltin ? 'standard' : 'transparent'\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n        bodyClick\r\n    >\r\n        <fd-menu #menu>\r\n            @for (btnCommand of btn.menu.items; track btnCommand) {\r\n            <li fd-menu-item [ulvCommandHandler]=\"btnCommand\" (click)=\"menu.close()\">\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } @if (btn !== '-' && btn.Command && btn.Command.CustomUi) {\r\n    <bnrc-dynamic-form-toolbaritem\r\n        fd-toolbar-item\r\n        [ulvCommandHandler]=\"btn\"\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [component]=\"btn.Command?.CustomUi\"\r\n        [context]=\"btn\"\r\n        [isEnable]=\"btn.Command?._isEnable\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        bodyClick\r\n    ></bnrc-dynamic-form-toolbaritem>\r\n    } } @for (btn of toolbarButtonsReportView | reverse; track btn.id; let i = $index) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"'high'\"\r\n        [fdOverflowGroup]=\"1\"\r\n        [glyph]=\"btn.icon\"\r\n        [title]=\"btn.text | bbbTranslate\"\r\n        [label]=\"btn.hideText ? '' : (btn.text | bbbTranslate)\"\r\n        (click)=\"btn.handler()\"\r\n        [disabled]=\"!btn.isEnable\"\r\n        bodyClick\r\n    ></button>\r\n    } }\r\n</fd-toolbar>\r\n}\r\n", styles: [":host{display:block;width:100%;position:relative}:host fd-toolbar.border-b-0{border-bottom-width:0px!important}: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)}:host fd-toolbar.s ::ng-deep .fd-toolbar{justify-content:end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "disable"], outputs: ["commandClick"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i2.ResizeHandlerDirective, selector: "[resizeHandler]", inputs: ["fnResize"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i7$2.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ReversePipe, name: "reverse" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UlvToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ulv-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    resizeHandler\r\n    [fnResize]=\"onResize\"\r\n    #divTempWidth\r\n></div>\r\n@if (!useLayoutItemTextForControl && !hideToolbar && visibled()) {\r\n<fd-toolbar\r\n    #toolbar\r\n    [shouldOverflow]=\"true\"\r\n    [ngClass]=\"deviceSize\"\r\n    [hasTitle]=\"!hideTitle\"\r\n    [forceOverflow]=\"true\"\r\n    [ngClass]=\"cls\"\r\n    [style.width]=\"ulvWidth()\"\r\n>\r\n    @if(!hideTitle && deviceSize !== 's' ? (title | bbbTranslate) : ''){ @if(icon){\r\n    <fd-icon [glyph]=\"icon\"></fd-icon>\r\n    }\r\n    <h4 fd-title>{{ title | bbbTranslate }}</h4>\r\n    } @if (deviceSize !== 's') {\r\n    <!-- <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer> -->\r\n    } @if (!hideToolbar) {\r\n    <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n    @if (gridSetting && gridSetting.Hidden !== true && !viewSettings?.Grid_DisableColumnHeaders) { @if (deviceSize ===\r\n    's') {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onGroupbySettings()\"\r\n        [label]=\"'Groups' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    @if(allowGridColumnSort){\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onSortSettings()\"\r\n        [label]=\"'Sort' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onColumnSettings()\"\r\n        [label]=\"'Columns' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (deviceSize !== 's') {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        fdOverflowPriority=\"never\"\r\n        [fdOverflowGroup]=\"9\"\r\n        [fdMenu]=\"true\"\r\n        fdType=\"transparent\"\r\n        glyph=\"action-settings\"\r\n        [title]=\"'Settings' | bbbTranslate\"\r\n        [fdMenuTrigger]=\"tableMenuSettings\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n\r\n    <fd-menu #tableMenuSettings>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onMultiSelect()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"checklist\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ isMultiSelect ? ('Single Select' | bbbTranslate) : ('Multi Select' | bbbTranslate) }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onColumnSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"action-settings\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Columns' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        @if(allowGridColumnSort){\r\n\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onSortSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"sort\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Sort' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        }\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onGroupbySettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"group-2\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Groups' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n    </fd-menu>\r\n    } @if (viewCollection && viewCollection.length > 1) {\r\n    <fd-split-button\r\n        fd-toolbar-item\r\n        fdOverflowPriority=\"never\"\r\n        [fdOverflowGroup]=\"10\"\r\n        [fdType]=\"'transparent'\"\r\n        [mainAction]=\"{\r\n            keepMainAction: true,\r\n            mainActionTitle: splitBtnTitle\r\n        }\"\r\n    >\r\n        <fd-menu>\r\n            @for (viewObject of viewCollection; track viewObject) {\r\n            <li fd-menu-item>\r\n                <div fd-menu-interactive (click)=\"onChangeView(viewObject)\" bodyClick>\r\n                    <span fd-menu-title>\r\n                        <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    } @if (allowInlineEdit && access?.Edit) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\r\n        [glyph]=\"'edit'\"\r\n        [label]=\"deviceSize === 's' ? ('Inline Edit In List' | bbbTranslate) : ''\"\r\n        (click)=\"onEditMode()\"\r\n        fdOverflowPriority=\"low\"\r\n        [fdOverflowGroup]=\"11\"\r\n        [title]=\"'Inline Edit In List' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <ng-template #splitBtnTitle>\r\n        <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\r\n    </ng-template>\r\n    <ng-template #splitBtnSettings>\r\n        <fd-icon [glyph]=\"'action-settings'\"></fd-icon>\r\n    </ng-template>\r\n    @for (btn of toolbarButtons | reverse; track _trackBy(i, btn); let i = $index) { @if (btn !== '-' && btn.Command &&\r\n    !btn.Command.CustomUi && !btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"btn.priority\"\r\n        [fdOverflowGroup]=\"btn.priorityGroup\"\r\n        [ulvCommandHandler]=\"btn\"\r\n        [disable]=\"inlineEditMode && btn.itemId === 'New'\"\r\n        [disabled]=\"btn.Command._isEnable === false ? true : false\"\r\n        [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\r\n        [glyph]=\"deviceSize === 's' ? null : btn.newIcon || btn.Command.JsonExtraProp?.Icon\"\r\n        [title]=\"(btn.Command?.IsBuiltin ? btn.text : '') | bbbTranslate\"\r\n        (click)=\"inlineEditMode && btn.itemId === 'New' && createNewInlineMo.emit()\"\r\n        bodyClick\r\n    >\r\n        @if (!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" />\r\n        } @if (!btn.hideText || deviceSize === 's') {\r\n        <span>{{ (!btn.text && btn.isCustom ? btn.itemId : btn.text) | bbbTranslate }}</span>\r\n        }\r\n    </button>\r\n    } @if ((btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile') {\r\n    <fd-toolbar-separator fd-toolbar-item></fd-toolbar-separator>\r\n    } @if (btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [fdType]=\"btn.Command?.IsBuiltin ? 'standard' : 'transparent'\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n        bodyClick\r\n    >\r\n        <fd-menu #menu>\r\n            @for (btnCommand of btn.menu.items; track btnCommand) {\r\n            <li fd-menu-item [ulvCommandHandler]=\"btnCommand\" (click)=\"menu.close()\">\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } @if (btn !== '-' && btn.Command && btn.Command.CustomUi) {\r\n    <bnrc-dynamic-form-toolbaritem\r\n        fd-toolbar-item\r\n        [ulvCommandHandler]=\"btn\"\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [component]=\"btn.Command?.CustomUi\"\r\n        [context]=\"btn\"\r\n        [isEnable]=\"btn.Command?._isEnable\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        bodyClick\r\n    ></bnrc-dynamic-form-toolbaritem>\r\n    } } @for (btn of toolbarButtonsReportView | reverse; track btn.id; let i = $index) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"'high'\"\r\n        [fdOverflowGroup]=\"1\"\r\n        [glyph]=\"btn.icon\"\r\n        [title]=\"btn.text | bbbTranslate\"\r\n        [label]=\"btn.hideText ? '' : (btn.text | bbbTranslate)\"\r\n        (click)=\"btn.handler()\"\r\n        [disabled]=\"!btn.isEnable\"\r\n        bodyClick\r\n    ></button>\r\n    } }\r\n</fd-toolbar>\r\n}\r\n", styles: [":host{display:block;width:100%;position:relative}:host fd-toolbar.border-b-0{border-bottom-width:0px!important}: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)}:host fd-toolbar.s ::ng-deep .fd-toolbar{justify-content:end}\n"] }]
+            args: [{ selector: 'bsu-ulv-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    resizeHandler\r\n    [fnResize]=\"onResize\"\r\n    #divTempWidth\r\n></div>\r\n@if (!useLayoutItemTextForControl && !hideToolbar && visibled()) {\r\n<fd-toolbar\r\n    #toolbar\r\n    [shouldOverflow]=\"true\"\r\n    [ngClass]=\"deviceSize\"\r\n    [hasTitle]=\"!hideTitle\"\r\n    [forceOverflow]=\"true\"\r\n    [ngClass]=\"cls\"\r\n    [style.width]=\"ulvWidth()\"\r\n>\r\n    @if(!hideTitle && deviceSize !== 's' ? (title | bbbTranslate) : ''){ @if(icon){\r\n    <fd-icon [glyph]=\"icon\"></fd-icon>\r\n    }\r\n    <h4 fd-title>{{ title | bbbTranslate }}</h4>\r\n    } @if (deviceSize !== 's') {\r\n    <!-- <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer> -->\r\n    } @if (!hideToolbar) {\r\n    <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n    @if (gridSetting && gridSetting.Hidden !== true && !viewSettings?.Grid_DisableColumnHeaders && !viewSettings?.Grid_HideHeader) { @if (deviceSize ===\r\n    's') {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onGroupbySettings()\"\r\n        [label]=\"'Groups' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    @if(allowGridColumnSort){\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onSortSettings()\"\r\n        [label]=\"'Sort' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        fdOverflowPriority=\"always\"\r\n        [fdOverflowGroup]=\"9\"\r\n        (click)=\"onColumnSettings()\"\r\n        [label]=\"'Columns' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (deviceSize !== 's') {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        fdOverflowPriority=\"never\"\r\n        [fdOverflowGroup]=\"9\"\r\n        [fdMenu]=\"true\"\r\n        fdType=\"transparent\"\r\n        glyph=\"action-settings\"\r\n        [title]=\"'Settings' | bbbTranslate\"\r\n        [fdMenuTrigger]=\"tableMenuSettings\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n\r\n    <fd-menu #tableMenuSettings>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onMultiSelect()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"checklist\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ isMultiSelect ? ('Single Select' | bbbTranslate) : ('Multi Select' | bbbTranslate) }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onColumnSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"action-settings\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Columns' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        @if(allowGridColumnSort){\r\n\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onSortSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"sort\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Sort' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        }\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onGroupbySettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"group-2\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Groups' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n    </fd-menu>\r\n    } @if (viewCollection && viewCollection.length > 1) {\r\n    <fd-split-button\r\n        fd-toolbar-item\r\n        fdOverflowPriority=\"never\"\r\n        [fdOverflowGroup]=\"10\"\r\n        [fdType]=\"'transparent'\"\r\n        [mainAction]=\"{\r\n            keepMainAction: true,\r\n            mainActionTitle: splitBtnTitle\r\n        }\"\r\n    >\r\n        <fd-menu>\r\n            @for (viewObject of viewCollection; track viewObject) {\r\n            <li fd-menu-item>\r\n                <div fd-menu-interactive (click)=\"onChangeView(viewObject)\" bodyClick>\r\n                    <span fd-menu-title>\r\n                        <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    } @if (allowInlineEdit && access?.Edit) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\r\n        [glyph]=\"'edit'\"\r\n        [label]=\"deviceSize === 's' ? ('Inline Edit In List' | bbbTranslate) : ''\"\r\n        (click)=\"onEditMode()\"\r\n        fdOverflowPriority=\"low\"\r\n        [fdOverflowGroup]=\"11\"\r\n        [title]=\"'Inline Edit In List' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <ng-template #splitBtnTitle>\r\n        <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\r\n    </ng-template>\r\n    <ng-template #splitBtnSettings>\r\n        <fd-icon [glyph]=\"'action-settings'\"></fd-icon>\r\n    </ng-template>\r\n    @for (btn of toolbarButtons | reverse; track _trackBy(i, btn); let i = $index) { @if (btn !== '-' && btn.Command &&\r\n    !btn.Command.CustomUi && !btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"btn.priority\"\r\n        [fdOverflowGroup]=\"btn.priorityGroup\"\r\n        [ulvCommandHandler]=\"btn\"\r\n        [disable]=\"inlineEditMode && btn.itemId === 'New'\"\r\n        [disabled]=\"btn.Command._isEnable === false ? true : false\"\r\n        [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\r\n        [glyph]=\"deviceSize === 's' ? null : btn.newIcon || btn.Command.JsonExtraProp?.Icon\"\r\n        [title]=\"(btn.Command?.IsBuiltin ? btn.text : '') | bbbTranslate\"\r\n        (click)=\"inlineEditMode && btn.itemId === 'New' && createNewInlineMo.emit()\"\r\n        bodyClick\r\n    >\r\n        @if (!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\"/>\r\n        } @if (!btn.hideText || deviceSize === 's') {\r\n        <span>{{ (!btn.text && btn.isCustom ? btn.itemId : btn.text) | bbbTranslate }}</span>\r\n        }\r\n    </button>\r\n    } @if ((btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile') {\r\n    <fd-toolbar-separator fd-toolbar-item></fd-toolbar-separator>\r\n    } @if (btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [fdType]=\"btn.Command?.IsBuiltin ? 'standard' : 'transparent'\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n        bodyClick\r\n    >\r\n        <fd-menu #menu>\r\n            @for (btnCommand of btn.menu.items; track btnCommand) {\r\n            <li fd-menu-item [ulvCommandHandler]=\"btnCommand\" (click)=\"menu.close()\">\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } @if (btn !== '-' && btn.Command && btn.Command.CustomUi) {\r\n    <bnrc-dynamic-form-toolbaritem\r\n        fd-toolbar-item\r\n        [ulvCommandHandler]=\"btn\"\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [component]=\"btn.Command?.CustomUi\"\r\n        [context]=\"btn\"\r\n        [isEnable]=\"btn.Command?._isEnable\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        bodyClick\r\n    ></bnrc-dynamic-form-toolbaritem>\r\n    } } @for (btn of toolbarButtonsReportView | reverse; track btn.id; let i = $index) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"'high'\"\r\n        [fdOverflowGroup]=\"1\"\r\n        [glyph]=\"btn.icon\"\r\n        [title]=\"btn.text | bbbTranslate\"\r\n        [label]=\"btn.hideText ? '' : (btn.text | bbbTranslate)\"\r\n        (click)=\"btn.handler()\"\r\n        [disabled]=\"!btn.isEnable\"\r\n        bodyClick\r\n    ></button>\r\n    } }\r\n</fd-toolbar>\r\n}\r\n", styles: [":host{display:block;width:100%;position:relative}:host fd-toolbar.border-b-0{border-bottom-width:0px!important}: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)}:host fd-toolbar.s ::ng-deep .fd-toolbar{justify-content:end}\n"] }]
         }], propDecorators: { _tlbCmp: [{
                 type: ViewChild,
                 args: ['toolbar']
@@ -12955,11 +12944,11 @@ class UiSinglePictureComponent extends FieldBaseComponent {
         this.pos = pos;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiSinglePictureComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiSinglePictureComponent, isStandalone: false, selector: "bsu-ui-single-picture", host: { listeners: { "click": "hostClick($event.target)" } }, usesInheritance: true, ngImport: i0, template: "<div\n    style=\"width: 100%; overflow: hidden\"\n    [style.max-height.px]=\"Setting.SizeMode === 2 ? layoutInfo.ControlBounds.height : null\"\n    [class.center]=\"Setting.SizeMode === 3\"\n>\n    <img\n        [style.max-height.px]=\"Setting.SizeMode === 1 ? layoutInfo.ControlBounds.height : null\"\n        [style.max-width.px]=\"Setting.SizeMode === 1 ? layoutInfo.ControlBounds.width : null\"\n        [src]=\"imageUrl\"\n        [ngClass]=\"Setting.SizeMode === 1 ? 'cover' : 'contain'\"\n    />\n</div>\n", styles: [":host{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.center{vertical-align:middle;text-align:center}.center img{width:auto!important}.cover{max-height:100%;min-height:100%;width:100%;height:100%}.contain{max-height:100%;min-height:100%;width:auto;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UiSinglePictureComponent, isStandalone: false, selector: "bsu-ui-single-picture", host: { listeners: { "click": "hostClick($event.target)" } }, usesInheritance: true, ngImport: i0, template: "<div\n    style=\"width: 100%; overflow: hidden\"\n    [style.max-height.px]=\"Setting.SizeMode === 2 ? layoutInfo.ControlBounds.height : null\"\n    [class.center]=\"Setting.SizeMode === 3\"\n>\n    <img\n        [style.max-height.px]=\"Setting.SizeMode === 1 ? layoutInfo.ControlBounds.height : null\"\n        [style.max-width.px]=\"Setting.SizeMode === 1 ? layoutInfo.ControlBounds.width : null\"\n        [src]=\"imageUrl\"\n        [ngClass]=\"Setting.SizeMode === 1 ? 'cover' : 'contain'\"\n        loading=\"lazy\"\n    />\n</div>\n", styles: [":host{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.center{vertical-align:middle;text-align:center}.center img{width:auto!important}.cover{max-height:100%;min-height:100%;width:100%;height:100%}.contain{max-height:100%;min-height:100%;width:auto;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiSinglePictureComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-single-picture', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n    style=\"width: 100%; overflow: hidden\"\n    [style.max-height.px]=\"Setting.SizeMode === 2 ? layoutInfo.ControlBounds.height : null\"\n    [class.center]=\"Setting.SizeMode === 3\"\n>\n    <img\n        [style.max-height.px]=\"Setting.SizeMode === 1 ? layoutInfo.ControlBounds.height : null\"\n        [style.max-width.px]=\"Setting.SizeMode === 1 ? layoutInfo.ControlBounds.width : null\"\n        [src]=\"imageUrl\"\n        [ngClass]=\"Setting.SizeMode === 1 ? 'cover' : 'contain'\"\n    />\n</div>\n", styles: [":host{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.center{vertical-align:middle;text-align:center}.center img{width:auto!important}.cover{max-height:100%;min-height:100%;width:100%;height:100%}.contain{max-height:100%;min-height:100%;width:auto;height:100%}\n"] }]
+            args: [{ selector: 'bsu-ui-single-picture', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n    style=\"width: 100%; overflow: hidden\"\n    [style.max-height.px]=\"Setting.SizeMode === 2 ? layoutInfo.ControlBounds.height : null\"\n    [class.center]=\"Setting.SizeMode === 3\"\n>\n    <img\n        [style.max-height.px]=\"Setting.SizeMode === 1 ? layoutInfo.ControlBounds.height : null\"\n        [style.max-width.px]=\"Setting.SizeMode === 1 ? layoutInfo.ControlBounds.width : null\"\n        [src]=\"imageUrl\"\n        [ngClass]=\"Setting.SizeMode === 1 ? 'cover' : 'contain'\"\n        loading=\"lazy\"\n    />\n</div>\n", styles: [":host{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.center{vertical-align:middle;text-align:center}.center img{width:auto!important}.cover{max-height:100%;min-height:100%;width:100%;height:100%}.contain{max-height:100%;min-height:100%;width:auto;height:100%}\n"] }]
         }], propDecorators: { hostClick: [{
                 type: HostListener,
                 args: ['click', ['$event.target']]
@@ -13164,11 +13153,11 @@ class UiMultiSelectComboComponent extends FieldBaseComponent {
         this.fireContextEvent('select', this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiMultiSelectComboComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiMultiSelectComboComponent, isStandalone: false, selector: "bsu-ui-multi-select-combo", viewQueries: [{ propertyName: "multiInputComponent", first: true, predicate: MultiInputComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-multi-input\r\n    #multiInput\r\n    inputId=\"multiInput\"\r\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\r\n    [dropdownValues]=\"dataList\"\r\n    [placeholder]=\"'Search' | bbbTranslate\"\r\n    [(ngModel)]=\"selectedItems\"\r\n    [displayFn]=\"displayFunc\"\r\n    [valueFn]=\"valueFunc\"\r\n    [itemTemplate]=\"template\"\r\n    (openChange)=\"onOpenChange($event, multiInput)\"\r\n    (selectedChange)=\"onSelectedChange()\"\r\n    [style.max-width.px]=\"maxWidth\"\r\n></fd-multi-input>\r\n<ng-template #template let-item>\r\n    <div style=\"display: flex; align-items: center\">\r\n        @if (item.url) {\r\n        <img [attrRtl] [src]=\"item.url\" />\r\n        }\r\n        <span fd-list-title>{{ item.txt | bbbTranslate }}</span>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "component", type: i8$4.MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "glyphFont", "dropdownValues", "openDropdownOnAddOnClicked", "addonIconTitle", "searchTerm", "inputId", "highlight", "selected", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "optionItemIdentifier", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "byline", "autoComplete", "open", "displayAddonButton", "addOnButtonAriaLabel"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiMultiSelectComboComponent, isStandalone: false, selector: "bsu-ui-multi-select-combo", viewQueries: [{ propertyName: "multiInputComponent", first: true, predicate: MultiInputComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-multi-input\r\n    #multiInput\r\n    inputId=\"multiInput\"\r\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\r\n    [dropdownValues]=\"dataList\"\r\n    [placeholder]=\"'Search' | bbbTranslate\"\r\n    [(ngModel)]=\"selectedItems\"\r\n    [displayFn]=\"displayFunc\"\r\n    [valueFn]=\"valueFunc\"\r\n    [itemTemplate]=\"template\"\r\n    (openChange)=\"onOpenChange($event, multiInput)\"\r\n    (selectedChange)=\"onSelectedChange()\"\r\n    [style.max-width.px]=\"maxWidth\"\r\n></fd-multi-input>\r\n<ng-template #template let-item>\r\n    <div style=\"display: flex; align-items: center\">\r\n        @if (item.url) {\r\n        <img [attrRtl] [src]=\"item.url\" loading=\"lazy\"/>\r\n        }\r\n        <span fd-list-title>{{ item.txt | bbbTranslate }}</span>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "component", type: i8$4.MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "glyphFont", "dropdownValues", "openDropdownOnAddOnClicked", "addonIconTitle", "searchTerm", "inputId", "highlight", "selected", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "optionItemIdentifier", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "byline", "autoComplete", "open", "displayAddonButton", "addOnButtonAriaLabel"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { 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: "20.0.6", ngImport: i0, type: UiMultiSelectComboComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-multi-select-combo', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-multi-input\r\n    #multiInput\r\n    inputId=\"multiInput\"\r\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\r\n    [dropdownValues]=\"dataList\"\r\n    [placeholder]=\"'Search' | bbbTranslate\"\r\n    [(ngModel)]=\"selectedItems\"\r\n    [displayFn]=\"displayFunc\"\r\n    [valueFn]=\"valueFunc\"\r\n    [itemTemplate]=\"template\"\r\n    (openChange)=\"onOpenChange($event, multiInput)\"\r\n    (selectedChange)=\"onSelectedChange()\"\r\n    [style.max-width.px]=\"maxWidth\"\r\n></fd-multi-input>\r\n<ng-template #template let-item>\r\n    <div style=\"display: flex; align-items: center\">\r\n        @if (item.url) {\r\n        <img [attrRtl] [src]=\"item.url\" />\r\n        }\r\n        <span fd-list-title>{{ item.txt | bbbTranslate }}</span>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}\n"] }]
+            args: [{ selector: 'bsu-ui-multi-select-combo', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-multi-input\r\n    #multiInput\r\n    inputId=\"multiInput\"\r\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\r\n    [dropdownValues]=\"dataList\"\r\n    [placeholder]=\"'Search' | bbbTranslate\"\r\n    [(ngModel)]=\"selectedItems\"\r\n    [displayFn]=\"displayFunc\"\r\n    [valueFn]=\"valueFunc\"\r\n    [itemTemplate]=\"template\"\r\n    (openChange)=\"onOpenChange($event, multiInput)\"\r\n    (selectedChange)=\"onSelectedChange()\"\r\n    [style.max-width.px]=\"maxWidth\"\r\n></fd-multi-input>\r\n<ng-template #template let-item>\r\n    <div style=\"display: flex; align-items: center\">\r\n        @if (item.url) {\r\n        <img [attrRtl] [src]=\"item.url\" loading=\"lazy\"/>\r\n        }\r\n        <span fd-list-title>{{ item.txt | bbbTranslate }}</span>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}\n"] }]
         }], propDecorators: { multiInputComponent: [{
                 type: ViewChild,
                 args: [MultiInputComponent, { static: true }]
@@ -13720,11 +13709,11 @@ class UiPictureFileComponent extends FieldBaseComponent {
         }))));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiPictureFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiPictureFileComponent, isStandalone: false, selector: "bsu-ui-picture-file", inputs: { imageUrl: "imageUrl", sizeMode: "sizeMode", hideUpload: "hideUpload" }, host: { properties: { "class.editable": "this._editable" } }, providers: [UploadService], viewQueries: [{ propertyName: "fileUploadComponent", first: true, predicate: FileUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n    [style.max-height]=\"Setting.SizeMode === '2' ? null : layoutHeight\"\r\n    [class.no-inlineEdit]=\"!inlineEdit\"\r\n    [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n    [class.inlineEdit]=\"inlineEdit\"\r\n>\r\n    @if (!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)) {\r\n    <div>\r\n        <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"value && imageUrl ? false : true\">\r\n            <fd-file-uploader\r\n                #uploader\r\n                fd-toolbar-item\r\n                [style.display]=\"'none'\"\r\n                [id]=\"id\"\r\n                [name]=\"'uploader_' + id\"\r\n                [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n                [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n                [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n                [accept]=\"validExtensions\"\r\n                [(ngModel)]=\"files\"\r\n                [multiple]=\"false\"\r\n                (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            ></fd-file-uploader>\r\n            @if(value && !value?.IsDeleted){\r\n            <button\r\n                fd-button\r\n                fd-toolbar-item\r\n                glyph=\"print\"\r\n                fdType=\"transparent\"\r\n                printFiles\r\n                [files]=\"[{ Id: '0', IsNew: true, IsDeleted: false, Type: 'image', mediaUrl: imageUrl }]\"\r\n            ></button>\r\n            <button\r\n                fd-button\r\n                fd-toolbar-item\r\n                glyph=\"download\"\r\n                fdType=\"transparent\"\r\n                [name]=\"Setting.ControlFieldCaption + value.Ext\"\r\n                [src]=\"imageUrl\"\r\n                saveImage\r\n            ></button>\r\n            }\r\n            <button\r\n                class=\"delete\"\r\n                fd-button\r\n                fd-toolbar-item\r\n                [disabled]=\"!this.value || value?.IsDeleted\"\r\n                glyph=\"delete\"\r\n                [fdType]=\"'transparent'\"\r\n                (click)=\"onFileDeleted(uploader)\"\r\n            ></button>\r\n            @if(!hideUpload){\r\n            <button\r\n                fd-toolbar-item\r\n                fd-button\r\n                [disabled]=\"this.value && value?.IsDeleted !== true\"\r\n                glyph=\"attachment\"\r\n                [fdType]=\"'transparent'\"\r\n                (click)=\"uploader.open()\"\r\n            ></button>\r\n            }\r\n            <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    loadingTpl;\r\n                    context: {\r\n                        uploadingState: uploadingState$ | async\r\n                    }\r\n                \"\r\n            >\r\n            </ng-container>\r\n        </fd-toolbar>\r\n    </div>\r\n    } @if (!inlineEdit) {\r\n    <div\r\n        [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\r\n        [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\r\n        [class.centerImage]=\"Setting.SizeMode === '3'\"\r\n        [style.min-height.px]=\"140\"\r\n    >\r\n        @if (value && imageUrl) {\r\n        <bsu-mask [top]=\"'0px'\"></bsu-mask>\r\n        } @if ((value && imageUrl) || Setting.HasDefaultPicture) {\r\n        <img\r\n            imgLazy\r\n            [imgLazy]=\"imageUrl\"\r\n            [src]=\"imageUrl\"\r\n            [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\r\n            [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\r\n             [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n        />\r\n        }\r\n    </div>\r\n    } @else {\r\n    <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\r\n    }\r\n</div>\r\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\r\n    @if (uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading) {\r\n    <fd-slider\r\n        [(ngModel)]=\"uploadingState.progress\"\r\n        [name]=\"'slider_' + id\"\r\n        fd-toolbar-item\r\n        [id]=\"id + '1'\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n        [step]=\"1\"\r\n    >\r\n    </fd-slider>\r\n    @if (uploadingState.state === 'Uploading') {\r\n    <button fd-toolbar-item fd-button glyph=\"stop\" fdType=\"transparent\" (click)=\"onTerminate()\"></button>\r\n    } @if (uploadingState.state === 'Error') {\r\n    <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRetry()\"></button>\r\n    } }\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;margin-bottom:.25rem;margin-top:.1875rem}:host.editable{border:.0625rem solid var(--sapGroup_TitleBorderColor)}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}img{width:100%}.pic-wrapper{background-repeat:no-repeat;background-position:center}.cover{max-width:100%;max-height:100%;min-height:100%;width:100%;height:100%;background-size:cover}.contain{max-width:100%;max-height:100%;min-height:100%;width:auto;height:100%;background-size:contain}.no-inlineEdit{width:100%;position:relative;display:flex;flex-direction:column}.inlineEdit{width:100%;position:relative;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-start}.centerImage{display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i2.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i2.SaveImageDirective, selector: "[saveImage]", inputs: ["name", "src"] }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i4$7.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: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i11.SliderComponent, selector: "fd-slider", inputs: ["id", "class", "ariaLabelledBy", "ariaLabel", "min", "max", "step", "jump", "tickmarksBetweenLabels", "mode", "showTicks", "showTicksLabels", "customValues", "tooltipMode", "hideProgressBar", "disabled", "vertical", "value"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiPictureFileComponent, isStandalone: false, selector: "bsu-ui-picture-file", inputs: { imageUrl: "imageUrl", sizeMode: "sizeMode", hideUpload: "hideUpload" }, host: { properties: { "class.editable": "this._editable" } }, providers: [UploadService], viewQueries: [{ propertyName: "fileUploadComponent", first: true, predicate: FileUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n    [style.max-height]=\"Setting.SizeMode === '2' ? null : layoutHeight\"\r\n    [class.no-inlineEdit]=\"!inlineEdit\"\r\n    [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n    [class.inlineEdit]=\"inlineEdit\"\r\n>\r\n    @if (!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)) {\r\n    <div>\r\n        <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"value && imageUrl ? false : true\">\r\n            <fd-file-uploader\r\n                #uploader\r\n                fd-toolbar-item\r\n                [style.display]=\"'none'\"\r\n                [id]=\"id\"\r\n                [name]=\"'uploader_' + id\"\r\n                [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n                [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n                [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n                [accept]=\"validExtensions\"\r\n                [(ngModel)]=\"files\"\r\n                [multiple]=\"false\"\r\n                (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            ></fd-file-uploader>\r\n            @if(value && !value?.IsDeleted){\r\n            <button\r\n                fd-button\r\n                fd-toolbar-item\r\n                glyph=\"print\"\r\n                fdType=\"transparent\"\r\n                printFiles\r\n                [files]=\"[{ Id: '0', IsNew: true, IsDeleted: false, Type: 'image', mediaUrl: imageUrl }]\"\r\n            ></button>\r\n            <button\r\n                fd-button\r\n                fd-toolbar-item\r\n                glyph=\"download\"\r\n                fdType=\"transparent\"\r\n                [name]=\"Setting.ControlFieldCaption + value.Ext\"\r\n                [src]=\"imageUrl\"\r\n                saveImage\r\n            ></button>\r\n            }\r\n            <button\r\n                class=\"delete\"\r\n                fd-button\r\n                fd-toolbar-item\r\n                [disabled]=\"!this.value || value?.IsDeleted\"\r\n                glyph=\"delete\"\r\n                [fdType]=\"'transparent'\"\r\n                (click)=\"onFileDeleted(uploader)\"\r\n            ></button>\r\n            @if(!hideUpload){\r\n            <button\r\n                fd-toolbar-item\r\n                fd-button\r\n                [disabled]=\"this.value && value?.IsDeleted !== true\"\r\n                glyph=\"attachment\"\r\n                [fdType]=\"'transparent'\"\r\n                (click)=\"uploader.open()\"\r\n            ></button>\r\n            }\r\n            <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    loadingTpl;\r\n                    context: {\r\n                        uploadingState: uploadingState$ | async\r\n                    }\r\n                \"\r\n            >\r\n            </ng-container>\r\n        </fd-toolbar>\r\n    </div>\r\n    } @if (!inlineEdit) {\r\n    <div\r\n        [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\r\n        [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\r\n        [class.centerImage]=\"Setting.SizeMode === '3'\"\r\n        [style.min-height.px]=\"140\"\r\n    >\r\n        @if (value && imageUrl) {\r\n        <bsu-mask [top]=\"'0px'\"></bsu-mask>\r\n        } @if ((value && imageUrl) || Setting.HasDefaultPicture) {\r\n        <img\r\n            imgLazy\r\n            [imgLazy]=\"imageUrl\"\r\n            [src]=\"imageUrl\"\r\n            [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\r\n            [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\r\n            [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n        />\r\n        }\r\n    </div>\r\n    } @else {\r\n    <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\r\n    }\r\n</div>\r\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\r\n    @if (uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading) {\r\n    <fd-slider\r\n        [(ngModel)]=\"uploadingState.progress\"\r\n        [name]=\"'slider_' + id\"\r\n        fd-toolbar-item\r\n        [id]=\"id + '1'\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n        [step]=\"1\"\r\n    >\r\n    </fd-slider>\r\n    @if (uploadingState.state === 'Uploading') {\r\n    <button fd-toolbar-item fd-button glyph=\"stop\" fdType=\"transparent\" (click)=\"onTerminate()\"></button>\r\n    } @if (uploadingState.state === 'Error') {\r\n    <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRetry()\"></button>\r\n    } }\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;margin-bottom:.25rem;margin-top:.1875rem}:host.editable{border:.0625rem solid var(--sapGroup_TitleBorderColor)}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}img{width:100%}.pic-wrapper{background-repeat:no-repeat;background-position:center}.cover{max-width:100%;max-height:100%;min-height:100%;width:100%;height:100%;background-size:cover}.contain{max-width:100%;max-height:100%;min-height:100%;width:auto;height:100%;background-size:contain}.no-inlineEdit{width:100%;position:relative;display:flex;flex-direction:column}.inlineEdit{width:100%;position:relative;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-start}.centerImage{display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i2.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i2.SaveImageDirective, selector: "[saveImage]", inputs: ["name", "src"] }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i4$7.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: i7$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i11.SliderComponent, selector: "fd-slider", inputs: ["id", "class", "ariaLabelledBy", "ariaLabel", "min", "max", "step", "jump", "tickmarksBetweenLabels", "mode", "showTicks", "showTicksLabels", "customValues", "tooltipMode", "hideProgressBar", "disabled", "vertical", "value"] }, { 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: "20.0.6", ngImport: i0, type: UiPictureFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-picture-file', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UploadService], standalone: false, template: "<div\r\n    [style.max-height]=\"Setting.SizeMode === '2' ? null : layoutHeight\"\r\n    [class.no-inlineEdit]=\"!inlineEdit\"\r\n    [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n    [class.inlineEdit]=\"inlineEdit\"\r\n>\r\n    @if (!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)) {\r\n    <div>\r\n        <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"value && imageUrl ? false : true\">\r\n            <fd-file-uploader\r\n                #uploader\r\n                fd-toolbar-item\r\n                [style.display]=\"'none'\"\r\n                [id]=\"id\"\r\n                [name]=\"'uploader_' + id\"\r\n                [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n                [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n                [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n                [accept]=\"validExtensions\"\r\n                [(ngModel)]=\"files\"\r\n                [multiple]=\"false\"\r\n                (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            ></fd-file-uploader>\r\n            @if(value && !value?.IsDeleted){\r\n            <button\r\n                fd-button\r\n                fd-toolbar-item\r\n                glyph=\"print\"\r\n                fdType=\"transparent\"\r\n                printFiles\r\n                [files]=\"[{ Id: '0', IsNew: true, IsDeleted: false, Type: 'image', mediaUrl: imageUrl }]\"\r\n            ></button>\r\n            <button\r\n                fd-button\r\n                fd-toolbar-item\r\n                glyph=\"download\"\r\n                fdType=\"transparent\"\r\n                [name]=\"Setting.ControlFieldCaption + value.Ext\"\r\n                [src]=\"imageUrl\"\r\n                saveImage\r\n            ></button>\r\n            }\r\n            <button\r\n                class=\"delete\"\r\n                fd-button\r\n                fd-toolbar-item\r\n                [disabled]=\"!this.value || value?.IsDeleted\"\r\n                glyph=\"delete\"\r\n                [fdType]=\"'transparent'\"\r\n                (click)=\"onFileDeleted(uploader)\"\r\n            ></button>\r\n            @if(!hideUpload){\r\n            <button\r\n                fd-toolbar-item\r\n                fd-button\r\n                [disabled]=\"this.value && value?.IsDeleted !== true\"\r\n                glyph=\"attachment\"\r\n                [fdType]=\"'transparent'\"\r\n                (click)=\"uploader.open()\"\r\n            ></button>\r\n            }\r\n            <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    loadingTpl;\r\n                    context: {\r\n                        uploadingState: uploadingState$ | async\r\n                    }\r\n                \"\r\n            >\r\n            </ng-container>\r\n        </fd-toolbar>\r\n    </div>\r\n    } @if (!inlineEdit) {\r\n    <div\r\n        [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\r\n        [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\r\n        [class.centerImage]=\"Setting.SizeMode === '3'\"\r\n        [style.min-height.px]=\"140\"\r\n    >\r\n        @if (value && imageUrl) {\r\n        <bsu-mask [top]=\"'0px'\"></bsu-mask>\r\n        } @if ((value && imageUrl) || Setting.HasDefaultPicture) {\r\n        <img\r\n            imgLazy\r\n            [imgLazy]=\"imageUrl\"\r\n            [src]=\"imageUrl\"\r\n            [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\r\n            [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\r\n             [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n        />\r\n        }\r\n    </div>\r\n    } @else {\r\n    <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\r\n    }\r\n</div>\r\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\r\n    @if (uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading) {\r\n    <fd-slider\r\n        [(ngModel)]=\"uploadingState.progress\"\r\n        [name]=\"'slider_' + id\"\r\n        fd-toolbar-item\r\n        [id]=\"id + '1'\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n        [step]=\"1\"\r\n    >\r\n    </fd-slider>\r\n    @if (uploadingState.state === 'Uploading') {\r\n    <button fd-toolbar-item fd-button glyph=\"stop\" fdType=\"transparent\" (click)=\"onTerminate()\"></button>\r\n    } @if (uploadingState.state === 'Error') {\r\n    <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRetry()\"></button>\r\n    } }\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;margin-bottom:.25rem;margin-top:.1875rem}:host.editable{border:.0625rem solid var(--sapGroup_TitleBorderColor)}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}img{width:100%}.pic-wrapper{background-repeat:no-repeat;background-position:center}.cover{max-width:100%;max-height:100%;min-height:100%;width:100%;height:100%;background-size:cover}.contain{max-width:100%;max-height:100%;min-height:100%;width:auto;height:100%;background-size:contain}.no-inlineEdit{width:100%;position:relative;display:flex;flex-direction:column}.inlineEdit{width:100%;position:relative;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-start}.centerImage{display:flex;justify-content:center}\n"] }]
+            args: [{ selector: 'bsu-ui-picture-file', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UploadService], standalone: false, template: "<div\r\n    [style.max-height]=\"Setting.SizeMode === '2' ? null : layoutHeight\"\r\n    [class.no-inlineEdit]=\"!inlineEdit\"\r\n    [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n    [class.inlineEdit]=\"inlineEdit\"\r\n>\r\n    @if (!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)) {\r\n    <div>\r\n        <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"value && imageUrl ? false : true\">\r\n            <fd-file-uploader\r\n                #uploader\r\n                fd-toolbar-item\r\n                [style.display]=\"'none'\"\r\n                [id]=\"id\"\r\n                [name]=\"'uploader_' + id\"\r\n                [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n                [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n                [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n                [accept]=\"validExtensions\"\r\n                [(ngModel)]=\"files\"\r\n                [multiple]=\"false\"\r\n                (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            ></fd-file-uploader>\r\n            @if(value && !value?.IsDeleted){\r\n            <button\r\n                fd-button\r\n                fd-toolbar-item\r\n                glyph=\"print\"\r\n                fdType=\"transparent\"\r\n                printFiles\r\n                [files]=\"[{ Id: '0', IsNew: true, IsDeleted: false, Type: 'image', mediaUrl: imageUrl }]\"\r\n            ></button>\r\n            <button\r\n                fd-button\r\n                fd-toolbar-item\r\n                glyph=\"download\"\r\n                fdType=\"transparent\"\r\n                [name]=\"Setting.ControlFieldCaption + value.Ext\"\r\n                [src]=\"imageUrl\"\r\n                saveImage\r\n            ></button>\r\n            }\r\n            <button\r\n                class=\"delete\"\r\n                fd-button\r\n                fd-toolbar-item\r\n                [disabled]=\"!this.value || value?.IsDeleted\"\r\n                glyph=\"delete\"\r\n                [fdType]=\"'transparent'\"\r\n                (click)=\"onFileDeleted(uploader)\"\r\n            ></button>\r\n            @if(!hideUpload){\r\n            <button\r\n                fd-toolbar-item\r\n                fd-button\r\n                [disabled]=\"this.value && value?.IsDeleted !== true\"\r\n                glyph=\"attachment\"\r\n                [fdType]=\"'transparent'\"\r\n                (click)=\"uploader.open()\"\r\n            ></button>\r\n            }\r\n            <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    loadingTpl;\r\n                    context: {\r\n                        uploadingState: uploadingState$ | async\r\n                    }\r\n                \"\r\n            >\r\n            </ng-container>\r\n        </fd-toolbar>\r\n    </div>\r\n    } @if (!inlineEdit) {\r\n    <div\r\n        [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\r\n        [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\r\n        [class.centerImage]=\"Setting.SizeMode === '3'\"\r\n        [style.min-height.px]=\"140\"\r\n    >\r\n        @if (value && imageUrl) {\r\n        <bsu-mask [top]=\"'0px'\"></bsu-mask>\r\n        } @if ((value && imageUrl) || Setting.HasDefaultPicture) {\r\n        <img\r\n            imgLazy\r\n            [imgLazy]=\"imageUrl\"\r\n            [src]=\"imageUrl\"\r\n            [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\r\n            [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\r\n            [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n        />\r\n        }\r\n    </div>\r\n    } @else {\r\n    <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\r\n    }\r\n</div>\r\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\r\n    @if (uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading) {\r\n    <fd-slider\r\n        [(ngModel)]=\"uploadingState.progress\"\r\n        [name]=\"'slider_' + id\"\r\n        fd-toolbar-item\r\n        [id]=\"id + '1'\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n        [step]=\"1\"\r\n    >\r\n    </fd-slider>\r\n    @if (uploadingState.state === 'Uploading') {\r\n    <button fd-toolbar-item fd-button glyph=\"stop\" fdType=\"transparent\" (click)=\"onTerminate()\"></button>\r\n    } @if (uploadingState.state === 'Error') {\r\n    <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRetry()\"></button>\r\n    } }\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;margin-bottom:.25rem;margin-top:.1875rem}:host.editable{border:.0625rem solid var(--sapGroup_TitleBorderColor)}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}img{width:100%}.pic-wrapper{background-repeat:no-repeat;background-position:center}.cover{max-width:100%;max-height:100%;min-height:100%;width:100%;height:100%;background-size:cover}.contain{max-width:100%;max-height:100%;min-height:100%;width:auto;height:100%;background-size:contain}.no-inlineEdit{width:100%;position:relative;display:flex;flex-direction:column}.inlineEdit{width:100%;position:relative;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-start}.centerImage{display:flex;justify-content:center}\n"] }]
         }], propDecorators: { fileUploadComponent: [{
                 type: ViewChild,
                 args: [FileUploaderComponent, { static: false }]
@@ -13843,11 +13832,11 @@ class LyLayoutPanelComponent extends LayoutPanelBaseComponent {
         this._cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LyLayoutPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyLayoutPanelComponent, isStandalone: false, selector: "bsu-ly-layout-panel", inputs: { renderItems: "renderItems", isRoot: "isRoot", hideTitle: "hideTitle", notPanelMode: "notPanelMode" }, host: { properties: { "attr.maxLabelWidth": "this.maxLabelWidth", "style.flex": "this.flex", "attr.title": "this.title", "attr.layoutpanel": "this.layoutpanel" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) { @if(!notPanelMode && !parameters?.IsNotPanelMode){\r\n<fd-panel\r\n    [fixed]=\"!config.ExpandButtonVisible\"\r\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\r\n    [attr.maxWidth]=\"maxWidth\"\r\n    [expanded]=\"config.Expanded\"\r\n    [config]=\"config\"\r\n    [hrResponsive]=\"parameters?.HResponsiveSettings\"\r\n>\r\n    @if (!hideTitle && !parameters?.HideHeader) {\r\n    <h5 fd-panel-title>\r\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\r\n            @if (config.FontIcon) {\r\n            <i\r\n                style=\"font-size: 1.5rem\"\r\n                [style.color]=\"config.IconColor || null\"\r\n                [class]=\"'sap-icon--' + config.FontIcon\"\r\n            ></i>\r\n            }\r\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\r\n        </div>\r\n    </h5>\r\n    }\r\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\r\n        <ng-container *ngTemplateOutlet=\"renderControls\"></ng-container>\r\n    </div>\r\n</fd-panel>\r\n} @else {\r\n<div [config]=\"config\" [hrResponsive]=\"parameters?.HResponsiveSettings\" class=\"tw-w-full\">\r\n    <ng-container *ngTemplateOutlet=\"renderControls\"></ng-container>\r\n</div>\r\n} }\r\n<ng-template #renderControls>\r\n    @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutPanelComponent',\r\n                selector: 'bsu-ly-tab-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutPanelComponent',\r\n                selector: 'bsu-ly-layout-panel'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n                name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n                selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LySimpleLabelComponent',\r\n                selector: 'bsu-ly-simple-label'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #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]=\"config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n            (events)=\"onEvents($event)\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start;min-width:0}:host>fd-panel.hide-header ::ng-deep>.fd-panel>.fd-panel__content{border-radius:var(--fdPanel_Content_Border_Top_Left_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Top_Right_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Bottom_Right_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Bottom_Left_Radius, var(--fdPanel_Border_Radius))}.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%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "directive", type: i2.HorizontalResponsiveDirective, selector: "[hrResponsive]", inputs: ["disable", "config", "hrResponsive"] }, { kind: "component", type: i3$6.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$6.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i3$6.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LyLayoutPanelComponent, isStandalone: false, selector: "bsu-ly-layout-panel", inputs: { renderItems: "renderItems", isRoot: "isRoot", hideTitle: "hideTitle", notPanelMode: "notPanelMode" }, host: { properties: { "attr.maxLabelWidth": "this.maxLabelWidth", "style.flex": "this.flex", "attr.title": "this.title", "attr.layoutpanel": "this.layoutpanel" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) { @if(!notPanelMode && !parameters?.IsNotPanelMode){\r\n<fd-panel\r\n    [fixed]=\"!config.ExpandButtonVisible\"\r\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\r\n    [attr.maxWidth]=\"maxWidth\"\r\n    [expanded]=\"config.Expanded\"\r\n    [config]=\"config\"\r\n    [hrResponsive]=\"parameters?.HResponsiveSettings\"\r\n>\r\n    @if (!hideTitle && !parameters?.HideHeader) {\r\n    <h5 fd-panel-title>\r\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\r\n            @if (config.FontIcon) {\r\n            <i\r\n                style=\"font-size: 1.5rem\"\r\n                [style.color]=\"config.IconColor || null\"\r\n                [class]=\"'sap-icon--' + config.FontIcon\"\r\n            ></i>\r\n            }\r\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\r\n        </div>\r\n    </h5>\r\n    }\r\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\r\n        <ng-container *ngTemplateOutlet=\"renderControls\"></ng-container>\r\n    </div>\r\n</fd-panel>\r\n} @else {\r\n<div [config]=\"config\" [hrResponsive]=\"parameters?.HResponsiveSettings\" class=\"tw-w-full\">\r\n    <ng-container *ngTemplateOutlet=\"renderControls\"></ng-container>\r\n</div>\r\n} }\r\n<ng-template #renderControls>\r\n    @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutPanelComponent',\r\n                selector: 'bsu-ly-tab-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutPanelComponent',\r\n                selector: 'bsu-ly-layout-panel'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n                name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n                selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LySimpleLabelComponent',\r\n                selector: 'bsu-ly-simple-label'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" let-name=\"name\" let-module=\"module\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"module || 'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n            (events)=\"onEvents($event)\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start;min-width:0}:host>fd-panel.hide-header ::ng-deep>.fd-panel>.fd-panel__content{border-radius:var(--fdPanel_Content_Border_Top_Left_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Top_Right_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Bottom_Right_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Bottom_Left_Radius, var(--fdPanel_Border_Radius))}.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%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "directive", type: i2.HorizontalResponsiveDirective, selector: "[hrResponsive]", inputs: ["disable", "config", "hrResponsive"] }, { kind: "component", type: i3$6.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$6.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i3$6.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: "20.0.6", ngImport: i0, type: LyLayoutPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-layout-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "@if (visible) { @if(!notPanelMode && !parameters?.IsNotPanelMode){\r\n<fd-panel\r\n    [fixed]=\"!config.ExpandButtonVisible\"\r\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\r\n    [attr.maxWidth]=\"maxWidth\"\r\n    [expanded]=\"config.Expanded\"\r\n    [config]=\"config\"\r\n    [hrResponsive]=\"parameters?.HResponsiveSettings\"\r\n>\r\n    @if (!hideTitle && !parameters?.HideHeader) {\r\n    <h5 fd-panel-title>\r\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\r\n            @if (config.FontIcon) {\r\n            <i\r\n                style=\"font-size: 1.5rem\"\r\n                [style.color]=\"config.IconColor || null\"\r\n                [class]=\"'sap-icon--' + config.FontIcon\"\r\n            ></i>\r\n            }\r\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\r\n        </div>\r\n    </h5>\r\n    }\r\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\r\n        <ng-container *ngTemplateOutlet=\"renderControls\"></ng-container>\r\n    </div>\r\n</fd-panel>\r\n} @else {\r\n<div [config]=\"config\" [hrResponsive]=\"parameters?.HResponsiveSettings\" class=\"tw-w-full\">\r\n    <ng-container *ngTemplateOutlet=\"renderControls\"></ng-container>\r\n</div>\r\n} }\r\n<ng-template #renderControls>\r\n    @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutPanelComponent',\r\n                selector: 'bsu-ly-tab-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutPanelComponent',\r\n                selector: 'bsu-ly-layout-panel'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n                name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n                selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LySimpleLabelComponent',\r\n                selector: 'bsu-ly-simple-label'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #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]=\"config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n            (events)=\"onEvents($event)\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start;min-width:0}:host>fd-panel.hide-header ::ng-deep>.fd-panel>.fd-panel__content{border-radius:var(--fdPanel_Content_Border_Top_Left_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Top_Right_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Bottom_Right_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Bottom_Left_Radius, var(--fdPanel_Border_Radius))}.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%}\n"] }]
+            args: [{ selector: 'bsu-ly-layout-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], standalone: false, template: "@if (visible) { @if(!notPanelMode && !parameters?.IsNotPanelMode){\r\n<fd-panel\r\n    [fixed]=\"!config.ExpandButtonVisible\"\r\n    [class.hide-header]=\"!config.TextVisible || hideTitle\"\r\n    [attr.maxWidth]=\"maxWidth\"\r\n    [expanded]=\"config.Expanded\"\r\n    [config]=\"config\"\r\n    [hrResponsive]=\"parameters?.HResponsiveSettings\"\r\n>\r\n    @if (!hideTitle && !parameters?.HideHeader) {\r\n    <h5 fd-panel-title>\r\n        <div style=\"display: flex; gap: 0.5rem; align-items: center\">\r\n            @if (config.FontIcon) {\r\n            <i\r\n                style=\"font-size: 1.5rem\"\r\n                [style.color]=\"config.IconColor || null\"\r\n                [class]=\"'sap-icon--' + config.FontIcon\"\r\n            ></i>\r\n            }\r\n            <span>{{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}</span>\r\n        </div>\r\n    </h5>\r\n    }\r\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\r\n        <ng-container *ngTemplateOutlet=\"renderControls\"></ng-container>\r\n    </div>\r\n</fd-panel>\r\n} @else {\r\n<div [config]=\"config\" [hrResponsive]=\"parameters?.HResponsiveSettings\" class=\"tw-w-full\">\r\n    <ng-container *ngTemplateOutlet=\"renderControls\"></ng-container>\r\n</div>\r\n} }\r\n<ng-template #renderControls>\r\n    @for (item of config | filterToolbarControl; track item.id) { @switch (item.xtype) { @case ('Ly.LayoutTabPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutPanelComponent',\r\n                selector: 'bsu-ly-tab-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\r\n    } @case ('Ly.LayoutPanel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutPanelComponent',\r\n                selector: 'bsu-ly-layout-panel'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\r\n    } @case ('Ly.LayoutContainer') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LyLayoutContainerComponent',\r\n                selector: 'bsu-ly-layout-container'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n    } @case ('Ly.EmptySpace') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                module: item.Type === 'SplitterItem' ? 'BarsaNovinRayCore' : '',\r\n                name: item.Type === 'SplitterItem' ? 'SplitterComponent' : 'LyEmptySpaceComponent',\r\n                selector: item.Type === 'SplitterItem' ? 'bnrc-splitter' : 'bsu-ly-empty-space'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n    } @case ('Ly.SimpleLabel') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                name: 'LySimpleLabelComponent',\r\n                selector: 'bsu-ly-simple-label'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\r\n    } @case ('Ly.LayoutLine') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n    } @case ('Ly.LayoutJoin') { @if (item.Type === 'HorizontalJoin') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-horizontal-layout',\r\n                name: 'LyLayoutHorizontalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n    } @else {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-ly-vertical-layout',\r\n                name: 'LyLayoutVerticalComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n    } } @case ('Ly.LayoutControl') {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            dynamicLayout;\r\n            context: {\r\n                $implicit: item,\r\n                selector: 'bsu-layout-control',\r\n                name: 'LayoutControlComponent'\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n    } } }\r\n    <ng-template #dynamicLayout let-config let-selector=\"selector\" let-maxLabelWidth=\"maxLabelWidth\" let-name=\"name\" let-module=\"module\">\r\n        <bnrc-dynamic-layout\r\n            [config]=\"config\"\r\n            [selector]=\"selector\"\r\n            [name]=\"name\"\r\n            [module]=\"module || 'BarsaSapUi'\"\r\n            [moduleFileName]=\"'BarsaSapUi'\"\r\n            [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n            [flex]=\"config.Bounds.width\"\r\n            [isSearchPanel]=\"isSearchPanel\"\r\n            (events)=\"onEvents($event)\"\r\n        >\r\n        </bnrc-dynamic-layout>\r\n    </ng-template>\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start;min-width:0}:host>fd-panel.hide-header ::ng-deep>.fd-panel>.fd-panel__content{border-radius:var(--fdPanel_Content_Border_Top_Left_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Top_Right_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Bottom_Right_Radius, var(--fdPanel_Border_Radius)) var(--fdPanel_Content_Border_Bottom_Left_Radius, var(--fdPanel_Border_Radius))}.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%}\n"] }]
         }], propDecorators: { renderItems: [{
                 type: Input
             }], isRoot: [{
@@ -13979,11 +13968,11 @@ class UiSimpleComboComponent extends FieldBaseComponent {
         this.fireContextEvent('select', this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiSimpleComboComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiSimpleComboComponent, isStandalone: false, selector: "bsu-ui-simple-combo", inputs: { MinSize: "MinSize" }, viewQueries: [{ propertyName: "fdComboRef", first: true, predicate: ComboboxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (Setting.IconDisplayType !== 'Image' && !popupMode) {\r\n<!-- <fd-select\r\n    style=\"width: 100%\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [value]=\"value\"\r\n    [mobile]=\"(deviceSize$ | async) === 's'\"\r\n    [mobileConfig]=\"mobileConfig\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n>\r\n    @for (item of context.store.data[context.store.root]; track item) {\r\n    <fd-option\r\n        [value]=\"item.id\"\r\n        [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n        [class.control-disabled]=\"item.IsEmpty\"\r\n        [class.list-empty-item]=\"item.IsEmpty\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, popupMode: true }\"></ng-container>\r\n    </fd-option>\r\n    }\r\n</fd-select> -->\r\n<fd-combobox\r\n    [inputId]=\"id\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [displayFn]=\"displayFn\"\r\n    [(ngModel)]=\"tvalue\"\r\n    [readOnly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n    [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [class.ltr]=\"Setting.IsLtr === true\"\r\n    [fillOnSelect]=\"true\"\r\n    [dropdownValues]=\"context.store.data[context.store.root]\"\r\n    (itemClicked)=\"onItemClick($event)\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-container *fdComboboxItem=\"let item; use: rowDataOption; inputText as search\">\r\n        <!-- Note that in this case you are responsible for highlighting. -->\r\n        @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n        <img fd-list-icon [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n        } } @if (Setting.IconDisplayType !== 'Image') {\r\n        <span fd-list-title [innerHTML]=\"item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate)\"></span>\r\n        }\r\n    </ng-container>\r\n</fd-combobox>\r\n} @if (Setting.IconDisplayType === 'Image' || popupMode) {\r\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\r\n    <fd-popover-control>\r\n        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n            @if (value && value !== '0') {\r\n            <img [src]=\"value | comboRowImg: context.store.data.Rows\" />\r\n            }\r\n        </button>\r\n    </fd-popover-control>\r\n    <fd-popover-body class=\"combo-popupmode\">\r\n        @for (item of context.store.data[context.store.root]; track item) {\r\n        <button fd-button fdType=\"transparent\" [title]=\"item.txt\" (click)=\"popover.close(); onValueChange(item.id)\">\r\n            @if (item.url) {\r\n            <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n            }\r\n        </button>\r\n        }\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\n<ng-template #itemTemplate let-item let-popupMode=\"popupMode\">\r\n    @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n    <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n    } } @if (Setting.IconDisplayType !== 'Image') {\r\n    {{ item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate) }}\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:flex;align-self:center;align-items:center;width:100%;height:100%}:host ::ng-deep fd-select fd-popover{width:100%}:host fd-combobox{width:100%}:host fd-combobox ::ng-deep fd-popover{width:100%}:host fd-combobox ::ng-deep .ltr input{text-align:left!important}:host ::ng-deep .fd-popover-custom{width:100%}:host ::ng-deep fd-combobox-mobile fd-dialog-footer{position:absolute;bottom:0;width:100%}:host ::ng-deep fd-combobox-mobile .fd-dialog__content.fd-dialog__content--mobile{width:80svw;height:60svh}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}fd-popover{margin:.25rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i4$8.ComboboxComponent, selector: "fd-combobox", inputs: ["comboboxId", "inputId", "ariaLabel", "ariaLabelledBy", "required", "dropdownValues", "filterFn", "disabled", "placeholder", "isSearch", "glyph", "glyphFont", "showClearButton", "triggers", "closeOnOutsideClick", "openOnKeyboardEvent", "state", "itemTemplate", "groupFn", "maxHeight", "dropDownMaxWidthPx", "noDropDownMaxWidth", "width", "searchFn", "highlighting", "closeOnSelect", "fillOnSelect", "autoComplete", "fillControlMode", "communicateByObject", "displayFn", "buttonFocusable", "clearButtonFocusable", "readOnly", "mobile", "mobileConfig", "showDropdownButton", "includes", "title", "byline", "tabOutStrategy"], outputs: ["itemClicked", "openChange", "inputTextChange"] }, { kind: "directive", type: i4$8.ComboboxItemDirective, selector: "[fdComboboxItem]", inputs: ["fdComboboxItemUse"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ComboRowImagePipe, name: "comboRowImg" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiSimpleComboComponent, isStandalone: false, selector: "bsu-ui-simple-combo", inputs: { MinSize: "MinSize" }, viewQueries: [{ propertyName: "fdComboRef", first: true, predicate: ComboboxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (Setting.IconDisplayType !== 'Image' && !popupMode) {\r\n<!-- <fd-select\r\n    style=\"width: 100%\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [value]=\"value\"\r\n    [mobile]=\"(deviceSize$ | async) === 's'\"\r\n    [mobileConfig]=\"mobileConfig\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n>\r\n    @for (item of context.store.data[context.store.root]; track item) {\r\n    <fd-option\r\n        [value]=\"item.id\"\r\n        [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n        [class.control-disabled]=\"item.IsEmpty\"\r\n        [class.list-empty-item]=\"item.IsEmpty\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, popupMode: true }\"></ng-container>\r\n    </fd-option>\r\n    }\r\n</fd-select> -->\r\n<fd-combobox\r\n    [inputId]=\"id\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [displayFn]=\"displayFn\"\r\n    [(ngModel)]=\"tvalue\"\r\n    [readOnly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n    [showDropdownButton]=\"(disableOrReadonly$ | async) === true ? false : true\"\r\n    [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [class.ltr]=\"Setting.IsLtr === true\"\r\n    [fillOnSelect]=\"true\"\r\n    [dropdownValues]=\"context.store.data[context.store.root]\"\r\n    (itemClicked)=\"onItemClick($event)\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-container *fdComboboxItem=\"let item; use: rowDataOption; inputText as search\">\r\n        <!-- Note that in this case you are responsible for highlighting. -->\r\n        @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n        <img fd-list-icon [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" loading=\"lazy\"/>\r\n        } } @if (Setting.IconDisplayType !== 'Image') {\r\n        <span fd-list-title [innerHTML]=\"item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate)\"></span>\r\n        }\r\n    </ng-container>\r\n</fd-combobox>\r\n} @if (Setting.IconDisplayType === 'Image' || popupMode) {\r\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\r\n    <fd-popover-control>\r\n        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n            @if (value && value !== '0') {\r\n            <img [src]=\"value | comboRowImg: context.store.data.Rows\" loading=\"lazy\"/>\r\n            }\r\n        </button>\r\n    </fd-popover-control>\r\n    <fd-popover-body class=\"combo-popupmode\">\r\n        @for (item of context.store.data[context.store.root]; track item) {\r\n        <button fd-button fdType=\"transparent\" [title]=\"item.txt\" (click)=\"popover.close(); onValueChange(item.id)\">\r\n            @if (item.url) {\r\n            <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" loading=\"lazy\"/>\r\n            }\r\n        </button>\r\n        }\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\n<ng-template #itemTemplate let-item let-popupMode=\"popupMode\">\r\n    @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n    <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" loading=\"lazy\"/>\r\n    } } @if (Setting.IconDisplayType !== 'Image') {\r\n    {{ item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate) }}\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:flex;align-self:center;align-items:center;width:100%;height:100%}:host ::ng-deep fd-select fd-popover{width:100%}:host fd-combobox{width:100%}:host fd-combobox ::ng-deep fd-popover{width:100%}:host fd-combobox ::ng-deep .ltr input{text-align:left!important}:host ::ng-deep .fd-popover-custom{width:100%}:host ::ng-deep fd-combobox-mobile fd-dialog-footer{position:absolute;bottom:0;width:100%}:host ::ng-deep fd-combobox-mobile .fd-dialog__content.fd-dialog__content--mobile{width:80svw;height:60svh}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}fd-popover{margin:.25rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i4$8.ComboboxComponent, selector: "fd-combobox", inputs: ["comboboxId", "inputId", "ariaLabel", "ariaLabelledBy", "required", "dropdownValues", "filterFn", "disabled", "placeholder", "isSearch", "glyph", "glyphFont", "showClearButton", "triggers", "closeOnOutsideClick", "openOnKeyboardEvent", "state", "itemTemplate", "groupFn", "maxHeight", "dropDownMaxWidthPx", "noDropDownMaxWidth", "width", "searchFn", "highlighting", "closeOnSelect", "fillOnSelect", "autoComplete", "fillControlMode", "communicateByObject", "displayFn", "buttonFocusable", "clearButtonFocusable", "readOnly", "mobile", "mobileConfig", "showDropdownButton", "includes", "title", "byline", "tabOutStrategy"], outputs: ["itemClicked", "openChange", "inputTextChange"] }, { kind: "directive", type: i4$8.ComboboxItemDirective, selector: "[fdComboboxItem]", inputs: ["fdComboboxItemUse"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ComboRowImagePipe, name: "comboRowImg" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiSimpleComboComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-simple-combo', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (Setting.IconDisplayType !== 'Image' && !popupMode) {\r\n<!-- <fd-select\r\n    style=\"width: 100%\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [value]=\"value\"\r\n    [mobile]=\"(deviceSize$ | async) === 's'\"\r\n    [mobileConfig]=\"mobileConfig\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n>\r\n    @for (item of context.store.data[context.store.root]; track item) {\r\n    <fd-option\r\n        [value]=\"item.id\"\r\n        [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n        [class.control-disabled]=\"item.IsEmpty\"\r\n        [class.list-empty-item]=\"item.IsEmpty\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, popupMode: true }\"></ng-container>\r\n    </fd-option>\r\n    }\r\n</fd-select> -->\r\n<fd-combobox\r\n    [inputId]=\"id\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [displayFn]=\"displayFn\"\r\n    [(ngModel)]=\"tvalue\"\r\n    [readOnly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n    [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [class.ltr]=\"Setting.IsLtr === true\"\r\n    [fillOnSelect]=\"true\"\r\n    [dropdownValues]=\"context.store.data[context.store.root]\"\r\n    (itemClicked)=\"onItemClick($event)\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-container *fdComboboxItem=\"let item; use: rowDataOption; inputText as search\">\r\n        <!-- Note that in this case you are responsible for highlighting. -->\r\n        @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n        <img fd-list-icon [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n        } } @if (Setting.IconDisplayType !== 'Image') {\r\n        <span fd-list-title [innerHTML]=\"item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate)\"></span>\r\n        }\r\n    </ng-container>\r\n</fd-combobox>\r\n} @if (Setting.IconDisplayType === 'Image' || popupMode) {\r\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\r\n    <fd-popover-control>\r\n        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n            @if (value && value !== '0') {\r\n            <img [src]=\"value | comboRowImg: context.store.data.Rows\" />\r\n            }\r\n        </button>\r\n    </fd-popover-control>\r\n    <fd-popover-body class=\"combo-popupmode\">\r\n        @for (item of context.store.data[context.store.root]; track item) {\r\n        <button fd-button fdType=\"transparent\" [title]=\"item.txt\" (click)=\"popover.close(); onValueChange(item.id)\">\r\n            @if (item.url) {\r\n            <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n            }\r\n        </button>\r\n        }\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\n<ng-template #itemTemplate let-item let-popupMode=\"popupMode\">\r\n    @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n    <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" />\r\n    } } @if (Setting.IconDisplayType !== 'Image') {\r\n    {{ item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate) }}\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:flex;align-self:center;align-items:center;width:100%;height:100%}:host ::ng-deep fd-select fd-popover{width:100%}:host fd-combobox{width:100%}:host fd-combobox ::ng-deep fd-popover{width:100%}:host fd-combobox ::ng-deep .ltr input{text-align:left!important}:host ::ng-deep .fd-popover-custom{width:100%}:host ::ng-deep fd-combobox-mobile fd-dialog-footer{position:absolute;bottom:0;width:100%}:host ::ng-deep fd-combobox-mobile .fd-dialog__content.fd-dialog__content--mobile{width:80svw;height:60svh}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}fd-popover{margin:.25rem 0}\n"] }]
+            args: [{ selector: 'bsu-ui-simple-combo', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (Setting.IconDisplayType !== 'Image' && !popupMode) {\r\n<!-- <fd-select\r\n    style=\"width: 100%\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [value]=\"value\"\r\n    [mobile]=\"(deviceSize$ | async) === 's'\"\r\n    [mobileConfig]=\"mobileConfig\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [style.text-align]=\"Setting.IsLtr === true ? 'left' : null\"\r\n    [readonly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n>\r\n    @for (item of context.store.data[context.store.root]; track item) {\r\n    <fd-option\r\n        [value]=\"item.id\"\r\n        [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n        [class.control-disabled]=\"item.IsEmpty\"\r\n        [class.list-empty-item]=\"item.IsEmpty\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, popupMode: true }\"></ng-container>\r\n    </fd-option>\r\n    }\r\n</fd-select> -->\r\n<fd-combobox\r\n    [inputId]=\"id\"\r\n    [placeholder]=\"'Select' | bbbTranslate\"\r\n    [displayFn]=\"displayFn\"\r\n    [(ngModel)]=\"tvalue\"\r\n    [readOnly]=\"(readonly$ | async) === true ? true : false\"\r\n    [disabled]=\"(disable$ | async) === true ? true : false\"\r\n    [showDropdownButton]=\"(disableOrReadonly$ | async) === true ? false : true\"\r\n    [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : null\"\r\n    [class.ltr]=\"Setting.IsLtr === true\"\r\n    [fillOnSelect]=\"true\"\r\n    [dropdownValues]=\"context.store.data[context.store.root]\"\r\n    (itemClicked)=\"onItemClick($event)\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-container *fdComboboxItem=\"let item; use: rowDataOption; inputText as search\">\r\n        <!-- Note that in this case you are responsible for highlighting. -->\r\n        @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n        <img fd-list-icon [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" loading=\"lazy\"/>\r\n        } } @if (Setting.IconDisplayType !== 'Image') {\r\n        <span fd-list-title [innerHTML]=\"item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate)\"></span>\r\n        }\r\n    </ng-container>\r\n</fd-combobox>\r\n} @if (Setting.IconDisplayType === 'Image' || popupMode) {\r\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\r\n    <fd-popover-control>\r\n        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n            @if (value && value !== '0') {\r\n            <img [src]=\"value | comboRowImg: context.store.data.Rows\" loading=\"lazy\"/>\r\n            }\r\n        </button>\r\n    </fd-popover-control>\r\n    <fd-popover-body class=\"combo-popupmode\">\r\n        @for (item of context.store.data[context.store.root]; track item) {\r\n        <button fd-button fdType=\"transparent\" [title]=\"item.txt\" (click)=\"popover.close(); onValueChange(item.id)\">\r\n            @if (item.url) {\r\n            <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" loading=\"lazy\"/>\r\n            }\r\n        </button>\r\n        }\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\n<ng-template #itemTemplate let-item let-popupMode=\"popupMode\">\r\n    @if (Setting.IconDisplayType !== 'NoImage') { @if (item.url) {\r\n    <img [attrRtl]=\"Setting.IsLtr === true ? false : undefined\" [src]=\"item.url\" loading=\"lazy\"/>\r\n    } } @if (Setting.IconDisplayType !== 'Image') {\r\n    {{ item.IsEmpty ? ('Select' | bbbTranslate) : (item.txt | bbbTranslate) }}\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:flex;align-self:center;align-items:center;width:100%;height:100%}:host ::ng-deep fd-select fd-popover{width:100%}:host fd-combobox{width:100%}:host fd-combobox ::ng-deep fd-popover{width:100%}:host fd-combobox ::ng-deep .ltr input{text-align:left!important}:host ::ng-deep .fd-popover-custom{width:100%}:host ::ng-deep fd-combobox-mobile fd-dialog-footer{position:absolute;bottom:0;width:100%}:host ::ng-deep fd-combobox-mobile .fd-dialog__content.fd-dialog__content--mobile{width:80svw;height:60svh}img[rtl=true]{margin-left:5px}img[rtl=false]{margin-right:5px}fd-popover{margin:.25rem 0}\n"] }]
         }], propDecorators: { fdComboRef: [{
                 type: ViewChild,
                 args: [ComboboxComponent]
@@ -14367,11 +14356,11 @@ class BarsaNetworkOfflineComponent extends BaseComponent {
         this._dialogRef = this._dialogService.open(this.dialogContainer, dialogConfig);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaNetworkOfflineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BarsaNetworkOfflineComponent, isStandalone: false, selector: "bsu-barsa-network-offline", viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\r\n        <fd-dialog-header>\r\n            <h1 fd-title>{{ 'ErrorInConnection' | bbbTranslate }}</h1>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body class=\"offline-wrapper\">\r\n            <img src=\"assets/svg/offline-internet-icon.svg\" />\r\n            <div>\r\n                <h3 fd-title>{{ 'NetworkOffline' | bbbTranslate }}</h3>\r\n                <fd-text [text]=\"'NetworkOfflineDescription' | bbbTranslate\"></fd-text>\r\n            </div>\r\n        </fd-dialog-body>\r\n        <fd-dialog-footer>\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div fd-bar-right>\r\n                    <fd-button-bar\r\n                        fdType=\"emphasized\"\r\n                        [label]=\"'Continue' | bbbTranslate\"\r\n                        (click)=\"dialog.dismiss('Close button')\"\r\n                    >\r\n                    </fd-button-bar>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [".offline-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BarsaNetworkOfflineComponent, isStandalone: false, selector: "bsu-barsa-network-offline", viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\r\n        <fd-dialog-header>\r\n            <h1 fd-title>{{ 'ErrorInConnection' | bbbTranslate }}</h1>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body class=\"offline-wrapper\">\r\n            <img src=\"assets/svg/offline-internet-icon.svg\" loading=\"lazy\"/>\r\n            <div>\r\n                <h3 fd-title>{{ 'NetworkOffline' | bbbTranslate }}</h3>\r\n                <fd-text [text]=\"'NetworkOfflineDescription' | bbbTranslate\"></fd-text>\r\n            </div>\r\n        </fd-dialog-body>\r\n        <fd-dialog-footer>\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div fd-bar-right>\r\n                    <fd-button-bar\r\n                        fdType=\"emphasized\"\r\n                        [label]=\"'Continue' | bbbTranslate\"\r\n                        (click)=\"dialog.dismiss('Close button')\"\r\n                    >\r\n                    </fd-button-bar>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [".offline-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaNetworkOfflineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-network-offline', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\r\n        <fd-dialog-header>\r\n            <h1 fd-title>{{ 'ErrorInConnection' | bbbTranslate }}</h1>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body class=\"offline-wrapper\">\r\n            <img src=\"assets/svg/offline-internet-icon.svg\" />\r\n            <div>\r\n                <h3 fd-title>{{ 'NetworkOffline' | bbbTranslate }}</h3>\r\n                <fd-text [text]=\"'NetworkOfflineDescription' | bbbTranslate\"></fd-text>\r\n            </div>\r\n        </fd-dialog-body>\r\n        <fd-dialog-footer>\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div fd-bar-right>\r\n                    <fd-button-bar\r\n                        fdType=\"emphasized\"\r\n                        [label]=\"'Continue' | bbbTranslate\"\r\n                        (click)=\"dialog.dismiss('Close button')\"\r\n                    >\r\n                    </fd-button-bar>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [".offline-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: 'bsu-barsa-network-offline', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\r\n        <fd-dialog-header>\r\n            <h1 fd-title>{{ 'ErrorInConnection' | bbbTranslate }}</h1>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body class=\"offline-wrapper\">\r\n            <img src=\"assets/svg/offline-internet-icon.svg\" loading=\"lazy\"/>\r\n            <div>\r\n                <h3 fd-title>{{ 'NetworkOffline' | bbbTranslate }}</h3>\r\n                <fd-text [text]=\"'NetworkOfflineDescription' | bbbTranslate\"></fd-text>\r\n            </div>\r\n        </fd-dialog-body>\r\n        <fd-dialog-footer>\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div fd-bar-right>\r\n                    <fd-button-bar\r\n                        fdType=\"emphasized\"\r\n                        [label]=\"'Continue' | bbbTranslate\"\r\n                        (click)=\"dialog.dismiss('Close button')\"\r\n                    >\r\n                    </fd-button-bar>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [".offline-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dialogContainer: [{
                 type: ViewChild,
                 args: ['container', { read: TemplateRef }]
@@ -14631,7 +14620,7 @@ class BarsaPishnamayeshPayamComponent extends FieldBaseComponent {
                 useFactory: getDateService$1,
                 deps: [LogService]
             }
-        ], usesInheritance: true, ngImport: i0, template: "@if (data) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        showPayamClass;\r\n        context: {\r\n            $implicit: data,\r\n            primary: !data?.$details?.length,\r\n            isFirst: true\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n}\r\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            namayeshPayam;\r\n            context: {\r\n                $implicit: data.payam.Subject,\r\n                mailNoText: data.payam.MailNoText,\r\n                fromText: data.payam.FromText,\r\n                toText: data.$toText,\r\n                importance: data.$importance,\r\n                readDate: data.$readDate,\r\n                sendDate: data.$sendDate,\r\n                ccText: data.$ccText,\r\n                bccText: data.$bccText,\r\n                accessLevel: data.$accessLevel,\r\n                content: data.$content,\r\n                fromPhoto: data.$fromPhoto,\r\n                details: data.$details,\r\n                attachments: data.$attachments,\r\n                todo: data.$todo,\r\n                customText: data.payam.CustomText,\r\n                primary: primary,\r\n                isFirst: isFirst\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #namayeshPayam\r\n    let-subject\r\n    let-mailNoText=\"mailNoText\"\r\n    let-content=\"content\"\r\n    let-fromText=\"fromText\"\r\n    let-toText=\"toText\"\r\n    let-importance=\"importance\"\r\n    let-readDate=\"readDate\"\r\n    let-sendDate=\"sendDate\"\r\n    let-ccText=\"ccText\"\r\n    let-bccText=\"bccText\"\r\n    let-fromPhoto=\"fromPhoto\"\r\n    let-details=\"details\"\r\n    let-accessLevel=\"accessLevel\"\r\n    let-primary=\"primary\"\r\n    let-isFirst=\"isFirst\"\r\n    let-attachments=\"attachments\"\r\n    let-todo=\"todo\"\r\n    let-customText=\"customText\"\r\n>\r\n    <fd-card cardType=\"object\">\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <fd-avatar\r\n                    [image]=\"fromPhoto\"\r\n                    [circle]=\"true\"\r\n                    size=\"s\"\r\n                    [ariaLabel]=\"fromText\"\r\n                    [label]=\"fromText\"\r\n                    [title]=\"fromText\"\r\n                ></fd-avatar>\r\n                <div fd-card-title class=\"header-fields\">\r\n                    <h5 fd-title>\r\n                        <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\r\n                    </h5>\r\n                    <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\r\n                </div>\r\n                <div fd-card-subtitle>\r\n                    <h5 fd-title>\r\n                        {{ subject }} @if(mailNoText){ <span>({{ mailNoText }})</span>}\r\n                    </h5>\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Recievers' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of toText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </div>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content>\r\n            <fd-panel [expanded]=\"isFirst\">\r\n                <div fd-panel-title >\r\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\r\n                    <div class=\"payamIcons\">\r\n                        @if (importance.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ importance.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (accessLevel.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (todo) {\r\n                        <fd-info-label [label]=\"todo.text\" [color]=\"todo.color\" [title]=\"todo.text\"></fd-info-label>\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <div fd-panel-content>\r\n                    @if (customText) {\r\n                    <div>\r\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\r\n                            {{ customText }}\r\n                        </fd-message-strip>\r\n                    </div>\r\n                    }\r\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\r\n\r\n                    @if (attachments?.length) {\r\n                    <div class=\"file-viewer-attachments\">\r\n                        @for (file of attachments; track file;let index=$index) { @if (!file.IsDeleted) {\r\n                        <bsu-file-viewer-popover\r\n                            [file]=\"file\"\r\n                            [index]=\"index\"\r\n                            [files]=\"attachments\"\r\n                            [deviceSize]=\"(deviceSize$ | async)!!\"\r\n                            [canDownload]=\"true\"\r\n                            [disableRemove]=\"true\"\r\n                        ></bsu-file-viewer-popover>\r\n                        } } @if (attachments.length > 1) {\r\n                        <button\r\n                            fd-button\r\n                            [title]=\"'Download' | bbbTranslate\"\r\n                            [glyph]=\"'download'\"\r\n                            downloadFiles\r\n                            [files]=\"attachments\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                    }\r\n                    <div class=\"readAt\">\r\n                        @if (readDate) {\r\n                        <fd-object-identifier [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\">\r\n                        </fd-object-identifier>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-panel>\r\n        </fd-card-content>\r\n        <!-- <fd-card-footer>\r\n    <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\r\n  </fd-card-footer> -->\r\n    </fd-card>\r\n    @for (detail of details; track detail) {\r\n    <ng-contianer>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                showPayamClass;\r\n                context: {\r\n                    $implicit: detail\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n    </ng-contianer>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start;height:auto;max-height:initial}:host ::ng-deep .fd-card__subtitle h5{white-space:initial!important}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}:host ::ng-deep ol{list-style:auto;margin:unset;padding:revert}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media (max-width: 410px){h5{max-width:210px}}@media (max-width: 1040px){.h5{max-width:600px}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$3.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$3.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i7$3.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i6$1.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "ariaLabelledBy", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i10$1.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["description", "bold", "medium"] }, { kind: "component", type: i3$6.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$6.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i3$6.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "index", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files", "nozip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (data) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        showPayamClass;\r\n        context: {\r\n            $implicit: data,\r\n            primary: !data?.$details?.length,\r\n            isFirst: true\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n}\r\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            namayeshPayam;\r\n            context: {\r\n                $implicit: data.payam.Subject,\r\n                mailNoText: data.payam.MailNoText,\r\n                fromText: data.payam.FromText,\r\n                toText: data.$toText,\r\n                importance: data.$importance,\r\n                readDate: data.$readDate,\r\n                sendDate: data.$sendDate,\r\n                ccText: data.$ccText,\r\n                bccText: data.$bccText,\r\n                accessLevel: data.$accessLevel,\r\n                content: data.$content,\r\n                fromPhoto: data.$fromPhoto,\r\n                details: data.$details,\r\n                attachments: data.$attachments,\r\n                todo: data.$todo,\r\n                customText: data.payam.CustomText,\r\n                primary: primary,\r\n                isFirst: isFirst\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #namayeshPayam\r\n    let-subject\r\n    let-mailNoText=\"mailNoText\"\r\n    let-content=\"content\"\r\n    let-fromText=\"fromText\"\r\n    let-toText=\"toText\"\r\n    let-importance=\"importance\"\r\n    let-readDate=\"readDate\"\r\n    let-sendDate=\"sendDate\"\r\n    let-ccText=\"ccText\"\r\n    let-bccText=\"bccText\"\r\n    let-fromPhoto=\"fromPhoto\"\r\n    let-details=\"details\"\r\n    let-accessLevel=\"accessLevel\"\r\n    let-primary=\"primary\"\r\n    let-isFirst=\"isFirst\"\r\n    let-attachments=\"attachments\"\r\n    let-todo=\"todo\"\r\n    let-customText=\"customText\"\r\n>\r\n    <fd-card cardType=\"object\" class=\"!tw-mb-2\">\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <fd-avatar\r\n                    [image]=\"fromPhoto\"\r\n                    [circle]=\"true\"\r\n                    size=\"s\"\r\n                    [ariaLabel]=\"fromText\"\r\n                    [label]=\"fromText\"\r\n                    [title]=\"fromText\"\r\n                ></fd-avatar>\r\n                <div fd-card-title class=\"header-fields\">\r\n                    <h5 fd-title>\r\n                        <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\r\n                    </h5>\r\n                    <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\r\n                </div>\r\n                <div fd-card-subtitle>\r\n                    <h5 fd-title>\r\n                        {{ subject }} @if(mailNoText){ <span>({{ mailNoText }})</span>}\r\n                    </h5>\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Recievers' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of toText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    @if(ccText?.length && ccText[0]){\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Cc' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of ccText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if(bccText?.length && bccText[0]){\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Bcc' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of bccText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    }\r\n                </div>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content>\r\n            <fd-panel [expanded]=\"isFirst\">\r\n                <div fd-panel-title>\r\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\r\n                    <div class=\"payamIcons\">\r\n                        @if (importance.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" loading=\"lazy\"/>\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ importance.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (accessLevel.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" loading=\"lazy\"/>\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (todo) {\r\n                        <fd-info-label [label]=\"todo.text\" [color]=\"todo.color\" [title]=\"todo.text\"></fd-info-label>\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <div fd-panel-content>\r\n                    @if (customText) {\r\n                    <div>\r\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\r\n                            {{ customText }}\r\n                        </fd-message-strip>\r\n                    </div>\r\n                    }\r\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\r\n\r\n                    @if (attachments?.length) {\r\n                    <div class=\"file-viewer-attachments\">\r\n                        @for (file of attachments; track file;let index=$index) { @if (!file.IsDeleted) {\r\n                        <bsu-file-viewer-popover\r\n                            [file]=\"file\"\r\n                            [index]=\"index\"\r\n                            [files]=\"attachments\"\r\n                            [deviceSize]=\"(deviceSize$ | async)!!\"\r\n                            [canDownload]=\"true\"\r\n                            [disableRemove]=\"true\"\r\n                        ></bsu-file-viewer-popover>\r\n                        } } @if (attachments.length > 1) {\r\n                        <button\r\n                            fd-button\r\n                            [title]=\"'Download' | bbbTranslate\"\r\n                            [glyph]=\"'download'\"\r\n                            downloadFiles\r\n                            [files]=\"attachments\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                    }\r\n                    <div class=\"readAt\">\r\n                        @if (readDate) {\r\n                        <fd-object-identifier [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\">\r\n                        </fd-object-identifier>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-panel>\r\n        </fd-card-content>\r\n        <!-- <fd-card-footer>\r\n    <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\r\n  </fd-card-footer> -->\r\n    </fd-card>\r\n    @for (detail of details; track detail) {        \r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            showPayamClass;\r\n            context: {\r\n                $implicit: detail\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start;height:auto;max-height:initial}:host ::ng-deep .fd-card__subtitle h5{white-space:initial!important}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}:host ::ng-deep ol{list-style:auto;margin:unset;padding:revert}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media (max-width: 410px){h5{max-width:210px}}@media (max-width: 1040px){.h5{max-width:600px}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$3.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$3.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i7$3.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i6$1.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "ariaLabelledBy", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i10$1.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["description", "bold", "medium"] }, { kind: "component", type: i3$6.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$6.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i3$6.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "index", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files", "nozip"] }, { 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: "20.0.6", ngImport: i0, type: BarsaPishnamayeshPayamComponent, decorators: [{
             type: Component,
@@ -14641,7 +14630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             useFactory: getDateService$1,
                             deps: [LogService]
                         }
-                    ], standalone: false, template: "@if (data) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        showPayamClass;\r\n        context: {\r\n            $implicit: data,\r\n            primary: !data?.$details?.length,\r\n            isFirst: true\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n}\r\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            namayeshPayam;\r\n            context: {\r\n                $implicit: data.payam.Subject,\r\n                mailNoText: data.payam.MailNoText,\r\n                fromText: data.payam.FromText,\r\n                toText: data.$toText,\r\n                importance: data.$importance,\r\n                readDate: data.$readDate,\r\n                sendDate: data.$sendDate,\r\n                ccText: data.$ccText,\r\n                bccText: data.$bccText,\r\n                accessLevel: data.$accessLevel,\r\n                content: data.$content,\r\n                fromPhoto: data.$fromPhoto,\r\n                details: data.$details,\r\n                attachments: data.$attachments,\r\n                todo: data.$todo,\r\n                customText: data.payam.CustomText,\r\n                primary: primary,\r\n                isFirst: isFirst\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #namayeshPayam\r\n    let-subject\r\n    let-mailNoText=\"mailNoText\"\r\n    let-content=\"content\"\r\n    let-fromText=\"fromText\"\r\n    let-toText=\"toText\"\r\n    let-importance=\"importance\"\r\n    let-readDate=\"readDate\"\r\n    let-sendDate=\"sendDate\"\r\n    let-ccText=\"ccText\"\r\n    let-bccText=\"bccText\"\r\n    let-fromPhoto=\"fromPhoto\"\r\n    let-details=\"details\"\r\n    let-accessLevel=\"accessLevel\"\r\n    let-primary=\"primary\"\r\n    let-isFirst=\"isFirst\"\r\n    let-attachments=\"attachments\"\r\n    let-todo=\"todo\"\r\n    let-customText=\"customText\"\r\n>\r\n    <fd-card cardType=\"object\">\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <fd-avatar\r\n                    [image]=\"fromPhoto\"\r\n                    [circle]=\"true\"\r\n                    size=\"s\"\r\n                    [ariaLabel]=\"fromText\"\r\n                    [label]=\"fromText\"\r\n                    [title]=\"fromText\"\r\n                ></fd-avatar>\r\n                <div fd-card-title class=\"header-fields\">\r\n                    <h5 fd-title>\r\n                        <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\r\n                    </h5>\r\n                    <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\r\n                </div>\r\n                <div fd-card-subtitle>\r\n                    <h5 fd-title>\r\n                        {{ subject }} @if(mailNoText){ <span>({{ mailNoText }})</span>}\r\n                    </h5>\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Recievers' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of toText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </div>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content>\r\n            <fd-panel [expanded]=\"isFirst\">\r\n                <div fd-panel-title >\r\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\r\n                    <div class=\"payamIcons\">\r\n                        @if (importance.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ importance.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (accessLevel.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (todo) {\r\n                        <fd-info-label [label]=\"todo.text\" [color]=\"todo.color\" [title]=\"todo.text\"></fd-info-label>\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <div fd-panel-content>\r\n                    @if (customText) {\r\n                    <div>\r\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\r\n                            {{ customText }}\r\n                        </fd-message-strip>\r\n                    </div>\r\n                    }\r\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\r\n\r\n                    @if (attachments?.length) {\r\n                    <div class=\"file-viewer-attachments\">\r\n                        @for (file of attachments; track file;let index=$index) { @if (!file.IsDeleted) {\r\n                        <bsu-file-viewer-popover\r\n                            [file]=\"file\"\r\n                            [index]=\"index\"\r\n                            [files]=\"attachments\"\r\n                            [deviceSize]=\"(deviceSize$ | async)!!\"\r\n                            [canDownload]=\"true\"\r\n                            [disableRemove]=\"true\"\r\n                        ></bsu-file-viewer-popover>\r\n                        } } @if (attachments.length > 1) {\r\n                        <button\r\n                            fd-button\r\n                            [title]=\"'Download' | bbbTranslate\"\r\n                            [glyph]=\"'download'\"\r\n                            downloadFiles\r\n                            [files]=\"attachments\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                    }\r\n                    <div class=\"readAt\">\r\n                        @if (readDate) {\r\n                        <fd-object-identifier [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\">\r\n                        </fd-object-identifier>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-panel>\r\n        </fd-card-content>\r\n        <!-- <fd-card-footer>\r\n    <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\r\n  </fd-card-footer> -->\r\n    </fd-card>\r\n    @for (detail of details; track detail) {\r\n    <ng-contianer>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                showPayamClass;\r\n                context: {\r\n                    $implicit: detail\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n    </ng-contianer>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start;height:auto;max-height:initial}:host ::ng-deep .fd-card__subtitle h5{white-space:initial!important}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}:host ::ng-deep ol{list-style:auto;margin:unset;padding:revert}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media (max-width: 410px){h5{max-width:210px}}@media (max-width: 1040px){.h5{max-width:600px}}\n"] }]
+                    ], standalone: false, template: "@if (data) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        showPayamClass;\r\n        context: {\r\n            $implicit: data,\r\n            primary: !data?.$details?.length,\r\n            isFirst: true\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n}\r\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            namayeshPayam;\r\n            context: {\r\n                $implicit: data.payam.Subject,\r\n                mailNoText: data.payam.MailNoText,\r\n                fromText: data.payam.FromText,\r\n                toText: data.$toText,\r\n                importance: data.$importance,\r\n                readDate: data.$readDate,\r\n                sendDate: data.$sendDate,\r\n                ccText: data.$ccText,\r\n                bccText: data.$bccText,\r\n                accessLevel: data.$accessLevel,\r\n                content: data.$content,\r\n                fromPhoto: data.$fromPhoto,\r\n                details: data.$details,\r\n                attachments: data.$attachments,\r\n                todo: data.$todo,\r\n                customText: data.payam.CustomText,\r\n                primary: primary,\r\n                isFirst: isFirst\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #namayeshPayam\r\n    let-subject\r\n    let-mailNoText=\"mailNoText\"\r\n    let-content=\"content\"\r\n    let-fromText=\"fromText\"\r\n    let-toText=\"toText\"\r\n    let-importance=\"importance\"\r\n    let-readDate=\"readDate\"\r\n    let-sendDate=\"sendDate\"\r\n    let-ccText=\"ccText\"\r\n    let-bccText=\"bccText\"\r\n    let-fromPhoto=\"fromPhoto\"\r\n    let-details=\"details\"\r\n    let-accessLevel=\"accessLevel\"\r\n    let-primary=\"primary\"\r\n    let-isFirst=\"isFirst\"\r\n    let-attachments=\"attachments\"\r\n    let-todo=\"todo\"\r\n    let-customText=\"customText\"\r\n>\r\n    <fd-card cardType=\"object\" class=\"!tw-mb-2\">\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <fd-avatar\r\n                    [image]=\"fromPhoto\"\r\n                    [circle]=\"true\"\r\n                    size=\"s\"\r\n                    [ariaLabel]=\"fromText\"\r\n                    [label]=\"fromText\"\r\n                    [title]=\"fromText\"\r\n                ></fd-avatar>\r\n                <div fd-card-title class=\"header-fields\">\r\n                    <h5 fd-title>\r\n                        <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\r\n                    </h5>\r\n                    <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\r\n                </div>\r\n                <div fd-card-subtitle>\r\n                    <h5 fd-title>\r\n                        {{ subject }} @if(mailNoText){ <span>({{ mailNoText }})</span>}\r\n                    </h5>\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Recievers' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of toText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    @if(ccText?.length && ccText[0]){\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Cc' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of ccText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if(bccText?.length && bccText[0]){\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Bcc' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of bccText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    }\r\n                </div>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content>\r\n            <fd-panel [expanded]=\"isFirst\">\r\n                <div fd-panel-title>\r\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\r\n                    <div class=\"payamIcons\">\r\n                        @if (importance.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" loading=\"lazy\"/>\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ importance.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (accessLevel.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" loading=\"lazy\"/>\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (todo) {\r\n                        <fd-info-label [label]=\"todo.text\" [color]=\"todo.color\" [title]=\"todo.text\"></fd-info-label>\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <div fd-panel-content>\r\n                    @if (customText) {\r\n                    <div>\r\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\r\n                            {{ customText }}\r\n                        </fd-message-strip>\r\n                    </div>\r\n                    }\r\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\r\n\r\n                    @if (attachments?.length) {\r\n                    <div class=\"file-viewer-attachments\">\r\n                        @for (file of attachments; track file;let index=$index) { @if (!file.IsDeleted) {\r\n                        <bsu-file-viewer-popover\r\n                            [file]=\"file\"\r\n                            [index]=\"index\"\r\n                            [files]=\"attachments\"\r\n                            [deviceSize]=\"(deviceSize$ | async)!!\"\r\n                            [canDownload]=\"true\"\r\n                            [disableRemove]=\"true\"\r\n                        ></bsu-file-viewer-popover>\r\n                        } } @if (attachments.length > 1) {\r\n                        <button\r\n                            fd-button\r\n                            [title]=\"'Download' | bbbTranslate\"\r\n                            [glyph]=\"'download'\"\r\n                            downloadFiles\r\n                            [files]=\"attachments\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                    }\r\n                    <div class=\"readAt\">\r\n                        @if (readDate) {\r\n                        <fd-object-identifier [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\">\r\n                        </fd-object-identifier>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-panel>\r\n        </fd-card-content>\r\n        <!-- <fd-card-footer>\r\n    <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\r\n  </fd-card-footer> -->\r\n    </fd-card>\r\n    @for (detail of details; track detail) {        \r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            showPayamClass;\r\n            context: {\r\n                $implicit: detail\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start;height:auto;max-height:initial}:host ::ng-deep .fd-card__subtitle h5{white-space:initial!important}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}:host ::ng-deep ol{list-style:auto;margin:unset;padding:revert}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media (max-width: 410px){h5{max-width:210px}}@media (max-width: 1040px){.h5{max-width:600px}}\n"] }]
         }] });
 class PayamClassType {
     constructor(payam, _domSanitizer, _dateService) {
@@ -15273,11 +15262,11 @@ class UiMultiSelectCardComponent extends UiMultiSelectComboComponent {
         this._raiseValueChanged();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiMultiSelectCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiMultiSelectCardComponent, isStandalone: false, selector: "bsu-ui-multi-select-card", usesInheritance: true, ngImport: i0, template: "<fd-form-group [isInline]=\"!parameters?.IsVertically && !(isMobile && parameters?.OnlyInMobileVertically)\">\r\n    @for (item of dataList; track item; let i = $index; let first = $first) {\r\n    <div fd-form-item>\r\n        <fd-card>\r\n            <fd-card-content>\r\n                <img\r\n                    width=\"90px\"\r\n                    [src]=\"item.fileId | picFieldSrc: 'PictureFileInfo':item.Id:item.fieldDefId\"\r\n                    [alt]=\"item.txt\"\r\n                    [attr.aria-label]=\"item.txt\"\r\n                    [title]=\"item.txt\"\r\n                />\r\n            </fd-card-content>\r\n            <fd-card-header (click)=\"onRadioClicked(item)\">\r\n                <fd-card-main-header>\r\n                    <fd-radio-button\r\n                        fd-card-title\r\n                        [value]=\"item.id\"\r\n                        [id]=\"'radio-' + id + i\"\r\n                        [name]=\"'radio' + id + i\"                        \r\n                        [class.control-disabled]=\"(disableOrReadonly$ | async) === true\"\r\n                        [disabled]=\"(disableOrReadonly$ | async) === true\"\r\n                        [ngModel]=\"value\"\r\n                        [selectedValue]=\"value\"\r\n                    >\r\n                        {{ item.txt }}\r\n                    </fd-radio-button>\r\n                </fd-card-main-header>\r\n            </fd-card-header>\r\n        </fd-card>\r\n    </div>\r\n    }\r\n</fd-form-group>\r\n", styles: [":host{display:block;width:100%;height:100%}:host div[fd-form-item]{margin:0 .5rem}fd-form-group{row-gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$3.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$3.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "fd-form-group", inputs: ["isInline"] }, { kind: "component", type: i3$8.RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiMultiSelectCardComponent, isStandalone: false, selector: "bsu-ui-multi-select-card", usesInheritance: true, ngImport: i0, template: "<fd-form-group [isInline]=\"!parameters?.IsVertically && !(isMobile && parameters?.OnlyInMobileVertically)\">\r\n    @for (item of dataList; track item; let i = $index; let first = $first) {\r\n    <div fd-form-item>\r\n        <fd-card>\r\n            <fd-card-content>\r\n                <img\r\n                    width=\"90px\"\r\n                    [src]=\"item.fileId | picFieldSrc: 'PictureFileInfo':item.Id:item.fieldDefId\"\r\n                    [alt]=\"item.txt\"\r\n                    [attr.aria-label]=\"item.txt\"\r\n                    [title]=\"item.txt\"\r\n                    loading=\"lazy\"\r\n                />\r\n            </fd-card-content>\r\n            <fd-card-header (click)=\"onRadioClicked(item)\">\r\n                <fd-card-main-header>\r\n                    <fd-radio-button\r\n                        fd-card-title\r\n                        [value]=\"item.id\"\r\n                        [id]=\"'radio-' + id + i\"\r\n                        [name]=\"'radio' + id + i\"                        \r\n                        [class.control-disabled]=\"(disableOrReadonly$ | async) === true\"\r\n                        [disabled]=\"(disableOrReadonly$ | async) === true\"\r\n                        [ngModel]=\"value\"\r\n                        [selectedValue]=\"value\"\r\n                    >\r\n                        {{ item.txt }}\r\n                    </fd-radio-button>\r\n                </fd-card-main-header>\r\n            </fd-card-header>\r\n        </fd-card>\r\n    </div>\r\n    }\r\n</fd-form-group>\r\n", styles: [":host{display:block;width:100%;height:100%}:host div[fd-form-item]{margin:0 .5rem}fd-form-group{row-gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$3.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$3.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "fd-form-group", inputs: ["isInline"] }, { kind: "component", type: i3$8.RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiMultiSelectCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-multi-select-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-form-group [isInline]=\"!parameters?.IsVertically && !(isMobile && parameters?.OnlyInMobileVertically)\">\r\n    @for (item of dataList; track item; let i = $index; let first = $first) {\r\n    <div fd-form-item>\r\n        <fd-card>\r\n            <fd-card-content>\r\n                <img\r\n                    width=\"90px\"\r\n                    [src]=\"item.fileId | picFieldSrc: 'PictureFileInfo':item.Id:item.fieldDefId\"\r\n                    [alt]=\"item.txt\"\r\n                    [attr.aria-label]=\"item.txt\"\r\n                    [title]=\"item.txt\"\r\n                />\r\n            </fd-card-content>\r\n            <fd-card-header (click)=\"onRadioClicked(item)\">\r\n                <fd-card-main-header>\r\n                    <fd-radio-button\r\n                        fd-card-title\r\n                        [value]=\"item.id\"\r\n                        [id]=\"'radio-' + id + i\"\r\n                        [name]=\"'radio' + id + i\"                        \r\n                        [class.control-disabled]=\"(disableOrReadonly$ | async) === true\"\r\n                        [disabled]=\"(disableOrReadonly$ | async) === true\"\r\n                        [ngModel]=\"value\"\r\n                        [selectedValue]=\"value\"\r\n                    >\r\n                        {{ item.txt }}\r\n                    </fd-radio-button>\r\n                </fd-card-main-header>\r\n            </fd-card-header>\r\n        </fd-card>\r\n    </div>\r\n    }\r\n</fd-form-group>\r\n", styles: [":host{display:block;width:100%;height:100%}:host div[fd-form-item]{margin:0 .5rem}fd-form-group{row-gap:1rem}\n"] }]
+            args: [{ selector: 'bsu-ui-multi-select-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-form-group [isInline]=\"!parameters?.IsVertically && !(isMobile && parameters?.OnlyInMobileVertically)\">\r\n    @for (item of dataList; track item; let i = $index; let first = $first) {\r\n    <div fd-form-item>\r\n        <fd-card>\r\n            <fd-card-content>\r\n                <img\r\n                    width=\"90px\"\r\n                    [src]=\"item.fileId | picFieldSrc: 'PictureFileInfo':item.Id:item.fieldDefId\"\r\n                    [alt]=\"item.txt\"\r\n                    [attr.aria-label]=\"item.txt\"\r\n                    [title]=\"item.txt\"\r\n                    loading=\"lazy\"\r\n                />\r\n            </fd-card-content>\r\n            <fd-card-header (click)=\"onRadioClicked(item)\">\r\n                <fd-card-main-header>\r\n                    <fd-radio-button\r\n                        fd-card-title\r\n                        [value]=\"item.id\"\r\n                        [id]=\"'radio-' + id + i\"\r\n                        [name]=\"'radio' + id + i\"                        \r\n                        [class.control-disabled]=\"(disableOrReadonly$ | async) === true\"\r\n                        [disabled]=\"(disableOrReadonly$ | async) === true\"\r\n                        [ngModel]=\"value\"\r\n                        [selectedValue]=\"value\"\r\n                    >\r\n                        {{ item.txt }}\r\n                    </fd-radio-button>\r\n                </fd-card-main-header>\r\n            </fd-card-header>\r\n        </fd-card>\r\n    </div>\r\n    }\r\n</fd-form-group>\r\n", styles: [":host{display:block;width:100%;height:100%}:host div[fd-form-item]{margin:0 .5rem}fd-form-group{row-gap:1rem}\n"] }]
         }] });
 
 class UiMultiSelectSmileComponent extends UiMultiSelectSliderComponent {
@@ -15466,11 +15455,11 @@ class BarsaQuestionPostComponent extends BaseViewItemPropsComponent {
         this.events.emit({ title: 'rowClick', data: { mo: this.mo, index: this.index } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaQuestionPostComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaQuestionPostComponent, isStandalone: false, selector: "bsu-barsa-question-post", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-w-full tw-flex tw-items-start tw-gap-2 tw-pt-8\">\r\n    @if (!isMobile) {\r\n    <div class=\"tw-shrink-0 tw-grow-0 tw-w-12\">\r\n        <div class=\"tw-size-10 tw-rounded-full tw-bg-gray-500 tw-overflow-hidden\">\r\n            <img src=\"https://picsum.photos/50/50?x={{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\" class=\"w-full h-full\" />\r\n        </div>\r\n    </div>\r\n    } @if (isMobile) {\r\n    <div\r\n        class=\"tw-shrink-0 tw-grow-0 tw-py-1 tw-text-center tw-w-10 tw-border tw-rounded-md\"\r\n        [ngClass]=\"{\r\n            'tw-border-gray-500 tw-text-gray-500': mo.F4 === '0',\r\n            'tw-border-green-600 tw-text-green-600': mo.F4 !== '0',\r\n            'tw-bg-green-600 tw-text-white': !!('\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns:true)\r\n        }\"\r\n    >\r\n        {{ mo.TotalVotes$Caption }}\r\n    </div>\r\n    }\r\n    <div class=\"tw-grow tw-shrink tw-flex tw-flex-col tw-gap-2\">\r\n        <div class=\"tw-w-full tw-flex tw-justify-between\">\r\n            <div class=\"tw-grow tw-flex tw-flex-col tw-gap-1\">\r\n                <span class=\"!tw-text-[.75rem]\">\r\n                    <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                    \u067E\u0631\u0633\u06CC\u062F\u0647 \u0627\u0633\u062A\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0627\u06CC\u062C\u0627\u062F' | rval: mo:allColumns:true }}\r\n                </span>\r\n                <a\r\n                    fd-link\r\n                    aria-label=\"Standard\"\r\n                    (click)=\"onRowClick()\"\r\n                    class=\"!tw-text-[1rem] hover:tw-cursor-pointer !tw-no-underline tw-transition-all\"\r\n                >\r\n                    {{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\r\n                    @if (mo.IsClosed) {\r\n                    <span class=\"tw-black tw-text-sm tw-ms-1\">[\u0628\u0633\u062A\u0647 \u0634\u062F\u0647]</span>\r\n                    }\r\n                </a>\r\n                <div class=\"!tw-text-[.75rem] tw-flex tw-gap-2\">\r\n                    <span>\r\n                        <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                        \u0648\u06CC\u0631\u0627\u06CC\u0634 \u06A9\u0631\u062F\u0647 \u0627\u0633\u062A\r\n                    </span>\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0622\u062E\u0631\u06CC\u0646 \u062A\u063A\u06CC\u06CC\u0631' | rval: mo:allColumns:true }}\r\n                </div>\r\n                @if (!isMobile && mo.Tags.MoDataList.length) {\r\n                <div class=\"tw-text-small tw-flex tw-gap-2 tw-flex-wrap\">\r\n                    @for (tag of mo.Tags.MoDataList; track tag; let last = $last) {\r\n                    <a\r\n                        class=\"tw-text-[.625rem] tw-block hover:tw-cursor-pointer tw-border tw-border-solid tw-border-transparent tw-whitespace-nowrap tw-text-blue-800 hover:tw-text-blue-700 tw-py-0.5 tw-px-1.5 tw-rounded-md tw-bg-[rgb(237,245,253)] tw-no-underline hover:tw-border-[rgb(203,231,255)] tw-transition-all\"\r\n                        >{{ tag.$Caption }}</a\r\n                    >\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (!isMobile) {\r\n            <div class=\"tw-shrink-0 tw-grow-0 tw-flex tw-gap-1 tw-items-start\">\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 py-1 tw-rounded-md tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                    [ngClass]=\"{\r\n                        'tw-bg-green-100': mo.CorrectAnswer\r\n                    }\"\r\n                >\r\n                    <span>\u067E\u0627\u0633\u062E \u0647\u0627</span>\r\n                    <span>{{ mo.CountOfAnswers }}</span>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 tw-py-1 tw-rounded-lg tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                >\r\n                    <span>\u0631\u0627\u06CC \u0647\u0627</span>\r\n                    <span>{{ '\u0645\u062C\u0645\u0648\u0639 \u0631\u0627\u06CC \u0647\u0627' | rval: mo:allColumns:true }}</span>\r\n                </div>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaQuestionPostComponent, isStandalone: false, selector: "bsu-barsa-question-post", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-w-full tw-flex tw-items-start tw-gap-2 tw-pt-8\">\r\n    @if (!isMobile) {\r\n    <div class=\"tw-shrink-0 tw-grow-0 tw-w-12\">\r\n        <div class=\"tw-size-10 tw-rounded-full tw-bg-gray-500 tw-overflow-hidden\">\r\n            <img src=\"https://picsum.photos/50/50?x={{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\" class=\"tw-full h-full\" loading=\"lazy\"/>\r\n        </div>\r\n    </div>\r\n    } @if (isMobile) {\r\n    <div\r\n        class=\"tw-shrink-0 tw-grow-0 tw-py-1 tw-text-center tw-w-10 tw-border tw-rounded-md\"\r\n        [ngClass]=\"{\r\n            'tw-border-gray-500 tw-text-gray-500': mo.F4 === '0',\r\n            'tw-border-green-600 tw-text-green-600': mo.F4 !== '0',\r\n            'tw-bg-green-600 tw-text-white': !!('\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns:true)\r\n        }\"\r\n    >\r\n        {{ mo.TotalVotes$Caption }}\r\n    </div>\r\n    }\r\n    <div class=\"tw-grow tw-shrink tw-flex tw-flex-col tw-gap-2\">\r\n        <div class=\"tw-w-full tw-flex tw-justify-between\">\r\n            <div class=\"tw-grow tw-flex tw-flex-col tw-gap-1\">\r\n                <span class=\"!tw-text-[.75rem]\">\r\n                    <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                    \u067E\u0631\u0633\u06CC\u062F\u0647 \u0627\u0633\u062A\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0627\u06CC\u062C\u0627\u062F' | rval: mo:allColumns:true }}\r\n                </span>\r\n                <a\r\n                    fd-link\r\n                    aria-label=\"Standard\"\r\n                    (click)=\"onRowClick()\"\r\n                    class=\"!tw-text-[1rem] hover:tw-cursor-pointer !tw-no-underline tw-transition-all\"\r\n                >\r\n                    {{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\r\n                    @if (mo.IsClosed) {\r\n                    <span class=\"tw-black tw-text-sm tw-ms-1\">[\u0628\u0633\u062A\u0647 \u0634\u062F\u0647]</span>\r\n                    }\r\n                </a>\r\n                <div class=\"!tw-text-[.75rem] tw-flex tw-gap-2\">\r\n                    <span>\r\n                        <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                        \u0648\u06CC\u0631\u0627\u06CC\u0634 \u06A9\u0631\u062F\u0647 \u0627\u0633\u062A\r\n                    </span>\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0622\u062E\u0631\u06CC\u0646 \u062A\u063A\u06CC\u06CC\u0631' | rval: mo:allColumns:true }}\r\n                </div>\r\n                @if (!isMobile && mo.Tags.MoDataList.length) {\r\n                <div class=\"tw-text-small tw-flex tw-gap-2 tw-flex-wrap\">\r\n                    @for (tag of mo.Tags.MoDataList; track tag; let last = $last) {\r\n                    <a\r\n                        class=\"tw-text-[.625rem] tw-block hover:tw-cursor-pointer tw-border tw-border-solid tw-border-transparent tw-whitespace-nowrap tw-text-blue-800 hover:tw-text-blue-700 tw-py-0.5 tw-px-1.5 tw-rounded-md tw-bg-[rgb(237,245,253)] tw-no-underline hover:tw-border-[rgb(203,231,255)] tw-transition-all\"\r\n                        >{{ tag.$Caption }}</a\r\n                    >\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (!isMobile) {\r\n            <div class=\"tw-shrink-0 tw-grow-0 tw-flex tw-gap-1 tw-items-start\">\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 py-1 tw-rounded-md tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                    [ngClass]=\"{\r\n                        'tw-bg-green-100': mo.CorrectAnswer\r\n                    }\"\r\n                >\r\n                    <span>\u067E\u0627\u0633\u062E \u0647\u0627</span>\r\n                    <span>{{ mo.CountOfAnswers }}</span>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 tw-py-1 tw-rounded-lg tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                >\r\n                    <span>\u0631\u0627\u06CC \u0647\u0627</span>\r\n                    <span>{{ '\u0645\u062C\u0645\u0648\u0639 \u0631\u0627\u06CC \u0647\u0627' | rval: mo:allColumns:true }}</span>\r\n                </div>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaQuestionPostComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-question-post', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"tw-w-full tw-flex tw-items-start tw-gap-2 tw-pt-8\">\r\n    @if (!isMobile) {\r\n    <div class=\"tw-shrink-0 tw-grow-0 tw-w-12\">\r\n        <div class=\"tw-size-10 tw-rounded-full tw-bg-gray-500 tw-overflow-hidden\">\r\n            <img src=\"https://picsum.photos/50/50?x={{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\" class=\"w-full h-full\" />\r\n        </div>\r\n    </div>\r\n    } @if (isMobile) {\r\n    <div\r\n        class=\"tw-shrink-0 tw-grow-0 tw-py-1 tw-text-center tw-w-10 tw-border tw-rounded-md\"\r\n        [ngClass]=\"{\r\n            'tw-border-gray-500 tw-text-gray-500': mo.F4 === '0',\r\n            'tw-border-green-600 tw-text-green-600': mo.F4 !== '0',\r\n            'tw-bg-green-600 tw-text-white': !!('\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns:true)\r\n        }\"\r\n    >\r\n        {{ mo.TotalVotes$Caption }}\r\n    </div>\r\n    }\r\n    <div class=\"tw-grow tw-shrink tw-flex tw-flex-col tw-gap-2\">\r\n        <div class=\"tw-w-full tw-flex tw-justify-between\">\r\n            <div class=\"tw-grow tw-flex tw-flex-col tw-gap-1\">\r\n                <span class=\"!tw-text-[.75rem]\">\r\n                    <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                    \u067E\u0631\u0633\u06CC\u062F\u0647 \u0627\u0633\u062A\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0627\u06CC\u062C\u0627\u062F' | rval: mo:allColumns:true }}\r\n                </span>\r\n                <a\r\n                    fd-link\r\n                    aria-label=\"Standard\"\r\n                    (click)=\"onRowClick()\"\r\n                    class=\"!tw-text-[1rem] hover:tw-cursor-pointer !tw-no-underline tw-transition-all\"\r\n                >\r\n                    {{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\r\n                    @if (mo.IsClosed) {\r\n                    <span class=\"tw-black tw-text-sm tw-ms-1\">[\u0628\u0633\u062A\u0647 \u0634\u062F\u0647]</span>\r\n                    }\r\n                </a>\r\n                <div class=\"!tw-text-[.75rem] tw-flex tw-gap-2\">\r\n                    <span>\r\n                        <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                        \u0648\u06CC\u0631\u0627\u06CC\u0634 \u06A9\u0631\u062F\u0647 \u0627\u0633\u062A\r\n                    </span>\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0622\u062E\u0631\u06CC\u0646 \u062A\u063A\u06CC\u06CC\u0631' | rval: mo:allColumns:true }}\r\n                </div>\r\n                @if (!isMobile && mo.Tags.MoDataList.length) {\r\n                <div class=\"tw-text-small tw-flex tw-gap-2 tw-flex-wrap\">\r\n                    @for (tag of mo.Tags.MoDataList; track tag; let last = $last) {\r\n                    <a\r\n                        class=\"tw-text-[.625rem] tw-block hover:tw-cursor-pointer tw-border tw-border-solid tw-border-transparent tw-whitespace-nowrap tw-text-blue-800 hover:tw-text-blue-700 tw-py-0.5 tw-px-1.5 tw-rounded-md tw-bg-[rgb(237,245,253)] tw-no-underline hover:tw-border-[rgb(203,231,255)] tw-transition-all\"\r\n                        >{{ tag.$Caption }}</a\r\n                    >\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (!isMobile) {\r\n            <div class=\"tw-shrink-0 tw-grow-0 tw-flex tw-gap-1 tw-items-start\">\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 py-1 tw-rounded-md tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                    [ngClass]=\"{\r\n                        'tw-bg-green-100': mo.CorrectAnswer\r\n                    }\"\r\n                >\r\n                    <span>\u067E\u0627\u0633\u062E \u0647\u0627</span>\r\n                    <span>{{ mo.CountOfAnswers }}</span>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 tw-py-1 tw-rounded-lg tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                >\r\n                    <span>\u0631\u0627\u06CC \u0647\u0627</span>\r\n                    <span>{{ '\u0645\u062C\u0645\u0648\u0639 \u0631\u0627\u06CC \u0647\u0627' | rval: mo:allColumns:true }}</span>\r\n                </div>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'bsu-barsa-question-post', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"tw-w-full tw-flex tw-items-start tw-gap-2 tw-pt-8\">\r\n    @if (!isMobile) {\r\n    <div class=\"tw-shrink-0 tw-grow-0 tw-w-12\">\r\n        <div class=\"tw-size-10 tw-rounded-full tw-bg-gray-500 tw-overflow-hidden\">\r\n            <img src=\"https://picsum.photos/50/50?x={{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\" class=\"tw-full h-full\" loading=\"lazy\"/>\r\n        </div>\r\n    </div>\r\n    } @if (isMobile) {\r\n    <div\r\n        class=\"tw-shrink-0 tw-grow-0 tw-py-1 tw-text-center tw-w-10 tw-border tw-rounded-md\"\r\n        [ngClass]=\"{\r\n            'tw-border-gray-500 tw-text-gray-500': mo.F4 === '0',\r\n            'tw-border-green-600 tw-text-green-600': mo.F4 !== '0',\r\n            'tw-bg-green-600 tw-text-white': !!('\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns:true)\r\n        }\"\r\n    >\r\n        {{ mo.TotalVotes$Caption }}\r\n    </div>\r\n    }\r\n    <div class=\"tw-grow tw-shrink tw-flex tw-flex-col tw-gap-2\">\r\n        <div class=\"tw-w-full tw-flex tw-justify-between\">\r\n            <div class=\"tw-grow tw-flex tw-flex-col tw-gap-1\">\r\n                <span class=\"!tw-text-[.75rem]\">\r\n                    <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                    \u067E\u0631\u0633\u06CC\u062F\u0647 \u0627\u0633\u062A\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0627\u06CC\u062C\u0627\u062F' | rval: mo:allColumns:true }}\r\n                </span>\r\n                <a\r\n                    fd-link\r\n                    aria-label=\"Standard\"\r\n                    (click)=\"onRowClick()\"\r\n                    class=\"!tw-text-[1rem] hover:tw-cursor-pointer !tw-no-underline tw-transition-all\"\r\n                >\r\n                    {{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\r\n                    @if (mo.IsClosed) {\r\n                    <span class=\"tw-black tw-text-sm tw-ms-1\">[\u0628\u0633\u062A\u0647 \u0634\u062F\u0647]</span>\r\n                    }\r\n                </a>\r\n                <div class=\"!tw-text-[.75rem] tw-flex tw-gap-2\">\r\n                    <span>\r\n                        <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                        \u0648\u06CC\u0631\u0627\u06CC\u0634 \u06A9\u0631\u062F\u0647 \u0627\u0633\u062A\r\n                    </span>\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0622\u062E\u0631\u06CC\u0646 \u062A\u063A\u06CC\u06CC\u0631' | rval: mo:allColumns:true }}\r\n                </div>\r\n                @if (!isMobile && mo.Tags.MoDataList.length) {\r\n                <div class=\"tw-text-small tw-flex tw-gap-2 tw-flex-wrap\">\r\n                    @for (tag of mo.Tags.MoDataList; track tag; let last = $last) {\r\n                    <a\r\n                        class=\"tw-text-[.625rem] tw-block hover:tw-cursor-pointer tw-border tw-border-solid tw-border-transparent tw-whitespace-nowrap tw-text-blue-800 hover:tw-text-blue-700 tw-py-0.5 tw-px-1.5 tw-rounded-md tw-bg-[rgb(237,245,253)] tw-no-underline hover:tw-border-[rgb(203,231,255)] tw-transition-all\"\r\n                        >{{ tag.$Caption }}</a\r\n                    >\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (!isMobile) {\r\n            <div class=\"tw-shrink-0 tw-grow-0 tw-flex tw-gap-1 tw-items-start\">\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 py-1 tw-rounded-md tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                    [ngClass]=\"{\r\n                        'tw-bg-green-100': mo.CorrectAnswer\r\n                    }\"\r\n                >\r\n                    <span>\u067E\u0627\u0633\u062E \u0647\u0627</span>\r\n                    <span>{{ mo.CountOfAnswers }}</span>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 tw-py-1 tw-rounded-lg tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                >\r\n                    <span>\u0631\u0627\u06CC \u0647\u0627</span>\r\n                    <span>{{ '\u0645\u062C\u0645\u0648\u0639 \u0631\u0627\u06CC \u0647\u0627' | rval: mo:allColumns:true }}</span>\r\n                </div>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }] });
 
 class BarsaChipComponent {
@@ -15721,11 +15710,11 @@ class BarsaQuestionAnswerFormComponent extends FormPropsBaseComponent {
         vote && vote?.FieldUi.fireEvent('click', vote.FieldUi);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaQuestionAnswerFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaQuestionAnswerFormComponent, isStandalone: false, selector: "bsu-barsa-question-answer-form", providers: [UploadService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-absolute tw-z-0 tw-bg-white tw-w-screen tw-top-0 tw-left-0\"></div>\r\n<div class=\"tw-w-full tw-py-8 tw-relative\">\r\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-gap-12\">\r\n        <div class=\"tw-col-span-3 tw-flex tw-flex-col tw-gap-8\">\r\n            <div class=\"tw-flex tw-gap-8 tw-pb-8\">\r\n                <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-items-center tw-gap-6\">\r\n                    <img src=\"https://picsum.photos/64/64\" class=\"tw-size-12 tw-rounded-full\" />\r\n                    <bsu-barsa-question-answer-vote-section\r\n                        [vote]=\"mo.Post.CurrentUserVote.Vote\"\r\n                        [voteUps]=\"mo.Post.VoteUps\"\r\n                        [voteDowns]=\"mo.Post.VoteDowns\"\r\n                        (voteChange)=\"onVoteChange($event)\"\r\n                    ></bsu-barsa-question-answer-vote-section>\r\n                </div>\r\n                <div class=\"tw-grow tw-shrink\">\r\n                    <bsu-barsa-question-answer-creator-time-section\r\n                        [post]=\"mo.Post\"\r\n                    ></bsu-barsa-question-answer-creator-time-section>\r\n                    <p class=\"tw-text-2xl tw-mt-4\">\r\n                        {{ mo.Title }}\r\n                    </p>\r\n                    <bsu-barsa-question-answer-content-actions-section\r\n                        [mo]=\"mo\"\r\n                        [buttons]=\"toolbarItems\"\r\n                    ></bsu-barsa-question-answer-content-actions-section>\r\n                    <bsu-barsa-question-answer-comments-section\r\n                        [post]=\"mo.Post\"\r\n                    ></bsu-barsa-question-answer-comments-section>\r\n                </div>\r\n            </div>\r\n            <p class=\"tw-z-10 tw-text-2xl tw-pb-4 tw-border-b tw-border-gray-200 tw-relative\">\r\n                {{ mo.Answers.MoDataList.length }}\r\n                \u067E\u0627\u0633\u062E\r\n            </p>\r\n            <div class=\"tw-flex tw-flex-col tw-gap-8 tw-z-10 tw-relative\">\r\n                @if (mo.Answers.MoDataList.length) { @if ('\u067E\u0627\u0633\u062E \u0647\u0627' | controlUi: layout94; as answers) {\r\n                <bsu-layout-control [config]=\"answers\"></bsu-layout-control>\r\n                } }\r\n            </div>\r\n        </div>\r\n        <div class=\"tw-col-span-1\">\r\n            @if ('\u0633\u0648\u0627\u0644\u0627\u062A \u0645\u0631\u062A\u0628\u0637' | controlUi: layout94; as relevantQuestions) {\r\n            <bsu-layout-control [config]=\"relevantQuestions\"></bsu-layout-control>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-mt-4\">\r\n        <div\r\n            class=\"tw-col-span-4 tw-flex tw-flex-col tw-gap-4 tw-p-4 border tw-border-gray-200 tw-rounded-md tw-bg-white\"\r\n        >\r\n            <span class=\"tw-text-xl\">\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E</span>\r\n            @if ('\u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerText) {\r\n            <bsu-layout-control [config]=\"newAnswerText\"></bsu-layout-control>\r\n            }\r\n            <div class=\"tw-flex tw-justify-end\">\r\n                @if ('\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerSubmit) {\r\n                <bsu-layout-control\r\n                    class=\"tw-w-fit tw-min-w-fit tw-max-w-fit\"\r\n                    [config]=\"newAnswerSubmit\"\r\n                ></bsu-layout-control>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"], dependencies: [{ kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "cellEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: BarsaQuestionAnswerContentActionsSectionComponent, selector: "bsu-barsa-question-answer-content-actions-section", inputs: ["mo", "buttons"], outputs: ["btnClick"] }, { kind: "component", type: BarsaQuestionAnswerVoteSectionComponent, selector: "bsu-barsa-question-answer-vote-section", inputs: ["vote", "voteDowns", "voteUps"], outputs: ["voteChange"] }, { kind: "component", type: BarsaQuestionAnswerCreatorTimeSectionComponent, selector: "bsu-barsa-question-answer-creator-time-section", inputs: ["post"] }, { kind: "component", type: BarsaQuestionAnswerCommentsSectionComponent, selector: "bsu-barsa-question-answer-comments-section", inputs: ["post"] }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaQuestionAnswerFormComponent, isStandalone: false, selector: "bsu-barsa-question-answer-form", providers: [UploadService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-absolute tw-z-0 tw-bg-white tw-w-screen tw-top-0 tw-left-0\"></div>\r\n<div class=\"tw-w-full tw-py-8 tw-relative\">\r\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-gap-12\">\r\n        <div class=\"tw-col-span-3 tw-flex tw-flex-col tw-gap-8\">\r\n            <div class=\"tw-flex tw-gap-8 tw-pb-8\">\r\n                <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-items-center tw-gap-6\">\r\n                    <img src=\"https://picsum.photos/64/64\" class=\"tw-size-12 tw-rounded-full\" loading=\"lazy\"/>\r\n                    <bsu-barsa-question-answer-vote-section\r\n                        [vote]=\"mo.Post.CurrentUserVote.Vote\"\r\n                        [voteUps]=\"mo.Post.VoteUps\"\r\n                        [voteDowns]=\"mo.Post.VoteDowns\"\r\n                        (voteChange)=\"onVoteChange($event)\"\r\n                    ></bsu-barsa-question-answer-vote-section>\r\n                </div>\r\n                <div class=\"tw-grow tw-shrink\">\r\n                    <bsu-barsa-question-answer-creator-time-section\r\n                        [post]=\"mo.Post\"\r\n                    ></bsu-barsa-question-answer-creator-time-section>\r\n                    <p class=\"tw-text-2xl tw-mt-4\">\r\n                        {{ mo.Title }}\r\n                    </p>\r\n                    <bsu-barsa-question-answer-content-actions-section\r\n                        [mo]=\"mo\"\r\n                        [buttons]=\"toolbarItems\"\r\n                    ></bsu-barsa-question-answer-content-actions-section>\r\n                    <bsu-barsa-question-answer-comments-section\r\n                        [post]=\"mo.Post\"\r\n                    ></bsu-barsa-question-answer-comments-section>\r\n                </div>\r\n            </div>\r\n            <p class=\"tw-z-10 tw-text-2xl tw-pb-4 tw-border-b tw-border-gray-200 tw-relative\">\r\n                {{ mo.Answers.MoDataList.length }}\r\n                \u067E\u0627\u0633\u062E\r\n            </p>\r\n            <div class=\"tw-flex tw-flex-col tw-gap-8 tw-z-10 tw-relative\">\r\n                @if (mo.Answers.MoDataList.length) { @if ('\u067E\u0627\u0633\u062E \u0647\u0627' | controlUi: layout94; as answers) {\r\n                <bsu-layout-control [config]=\"answers\"></bsu-layout-control>\r\n                } }\r\n            </div>\r\n        </div>\r\n        <div class=\"tw-col-span-1\">\r\n            @if ('\u0633\u0648\u0627\u0644\u0627\u062A \u0645\u0631\u062A\u0628\u0637' | controlUi: layout94; as relevantQuestions) {\r\n            <bsu-layout-control [config]=\"relevantQuestions\"></bsu-layout-control>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-mt-4\">\r\n        <div\r\n            class=\"tw-col-span-4 tw-flex tw-flex-col tw-gap-4 tw-p-4 border tw-border-gray-200 tw-rounded-md tw-bg-white\"\r\n        >\r\n            <span class=\"tw-text-xl\">\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E</span>\r\n            @if ('\u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerText) {\r\n            <bsu-layout-control [config]=\"newAnswerText\"></bsu-layout-control>\r\n            }\r\n            <div class=\"tw-flex tw-justify-end\">\r\n                @if ('\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerSubmit) {\r\n                <bsu-layout-control\r\n                    class=\"tw-w-fit tw-min-w-fit tw-max-w-fit\"\r\n                    [config]=\"newAnswerSubmit\"\r\n                ></bsu-layout-control>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"], dependencies: [{ kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "cellEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: BarsaQuestionAnswerContentActionsSectionComponent, selector: "bsu-barsa-question-answer-content-actions-section", inputs: ["mo", "buttons"], outputs: ["btnClick"] }, { kind: "component", type: BarsaQuestionAnswerVoteSectionComponent, selector: "bsu-barsa-question-answer-vote-section", inputs: ["vote", "voteDowns", "voteUps"], outputs: ["voteChange"] }, { kind: "component", type: BarsaQuestionAnswerCreatorTimeSectionComponent, selector: "bsu-barsa-question-answer-creator-time-section", inputs: ["post"] }, { kind: "component", type: BarsaQuestionAnswerCommentsSectionComponent, selector: "bsu-barsa-question-answer-comments-section", inputs: ["post"] }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaQuestionAnswerFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-question-answer-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UploadService], standalone: false, template: "<div class=\"tw-absolute tw-z-0 tw-bg-white tw-w-screen tw-top-0 tw-left-0\"></div>\r\n<div class=\"tw-w-full tw-py-8 tw-relative\">\r\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-gap-12\">\r\n        <div class=\"tw-col-span-3 tw-flex tw-flex-col tw-gap-8\">\r\n            <div class=\"tw-flex tw-gap-8 tw-pb-8\">\r\n                <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-items-center tw-gap-6\">\r\n                    <img src=\"https://picsum.photos/64/64\" class=\"tw-size-12 tw-rounded-full\" />\r\n                    <bsu-barsa-question-answer-vote-section\r\n                        [vote]=\"mo.Post.CurrentUserVote.Vote\"\r\n                        [voteUps]=\"mo.Post.VoteUps\"\r\n                        [voteDowns]=\"mo.Post.VoteDowns\"\r\n                        (voteChange)=\"onVoteChange($event)\"\r\n                    ></bsu-barsa-question-answer-vote-section>\r\n                </div>\r\n                <div class=\"tw-grow tw-shrink\">\r\n                    <bsu-barsa-question-answer-creator-time-section\r\n                        [post]=\"mo.Post\"\r\n                    ></bsu-barsa-question-answer-creator-time-section>\r\n                    <p class=\"tw-text-2xl tw-mt-4\">\r\n                        {{ mo.Title }}\r\n                    </p>\r\n                    <bsu-barsa-question-answer-content-actions-section\r\n                        [mo]=\"mo\"\r\n                        [buttons]=\"toolbarItems\"\r\n                    ></bsu-barsa-question-answer-content-actions-section>\r\n                    <bsu-barsa-question-answer-comments-section\r\n                        [post]=\"mo.Post\"\r\n                    ></bsu-barsa-question-answer-comments-section>\r\n                </div>\r\n            </div>\r\n            <p class=\"tw-z-10 tw-text-2xl tw-pb-4 tw-border-b tw-border-gray-200 tw-relative\">\r\n                {{ mo.Answers.MoDataList.length }}\r\n                \u067E\u0627\u0633\u062E\r\n            </p>\r\n            <div class=\"tw-flex tw-flex-col tw-gap-8 tw-z-10 tw-relative\">\r\n                @if (mo.Answers.MoDataList.length) { @if ('\u067E\u0627\u0633\u062E \u0647\u0627' | controlUi: layout94; as answers) {\r\n                <bsu-layout-control [config]=\"answers\"></bsu-layout-control>\r\n                } }\r\n            </div>\r\n        </div>\r\n        <div class=\"tw-col-span-1\">\r\n            @if ('\u0633\u0648\u0627\u0644\u0627\u062A \u0645\u0631\u062A\u0628\u0637' | controlUi: layout94; as relevantQuestions) {\r\n            <bsu-layout-control [config]=\"relevantQuestions\"></bsu-layout-control>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-mt-4\">\r\n        <div\r\n            class=\"tw-col-span-4 tw-flex tw-flex-col tw-gap-4 tw-p-4 border tw-border-gray-200 tw-rounded-md tw-bg-white\"\r\n        >\r\n            <span class=\"tw-text-xl\">\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E</span>\r\n            @if ('\u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerText) {\r\n            <bsu-layout-control [config]=\"newAnswerText\"></bsu-layout-control>\r\n            }\r\n            <div class=\"tw-flex tw-justify-end\">\r\n                @if ('\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerSubmit) {\r\n                <bsu-layout-control\r\n                    class=\"tw-w-fit tw-min-w-fit tw-max-w-fit\"\r\n                    [config]=\"newAnswerSubmit\"\r\n                ></bsu-layout-control>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"] }]
+            args: [{ selector: 'bsu-barsa-question-answer-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UploadService], standalone: false, template: "<div class=\"tw-absolute tw-z-0 tw-bg-white tw-w-screen tw-top-0 tw-left-0\"></div>\r\n<div class=\"tw-w-full tw-py-8 tw-relative\">\r\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-gap-12\">\r\n        <div class=\"tw-col-span-3 tw-flex tw-flex-col tw-gap-8\">\r\n            <div class=\"tw-flex tw-gap-8 tw-pb-8\">\r\n                <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-items-center tw-gap-6\">\r\n                    <img src=\"https://picsum.photos/64/64\" class=\"tw-size-12 tw-rounded-full\" loading=\"lazy\"/>\r\n                    <bsu-barsa-question-answer-vote-section\r\n                        [vote]=\"mo.Post.CurrentUserVote.Vote\"\r\n                        [voteUps]=\"mo.Post.VoteUps\"\r\n                        [voteDowns]=\"mo.Post.VoteDowns\"\r\n                        (voteChange)=\"onVoteChange($event)\"\r\n                    ></bsu-barsa-question-answer-vote-section>\r\n                </div>\r\n                <div class=\"tw-grow tw-shrink\">\r\n                    <bsu-barsa-question-answer-creator-time-section\r\n                        [post]=\"mo.Post\"\r\n                    ></bsu-barsa-question-answer-creator-time-section>\r\n                    <p class=\"tw-text-2xl tw-mt-4\">\r\n                        {{ mo.Title }}\r\n                    </p>\r\n                    <bsu-barsa-question-answer-content-actions-section\r\n                        [mo]=\"mo\"\r\n                        [buttons]=\"toolbarItems\"\r\n                    ></bsu-barsa-question-answer-content-actions-section>\r\n                    <bsu-barsa-question-answer-comments-section\r\n                        [post]=\"mo.Post\"\r\n                    ></bsu-barsa-question-answer-comments-section>\r\n                </div>\r\n            </div>\r\n            <p class=\"tw-z-10 tw-text-2xl tw-pb-4 tw-border-b tw-border-gray-200 tw-relative\">\r\n                {{ mo.Answers.MoDataList.length }}\r\n                \u067E\u0627\u0633\u062E\r\n            </p>\r\n            <div class=\"tw-flex tw-flex-col tw-gap-8 tw-z-10 tw-relative\">\r\n                @if (mo.Answers.MoDataList.length) { @if ('\u067E\u0627\u0633\u062E \u0647\u0627' | controlUi: layout94; as answers) {\r\n                <bsu-layout-control [config]=\"answers\"></bsu-layout-control>\r\n                } }\r\n            </div>\r\n        </div>\r\n        <div class=\"tw-col-span-1\">\r\n            @if ('\u0633\u0648\u0627\u0644\u0627\u062A \u0645\u0631\u062A\u0628\u0637' | controlUi: layout94; as relevantQuestions) {\r\n            <bsu-layout-control [config]=\"relevantQuestions\"></bsu-layout-control>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div class=\"tw-w-full tw-max-w-[80rem] tw-mx-auto tw-grid tw-grid-cols-4 tw-mt-4\">\r\n        <div\r\n            class=\"tw-col-span-4 tw-flex tw-flex-col tw-gap-4 tw-p-4 border tw-border-gray-200 tw-rounded-md tw-bg-white\"\r\n        >\r\n            <span class=\"tw-text-xl\">\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E</span>\r\n            @if ('\u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerText) {\r\n            <bsu-layout-control [config]=\"newAnswerText\"></bsu-layout-control>\r\n            }\r\n            <div class=\"tw-flex tw-justify-end\">\r\n                @if ('\u0627\u0631\u0633\u0627\u0644 \u067E\u0627\u0633\u062E \u062C\u062F\u06CC\u062F' | controlUi: layout94; as newAnswerSubmit) {\r\n                <bsu-layout-control\r\n                    class=\"tw-w-fit tw-min-w-fit tw-max-w-fit\"\r\n                    [config]=\"newAnswerSubmit\"\r\n                ></bsu-layout-control>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"] }]
         }] });
 
 class BarsaAnswerCardComponent extends BaseViewItemPropsComponent {
@@ -15754,11 +15743,11 @@ class BarsaAnswerCardComponent extends BaseViewItemPropsComponent {
         // vote && vote?.FieldUi.fireEvent('click',vote.FieldUi);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaAnswerCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaAnswerCardComponent, isStandalone: false, selector: "bsu-barsa-answer-card", providers: [UploadService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"tw-flex tw-flex-col tw-p-4 tw-border tw-border-gray-200 tw-bg-white tw-rounded-md tw-mb-8\"\r\n    [ngClass]=\"{\r\n        '!tw-bg-green-50 tw-border-t-2 tw-border-t-green-500': mo.CorrectAnswer\r\n    }\"\r\n>\r\n    @if (mo.CorrectAnswer) {\r\n    <p class=\"tw-w-full tw-text-green-500 tw-mb-6\">\u0628\u0647\u062A\u0631\u06CC\u0646 \u067E\u0627\u0633\u062E</p>\r\n    }\r\n    <div class=\"tw-flex tw-grow tw-gap-8\">\r\n        <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-items-center tw-gap-8\">\r\n            <img src=\"https://picsum.photos/64/64\" class=\"size-12 rounded-full\" />\r\n            <bsu-barsa-question-answer-vote-section\r\n                [vote]=\"mo.Post.CurrentUserVote.Vote\"\r\n                [voteUps]=\"mo.Post.VoteUps\"\r\n                [voteDowns]=\"mo.Post.VoteDowns\"\r\n                (voteChange)=\"onVoteChange($event)\"\r\n            ></bsu-barsa-question-answer-vote-section>\r\n        </div>\r\n        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink\">\r\n            <bsu-barsa-question-answer-creator-time-section\r\n                [post]=\"mo.Post\"\r\n            ></bsu-barsa-question-answer-creator-time-section>\r\n            <bsu-barsa-question-answer-content-actions-section\r\n                [mo]=\"mo\"\r\n                [buttons]=\"contextMenuItems\"\r\n                (btnClick)=\"onRowCheck()\"\r\n            ></bsu-barsa-question-answer-content-actions-section>\r\n        </div>\r\n    </div>\r\n    <div class=\"tw-flex tw-grow tw-gap-8\">\r\n        <div class=\"tw-grow-0 tw-shrink-0 tw-w-12\"></div>\r\n        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink\">\r\n            <bsu-barsa-question-answer-comments-section [post]=\"mo.Post\"></bsu-barsa-question-answer-comments-section>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BarsaQuestionAnswerContentActionsSectionComponent, selector: "bsu-barsa-question-answer-content-actions-section", inputs: ["mo", "buttons"], outputs: ["btnClick"] }, { kind: "component", type: BarsaQuestionAnswerVoteSectionComponent, selector: "bsu-barsa-question-answer-vote-section", inputs: ["vote", "voteDowns", "voteUps"], outputs: ["voteChange"] }, { kind: "component", type: BarsaQuestionAnswerCreatorTimeSectionComponent, selector: "bsu-barsa-question-answer-creator-time-section", inputs: ["post"] }, { kind: "component", type: BarsaQuestionAnswerCommentsSectionComponent, selector: "bsu-barsa-question-answer-comments-section", inputs: ["post"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaAnswerCardComponent, isStandalone: false, selector: "bsu-barsa-answer-card", providers: [UploadService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"tw-flex tw-flex-col tw-p-4 tw-border tw-border-gray-200 tw-bg-white tw-rounded-md tw-mb-8\"\r\n    [ngClass]=\"{\r\n        '!tw-bg-green-50 tw-border-t-2 tw-border-t-green-500': mo.CorrectAnswer\r\n    }\"\r\n>\r\n    @if (mo.CorrectAnswer) {\r\n    <p class=\"tw-w-full tw-text-green-500 tw-mb-6\">\u0628\u0647\u062A\u0631\u06CC\u0646 \u067E\u0627\u0633\u062E</p>\r\n    }\r\n    <div class=\"tw-flex tw-grow tw-gap-8\">\r\n        <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-items-center tw-gap-8\">\r\n            <img src=\"https://picsum.photos/64/64\" class=\"size-12 rounded-full\" loading=\"lazy\"/>\r\n            <bsu-barsa-question-answer-vote-section\r\n                [vote]=\"mo.Post.CurrentUserVote.Vote\"\r\n                [voteUps]=\"mo.Post.VoteUps\"\r\n                [voteDowns]=\"mo.Post.VoteDowns\"\r\n                (voteChange)=\"onVoteChange($event)\"\r\n            ></bsu-barsa-question-answer-vote-section>\r\n        </div>\r\n        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink\">\r\n            <bsu-barsa-question-answer-creator-time-section\r\n                [post]=\"mo.Post\"\r\n            ></bsu-barsa-question-answer-creator-time-section>\r\n            <bsu-barsa-question-answer-content-actions-section\r\n                [mo]=\"mo\"\r\n                [buttons]=\"contextMenuItems\"\r\n                (btnClick)=\"onRowCheck()\"\r\n            ></bsu-barsa-question-answer-content-actions-section>\r\n        </div>\r\n    </div>\r\n    <div class=\"tw-flex tw-grow tw-gap-8\">\r\n        <div class=\"tw-grow-0 tw-shrink-0 tw-w-12\"></div>\r\n        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink\">\r\n            <bsu-barsa-question-answer-comments-section [post]=\"mo.Post\"></bsu-barsa-question-answer-comments-section>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BarsaQuestionAnswerContentActionsSectionComponent, selector: "bsu-barsa-question-answer-content-actions-section", inputs: ["mo", "buttons"], outputs: ["btnClick"] }, { kind: "component", type: BarsaQuestionAnswerVoteSectionComponent, selector: "bsu-barsa-question-answer-vote-section", inputs: ["vote", "voteDowns", "voteUps"], outputs: ["voteChange"] }, { kind: "component", type: BarsaQuestionAnswerCreatorTimeSectionComponent, selector: "bsu-barsa-question-answer-creator-time-section", inputs: ["post"] }, { kind: "component", type: BarsaQuestionAnswerCommentsSectionComponent, selector: "bsu-barsa-question-answer-comments-section", inputs: ["post"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaAnswerCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-answer-card', providers: [UploadService], standalone: false, template: "<div\r\n    class=\"tw-flex tw-flex-col tw-p-4 tw-border tw-border-gray-200 tw-bg-white tw-rounded-md tw-mb-8\"\r\n    [ngClass]=\"{\r\n        '!tw-bg-green-50 tw-border-t-2 tw-border-t-green-500': mo.CorrectAnswer\r\n    }\"\r\n>\r\n    @if (mo.CorrectAnswer) {\r\n    <p class=\"tw-w-full tw-text-green-500 tw-mb-6\">\u0628\u0647\u062A\u0631\u06CC\u0646 \u067E\u0627\u0633\u062E</p>\r\n    }\r\n    <div class=\"tw-flex tw-grow tw-gap-8\">\r\n        <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-items-center tw-gap-8\">\r\n            <img src=\"https://picsum.photos/64/64\" class=\"size-12 rounded-full\" />\r\n            <bsu-barsa-question-answer-vote-section\r\n                [vote]=\"mo.Post.CurrentUserVote.Vote\"\r\n                [voteUps]=\"mo.Post.VoteUps\"\r\n                [voteDowns]=\"mo.Post.VoteDowns\"\r\n                (voteChange)=\"onVoteChange($event)\"\r\n            ></bsu-barsa-question-answer-vote-section>\r\n        </div>\r\n        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink\">\r\n            <bsu-barsa-question-answer-creator-time-section\r\n                [post]=\"mo.Post\"\r\n            ></bsu-barsa-question-answer-creator-time-section>\r\n            <bsu-barsa-question-answer-content-actions-section\r\n                [mo]=\"mo\"\r\n                [buttons]=\"contextMenuItems\"\r\n                (btnClick)=\"onRowCheck()\"\r\n            ></bsu-barsa-question-answer-content-actions-section>\r\n        </div>\r\n    </div>\r\n    <div class=\"tw-flex tw-grow tw-gap-8\">\r\n        <div class=\"tw-grow-0 tw-shrink-0 tw-w-12\"></div>\r\n        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink\">\r\n            <bsu-barsa-question-answer-comments-section [post]=\"mo.Post\"></bsu-barsa-question-answer-comments-section>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"] }]
+            args: [{ selector: 'bsu-barsa-answer-card', providers: [UploadService], standalone: false, template: "<div\r\n    class=\"tw-flex tw-flex-col tw-p-4 tw-border tw-border-gray-200 tw-bg-white tw-rounded-md tw-mb-8\"\r\n    [ngClass]=\"{\r\n        '!tw-bg-green-50 tw-border-t-2 tw-border-t-green-500': mo.CorrectAnswer\r\n    }\"\r\n>\r\n    @if (mo.CorrectAnswer) {\r\n    <p class=\"tw-w-full tw-text-green-500 tw-mb-6\">\u0628\u0647\u062A\u0631\u06CC\u0646 \u067E\u0627\u0633\u062E</p>\r\n    }\r\n    <div class=\"tw-flex tw-grow tw-gap-8\">\r\n        <div class=\"tw-grow-0 tw-shrink-0 tw-flex tw-flex-col tw-items-center tw-gap-8\">\r\n            <img src=\"https://picsum.photos/64/64\" class=\"size-12 rounded-full\" loading=\"lazy\"/>\r\n            <bsu-barsa-question-answer-vote-section\r\n                [vote]=\"mo.Post.CurrentUserVote.Vote\"\r\n                [voteUps]=\"mo.Post.VoteUps\"\r\n                [voteDowns]=\"mo.Post.VoteDowns\"\r\n                (voteChange)=\"onVoteChange($event)\"\r\n            ></bsu-barsa-question-answer-vote-section>\r\n        </div>\r\n        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink\">\r\n            <bsu-barsa-question-answer-creator-time-section\r\n                [post]=\"mo.Post\"\r\n            ></bsu-barsa-question-answer-creator-time-section>\r\n            <bsu-barsa-question-answer-content-actions-section\r\n                [mo]=\"mo\"\r\n                [buttons]=\"contextMenuItems\"\r\n                (btnClick)=\"onRowCheck()\"\r\n            ></bsu-barsa-question-answer-content-actions-section>\r\n        </div>\r\n    </div>\r\n    <div class=\"tw-flex tw-grow tw-gap-8\">\r\n        <div class=\"tw-grow-0 tw-shrink-0 tw-w-12\"></div>\r\n        <div class=\"tw-flex tw-flex-col tw-grow tw-shrink\">\r\n            <bsu-barsa-question-answer-comments-section [post]=\"mo.Post\"></bsu-barsa-question-answer-comments-section>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":root{--sapBackgroundColor: #fdfdfd}\n"] }]
         }] });
 
 class BarsaTagChipComponent extends BaseViewItemPropsComponent {
@@ -16064,7 +16053,7 @@ class BarsaChatMessageComponent extends BaseComponent {
         return { ...image, displayWidth, displayHeight };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaChatMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatMessageComponent, isStandalone: false, selector: "bsu-barsa-chat-message", inputs: { message: "message", showSender: "showSender", nextIsSame: "nextIsSame", pervIsSame: "pervIsSame", badge: "badge", nextHasBadge: "nextHasBadge", badgeLabel: "badgeLabel" }, outputs: { reply: "reply" }, usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\r\n    [ngClass]=\"{\r\n'tw-pt-1': pervIsSame,\r\n'tw-pt-3': !pervIsSame,\r\n}\"\r\n>\r\n    @if (badge) {\r\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\r\n        <div class=\"tw-w-fit tw-bg-zinc-500 tw-text-white tw-px-4 tw-mx-auto tw-rounded-full tw-text-md\">\r\n            {{ badgeLabel }}\r\n        </div>\r\n    </div>\r\n    }\r\n    <div\r\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\r\n        [ngClass]=\"{\r\n'tw-justify-start': message.owner.id === message.userId,\r\n'tw-flex-row-reverse': message.owner.id !== message.userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === message.userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== message.userId,\r\n    }\"\r\n    >\r\n        @if (!nextIsSame || nextHasBadge) {\r\n        <fd-avatar\r\n            size=\"s\"\r\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\r\n            [circle]=\"true\"\r\n            [image]=\"message.owner?.avatar\"\r\n            [placeholder]=\"message.owner.avatar ? false : true\"\r\n        ></fd-avatar>\r\n        } @if (!nextIsSame || nextHasBadge) {\r\n        <div\r\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\r\n            [ngClass]=\"{\r\n                'tw-right-11 tw-border-b-green-100 tw-border-l-green-100 tw-border-r-transparent':\r\n                    message.owner.id === message.userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== message.userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            [@inPaneAnimation]=\"animationState\"\r\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\r\n            [ngClass]=\"{\r\n                '!tw-rounded-br-none':\r\n                    message.owner.id === message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === message.userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== message.userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId && !message.image,\r\n'tw-bg-default': message.owner.id !== message.userId && !message.image,\r\n'tw-absolute tw-top-0 tw-right-0 tw-pb-8 tw-w-full tw-rounded-tr-2xl tw-bg-gradient-to-b tw-to-transparent': message.image,\r\n'tw-from-green-100': message.owner.id === message.userId && message.image,\r\n'tw-from-default': message.owner.id !== message.userId && message.image,\r\n                    }\"\r\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\r\n            >\r\n                {{ message.owner.name }}\r\n            </div>\r\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100/[.3]': message.owner.id === message.userId,\r\n'tw-bg-default/[.3]': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\r\n            >\r\n                <a\r\n                    [download]=\"message.image.name\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\r\n                    class=\"tw-absolute tw-w-full tw-h-full tw-bg-black/[.4] dark:tw-bg-white/[.4] tw-opacity-0 hover:tw-opacity-100 tw-transition-all tw-cursor-pointer tw-flex tw-justify-center tw-items-center\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\r\n                </a>\r\n                <img\r\n                    [ngStyle]=\"{\r\n                        width: image.displayWidth + 'px',\r\n                        height: image.displayHeight + 'px'\r\n                    }\"\r\n                    [src]=\"image.url\"\r\n                />\r\n            </div>\r\n            } } @for(file of message.files;track file.Id) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\r\n            >\r\n                <a\r\n                    downloadFiles\r\n                    [files]=\"[file]\"\r\n                    class=\"tw-shrink-0 tw-row-0 tw-size-12 tw-rounded-lg tw-bg-orange-400 tw-flex tw-justify-center tw-items-center tw-cursor-pointer tw-transition-all hover:tw-bg-orange-600\"\r\n                >\r\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\r\n                        {{ file.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span\r\n                        class=\"tw-font-bold tw-text-md tw-text-base tw-truncate tw-max-w-48\"\r\n                        [attr.title]=\"file.FileName\"\r\n                    >\r\n                        {{ file.FileName }}</span\r\n                    >\r\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\r\n                        {{ file.Size }}KB</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\r\n                [innerHTML]=\"message.text\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-flex tw-w-full tw-px-2 tw-pt-1 tw-pb-2 tw-items-center tw-gap-2 tw-justify-end\"\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== message.userId,\r\n}\"\r\n            >\r\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">\r\n                    {{ message.createdAt | utilDateToHhMm }}\r\n                    @if(message.owner.id === message.userId){\r\n                    <bsu-barsa-chat-message-status\r\n                        [messageSent]=\"true\"\r\n                        [messageRead]=\"!!message.readAt\"\r\n                    ></bsu-barsa-chat-message-status>\r\n                    }\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #moreActions>\r\n    <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\r\n        <fd-popover-control>\r\n            <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n        </fd-popover-control>\r\n        <fd-popover-body minWidth=\"10rem\">\r\n            <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                    (click)=\"reply.emit(message)\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\r\n                </label>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: i4$3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: BarsaChatMessageStatusComponent, selector: "bsu-barsa-chat-message-status", inputs: ["messageRead", "messageSent"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files", "nozip"] }, { kind: "pipe", type: UtilDateToHhMmPipe, name: "utilDateToHhMm" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaChatMessageComponent, isStandalone: false, selector: "bsu-barsa-chat-message", inputs: { message: "message", showSender: "showSender", nextIsSame: "nextIsSame", pervIsSame: "pervIsSame", badge: "badge", nextHasBadge: "nextHasBadge", badgeLabel: "badgeLabel" }, outputs: { reply: "reply" }, usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\r\n    [ngClass]=\"{\r\n'tw-pt-1': pervIsSame,\r\n'tw-pt-3': !pervIsSame,\r\n}\"\r\n>\r\n    @if (badge) {\r\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\r\n        <div class=\"tw-w-fit tw-bg-zinc-500 tw-text-white tw-px-4 tw-mx-auto tw-rounded-full tw-text-md\">\r\n            {{ badgeLabel }}\r\n        </div>\r\n    </div>\r\n    }\r\n    <div\r\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\r\n        [ngClass]=\"{\r\n'tw-justify-start': message.owner.id === message.userId,\r\n'tw-flex-row-reverse': message.owner.id !== message.userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === message.userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== message.userId,\r\n    }\"\r\n    >\r\n        @if (!nextIsSame || nextHasBadge) {\r\n        <fd-avatar\r\n            size=\"s\"\r\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\r\n            [circle]=\"true\"\r\n            [image]=\"message.owner?.avatar\"\r\n            [placeholder]=\"message.owner.avatar ? false : true\"\r\n        ></fd-avatar>\r\n        } @if (!nextIsSame || nextHasBadge) {\r\n        <div\r\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\r\n            [ngClass]=\"{\r\n                'tw-right-11 tw-border-b-green-100 tw-border-l-green-100 tw-border-r-transparent':\r\n                    message.owner.id === message.userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== message.userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            [@inPaneAnimation]=\"animationState\"\r\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\r\n            [ngClass]=\"{\r\n                '!tw-rounded-br-none':\r\n                    message.owner.id === message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === message.userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== message.userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId && !message.image,\r\n'tw-bg-default': message.owner.id !== message.userId && !message.image,\r\n'tw-absolute tw-top-0 tw-right-0 tw-pb-8 tw-w-full tw-rounded-tr-2xl tw-bg-gradient-to-b tw-to-transparent': message.image,\r\n'tw-from-green-100': message.owner.id === message.userId && message.image,\r\n'tw-from-default': message.owner.id !== message.userId && message.image,\r\n                    }\"\r\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\r\n            >\r\n                {{ message.owner.name }}\r\n            </div>\r\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100/[.3]': message.owner.id === message.userId,\r\n'tw-bg-default/[.3]': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\r\n            >\r\n                <a\r\n                    [download]=\"message.image.name\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\r\n                    class=\"tw-absolute tw-w-full tw-h-full tw-bg-black/[.4] dark:tw-bg-white/[.4] tw-opacity-0 hover:tw-opacity-100 tw-transition-all tw-cursor-pointer tw-flex tw-justify-center tw-items-center\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\r\n                </a>\r\n                <img\r\n                loading=\"lazy\"\r\n                    [ngStyle]=\"{\r\n                        width: image.displayWidth + 'px',\r\n                        height: image.displayHeight + 'px'\r\n                    }\"\r\n                    [src]=\"image.url\"\r\n                />\r\n            </div>\r\n            } } @for(file of message.files;track file.Id) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\r\n            >\r\n                <a\r\n                    downloadFiles\r\n                    [files]=\"[file]\"\r\n                    class=\"tw-shrink-0 tw-row-0 tw-size-12 tw-rounded-lg tw-bg-orange-400 tw-flex tw-justify-center tw-items-center tw-cursor-pointer tw-transition-all hover:tw-bg-orange-600\"\r\n                >\r\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\r\n                        {{ file.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span\r\n                        class=\"tw-font-bold tw-text-md tw-text-base tw-truncate tw-max-w-48\"\r\n                        [attr.title]=\"file.FileName\"\r\n                    >\r\n                        {{ file.FileName }}</span\r\n                    >\r\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\r\n                        {{ file.Size }}KB</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1 tw-text-wrap sm:tw-w-[24rem] md:tw-w-[20rem] lg:tw-w-[40rem] xl:tw-w-[55rem] 2xl:tw-w-[100rem] \"\r\n                [innerHTML]=\"message.text\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-flex tw-w-full tw-px-2 tw-pt-1 tw-pb-2 tw-items-center tw-gap-2 tw-justify-end\"\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== message.userId,\r\n}\"\r\n            >\r\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">\r\n                    {{ message.createdAt | utilDateToHhMm }}\r\n                    @if(message.owner.id === message.userId){\r\n                    <bsu-barsa-chat-message-status\r\n                        [messageSent]=\"true\"\r\n                        [messageRead]=\"!!message.readAt\"\r\n                    ></bsu-barsa-chat-message-status>\r\n                    }\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #moreActions>\r\n    <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\r\n        <fd-popover-control>\r\n            <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n        </fd-popover-control>\r\n        <fd-popover-body minWidth=\"10rem\">\r\n            <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                    (click)=\"reply.emit(message)\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\r\n                </label>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$7.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: i4$3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: BarsaChatMessageStatusComponent, selector: "bsu-barsa-chat-message-status", inputs: ["messageRead", "messageSent"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files", "nozip"] }, { kind: "pipe", type: UtilDateToHhMmPipe, name: "utilDateToHhMm" }], animations: [
             trigger('inPaneAnimation', [
                 state('hidden', style({ opacity: 0, transform: 'scale(0, 0)' })),
                 state('visible', style({ opacity: 1, transform: 'scale(1, 1)' })),
@@ -16082,7 +16071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             transition('hidden => visible', animate('300ms ease-in-out')),
                             transition('visible => hidden', animate('300ms ease-in-out'))
                         ])
-                    ], standalone: false, template: "<div\r\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\r\n    [ngClass]=\"{\r\n'tw-pt-1': pervIsSame,\r\n'tw-pt-3': !pervIsSame,\r\n}\"\r\n>\r\n    @if (badge) {\r\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\r\n        <div class=\"tw-w-fit tw-bg-zinc-500 tw-text-white tw-px-4 tw-mx-auto tw-rounded-full tw-text-md\">\r\n            {{ badgeLabel }}\r\n        </div>\r\n    </div>\r\n    }\r\n    <div\r\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\r\n        [ngClass]=\"{\r\n'tw-justify-start': message.owner.id === message.userId,\r\n'tw-flex-row-reverse': message.owner.id !== message.userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === message.userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== message.userId,\r\n    }\"\r\n    >\r\n        @if (!nextIsSame || nextHasBadge) {\r\n        <fd-avatar\r\n            size=\"s\"\r\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\r\n            [circle]=\"true\"\r\n            [image]=\"message.owner?.avatar\"\r\n            [placeholder]=\"message.owner.avatar ? false : true\"\r\n        ></fd-avatar>\r\n        } @if (!nextIsSame || nextHasBadge) {\r\n        <div\r\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\r\n            [ngClass]=\"{\r\n                'tw-right-11 tw-border-b-green-100 tw-border-l-green-100 tw-border-r-transparent':\r\n                    message.owner.id === message.userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== message.userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            [@inPaneAnimation]=\"animationState\"\r\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\r\n            [ngClass]=\"{\r\n                '!tw-rounded-br-none':\r\n                    message.owner.id === message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === message.userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== message.userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId && !message.image,\r\n'tw-bg-default': message.owner.id !== message.userId && !message.image,\r\n'tw-absolute tw-top-0 tw-right-0 tw-pb-8 tw-w-full tw-rounded-tr-2xl tw-bg-gradient-to-b tw-to-transparent': message.image,\r\n'tw-from-green-100': message.owner.id === message.userId && message.image,\r\n'tw-from-default': message.owner.id !== message.userId && message.image,\r\n                    }\"\r\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\r\n            >\r\n                {{ message.owner.name }}\r\n            </div>\r\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100/[.3]': message.owner.id === message.userId,\r\n'tw-bg-default/[.3]': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\r\n            >\r\n                <a\r\n                    [download]=\"message.image.name\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\r\n                    class=\"tw-absolute tw-w-full tw-h-full tw-bg-black/[.4] dark:tw-bg-white/[.4] tw-opacity-0 hover:tw-opacity-100 tw-transition-all tw-cursor-pointer tw-flex tw-justify-center tw-items-center\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\r\n                </a>\r\n                <img\r\n                    [ngStyle]=\"{\r\n                        width: image.displayWidth + 'px',\r\n                        height: image.displayHeight + 'px'\r\n                    }\"\r\n                    [src]=\"image.url\"\r\n                />\r\n            </div>\r\n            } } @for(file of message.files;track file.Id) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\r\n            >\r\n                <a\r\n                    downloadFiles\r\n                    [files]=\"[file]\"\r\n                    class=\"tw-shrink-0 tw-row-0 tw-size-12 tw-rounded-lg tw-bg-orange-400 tw-flex tw-justify-center tw-items-center tw-cursor-pointer tw-transition-all hover:tw-bg-orange-600\"\r\n                >\r\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\r\n                        {{ file.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span\r\n                        class=\"tw-font-bold tw-text-md tw-text-base tw-truncate tw-max-w-48\"\r\n                        [attr.title]=\"file.FileName\"\r\n                    >\r\n                        {{ file.FileName }}</span\r\n                    >\r\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\r\n                        {{ file.Size }}KB</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1\"\r\n                [innerHTML]=\"message.text\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-flex tw-w-full tw-px-2 tw-pt-1 tw-pb-2 tw-items-center tw-gap-2 tw-justify-end\"\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== message.userId,\r\n}\"\r\n            >\r\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">\r\n                    {{ message.createdAt | utilDateToHhMm }}\r\n                    @if(message.owner.id === message.userId){\r\n                    <bsu-barsa-chat-message-status\r\n                        [messageSent]=\"true\"\r\n                        [messageRead]=\"!!message.readAt\"\r\n                    ></bsu-barsa-chat-message-status>\r\n                    }\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #moreActions>\r\n    <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\r\n        <fd-popover-control>\r\n            <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n        </fd-popover-control>\r\n        <fd-popover-body minWidth=\"10rem\">\r\n            <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                    (click)=\"reply.emit(message)\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\r\n                </label>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
+                    ], standalone: false, template: "<div\r\n    class=\"tw-w-full tw-px-4 tw-flex tw-flex-wrap\"\r\n    [ngClass]=\"{\r\n'tw-pt-1': pervIsSame,\r\n'tw-pt-3': !pervIsSame,\r\n}\"\r\n>\r\n    @if (badge) {\r\n    <div class=\"tw-w-full tw-pb-6 tw-pt-5\">\r\n        <div class=\"tw-w-fit tw-bg-zinc-500 tw-text-white tw-px-4 tw-mx-auto tw-rounded-full tw-text-md\">\r\n            {{ badgeLabel }}\r\n        </div>\r\n    </div>\r\n    }\r\n    <div\r\n        class=\"tw-w-full tw-flex tw-gap-2 tw-items-end tw-relative\"\r\n        [ngClass]=\"{\r\n'tw-justify-start': message.owner.id === message.userId,\r\n'tw-flex-row-reverse': message.owner.id !== message.userId,\r\n'tw-ms-14': (nextIsSame && !nextHasBadge) && message.owner.id === message.userId,\r\n'tw-me-14': (nextIsSame && !nextHasBadge) && message.owner.id !== message.userId,\r\n    }\"\r\n    >\r\n        @if (!nextIsSame || nextHasBadge) {\r\n        <fd-avatar\r\n            size=\"s\"\r\n            [label]=\"message.owner.avatar ? '' : message.owner?.name\"\r\n            [circle]=\"true\"\r\n            [image]=\"message.owner?.avatar\"\r\n            [placeholder]=\"message.owner.avatar ? false : true\"\r\n        ></fd-avatar>\r\n        } @if (!nextIsSame || nextHasBadge) {\r\n        <div\r\n            class=\"tw-bg-transparent tw-overflow-hidden tw-size-3 tw-absolute tw-bottom-0 tw-border-[6px] tw-border-t-transparent\"\r\n            [ngClass]=\"{\r\n                'tw-right-11 tw-border-b-green-100 tw-border-l-green-100 tw-border-r-transparent':\r\n                    message.owner.id === message.userId,\r\n                'tw-left-11 tw-border-b-default tw-border-r-default tw-border-l-transparent':\r\n                    message.owner.id !== message.userId\r\n            }\"\r\n        ></div>\r\n        }\r\n        <div\r\n            [@inPaneAnimation]=\"animationState\"\r\n            class=\"tw-max-w-[80%] tw-min-w-40 tw-rounded-2xl tw-text-base tw-relative tw-overflow-hidden\"\r\n            [ngClass]=\"{\r\n                '!tw-rounded-br-none':\r\n                    message.owner.id === message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-bl-none':\r\n                    message.owner.id !== message.userId &&\r\n                    (nextHasBadge || (nextIsSame && !nextHasBadge) || !nextIsSame),\r\n                '!tw-rounded-tr-none': message.owner.id === message.userId && pervIsSame && !badge,\r\n                '!tw-rounded-tl-none': message.owner.id !== message.userId && pervIsSame && !badge\r\n            }\"\r\n        >\r\n            @if (showSender && (!pervIsSame || badge)) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId && !message.image,\r\n'tw-bg-default': message.owner.id !== message.userId && !message.image,\r\n'tw-absolute tw-top-0 tw-right-0 tw-pb-8 tw-w-full tw-rounded-tr-2xl tw-bg-gradient-to-b tw-to-transparent': message.image,\r\n'tw-from-green-100': message.owner.id === message.userId && message.image,\r\n'tw-from-default': message.owner.id !== message.userId && message.image,\r\n                    }\"\r\n                class=\"tw-font-bold tw-text-base tw-px-3 tw-pt-2 tw-z-10\"\r\n            >\r\n                {{ message.owner.name }}\r\n            </div>\r\n            } @if (message.image) { @if (imageRatio(message.image); as image) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100/[.3]': message.owner.id === message.userId,\r\n'tw-bg-default/[.3]': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-flex tw-justify-center tw-items-center tw-bg-zinc-500/[.3] tw-relative\"\r\n            >\r\n                <a\r\n                    [download]=\"message.image.name\"\r\n                    href=\"assets/bg-chat.jpg\"\r\n                    target=\"_blank\"\r\n                    class=\"tw-absolute tw-w-full tw-h-full tw-bg-black/[.4] dark:tw-bg-white/[.4] tw-opacity-0 hover:tw-opacity-100 tw-transition-all tw-cursor-pointer tw-flex tw-justify-center tw-items-center\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-default !tw-text-3xl\" glyph=\"download\"></fd-icon>\r\n                </a>\r\n                <img\r\n                loading=\"lazy\"\r\n                    [ngStyle]=\"{\r\n                        width: image.displayWidth + 'px',\r\n                        height: image.displayHeight + 'px'\r\n                    }\"\r\n                    [src]=\"image.url\"\r\n                />\r\n            </div>\r\n            } } @for(file of message.files;track file.Id) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-px-2 tw-pt-2 w-full tw-flex tw-gap-2\"\r\n            >\r\n                <a\r\n                    downloadFiles\r\n                    [files]=\"[file]\"\r\n                    class=\"tw-shrink-0 tw-row-0 tw-size-12 tw-rounded-lg tw-bg-orange-400 tw-flex tw-justify-center tw-items-center tw-cursor-pointer tw-transition-all hover:tw-bg-orange-600\"\r\n                >\r\n                    <span class=\"tw-font-bold leading-6 tw-text-lg tw-text-white\">\r\n                        {{ file.Type }}\r\n                    </span>\r\n                </a>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                    <span\r\n                        class=\"tw-font-bold tw-text-md tw-text-base tw-truncate tw-max-w-48\"\r\n                        [attr.title]=\"file.FileName\"\r\n                    >\r\n                        {{ file.FileName }}</span\r\n                    >\r\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-w-full tw-truncate\">\r\n                        {{ file.Size }}KB</span\r\n                    >\r\n                </div>\r\n            </div>\r\n            } @if (message.text) {\r\n            <div\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default': message.owner.id !== message.userId,\r\n                    }\"\r\n                class=\"tw-whitespace-pre-line tw-px-3 tw-pt-1 tw-text-wrap sm:tw-w-[24rem] md:tw-w-[20rem] lg:tw-w-[40rem] xl:tw-w-[55rem] 2xl:tw-w-[100rem] \"\r\n                [innerHTML]=\"message.text\"\r\n            ></div>\r\n            }\r\n            <div\r\n                class=\"tw-flex tw-w-full tw-px-2 tw-pt-1 tw-pb-2 tw-items-center tw-gap-2 tw-justify-end\"\r\n                [ngClass]=\"{\r\n'tw-bg-green-100': message.owner.id === message.userId,\r\n'tw-bg-default tw-flex-row-reverse': message.owner.id !== message.userId,\r\n}\"\r\n            >\r\n                <span class=\"tw-text-xs tw-text-gray-500 dark:tw-text-gray-300\">\r\n                    {{ message.createdAt | utilDateToHhMm }}\r\n                    @if(message.owner.id === message.userId){\r\n                    <bsu-barsa-chat-message-status\r\n                        [messageSent]=\"true\"\r\n                        [messageRead]=\"!!message.readAt\"\r\n                    ></bsu-barsa-chat-message-status>\r\n                    }\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #moreActions>\r\n    <fd-popover placement=\"bottom-end\" title=\"bottom-end\">\r\n        <fd-popover-control>\r\n            <button fd-button fdType=\"transparent\" [fdCompact]=\"true\" glyph=\"navigation-down-arrow\"></button>\r\n        </fd-popover-control>\r\n        <fd-popover-body minWidth=\"10rem\">\r\n            <div class=\"tw-flex tw-flex-col tw-bg-default tw-w-full\" bodyClick>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                    (click)=\"reply.emit(message)\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"undo\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u067E\u0627\u0633\u062E \u062F\u0627\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"forward\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u0627\u0631\u0633\u0627\u0644 \u06A9\u0631\u062F\u0646</span>\r\n                </label>\r\n                <label\r\n                    class=\"tw-px-4 tw-py-2 tw-flex tw-gap-2 tw-w-full hover:tw-bg-base/[.1] tw-transition-all tw-cursor-pointer\"\r\n                >\r\n                    <fd-icon class=\"!tw-text-base !tw-text-3xl\" glyph=\"delete\"></fd-icon>\r\n                    <span class=\"!tw-text-base\">\u062D\u0630\u0641</span>\r\n                </label>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], showSender: [{
@@ -16783,11 +16772,11 @@ class BarsaCardBannerComponent extends BaseViewItemPropsComponent {
         this.events.emit({ title: 'ulvCommandClick', data: { mo: this.mo, index: this.index } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaCardBannerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaCardBannerComponent, isStandalone: false, selector: "bsu-barsa-card-banner", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-card\n    cardType=\"banner\"\n    [style.height.px]=\"deviceSize === 's' ? null : parameters.Height || 300\"\n    (click)=\"rowChecked()\"\n>\n    <fd-card-media>\n        <div\n            fd-card-media-content-container            \n            [legendColor]=\"parameters.LegendColor || 13\"\n            [style.background]=\"parameters.ColorColumn | rval: mo:allColumns:true | bbbTranslate\"\n            [style.background]=\"\n                parameters.ColorColumn\n                    ? (parameters.ColorColumn | rval: mo:allColumns:true | bbbTranslate)\n                    : parameters.CustomColor\n                    ? parameters.CustomColor\n                    : null\n            \"\n        >\n            <div fd-card-media-heading [level]=\"2\">\n                {{ parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate }}\n            </div>\n            <p fd-card-media-text>\n                {{ parameters.SubtitleColumn | rval: mo:allColumns:true | bbbTranslate }}\n            </p>\n            @if (contextMenuItems.length ) {\n\n            <bsu-ulv-context-menu\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [mo]=\"mo\"\n                [index]=\"index\"\n                (commandClick)=\"onUlvCommand2()\"\n                [deviceName]=\"deviceName\"\n                [menuItems]=\"contextMenuItems\"\n                [allColumns]=\"allColumns\"\n            ></bsu-ulv-context-menu>\n            }\n        </div>\n        <div fd-card-media-image-container>\n            <!-- <bsu-barsa-img-skeleton\n                fd-card-media-image\n                [title]=\"parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate\"\n                [imageUrl]=\"\n                    (parameters.PictureColumn | rval: mo:allColumns)?.FileId\n                        | picFieldSrc: 'GetPictureFromFileInfo':null\n                \"\n                [size]=\"[parameters?.Height || 300, 0]\"\n                [widthFull]=\"true\"\n            ></bsu-barsa-img-skeleton> -->\n            <img\n                fd-card-media-image\n                [src]=\"\n                    (parameters.PictureColumn | rval: mo:allColumns)?.FileId\n                        | picFieldSrc: 'GetPictureFromFileInfo':null\n                \"\n                [alt]=\"parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate\"\n                [style.height.px]=\"parameters?.Height || 300\"\n            />\n        </div>\n    </fd-card-media>\n</fd-card>\n\n", styles: [""], dependencies: [{ kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardMediaComponent, selector: "fd-card-media", inputs: ["ariaRoleDescription", "hasPadding", "shellColor", "legendColor"] }, { kind: "directive", type: i7$3.CardMediaImageDirective, selector: "[fd-card-media-image]" }, { kind: "directive", type: i7$3.CardMediaImageContainerDirective, selector: "[fd-card-media-image-container]" }, { kind: "directive", type: i7$3.CardMediaContentContainerDirective, selector: "[fd-card-media-content-container]", inputs: ["isOverlay", "shellColor", "legendColor"] }, { kind: "directive", type: i7$3.CardMediaHeadingDirective, selector: "[fd-card-media-heading]", inputs: ["id", "level"] }, { kind: "directive", type: i7$3.CardMediaTextDirective, selector: "[fd-card-media-text]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaCardBannerComponent, isStandalone: false, selector: "bsu-barsa-card-banner", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-card\n    cardType=\"banner\"\n    [style.height.px]=\"deviceSize === 's' ? null : parameters.Height || 300\"\n    (click)=\"rowChecked()\"\n>\n    <fd-card-media>\n        <div\n            fd-card-media-content-container            \n            [legendColor]=\"parameters.LegendColor || 13\"\n            [style.background]=\"parameters.ColorColumn | rval: mo:allColumns:true | bbbTranslate\"\n            [style.background]=\"\n                parameters.ColorColumn\n                    ? (parameters.ColorColumn | rval: mo:allColumns:true | bbbTranslate)\n                    : parameters.CustomColor\n                    ? parameters.CustomColor\n                    : null\n            \"\n        >\n            <div fd-card-media-heading [level]=\"2\">\n                {{ parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate }}\n            </div>\n            <p fd-card-media-text>\n                {{ parameters.SubtitleColumn | rval: mo:allColumns:true | bbbTranslate }}\n            </p>\n            @if (contextMenuItems.length ) {\n\n            <bsu-ulv-context-menu\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [mo]=\"mo\"\n                [index]=\"index\"\n                (commandClick)=\"onUlvCommand2()\"\n                [deviceName]=\"deviceName\"\n                [menuItems]=\"contextMenuItems\"\n                [allColumns]=\"allColumns\"\n            ></bsu-ulv-context-menu>\n            }\n        </div>\n        <div fd-card-media-image-container>\n            <!-- <bsu-barsa-img-skeleton\n                fd-card-media-image\n                [title]=\"parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate\"\n                [imageUrl]=\"\n                    (parameters.PictureColumn | rval: mo:allColumns)?.FileId\n                        | picFieldSrc: 'GetPictureFromFileInfo':null\n                \"\n                [size]=\"[parameters?.Height || 300, 0]\"\n                [widthFull]=\"true\"\n            ></bsu-barsa-img-skeleton> -->\n            <img\n                fd-card-media-image\n                [src]=\"\n                    (parameters.PictureColumn | rval: mo:allColumns)?.FileId\n                        | picFieldSrc: 'GetPictureFromFileInfo':null\n                \"\n                [alt]=\"parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate\"\n                [style.height.px]=\"parameters?.Height || 300\"\n                loading=\"lazy\"\n            />\n        </div>\n    </fd-card-media>\n</fd-card>\n\n", styles: [""], dependencies: [{ kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardMediaComponent, selector: "fd-card-media", inputs: ["ariaRoleDescription", "hasPadding", "shellColor", "legendColor"] }, { kind: "directive", type: i7$3.CardMediaImageDirective, selector: "[fd-card-media-image]" }, { kind: "directive", type: i7$3.CardMediaImageContainerDirective, selector: "[fd-card-media-image-container]" }, { kind: "directive", type: i7$3.CardMediaContentContainerDirective, selector: "[fd-card-media-content-container]", inputs: ["isOverlay", "shellColor", "legendColor"] }, { kind: "directive", type: i7$3.CardMediaHeadingDirective, selector: "[fd-card-media-heading]", inputs: ["id", "level"] }, { kind: "directive", type: i7$3.CardMediaTextDirective, selector: "[fd-card-media-text]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { 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: "20.0.6", ngImport: i0, type: BarsaCardBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-card-banner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-card\n    cardType=\"banner\"\n    [style.height.px]=\"deviceSize === 's' ? null : parameters.Height || 300\"\n    (click)=\"rowChecked()\"\n>\n    <fd-card-media>\n        <div\n            fd-card-media-content-container            \n            [legendColor]=\"parameters.LegendColor || 13\"\n            [style.background]=\"parameters.ColorColumn | rval: mo:allColumns:true | bbbTranslate\"\n            [style.background]=\"\n                parameters.ColorColumn\n                    ? (parameters.ColorColumn | rval: mo:allColumns:true | bbbTranslate)\n                    : parameters.CustomColor\n                    ? parameters.CustomColor\n                    : null\n            \"\n        >\n            <div fd-card-media-heading [level]=\"2\">\n                {{ parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate }}\n            </div>\n            <p fd-card-media-text>\n                {{ parameters.SubtitleColumn | rval: mo:allColumns:true | bbbTranslate }}\n            </p>\n            @if (contextMenuItems.length ) {\n\n            <bsu-ulv-context-menu\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [mo]=\"mo\"\n                [index]=\"index\"\n                (commandClick)=\"onUlvCommand2()\"\n                [deviceName]=\"deviceName\"\n                [menuItems]=\"contextMenuItems\"\n                [allColumns]=\"allColumns\"\n            ></bsu-ulv-context-menu>\n            }\n        </div>\n        <div fd-card-media-image-container>\n            <!-- <bsu-barsa-img-skeleton\n                fd-card-media-image\n                [title]=\"parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate\"\n                [imageUrl]=\"\n                    (parameters.PictureColumn | rval: mo:allColumns)?.FileId\n                        | picFieldSrc: 'GetPictureFromFileInfo':null\n                \"\n                [size]=\"[parameters?.Height || 300, 0]\"\n                [widthFull]=\"true\"\n            ></bsu-barsa-img-skeleton> -->\n            <img\n                fd-card-media-image\n                [src]=\"\n                    (parameters.PictureColumn | rval: mo:allColumns)?.FileId\n                        | picFieldSrc: 'GetPictureFromFileInfo':null\n                \"\n                [alt]=\"parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate\"\n                [style.height.px]=\"parameters?.Height || 300\"\n            />\n        </div>\n    </fd-card-media>\n</fd-card>\n\n" }]
+            args: [{ selector: 'bsu-barsa-card-banner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-card\n    cardType=\"banner\"\n    [style.height.px]=\"deviceSize === 's' ? null : parameters.Height || 300\"\n    (click)=\"rowChecked()\"\n>\n    <fd-card-media>\n        <div\n            fd-card-media-content-container            \n            [legendColor]=\"parameters.LegendColor || 13\"\n            [style.background]=\"parameters.ColorColumn | rval: mo:allColumns:true | bbbTranslate\"\n            [style.background]=\"\n                parameters.ColorColumn\n                    ? (parameters.ColorColumn | rval: mo:allColumns:true | bbbTranslate)\n                    : parameters.CustomColor\n                    ? parameters.CustomColor\n                    : null\n            \"\n        >\n            <div fd-card-media-heading [level]=\"2\">\n                {{ parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate }}\n            </div>\n            <p fd-card-media-text>\n                {{ parameters.SubtitleColumn | rval: mo:allColumns:true | bbbTranslate }}\n            </p>\n            @if (contextMenuItems.length ) {\n\n            <bsu-ulv-context-menu\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [mo]=\"mo\"\n                [index]=\"index\"\n                (commandClick)=\"onUlvCommand2()\"\n                [deviceName]=\"deviceName\"\n                [menuItems]=\"contextMenuItems\"\n                [allColumns]=\"allColumns\"\n            ></bsu-ulv-context-menu>\n            }\n        </div>\n        <div fd-card-media-image-container>\n            <!-- <bsu-barsa-img-skeleton\n                fd-card-media-image\n                [title]=\"parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate\"\n                [imageUrl]=\"\n                    (parameters.PictureColumn | rval: mo:allColumns)?.FileId\n                        | picFieldSrc: 'GetPictureFromFileInfo':null\n                \"\n                [size]=\"[parameters?.Height || 300, 0]\"\n                [widthFull]=\"true\"\n            ></bsu-barsa-img-skeleton> -->\n            <img\n                fd-card-media-image\n                [src]=\"\n                    (parameters.PictureColumn | rval: mo:allColumns)?.FileId\n                        | picFieldSrc: 'GetPictureFromFileInfo':null\n                \"\n                [alt]=\"parameters.TitleColumn | rval: mo:allColumns:true | bbbTranslate\"\n                [style.height.px]=\"parameters?.Height || 300\"\n                loading=\"lazy\"\n            />\n        </div>\n    </fd-card-media>\n</fd-card>\n\n" }]
         }] });
 
 class BarsaThemeComponent extends BaseComponent {
@@ -16938,11 +16927,11 @@ class BarsaImgSkeletonComponent extends BaseComponent {
         this.hideSkeleton = signal(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaImgSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BarsaImgSkeletonComponent, isStandalone: false, selector: "bsu-barsa-img-skeleton", inputs: { title: "title", size: "size", imageUrl: "imageUrl", widthFull: "widthFull" }, usesInheritance: true, ngImport: i0, template: "<fd-skeleton\n    [style.display]=\"!hideSkeleton() ? null : 'none'\"\n    type=\"rectangle\"\n    [style.height.px]=\"size[0]\"\n    width=\"100%\"\n></fd-skeleton>\n<img\n    width=\"100%\"\n    [src]=\"imageUrl\"\n    [alt]=\"title\"\n    [style.max-height.px]=\"size[0]\"\n    [style.max-width]=\"widthFull ? '100%' : size[1] + 'px'\"\n    [style.display]=\"!hideSkeleton() ? 'none' : null\"\n    (load)=\"hideSkeleton.set(true)\"\n/>\n\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: i1$7.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: BarsaImgSkeletonComponent, isStandalone: false, selector: "bsu-barsa-img-skeleton", inputs: { title: "title", size: "size", imageUrl: "imageUrl", widthFull: "widthFull" }, usesInheritance: true, ngImport: i0, template: "<fd-skeleton\n    [style.display]=\"!hideSkeleton() ? null : 'none'\"\n    type=\"rectangle\"\n    [style.height.px]=\"size[0]\"\n    width=\"100%\"\n></fd-skeleton>\n<img\n    width=\"100%\"\n    [src]=\"imageUrl\"\n    [alt]=\"title\"\n    [style.max-height.px]=\"size[0]\"\n    [style.max-width]=\"widthFull ? '100%' : size[1] + 'px'\"\n    [style.display]=\"!hideSkeleton() ? 'none' : null\"\n    (load)=\"hideSkeleton.set(true)\"    \n/>\n\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: i1$7.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaImgSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-img-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-skeleton\n    [style.display]=\"!hideSkeleton() ? null : 'none'\"\n    type=\"rectangle\"\n    [style.height.px]=\"size[0]\"\n    width=\"100%\"\n></fd-skeleton>\n<img\n    width=\"100%\"\n    [src]=\"imageUrl\"\n    [alt]=\"title\"\n    [style.max-height.px]=\"size[0]\"\n    [style.max-width]=\"widthFull ? '100%' : size[1] + 'px'\"\n    [style.display]=\"!hideSkeleton() ? 'none' : null\"\n    (load)=\"hideSkeleton.set(true)\"\n/>\n\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'bsu-barsa-img-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-skeleton\n    [style.display]=\"!hideSkeleton() ? null : 'none'\"\n    type=\"rectangle\"\n    [style.height.px]=\"size[0]\"\n    width=\"100%\"\n></fd-skeleton>\n<img\n    width=\"100%\"\n    [src]=\"imageUrl\"\n    [alt]=\"title\"\n    [style.max-height.px]=\"size[0]\"\n    [style.max-width]=\"widthFull ? '100%' : size[1] + 'px'\"\n    [style.display]=\"!hideSkeleton() ? 'none' : null\"\n    (load)=\"hideSkeleton.set(true)\"    \n/>\n\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], size: [{
@@ -17088,11 +17077,11 @@ class BarsaMegamenuComponent extends BaseComponent {
         this.sideNavScroll.nativeElement.scrollBy({ left: 200, behavior: 'smooth' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaMegamenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaMegamenuComponent, isStandalone: false, selector: "bsu-barsa-megamenu", inputs: { menuGroups: "menuGroups", titleKey: "titleKey", iconKey: "iconKey", deviceSize: "deviceSize" }, outputs: { visibilityChange: "visibilityChange" }, viewQueries: [{ propertyName: "sideNavScroll", first: true, predicate: ["sideNavScroll"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-side-nav>\r\n    <div class=\"side-nav-wrapper tw-relative\">\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn left\" (click)=\"onScrollSideNavLeft()\">{{ rtl() ? '\u2039' : '\u203A' }}</button>}\r\n        <div\r\n            fd-side-nav-main\r\n            #sideNavScroll\r\n            class=\"side-scroll-container tw-overflow-x-auto tw-flex tw-whitespace-nowrap tw-scroll-smooth\"\r\n            [class.tw-px-8]=\"showScrollButtons()\"\r\n        >\r\n            <ul\r\n                fd-nested-list\r\n                class=\"fd-shellbar--xl\"\r\n                [noBorder]=\"true\"\r\n                [style.width]=\"showScrollButtons() ? 'auto' : '100%'\"\r\n            >\r\n                @for (group of menuGroups; track group.id; let i = $index) {\r\n                <li\r\n                    class=\"tw-inline-block\"\r\n                    fd-nested-list-item\r\n                    [routerLink]=\"group.routePath && !group.children?.length ? [group.routePath] : null\"\r\n                    [routerLinkActive]=\"[group.children?.length ? '' : 'active']\"\r\n                >\r\n                    <fd-popover\r\n                        [noArrow]=\"true\"\r\n                        [disabled]=\"!group.children?.length && !group.items?.length\"\r\n                        placement=\"bottom-start\"\r\n                        #popover\r\n                        (beforeOpen)=\"onPopoverBeforeOpen(group)\"\r\n                    >\r\n                        <fd-popover-control>\r\n                            <a fd-nested-list-link (click)=\"onMainGroupClick(group)\">\r\n                                @if(group.icon){\r\n                                <i fd-nested-list-icon [ngClass]=\"'fd-button--' + group.color\" [glyph]=\"group.icon\"></i>\r\n                                }@else if(group.iconImage){\r\n                                <span class=\"tw-w-8 tw-flex\">\r\n                                    <img [src]=\"group.iconImage\" />\r\n                                </span>\r\n                                }\r\n                                <span fd-nested-list-title [ngClass]=\"'fd-button--' + group.color\"\r\n                                    >{{ group.title | bbbTranslate }}\r\n                                    @if(group.children?.length || group.items?.length){\r\n                                    <svg\r\n                                        class=\"tw-w-4 tw-h-4 tw-mt-0.5\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                    >\r\n                                        <path\r\n                                            stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\"\r\n                                            stroke-width=\"2\"\r\n                                            d=\"M19 9l-7 7-7-7\"\r\n                                        />\r\n                                    </svg>\r\n                                    }\r\n                                </span>\r\n                            </a>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <!-- <fd-toolbar>\r\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                            <fd-input-group\r\n                                glyph=\"decline\"\r\n                                glyphAriaLabel=\"Clear\"\r\n                                placeholder=\"Search\"\r\n                                [button]=\"true\"\r\n                                [disabled]=\"false\"\r\n                            >\r\n                            </fd-input-group>\r\n                        </fd-toolbar> -->\r\n                            <div class=\"tw-grid tw-gap-1 mega-menu\">\r\n                                @if(group.items?.length){\r\n                                <ng-template\r\n                                    *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: group, hideTitle: true }\"\r\n                                >\r\n                                </ng-template>\r\n                                } @for (childGroup of group.children; track childGroup.id) {\r\n                                <ng-template\r\n                                    *ngTemplateOutlet=\"\r\n                                        ulAppTileGroup;\r\n                                        context: { $implicit: childGroup, hideTitle: false }\r\n                                    \"\r\n                                >\r\n                                </ng-template>\r\n                                }\r\n                            </div>\r\n                            <div fd-bar aria-label=\"Default Bar\" barDesign=\"footer\">\r\n                                <div fd-bar-left></div>\r\n                                <div fd-bar-middle></div>\r\n                                <div fd-bar-right>\r\n                                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"popover.close()\">\r\n                                        {{ 'Close' | bbbTranslate }}</fd-button-bar\r\n                                    >\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </div>\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn right\" (click)=\"onScrollSideNavRight()\">{{ rtl() ? '\u203A' : '\u2039' }}</button>}\r\n    </div>\r\n</fd-side-nav>\r\n<ng-template #ulAppTileGroup let-group let-hideTitle=\"hideTitle\">\r\n    <ul fd-list fdCompact [noBorder]=\"true\">\r\n        <li fd-list-group-header [class.!tw-h-4]=\"hideTitle\">\r\n            <span fd-list-title>{{ hideTitle ? '' : (group.title | bbbTranslate) }}</span>\r\n        </li>\r\n    </ul>\r\n    <ul\r\n        fd-list\r\n        [byline]=\"true\"\r\n        class=\"tw-grid tw-grid-cols-2\"\r\n        [class.!tw-flex]=\"deviceSize === 's'\"\r\n        [class.tw-flex-col]=\"deviceSize === 's'\"\r\n        [noBorder]=\"true\"\r\n        fdCompact\r\n    >\r\n        @for (item of group.items; track index;let index = $index) {\r\n        <li fd-list-item fdCompact>\r\n            <a fd-list-link bodyClick (click)=\"item.handleClick(item)\" fdCompact>\r\n                @if(item.icon){\r\n                <span fd-list-thumbnail><fd-icon [glyph]=\"item.icon\" style=\"font-size: large\"></fd-icon></span>\r\n                }@else if(item.iconImage){\r\n                <span class=\"fd-list__thumbnail\">\r\n                    <img [src]=\"item.iconImage\" />\r\n                </span>\r\n                }@else {\r\n                <span fd-list-thumbnail><fd-icon glyph=\"action\" style=\"font-size: large\"></fd-icon></span>\r\n                }\r\n                <div fd-list-content fdCompact>\r\n                    <div fd-list-title>{{ item.title | bbbTranslate }}</div>\r\n                    <div fd-list-byline>{{ item.subtitle | bbbTranslate }}</div>\r\n                </div>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-start:0rem}fd-side-nav ul li.active{background-color:var(--sapList_SelectionBackgroundColor)}fd-side-nav ul li a{height:var(--megamenu-height);min-width:5rem;border:none}fd-side-nav ul li a.is-selected{background-color:transparent}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}.side-nav-wrapper{position:relative}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background-color:#ffffffe6;border:none;z-index:10;width:32px;height:32px;font-size:20px;cursor:pointer;box-shadow:0 0 5px #0000004d;border-radius:50%;display:flex;align-items:center;justify-content:center}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.side-scroll-container{scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none}.side-scroll-container::-webkit-scrollbar{height:6px;opacity:0;transition:opacity .3s ease-in-out}.side-scroll-container:hover::-webkit-scrollbar{opacity:1}.side-scroll-container::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.side-scroll-container::-webkit-scrollbar-track{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: i4$3.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.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i7.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i7.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i7$5.NestedListDirective, selector: "[fdNestedList], [fd-nested-list]", inputs: ["textOnly", "ariaRoledescriptionTree", "ariaRoledescriptionMenuBar", "ariaLabelSelected"] }, { kind: "directive", type: i7$5.NestedLinkDirective, selector: "[fdNestedLink], [fd-nested-list-link]", inputs: ["onClickCallback", "selected", "ariaDescribedby"], outputs: ["selectedChange"] }, { kind: "directive", type: i7$5.NestedItemDirective, selector: "[fdNestedItem], [fd-nested-list-item]", inputs: ["expanded"], outputs: ["expandedChange", "keyboardTriggered"] }, { kind: "component", type: i7$5.NestedListIconComponent, selector: "[fdNestedDirectivesIcon], [fd-nested-list-icon]", inputs: ["role"] }, { kind: "directive", type: i7$5.NestedListTitleDirective, selector: "[fdNestedDirectivesTitle], [fd-nested-list-title]" }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i9$1.SideNavigationComponent, selector: "fd-side-nav", inputs: ["sideNavigationConfiguration", "condensed", "collapseWidth", "selectable"] }, { kind: "directive", type: i9$1.SideNavigationMainDirective, selector: "[fdSideNavigationMain], [fd-side-nav-main]" }, { kind: "directive", type: i3$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$9.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaMegamenuComponent, isStandalone: false, selector: "bsu-barsa-megamenu", inputs: { menuGroups: "menuGroups", titleKey: "titleKey", iconKey: "iconKey", deviceSize: "deviceSize" }, outputs: { visibilityChange: "visibilityChange" }, viewQueries: [{ propertyName: "sideNavScroll", first: true, predicate: ["sideNavScroll"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-side-nav>\r\n    <div class=\"side-nav-wrapper tw-relative\">\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn left\" (click)=\"onScrollSideNavLeft()\">{{ rtl() ? '\u2039' : '\u203A' }}</button>}\r\n        <div\r\n            fd-side-nav-main\r\n            #sideNavScroll\r\n            class=\"side-scroll-container tw-overflow-x-auto tw-flex tw-whitespace-nowrap tw-scroll-smooth\"\r\n            [class.tw-px-8]=\"showScrollButtons()\"\r\n        >\r\n            <ul\r\n                fd-nested-list\r\n                class=\"fd-shellbar--xl\"\r\n                [noBorder]=\"true\"\r\n                [style.width]=\"showScrollButtons() ? 'auto' : '100%'\"\r\n            >\r\n                @for (group of menuGroups; track group.id; let i = $index) {\r\n                <li\r\n                    class=\"tw-inline-block\"\r\n                    fd-nested-list-item\r\n                    [routerLink]=\"group.routePath && !group.children?.length ? [group.routePath] : null\"\r\n                    [routerLinkActive]=\"[group.children?.length ? '' : 'active']\"\r\n                >\r\n                    <fd-popover\r\n                        [noArrow]=\"true\"\r\n                        [disabled]=\"!group.children?.length && !group.items?.length\"\r\n                        placement=\"bottom-start\"\r\n                        #popover\r\n                        (beforeOpen)=\"onPopoverBeforeOpen(group)\"\r\n                    >\r\n                        <fd-popover-control>\r\n                            <a fd-nested-list-link (click)=\"onMainGroupClick(group)\">\r\n                                @if(group.icon){\r\n                                <i fd-nested-list-icon [ngClass]=\"'fd-button--' + group.color\" [glyph]=\"group.icon\"></i>\r\n                                }@else if(group.iconImage){\r\n                                <span class=\"tw-w-8 tw-flex\">\r\n                                    <img [src]=\"group.iconImage\" loading=\"lazy\"/>\r\n                                </span>\r\n                                }\r\n                                <span fd-nested-list-title [ngClass]=\"'fd-button--' + group.color\"\r\n                                    >{{ group.title | bbbTranslate }}\r\n                                    @if(group.children?.length || group.items?.length){\r\n                                    <svg\r\n                                        class=\"tw-w-4 tw-h-4 tw-mt-0.5\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                    >\r\n                                        <path\r\n                                            stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\"\r\n                                            stroke-width=\"2\"\r\n                                            d=\"M19 9l-7 7-7-7\"\r\n                                        />\r\n                                    </svg>\r\n                                    }\r\n                                </span>\r\n                            </a>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <!-- <fd-toolbar>\r\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                            <fd-input-group\r\n                                glyph=\"decline\"\r\n                                glyphAriaLabel=\"Clear\"\r\n                                placeholder=\"Search\"\r\n                                [button]=\"true\"\r\n                                [disabled]=\"false\"\r\n                            >\r\n                            </fd-input-group>\r\n                        </fd-toolbar> -->\r\n                            <div class=\"tw-grid tw-gap-1 mega-menu\">\r\n                                @if(group.items?.length){\r\n                                <ng-template\r\n                                    *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: group, hideTitle: true }\"\r\n                                >\r\n                                </ng-template>\r\n                                } @for (childGroup of group.children; track childGroup.id) {\r\n                                <ng-template\r\n                                    *ngTemplateOutlet=\"\r\n                                        ulAppTileGroup;\r\n                                        context: { $implicit: childGroup, hideTitle: false }\r\n                                    \"\r\n                                >\r\n                                </ng-template>\r\n                                }\r\n                            </div>\r\n                            <div fd-bar aria-label=\"Default Bar\" barDesign=\"footer\">\r\n                                <div fd-bar-left></div>\r\n                                <div fd-bar-middle></div>\r\n                                <div fd-bar-right>\r\n                                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"popover.close()\">\r\n                                        {{ 'Close' | bbbTranslate }}</fd-button-bar\r\n                                    >\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </div>\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn right\" (click)=\"onScrollSideNavRight()\">{{ rtl() ? '\u203A' : '\u2039' }}</button>}\r\n    </div>\r\n</fd-side-nav>\r\n<ng-template #ulAppTileGroup let-group let-hideTitle=\"hideTitle\">\r\n    <ul fd-list fdCompact [noBorder]=\"true\">\r\n        <li fd-list-group-header [class.!tw-h-4]=\"hideTitle\">\r\n            <span fd-list-title>{{ hideTitle ? '' : (group.title | bbbTranslate) }}</span>\r\n        </li>\r\n    </ul>\r\n    <ul\r\n        fd-list\r\n        [byline]=\"true\"\r\n        class=\"tw-grid tw-grid-cols-2\"\r\n        [class.!tw-flex]=\"deviceSize === 's'\"\r\n        [class.tw-flex-col]=\"deviceSize === 's'\"\r\n        [noBorder]=\"true\"\r\n        fdCompact\r\n    >\r\n        @for (item of group.items; track index;let index = $index) {\r\n        <li fd-list-item fdCompact>\r\n            <a fd-list-link bodyClick (click)=\"item.handleClick(item)\" fdCompact>\r\n                @if(item.icon){\r\n                <span fd-list-thumbnail><fd-icon [glyph]=\"item.icon\" style=\"font-size: large\"></fd-icon></span>\r\n                }@else if(item.iconImage){\r\n                <span class=\"fd-list__thumbnail\">\r\n                    <img [src]=\"item.iconImage\" loading=\"lazy\"/>\r\n                </span>\r\n                }@else {\r\n                <span fd-list-thumbnail><fd-icon glyph=\"action\" style=\"font-size: large\"></fd-icon></span>\r\n                }\r\n                <div fd-list-content fdCompact>\r\n                    <div fd-list-title>{{ item.title | bbbTranslate }}</div>\r\n                    <div fd-list-byline>{{ item.subtitle | bbbTranslate }}</div>\r\n                </div>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-start:0rem}fd-side-nav ul li.active{background-color:var(--sapList_SelectionBackgroundColor)}fd-side-nav ul li a{height:var(--megamenu-height);min-width:5rem;border:none}fd-side-nav ul li a.is-selected{background-color:transparent}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}.side-nav-wrapper{position:relative}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background-color:#ffffffe6;border:none;z-index:10;width:32px;height:32px;font-size:20px;cursor:pointer;box-shadow:0 0 5px #0000004d;border-radius:50%;display:flex;align-items:center;justify-content:center}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.side-scroll-container{scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none}.side-scroll-container::-webkit-scrollbar{height:6px;opacity:0;transition:opacity .3s ease-in-out}.side-scroll-container:hover::-webkit-scrollbar{opacity:1}.side-scroll-container::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.side-scroll-container::-webkit-scrollbar-track{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: i4$3.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.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i7.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i7.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i7$5.NestedListDirective, selector: "[fdNestedList], [fd-nested-list]", inputs: ["textOnly", "ariaRoledescriptionTree", "ariaRoledescriptionMenuBar", "ariaLabelSelected"] }, { kind: "directive", type: i7$5.NestedLinkDirective, selector: "[fdNestedLink], [fd-nested-list-link]", inputs: ["onClickCallback", "selected", "ariaDescribedby"], outputs: ["selectedChange"] }, { kind: "directive", type: i7$5.NestedItemDirective, selector: "[fdNestedItem], [fd-nested-list-item]", inputs: ["expanded"], outputs: ["expandedChange", "keyboardTriggered"] }, { kind: "component", type: i7$5.NestedListIconComponent, selector: "[fdNestedDirectivesIcon], [fd-nested-list-icon]", inputs: ["role"] }, { kind: "directive", type: i7$5.NestedListTitleDirective, selector: "[fdNestedDirectivesTitle], [fd-nested-list-title]" }, { kind: "component", type: i7$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i9$1.SideNavigationComponent, selector: "fd-side-nav", inputs: ["sideNavigationConfiguration", "condensed", "collapseWidth", "selectable"] }, { kind: "directive", type: i9$1.SideNavigationMainDirective, selector: "[fdSideNavigationMain], [fd-side-nav-main]" }, { kind: "directive", type: i3$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$9.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaMegamenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-side-nav>\r\n    <div class=\"side-nav-wrapper tw-relative\">\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn left\" (click)=\"onScrollSideNavLeft()\">{{ rtl() ? '\u2039' : '\u203A' }}</button>}\r\n        <div\r\n            fd-side-nav-main\r\n            #sideNavScroll\r\n            class=\"side-scroll-container tw-overflow-x-auto tw-flex tw-whitespace-nowrap tw-scroll-smooth\"\r\n            [class.tw-px-8]=\"showScrollButtons()\"\r\n        >\r\n            <ul\r\n                fd-nested-list\r\n                class=\"fd-shellbar--xl\"\r\n                [noBorder]=\"true\"\r\n                [style.width]=\"showScrollButtons() ? 'auto' : '100%'\"\r\n            >\r\n                @for (group of menuGroups; track group.id; let i = $index) {\r\n                <li\r\n                    class=\"tw-inline-block\"\r\n                    fd-nested-list-item\r\n                    [routerLink]=\"group.routePath && !group.children?.length ? [group.routePath] : null\"\r\n                    [routerLinkActive]=\"[group.children?.length ? '' : 'active']\"\r\n                >\r\n                    <fd-popover\r\n                        [noArrow]=\"true\"\r\n                        [disabled]=\"!group.children?.length && !group.items?.length\"\r\n                        placement=\"bottom-start\"\r\n                        #popover\r\n                        (beforeOpen)=\"onPopoverBeforeOpen(group)\"\r\n                    >\r\n                        <fd-popover-control>\r\n                            <a fd-nested-list-link (click)=\"onMainGroupClick(group)\">\r\n                                @if(group.icon){\r\n                                <i fd-nested-list-icon [ngClass]=\"'fd-button--' + group.color\" [glyph]=\"group.icon\"></i>\r\n                                }@else if(group.iconImage){\r\n                                <span class=\"tw-w-8 tw-flex\">\r\n                                    <img [src]=\"group.iconImage\" />\r\n                                </span>\r\n                                }\r\n                                <span fd-nested-list-title [ngClass]=\"'fd-button--' + group.color\"\r\n                                    >{{ group.title | bbbTranslate }}\r\n                                    @if(group.children?.length || group.items?.length){\r\n                                    <svg\r\n                                        class=\"tw-w-4 tw-h-4 tw-mt-0.5\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                    >\r\n                                        <path\r\n                                            stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\"\r\n                                            stroke-width=\"2\"\r\n                                            d=\"M19 9l-7 7-7-7\"\r\n                                        />\r\n                                    </svg>\r\n                                    }\r\n                                </span>\r\n                            </a>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <!-- <fd-toolbar>\r\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                            <fd-input-group\r\n                                glyph=\"decline\"\r\n                                glyphAriaLabel=\"Clear\"\r\n                                placeholder=\"Search\"\r\n                                [button]=\"true\"\r\n                                [disabled]=\"false\"\r\n                            >\r\n                            </fd-input-group>\r\n                        </fd-toolbar> -->\r\n                            <div class=\"tw-grid tw-gap-1 mega-menu\">\r\n                                @if(group.items?.length){\r\n                                <ng-template\r\n                                    *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: group, hideTitle: true }\"\r\n                                >\r\n                                </ng-template>\r\n                                } @for (childGroup of group.children; track childGroup.id) {\r\n                                <ng-template\r\n                                    *ngTemplateOutlet=\"\r\n                                        ulAppTileGroup;\r\n                                        context: { $implicit: childGroup, hideTitle: false }\r\n                                    \"\r\n                                >\r\n                                </ng-template>\r\n                                }\r\n                            </div>\r\n                            <div fd-bar aria-label=\"Default Bar\" barDesign=\"footer\">\r\n                                <div fd-bar-left></div>\r\n                                <div fd-bar-middle></div>\r\n                                <div fd-bar-right>\r\n                                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"popover.close()\">\r\n                                        {{ 'Close' | bbbTranslate }}</fd-button-bar\r\n                                    >\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </div>\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn right\" (click)=\"onScrollSideNavRight()\">{{ rtl() ? '\u203A' : '\u2039' }}</button>}\r\n    </div>\r\n</fd-side-nav>\r\n<ng-template #ulAppTileGroup let-group let-hideTitle=\"hideTitle\">\r\n    <ul fd-list fdCompact [noBorder]=\"true\">\r\n        <li fd-list-group-header [class.!tw-h-4]=\"hideTitle\">\r\n            <span fd-list-title>{{ hideTitle ? '' : (group.title | bbbTranslate) }}</span>\r\n        </li>\r\n    </ul>\r\n    <ul\r\n        fd-list\r\n        [byline]=\"true\"\r\n        class=\"tw-grid tw-grid-cols-2\"\r\n        [class.!tw-flex]=\"deviceSize === 's'\"\r\n        [class.tw-flex-col]=\"deviceSize === 's'\"\r\n        [noBorder]=\"true\"\r\n        fdCompact\r\n    >\r\n        @for (item of group.items; track index;let index = $index) {\r\n        <li fd-list-item fdCompact>\r\n            <a fd-list-link bodyClick (click)=\"item.handleClick(item)\" fdCompact>\r\n                @if(item.icon){\r\n                <span fd-list-thumbnail><fd-icon [glyph]=\"item.icon\" style=\"font-size: large\"></fd-icon></span>\r\n                }@else if(item.iconImage){\r\n                <span class=\"fd-list__thumbnail\">\r\n                    <img [src]=\"item.iconImage\" />\r\n                </span>\r\n                }@else {\r\n                <span fd-list-thumbnail><fd-icon glyph=\"action\" style=\"font-size: large\"></fd-icon></span>\r\n                }\r\n                <div fd-list-content fdCompact>\r\n                    <div fd-list-title>{{ item.title | bbbTranslate }}</div>\r\n                    <div fd-list-byline>{{ item.subtitle | bbbTranslate }}</div>\r\n                </div>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-start:0rem}fd-side-nav ul li.active{background-color:var(--sapList_SelectionBackgroundColor)}fd-side-nav ul li a{height:var(--megamenu-height);min-width:5rem;border:none}fd-side-nav ul li a.is-selected{background-color:transparent}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}.side-nav-wrapper{position:relative}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background-color:#ffffffe6;border:none;z-index:10;width:32px;height:32px;font-size:20px;cursor:pointer;box-shadow:0 0 5px #0000004d;border-radius:50%;display:flex;align-items:center;justify-content:center}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.side-scroll-container{scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none}.side-scroll-container::-webkit-scrollbar{height:6px;opacity:0;transition:opacity .3s ease-in-out}.side-scroll-container:hover::-webkit-scrollbar{opacity:1}.side-scroll-container::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.side-scroll-container::-webkit-scrollbar-track{background-color:transparent}\n"] }]
+            args: [{ selector: 'bsu-barsa-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-side-nav>\r\n    <div class=\"side-nav-wrapper tw-relative\">\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn left\" (click)=\"onScrollSideNavLeft()\">{{ rtl() ? '\u2039' : '\u203A' }}</button>}\r\n        <div\r\n            fd-side-nav-main\r\n            #sideNavScroll\r\n            class=\"side-scroll-container tw-overflow-x-auto tw-flex tw-whitespace-nowrap tw-scroll-smooth\"\r\n            [class.tw-px-8]=\"showScrollButtons()\"\r\n        >\r\n            <ul\r\n                fd-nested-list\r\n                class=\"fd-shellbar--xl\"\r\n                [noBorder]=\"true\"\r\n                [style.width]=\"showScrollButtons() ? 'auto' : '100%'\"\r\n            >\r\n                @for (group of menuGroups; track group.id; let i = $index) {\r\n                <li\r\n                    class=\"tw-inline-block\"\r\n                    fd-nested-list-item\r\n                    [routerLink]=\"group.routePath && !group.children?.length ? [group.routePath] : null\"\r\n                    [routerLinkActive]=\"[group.children?.length ? '' : 'active']\"\r\n                >\r\n                    <fd-popover\r\n                        [noArrow]=\"true\"\r\n                        [disabled]=\"!group.children?.length && !group.items?.length\"\r\n                        placement=\"bottom-start\"\r\n                        #popover\r\n                        (beforeOpen)=\"onPopoverBeforeOpen(group)\"\r\n                    >\r\n                        <fd-popover-control>\r\n                            <a fd-nested-list-link (click)=\"onMainGroupClick(group)\">\r\n                                @if(group.icon){\r\n                                <i fd-nested-list-icon [ngClass]=\"'fd-button--' + group.color\" [glyph]=\"group.icon\"></i>\r\n                                }@else if(group.iconImage){\r\n                                <span class=\"tw-w-8 tw-flex\">\r\n                                    <img [src]=\"group.iconImage\" loading=\"lazy\"/>\r\n                                </span>\r\n                                }\r\n                                <span fd-nested-list-title [ngClass]=\"'fd-button--' + group.color\"\r\n                                    >{{ group.title | bbbTranslate }}\r\n                                    @if(group.children?.length || group.items?.length){\r\n                                    <svg\r\n                                        class=\"tw-w-4 tw-h-4 tw-mt-0.5\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                    >\r\n                                        <path\r\n                                            stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\"\r\n                                            stroke-width=\"2\"\r\n                                            d=\"M19 9l-7 7-7-7\"\r\n                                        />\r\n                                    </svg>\r\n                                    }\r\n                                </span>\r\n                            </a>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <!-- <fd-toolbar>\r\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                            <fd-input-group\r\n                                glyph=\"decline\"\r\n                                glyphAriaLabel=\"Clear\"\r\n                                placeholder=\"Search\"\r\n                                [button]=\"true\"\r\n                                [disabled]=\"false\"\r\n                            >\r\n                            </fd-input-group>\r\n                        </fd-toolbar> -->\r\n                            <div class=\"tw-grid tw-gap-1 mega-menu\">\r\n                                @if(group.items?.length){\r\n                                <ng-template\r\n                                    *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: group, hideTitle: true }\"\r\n                                >\r\n                                </ng-template>\r\n                                } @for (childGroup of group.children; track childGroup.id) {\r\n                                <ng-template\r\n                                    *ngTemplateOutlet=\"\r\n                                        ulAppTileGroup;\r\n                                        context: { $implicit: childGroup, hideTitle: false }\r\n                                    \"\r\n                                >\r\n                                </ng-template>\r\n                                }\r\n                            </div>\r\n                            <div fd-bar aria-label=\"Default Bar\" barDesign=\"footer\">\r\n                                <div fd-bar-left></div>\r\n                                <div fd-bar-middle></div>\r\n                                <div fd-bar-right>\r\n                                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"popover.close()\">\r\n                                        {{ 'Close' | bbbTranslate }}</fd-button-bar\r\n                                    >\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </div>\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn right\" (click)=\"onScrollSideNavRight()\">{{ rtl() ? '\u203A' : '\u2039' }}</button>}\r\n    </div>\r\n</fd-side-nav>\r\n<ng-template #ulAppTileGroup let-group let-hideTitle=\"hideTitle\">\r\n    <ul fd-list fdCompact [noBorder]=\"true\">\r\n        <li fd-list-group-header [class.!tw-h-4]=\"hideTitle\">\r\n            <span fd-list-title>{{ hideTitle ? '' : (group.title | bbbTranslate) }}</span>\r\n        </li>\r\n    </ul>\r\n    <ul\r\n        fd-list\r\n        [byline]=\"true\"\r\n        class=\"tw-grid tw-grid-cols-2\"\r\n        [class.!tw-flex]=\"deviceSize === 's'\"\r\n        [class.tw-flex-col]=\"deviceSize === 's'\"\r\n        [noBorder]=\"true\"\r\n        fdCompact\r\n    >\r\n        @for (item of group.items; track index;let index = $index) {\r\n        <li fd-list-item fdCompact>\r\n            <a fd-list-link bodyClick (click)=\"item.handleClick(item)\" fdCompact>\r\n                @if(item.icon){\r\n                <span fd-list-thumbnail><fd-icon [glyph]=\"item.icon\" style=\"font-size: large\"></fd-icon></span>\r\n                }@else if(item.iconImage){\r\n                <span class=\"fd-list__thumbnail\">\r\n                    <img [src]=\"item.iconImage\" loading=\"lazy\"/>\r\n                </span>\r\n                }@else {\r\n                <span fd-list-thumbnail><fd-icon glyph=\"action\" style=\"font-size: large\"></fd-icon></span>\r\n                }\r\n                <div fd-list-content fdCompact>\r\n                    <div fd-list-title>{{ item.title | bbbTranslate }}</div>\r\n                    <div fd-list-byline>{{ item.subtitle | bbbTranslate }}</div>\r\n                </div>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-start:0rem}fd-side-nav ul li.active{background-color:var(--sapList_SelectionBackgroundColor)}fd-side-nav ul li a{height:var(--megamenu-height);min-width:5rem;border:none}fd-side-nav ul li a.is-selected{background-color:transparent}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}.side-nav-wrapper{position:relative}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background-color:#ffffffe6;border:none;z-index:10;width:32px;height:32px;font-size:20px;cursor:pointer;box-shadow:0 0 5px #0000004d;border-radius:50%;display:flex;align-items:center;justify-content:center}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.side-scroll-container{scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none}.side-scroll-container::-webkit-scrollbar{height:6px;opacity:0;transition:opacity .3s ease-in-out}.side-scroll-container:hover::-webkit-scrollbar{opacity:1}.side-scroll-container::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.side-scroll-container::-webkit-scrollbar-track{background-color:transparent}\n"] }]
         }], propDecorators: { menuGroups: [{
                 type: Input
             }], titleKey: [{
@@ -17318,7 +17307,7 @@ class DynamicCommandComponent extends BaseComponent {
         this._activatedRoute.params
             .pipe(takeUntil(this._onDestroy$), tap(() => this.loading$.set(true)), map((params) => params.id), 
         // tap((id: string) => this._applicationCtrlService.selectSystemCommand(id)),
-        tap((_id) => this._applicationCtrlService.setCommandGroupsSelected(true)), switchMap((id) => from(new Promise((resolve, _reject) => BarsaApi.Common.CustomCodeManager.RunDynamicCommand(id, {}, resolve))).pipe(catchError((_err) => of(true)))), finalize(() => {
+        tap((_id) => this._applicationCtrlService.setCommandGroupsSelected('')), switchMap((id) => from(new Promise((resolve, _reject) => BarsaApi.Common.CustomCodeManager.RunDynamicCommand(id, {}, resolve))).pipe(catchError((_err) => of(true)))), finalize(() => {
             this.loading$.set(false);
         }))
             .subscribe(() => {
@@ -17336,6 +17325,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 args: ['style.min-height']
             }] } });
 
+class CardReportNavigatorComponent extends ReportNavigatorComponent {
+    constructor() {
+        super(...arguments);
+        this.title = signal('');
+        this.isMobile = getDeviceIsMobile();
+    }
+    _setActiveReport(ulv) {
+        super._setActiveReport(ulv);
+        this.title.set(BarsaApi.Common.Util.TryGetValue(ulv, 'Setting.Extra.Report.Caption', ''));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardReportNavigatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: CardReportNavigatorComponent, isStandalone: false, selector: "bsu-card-report-navigator", usesInheritance: true, ngImport: i0, template: ` <fd-panel [fixed]="true" fillEmptySpace [decrement]="'1rem'" [disable]="isMobile">
+        <h5 fd-panel-title>{{ title() }}</h5>
+        <div fd-panel-content>
+            <ng-container #containerRef></ng-container>
+        </div>
+    </fd-panel>`, isInline: true, styles: ["fd-panel{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight", "setMaxHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i3$6.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$6.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i3$6.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardReportNavigatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsu-card-report-navigator', template: ` <fd-panel [fixed]="true" fillEmptySpace [decrement]="'1rem'" [disable]="isMobile">
+        <h5 fd-panel-title>{{ title() }}</h5>
+        <div fd-panel-content>
+            <ng-container #containerRef></ng-container>
+        </div>
+    </fd-panel>`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: ["fd-panel{display:block;height:100%}\n"] }]
+        }] });
+
 const components = [
     BarsaBarDownloadFileComponent,
     UiTextFieldComponent,
@@ -17556,7 +17573,8 @@ const components = [
     DynamicCommandComponent,
     BarsaChatMessageStatusComponent,
     FileGalleryViewerComponent,
-    FileCardViewerComponent
+    FileCardViewerComponent,
+    CardReportNavigatorComponent
 ];
 const pipes = [
     UploadFileStatusPipe,
@@ -17717,7 +17735,7 @@ class BarsaSapUiModule extends BaseModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaSapUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: BarsaSapUiModule, declarations: [BarsaBarDownloadFileComponent, UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, UiMapComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, BarsaTextEllipsisComponent, BarsaListFileLinearGmailComponent, BarsaLinkableItemsPanelComponent, BarsaEnumMenuButtonComponent, BarsaCardLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBarPanelComponent, BarsaFormSideContentComponent, BarsaSimpleFormComponent, FormToolbarComponent, BarsaListLayoutPanelComponent, BarsaGridLayoutPanelComponent, BarsaDynamicFieldComponent, UiMultiSelectRadioComponent, UiMultiSelectCheckboxComponent, UiNumIntSliderComponent, UiMultiSelectSliderComponent, UiMultiSelectCardComponent, UiMultiSelectSmileComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaColumnRowNumberComponent, BarsaCardRowPayamComponent, BarsaColumnRowNumberComponent, BarsaQuestionPostComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaAnswerCardComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaChipComponent, BarsaTagChipComponent, BarsaReportCardFlexViewComponent, BarsaTagsCategoryRowComponent, BarsaTagCategoriesComponent, BarsaReportOneOfListComponent, BarsaCardRowPayamComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatMessageComponent, BarsaChatUserListComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaModalComponent, BarsaTabRouteManagerComponent, BarsaBreadcrumbsComponent, BarsaRowInlineActionlistComponent, UiBpmnViewerComponent, UiNotificationViewComponent, NotificationItemActionsComponent, BarsaFormLayoutPanelComponent, UiReportCarouselViewComponent, BarsaCardBannerComponent, BarsaThemeComponent, BarsaImgSkeletonComponent, BarsaBottomMenuViewComponent, UiSignatureComponent, BarsaMegamenuComponent, UiMapReportComponent, BarsaInfobarsComponent, DynamicCommandComponent, BarsaChatMessageStatusComponent, FileGalleryViewerComponent, FileCardViewerComponent, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe, SapSizePipe, AvatarGridColPipe, ObjectStatusIconPipe, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective, DialogHandlerDirective, TableThDirective, ContentDensityDirective, DarkClassDirective, FixTabMoreDirective], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: BarsaSapUiModule, declarations: [BarsaBarDownloadFileComponent, UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, UiMapComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, BarsaTextEllipsisComponent, BarsaListFileLinearGmailComponent, BarsaLinkableItemsPanelComponent, BarsaEnumMenuButtonComponent, BarsaCardLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBarPanelComponent, BarsaFormSideContentComponent, BarsaSimpleFormComponent, FormToolbarComponent, BarsaListLayoutPanelComponent, BarsaGridLayoutPanelComponent, BarsaDynamicFieldComponent, UiMultiSelectRadioComponent, UiMultiSelectCheckboxComponent, UiNumIntSliderComponent, UiMultiSelectSliderComponent, UiMultiSelectCardComponent, UiMultiSelectSmileComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaColumnRowNumberComponent, BarsaCardRowPayamComponent, BarsaColumnRowNumberComponent, BarsaQuestionPostComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaAnswerCardComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaChipComponent, BarsaTagChipComponent, BarsaReportCardFlexViewComponent, BarsaTagsCategoryRowComponent, BarsaTagCategoriesComponent, BarsaReportOneOfListComponent, BarsaCardRowPayamComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatMessageComponent, BarsaChatUserListComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaModalComponent, BarsaTabRouteManagerComponent, BarsaBreadcrumbsComponent, BarsaRowInlineActionlistComponent, UiBpmnViewerComponent, UiNotificationViewComponent, NotificationItemActionsComponent, BarsaFormLayoutPanelComponent, UiReportCarouselViewComponent, BarsaCardBannerComponent, BarsaThemeComponent, BarsaImgSkeletonComponent, BarsaBottomMenuViewComponent, UiSignatureComponent, BarsaMegamenuComponent, UiMapReportComponent, BarsaInfobarsComponent, DynamicCommandComponent, BarsaChatMessageStatusComponent, FileGalleryViewerComponent, FileCardViewerComponent, CardReportNavigatorComponent, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe, SapSizePipe, AvatarGridColPipe, ObjectStatusIconPipe, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective, DialogHandlerDirective, TableThDirective, ContentDensityDirective, DarkClassDirective, FixTabMoreDirective], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             BarsaNovinRayCoreModule,
@@ -17740,9 +17758,9 @@ class BarsaSapUiModule extends BaseModule {
             BarsaSapUiRoutingModule,
             PdfJsViewerModule,
             ResizableModule,
-            PlatformIconTabBarModule, i239.ContentDensityModule, ScrollingModule,
+            PlatformIconTabBarModule, i240.ContentDensityModule, ScrollingModule,
             UtilDateToHhMmPipe,
-            UtilChatTimeBadgePipe], exports: [BarsaBarDownloadFileComponent, UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, UiMapComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, BarsaTextEllipsisComponent, BarsaListFileLinearGmailComponent, BarsaLinkableItemsPanelComponent, BarsaEnumMenuButtonComponent, BarsaCardLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBarPanelComponent, BarsaFormSideContentComponent, BarsaSimpleFormComponent, FormToolbarComponent, BarsaListLayoutPanelComponent, BarsaGridLayoutPanelComponent, BarsaDynamicFieldComponent, UiMultiSelectRadioComponent, UiMultiSelectCheckboxComponent, UiNumIntSliderComponent, UiMultiSelectSliderComponent, UiMultiSelectCardComponent, UiMultiSelectSmileComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaColumnRowNumberComponent, BarsaCardRowPayamComponent, BarsaColumnRowNumberComponent, BarsaQuestionPostComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaAnswerCardComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaChipComponent, BarsaTagChipComponent, BarsaReportCardFlexViewComponent, BarsaTagsCategoryRowComponent, BarsaTagCategoriesComponent, BarsaReportOneOfListComponent, BarsaCardRowPayamComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatMessageComponent, BarsaChatUserListComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaModalComponent, BarsaTabRouteManagerComponent, BarsaBreadcrumbsComponent, BarsaRowInlineActionlistComponent, UiBpmnViewerComponent, UiNotificationViewComponent, NotificationItemActionsComponent, BarsaFormLayoutPanelComponent, UiReportCarouselViewComponent, BarsaCardBannerComponent, BarsaThemeComponent, BarsaImgSkeletonComponent, BarsaBottomMenuViewComponent, UiSignatureComponent, BarsaMegamenuComponent, UiMapReportComponent, BarsaInfobarsComponent, DynamicCommandComponent, BarsaChatMessageStatusComponent, FileGalleryViewerComponent, FileCardViewerComponent, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective, DialogHandlerDirective, TableThDirective, ContentDensityDirective, DarkClassDirective, FixTabMoreDirective, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe, SapSizePipe, AvatarGridColPipe, ObjectStatusIconPipe] }); }
+            UtilChatTimeBadgePipe], exports: [BarsaBarDownloadFileComponent, UiTextFieldComponent, LyLayoutFieldLabelComponent, UiCheckBoxComponent, UiSimpleComboComponent, UiRadioGroupComponent, UiGridComponent, UiMapComponent, LyLayoutContainerOfRootComponent, LyLayoutPanelComponent, UiReadOnlyFieldComponent, UiContainerWithButtonComponent, UiPictureFileComponent, UiMoInfoUlvComboComponent, UiMultiSelectComboComponent, UiNumDecimalUiComponent, UiNumIntUiComponent, UiTimeSpanComponent, UiFileLinearListBoxComponent, LyEmptySpaceComponent, UiSinglePictureComponent, UlvSelectionComponent, UlvToolbarComponent, UlvPagingComponent, UiGridSortSettingComponent, UiGridSortItemComponent, UiGridColumnsComponent, MaskComponent, UiInfoBarPanelComponent, UiFormPanelComponent, UiSearchCommandInfoUiComponent, UlvSettingsComponent, UiTinymceComponent, UiButtonComponent, UiDateTimeComponent, FormDialogComponent, UiMoInfoSubFormUiComponent, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, UiTextAreaComponent, LayoutControlComponent, LayoutWizardComponent, FormWizardComponent, FormDialogLessComponent, RichTextStaticComponent, UiPicturesInfoComponent, LyHorizontalLayoutComponent, LyVerticalLayoutComponent, LyTabContainerComponent, LyTabPageComponent, LyLabelComponent, UiMoInfoComboViewerComponent, UlMsgBoxAdapterComponent, UiTreeComponent, HeaderAvatarComponent, UiWorkflowPanelUiComponent, UlvContextMenuComponent, UlLoadingMaskUiComponent, UiTextFieldAutoCompleteComponent, CaptchaFieldComponent, LySimpleLabelComponent, GlobalSearchPanelComponent, GlobalSearchModuleComponent, GlobalSearchComponent, HyperlinkComponent, StaticTextComponent, UlToastAdapterComponent, MessageStripComponent, UiLinearListContainerWithButtonComponent, FundamentalDynamicFormComponent, LayoutActionsComponent, LyLayoutContainerComponent, UiUlvFormMultiSelectUiComponent, UlvFormMultiSelectComponent, UlvColumnSettingsComponent, UlvFilterSettingsComponent, UlvSortSettingsComponent, UlvGroupbySettingsComponent, BarsaListFileLinearComponent, UiPdfViewerComponent, BarsaTinyemceComponent, UiMonacoEditorComponent, BarsaMonacoEditorComponent, BarsaDateTimePickerComponent, BarsaTreeItemComponent, UiSwitchButtonComponent, UiColorUiComponent, LyLineComponent, UiUlvMainUiComponent, ManageFiltersReportComponent, ReportSearchFieldsManageComponent, ReportSearchFieldsHiddenSettingsComponent, SearchPanelComponent, ReportSearchPanelSaveComponent, UiGridFilterSettingsComponent, UiGridFilterItemComponent, UiDateRangeExComponent, UlNotifyPopupComponent, UiTableViewComponent, UiListViewComponent, UiCardViewComponent, UiReportContainerComponent, NoDataComponent, ColumnRendererComponent, InlineSaveAndCancelComponent, UiTreeViewComponent, InlineSaveAndCancelComponent, UiCalendarComponent, UiAspReportViewerComponent, UiGraphComponent, UiExceptionFormComponent, UiEditableGridComponent, ColumnMatrixRendererComponent, UiMatrixViewComponent, CustomDateTimeComponent, BarsaAspViewerComponent, FileInDialogComponent, UiMoInfoGeneralObjectUiComponent, UiGanttChartComponent, GanttDhtmlChartViewComponent, ProgressIndicatorComponent, CardViewContentComponent, CardItemComponent, UiCardViewHorizontalGroupComponent, TitleComponent, BarsaUlvMainComponent, ListItemComponent, HtreeCreateNewComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTableColumnComponent, BreadcrumbComponent, UiLabelComponent, FormToolbarButtonComponent, BarsaSearchFormComponent, ReportNewTopFormComponent, BarsaNetworkOfflineComponent, FileViewerContentComponent, FileViewerPopoverComponent, FileViewerComponent, BlobViewerComponent, NotificationItemComponent, BarsaCartableTemplateComponent, BarsaCartableGroupComponent, BarsaCartableFormComponent, BarsaColumnIndicatorComponent, BarsaFieldKeyValueComponent, BarsaToolbaritemSearchComponent, UiHtmlViewerComponent, BarsaPishnamayeshPayamComponent, BarsaTextEllipsisComponent, BarsaListFileLinearGmailComponent, BarsaLinkableItemsPanelComponent, BarsaEnumMenuButtonComponent, BarsaCardLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBarPanelComponent, BarsaFormSideContentComponent, BarsaSimpleFormComponent, FormToolbarComponent, BarsaListLayoutPanelComponent, BarsaGridLayoutPanelComponent, BarsaDynamicFieldComponent, UiMultiSelectRadioComponent, UiMultiSelectCheckboxComponent, UiNumIntSliderComponent, UiMultiSelectSliderComponent, UiMultiSelectCardComponent, UiMultiSelectSmileComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaColumnRowNumberComponent, BarsaCardRowPayamComponent, BarsaColumnRowNumberComponent, BarsaQuestionPostComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaAnswerCardComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaChipComponent, BarsaTagChipComponent, BarsaReportCardFlexViewComponent, BarsaTagsCategoryRowComponent, BarsaTagCategoriesComponent, BarsaReportOneOfListComponent, BarsaCardRowPayamComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatMessageComponent, BarsaChatUserListComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaModalComponent, BarsaTabRouteManagerComponent, BarsaBreadcrumbsComponent, BarsaRowInlineActionlistComponent, UiBpmnViewerComponent, UiNotificationViewComponent, NotificationItemActionsComponent, BarsaFormLayoutPanelComponent, UiReportCarouselViewComponent, BarsaCardBannerComponent, BarsaThemeComponent, BarsaImgSkeletonComponent, BarsaBottomMenuViewComponent, UiSignatureComponent, BarsaMegamenuComponent, UiMapReportComponent, BarsaInfobarsComponent, DynamicCommandComponent, BarsaChatMessageStatusComponent, FileGalleryViewerComponent, FileCardViewerComponent, CardReportNavigatorComponent, WizardLayoutDirective, ColRendererDirective, ApplyConditionalFormatsDirective, ReportViewRendererDirective, FullscreenDialogDirective, FullscreenFilesDirective, DownloadFilesDirective, DialogHandlerDirective, TableThDirective, ContentDensityDirective, DarkClassDirective, FixTabMoreDirective, UploadFileStatusPipe, SapFontPipe, SapFontClassPipe, StringToArrayPipe, NodeHasOneDepthLevelPipe, MatrixValuePipe, DynamicPageSizePipe, SapSizePipe, AvatarGridColPipe, ObjectStatusIconPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaSapUiModule, providers: [
             { provide: DIALOG_SERVICE, useClass: DialogService },
             provideAppInitializer(() => {
@@ -17840,5 +17858,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApplyConditionalFormatsDirective, AvatarGridColPipe, BarsaAnswerCardComponent, BarsaAspViewerComponent, BarsaBarDownloadFileComponent, BarsaBarPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBottomMenuViewComponent, BarsaBreadcrumbsComponent, BarsaCardBannerComponent, BarsaCardLayoutPanelComponent, BarsaCardRowPayamComponent, BarsaCartableFormComponent, BarsaCartableGroupComponent, BarsaCartableTemplateComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaChatMessageComponent, BarsaChatMessageStatusComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatUserListComponent, BarsaChipComponent, BarsaColumnIndicatorComponent, BarsaColumnRowNumberComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaDateTimePickerComponent, BarsaDynamicFieldComponent, BarsaEnumMenuButtonComponent, BarsaFieldKeyValueComponent, BarsaFormLayoutPanelComponent, BarsaFormSideContentComponent, BarsaGridLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaImgSkeletonComponent, BarsaInfobarsComponent, BarsaLinkableItemsPanelComponent, BarsaListFileLinearComponent, BarsaListFileLinearGmailComponent, BarsaListLayoutPanelComponent, BarsaMegamenuComponent, BarsaModalComponent, BarsaMonacoEditorComponent, BarsaNetworkOfflineComponent, BarsaPishnamayeshPayamComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionPostComponent, BarsaReportCardFlexViewComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaReportOneOfListComponent, BarsaRowInlineActionlistComponent, BarsaSapUiModule, BarsaSapUiRoutingModule, BarsaSearchFormComponent, BarsaSimpleFormComponent, BarsaTabRouteManagerComponent, BarsaTableColumnComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTagCategoriesComponent, BarsaTagChipComponent, BarsaTagsCategoryRowComponent, BarsaTextEllipsisComponent, BarsaThemeComponent, BarsaTinyemceComponent, BarsaToolbaritemSearchComponent, BarsaTreeItemComponent, BarsaUlvMainComponent, BlobViewerComponent, BreadcrumbComponent, CaptchaFieldComponent, CardItemComponent, CardViewContentComponent, ColRendererDirective, ColumnMatrixRendererComponent, ColumnRendererComponent, ContentDensityDirective, CustomDateTimeComponent, DarkClassDirective, DeviceInfoFieldBaseComponent, DialogHandlerDirective, DownloadFilesDirective, DynamicCommandComponent, DynamicPageSizePipe, FileCardViewerComponent, FileGalleryViewerComponent, FileInDialogComponent, FileViewerComponent, FileViewerContentComponent, FileViewerPopoverComponent, FixTabMoreDirective, FormDialogComponent, FormDialogLessComponent, FormToolbarButtonComponent, FormToolbarComponent, FormWizardComponent, FullscreenDialogDirective, FullscreenFilesDirective, FundamentalDynamicFormComponent, GanttDhtmlChartViewComponent, GetFormLayoutGrid, GlobalSearchComponent, GlobalSearchModuleComponent, GlobalSearchPanelComponent, HeaderAvatarComponent, HtreeCreateNewComponent, HyperlinkComponent, IconBusinessSuite, IconTNT, InlineSaveAndCancelComponent, LayoutActionsComponent, LayoutControlComponent, LayoutWizardComponent, ListItemComponent, LyEmptySpaceComponent, LyHorizontalLayoutComponent, LyLabelComponent, LyLayoutContainerComponent, LyLayoutContainerOfRootComponent, LyLayoutFieldLabelComponent, LyLayoutPanelComponent, LyLineComponent, LySimpleLabelComponent, LyTabContainerComponent, LyTabPageComponent, LyVerticalLayoutComponent, ManageFiltersReportComponent, MaskComponent, MatrixValuePipe, MessageStripComponent, NoDataComponent, NodeHasOneDepthLevelPipe, NotificationItemActionsComponent, NotificationItemComponent, ObjectStatusIconPipe, ProgressIndicatorComponent, ReportNewTopFormComponent, ReportSearchFieldsHiddenSettingsComponent, ReportSearchFieldsManageComponent, ReportSearchPanelSaveComponent, ReportViewRendererDirective, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, RichTextStaticComponent, SapFontClassPipe, SapFontPipe, SapSizePipe, SapUiReportBaseComponent, SearchPanelComponent, StaticTextComponent, StringToArrayPipe, TableThDirective, TitleComponent, UiAspReportViewerComponent, UiBpmnViewerComponent, UiButtonComponent, UiCalendarComponent, UiCardViewComponent, UiCardViewHorizontalGroupComponent, UiCheckBoxComponent, UiColorUiComponent, UiContainerWithButtonComponent, UiDateRangeExComponent, UiDateTimeComponent, UiEditableGridComponent, UiExceptionFormComponent, UiFileLinearListBoxComponent, UiFormPanelComponent, UiGanttChartComponent, UiGraphComponent, UiGridColumnsComponent, UiGridComponent, UiGridFilterItemComponent, UiGridFilterSettingsComponent, UiGridSortItemComponent, UiGridSortSettingComponent, UiHtmlViewerComponent, UiInfoBarPanelComponent, UiLabelComponent, UiLinearListContainerWithButtonComponent, UiListViewComponent, UiMapComponent, UiMapReportComponent, UiMatrixViewComponent, UiMoInfoComboViewerComponent, UiMoInfoGeneralObjectUiComponent, UiMoInfoSubFormUiComponent, UiMoInfoUlvComboComponent, UiMonacoEditorComponent, UiMultiSelectCardComponent, UiMultiSelectCheckboxComponent, UiMultiSelectComboComponent, UiMultiSelectRadioComponent, UiMultiSelectSliderComponent, UiMultiSelectSmileComponent, UiNotificationViewComponent, UiNumDecimalUiComponent, UiNumIntSliderComponent, UiNumIntUiComponent, UiPdfViewerComponent, UiPictureFileComponent, UiPicturesInfoComponent, UiRadioGroupComponent, UiReadOnlyFieldComponent, UiReportCarouselViewComponent, UiReportContainerComponent, UiSearchCommandInfoUiComponent, UiSignatureComponent, UiSimpleComboComponent, UiSinglePictureComponent, UiSwitchButtonComponent, UiTableViewComponent, UiTextAreaComponent, UiTextFieldAutoCompleteComponent, UiTextFieldComponent, UiTimeSpanComponent, UiTinymceComponent, UiTreeComponent, UiTreeViewComponent, UiUlvFormMultiSelectUiComponent, UiUlvMainUiComponent, UiWorkflowPanelUiComponent, UlLoadingMaskUiComponent, UlMsgBoxAdapterComponent, UlNotifyPopupComponent, UlToastAdapterComponent, UlvColumnSettingsComponent, UlvContextMenuComponent, UlvFilterSettingsComponent, UlvFormMultiSelectComponent, UlvGroupbySettingsComponent, UlvPagingComponent, UlvSelectionComponent, UlvSettingsComponent, UlvSortSettingsComponent, UlvToolbarComponent, UploadFileStatusPipe, WidthTypeEnum, WizardLayoutDirective, _trimEnd, getNestedValue, insertAvatar, sort$1 as sort };
+export { ApplyConditionalFormatsDirective, AvatarGridColPipe, BarsaAnswerCardComponent, BarsaAspViewerComponent, BarsaBarDownloadFileComponent, BarsaBarPanelComponent, BarsaBaseLayoutPanelComponent, BarsaBottomMenuViewComponent, BarsaBreadcrumbsComponent, BarsaCardBannerComponent, BarsaCardLayoutPanelComponent, BarsaCardRowPayamComponent, BarsaCartableFormComponent, BarsaCartableGroupComponent, BarsaCartableTemplateComponent, BarsaChatComponent, BarsaChatContentComponent, BarsaChatContentToolbarComponent, BarsaChatListComponent, BarsaChatMessageComponent, BarsaChatMessageStatusComponent, BarsaChatThreadsListComponent, BarsaChatThreadsListToolbarComponent, BarsaChatUserListComponent, BarsaChipComponent, BarsaColumnIndicatorComponent, BarsaColumnRowNumberComponent, BarsaCustomInlineEditComponent, BarsaCustomInlineEditRowComponent, BarsaDateTimePickerComponent, BarsaDynamicFieldComponent, BarsaEnumMenuButtonComponent, BarsaFieldKeyValueComponent, BarsaFormLayoutPanelComponent, BarsaFormSideContentComponent, BarsaGridLayoutPanelComponent, BarsaHorizontalFlexPanelComponent, BarsaImgSkeletonComponent, BarsaInfobarsComponent, BarsaLinkableItemsPanelComponent, BarsaListFileLinearComponent, BarsaListFileLinearGmailComponent, BarsaListLayoutPanelComponent, BarsaMegamenuComponent, BarsaModalComponent, BarsaMonacoEditorComponent, BarsaNetworkOfflineComponent, BarsaPishnamayeshPayamComponent, BarsaQuestionAnswerCommentsSectionComponent, BarsaQuestionAnswerContentActionsSectionComponent, BarsaQuestionAnswerCreatorTimeSectionComponent, BarsaQuestionAnswerFormAddCommentComponent, BarsaQuestionAnswerFormComponent, BarsaQuestionAnswerVoteSectionComponent, BarsaQuestionPostComponent, BarsaReportCardFlexViewComponent, BarsaReportCheckboxSwitchButtonComponent, BarsaReportOneOfListComponent, BarsaRowInlineActionlistComponent, BarsaSapUiModule, BarsaSapUiRoutingModule, BarsaSearchFormComponent, BarsaSimpleFormComponent, BarsaTabRouteManagerComponent, BarsaTableColumnComponent, BarsaTableHeaderComponent, BarsaTableRowComponent, BarsaTagCategoriesComponent, BarsaTagChipComponent, BarsaTagsCategoryRowComponent, BarsaTextEllipsisComponent, BarsaThemeComponent, BarsaTinyemceComponent, BarsaToolbaritemSearchComponent, BarsaTreeItemComponent, BarsaUlvMainComponent, BlobViewerComponent, BreadcrumbComponent, CaptchaFieldComponent, CardItemComponent, CardReportNavigatorComponent, CardViewContentComponent, ColRendererDirective, ColumnMatrixRendererComponent, ColumnRendererComponent, ContentDensityDirective, CustomDateTimeComponent, DarkClassDirective, DeviceInfoFieldBaseComponent, DialogHandlerDirective, DownloadFilesDirective, DynamicCommandComponent, DynamicPageSizePipe, FileCardViewerComponent, FileGalleryViewerComponent, FileInDialogComponent, FileViewerComponent, FileViewerContentComponent, FileViewerPopoverComponent, FixTabMoreDirective, FormDialogComponent, FormDialogLessComponent, FormToolbarButtonComponent, FormToolbarComponent, FormWizardComponent, FullscreenDialogDirective, FullscreenFilesDirective, FundamentalDynamicFormComponent, GanttDhtmlChartViewComponent, GetFormLayoutGrid, GlobalSearchComponent, GlobalSearchModuleComponent, GlobalSearchPanelComponent, HeaderAvatarComponent, HtreeCreateNewComponent, HyperlinkComponent, IconBusinessSuite, IconTNT, InlineSaveAndCancelComponent, LayoutActionsComponent, LayoutControlComponent, LayoutWizardComponent, ListItemComponent, LyEmptySpaceComponent, LyHorizontalLayoutComponent, LyLabelComponent, LyLayoutContainerComponent, LyLayoutContainerOfRootComponent, LyLayoutFieldLabelComponent, LyLayoutPanelComponent, LyLineComponent, LySimpleLabelComponent, LyTabContainerComponent, LyTabPageComponent, LyVerticalLayoutComponent, ManageFiltersReportComponent, MaskComponent, MatrixValuePipe, MessageStripComponent, NoDataComponent, NodeHasOneDepthLevelPipe, NotificationItemActionsComponent, NotificationItemComponent, ObjectStatusIconPipe, ProgressIndicatorComponent, ReportNewTopFormComponent, ReportSearchFieldsHiddenSettingsComponent, ReportSearchFieldsManageComponent, ReportSearchPanelSaveComponent, ReportViewRendererDirective, ResponsiveToolbarComponent, ResponsiveToolbarRendererComponent, RichTextStaticComponent, SapFontClassPipe, SapFontPipe, SapSizePipe, SapUiReportBaseComponent, SearchPanelComponent, StaticTextComponent, StringToArrayPipe, TableThDirective, TitleComponent, UiAspReportViewerComponent, UiBpmnViewerComponent, UiButtonComponent, UiCalendarComponent, UiCardViewComponent, UiCardViewHorizontalGroupComponent, UiCheckBoxComponent, UiColorUiComponent, UiContainerWithButtonComponent, UiDateRangeExComponent, UiDateTimeComponent, UiEditableGridComponent, UiExceptionFormComponent, UiFileLinearListBoxComponent, UiFormPanelComponent, UiGanttChartComponent, UiGraphComponent, UiGridColumnsComponent, UiGridComponent, UiGridFilterItemComponent, UiGridFilterSettingsComponent, UiGridSortItemComponent, UiGridSortSettingComponent, UiHtmlViewerComponent, UiInfoBarPanelComponent, UiLabelComponent, UiLinearListContainerWithButtonComponent, UiListViewComponent, UiMapComponent, UiMapReportComponent, UiMatrixViewComponent, UiMoInfoComboViewerComponent, UiMoInfoGeneralObjectUiComponent, UiMoInfoSubFormUiComponent, UiMoInfoUlvComboComponent, UiMonacoEditorComponent, UiMultiSelectCardComponent, UiMultiSelectCheckboxComponent, UiMultiSelectComboComponent, UiMultiSelectRadioComponent, UiMultiSelectSliderComponent, UiMultiSelectSmileComponent, UiNotificationViewComponent, UiNumDecimalUiComponent, UiNumIntSliderComponent, UiNumIntUiComponent, UiPdfViewerComponent, UiPictureFileComponent, UiPicturesInfoComponent, UiRadioGroupComponent, UiReadOnlyFieldComponent, UiReportCarouselViewComponent, UiReportContainerComponent, UiSearchCommandInfoUiComponent, UiSignatureComponent, UiSimpleComboComponent, UiSinglePictureComponent, UiSwitchButtonComponent, UiTableViewComponent, UiTextAreaComponent, UiTextFieldAutoCompleteComponent, UiTextFieldComponent, UiTimeSpanComponent, UiTinymceComponent, UiTreeComponent, UiTreeViewComponent, UiUlvFormMultiSelectUiComponent, UiUlvMainUiComponent, UiWorkflowPanelUiComponent, UlLoadingMaskUiComponent, UlMsgBoxAdapterComponent, UlNotifyPopupComponent, UlToastAdapterComponent, UlvColumnSettingsComponent, UlvContextMenuComponent, UlvFilterSettingsComponent, UlvFormMultiSelectComponent, UlvGroupbySettingsComponent, UlvPagingComponent, UlvSelectionComponent, UlvSettingsComponent, UlvSortSettingsComponent, UlvToolbarComponent, UploadFileStatusPipe, WidthTypeEnum, WizardLayoutDirective, _trimEnd, getNestedValue, insertAvatar, sort$1 as sort };
 //# sourceMappingURL=barsa-sap-ui.mjs.map