barsa-sap-ui 1.0.323 → 1.0.324

package/fesm2020/barsa-sap-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input, ElementRef, ViewChild, HostBinding, EventEmitter, Output, ViewEncapsulation, ViewChildren, Inject, Optional, Self, TemplateRef, HostListener, Pipe, Directive, ViewContainerRef, SkipSelf, NgModule, Injectable, APP_INITIALIZER, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from 'barsa-novin-ray-core';
-import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, LayoutService, BaseUlvSettingComponent, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getGridSettings, FieldBaseComponent, DateService, getDateService as getDateService$1, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, EllipsifyDirective, createGridEditorFormPanel, FormPanelService, BaseViewItemPropsComponent, LayoutPanelBaseComponent, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, BaseColumnPropsComponent, ColumnService, DateRanges, LogService, UlvMainService, isFunction, FilesValidationHelper, getValidExtension, isImage, getImagePath, getIcon, UploadService, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, PageWithFormHandlerBaseComponent, getHeaderValue, getFieldValue, ContainerComponent, FORM_DIALOG_COMPONENT, ContainerService, FormPropsBaseComponent, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, executeUlvCommandHandler, getDeviceIsPhone, getDeviceIsTablet, PortalService, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, BarsaNovinRayCoreModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
+import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, LayoutService, BaseUlvSettingComponent, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getGridSettings, FieldBaseComponent, DateService, getDateService as getDateService$1, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, EllipsifyDirective, createGridEditorFormPanel, FormPanelService, BaseViewItemPropsComponent, isImage, getIcon, LayoutPanelBaseComponent, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, BaseColumnPropsComponent, ColumnService, DateRanges, LogService, UlvMainService, isFunction, FilesValidationHelper, getValidExtension, getImagePath, UploadService, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, PageWithFormHandlerBaseComponent, getHeaderValue, getFieldValue, ContainerComponent, FORM_DIALOG_COMPONENT, ContainerService, FormPropsBaseComponent, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, executeUlvCommandHandler, getDeviceIsPhone, getDeviceIsTablet, PortalService, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, BarsaNovinRayCoreModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
 import moment from 'moment';
 import jmoment from 'moment-jalaali';
 import { merge, of, BehaviorSubject, Subject, combineLatest, takeUntil as takeUntil$1, fromEvent, filter as filter$1, tap as tap$1 } from 'rxjs';
@@ -41,14 +41,16 @@ import * as i4$4 from '@fundamental-ngx/core/table';
 import * as i7$2 from '@fundamental-ngx/core/popover';
 import * as i13 from '@fundamental-ngx/platform/button';
 import * as i1$5 from '@fundamental-ngx/core/illustrated-message';
-import * as i3$3 from '@fundamental-ngx/core/avatar';
-import * as i9$1 from '@fundamental-ngx/core/token';
-import * as i4$5 from '@fundamental-ngx/core/layout-grid';
-import * as i3$4 from '@fundamental-ngx/core/link';
+import * as i3$4 from '@fundamental-ngx/core/avatar';
 import * as i5$1 from '@fundamental-ngx/core/card';
-import * as i9$2 from '@fundamental-ngx/core/quick-view';
-import * as i3$5 from '@fundamental-ngx/core/content-density';
+import * as i3$3 from 'ng2-pdfjs-viewer';
+import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';
+import * as i4$5 from '@fundamental-ngx/core/layout-grid';
+import * as i3$5 from '@fundamental-ngx/core/link';
+import * as i9$1 from '@fundamental-ngx/core/quick-view';
+import * as i3$6 from '@fundamental-ngx/core/content-density';
 import * as i10 from '@fundamental-ngx/core/object-status';
+import * as i9$2 from '@fundamental-ngx/core/token';
 import * as i9$3 from '@fundamental-ngx/core/message-strip';
 import * as i7$4 from '@fundamental-ngx/core/notification';
 import * as i2$4 from '@fundamental-ngx/core/action-sheet';
@@ -66,8 +68,6 @@ import * as i7$6 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import * as i6$5 from '@fundamental-ngx/core/file-uploader';
 import * as i7$7 from '@fundamental-ngx/core/object-identifier';
-import * as i9$4 from 'ng2-pdfjs-viewer';
-import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';
 import * as i5$4 from '@fundamental-ngx/core/object-number';
 import * as i10$1 from '@fundamental-ngx/platform/slider';
 import * as i7$8 from '@fundamental-ngx/core/facets';
@@ -81,8 +81,8 @@ import * as i5$5 from '@fundamental-ngx/platform/dynamic-page';
 import * as i7$a from '@fundamental-ngx/core/inline-help';
 import * as i2$7 from '@fundamental-ngx/core/wizard';
 import * as i7$b from '@fundamental-ngx/core/segmented-button';
-import * as i3$6 from '@fundamental-ngx/core/pagination';
-import * as i3$7 from '@fundamental-ngx/core/panel';
+import * as i3$7 from '@fundamental-ngx/core/pagination';
+import * as i3$8 from '@fundamental-ngx/core/panel';
 import * as i1$6 from '@fundamental-ngx/core/switch';
 import * as i6$6 from '@fundamental-ngx/core/info-label';
 import { CdkTableModule } from '@angular/cdk/table';
@@ -386,7 +386,8 @@ class LayoutControlComponent extends LayoutItemBaseComponent {
         }
         this.isCheckbox = config.FieldUi.originalXtype === 'Ui.CheckBox';
         this.isSinglePicture = config.FieldUi.originalXtype === 'Ui.SinglePicture';
-        this.labelCaption = this.domSanitizer.bypassSecurityTrustHtml(this._bbbTranslate.transform(labelCaption));
+        const translateCaption = `${this._bbbTranslate.transform(labelCaption)}:`;
+        this.labelCaption = this.domSanitizer.bypassSecurityTrustHtml(translateCaption);
         this.labelVisible = config.TextVisible && this.showLabel !== false;
         this.isRowDirection = config.TextLocation === 'Right' || config.TextLocation === 'Default';
         this.isRowReverseDirection = config.TextLocation === 'Left';
@@ -3708,10 +3709,10 @@ class UlvContextMenuComponent extends BaseComponent {
     }
 }
 UlvContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvContextMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-UlvContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: { onlyOverflow: "onlyOverflow", deviceName: "deviceName", menuItems: "menuItems", allColumns: "allColumns", index: "index", mo: "mo", styleIndex: "styleIndex", conditionalFormats: "conditionalFormats", disableOverflowContextMenu: "disableOverflowContextMenu", footerMode: "footerMode" }, outputs: { commandClick: "commandClick" }, host: { properties: { "class.disableOverflow": "this._disableOverflow" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"footerMode; else contextTemplate\">\n    <div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\n        <div fd-bar-middle *ngIf=\"overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <div fd-bar-right *ngIf=\"!overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <ng-template #footerToolbarTpl>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngFor=\"let cmd of menuItems\">\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </ng-container>\n            </fd-toolbar>\n        </ng-template>\n    </div>\n</ng-container>\n<ng-template #contextTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\n            context: { $implicit: menuItems, index: index }\n        \"\n    ></ng-container>\n</ng-template>\n\n<ng-template #simpleCommands let-commands let-index=\"index\">\n    <ng-container *ngFor=\"let cmd of commands\">\n        <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #overflowCommands let-commands let-index=\"index\">\n    <fd-popover placement=\"bottom\" [(isOpen)]=\"isOpenOverflow\" [closeOnOutsideClick]=\"true\" [noArrow]=\"true\">\n        <fd-popover-control #popover>\n            <button fd-button (click)=\"onOpenOverflow($event)\" [fdType]=\"'transparent'\" [glyph]=\"'overflow'\"></button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul fd-list>\n                <li fd-list-item *ngFor=\"let cmd of commands\">\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #menuButtonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd }\"\n    ></ng-container>\n</ng-template>\n<ng-template #menuTemplate let-cmd>\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\n        <fd-menu>\n            <li\n                fd-menu-item\n                *ngFor=\"let btnCommand of cmd.menu.items\"\n                #liEl\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"cmd.text\"\n                [hostEl]=\"liEl\"\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\n            >\n                <div fd-menu-interactive>\n                    <span fd-menu-title>{{ btnCommand.text }}</span>\n                </div>\n            </li>\n        </fd-menu>\n    </fd-split-button>\n</ng-template>\n<ng-template #buttonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\n            context: { $implicit: cmd }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #defaultButtonTemplate let-cmd>\n    <button\n        fd-button\n        #btnEl\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\n        [label]=\"cmd.text\"\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\n        [ulvCommandHandler]=\"cmd\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [dbName]=\"cmd.text\"\n        [hostEl]=\"btnEl\"\n        (commandClick)=\"onCommandClick($event)\"\n    >\n        <img *ngIf=\"!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon\" [src]=\"cmd.icon\" />\n    </button>\n</ng-template>\n<ng-template #customButtonTemplate let-cmd>\n    <div\n        #hostEl\n        [dbName]=\"cmd.text\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [hostEl]=\"hostEl\"\n        [styleIndex]=\"styleIndex\"\n    >\n        <bnrc-dynamic-form-toolbaritem\n            fd-toolbar-item\n            [ulvCommandHandler]=\"cmd\"\n            [component]=\"cmd.Command?.CustomUi\"\n            [mo]=\"mo\"\n            [context]=\"cmd\"\n            [showText]=\"disableOverflowContextMenu === false\"\n            [deviceName]=\"deviceName\"\n            [index]=\"index\"\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\n            [allColumns]=\"allColumns\"\n            (btnClick)=\"onCommandClick($event)\"\n        ></bnrc-dynamic-form-toolbaritem>\n    </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center}:host ::ng-deep button{margin-top:0!important}:host ::ng-deep .fd-popover-custom{max-width:none}:host.disableOverflow{column-gap:5px}button{align-items:center}button div{display:flex}button ::ng-deep span{height:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.UlvCommandDirective, selector: "[ulvCommandHandler]", inputs: ["ulvCommandHandler"], outputs: ["commandClick"] }, { kind: "component", type: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$3.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.DeprecatedBarContentDensityDirective, selector: "[fd-bar][cozy]" }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i4$3.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "disabled", "mainActionTitle", "fdType", "expandButtonAriaLabel", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UlvContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: { onlyOverflow: "onlyOverflow", deviceName: "deviceName", menuItems: "menuItems", allColumns: "allColumns", index: "index", mo: "mo", styleIndex: "styleIndex", conditionalFormats: "conditionalFormats", disableOverflowContextMenu: "disableOverflowContextMenu", footerMode: "footerMode" }, outputs: { commandClick: "commandClick" }, host: { properties: { "class.disableOverflow": "this._disableOverflow" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"footerMode; else contextTemplate\">\n    <div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\n        <div fd-bar-middle *ngIf=\"overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <div fd-bar-right *ngIf=\"!overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <ng-template #footerToolbarTpl>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngFor=\"let cmd of menuItems\">\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </ng-container>\n            </fd-toolbar>\n        </ng-template>\n    </div>\n</ng-container>\n<ng-template #contextTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\n            context: { $implicit: menuItems, index: index }\n        \"\n    ></ng-container>\n</ng-template>\n\n<ng-template #simpleCommands let-commands let-index=\"index\">\n    <ng-container *ngFor=\"let cmd of commands\">\n        <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #overflowCommands let-commands let-index=\"index\">\n    <fd-popover placement=\"bottom\" [(isOpen)]=\"isOpenOverflow\" [closeOnOutsideClick]=\"true\" [noArrow]=\"true\">\n        <fd-popover-control #popover>\n            <button fd-button (click)=\"onOpenOverflow($event)\" [fdType]=\"'transparent'\" [glyph]=\"'overflow'\"></button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul fd-list>\n                <li fd-list-item *ngFor=\"let cmd of commands\">\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #menuButtonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd }\"\n    ></ng-container>\n</ng-template>\n<ng-template #menuTemplate let-cmd>\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\n        <fd-menu>\n            <li\n                fd-menu-item\n                *ngFor=\"let btnCommand of cmd.menu.items\"\n                #liEl\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"cmd.text\"\n                [hostEl]=\"liEl\"\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\n            >\n                <div fd-menu-interactive>\n                    <span fd-menu-title>{{ btnCommand.text }}</span>\n                </div>\n            </li>\n        </fd-menu>\n    </fd-split-button>\n</ng-template>\n<ng-template #buttonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\n            context: { $implicit: cmd }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #defaultButtonTemplate let-cmd>\n    <button\n        fd-button\n        #btnEl\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\n        [label]=\"cmd.text\"\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\n        [ulvCommandHandler]=\"cmd\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [dbName]=\"cmd.text\"\n        [hostEl]=\"btnEl\"\n        (commandClick)=\"onCommandClick($event)\"\n    >\n        <img *ngIf=\"!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon\" [src]=\"cmd.icon\" />\n    </button>\n</ng-template>\n<ng-template #customButtonTemplate let-cmd>\n    <div\n        #hostEl\n        [dbName]=\"cmd.text\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [hostEl]=\"hostEl\"\n        [styleIndex]=\"styleIndex\"\n    >\n        <bnrc-dynamic-form-toolbaritem\n            fd-toolbar-item\n            [ulvCommandHandler]=\"cmd\"\n            [component]=\"cmd.Command?.CustomUi\"\n            [mo]=\"mo\"\n            [context]=\"cmd\"\n            [showText]=\"disableOverflowContextMenu === false\"\n            [deviceName]=\"deviceName\"\n            [index]=\"index\"\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\n            [allColumns]=\"allColumns\"\n            (btnClick)=\"onCommandClick($event)\"\n        ></bnrc-dynamic-form-toolbaritem>\n    </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;row-gap:5px}:host ::ng-deep button{margin-top:0!important}:host ::ng-deep .fd-popover-custom{max-width:none}:host.disableOverflow{column-gap:5px}button{align-items:center}button div{display:flex}button ::ng-deep span{height:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.UlvCommandDirective, selector: "[ulvCommandHandler]", inputs: ["ulvCommandHandler"], outputs: ["commandClick"] }, { kind: "component", type: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$3.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.DeprecatedBarContentDensityDirective, selector: "[fd-bar][cozy]" }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i4$3.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "disabled", "mainActionTitle", "fdType", "expandButtonAriaLabel", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ulv-context-menu,[ulvContextMenu]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"footerMode; else contextTemplate\">\n    <div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\n        <div fd-bar-middle *ngIf=\"overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <div fd-bar-right *ngIf=\"!overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <ng-template #footerToolbarTpl>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngFor=\"let cmd of menuItems\">\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </ng-container>\n            </fd-toolbar>\n        </ng-template>\n    </div>\n</ng-container>\n<ng-template #contextTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\n            context: { $implicit: menuItems, index: index }\n        \"\n    ></ng-container>\n</ng-template>\n\n<ng-template #simpleCommands let-commands let-index=\"index\">\n    <ng-container *ngFor=\"let cmd of commands\">\n        <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #overflowCommands let-commands let-index=\"index\">\n    <fd-popover placement=\"bottom\" [(isOpen)]=\"isOpenOverflow\" [closeOnOutsideClick]=\"true\" [noArrow]=\"true\">\n        <fd-popover-control #popover>\n            <button fd-button (click)=\"onOpenOverflow($event)\" [fdType]=\"'transparent'\" [glyph]=\"'overflow'\"></button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul fd-list>\n                <li fd-list-item *ngFor=\"let cmd of commands\">\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #menuButtonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd }\"\n    ></ng-container>\n</ng-template>\n<ng-template #menuTemplate let-cmd>\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\n        <fd-menu>\n            <li\n                fd-menu-item\n                *ngFor=\"let btnCommand of cmd.menu.items\"\n                #liEl\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"cmd.text\"\n                [hostEl]=\"liEl\"\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\n            >\n                <div fd-menu-interactive>\n                    <span fd-menu-title>{{ btnCommand.text }}</span>\n                </div>\n            </li>\n        </fd-menu>\n    </fd-split-button>\n</ng-template>\n<ng-template #buttonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\n            context: { $implicit: cmd }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #defaultButtonTemplate let-cmd>\n    <button\n        fd-button\n        #btnEl\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\n        [label]=\"cmd.text\"\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\n        [ulvCommandHandler]=\"cmd\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [dbName]=\"cmd.text\"\n        [hostEl]=\"btnEl\"\n        (commandClick)=\"onCommandClick($event)\"\n    >\n        <img *ngIf=\"!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon\" [src]=\"cmd.icon\" />\n    </button>\n</ng-template>\n<ng-template #customButtonTemplate let-cmd>\n    <div\n        #hostEl\n        [dbName]=\"cmd.text\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [hostEl]=\"hostEl\"\n        [styleIndex]=\"styleIndex\"\n    >\n        <bnrc-dynamic-form-toolbaritem\n            fd-toolbar-item\n            [ulvCommandHandler]=\"cmd\"\n            [component]=\"cmd.Command?.CustomUi\"\n            [mo]=\"mo\"\n            [context]=\"cmd\"\n            [showText]=\"disableOverflowContextMenu === false\"\n            [deviceName]=\"deviceName\"\n            [index]=\"index\"\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\n            [allColumns]=\"allColumns\"\n            (btnClick)=\"onCommandClick($event)\"\n        ></bnrc-dynamic-form-toolbaritem>\n    </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center}:host ::ng-deep button{margin-top:0!important}:host ::ng-deep .fd-popover-custom{max-width:none}:host.disableOverflow{column-gap:5px}button{align-items:center}button div{display:flex}button ::ng-deep span{height:auto!important}\n"] }]
+            args: [{ selector: 'bsu-ulv-context-menu,[ulvContextMenu]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"footerMode; else contextTemplate\">\n    <div fd-bar barDesign=\"footer\" [cozy]=\"false\" style=\"width: 100%\">\n        <div fd-bar-middle *ngIf=\"overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <div fd-bar-right *ngIf=\"!overflowMode\">\n            <ng-container *ngTemplateOutlet=\"footerToolbarTpl\"></ng-container>\n        </div>\n        <ng-template #footerToolbarTpl>\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <ng-container *ngFor=\"let cmd of menuItems\">\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </ng-container>\n            </fd-toolbar>\n        </ng-template>\n    </div>\n</ng-container>\n<ng-template #contextTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            overflowMode && !disableOverflowContextMenu ? overflowCommands : simpleCommands;\n            context: { $implicit: menuItems, index: index }\n        \"\n    ></ng-container>\n</ng-template>\n\n<ng-template #simpleCommands let-commands let-index=\"index\">\n    <ng-container *ngFor=\"let cmd of commands\">\n        <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #overflowCommands let-commands let-index=\"index\">\n    <fd-popover placement=\"bottom\" [(isOpen)]=\"isOpenOverflow\" [closeOnOutsideClick]=\"true\" [noArrow]=\"true\">\n        <fd-popover-control #popover>\n            <button fd-button (click)=\"onOpenOverflow($event)\" [fdType]=\"'transparent'\" [glyph]=\"'overflow'\"></button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul fd-list>\n                <li fd-list-item *ngFor=\"let cmd of commands\">\n                    <ng-container *ngTemplateOutlet=\"menuButtonTemplate; context: { $implicit: cmd }\"></ng-container>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #menuButtonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"cmd.menu ? menuTemplate : buttonTemplate; context: { $implicit: cmd }\"\n    ></ng-container>\n</ng-template>\n<ng-template #menuTemplate let-cmd>\n    <fd-split-button fd-toolbar-item [mainAction]=\"{ mainActionTitle: cmd.text, keepMainAction: true }\">\n        <fd-menu>\n            <li\n                fd-menu-item\n                *ngFor=\"let btnCommand of cmd.menu.items\"\n                #liEl\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"cmd.text\"\n                [hostEl]=\"liEl\"\n                (click)=\"onCommandSplitButtonClick($event, btnCommand)\"\n            >\n                <div fd-menu-interactive>\n                    <span fd-menu-title>{{ btnCommand.text }}</span>\n                </div>\n            </li>\n        </fd-menu>\n    </fd-split-button>\n</ng-template>\n<ng-template #buttonTemplate let-cmd>\n    <ng-container\n        *ngTemplateOutlet=\"\n            cmd?.Command?.CustomUi ? customButtonTemplate : defaultButtonTemplate;\n            context: { $implicit: cmd }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #defaultButtonTemplate let-cmd>\n    <button\n        fd-button\n        #btnEl\n        [fdType]=\"cmd.Command?.JsonExtraProp?.Design ? cmd.Command?.JsonExtraProp.Design : 'transparent'\"\n        [label]=\"cmd.text\"\n        [glyph]=\"cmd.Command?.NewIcon || cmd.Command?.JsonExtraProp?.Icon || ''\"\n        [ulvCommandHandler]=\"cmd\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [dbName]=\"cmd.text\"\n        [hostEl]=\"btnEl\"\n        (commandClick)=\"onCommandClick($event)\"\n    >\n        <img *ngIf=\"!cmd.Command?.NewIcon && !cmd.Command?.JsonExtraProp?.Icon\" [src]=\"cmd.icon\" />\n    </button>\n</ng-template>\n<ng-template #customButtonTemplate let-cmd>\n    <div\n        #hostEl\n        [dbName]=\"cmd.text\"\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [hostEl]=\"hostEl\"\n        [styleIndex]=\"styleIndex\"\n    >\n        <bnrc-dynamic-form-toolbaritem\n            fd-toolbar-item\n            [ulvCommandHandler]=\"cmd\"\n            [component]=\"cmd.Command?.CustomUi\"\n            [mo]=\"mo\"\n            [context]=\"cmd\"\n            [showText]=\"disableOverflowContextMenu === false\"\n            [deviceName]=\"deviceName\"\n            [index]=\"index\"\n            [isEnable]=\"cmd.Command?._isEnable || cmd.Command?.UseForSingle\"\n            [allColumns]=\"allColumns\"\n            (btnClick)=\"onCommandClick($event)\"\n        ></bnrc-dynamic-form-toolbaritem>\n    </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;row-gap:5px}:host ::ng-deep button{margin-top:0!important}:host ::ng-deep .fd-popover-custom{max-width:none}:host.disableOverflow{column-gap:5px}button{align-items:center}button div{display:flex}button ::ng-deep span{height:auto!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { onlyOverflow: [{
                 type: Input
             }], deviceName: [{
@@ -4092,6 +4093,248 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Output
             }] } });
 
+class BlobViewerComponent extends BaseComponent {
+    constructor(_cdr, _domSanitizer) {
+        super();
+        this._cdr = _cdr;
+        this._domSanitizer = _domSanitizer;
+        this.loading = false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.isMobile = getDeviceIsMobile();
+        this.fallbackUrl = this.getFallbackUrl(this.file.Id);
+        this._downloadFileId(this.file.Id, true, 'pdf', false, false);
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const { file } = changes;
+        if (file && !file.firstChange) {
+            this.fallbackUrl = this.getFallbackUrl(this.file.Id);
+            this._downloadFileId(this.file.Id, true, 'pdf', false, false);
+        }
+    }
+    _downloadFileId(fileId, viewInBrowser, convertTo, forOcx, isOfficeOnline) {
+        this._setLoading(true);
+        BarsaApi.Common.File.DownloadFileContent.bind(this)({
+            fileId,
+            fileUrl: null,
+            viewInBrowser,
+            convertTo,
+            isOfficeOnline,
+            forOcx
+        }, (response) => {
+            if (response.succeed) {
+                this._downloadFileIdCompleted(response);
+            }
+            this._setLoading(false);
+        }, (error) => {
+            alert(error);
+            this._setLoading(false);
+        });
+    }
+    getFallbackUrl(fileId) {
+        return `امکان نمایش فایل در این مرورگر وجود ندارد.
+    برای باز کردن فایل از لینک زیر استفاده کنید:  </br> <a href='${BarsaApi.Common.File.CreateAttachmentUrl(fileId, false, true)}'>دانلود فایل بصورت pdf</a>  </br>  <a href='${BarsaApi.Common.File.CreateAttachmentUrl(fileId, false, false)}'>دانلود فایل بصورت بصورت اصلی</a>`;
+    }
+    _setLoading(loading) {
+        this.loading = loading;
+        this._cdr.detectChanges();
+    }
+    _downloadFileIdCompleted(response) {
+        const blob = BarsaApi.Common.File.B64toBlob(response.content, response.contentType);
+        const url = window.URL || window.webkitURL;
+        this.blobUrl = url.createObjectURL(blob);
+        if (this.isMobile) {
+            this._pdfViewerOnDemand.pdfSrc = this.blobUrl; // pdfSrc can be Blob or Uint8Array
+            this._pdfViewerOnDemand.refresh(); // Ask pdf viewer to load/refresh pdf
+        }
+        this.valueUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(url.createObjectURL(blob));
+    }
+}
+BlobViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BlobViewerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+BlobViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: { file: "file" }, viewQueries: [{ propertyName: "_pdfViewerOnDemand", first: true, predicate: ["pdfViewerOnDemand"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<bsu-mask *ngIf=\"loading\"></bsu-mask>\n<ng-container *ngIf=\"isMobile; else browserSupport\">\n    <ng-container *ngTemplateOutlet=\"pdfJs\"> </ng-container>\n</ng-container>\n<ng-template #pdfJs>\n    <ng2-pdfjs-viewer\n        #pdfViewerOnDemand\n        [externalWindow]=\"false\"\n        [downloadFileName]=\"blobUrl\"\n        [openFile]=\"false\"\n        [viewBookmark]=\"false\"\n        [showSpinner]=\"true\"\n        [download]=\"true\"\n    ></ng2-pdfjs-viewer>\n</ng-template>\n<ng-template #browserSupport>\n    <object\n        *ngIf=\"valueUrl\"\n        style=\"flex-grow: 1\"\n        [attr.data]=\"valueUrl\"\n        type=\"application/pdf\"\n        width=\"100%\"\n        height=\"100%\"\n        [attr.html]=\"fallbackUrl\"\n    ></object>\n</ng-template>\n", styles: [":host{display:block;position:relative;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "showSpinner", "downloadFileName", "openFile", "download", "startDownload", "viewBookmark", "print", "startPrint", "fullScreen", "find", "zoom", "nameddest", "pagemode", "lastPage", "rotatecw", "rotateccw", "cursor", "scroll", "spread", "locale", "useOnlyCssZoom", "errorOverride", "errorAppend", "errorMessage", "diagnosticLogs", "externalWindowOptions", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BlobViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsu-blob-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bsu-mask *ngIf=\"loading\"></bsu-mask>\n<ng-container *ngIf=\"isMobile; else browserSupport\">\n    <ng-container *ngTemplateOutlet=\"pdfJs\"> </ng-container>\n</ng-container>\n<ng-template #pdfJs>\n    <ng2-pdfjs-viewer\n        #pdfViewerOnDemand\n        [externalWindow]=\"false\"\n        [downloadFileName]=\"blobUrl\"\n        [openFile]=\"false\"\n        [viewBookmark]=\"false\"\n        [showSpinner]=\"true\"\n        [download]=\"true\"\n    ></ng2-pdfjs-viewer>\n</ng-template>\n<ng-template #browserSupport>\n    <object\n        *ngIf=\"valueUrl\"\n        style=\"flex-grow: 1\"\n        [attr.data]=\"valueUrl\"\n        type=\"application/pdf\"\n        width=\"100%\"\n        height=\"100%\"\n        [attr.html]=\"fallbackUrl\"\n    ></object>\n</ng-template>\n", styles: [":host{display:block;position:relative;height:100%;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.DomSanitizer }]; }, propDecorators: { file: [{
+                type: Input
+            }], _pdfViewerOnDemand: [{
+                type: ViewChild,
+                args: ['pdfViewerOnDemand']
+            }] } });
+
+class FileViewerContentComponent extends BaseComponent {
+    constructor(_picFieldSrc) {
+        super();
+        this._picFieldSrc = _picFieldSrc;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const file = this.file;
+        const spl = file.FileName?.split('.');
+        const ext = spl ? spl[spl.length - 1] : '';
+        const isImg = isImage(ext);
+        isImg &&
+            (file.thumbnailUrl = this._picFieldSrc.transform(file.Id, 'ID', null, '', 120, 120)) &&
+            (file.mediaUrl = this._picFieldSrc.transform(file.Id, 'Attachment', '', '', 0, 0)) &&
+            (file.isImage = true);
+        !isImg && (file.thumbnailUrl = getIcon(ext || file.Type));
+    }
+}
+FileViewerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerContentComponent, deps: [{ token: i2.PictureFieldSourcePipe }], target: i0.ɵɵFactoryTarget.Component });
+FileViewerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: { fillWidth: "fillWidth", imageOnly: "imageOnly", cardMode: "cardMode", showFooter: "showFooter", showContent: "showContent", width: "width", cardContentHeight: "cardContentHeight", file: "file" }, usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics\">\r\n            <bsu-mask></bsu-mask>\r\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    <bsu-blob-viewer [file]=\"file\" [style.width]=\"width\"></bsu-blob-viewer>\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\">\r\n        <fd-card-content style=\"text-align: center\" [style.height]=\"cardContentHeight\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: ["file"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsu-file-viewer-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics\">\r\n            <bsu-mask></bsu-mask>\r\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    <bsu-blob-viewer [file]=\"file\" [style.width]=\"width\"></bsu-blob-viewer>\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\">\r\n        <fd-card-content style=\"text-align: center\" [style.height]=\"cardContentHeight\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.PictureFieldSourcePipe }]; }, propDecorators: { fillWidth: [{
+                type: Input
+            }], imageOnly: [{
+                type: Input
+            }], cardMode: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], showContent: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], cardContentHeight: [{
+                type: Input
+            }], file: [{
+                type: Input
+            }] } });
+
+class FileViewerComponent extends BaseComponent {
+    constructor(_dialogRef) {
+        super();
+        this._dialogRef = _dialogRef;
+        const { title, files, selectedIndex, deviceSize, contentDensity, isImageGallery } = _dialogRef.data;
+        this.title = title;
+        this.files = files;
+        this.selectedFile = files[selectedIndex || 0];
+        this.deviceSize = deviceSize || 'l';
+        this.contentDensity = contentDensity || 'compact';
+        this.isImageGallery = isImageGallery;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    onMedaiClick(media, index) {
+        this.selectedFile = media;
+        if (this.isImageGallery) {
+            this.gallery.nativeElement.querySelector('[id="' + String(index) + '"]')?.scrollIntoView(true);
+        }
+    }
+    onClose() {
+        this._dialogRef.close();
+    }
+}
+FileViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+FileViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerComponent, selector: "bsu-file-viewer", viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dialog #dialogTpl class=\"vertical\">\r\n    <fd-dialog-header>\r\n        <ng-template fdTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Fit image size\"\r\n                    [glyph]=\"'resize'\"\r\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n                    (click)=\"fillWidth = !fillWidth\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body #fdbody>\r\n        <div #gallery class=\"gallery inDialog\" *ngIf=\"isImageGallery\">\r\n            <ng-container *ngFor=\"let media of files; let i = index\">\r\n                <bsu-file-viewer-content [file]=\"selectedFile\" [imageOnly]=\"true\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"gallery\" *ngIf=\"!isImageGallery\">\r\n            <ng-container *ngIf=\"selectedFile\">\r\n                <bsu-file-viewer-content [fillWidth]=\"fillWidth\" [file]=\"selectedFile\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div *ngIf=\"deviceSize !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\r\n        </div>\r\n    </fd-dialog-body>\r\n</fd-dialog>\r\n<ng-template #layoutGridTpl let-files>\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow *ngIf=\"files\">\r\n            <div\r\n                *ngFor=\"let file of files; let i = index\"\r\n                [fdLayoutGridCol]=\"6\"\r\n                [colMd]=\"3\"\r\n                [colLg]=\"2\"\r\n                [colXl]=\"2\"\r\n                (click)=\"onMedaiClick(file, i)\"\r\n            >\r\n                <bsu-file-viewer-content\r\n                    [cardMode]=\"true\"\r\n                    [cardContentHeight]=\"'120px'\"\r\n                    [file]=\"file\"\r\n                ></bsu-file-viewer-content>\r\n            </div>\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse;padding:0}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1}fd-dialog.vertical .thumbnail{border:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4$5.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$5.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$5.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "cardMode", "showFooter", "showContent", "width", "cardContentHeight", "file"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsu-file-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog #dialogTpl class=\"vertical\">\r\n    <fd-dialog-header>\r\n        <ng-template fdTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Fit image size\"\r\n                    [glyph]=\"'resize'\"\r\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n                    (click)=\"fillWidth = !fillWidth\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body #fdbody>\r\n        <div #gallery class=\"gallery inDialog\" *ngIf=\"isImageGallery\">\r\n            <ng-container *ngFor=\"let media of files; let i = index\">\r\n                <bsu-file-viewer-content [file]=\"selectedFile\" [imageOnly]=\"true\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"gallery\" *ngIf=\"!isImageGallery\">\r\n            <ng-container *ngIf=\"selectedFile\">\r\n                <bsu-file-viewer-content [fillWidth]=\"fillWidth\" [file]=\"selectedFile\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div *ngIf=\"deviceSize !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\r\n        </div>\r\n    </fd-dialog-body>\r\n</fd-dialog>\r\n<ng-template #layoutGridTpl let-files>\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow *ngIf=\"files\">\r\n            <div\r\n                *ngFor=\"let file of files; let i = index\"\r\n                [fdLayoutGridCol]=\"6\"\r\n                [colMd]=\"3\"\r\n                [colLg]=\"2\"\r\n                [colXl]=\"2\"\r\n                (click)=\"onMedaiClick(file, i)\"\r\n            >\r\n                <bsu-file-viewer-content\r\n                    [cardMode]=\"true\"\r\n                    [cardContentHeight]=\"'120px'\"\r\n                    [file]=\"file\"\r\n                ></bsu-file-viewer-content>\r\n            </div>\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse;padding:0}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1}fd-dialog.vertical .thumbnail{border:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; }, propDecorators: { gallery: [{
+                type: ViewChild,
+                args: ['gallery']
+            }] } });
+
+class FullscreenFilesDirective {
+    constructor(_dialogService) {
+        this._dialogService = _dialogService;
+    }
+    _handleClick() {
+        this._dialogService.open(this.component ?? FileViewerComponent, {
+            data: {
+                isImageGallery: this.isImageGallery,
+                files: this.files,
+                title: this.title
+            },
+            fullScreen: true
+        });
+    }
+}
+FullscreenFilesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FullscreenFilesDirective, deps: [{ token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Directive });
+FullscreenFilesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: { files: "files", title: "title", isImageGallery: "isImageGallery", component: "component" }, host: { listeners: { "click": "_handleClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FullscreenFilesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fullscreenFiles]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }]; }, propDecorators: { files: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], isImageGallery: [{
+                type: Input
+            }], component: [{
+                type: Input
+            }], _handleClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class DownloadFilesDirective {
+    constructor() { }
+    _handleClick() {
+        const files = this.files;
+        if (!files.length) {
+            return;
+        }
+        const firstFile = files[0];
+        if (files.length === 1) {
+            BarsaApi.Common.File.Download5({ fileId: firstFile.Id });
+        }
+        else {
+            BarsaApi.Common.File.DownloadAllAsZip(files.map((c) => c.Id));
+        }
+    }
+}
+DownloadFilesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DownloadFilesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DownloadFilesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: { files: "files" }, host: { listeners: { "click": "_handleClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DownloadFilesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[downloadFiles]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { files: [{
+                type: Input
+            }], _handleClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class FileViewerPopoverComponent extends BaseComponent {
+    constructor() {
+        super();
+        this.remove = new EventEmitter();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+FileViewerPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileViewerPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: { files: "files", file: "file", deviceSize: "deviceSize", canDownload: "canDownload", disableRemove: "disableRemove", fdType: "fdType" }, outputs: { remove: "remove" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\n    <button\n        fd-button\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\n        [label]=\"file.FileName || ''\"\n        [title]=\"file.FileName || ''\"\n        glyph=\"attachment\"\n        [fdMenu]=\"true\"\n        [fdType]=\"fdType\"\n        class=\"btn-actionsheet\"\n    ></button>\n    <fd-popover\n        #popoverMobile\n        [mobile]=\"true\"\n        [mobileConfig]=\"{ title: 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\n    >\n        <ng-template #popoverBodyContent>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\n            ></ng-container>\n        </ng-template>\n    </fd-popover>\n    <fd-popover #popoverLarge>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n\n    <button *ngIf=\"!disableRemove\" fd-button glyph=\"delete\" (click)=\"remove.emit()\"></button>\n</div>\n\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\n    <div fd-popover-body-header>\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\n            <div fd-bar-left>\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\n            </div>\n        </div>\n    </div>\n    <bsu-file-viewer-content\n        [file]=\"file\"\n        [width]=\"mobile ? '100vw' : '30vw'\"\n        [cardMode]=\"true\"\n        [showContent]=\"true\"\n        [showFooter]=\"true\"\n        [cardContentHeight]=\"mobile ? null : '320px'\"\n    ></bsu-file-viewer-content>\n    <div fd-popover-body-footer *ngIf=\"canDownload\">\n        <div fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-button-bar\n                    fdType=\"transparent\"\n                    glyph=\"download\"\n                    downloadFiles\n                    [files]=\"[file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    *ngIf=\"!mobile\"\n                    fdType=\"transparent\"\n                    glyph=\"resize\"\n                    fullscreenFiles\n                    [files]=\"files?.length ? files : [file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "directive", type: i2$3.DeprecatedBarContentDensityDirective, selector: "[fd-bar][cozy]" }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$2.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i7$2.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "cardMode", "showFooter", "showContent", "width", "cardContentHeight", "file"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "isImageGallery", "component"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsu-file-viewer-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\n    <button\n        fd-button\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\n        [label]=\"file.FileName || ''\"\n        [title]=\"file.FileName || ''\"\n        glyph=\"attachment\"\n        [fdMenu]=\"true\"\n        [fdType]=\"fdType\"\n        class=\"btn-actionsheet\"\n    ></button>\n    <fd-popover\n        #popoverMobile\n        [mobile]=\"true\"\n        [mobileConfig]=\"{ title: 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\n    >\n        <ng-template #popoverBodyContent>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\n            ></ng-container>\n        </ng-template>\n    </fd-popover>\n    <fd-popover #popoverLarge>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n\n    <button *ngIf=\"!disableRemove\" fd-button glyph=\"delete\" (click)=\"remove.emit()\"></button>\n</div>\n\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\n    <div fd-popover-body-header>\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\n            <div fd-bar-left>\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\n            </div>\n        </div>\n    </div>\n    <bsu-file-viewer-content\n        [file]=\"file\"\n        [width]=\"mobile ? '100vw' : '30vw'\"\n        [cardMode]=\"true\"\n        [showContent]=\"true\"\n        [showFooter]=\"true\"\n        [cardContentHeight]=\"mobile ? null : '320px'\"\n    ></bsu-file-viewer-content>\n    <div fd-popover-body-footer *ngIf=\"canDownload\">\n        <div fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-button-bar\n                    fdType=\"transparent\"\n                    glyph=\"download\"\n                    downloadFiles\n                    [files]=\"[file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    *ngIf=\"!mobile\"\n                    fdType=\"transparent\"\n                    glyph=\"resize\"\n                    fullscreenFiles\n                    [files]=\"files?.length ? files : [file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { files: [{
+                type: Input
+            }], file: [{
+                type: Input
+            }], deviceSize: [{
+                type: Input
+            }], canDownload: [{
+                type: Input
+            }], disableRemove: [{
+                type: Input
+            }], fdType: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }] } });
+
 class ColumnRendererComponent extends BaseComponent {
     /**
      *
@@ -4107,12 +4350,19 @@ class ColumnRendererComponent extends BaseComponent {
             this._isSmall = true;
         }
     }
+    ngAfterViewInit() {
+        if (this.column.FieldTypeId.toString() === '31') {
+            setTimeout(() => {
+                this._cdr.detectChanges();
+            }, 0);
+        }
+    }
 }
 ColumnRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ColumnRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", mo: "mo", index: "index", editMode: "editMode", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", rtl: "rtl", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\n        <!-- <fd-text\n            #fdText\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            [maxLines]=\"1\"\n            [text]=\"value\"\n            [fd-inline-help]=\"value\"\n            [disabled]=\"!fdText._hasMore\"\n        ></fd-text> -->\n\n        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            class=\"ellapsis\"\n            >{{ value | bbbTranslate }}</span\n        >\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div style=\"display: flex; flex-wrap: wrap; column-gap: 3px; row-gap: 3px\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "maxWidth"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i9$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ColumnRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", mo: "mo", index: "index", editMode: "editMode", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", rtl: "rtl", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\n        <!-- <fd-text\n            #fdText\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            [maxLines]=\"1\"\n            [text]=\"value\"\n            [fd-inline-help]=\"value\"\n            [disabled]=\"!fdText._hasMore\"\n        ></fd-text> -->\n\n        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            class=\"ellapsis\"\n            >{{ value | bbbTranslate }}</span\n        >\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div class=\"file-viewer-attachments\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <bsu-file-viewer-popover\n                    [style.width.px]=\"containerDom ? containerDom.offsetWidth : null\"\n                    *ngIf=\"!file.IsDeleted\"\n                    [file]=\"file\"\n                    [files]=\"mo[column.Name].Files\"\n                    [deviceSize]=\"deviceSize\"\n                    [canDownload]=\"true\"\n                    [disableRemove]=\"true\"\n                    [fdType]=\"'transparent'\"\n                ></bsu-file-viewer-popover>\n\n                <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "maxWidth"] }, { kind: "component", type: i3$4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType"], outputs: ["remove"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ColumnRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\n        <!-- <fd-text\n            #fdText\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            [maxLines]=\"1\"\n            [text]=\"value\"\n            [fd-inline-help]=\"value\"\n            [disabled]=\"!fdText._hasMore\"\n        ></fd-text> -->\n\n        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            class=\"ellapsis\"\n            >{{ value | bbbTranslate }}</span\n        >\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div style=\"display: flex; flex-wrap: wrap; column-gap: 3px; row-gap: 3px\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}\n"] }]
+            args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\n        <!-- <fd-text\n            #fdText\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            [maxLines]=\"1\"\n            [text]=\"value\"\n            [fd-inline-help]=\"value\"\n            [disabled]=\"!fdText._hasMore\"\n        ></fd-text> -->\n\n        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            class=\"ellapsis\"\n            >{{ value | bbbTranslate }}</span\n        >\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div class=\"file-viewer-attachments\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <bsu-file-viewer-popover\n                    [style.width.px]=\"containerDom ? containerDom.offsetWidth : null\"\n                    *ngIf=\"!file.IsDeleted\"\n                    [file]=\"file\"\n                    [files]=\"mo[column.Name].Files\"\n                    [deviceSize]=\"deviceSize\"\n                    [canDownload]=\"true\"\n                    [disableRemove]=\"true\"\n                    [fdType]=\"'transparent'\"\n                ></bsu-file-viewer-popover>\n\n                <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _isSmall: [{
                 type: HostBinding,
                 args: ['class.isMobile']
@@ -4134,6 +4384,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }], isNewInlineMo: [{
                 type: Input
+            }], containerDom: [{
+                type: Input
             }], rtl: [{
                 type: Input
             }], deviceName: [{
@@ -4589,7 +4841,7 @@ class CardItemComponent extends BaseViewItemPropsComponent {
     }
 }
 CardItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CardItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CardItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CardItemComponent, selector: "bsu-card-item", inputs: { setting: "setting" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<fd-card\n    cardType=\"quickView\"\n    class=\"docs-flex-item-margin\"\n    [class.openOnClick]=\"setting.openOnClick\"\n    [style.width]=\"cardWidth\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n            context: {\n                $implicit: mo,\n                index: this.index\n            }\n        \"\n    ></ng-container>\n\n    <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify *ngIf=\"!noContent || contextMenuItems\">\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplate;\n                    context: {\n                        $implicit: mo,\n                        index: this.index\n                    }\n                \"\n            ></ng-container>\n        </div>\n        <ng-container *ngIf=\"contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\">\n            <div\n                ulvContextMenu\n                [allColumns]=\"allColumns\"\n                [footerMode]=\"true\"\n                [menuItems]=\"contextMenuItems\"\n                [styleIndex]=\"styleIndex\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></div>\n        </ng-container>\n    </fd-card-content>\n</fd-card>\n\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\"\n    ><div\n        *ngIf=\"column\"\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"column | columnValue: mo\"\n            [icon]=\"column | columnIcon: mo\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n    <fd-quick-view [id]=\"'id'\" *ngIf=\"!noContent\">\n        <fd-quick-view-group>\n            <fd-quick-view-subheader\n                *ngIf=\"setting.Avatar || setting.AvatarField || setting.TitleField || setting.SubtitleField\"\n            >\n                <fd-avatar\n                    *ngIf=\"setting.AvatarField || setting.Avatar\"\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [circle]=\"setting.CircleAvatar\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize ? avatarSize : deviceSize === 's' ? 's' : 'm'\"\n                    [glyph]=\"\n                        setting.Avatar ||\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n                <fd-quick-view-subheader-title *ngIf=\"setting.TitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.TitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-title>\n                <fd-quick-view-subheader-subtitle *ngIf=\"setting.SubtitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-subtitle>\n            </fd-quick-view-subheader>\n            <fd-quick-view-group-item *ngFor=\"let column of setting.FieldListMapped\">\n                <ng-container *ngIf=\"column\">\n                    <fd-quick-view-group-item-label>\n                        {{ column.Caption }}\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    columnTemplate;\n                                    context: {\n                                        $implicit: column,\n                                        layout94: layout$ | async,\n                                        mo: mo,\n                                        index: index\n                                    }\n                                \"\n                            ></ng-container>\n                        </div>\n                    </fd-quick-view-group-item-content>\n                </ng-container>\n            </fd-quick-view-group-item>\n            <fd-quick-view-group-item>\n                <fd-quick-view-group-item-content *ngIf=\"setting.DescriptionField\">\n                    <fd-quick-view-group-item-label *ngIf=\"inlineEditMode && allowInlineEdit\">\n                        {{ setting.DescriptionField?.Alias }}\n                    </fd-quick-view-group-item-label>\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.DescriptionField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </fd-quick-view-group-item-content>\n                <fd-quick-view-group-item-content\n                    class=\"action\"\n                    *ngIf=\"setting.ActionFieldNameField\"\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n                >\n                    <a fd-link>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.ActionFieldNameField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </a>\n                </fd-quick-view-group-item-content>\n            </fd-quick-view-group-item>\n        </fd-quick-view-group>\n    </fd-quick-view>\n</ng-template>\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.ContentComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.ContentComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n    <fd-card-header\n        *ngIf=\"\n            isCheckList ||\n            deviceName !== 'desktop' ||\n            (contextMenuItems && contextMenuItems.length > 0 && !contextMenuInFooter)\n        \"\n    >\n        <div\n            fd-card-title\n            [style.justify-content]=\"!isCheckList && canView && deviceName !== 'desktop' ? 'left' : 'space-between'\"\n        >\n            <div style=\"display: flex; justify-content: start; flex-grow: 1\">\n                <fd-checkbox\n                    *ngIf=\"isCheckList\"\n                    [name]=\"mo.$Caption\"\n                    [ngModel]=\"isChecked\"\n                    (ngModelChange)=\"onRowCheck()\"\n                ></fd-checkbox>\n                <div\n                    *ngIf=\"!contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\"\n                    ulvContextMenu\n                    [allColumns]=\"allColumns\"\n                    [menuItems]=\"contextMenuItems\"\n                    [styleIndex]=\"styleIndex\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></div>\n            </div>\n            <ng-container *ngIf=\"canView\">\n                <button\n                    fd-button\n                    class=\"view-btn\"\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </ng-container>\n        </div>\n    </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.HeaderComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.HeaderComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card fd-card-content{padding:0!important}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-card fd-card-header:hover{background:inherit}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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$4.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i9$2.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i9$2.QuickViewSubheaderComponent, selector: "fd-quick-view-subheader" }, { kind: "component", type: i9$2.QuickViewSubheaderTitleComponent, selector: "fd-quick-view-subheader-title" }, { kind: "component", type: i9$2.QuickViewSubheaderSubtitleComponent, selector: "fd-quick-view-subheader-subtitle" }, { kind: "component", type: i9$2.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i9$2.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i9$2.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i9$2.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i9$2.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "rtl", "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.ControlUiPipe, name: "controlUi" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CardItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CardItemComponent, selector: "bsu-card-item", inputs: { setting: "setting" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<fd-card\n    cardType=\"quickView\"\n    class=\"docs-flex-item-margin\"\n    [class.openOnClick]=\"setting.openOnClick\"\n    [style.width]=\"cardWidth\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n            context: {\n                $implicit: mo,\n                index: this.index\n            }\n        \"\n    ></ng-container>\n\n    <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify *ngIf=\"!noContent || contextMenuItems\">\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplate;\n                    context: {\n                        $implicit: mo,\n                        index: this.index\n                    }\n                \"\n            ></ng-container>\n        </div>\n        <ng-container *ngIf=\"contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\">\n            <div\n                ulvContextMenu\n                [allColumns]=\"allColumns\"\n                [footerMode]=\"true\"\n                [menuItems]=\"contextMenuItems\"\n                [styleIndex]=\"styleIndex\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></div>\n        </ng-container>\n    </fd-card-content>\n</fd-card>\n\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\"\n    ><div\n        *ngIf=\"column\"\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"column | columnValue: mo\"\n            [icon]=\"column | columnIcon: mo\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n    <fd-quick-view [id]=\"'id'\" *ngIf=\"!noContent\">\n        <fd-quick-view-group>\n            <fd-quick-view-subheader\n                *ngIf=\"setting.Avatar || setting.AvatarField || setting.TitleField || setting.SubtitleField\"\n            >\n                <fd-avatar\n                    *ngIf=\"setting.AvatarField || setting.Avatar\"\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [circle]=\"setting.CircleAvatar\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize ? avatarSize : deviceSize === 's' ? 's' : 'm'\"\n                    [glyph]=\"\n                        setting.Avatar ||\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n                <fd-quick-view-subheader-title *ngIf=\"setting.TitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.TitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-title>\n                <fd-quick-view-subheader-subtitle *ngIf=\"setting.SubtitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-subtitle>\n            </fd-quick-view-subheader>\n            <fd-quick-view-group-item *ngFor=\"let column of setting.FieldListMapped\">\n                <ng-container *ngIf=\"column\">\n                    <fd-quick-view-group-item-label>\n                        {{ column.Caption }}\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    columnTemplate;\n                                    context: {\n                                        $implicit: column,\n                                        layout94: layout$ | async,\n                                        mo: mo,\n                                        index: index\n                                    }\n                                \"\n                            ></ng-container>\n                        </div>\n                    </fd-quick-view-group-item-content>\n                </ng-container>\n            </fd-quick-view-group-item>\n            <fd-quick-view-group-item>\n                <fd-quick-view-group-item-content *ngIf=\"setting.DescriptionField\">\n                    <fd-quick-view-group-item-label *ngIf=\"inlineEditMode && allowInlineEdit\">\n                        {{ setting.DescriptionField?.Alias }}\n                    </fd-quick-view-group-item-label>\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.DescriptionField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </fd-quick-view-group-item-content>\n                <fd-quick-view-group-item-content\n                    class=\"action\"\n                    *ngIf=\"setting.ActionFieldNameField\"\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n                >\n                    <a fd-link>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.ActionFieldNameField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </a>\n                </fd-quick-view-group-item-content>\n            </fd-quick-view-group-item>\n        </fd-quick-view-group>\n    </fd-quick-view>\n</ng-template>\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.ContentComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.ContentComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n    <fd-card-header\n        *ngIf=\"\n            isCheckList ||\n            deviceName !== 'desktop' ||\n            (contextMenuItems && contextMenuItems.length > 0 && !contextMenuInFooter)\n        \"\n    >\n        <div\n            fd-card-title\n            [style.justify-content]=\"!isCheckList && canView && deviceName !== 'desktop' ? 'left' : 'space-between'\"\n        >\n            <div style=\"display: flex; justify-content: start; flex-grow: 1\">\n                <fd-checkbox\n                    *ngIf=\"isCheckList\"\n                    [name]=\"mo.$Caption\"\n                    [ngModel]=\"isChecked\"\n                    (ngModelChange)=\"onRowCheck()\"\n                ></fd-checkbox>\n                <div\n                    *ngIf=\"!contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\"\n                    ulvContextMenu\n                    [allColumns]=\"allColumns\"\n                    [menuItems]=\"contextMenuItems\"\n                    [styleIndex]=\"styleIndex\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></div>\n            </div>\n            <ng-container *ngIf=\"canView\">\n                <button\n                    fd-button\n                    class=\"view-btn\"\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </ng-container>\n        </div>\n    </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.HeaderComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.HeaderComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card fd-card-content{padding:0!important}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-card fd-card-header:hover{background:inherit}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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i3$4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$5.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i9$1.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i9$1.QuickViewSubheaderComponent, selector: "fd-quick-view-subheader" }, { kind: "component", type: i9$1.QuickViewSubheaderTitleComponent, selector: "fd-quick-view-subheader-title" }, { kind: "component", type: i9$1.QuickViewSubheaderSubtitleComponent, selector: "fd-quick-view-subheader-subtitle" }, { kind: "component", type: i9$1.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i9$1.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i9$1.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i9$1.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i9$1.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "rtl", "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.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: "14.2.7", ngImport: i0, type: CardItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-card-item', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-card\n    cardType=\"quickView\"\n    class=\"docs-flex-item-margin\"\n    [class.openOnClick]=\"setting.openOnClick\"\n    [style.width]=\"cardWidth\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n            context: {\n                $implicit: mo,\n                index: this.index\n            }\n        \"\n    ></ng-container>\n\n    <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify *ngIf=\"!noContent || contextMenuItems\">\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplate;\n                    context: {\n                        $implicit: mo,\n                        index: this.index\n                    }\n                \"\n            ></ng-container>\n        </div>\n        <ng-container *ngIf=\"contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\">\n            <div\n                ulvContextMenu\n                [allColumns]=\"allColumns\"\n                [footerMode]=\"true\"\n                [menuItems]=\"contextMenuItems\"\n                [styleIndex]=\"styleIndex\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></div>\n        </ng-container>\n    </fd-card-content>\n</fd-card>\n\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\"\n    ><div\n        *ngIf=\"column\"\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"column | columnValue: mo\"\n            [icon]=\"column | columnIcon: mo\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n    <fd-quick-view [id]=\"'id'\" *ngIf=\"!noContent\">\n        <fd-quick-view-group>\n            <fd-quick-view-subheader\n                *ngIf=\"setting.Avatar || setting.AvatarField || setting.TitleField || setting.SubtitleField\"\n            >\n                <fd-avatar\n                    *ngIf=\"setting.AvatarField || setting.Avatar\"\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [circle]=\"setting.CircleAvatar\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize ? avatarSize : deviceSize === 's' ? 's' : 'm'\"\n                    [glyph]=\"\n                        setting.Avatar ||\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n                <fd-quick-view-subheader-title *ngIf=\"setting.TitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.TitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-title>\n                <fd-quick-view-subheader-subtitle *ngIf=\"setting.SubtitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-subtitle>\n            </fd-quick-view-subheader>\n            <fd-quick-view-group-item *ngFor=\"let column of setting.FieldListMapped\">\n                <ng-container *ngIf=\"column\">\n                    <fd-quick-view-group-item-label>\n                        {{ column.Caption }}\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    columnTemplate;\n                                    context: {\n                                        $implicit: column,\n                                        layout94: layout$ | async,\n                                        mo: mo,\n                                        index: index\n                                    }\n                                \"\n                            ></ng-container>\n                        </div>\n                    </fd-quick-view-group-item-content>\n                </ng-container>\n            </fd-quick-view-group-item>\n            <fd-quick-view-group-item>\n                <fd-quick-view-group-item-content *ngIf=\"setting.DescriptionField\">\n                    <fd-quick-view-group-item-label *ngIf=\"inlineEditMode && allowInlineEdit\">\n                        {{ setting.DescriptionField?.Alias }}\n                    </fd-quick-view-group-item-label>\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.DescriptionField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </fd-quick-view-group-item-content>\n                <fd-quick-view-group-item-content\n                    class=\"action\"\n                    *ngIf=\"setting.ActionFieldNameField\"\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n                >\n                    <a fd-link>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.ActionFieldNameField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </a>\n                </fd-quick-view-group-item-content>\n            </fd-quick-view-group-item>\n        </fd-quick-view-group>\n    </fd-quick-view>\n</ng-template>\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.ContentComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.ContentComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n    <fd-card-header\n        *ngIf=\"\n            isCheckList ||\n            deviceName !== 'desktop' ||\n            (contextMenuItems && contextMenuItems.length > 0 && !contextMenuInFooter)\n        \"\n    >\n        <div\n            fd-card-title\n            [style.justify-content]=\"!isCheckList && canView && deviceName !== 'desktop' ? 'left' : 'space-between'\"\n        >\n            <div style=\"display: flex; justify-content: start; flex-grow: 1\">\n                <fd-checkbox\n                    *ngIf=\"isCheckList\"\n                    [name]=\"mo.$Caption\"\n                    [ngModel]=\"isChecked\"\n                    (ngModelChange)=\"onRowCheck()\"\n                ></fd-checkbox>\n                <div\n                    *ngIf=\"!contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\"\n                    ulvContextMenu\n                    [allColumns]=\"allColumns\"\n                    [menuItems]=\"contextMenuItems\"\n                    [styleIndex]=\"styleIndex\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></div>\n            </div>\n            <ng-container *ngIf=\"canView\">\n                <button\n                    fd-button\n                    class=\"view-btn\"\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </ng-container>\n        </div>\n    </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.HeaderComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.HeaderComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card fd-card-content{padding:0!important}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-card fd-card-header:hover{background:inherit}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"] }]
@@ -4669,7 +4921,7 @@ class ListItemComponent extends BaseViewItemPropsComponent {
     }
 }
 ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ListItemComponent, selector: "bsu-list-item", inputs: { setting: "setting", isDisplayType: "isDisplayType" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\n></ng-container>\n<ng-template #standardTemplate let-mo>\n    <li\n        fd-list-item\n        class=\"standard-list-row\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [class.selected]=\"isChecked === true\"\n        [selected]=\"isChecked === true\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n        >\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n\n            <span fd-list-thumbnail *ngIf=\"setting.IconFont || setting.AvatarField\">\n                <fd-avatar\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n                    [circle]=\"true\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize\"\n                    [transparent]=\"true\"\n                    [glyph]=\"\n                        setting.IconFont ??\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n            </span>\n            <div fd-list-content>\n                <div fd-list-byline [twoCol]=\"true\">\n                    <div fd-list-title>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.TitleField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats,\n                                    index: 0\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.StatusField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n                <div fd-list-byline>\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderColumn;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                conditionalFormats: conditionalFormats\n                            }\n                        \"\n                    ></ng-container>\n                </div>\n            </div>\n            <bsu-ulv-context-menu\n                [menuItems]=\"contextMenuItems\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></bsu-ulv-context-menu>\n\n            <button\n                *ngIf=\"canView\"\n                (click)=\"onRowClick()\"\n                fdType=\"transparent\"\n                [glyph]=\"navigationArrow\"\n                fd-button\n            ></button>\n        </a>\n    </li>\n</ng-template>\n<ng-template #displayTemplate let-mo>\n    <li\n        class=\"display\"\n        fd-list-item\n        [interactive]=\"false\"\n        *ngIf=\"!mo.parent || mo.parent?.expanded\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            style=\"cursor: default\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n            style=\"column-gap: 3px\"\n        >\n            <img\n                *ngIf=\"setting.AvatarField\"\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\n                style=\"width: 24px; height: 24px\"\n            />\n            <i\n                fd-list-icon\n                *ngIf=\"setting.IconFont\"\n                [glyph]=\"setting.IconFont\"\n                [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n            >\n            </i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && inlineEditMode && isChecked\" glyph=\"edit\"></i>\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n            <span fd-list-title>\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.TitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: 0\n                        }\n                    \"\n                ></ng-container>\n            </span>\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.SubtitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: index\n                        }\n                    \"\n                ></ng-container>\n                <bsu-ulv-context-menu\n                    [menuItems]=\"contextMenuItems\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></bsu-ulv-context-menu>\n                <button\n                    *ngIf=\"canView\"\n                    fd-button\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </span>\n        </a>\n    </li>\n</ng-template>\n<ng-template\n    #renderColumn\n    let-column\n    let-mo=\"mo\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-index=\"index\"\n    let-layout94=\"layout94\"\n>\n    <ng-container *ngIf=\"column\">\n        <div\n            #divEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"divEl\"\n            [dbName]=\"column.Name\"\n        >\n            <bsu-column-renderer\n                [mo]=\"mo\"\n                [column]=\"column\"\n                [value]=\"column | columnValue: mo\"\n                [icon]=\"column | columnIcon: mo\"\n                [editMode]=\"inlineEditMode && allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [controlUi]=\"column.Caption | controlUi: layout94\"\n                (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n                (keyup.esc)=\"onEditFormPanelCancel($event)\"\n                (keydown.Tab)=\"onTabKeyDown($event, index)\"\n                [formLayoutShowLabel]=\"true\"\n            ></bsu-column-renderer>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [":host .display ::ng-deep .fd-list__secondary{align-items:center;justify-content:stretch;display:flex}:host .display bsu-ulv-context-menu{margin:auto}\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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "directive", type: i6$1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i6$1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i6$1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "rtl", "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.ControlUiPipe, name: "controlUi" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ListItemComponent, selector: "bsu-list-item", inputs: { setting: "setting", isDisplayType: "isDisplayType" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\n></ng-container>\n<ng-template #standardTemplate let-mo>\n    <li\n        fd-list-item\n        class=\"standard-list-row\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [class.selected]=\"isChecked === true\"\n        [selected]=\"isChecked === true\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n        >\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n\n            <span fd-list-thumbnail *ngIf=\"setting.IconFont || setting.AvatarField\">\n                <fd-avatar\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n                    [circle]=\"true\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize\"\n                    [transparent]=\"true\"\n                    [glyph]=\"\n                        setting.IconFont ??\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n            </span>\n            <div fd-list-content>\n                <div fd-list-byline [twoCol]=\"true\">\n                    <div fd-list-title>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.TitleField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats,\n                                    index: 0\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.StatusField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n                <div fd-list-byline>\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderColumn;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                conditionalFormats: conditionalFormats\n                            }\n                        \"\n                    ></ng-container>\n                </div>\n            </div>\n            <bsu-ulv-context-menu\n                [menuItems]=\"contextMenuItems\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></bsu-ulv-context-menu>\n\n            <button\n                *ngIf=\"canView\"\n                (click)=\"onRowClick()\"\n                fdType=\"transparent\"\n                [glyph]=\"navigationArrow\"\n                fd-button\n            ></button>\n        </a>\n    </li>\n</ng-template>\n<ng-template #displayTemplate let-mo>\n    <li\n        class=\"display\"\n        fd-list-item\n        [interactive]=\"false\"\n        *ngIf=\"!mo.parent || mo.parent?.expanded\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            style=\"cursor: default\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n            style=\"column-gap: 3px\"\n        >\n            <img\n                *ngIf=\"setting.AvatarField\"\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\n                style=\"width: 24px; height: 24px\"\n            />\n            <i\n                fd-list-icon\n                *ngIf=\"setting.IconFont\"\n                [glyph]=\"setting.IconFont\"\n                [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n            >\n            </i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && inlineEditMode && isChecked\" glyph=\"edit\"></i>\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n            <span fd-list-title>\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.TitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: 0\n                        }\n                    \"\n                ></ng-container>\n            </span>\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.SubtitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: index\n                        }\n                    \"\n                ></ng-container>\n                <bsu-ulv-context-menu\n                    [menuItems]=\"contextMenuItems\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></bsu-ulv-context-menu>\n                <button\n                    *ngIf=\"canView\"\n                    fd-button\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </span>\n        </a>\n    </li>\n</ng-template>\n<ng-template\n    #renderColumn\n    let-column\n    let-mo=\"mo\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-index=\"index\"\n    let-layout94=\"layout94\"\n>\n    <ng-container *ngIf=\"column\">\n        <div\n            #divEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"divEl\"\n            [dbName]=\"column.Name\"\n        >\n            <bsu-column-renderer\n                [mo]=\"mo\"\n                [column]=\"column\"\n                [value]=\"column | columnValue: mo\"\n                [icon]=\"column | columnIcon: mo\"\n                [editMode]=\"inlineEditMode && allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [controlUi]=\"column.Caption | controlUi: layout94\"\n                (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n                (keyup.esc)=\"onEditFormPanelCancel($event)\"\n                (keydown.Tab)=\"onTabKeyDown($event, index)\"\n                [formLayoutShowLabel]=\"true\"\n            ></bsu-column-renderer>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [":host .display ::ng-deep .fd-list__secondary{align-items:center;justify-content:stretch;display:flex}:host .display bsu-ulv-context-menu{margin:auto}\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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "directive", type: i6$1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i6$1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i6$1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "rtl", "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.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: "14.2.7", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-list-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\n></ng-container>\n<ng-template #standardTemplate let-mo>\n    <li\n        fd-list-item\n        class=\"standard-list-row\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [class.selected]=\"isChecked === true\"\n        [selected]=\"isChecked === true\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n        >\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n\n            <span fd-list-thumbnail *ngIf=\"setting.IconFont || setting.AvatarField\">\n                <fd-avatar\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n                    [circle]=\"true\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize\"\n                    [transparent]=\"true\"\n                    [glyph]=\"\n                        setting.IconFont ??\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n            </span>\n            <div fd-list-content>\n                <div fd-list-byline [twoCol]=\"true\">\n                    <div fd-list-title>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.TitleField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats,\n                                    index: 0\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.StatusField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n                <div fd-list-byline>\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderColumn;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                conditionalFormats: conditionalFormats\n                            }\n                        \"\n                    ></ng-container>\n                </div>\n            </div>\n            <bsu-ulv-context-menu\n                [menuItems]=\"contextMenuItems\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></bsu-ulv-context-menu>\n\n            <button\n                *ngIf=\"canView\"\n                (click)=\"onRowClick()\"\n                fdType=\"transparent\"\n                [glyph]=\"navigationArrow\"\n                fd-button\n            ></button>\n        </a>\n    </li>\n</ng-template>\n<ng-template #displayTemplate let-mo>\n    <li\n        class=\"display\"\n        fd-list-item\n        [interactive]=\"false\"\n        *ngIf=\"!mo.parent || mo.parent?.expanded\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            style=\"cursor: default\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n            style=\"column-gap: 3px\"\n        >\n            <img\n                *ngIf=\"setting.AvatarField\"\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\n                style=\"width: 24px; height: 24px\"\n            />\n            <i\n                fd-list-icon\n                *ngIf=\"setting.IconFont\"\n                [glyph]=\"setting.IconFont\"\n                [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n            >\n            </i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && inlineEditMode && isChecked\" glyph=\"edit\"></i>\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n            <span fd-list-title>\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.TitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: 0\n                        }\n                    \"\n                ></ng-container>\n            </span>\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.SubtitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: index\n                        }\n                    \"\n                ></ng-container>\n                <bsu-ulv-context-menu\n                    [menuItems]=\"contextMenuItems\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></bsu-ulv-context-menu>\n                <button\n                    *ngIf=\"canView\"\n                    fd-button\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </span>\n        </a>\n    </li>\n</ng-template>\n<ng-template\n    #renderColumn\n    let-column\n    let-mo=\"mo\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-index=\"index\"\n    let-layout94=\"layout94\"\n>\n    <ng-container *ngIf=\"column\">\n        <div\n            #divEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"divEl\"\n            [dbName]=\"column.Name\"\n        >\n            <bsu-column-renderer\n                [mo]=\"mo\"\n                [column]=\"column\"\n                [value]=\"column | columnValue: mo\"\n                [icon]=\"column | columnIcon: mo\"\n                [editMode]=\"inlineEditMode && allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [controlUi]=\"column.Caption | controlUi: layout94\"\n                (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n                (keyup.esc)=\"onEditFormPanelCancel($event)\"\n                (keydown.Tab)=\"onTabKeyDown($event, index)\"\n                [formLayoutShowLabel]=\"true\"\n            ></bsu-column-renderer>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [":host .display ::ng-deep .fd-list__secondary{align-items:center;justify-content:stretch;display:flex}:host .display bsu-ulv-context-menu{margin:auto}\n"] }]
@@ -4724,7 +4976,7 @@ class UiListViewComponent extends ReportViewBaseComponent {
     }
 }
 UiListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiListViewComponent, selector: "bsu-ui-list-view", viewQueries: [{ propertyName: "popupModeTemplateRef", first: true, predicate: ["popupMode"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultModeTemplateRef", first: true, predicate: ["defaultMode"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"selectedPresentaionTemplate\"></ng-container>\n\n<ng-template #popupMode>\n    <ng-container *ngTemplateOutlet=\"deviceSize === 's' ? mobileTpl : desktopTpl\"></ng-container>\n\n    <!-- <fd-menu [appendTo]=\"_el\"\n    #menu [mobile]=\"deviceSize === 's'\" >\n    </fd-menu> -->\n</ng-template>\n<ng-template #mobileTpl>\n    <div class=\"popup-mode\">\n        <ng-container *ngTemplateOutlet=\"buttonDropDown; context: { menu: menu }\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n    <fd-menu #menu [mobile]=\"true\" [mobileConfig]=\"{ title: title | bbbTranslate, hasCloseButton: true }\">\n        <ng-container *ngTemplateOutlet=\"defaultMode; context: { popover: menu, popupMode: true }\"></ng-container>\n    </fd-menu>\n</ng-template>\n<ng-template #desktopTpl>\n    <fd-popover #popover fillControlMode=\"equal\">\n        <fd-popover-control class=\"popup-mode\">\n            <ng-container *ngTemplateOutlet=\"buttonDropDown\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"defaultMode; context: { popover: popover, popupMode: true }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n</ng-template>\n<ng-template #buttonDropDown let-menu=\"menu\">\n    <button class=\"drop-down\" fd-button [label]=\"title | bbbTranslate\" [fdMenu]=\"true\" [fdMenuTrigger]=\"menu\">\n        <span\n            *ngIf=\"selectedCount > 0\"\n            fd-object-status\n            [inverted]=\"true\"\n            [label]=\"selectedCount\"\n            [title]=\"selectedCount\"\n        ></span>\n    </button>\n</ng-template>\n<ng-template #tokensTpl>\n    <div *ngIf=\"hasSelected\" style=\"padding: 5px; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px\">\n        <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n            <fd-token *ngIf=\"mo.$IsChecked\" fdCozy [readOnly]=\"false\" (onCloseClick)=\"onRowCheck({mo, index})\">{{\n                columns[0].Caption | rval: mo:columns:true\n            }}</fd-token>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultMode let-popover=\"popover\" let-popupMode=\"popupMode\">\n    <fd-layout-panel [class.popup-mode]=\"popupMode\" [ngClass]=\"'size-' + deviceSize\">\n        <fd-layout-panel-header>\n            <fd-layout-panel-head>\n                <h4 fd-layout-panel-title>{{ title | bbbTranslate }}</h4>\n                <span\n                    *ngIf=\"selectedCount > 0\"\n                    fd-object-status\n                    [inverted]=\"true\"\n                    [label]=\"selectedCount\"\n                    [title]=\"selectedCount\"\n                ></span>\n            </fd-layout-panel-head>\n            <fd-layout-panel-actions>\n                <button\n                    *ngIf=\"deviceSize !== 's'\"\n                    style=\"margin-top: 5px\"\n                    fd-button\n                    glyph=\"decline\"\n                    fdType=\"transparent\"\n                    (click)=\"popover.close()\"\n                ></button>\n            </fd-layout-panel-actions>\n        </fd-layout-panel-header>\n        <fd-layout-panel-filters *ngIf=\"isCheckList\">\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <a class=\"clearCheckAll\" (click)=\"onAllCheckbox($event)\" fd-link [aria-label]=\"'All' | bbbTranslate\">{{\n                    'All' | bbbTranslate\n                }}</a>\n                <label fd-toolbar-label style=\"font-size: 1rem; font-weight: bold\">.</label>\n                <a\n                    (click)=\"onClearCheckbox()\"\n                    fd-toolbar-item\n                    class=\"clearCheckAll\"\n                    fd-link\n                    [aria-label]=\"'Clear' | bbbTranslate\"\n                    >{{ 'Clear' | bbbTranslate }}</a\n                >\n            </fd-toolbar>\n        </fd-layout-panel-filters>\n\n        <fd-layout-panel-body [bleed]=\"true\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    isDisplayType ? displayListTemplate : standardListTemplate;\n                    context: {\n                        $implicit: moDataList,\n                        isCheckList: isCheckList,\n                        groupby: groupby,\n                        conditionalFormats: conditionalFormats,\n                        deviceName: deviceName,\n                        viewSetting: viewSetting,\n                        allColumns: allColumns,\n                        access: access,\n                        rtl: rtl,\n                        popover: popover\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-layout-panel-body>\n    </fd-layout-panel>\n</ng-template>\n\n<!--display list-->\n<ng-template\n    #displayListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-allColumns=\"allColumns\"\n    let-viewSetting=\"viewSetting\"\n    let-access=\"access\"\n    let-rtl=\"rtl\"\n>\n    <ul\n        fd-list\n        class=\"display-list fd-list--navigation\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; let last = last\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n<!--standard list-->\n<ng-template\n    #standardListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-allColumns=\"allColumns\"\n    let-deviceName=\"deviceName\"\n    let-access=\"access\"\n    let-viewSetting=\"viewSetting\"\n    let-rtl=\"rtl\"\n    let-last=\"last\"\n>\n    <ul\n        class=\"fd-list--navigation\"\n        [class.fd-list--byline]=\"!isDisplayType\"\n        fd-list\n        [byline]=\"true\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<!--noData-->\n<ng-template #noData>\n    <bsu-no-data></bsu-no-data>\n</ng-template>\n<ng-template\n    #itemTemplate\n    let-mo\n    let-index=\"index\"\n    let-last=\"last\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n>\n    <li\n        fd-list-group-header\n        *ngIf=\"mo.group || mo.group === ''; else listItemTemplate\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [attr.level]=\"mo.level\"\n        [class.root-group]=\"mo.level === 0\"\n    >\n        <fd-icon\n            [glyph]=\"mo.expanded ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n            class=\"cell-expand\"\n            (click)=\"onExpandClick(mo)\"\n        ></fd-icon>\n        <span fd-list-title>{{ mo.group }}</span>\n    </li>\n    <ng-template #listItemTemplate>\n        <ng-container\n            *ngTemplateOutlet=\"\n                hasRowOlgo ? dynamicItemTemplate : defaultItem;\n                context: {\n                    $implicit: mo,\n                    index: index,\n                    columns: columns,\n                    moDataList: moDataList,\n                    moDataListCount: moDataList.length\n                }\n            \"\n        ></ng-container>\n        <ng-template\n            #defaultItem\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bsu-list-item\n                *ngIf=\"!hasRowOlgo; else dynamicItemTemplate\"\n                [isDisplayType]=\"isDisplayType\"\n                [mo]=\"mo\"\n                [isChecked]=\"mo.$IsChecked\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"listSetting\"\n                [editMode]=\"inlineEditMode\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [formSetting]=\"formSetting\"\n                [allColumns]=\"allColumns\"\n                [contentDensity]=\"contentDensity\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                (rowCheck)=\"onRowCheck($event)\"\n                (rowClick)=\"onRowClick($event)\"\n                (ulvCommand)=\"onUlvCommand($event)\"\n                (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n            >\n            </bsu-list-item>\n        </ng-template>\n\n        <ng-template\n            #dynamicItemTemplate\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bnrc-dynamic-item-component\n                [component]=\"viewSetting.RowOlgo\"\n                [mo]=\"mo\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [moDataList]=\"moDataList\"\n                [showDetailsInRow]=\"showDetailsInRow\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [detailsColumns]=\"detailsColumns\"\n                [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n                [cartableTemplate]=\"cartableTemplates[mo.RelatedMo?.$TypeDefId]\"\n                [cartableMo]=\"mo.RelatedMo\"\n                [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n                [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n                [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n                [detailsComponent]=\"detailsComponent\"\n                [isChecked]=\"mo.$IsChecked\"\n                [visibility]=\"mo.$Visibility\"\n                [expanded]=\"mo.$Expanded\"\n                [level]=\"mo.$Level\"\n                [parentExpanded]=\"mo.$Parent?.$Expanded\"\n                [moDataListCount]=\"moDataListCount\"\n                [columnsCount]=\"columnsCount - detailsColumns.length\"\n                [typeDefId]=\"typeDefId\"\n                [extraRelation]=\"extraRelation\"\n                [formSetting]=\"formSetting\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"viewSetting\"\n                [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n                [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [access]=\"access\"\n                [inlineEditMode]=\"inlineEditMode\"\n                [allowInlineEdit]=\"allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [allColumns]=\"allColumns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                [rowIndicator]=\"columns[0].MetaFieldTypeId === '41'\"\n                (events)=\"onOlgoEvents($event)\"\n            >\n            </bnrc-dynamic-item-component>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [".fd-list__group-header{column-gap:10px;align-items:center}.header th{border-left:none!important;border-right:none!important}.clearCheckAll{text-decoration:none!important}.fd-list--navigation-indication .fd-list__item:after{min-width:0!important}li.standard-list-row{padding-top:.2rem;padding-bottom:.2rem;min-height:4rem;justify-content:space-evenly;column-gap:10px}li.standard-list-row:hover:not(.selected){background-color:var(--sapBackgroundColor, #f7f7f7)}li.standard-list-row .fd-list__content{row-gap:.4rem}li.standard-list-row .fd-list__content .fd-list__byline{padding:0;font-size:.775rem}li.standard-list-row ::ng-deep .fd-form-item{position:static}li.standard-list-row ::ng-deep .fd-form-item .fd-checkbox__label--compact{padding:0;margin-left:0}li.standard-list-row ::ng-deep fd-icon{font-size:.75rem!important}fd-layout-panel{height:100%}.li-link.checklink[rtl=true]{padding-right:0!important}.li-link.checklist[rtl=false]{padding-left:0!important}.standard-list-group-label{padding-top:10px;padding-bottom:3px}fd-layout-panel-header{display:none}fd-layout-panel.popup-mode.size-s{box-shadow:none!important}fd-layout-panel.popup-mode.size-s fd-layout-panel-header{display:none!important}.popup-mode fd-layout-panel-header{display:flex;min-height:1rem;height:1rem;border:none!important}.popup-mode fd-layout-panel-header h4{font-weight:700;font-size:1rem}.popup-mode fd-layout-panel-head{display:flex;column-gap:5px;align-items:center;justify-content:center}.popup-mode ::ng-deep li{border:none!important}.popup-mode fd-layout-panel-body{margin-top:.3rem}.popup-mode fd-layout-panel-filters{border:none!important;padding:0 1rem}.popup-mode .drop-down{width:100%;max-width:100%;max-height:2rem!important;height:2rem!important;background:var(--sapButton_Background)!important;border:1px solid #ccc!important}.popup-mode .drop-down ::ng-deep span{font-size:1rem!important;line-height:1.2rem!important}.popup-mode .drop-down ::ng-deep fd-icon{position:absolute;left:10px}fd-popover{width:100%;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "directive", type: i3$5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$4.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i7$3.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i7$3.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i7$3.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i7$3.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i7$3.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i7$3.LayoutPanelFiltersComponent, selector: "fd-layout-panel-filters" }, { kind: "component", type: i7$3.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i9.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i7$1.ToolbarLabelDirective, selector: "[fd-toolbar-label]" }, { kind: "component", type: i9$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: NoDataComponent, selector: "bsu-no-data" }, { kind: "component", type: ListItemComponent, selector: "bsu-list-item", inputs: ["setting", "isDisplayType"] }, { kind: "pipe", type: i2.MultipleGroupByPipe, name: "multipleGroupBy" }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterColumnsByDetailsPipe, name: "filterColumnsByDetails" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiListViewComponent, selector: "bsu-ui-list-view", viewQueries: [{ propertyName: "popupModeTemplateRef", first: true, predicate: ["popupMode"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultModeTemplateRef", first: true, predicate: ["defaultMode"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"selectedPresentaionTemplate\"></ng-container>\n\n<ng-template #popupMode>\n    <ng-container *ngTemplateOutlet=\"deviceSize === 's' ? mobileTpl : desktopTpl\"></ng-container>\n\n    <!-- <fd-menu [appendTo]=\"_el\"\n    #menu [mobile]=\"deviceSize === 's'\" >\n    </fd-menu> -->\n</ng-template>\n<ng-template #mobileTpl>\n    <div class=\"popup-mode\">\n        <ng-container *ngTemplateOutlet=\"buttonDropDown; context: { menu: menu }\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n    <fd-menu #menu [mobile]=\"true\" [mobileConfig]=\"{ title: title | bbbTranslate, hasCloseButton: true }\">\n        <ng-container *ngTemplateOutlet=\"defaultMode; context: { popover: menu, popupMode: true }\"></ng-container>\n    </fd-menu>\n</ng-template>\n<ng-template #desktopTpl>\n    <fd-popover #popover fillControlMode=\"equal\">\n        <fd-popover-control class=\"popup-mode\">\n            <ng-container *ngTemplateOutlet=\"buttonDropDown\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"defaultMode; context: { popover: popover, popupMode: true }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n</ng-template>\n<ng-template #buttonDropDown let-menu=\"menu\">\n    <button class=\"drop-down\" fd-button [label]=\"title | bbbTranslate\" [fdMenu]=\"true\" [fdMenuTrigger]=\"menu\">\n        <span\n            *ngIf=\"selectedCount > 0\"\n            fd-object-status\n            [inverted]=\"true\"\n            [label]=\"selectedCount\"\n            [title]=\"selectedCount\"\n        ></span>\n    </button>\n</ng-template>\n<ng-template #tokensTpl>\n    <div *ngIf=\"hasSelected\" style=\"padding: 5px; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px\">\n        <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n            <fd-token *ngIf=\"mo.$IsChecked\" fdCozy [readOnly]=\"false\" (onCloseClick)=\"onRowCheck({mo, index})\">{{\n                columns[0].Caption | rval: mo:columns:true\n            }}</fd-token>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultMode let-popover=\"popover\" let-popupMode=\"popupMode\">\n    <fd-layout-panel [class.popup-mode]=\"popupMode\" [ngClass]=\"'size-' + deviceSize\">\n        <fd-layout-panel-header>\n            <fd-layout-panel-head>\n                <h4 fd-layout-panel-title>{{ title | bbbTranslate }}</h4>\n                <span\n                    *ngIf=\"selectedCount > 0\"\n                    fd-object-status\n                    [inverted]=\"true\"\n                    [label]=\"selectedCount\"\n                    [title]=\"selectedCount\"\n                ></span>\n            </fd-layout-panel-head>\n            <fd-layout-panel-actions>\n                <button\n                    *ngIf=\"deviceSize !== 's'\"\n                    style=\"margin-top: 5px\"\n                    fd-button\n                    glyph=\"decline\"\n                    fdType=\"transparent\"\n                    (click)=\"popover.close()\"\n                ></button>\n            </fd-layout-panel-actions>\n        </fd-layout-panel-header>\n        <fd-layout-panel-filters *ngIf=\"isCheckList\">\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <a class=\"clearCheckAll\" (click)=\"onAllCheckbox($event)\" fd-link [aria-label]=\"'All' | bbbTranslate\">{{\n                    'All' | bbbTranslate\n                }}</a>\n                <label fd-toolbar-label style=\"font-size: 1rem; font-weight: bold\">.</label>\n                <a\n                    (click)=\"onClearCheckbox()\"\n                    fd-toolbar-item\n                    class=\"clearCheckAll\"\n                    fd-link\n                    [aria-label]=\"'Clear' | bbbTranslate\"\n                    >{{ 'Clear' | bbbTranslate }}</a\n                >\n            </fd-toolbar>\n        </fd-layout-panel-filters>\n\n        <fd-layout-panel-body [bleed]=\"true\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    isDisplayType ? displayListTemplate : standardListTemplate;\n                    context: {\n                        $implicit: moDataList,\n                        isCheckList: isCheckList,\n                        groupby: groupby,\n                        conditionalFormats: conditionalFormats,\n                        deviceName: deviceName,\n                        viewSetting: viewSetting,\n                        allColumns: allColumns,\n                        access: access,\n                        rtl: rtl,\n                        popover: popover\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-layout-panel-body>\n    </fd-layout-panel>\n</ng-template>\n\n<!--display list-->\n<ng-template\n    #displayListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-allColumns=\"allColumns\"\n    let-viewSetting=\"viewSetting\"\n    let-access=\"access\"\n    let-rtl=\"rtl\"\n>\n    <ul\n        fd-list\n        class=\"display-list fd-list--navigation\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; let last = last\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n<!--standard list-->\n<ng-template\n    #standardListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-allColumns=\"allColumns\"\n    let-deviceName=\"deviceName\"\n    let-access=\"access\"\n    let-viewSetting=\"viewSetting\"\n    let-rtl=\"rtl\"\n    let-last=\"last\"\n>\n    <ul\n        class=\"fd-list--navigation\"\n        [class.fd-list--byline]=\"!isDisplayType\"\n        fd-list\n        [byline]=\"true\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<!--noData-->\n<ng-template #noData>\n    <bsu-no-data></bsu-no-data>\n</ng-template>\n<ng-template\n    #itemTemplate\n    let-mo\n    let-index=\"index\"\n    let-last=\"last\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n>\n    <li\n        fd-list-group-header\n        *ngIf=\"mo.group || mo.group === ''; else listItemTemplate\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [attr.level]=\"mo.level\"\n        [class.root-group]=\"mo.level === 0\"\n    >\n        <fd-icon\n            [glyph]=\"mo.expanded ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n            class=\"cell-expand\"\n            (click)=\"onExpandClick(mo)\"\n        ></fd-icon>\n        <span fd-list-title>{{ mo.group }}</span>\n    </li>\n    <ng-template #listItemTemplate>\n        <ng-container\n            *ngTemplateOutlet=\"\n                hasRowOlgo ? dynamicItemTemplate : defaultItem;\n                context: {\n                    $implicit: mo,\n                    index: index,\n                    columns: columns,\n                    moDataList: moDataList,\n                    moDataListCount: moDataList.length\n                }\n            \"\n        ></ng-container>\n        <ng-template\n            #defaultItem\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bsu-list-item\n                *ngIf=\"!hasRowOlgo; else dynamicItemTemplate\"\n                [isDisplayType]=\"isDisplayType\"\n                [mo]=\"mo\"\n                [isChecked]=\"mo.$IsChecked\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"listSetting\"\n                [editMode]=\"inlineEditMode\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [formSetting]=\"formSetting\"\n                [allColumns]=\"allColumns\"\n                [contentDensity]=\"contentDensity\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                (rowCheck)=\"onRowCheck($event)\"\n                (rowClick)=\"onRowClick($event)\"\n                (ulvCommand)=\"onUlvCommand($event)\"\n                (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n            >\n            </bsu-list-item>\n        </ng-template>\n\n        <ng-template\n            #dynamicItemTemplate\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bnrc-dynamic-item-component\n                [component]=\"viewSetting.RowOlgo\"\n                [mo]=\"mo\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [moDataList]=\"moDataList\"\n                [showDetailsInRow]=\"showDetailsInRow\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [detailsColumns]=\"detailsColumns\"\n                [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n                [cartableTemplate]=\"cartableTemplates[mo.RelatedMo?.$TypeDefId]\"\n                [cartableMo]=\"mo.RelatedMo\"\n                [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n                [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n                [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n                [detailsComponent]=\"detailsComponent\"\n                [isChecked]=\"mo.$IsChecked\"\n                [visibility]=\"mo.$Visibility\"\n                [expanded]=\"mo.$Expanded\"\n                [level]=\"mo.$Level\"\n                [parentExpanded]=\"mo.$Parent?.$Expanded\"\n                [moDataListCount]=\"moDataListCount\"\n                [columnsCount]=\"columnsCount - detailsColumns.length\"\n                [typeDefId]=\"typeDefId\"\n                [extraRelation]=\"extraRelation\"\n                [formSetting]=\"formSetting\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"viewSetting\"\n                [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n                [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [access]=\"access\"\n                [inlineEditMode]=\"inlineEditMode\"\n                [allowInlineEdit]=\"allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [allColumns]=\"allColumns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                [rowIndicator]=\"columns[0].MetaFieldTypeId === '41'\"\n                (events)=\"onOlgoEvents($event)\"\n            >\n            </bnrc-dynamic-item-component>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [".fd-list__group-header{column-gap:10px;align-items:center}.header th{border-left:none!important;border-right:none!important}.clearCheckAll{text-decoration:none!important}.fd-list--navigation-indication .fd-list__item:after{min-width:0!important}li.standard-list-row{padding-top:.2rem;padding-bottom:.2rem;min-height:4rem;justify-content:space-evenly;column-gap:10px}li.standard-list-row:hover:not(.selected){background-color:var(--sapBackgroundColor, #f7f7f7)}li.standard-list-row .fd-list__content{row-gap:.4rem}li.standard-list-row .fd-list__content .fd-list__byline{padding:0;font-size:.775rem}li.standard-list-row ::ng-deep .fd-form-item{position:static}li.standard-list-row ::ng-deep .fd-form-item .fd-checkbox__label--compact{padding:0;margin-left:0}li.standard-list-row ::ng-deep fd-icon{font-size:.75rem!important}fd-layout-panel{height:100%}.li-link.checklink[rtl=true]{padding-right:0!important}.li-link.checklist[rtl=false]{padding-left:0!important}.standard-list-group-label{padding-top:10px;padding-bottom:3px}fd-layout-panel-header{display:none}fd-layout-panel.popup-mode.size-s{box-shadow:none!important}fd-layout-panel.popup-mode.size-s fd-layout-panel-header{display:none!important}.popup-mode fd-layout-panel-header{display:flex;min-height:1rem;height:1rem;border:none!important}.popup-mode fd-layout-panel-header h4{font-weight:700;font-size:1rem}.popup-mode fd-layout-panel-head{display:flex;column-gap:5px;align-items:center;justify-content:center}.popup-mode ::ng-deep li{border:none!important}.popup-mode fd-layout-panel-body{margin-top:.3rem}.popup-mode fd-layout-panel-filters{border:none!important;padding:0 1rem}.popup-mode .drop-down{width:100%;max-width:100%;max-height:2rem!important;height:2rem!important;background:var(--sapButton_Background)!important;border:1px solid #ccc!important}.popup-mode .drop-down ::ng-deep span{font-size:1rem!important;line-height:1.2rem!important}.popup-mode .drop-down ::ng-deep fd-icon{position:absolute;left:10px}fd-popover{width:100%;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "directive", type: i3$6.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$5.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i7$3.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i7$3.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i7$3.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i7$3.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i7$3.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i7$3.LayoutPanelFiltersComponent, selector: "fd-layout-panel-filters" }, { kind: "component", type: i7$3.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i9.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i7$1.ToolbarLabelDirective, selector: "[fd-toolbar-label]" }, { kind: "component", type: i9$2.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: NoDataComponent, selector: "bsu-no-data" }, { kind: "component", type: ListItemComponent, selector: "bsu-list-item", inputs: ["setting", "isDisplayType"] }, { kind: "pipe", type: i2.MultipleGroupByPipe, name: "multipleGroupBy" }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterColumnsByDetailsPipe, name: "filterColumnsByDetails" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-list-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngTemplateOutlet=\"selectedPresentaionTemplate\"></ng-container>\n\n<ng-template #popupMode>\n    <ng-container *ngTemplateOutlet=\"deviceSize === 's' ? mobileTpl : desktopTpl\"></ng-container>\n\n    <!-- <fd-menu [appendTo]=\"_el\"\n    #menu [mobile]=\"deviceSize === 's'\" >\n    </fd-menu> -->\n</ng-template>\n<ng-template #mobileTpl>\n    <div class=\"popup-mode\">\n        <ng-container *ngTemplateOutlet=\"buttonDropDown; context: { menu: menu }\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n    <fd-menu #menu [mobile]=\"true\" [mobileConfig]=\"{ title: title | bbbTranslate, hasCloseButton: true }\">\n        <ng-container *ngTemplateOutlet=\"defaultMode; context: { popover: menu, popupMode: true }\"></ng-container>\n    </fd-menu>\n</ng-template>\n<ng-template #desktopTpl>\n    <fd-popover #popover fillControlMode=\"equal\">\n        <fd-popover-control class=\"popup-mode\">\n            <ng-container *ngTemplateOutlet=\"buttonDropDown\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"defaultMode; context: { popover: popover, popupMode: true }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n    <ng-container *ngTemplateOutlet=\"tokensTpl\"></ng-container>\n</ng-template>\n<ng-template #buttonDropDown let-menu=\"menu\">\n    <button class=\"drop-down\" fd-button [label]=\"title | bbbTranslate\" [fdMenu]=\"true\" [fdMenuTrigger]=\"menu\">\n        <span\n            *ngIf=\"selectedCount > 0\"\n            fd-object-status\n            [inverted]=\"true\"\n            [label]=\"selectedCount\"\n            [title]=\"selectedCount\"\n        ></span>\n    </button>\n</ng-template>\n<ng-template #tokensTpl>\n    <div *ngIf=\"hasSelected\" style=\"padding: 5px; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px\">\n        <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n            <fd-token *ngIf=\"mo.$IsChecked\" fdCozy [readOnly]=\"false\" (onCloseClick)=\"onRowCheck({mo, index})\">{{\n                columns[0].Caption | rval: mo:columns:true\n            }}</fd-token>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultMode let-popover=\"popover\" let-popupMode=\"popupMode\">\n    <fd-layout-panel [class.popup-mode]=\"popupMode\" [ngClass]=\"'size-' + deviceSize\">\n        <fd-layout-panel-header>\n            <fd-layout-panel-head>\n                <h4 fd-layout-panel-title>{{ title | bbbTranslate }}</h4>\n                <span\n                    *ngIf=\"selectedCount > 0\"\n                    fd-object-status\n                    [inverted]=\"true\"\n                    [label]=\"selectedCount\"\n                    [title]=\"selectedCount\"\n                ></span>\n            </fd-layout-panel-head>\n            <fd-layout-panel-actions>\n                <button\n                    *ngIf=\"deviceSize !== 's'\"\n                    style=\"margin-top: 5px\"\n                    fd-button\n                    glyph=\"decline\"\n                    fdType=\"transparent\"\n                    (click)=\"popover.close()\"\n                ></button>\n            </fd-layout-panel-actions>\n        </fd-layout-panel-header>\n        <fd-layout-panel-filters *ngIf=\"isCheckList\">\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                <a class=\"clearCheckAll\" (click)=\"onAllCheckbox($event)\" fd-link [aria-label]=\"'All' | bbbTranslate\">{{\n                    'All' | bbbTranslate\n                }}</a>\n                <label fd-toolbar-label style=\"font-size: 1rem; font-weight: bold\">.</label>\n                <a\n                    (click)=\"onClearCheckbox()\"\n                    fd-toolbar-item\n                    class=\"clearCheckAll\"\n                    fd-link\n                    [aria-label]=\"'Clear' | bbbTranslate\"\n                    >{{ 'Clear' | bbbTranslate }}</a\n                >\n            </fd-toolbar>\n        </fd-layout-panel-filters>\n\n        <fd-layout-panel-body [bleed]=\"true\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    isDisplayType ? displayListTemplate : standardListTemplate;\n                    context: {\n                        $implicit: moDataList,\n                        isCheckList: isCheckList,\n                        groupby: groupby,\n                        conditionalFormats: conditionalFormats,\n                        deviceName: deviceName,\n                        viewSetting: viewSetting,\n                        allColumns: allColumns,\n                        access: access,\n                        rtl: rtl,\n                        popover: popover\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-layout-panel-body>\n    </fd-layout-panel>\n</ng-template>\n\n<!--display list-->\n<ng-template\n    #displayListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-deviceName=\"deviceName\"\n    let-allColumns=\"allColumns\"\n    let-viewSetting=\"viewSetting\"\n    let-access=\"access\"\n    let-rtl=\"rtl\"\n>\n    <ul\n        fd-list\n        class=\"display-list fd-list--navigation\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index; let last = last\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n<!--standard list-->\n<ng-template\n    #standardListTemplate\n    let-moDataList\n    let-isCheckList=\"isCheckList\"\n    let-groupby=\"groupby\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-allColumns=\"allColumns\"\n    let-deviceName=\"deviceName\"\n    let-access=\"access\"\n    let-viewSetting=\"viewSetting\"\n    let-rtl=\"rtl\"\n    let-last=\"last\"\n>\n    <ul\n        class=\"fd-list--navigation\"\n        [class.fd-list--byline]=\"!isDisplayType\"\n        fd-list\n        [byline]=\"true\"\n        *ngIf=\"moDataList && moDataList.length > 0; else noData\"\n        ellipsify\n    >\n        <ng-container *ngFor=\"let mo of moDataList | multipleGroupBy: groupby; let index = index\">\n            <ng-container *ngIf=\"!mo.parent || mo.parent?.expanded\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: mo,\n                            index: index,\n                            last: last,\n                            columns: columns,\n                            moDataList: moDataList,\n                            moDataListCount: moDataList.length\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<!--noData-->\n<ng-template #noData>\n    <bsu-no-data></bsu-no-data>\n</ng-template>\n<ng-template\n    #itemTemplate\n    let-mo\n    let-index=\"index\"\n    let-last=\"last\"\n    let-columns=\"columns\"\n    let-moDataListCount=\"moDataListCount\"\n    let-moDataList=\"moDataList\"\n>\n    <li\n        fd-list-group-header\n        *ngIf=\"mo.group || mo.group === ''; else listItemTemplate\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [attr.level]=\"mo.level\"\n        [class.root-group]=\"mo.level === 0\"\n    >\n        <fd-icon\n            [glyph]=\"mo.expanded ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n            class=\"cell-expand\"\n            (click)=\"onExpandClick(mo)\"\n        ></fd-icon>\n        <span fd-list-title>{{ mo.group }}</span>\n    </li>\n    <ng-template #listItemTemplate>\n        <ng-container\n            *ngTemplateOutlet=\"\n                hasRowOlgo ? dynamicItemTemplate : defaultItem;\n                context: {\n                    $implicit: mo,\n                    index: index,\n                    columns: columns,\n                    moDataList: moDataList,\n                    moDataListCount: moDataList.length\n                }\n            \"\n        ></ng-container>\n        <ng-template\n            #defaultItem\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bsu-list-item\n                *ngIf=\"!hasRowOlgo; else dynamicItemTemplate\"\n                [isDisplayType]=\"isDisplayType\"\n                [mo]=\"mo\"\n                [isChecked]=\"mo.$IsChecked\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"listSetting\"\n                [editMode]=\"inlineEditMode\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [formSetting]=\"formSetting\"\n                [allColumns]=\"allColumns\"\n                [contentDensity]=\"contentDensity\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                (rowCheck)=\"onRowCheck($event)\"\n                (rowClick)=\"onRowClick($event)\"\n                (ulvCommand)=\"onUlvCommand($event)\"\n                (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n            >\n            </bsu-list-item>\n        </ng-template>\n\n        <ng-template\n            #dynamicItemTemplate\n            let-mo\n            let-index=\"index\"\n            let-columns=\"columns\"\n            let-moDataListCount=\"moDataListCount\"\n            let-moDataList=\"moDataList\"\n        >\n            <bnrc-dynamic-item-component\n                [component]=\"viewSetting.RowOlgo\"\n                [mo]=\"mo\"\n                [styleIndex]=\"mo.$StyleIndex\"\n                [moDataList]=\"moDataList\"\n                [showDetailsInRow]=\"showDetailsInRow\"\n                [hideOpenIcon]=\"hideOpenIcon\"\n                [detailsColumns]=\"detailsColumns\"\n                [columnComponents]=\"viewSetting?.ColumnComponents || null\"\n                [cartableTemplate]=\"cartableTemplates[mo.RelatedMo?.$TypeDefId]\"\n                [cartableMo]=\"mo.RelatedMo\"\n                [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\n                [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\n                [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\n                [detailsComponent]=\"detailsComponent\"\n                [isChecked]=\"mo.$IsChecked\"\n                [visibility]=\"mo.$Visibility\"\n                [expanded]=\"mo.$Expanded\"\n                [level]=\"mo.$Level\"\n                [parentExpanded]=\"mo.$Parent?.$Expanded\"\n                [moDataListCount]=\"moDataListCount\"\n                [columnsCount]=\"columnsCount - detailsColumns.length\"\n                [typeDefId]=\"typeDefId\"\n                [extraRelation]=\"extraRelation\"\n                [formSetting]=\"formSetting\"\n                [index]=\"index\"\n                [last]=\"last\"\n                [setting]=\"viewSetting\"\n                [secondaryColumns]=\"secondaryColumns | filterColumnsByDetails: detailsColumns\"\n                [columns]=\"columns | filterColumnsByDetails: detailsColumns\"\n                [isNewInlineMo]=\"mo.$NewInlineMo\"\n                [access]=\"access\"\n                [inlineEditMode]=\"inlineEditMode\"\n                [allowInlineEdit]=\"allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [allColumns]=\"allColumns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [canView]=\"canView\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [navigationArrow]=\"navigationArrow\"\n                [isCheckList]=\"isCheckList\"\n                [rowIndicator]=\"columns[0].MetaFieldTypeId === '41'\"\n                (events)=\"onOlgoEvents($event)\"\n            >\n            </bnrc-dynamic-item-component>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [".fd-list__group-header{column-gap:10px;align-items:center}.header th{border-left:none!important;border-right:none!important}.clearCheckAll{text-decoration:none!important}.fd-list--navigation-indication .fd-list__item:after{min-width:0!important}li.standard-list-row{padding-top:.2rem;padding-bottom:.2rem;min-height:4rem;justify-content:space-evenly;column-gap:10px}li.standard-list-row:hover:not(.selected){background-color:var(--sapBackgroundColor, #f7f7f7)}li.standard-list-row .fd-list__content{row-gap:.4rem}li.standard-list-row .fd-list__content .fd-list__byline{padding:0;font-size:.775rem}li.standard-list-row ::ng-deep .fd-form-item{position:static}li.standard-list-row ::ng-deep .fd-form-item .fd-checkbox__label--compact{padding:0;margin-left:0}li.standard-list-row ::ng-deep fd-icon{font-size:.75rem!important}fd-layout-panel{height:100%}.li-link.checklink[rtl=true]{padding-right:0!important}.li-link.checklist[rtl=false]{padding-left:0!important}.standard-list-group-label{padding-top:10px;padding-bottom:3px}fd-layout-panel-header{display:none}fd-layout-panel.popup-mode.size-s{box-shadow:none!important}fd-layout-panel.popup-mode.size-s fd-layout-panel-header{display:none!important}.popup-mode fd-layout-panel-header{display:flex;min-height:1rem;height:1rem;border:none!important}.popup-mode fd-layout-panel-header h4{font-weight:700;font-size:1rem}.popup-mode fd-layout-panel-head{display:flex;column-gap:5px;align-items:center;justify-content:center}.popup-mode ::ng-deep li{border:none!important}.popup-mode fd-layout-panel-body{margin-top:.3rem}.popup-mode fd-layout-panel-filters{border:none!important;padding:0 1rem}.popup-mode .drop-down{width:100%;max-width:100%;max-height:2rem!important;height:2rem!important;background:var(--sapButton_Background)!important;border:1px solid #ccc!important}.popup-mode .drop-down ::ng-deep span{font-size:1rem!important;line-height:1.2rem!important}.popup-mode .drop-down ::ng-deep fd-icon{position:absolute;left:10px}fd-popover{width:100%;max-width:100%}\n"] }]
@@ -4877,10 +5129,10 @@ class BarsaTableColumnComponent extends BaseColumnPropsComponent {
     }
 }
 BarsaTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTableColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BarsaTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", providers: [FormPanelService, ColumnService], usesInheritance: true, ngImport: i0, template: "<div\n    [class.editMode]=\"editMode\"\n    style=\"display: flex; width: 100%\"\n    [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n    <ng-container *ngIf=\"customComponent; else columnRendererTpl\">\n        <bnrc-dynamic-item-component\n            [component]=\"customComponent\"\n            [mo]=\"mo\"\n            [isChecked]=\"isChecked\"\n            [setting]=\"detailsComponentSetting\"\n            [parameters]=\"customComponent.Settings\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [allColumns]=\"allColumns\"\n        ></bnrc-dynamic-item-component>\n    </ng-container>\n    <ng-template #columnRendererTpl>\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [isChecked]=\"isChecked\"\n            [index]=\"index\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [formLayoutShowLabel]=\"false\"\n            [deviceSize]=\"deviceSize\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"save.emit($event)\"\n            (keyup.esc)=\"cancel.emit($event)\"\n            (keydown.Tab)=\"tab.emit($event)\"\n        ></bsu-column-renderer>\n    </ng-template>\n\n    <ng-container *ngIf=\"editMode\">\n        <ng-container *ngFor=\"let fieldCaption of column.$MergedFieldsToColumn\">\n            <ng-container *ngIf=\"fieldCaption | controlUi: layout94 as layoutConfig\">\n                <bsu-layout-control\n                    [caption]=\"fieldCaption\"\n                    [config]=\"layoutConfig\"\n                    [showLabel]=\"false\"\n                    [inlineEdit]=\"true\"\n                    (keyup.control.enter)=\"save.emit($event)\"\n                    (keyup.esc)=\"cancel.emit($event)\"\n                    (keydown.Tab)=\"tab.emit($event)\"\n                ></bsu-layout-control>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "rtl", "deviceName", "deviceSize", "value", "icon"] }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", providers: [FormPanelService, ColumnService], usesInheritance: true, ngImport: i0, template: "<div\n    [class.editMode]=\"editMode\"\n    #divDom\n    style=\"display: flex; width: 100%\"\n    [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n    <ng-container *ngIf=\"customComponent; else columnRendererTpl\">\n        <bnrc-dynamic-item-component\n            [component]=\"customComponent\"\n            [mo]=\"mo\"\n            [isChecked]=\"isChecked\"\n            [setting]=\"detailsComponentSetting\"\n            [parameters]=\"customComponent.Settings\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [allColumns]=\"allColumns\"\n            [containerDom]=\"divDom\"\n        ></bnrc-dynamic-item-component>\n    </ng-container>\n    <ng-template #columnRendererTpl>\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [containerDom]=\"divDom\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [isChecked]=\"isChecked\"\n            [index]=\"index\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [formLayoutShowLabel]=\"false\"\n            [deviceSize]=\"deviceSize\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"save.emit($event)\"\n            (keyup.esc)=\"cancel.emit($event)\"\n            (keydown.Tab)=\"tab.emit($event)\"\n        ></bsu-column-renderer>\n    </ng-template>\n\n    <ng-container *ngIf=\"editMode\">\n        <ng-container *ngFor=\"let fieldCaption of column.$MergedFieldsToColumn\">\n            <ng-container *ngIf=\"fieldCaption | controlUi: layout94 as layoutConfig\">\n                <bsu-layout-control\n                    [caption]=\"fieldCaption\"\n                    [config]=\"layoutConfig\"\n                    [showLabel]=\"false\"\n                    [inlineEdit]=\"true\"\n                    (keyup.control.enter)=\"save.emit($event)\"\n                    (keyup.esc)=\"cancel.emit($event)\"\n                    (keydown.Tab)=\"tab.emit($event)\"\n                ></bsu-layout-control>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "rtl", "deviceName", "deviceSize", "value", "icon"] }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTableColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-table-column', providers: [FormPanelService, ColumnService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [class.editMode]=\"editMode\"\n    style=\"display: flex; width: 100%\"\n    [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n    <ng-container *ngIf=\"customComponent; else columnRendererTpl\">\n        <bnrc-dynamic-item-component\n            [component]=\"customComponent\"\n            [mo]=\"mo\"\n            [isChecked]=\"isChecked\"\n            [setting]=\"detailsComponentSetting\"\n            [parameters]=\"customComponent.Settings\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [allColumns]=\"allColumns\"\n        ></bnrc-dynamic-item-component>\n    </ng-container>\n    <ng-template #columnRendererTpl>\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [isChecked]=\"isChecked\"\n            [index]=\"index\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [formLayoutShowLabel]=\"false\"\n            [deviceSize]=\"deviceSize\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"save.emit($event)\"\n            (keyup.esc)=\"cancel.emit($event)\"\n            (keydown.Tab)=\"tab.emit($event)\"\n        ></bsu-column-renderer>\n    </ng-template>\n\n    <ng-container *ngIf=\"editMode\">\n        <ng-container *ngFor=\"let fieldCaption of column.$MergedFieldsToColumn\">\n            <ng-container *ngIf=\"fieldCaption | controlUi: layout94 as layoutConfig\">\n                <bsu-layout-control\n                    [caption]=\"fieldCaption\"\n                    [config]=\"layoutConfig\"\n                    [showLabel]=\"false\"\n                    [inlineEdit]=\"true\"\n                    (keyup.control.enter)=\"save.emit($event)\"\n                    (keyup.esc)=\"cancel.emit($event)\"\n                    (keydown.Tab)=\"tab.emit($event)\"\n                ></bsu-layout-control>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"] }]
+            args: [{ selector: 'bsu-barsa-table-column', providers: [FormPanelService, ColumnService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [class.editMode]=\"editMode\"\n    #divDom\n    style=\"display: flex; width: 100%\"\n    [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n    <ng-container *ngIf=\"customComponent; else columnRendererTpl\">\n        <bnrc-dynamic-item-component\n            [component]=\"customComponent\"\n            [mo]=\"mo\"\n            [isChecked]=\"isChecked\"\n            [setting]=\"detailsComponentSetting\"\n            [parameters]=\"customComponent.Settings\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [allColumns]=\"allColumns\"\n            [containerDom]=\"divDom\"\n        ></bnrc-dynamic-item-component>\n    </ng-container>\n    <ng-template #columnRendererTpl>\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [containerDom]=\"divDom\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [isChecked]=\"isChecked\"\n            [index]=\"index\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [formLayoutShowLabel]=\"false\"\n            [deviceSize]=\"deviceSize\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"save.emit($event)\"\n            (keyup.esc)=\"cancel.emit($event)\"\n            (keydown.Tab)=\"tab.emit($event)\"\n        ></bsu-column-renderer>\n    </ng-template>\n\n    <ng-container *ngIf=\"editMode\">\n        <ng-container *ngFor=\"let fieldCaption of column.$MergedFieldsToColumn\">\n            <ng-container *ngIf=\"fieldCaption | controlUi: layout94 as layoutConfig\">\n                <bsu-layout-control\n                    [caption]=\"fieldCaption\"\n                    [config]=\"layoutConfig\"\n                    [showLabel]=\"false\"\n                    [inlineEdit]=\"true\"\n                    (keyup.control.enter)=\"save.emit($event)\"\n                    (keyup.esc)=\"cancel.emit($event)\"\n                    (keydown.Tab)=\"tab.emit($event)\"\n                ></bsu-layout-control>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"] }]
         }] });
 
 class BarsaColumnIndicatorComponent extends BaseComponent {
@@ -5052,7 +5304,7 @@ class NotificationItemComponent extends BaseComponent {
     }
 }
 NotificationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NotificationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NotificationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NotificationItemComponent, selector: "bsu-notification-item", inputs: { option: "option", notificationItem: "notificationItem", showCloseButton: "showCloseButton", deviceSize: "deviceSize" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", show: "show", close: "close" }, host: { properties: { "class": "this._deviceSize" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\n\n<ng-template #optionTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n                choiceDefStatus: null,\n                isNew: false,\n                loading: false,\n                icon: option.icon,\n                statusCaption: '',\n                unread: true,\n                title: option.title,\n                content: option.msg,\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\n                overflowButtons: false,\n                uiActions: option.NotificationItem?.UiActions,\n                hideShowButton: true,\n                hideDeleteButton: true,\n                mo: option.mo\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #notificationItemTemplate>\n    <fd-notification>\n        <ng-container\n            *ngTemplateOutlet=\"\n                bodyTemplate;\n                context: {\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\n                    isNew: notificationItem.$NewNotification,\n                    loading: notificationItem.$NotificatoinLoading,\n                    icon: notificationItem.Icon,\n                    statusCaption: notificationItem.Status$Caption,\n                    unread: notificationItem.Unread,\n                    title: notificationItem.Title,\n                    content: notificationItem.$SafeContent,\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\n                    overflowButtons: notificationItem.OverflowButtons || deviceSize === 's',\n                    uiActions: notificationItem.UiActions,\n                    hideShowButton: notificationItem.HideShowButton,\n                    hideDeleteButton: notificationItem.HideDeleteButton,\n                    mo: notificationItem\n                }\n            \"\n        ></ng-container>\n    </fd-notification>\n</ng-template>\n\n<ng-template\n    #bodyTemplate\n    let-choiceDefStatus=\"choiceDefStatus\"\n    let-isNew=\"isNew\"\n    let-loading=\"loading\"\n    let-icon=\"icon\"\n    let-statusCaption=\"statusCaption\"\n    let-unread=\"unread\"\n    let-title=\"title\"\n    let-content=\"content\"\n    let-userCaption=\"userCaption\"\n    let-dateCaption=\"dateCaption\"\n    let-overflowButtons=\"overflowButtons\"\n    let-uiActions=\"uiActions\"\n    let-hideShowButton=\"hideShowButton\"\n    let-hideDeleteButton=\"hideDeleteButton\"\n    let-mo=\"mo\"\n>\n    <fd-notification-body>\n        <fd-message-strip *ngIf=\"choiceDefStatus?.error\" type=\"error\" style=\"margin: 0.5rem\">\n            {{ choiceDefStatus.error.Text }}\n        </fd-message-strip>\n        <ng-container *ngIf=\"loading || isNew || choiceDefStatus?.loading\">\n            <bsu-mask [top]=\"'10px'\"></bsu-mask>\n        </ng-container>\n        <fd-avatar\n            [transparent]=\"true\"\n            [circle]=\"true\"\n            size=\"xs\"\n            [glyph]=\"!icon ? 'bell' : null\"\n            [image]=\"icon ? icon : null\"\n        ></fd-avatar>\n        <fd-notification-content style=\"overflow: hidden\">\n            <fd-notification-header>\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\n            </fd-notification-header>\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\n            <fd-notification-footer>\n                <span fd-notification-footer-content>{{ userCaption }}</span>\n                <span fd-notification-separator></span>\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\n            </fd-notification-footer>\n        </fd-notification-content>\n        <fd-notification-actions>\n            <fd-action-sheet #sheet *ngIf=\"overflowButtons; else buttonsTpl\">\n                <fd-action-sheet-control>\n                    <button\n                        role=\"menu\"\n                        [ariaLabel]=\"'More' | bbbTranslate\"\n                        [title]=\"'More' | bbbTranslate\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"overflow\"\n                    ></button>\n                </fd-action-sheet-control>\n\n                <fd-action-sheet-body>\n                    <li\n                        *ngFor=\"let btn of uiActions\"\n                        fd-action-sheet-item\n                        [glyph]=\"btn.Icon\"\n                        [label]=\"btn.Title | bbbTranslate\"\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: this.btn })\"\n                    ></li>\n                </fd-action-sheet-body>\n            </fd-action-sheet>\n            <ng-template #buttonsTpl>\n                <button\n                    *ngFor=\"let btn of uiActions\"\n                    fd-button\n                    [glyph]=\"btn.Icon\"\n                    [fdType]=\"btn.Status\"\n                    [label]=\"btn.Title | bbbTranslate\"\n                    fdCompact\n                    (click)=\"actionClick.emit({ item: mo, btn: this.btn })\"\n                ></button>\n            </ng-template>\n            <button\n                *ngIf=\"!hideShowButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Show' | bbbTranslate\"\n                [title]=\"'Show' | bbbTranslate\"\n                glyph=\"show\"\n                (click)=\"show.emit({ mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\n                fdCompact\n            ></button>\n            <button\n                *ngIf=\"!hideDeleteButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\n                [title]=\"'Delete' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"remove.emit({ items: [mo], silent: false })\"\n                fdCompact\n            ></button>\n\n            <button\n                *ngIf=\"showCloseButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'close' | bbbTranslate\"\n                [title]=\"'close' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"close.emit()\"\n                fdCompact\n            ></button>\n        </fd-notification-actions>\n    </fd-notification-body>\n</ng-template>\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}:host.s fd-notification-content{min-width:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: i2$4.ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: i2$4.ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: i2$4.ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: i3$5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i7$4.NotificationComponent, selector: "fd-notification", inputs: ["width", "mobile"] }, { kind: "component", type: i7$4.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i7$4.NotificationFooterComponent, selector: "fd-notification-footer" }, { kind: "component", type: i7$4.NotificationBodyComponent, selector: "fd-notification-body" }, { kind: "component", type: i7$4.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i7$4.NotificationContentComponent, selector: "fd-notification-content" }, { kind: "directive", type: i7$4.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { kind: "directive", type: i7$4.NotificationIndicatorDirective, selector: "[fdNotificationIndicator], [fd-notification-indicator]", inputs: ["type", "class"] }, { kind: "directive", type: i7$4.NotificationParagraphDirective, selector: "[fdNotificationParagraph], [fd-notification-paragraph]" }, { kind: "directive", type: i7$4.NotificationFooterContentDirective, selector: "[fdNotificationFooterContent], [fd-notification-footer-content]" }, { kind: "directive", type: i7$4.NotificationSeparatorDirective, selector: "[fdNotificationSeparator], [fd-notification-separator]" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NotificationItemComponent, selector: "bsu-notification-item", inputs: { option: "option", notificationItem: "notificationItem", showCloseButton: "showCloseButton", deviceSize: "deviceSize" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", show: "show", close: "close" }, host: { properties: { "class": "this._deviceSize" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\n\n<ng-template #optionTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n                choiceDefStatus: null,\n                isNew: false,\n                loading: false,\n                icon: option.icon,\n                statusCaption: '',\n                unread: true,\n                title: option.title,\n                content: option.msg,\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\n                overflowButtons: false,\n                uiActions: option.NotificationItem?.UiActions,\n                hideShowButton: true,\n                hideDeleteButton: true,\n                mo: option.mo\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #notificationItemTemplate>\n    <fd-notification>\n        <ng-container\n            *ngTemplateOutlet=\"\n                bodyTemplate;\n                context: {\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\n                    isNew: notificationItem.$NewNotification,\n                    loading: notificationItem.$NotificatoinLoading,\n                    icon: notificationItem.Icon,\n                    statusCaption: notificationItem.Status$Caption,\n                    unread: notificationItem.Unread,\n                    title: notificationItem.Title,\n                    content: notificationItem.$SafeContent,\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\n                    overflowButtons: notificationItem.OverflowButtons || deviceSize === 's',\n                    uiActions: notificationItem.UiActions,\n                    hideShowButton: notificationItem.HideShowButton,\n                    hideDeleteButton: notificationItem.HideDeleteButton,\n                    mo: notificationItem\n                }\n            \"\n        ></ng-container>\n    </fd-notification>\n</ng-template>\n\n<ng-template\n    #bodyTemplate\n    let-choiceDefStatus=\"choiceDefStatus\"\n    let-isNew=\"isNew\"\n    let-loading=\"loading\"\n    let-icon=\"icon\"\n    let-statusCaption=\"statusCaption\"\n    let-unread=\"unread\"\n    let-title=\"title\"\n    let-content=\"content\"\n    let-userCaption=\"userCaption\"\n    let-dateCaption=\"dateCaption\"\n    let-overflowButtons=\"overflowButtons\"\n    let-uiActions=\"uiActions\"\n    let-hideShowButton=\"hideShowButton\"\n    let-hideDeleteButton=\"hideDeleteButton\"\n    let-mo=\"mo\"\n>\n    <fd-notification-body>\n        <fd-message-strip *ngIf=\"choiceDefStatus?.error\" type=\"error\" style=\"margin: 0.5rem\">\n            {{ choiceDefStatus.error.Text }}\n        </fd-message-strip>\n        <ng-container *ngIf=\"loading || isNew || choiceDefStatus?.loading\">\n            <bsu-mask [top]=\"'10px'\"></bsu-mask>\n        </ng-container>\n        <fd-avatar\n            [transparent]=\"true\"\n            [circle]=\"true\"\n            size=\"xs\"\n            [glyph]=\"!icon ? 'bell' : null\"\n            [image]=\"icon ? icon : null\"\n        ></fd-avatar>\n        <fd-notification-content style=\"overflow: hidden\">\n            <fd-notification-header>\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\n            </fd-notification-header>\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\n            <fd-notification-footer>\n                <span fd-notification-footer-content>{{ userCaption }}</span>\n                <span fd-notification-separator></span>\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\n            </fd-notification-footer>\n        </fd-notification-content>\n        <fd-notification-actions>\n            <fd-action-sheet #sheet *ngIf=\"overflowButtons; else buttonsTpl\">\n                <fd-action-sheet-control>\n                    <button\n                        role=\"menu\"\n                        [ariaLabel]=\"'More' | bbbTranslate\"\n                        [title]=\"'More' | bbbTranslate\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"overflow\"\n                    ></button>\n                </fd-action-sheet-control>\n\n                <fd-action-sheet-body>\n                    <li\n                        *ngFor=\"let btn of uiActions\"\n                        fd-action-sheet-item\n                        [glyph]=\"btn.Icon\"\n                        [label]=\"btn.Title | bbbTranslate\"\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: this.btn })\"\n                    ></li>\n                </fd-action-sheet-body>\n            </fd-action-sheet>\n            <ng-template #buttonsTpl>\n                <button\n                    *ngFor=\"let btn of uiActions\"\n                    fd-button\n                    [glyph]=\"btn.Icon\"\n                    [fdType]=\"btn.Status\"\n                    [label]=\"btn.Title | bbbTranslate\"\n                    fdCompact\n                    (click)=\"actionClick.emit({ item: mo, btn: this.btn })\"\n                ></button>\n            </ng-template>\n            <button\n                *ngIf=\"!hideShowButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Show' | bbbTranslate\"\n                [title]=\"'Show' | bbbTranslate\"\n                glyph=\"show\"\n                (click)=\"show.emit({ mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\n                fdCompact\n            ></button>\n            <button\n                *ngIf=\"!hideDeleteButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\n                [title]=\"'Delete' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"remove.emit({ items: [mo], silent: false })\"\n                fdCompact\n            ></button>\n\n            <button\n                *ngIf=\"showCloseButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'close' | bbbTranslate\"\n                [title]=\"'close' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"close.emit()\"\n                fdCompact\n            ></button>\n        </fd-notification-actions>\n    </fd-notification-body>\n</ng-template>\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}:host.s fd-notification-content{min-width:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: i2$4.ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: i2$4.ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: i2$4.ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: i3$6.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$4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i7$4.NotificationComponent, selector: "fd-notification", inputs: ["width", "mobile"] }, { kind: "component", type: i7$4.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i7$4.NotificationFooterComponent, selector: "fd-notification-footer" }, { kind: "component", type: i7$4.NotificationBodyComponent, selector: "fd-notification-body" }, { kind: "component", type: i7$4.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i7$4.NotificationContentComponent, selector: "fd-notification-content" }, { kind: "directive", type: i7$4.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { kind: "directive", type: i7$4.NotificationIndicatorDirective, selector: "[fdNotificationIndicator], [fd-notification-indicator]", inputs: ["type", "class"] }, { kind: "directive", type: i7$4.NotificationParagraphDirective, selector: "[fdNotificationParagraph], [fd-notification-paragraph]" }, { kind: "directive", type: i7$4.NotificationFooterContentDirective, selector: "[fdNotificationFooterContent], [fd-notification-footer-content]" }, { kind: "directive", type: i7$4.NotificationSeparatorDirective, selector: "[fdNotificationSeparator], [fd-notification-separator]" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NotificationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-notification-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\n\n<ng-template #optionTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n                choiceDefStatus: null,\n                isNew: false,\n                loading: false,\n                icon: option.icon,\n                statusCaption: '',\n                unread: true,\n                title: option.title,\n                content: option.msg,\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\n                overflowButtons: false,\n                uiActions: option.NotificationItem?.UiActions,\n                hideShowButton: true,\n                hideDeleteButton: true,\n                mo: option.mo\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #notificationItemTemplate>\n    <fd-notification>\n        <ng-container\n            *ngTemplateOutlet=\"\n                bodyTemplate;\n                context: {\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\n                    isNew: notificationItem.$NewNotification,\n                    loading: notificationItem.$NotificatoinLoading,\n                    icon: notificationItem.Icon,\n                    statusCaption: notificationItem.Status$Caption,\n                    unread: notificationItem.Unread,\n                    title: notificationItem.Title,\n                    content: notificationItem.$SafeContent,\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\n                    overflowButtons: notificationItem.OverflowButtons || deviceSize === 's',\n                    uiActions: notificationItem.UiActions,\n                    hideShowButton: notificationItem.HideShowButton,\n                    hideDeleteButton: notificationItem.HideDeleteButton,\n                    mo: notificationItem\n                }\n            \"\n        ></ng-container>\n    </fd-notification>\n</ng-template>\n\n<ng-template\n    #bodyTemplate\n    let-choiceDefStatus=\"choiceDefStatus\"\n    let-isNew=\"isNew\"\n    let-loading=\"loading\"\n    let-icon=\"icon\"\n    let-statusCaption=\"statusCaption\"\n    let-unread=\"unread\"\n    let-title=\"title\"\n    let-content=\"content\"\n    let-userCaption=\"userCaption\"\n    let-dateCaption=\"dateCaption\"\n    let-overflowButtons=\"overflowButtons\"\n    let-uiActions=\"uiActions\"\n    let-hideShowButton=\"hideShowButton\"\n    let-hideDeleteButton=\"hideDeleteButton\"\n    let-mo=\"mo\"\n>\n    <fd-notification-body>\n        <fd-message-strip *ngIf=\"choiceDefStatus?.error\" type=\"error\" style=\"margin: 0.5rem\">\n            {{ choiceDefStatus.error.Text }}\n        </fd-message-strip>\n        <ng-container *ngIf=\"loading || isNew || choiceDefStatus?.loading\">\n            <bsu-mask [top]=\"'10px'\"></bsu-mask>\n        </ng-container>\n        <fd-avatar\n            [transparent]=\"true\"\n            [circle]=\"true\"\n            size=\"xs\"\n            [glyph]=\"!icon ? 'bell' : null\"\n            [image]=\"icon ? icon : null\"\n        ></fd-avatar>\n        <fd-notification-content style=\"overflow: hidden\">\n            <fd-notification-header>\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\n            </fd-notification-header>\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\n            <fd-notification-footer>\n                <span fd-notification-footer-content>{{ userCaption }}</span>\n                <span fd-notification-separator></span>\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\n            </fd-notification-footer>\n        </fd-notification-content>\n        <fd-notification-actions>\n            <fd-action-sheet #sheet *ngIf=\"overflowButtons; else buttonsTpl\">\n                <fd-action-sheet-control>\n                    <button\n                        role=\"menu\"\n                        [ariaLabel]=\"'More' | bbbTranslate\"\n                        [title]=\"'More' | bbbTranslate\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"overflow\"\n                    ></button>\n                </fd-action-sheet-control>\n\n                <fd-action-sheet-body>\n                    <li\n                        *ngFor=\"let btn of uiActions\"\n                        fd-action-sheet-item\n                        [glyph]=\"btn.Icon\"\n                        [label]=\"btn.Title | bbbTranslate\"\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: this.btn })\"\n                    ></li>\n                </fd-action-sheet-body>\n            </fd-action-sheet>\n            <ng-template #buttonsTpl>\n                <button\n                    *ngFor=\"let btn of uiActions\"\n                    fd-button\n                    [glyph]=\"btn.Icon\"\n                    [fdType]=\"btn.Status\"\n                    [label]=\"btn.Title | bbbTranslate\"\n                    fdCompact\n                    (click)=\"actionClick.emit({ item: mo, btn: this.btn })\"\n                ></button>\n            </ng-template>\n            <button\n                *ngIf=\"!hideShowButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Show' | bbbTranslate\"\n                [title]=\"'Show' | bbbTranslate\"\n                glyph=\"show\"\n                (click)=\"show.emit({ mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\n                fdCompact\n            ></button>\n            <button\n                *ngIf=\"!hideDeleteButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\n                [title]=\"'Delete' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"remove.emit({ items: [mo], silent: false })\"\n                fdCompact\n            ></button>\n\n            <button\n                *ngIf=\"showCloseButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'close' | bbbTranslate\"\n                [title]=\"'close' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"close.emit()\"\n                fdCompact\n            ></button>\n        </fd-notification-actions>\n    </fd-notification-body>\n</ng-template>\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}:host.s fd-notification-content{min-width:auto!important}\n"] }]
@@ -5654,7 +5906,7 @@ class BreadcrumbComponent extends BaseComponent {
     }
 }
 BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i2$5.Router }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: { breadCrumb: "breadCrumb", allBreadCrumb: "allBreadCrumb", isLast: "isLast", index: "index" }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isLast\" fd-link (click)=\"onBreadcrumb()\">{{ breadCrumb.label | bbbTranslate }}</a>\n<span *ngIf=\"isLast\">{{ breadCrumb.label | bbbTranslate }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: { breadCrumb: "breadCrumb", allBreadCrumb: "allBreadCrumb", isLast: "isLast", index: "index" }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isLast\" fd-link (click)=\"onBreadcrumb()\">{{ breadCrumb.label | bbbTranslate }}</a>\n<span *ngIf=\"isLast\">{{ breadCrumb.label | bbbTranslate }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$5.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a *ngIf=\"!isLast\" fd-link (click)=\"onBreadcrumb()\">{{ breadCrumb.label | bbbTranslate }}</a>\n<span *ngIf=\"isLast\">{{ breadCrumb.label | bbbTranslate }}</span>\n" }]
@@ -5741,7 +5993,7 @@ class BarsaUlvMainComponent extends BaseComponent {
     }
 }
 BarsaUlvMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaUlvMainComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BarsaUlvMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: { viewerControl: "viewerControl", loading: "loading", viewerLoading: "viewerLoading", isReportPage: "isReportPage", deviceSize: "deviceSize", title: "title", searchPanelUi: "searchPanelUi", breadCrumbs: "breadCrumbs", allSearchPanelSettings: "allSearchPanelSettings", isAnonymous: "isAnonymous", rtl: "rtl", selectedSearchPanelSettings: "selectedSearchPanelSettings", searchPanelMoChanged: "searchPanelMoChanged", selectedSearchPanelSettingsId: "selectedSearchPanelSettingsId", hideSearchPanel: "hideSearchPanel", pagingSetting: "pagingSetting", contentDensity: "contentDensity", context: "context" }, outputs: { close: "close", searchPanelMoChange: "searchPanelMoChange", openManageFilters: "openManageFilters", collapsedChange: "collapsedChange", hideSearchPanelClick: "hideSearchPanelClick", filterSave: "filterSave", filterSaveAs: "filterSaveAs", pageChange: "pageChange", showFilterFieldsSetting: "showFilterFieldsSetting", manageFilters: "manageFilters", clearSearch: "clearSearch", search: "search", selectSearchPanelSettings: "selectSearchPanelSettings" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <ng-container *ngIf=\"isReportPage; else reportTemplate\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            reportPageTemplate;\n            context: {\n                $implicit: viewerControl,\n                tabMode: viewerControl.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n            }\n        \"\n    >\n    </ng-container>\n</ng-container> -->\n<ng-container\n    *ngTemplateOutlet=\"\n        isReportPage ? reportPageTemplate : reportTemplate;\n        context: {\n            $implicit: viewerControl,\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n        }\n    \"\n>\n</ng-container>\n<bsu-mask *ngIf=\"loading\" size=\"m\"></bsu-mask>\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\n    <fd-dynamic-page [size]=\"deviceSize | dynamicPageSize\" [attr.tabMode]=\"tabMode\" [autoResponsive]=\"false\">\n        <fd-dynamic-page-header [title]=\"title | bbbTranslate\" class=\"p-b0\">\n            <fd-breadcrumb>\n                <ng-container *ngIf=\"breadCrumbs\">\n                    <ng-container\n                        *ngFor=\"\n                            let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length;\n                            let i = index;\n                            let last = last\n                        \"\n                    >\n                        <fd-breadcrumb-item>\n                            <bsu-breadcrumb\n                                [index]=\"i\"\n                                [isLast]=\"last\"\n                                [breadCrumb]=\"breadCrumb\"\n                                [allBreadCrumb]=\"breadCrumbs\"\n                            ></bsu-breadcrumb>\n                        </fd-breadcrumb-item>\n                    </ng-container>\n                </ng-container>\n            </fd-breadcrumb>\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\n\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: 320px\">\n                <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n                <!-- added this because in mobile landscape toolbar disapper -->\n                <fd-toolbar\n                    *ngIf=\"searchPanelUi\"\n                    class=\"global-actions\"\n                    fdType=\"transparent\"\n                    [clearBorder]=\"true\"\n                    [shouldOverflow]=\"deviceSize === 's'\"\n                >\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\" *ngIf=\"isAnonymous === false\">\n                        <fd-popover-control>\n                            <div style=\"display: flex; align-items: center\">\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\n                                    {{\n                                        selectedSearchPanelSettings?.IsStandard\n                                            ? ''\n                                            : selectedSearchPanelSettings?.Title\n                                    }}\n                                    <strong *ngIf=\"searchPanelMoChanged\">*</strong>\n                                </h3>\n                                <fdp-button\n                                    glyph=\"slim-arrow-down\"\n                                    buttonType=\"transparent\"\n                                    [fdContentDensity]=\"contentDensity\"\n                                ></fdp-button>\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body style=\"min-width: 380px\">\n                            <div fd-popover-body-header>\n                                <div fd-bar [fdCozy]>\n                                    <div fd-bar-left>\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\n                                    </div>\n                                </div>\n                            </div>\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\n                                <li\n                                    fd-list-item\n                                    *ngFor=\"let option of allSearchPanelSettings\"\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\n                                >\n                                    <span fd-list-title>{{ option.Title }}</span>\n                                </li>\n                            </ul>\n                            <div fd-popover-body-footer>\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\n                                    <div fd-bar-right *ngIf=\"selectedSearchPanelSettings\">\n                                        <fd-button-bar\n                                            *ngIf=\"!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged\"\n                                            [label]=\"'Save' | bbbTranslate\"\n                                            fdType=\"emphasized\"\n                                            (click)=\"onFilterSave(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            *ngIf=\"searchPanelMoChanged\"\n                                            [label]=\"'SaveAs' | bbbTranslate\"\n                                            [fdType]=\"\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\n                                            \"\n                                            (click)=\"onFilterSaveAs(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            [label]=\"'Manage' | bbbTranslate\"\n                                            fdInitialFocus\n                                            fdType=\"transparent\"\n                                            (click)=\"onManageFilters(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                    </div>\n                                </div>\n                            </div>\n                        </fd-popover-body>\n                    </fd-popover>\n                    <fd-toolbar-spacer *ngIf=\"deviceSize !== 's'\"></fd-toolbar-spacer>\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        buttonType=\"emphasized\"\n                        [label]=\"'Search' | bbbTranslate\"\n                        (click)=\"onSearch()\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"never\"\n                        [label]=\"'Filters' | bbbTranslate\"\n                        (click)=\"onShowFilterFieldsSetting()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"never\"\n                        [label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClearSearch()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                        (click)=\"onHideSearchPanelClick()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"onClose()\" title=\"Close\">\n                        <i class=\"sap-icon--decline\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\" *ngIf=\"!hideSearchPanel && searchPanelUi\">\n            <ng-container>\n                <bsu-search-panel\n                    [hideButtons]=\"true\"\n                    [searchPanelUi]=\"searchPanelUi\"\n                    (moChanged)=\"onSearchPanelMoChanged()\"\n                ></bsu-search-panel>\n            </ng-container>\n        </fd-dynamic-page-subheader>\n        <fd-dynamic-page-content *ngIf=\"!tabMode\">\n            <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer *ngIf=\"pagingSetting?.TotalPages\">\n            <!-- page footer content goes here -->\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-middle>\n                    <ng-container\n                        [renderUlvPaging]=\"context\"\n                        [pagingSetting]=\"pagingSetting\"\n                        (pageChange)=\"onPageChange($event)\"\n                    ></ng-container>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n    <ng-container *ngIf=\"tabMode\">\n        <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #reportTemplate>\n    <bsu-mask *ngIf=\"loading\" size=\"s\"></bsu-mask>\n    <ng-container *ngIf=\"!hideSearchPanel && searchPanelUi\">\n        <bsu-search-panel [searchPanelUi]=\"searchPanelUi\" (moChanged)=\"onSearchPanelMoChanged()\"></bsu-search-panel>\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    <ng-container\n        *ngIf=\"pagingSetting?.TotalPages\"\n        [renderUlvPaging]=\"context\"\n        [pagingSetting]=\"pagingSetting\"\n        (pageChange)=\"onPageChange($event)\"\n    ></ng-container>\n</ng-template>\n<ng-template #viewerTemplate>\n    <div\n        class=\"viewer-container\"\n        [style.height]=\"viewerLoading ? '100%' : 'auto'\"\n        [style.position]=\"viewerLoading ? 'relative' : null\"\n    >\n        <bsu-mask *ngIf=\"viewerLoading\" size=\"m\"></bsu-mask>\n        <ng-container *ngIf=\"viewerControl\" [renderUlvViewer]=\"viewerControl\"></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;flex-grow:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{margin:0!important}:host ::ng-deep .fd-dynamic-page__collapsible-header{padding-top:0!important;padding-bottom:0!important}:host ::ng-deep .fd-dynamic-page__toolbar-container{flex:1}:host ::ng-deep .fdp-search-field__input-group{outline:none}:host ::ng-deep .fdp-search-field__input-group :-webkit-autofill,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:hover,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:focus,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px white inset!important}:host ::ng-deep .global-actions .fd-toolbar{padding:0}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page .fd-dynamic-page__collapsible-header-visibility-container{box-shadow:none}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}@media (max-width: 599px){.fd-dynamic-page,fd-dynamic-page-content{padding:1rem 0!important}.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RenderUlvViewerDirective, selector: "[renderUlvViewer]", inputs: ["mask", "renderUlvViewer"] }, { kind: "directive", type: i2.RenderUlvPaginDirective, selector: "[renderUlvPaging]", inputs: ["mask", "pagingSetting", "renderUlvPaging"], outputs: ["pageChange"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i3$5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$3.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i5$2.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$2.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$5.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i7$5.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i7$5.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i7$5.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i7$5.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i7$5.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i7$5.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$2.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "directive", type: i7$1.ToolbarOverflowGroupDirective, selector: "[fdOverflowGroup]", inputs: ["fdOverflowGroup"] }, { kind: "component", type: i13.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: SearchPanelComponent, selector: "bsu-search-panel", inputs: ["searchPanelUi", "hideButtons"], outputs: ["moChanged"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DynamicPageSizePipe, name: "dynamicPageSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaUlvMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaUlvMainComponent, selector: "bsu-barsa-ulv-main", inputs: { viewerControl: "viewerControl", loading: "loading", viewerLoading: "viewerLoading", isReportPage: "isReportPage", deviceSize: "deviceSize", title: "title", searchPanelUi: "searchPanelUi", breadCrumbs: "breadCrumbs", allSearchPanelSettings: "allSearchPanelSettings", isAnonymous: "isAnonymous", rtl: "rtl", selectedSearchPanelSettings: "selectedSearchPanelSettings", searchPanelMoChanged: "searchPanelMoChanged", selectedSearchPanelSettingsId: "selectedSearchPanelSettingsId", hideSearchPanel: "hideSearchPanel", pagingSetting: "pagingSetting", contentDensity: "contentDensity", context: "context" }, outputs: { close: "close", searchPanelMoChange: "searchPanelMoChange", openManageFilters: "openManageFilters", collapsedChange: "collapsedChange", hideSearchPanelClick: "hideSearchPanelClick", filterSave: "filterSave", filterSaveAs: "filterSaveAs", pageChange: "pageChange", showFilterFieldsSetting: "showFilterFieldsSetting", manageFilters: "manageFilters", clearSearch: "clearSearch", search: "search", selectSearchPanelSettings: "selectSearchPanelSettings" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <ng-container *ngIf=\"isReportPage; else reportTemplate\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            reportPageTemplate;\n            context: {\n                $implicit: viewerControl,\n                tabMode: viewerControl.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n            }\n        \"\n    >\n    </ng-container>\n</ng-container> -->\n<ng-container\n    *ngTemplateOutlet=\"\n        isReportPage ? reportPageTemplate : reportTemplate;\n        context: {\n            $implicit: viewerControl,\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n        }\n    \"\n>\n</ng-container>\n<bsu-mask *ngIf=\"loading\" size=\"m\"></bsu-mask>\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\n    <fd-dynamic-page [size]=\"deviceSize | dynamicPageSize\" [attr.tabMode]=\"tabMode\" [autoResponsive]=\"false\">\n        <fd-dynamic-page-header [title]=\"title | bbbTranslate\" class=\"p-b0\">\n            <fd-breadcrumb>\n                <ng-container *ngIf=\"breadCrumbs\">\n                    <ng-container\n                        *ngFor=\"\n                            let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length;\n                            let i = index;\n                            let last = last\n                        \"\n                    >\n                        <fd-breadcrumb-item>\n                            <bsu-breadcrumb\n                                [index]=\"i\"\n                                [isLast]=\"last\"\n                                [breadCrumb]=\"breadCrumb\"\n                                [allBreadCrumb]=\"breadCrumbs\"\n                            ></bsu-breadcrumb>\n                        </fd-breadcrumb-item>\n                    </ng-container>\n                </ng-container>\n            </fd-breadcrumb>\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\n\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: 320px\">\n                <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n                <!-- added this because in mobile landscape toolbar disapper -->\n                <fd-toolbar\n                    *ngIf=\"searchPanelUi\"\n                    class=\"global-actions\"\n                    fdType=\"transparent\"\n                    [clearBorder]=\"true\"\n                    [shouldOverflow]=\"deviceSize === 's'\"\n                >\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\" *ngIf=\"isAnonymous === false\">\n                        <fd-popover-control>\n                            <div style=\"display: flex; align-items: center\">\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\n                                    {{\n                                        selectedSearchPanelSettings?.IsStandard\n                                            ? ''\n                                            : selectedSearchPanelSettings?.Title\n                                    }}\n                                    <strong *ngIf=\"searchPanelMoChanged\">*</strong>\n                                </h3>\n                                <fdp-button\n                                    glyph=\"slim-arrow-down\"\n                                    buttonType=\"transparent\"\n                                    [fdContentDensity]=\"contentDensity\"\n                                ></fdp-button>\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body style=\"min-width: 380px\">\n                            <div fd-popover-body-header>\n                                <div fd-bar [fdCozy]>\n                                    <div fd-bar-left>\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\n                                    </div>\n                                </div>\n                            </div>\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\n                                <li\n                                    fd-list-item\n                                    *ngFor=\"let option of allSearchPanelSettings\"\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\n                                >\n                                    <span fd-list-title>{{ option.Title }}</span>\n                                </li>\n                            </ul>\n                            <div fd-popover-body-footer>\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\n                                    <div fd-bar-right *ngIf=\"selectedSearchPanelSettings\">\n                                        <fd-button-bar\n                                            *ngIf=\"!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged\"\n                                            [label]=\"'Save' | bbbTranslate\"\n                                            fdType=\"emphasized\"\n                                            (click)=\"onFilterSave(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            *ngIf=\"searchPanelMoChanged\"\n                                            [label]=\"'SaveAs' | bbbTranslate\"\n                                            [fdType]=\"\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\n                                            \"\n                                            (click)=\"onFilterSaveAs(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            [label]=\"'Manage' | bbbTranslate\"\n                                            fdInitialFocus\n                                            fdType=\"transparent\"\n                                            (click)=\"onManageFilters(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                    </div>\n                                </div>\n                            </div>\n                        </fd-popover-body>\n                    </fd-popover>\n                    <fd-toolbar-spacer *ngIf=\"deviceSize !== 's'\"></fd-toolbar-spacer>\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        buttonType=\"emphasized\"\n                        [label]=\"'Search' | bbbTranslate\"\n                        (click)=\"onSearch()\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"never\"\n                        [label]=\"'Filters' | bbbTranslate\"\n                        (click)=\"onShowFilterFieldsSetting()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"never\"\n                        [label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClearSearch()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                        (click)=\"onHideSearchPanelClick()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"onClose()\" title=\"Close\">\n                        <i class=\"sap-icon--decline\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\" *ngIf=\"!hideSearchPanel && searchPanelUi\">\n            <ng-container>\n                <bsu-search-panel\n                    [hideButtons]=\"true\"\n                    [searchPanelUi]=\"searchPanelUi\"\n                    (moChanged)=\"onSearchPanelMoChanged()\"\n                ></bsu-search-panel>\n            </ng-container>\n        </fd-dynamic-page-subheader>\n        <fd-dynamic-page-content *ngIf=\"!tabMode\">\n            <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer *ngIf=\"pagingSetting?.TotalPages\">\n            <!-- page footer content goes here -->\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-middle>\n                    <ng-container\n                        [renderUlvPaging]=\"context\"\n                        [pagingSetting]=\"pagingSetting\"\n                        (pageChange)=\"onPageChange($event)\"\n                    ></ng-container>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n    <ng-container *ngIf=\"tabMode\">\n        <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #reportTemplate>\n    <bsu-mask *ngIf=\"loading\" size=\"s\"></bsu-mask>\n    <ng-container *ngIf=\"!hideSearchPanel && searchPanelUi\">\n        <bsu-search-panel [searchPanelUi]=\"searchPanelUi\" (moChanged)=\"onSearchPanelMoChanged()\"></bsu-search-panel>\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    <ng-container\n        *ngIf=\"pagingSetting?.TotalPages\"\n        [renderUlvPaging]=\"context\"\n        [pagingSetting]=\"pagingSetting\"\n        (pageChange)=\"onPageChange($event)\"\n    ></ng-container>\n</ng-template>\n<ng-template #viewerTemplate>\n    <div\n        class=\"viewer-container\"\n        [style.height]=\"viewerLoading ? '100%' : 'auto'\"\n        [style.position]=\"viewerLoading ? 'relative' : null\"\n    >\n        <bsu-mask *ngIf=\"viewerLoading\" size=\"m\"></bsu-mask>\n        <ng-container *ngIf=\"viewerControl\" [renderUlvViewer]=\"viewerControl\"></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;flex-grow:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{margin:0!important}:host ::ng-deep .fd-dynamic-page__collapsible-header{padding-top:0!important;padding-bottom:0!important}:host ::ng-deep .fd-dynamic-page__toolbar-container{flex:1}:host ::ng-deep .fdp-search-field__input-group{outline:none}:host ::ng-deep .fdp-search-field__input-group :-webkit-autofill,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:hover,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:focus,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px white inset!important}:host ::ng-deep .global-actions .fd-toolbar{padding:0}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page .fd-dynamic-page__collapsible-header-visibility-container{box-shadow:none}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}@media (max-width: 599px){.fd-dynamic-page,fd-dynamic-page-content{padding:1rem 0!important}.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RenderUlvViewerDirective, selector: "[renderUlvViewer]", inputs: ["mask", "renderUlvViewer"] }, { kind: "directive", type: i2.RenderUlvPaginDirective, selector: "[renderUlvPaging]", inputs: ["mask", "pagingSetting", "renderUlvPaging"], outputs: ["pageChange"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i3$6.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: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$3.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i5$2.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$2.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$5.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i7$5.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i7$5.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i7$5.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i7$5.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i7$5.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i7$5.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$2.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "directive", type: i7$1.ToolbarOverflowGroupDirective, selector: "[fdOverflowGroup]", inputs: ["fdOverflowGroup"] }, { kind: "component", type: i13.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: SearchPanelComponent, selector: "bsu-search-panel", inputs: ["searchPanelUi", "hideButtons"], outputs: ["moChanged"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DynamicPageSizePipe, name: "dynamicPageSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaUlvMainComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-barsa-ulv-main', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <ng-container *ngIf=\"isReportPage; else reportTemplate\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            reportPageTemplate;\n            context: {\n                $implicit: viewerControl,\n                tabMode: viewerControl.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n            }\n        \"\n    >\n    </ng-container>\n</ng-container> -->\n<ng-container\n    *ngTemplateOutlet=\"\n        isReportPage ? reportPageTemplate : reportTemplate;\n        context: {\n            $implicit: viewerControl,\n            tabMode: viewerControl?.Setting?.ClassNames?.CustomUi?.Parameters?.TabMode\n        }\n    \"\n>\n</ng-container>\n<bsu-mask *ngIf=\"loading\" size=\"m\"></bsu-mask>\n<ng-template #reportPageTemplate let-viewerControl let-tabMode=\"tabMode\">\n    <fd-dynamic-page [size]=\"deviceSize | dynamicPageSize\" [attr.tabMode]=\"tabMode\" [autoResponsive]=\"false\">\n        <fd-dynamic-page-header [title]=\"title | bbbTranslate\" class=\"p-b0\">\n            <fd-breadcrumb>\n                <ng-container *ngIf=\"breadCrumbs\">\n                    <ng-container\n                        *ngFor=\"\n                            let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length;\n                            let i = index;\n                            let last = last\n                        \"\n                    >\n                        <fd-breadcrumb-item>\n                            <bsu-breadcrumb\n                                [index]=\"i\"\n                                [isLast]=\"last\"\n                                [breadCrumb]=\"breadCrumb\"\n                                [allBreadCrumb]=\"breadCrumbs\"\n                            ></bsu-breadcrumb>\n                        </fd-breadcrumb-item>\n                    </ng-container>\n                </ng-container>\n            </fd-breadcrumb>\n            <!-- <fd-dynamic-page-title-content>\u06AF\u0632\u0627\u0631\u0634 </fd-dynamic-page-title-content> -->\n\n            <fd-dynamic-page-global-actions *untilInView=\"el\" style=\"min-width: 320px\">\n                <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n                <!-- added this because in mobile landscape toolbar disapper -->\n                <fd-toolbar\n                    *ngIf=\"searchPanelUi\"\n                    class=\"global-actions\"\n                    fdType=\"transparent\"\n                    [clearBorder]=\"true\"\n                    [shouldOverflow]=\"deviceSize === 's'\"\n                >\n                    <fd-popover fd-toolbar-item #popover fdOverflowPriority=\"never\" *ngIf=\"isAnonymous === false\">\n                        <fd-popover-control>\n                            <div style=\"display: flex; align-items: center\">\n                                <h3 class=\"header-search\" [attr.rtl]=\"rtl\" fd-title>\n                                    {{\n                                        selectedSearchPanelSettings?.IsStandard\n                                            ? ''\n                                            : selectedSearchPanelSettings?.Title\n                                    }}\n                                    <strong *ngIf=\"searchPanelMoChanged\">*</strong>\n                                </h3>\n                                <fdp-button\n                                    glyph=\"slim-arrow-down\"\n                                    buttonType=\"transparent\"\n                                    [fdContentDensity]=\"contentDensity\"\n                                ></fdp-button>\n                            </div>\n                        </fd-popover-control>\n                        <fd-popover-body style=\"min-width: 380px\">\n                            <div fd-popover-body-header>\n                                <div fd-bar [fdCozy]>\n                                    <div fd-bar-left>\n                                        <fd-bar-element>{{ 'Filters' | bbbTranslate }}</fd-bar-element>\n                                    </div>\n                                </div>\n                            </div>\n                            <ul fd-list style=\"min-height: 200px; background-color: var(--sapBackgroundColor, #f7f7f7)\">\n                                <li\n                                    fd-list-item\n                                    *ngFor=\"let option of allSearchPanelSettings\"\n                                    [selected]=\"option.Id === selectedSearchPanelSettingsId\"\n                                    (click)=\"onSelectSearchPanelSettings(option.Id, popover)\"\n                                >\n                                    <span fd-list-title>{{ option.Title }}</span>\n                                </li>\n                            </ul>\n                            <div fd-popover-body-footer>\n                                <div fd-bar [barDesign]=\"'footer'\" [fdCozy]>\n                                    <div fd-bar-right *ngIf=\"selectedSearchPanelSettings\">\n                                        <fd-button-bar\n                                            *ngIf=\"!selectedSearchPanelSettings.IsPrimary && searchPanelMoChanged\"\n                                            [label]=\"'Save' | bbbTranslate\"\n                                            fdType=\"emphasized\"\n                                            (click)=\"onFilterSave(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            *ngIf=\"searchPanelMoChanged\"\n                                            [label]=\"'SaveAs' | bbbTranslate\"\n                                            [fdType]=\"\n                                                selectedSearchPanelSettings.IsDefault ? 'emphasized' : 'transparent'\n                                            \"\n                                            (click)=\"onFilterSaveAs(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                        <fd-button-bar\n                                            [label]=\"'Manage' | bbbTranslate\"\n                                            fdInitialFocus\n                                            fdType=\"transparent\"\n                                            (click)=\"onManageFilters(popover)\"\n                                        >\n                                        </fd-button-bar>\n                                    </div>\n                                </div>\n                            </div>\n                        </fd-popover-body>\n                    </fd-popover>\n                    <fd-toolbar-spacer *ngIf=\"deviceSize !== 's'\"></fd-toolbar-spacer>\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        buttonType=\"emphasized\"\n                        [label]=\"'Search' | bbbTranslate\"\n                        (click)=\"onSearch()\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"never\"\n                        [label]=\"'Filters' | bbbTranslate\"\n                        (click)=\"onShowFilterFieldsSetting()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        fdOverflowPriority=\"never\"\n                        [label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClearSearch()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                    <fdp-button\n                        fd-toolbar-item\n                        buttonType=\"transparent\"\n                        [label]=\"hideSearchPanel ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                        (click)=\"onHideSearchPanelClick()\"\n                        [fdOverflowGroup]=\"1\"\n                        [fdContentDensity]=\"contentDensity\"\n                    ></fdp-button>\n                </fd-toolbar>\n            </fd-dynamic-page-global-actions>\n            <fd-dynamic-page-layout-actions>\n                <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\n                    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"onClose()\" title=\"Close\">\n                        <i class=\"sap-icon--decline\"></i>\n                    </button>\n                </fd-toolbar>\n            </fd-dynamic-page-layout-actions>\n        </fd-dynamic-page-header>\n        <fd-dynamic-page-subheader [pinnable]=\"true\" [collapsible]=\"false\" *ngIf=\"!hideSearchPanel && searchPanelUi\">\n            <ng-container>\n                <bsu-search-panel\n                    [hideButtons]=\"true\"\n                    [searchPanelUi]=\"searchPanelUi\"\n                    (moChanged)=\"onSearchPanelMoChanged()\"\n                ></bsu-search-panel>\n            </ng-container>\n        </fd-dynamic-page-subheader>\n        <fd-dynamic-page-content *ngIf=\"!tabMode\">\n            <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n        </fd-dynamic-page-content>\n        <fd-dynamic-page-footer *ngIf=\"pagingSetting?.TotalPages\">\n            <!-- page footer content goes here -->\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-middle>\n                    <ng-container\n                        [renderUlvPaging]=\"context\"\n                        [pagingSetting]=\"pagingSetting\"\n                        (pageChange)=\"onPageChange($event)\"\n                    ></ng-container>\n                </div>\n            </div>\n        </fd-dynamic-page-footer>\n    </fd-dynamic-page>\n    <ng-container *ngIf=\"tabMode\">\n        <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #reportTemplate>\n    <bsu-mask *ngIf=\"loading\" size=\"s\"></bsu-mask>\n    <ng-container *ngIf=\"!hideSearchPanel && searchPanelUi\">\n        <bsu-search-panel [searchPanelUi]=\"searchPanelUi\" (moChanged)=\"onSearchPanelMoChanged()\"></bsu-search-panel>\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"viewerTemplate\"></ng-container>\n    <ng-container\n        *ngIf=\"pagingSetting?.TotalPages\"\n        [renderUlvPaging]=\"context\"\n        [pagingSetting]=\"pagingSetting\"\n        (pageChange)=\"onPageChange($event)\"\n    ></ng-container>\n</ng-template>\n<ng-template #viewerTemplate>\n    <div\n        class=\"viewer-container\"\n        [style.height]=\"viewerLoading ? '100%' : 'auto'\"\n        [style.position]=\"viewerLoading ? 'relative' : null\"\n    >\n        <bsu-mask *ngIf=\"viewerLoading\" size=\"m\"></bsu-mask>\n        <ng-container *ngIf=\"viewerControl\" [renderUlvViewer]=\"viewerControl\"></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;flex-grow:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{margin:0!important}:host ::ng-deep .fd-dynamic-page__collapsible-header{padding-top:0!important;padding-bottom:0!important}:host ::ng-deep .fd-dynamic-page__toolbar-container{flex:1}:host ::ng-deep .fdp-search-field__input-group{outline:none}:host ::ng-deep .fdp-search-field__input-group :-webkit-autofill,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:hover,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:focus,:host ::ng-deep .fdp-search-field__input-group:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px white inset!important}:host ::ng-deep .global-actions .fd-toolbar{padding:0}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep fd-dynamic-page[tabMode=true] .fd-dynamic-page .fd-dynamic-page__collapsible-header-visibility-container{box-shadow:none}fd-dynamic-page-global-actions{flex:1;width:100%}h3[rtl=true]{margin-left:5px}h3[rtl=false]{margin-right:5px}.header-search{color:var(--sapButton_TextColor, #0854a0)!important}.filter-wrapper{border-bottom:1px solid var(--sapObjectHeader_BorderColor, #d9d9d9)}.report-toolbar-container{display:flex}.report-toolbar-container .global-actions{flex-grow:1}@media (max-width: 599px){.fd-dynamic-page,fd-dynamic-page-content{padding:1rem 0!important}.report-toolbar-container{flex-direction:column-reverse}.report-toolbar-container .layout-actions{flex-grow:1}}\n"] }]
@@ -6861,7 +7113,7 @@ class UiPdfViewerComponent extends DeviceInfoFieldBaseComponent {
     }
 }
 UiPdfViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiPdfViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiPdfViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiPdfViewerComponent, selector: "bsu-ui-pdf-viewer", providers: [UploadService], viewQueries: [{ propertyName: "_pdfViewerOnDemand", first: true, predicate: ["pdfViewerOnDemand"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    <fd-toolbar [transparent]=\"true\" [shouldOverflow]=\"true\" *ngIf=\"(disableOrReadonly$ | async) !== true\">\r\n        <fd-file-uploader\r\n            #uploader\r\n            [style.display]=\"'none'\"\r\n            fd-toolbar-item\r\n            [id]=\"id\"\r\n            [name]=\"'pdf_' + id\"\r\n            [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [accept]=\"validExtension\"\r\n            [(ngModel)]=\"files\"\r\n            [multiple]=\"false\"\r\n            (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            [contentDensity]=\"(contentDensity$ | async)!!\"\r\n        ></fd-file-uploader>\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [disabled]=\"!canUpload\"\r\n            (click)=\"uploader.open()\"\r\n        ></button>\r\n        <button\r\n            [disabled]=\"!(canDelete && value)\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            class=\"delete\"\r\n            glyph=\"delete\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDelete()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"canEdit\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"edit\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onEdit()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"canDownload\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"download\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDownload()\"\r\n        ></button>\r\n\r\n        <button\r\n            *ngIf=\"useWordEditor\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'EditInWord' | bbbTranslate\"\r\n            (click)=\"onEditInWord()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"officeOnline\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'OfficeOnline' | bbbTranslate\"\r\n            (click)=\"onOfficeOnline($event)\"\r\n        ></button>\r\n        <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRefresh()\"></button>\r\n\r\n        <fd-busy-indicator\r\n            fd-toolbar-item\r\n            [loading]=\"(uploadingState$ | async)?.uploading === true\"\r\n        ></fd-busy-indicator>\r\n    </fd-toolbar>\r\n    <div\r\n        *ngIf=\"isMobile; else browserPdf\"\r\n        [style.border]=\"!blobUrl ? '.0625rem solid var(--sapGroup_TitleBorderColor)' : null\"\r\n        style=\"height: calc(70vh - 40px); position: relative\"\r\n    >\r\n        <ng2-pdfjs-viewer\r\n            #pdfViewerOnDemand\r\n            [externalWindow]=\"false\"\r\n            [downloadFileName]=\"blobUrl\"\r\n            [openFile]=\"false\"\r\n            [viewBookmark]=\"false\"\r\n            [showSpinner]=\"true\"\r\n            [download]=\"true\"\r\n        ></ng2-pdfjs-viewer>\r\n    </div>\r\n    <ng-template #browserPdf>\r\n        <object\r\n            *ngIf=\"hasPdf; else HatchBackground\"\r\n            style=\"flex-grow: 1\"\r\n            [attr.data]=\"valueUrl\"\r\n            type=\"application/pdf\"\r\n            width=\"100%\"\r\n            [style.height]=\"formHeight - 30 > 0 ? formHeight - 30 + 'px' : '100vh'\"\r\n            [attr.html]=\"fallbackLink\"\r\n        ></object>\r\n    </ng-template>\r\n\r\n    <ng-template #HatchBackground>\r\n        <ng-container *ngIf=\"singleControl && value && !value.IsDeleted; else noFile\">\r\n            <div style=\"display: flex\">\r\n                <img *ngIf=\"singleFileThumbnailUrl\" [src]=\"singleFileThumbnailUrl\" />\r\n                <fd-object-identifier>\r\n                    {{ value.FileName }}\r\n                </fd-object-identifier>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #noFile>\r\n            <div class=\"hatchBackground\"></div>\r\n        </ng-template>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:70vh}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}:host ::ng-deep .fd-file-uploader input{display:none}.single-control{height:50px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: i4$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$5.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$7.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["description", "bold", "medium"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i9$4.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "showSpinner", "downloadFileName", "openFile", "download", "startDownload", "viewBookmark", "print", "startPrint", "fullScreen", "find", "zoom", "nameddest", "pagemode", "lastPage", "rotatecw", "rotateccw", "cursor", "scroll", "spread", "locale", "useOnlyCssZoom", "errorOverride", "errorAppend", "errorMessage", "diagnosticLogs", "externalWindowOptions", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiPdfViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiPdfViewerComponent, selector: "bsu-ui-pdf-viewer", providers: [UploadService], viewQueries: [{ propertyName: "_pdfViewerOnDemand", first: true, predicate: ["pdfViewerOnDemand"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    <fd-toolbar [transparent]=\"true\" [shouldOverflow]=\"true\" *ngIf=\"(disableOrReadonly$ | async) !== true\">\r\n        <fd-file-uploader\r\n            #uploader\r\n            [style.display]=\"'none'\"\r\n            fd-toolbar-item\r\n            [id]=\"id\"\r\n            [name]=\"'pdf_' + id\"\r\n            [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [accept]=\"validExtension\"\r\n            [(ngModel)]=\"files\"\r\n            [multiple]=\"false\"\r\n            (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            [contentDensity]=\"(contentDensity$ | async)!!\"\r\n        ></fd-file-uploader>\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [disabled]=\"!canUpload\"\r\n            (click)=\"uploader.open()\"\r\n        ></button>\r\n        <button\r\n            [disabled]=\"!(canDelete && value)\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            class=\"delete\"\r\n            glyph=\"delete\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDelete()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"canEdit\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"edit\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onEdit()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"canDownload\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"download\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDownload()\"\r\n        ></button>\r\n\r\n        <button\r\n            *ngIf=\"useWordEditor\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'EditInWord' | bbbTranslate\"\r\n            (click)=\"onEditInWord()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"officeOnline\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'OfficeOnline' | bbbTranslate\"\r\n            (click)=\"onOfficeOnline($event)\"\r\n        ></button>\r\n        <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRefresh()\"></button>\r\n\r\n        <fd-busy-indicator\r\n            fd-toolbar-item\r\n            [loading]=\"(uploadingState$ | async)?.uploading === true\"\r\n        ></fd-busy-indicator>\r\n    </fd-toolbar>\r\n    <div\r\n        *ngIf=\"isMobile; else browserPdf\"\r\n        [style.border]=\"!blobUrl ? '.0625rem solid var(--sapGroup_TitleBorderColor)' : null\"\r\n        style=\"height: calc(70vh - 40px); position: relative\"\r\n    >\r\n        <ng2-pdfjs-viewer\r\n            #pdfViewerOnDemand\r\n            [externalWindow]=\"false\"\r\n            [downloadFileName]=\"blobUrl\"\r\n            [openFile]=\"false\"\r\n            [viewBookmark]=\"false\"\r\n            [showSpinner]=\"true\"\r\n            [download]=\"true\"\r\n        ></ng2-pdfjs-viewer>\r\n    </div>\r\n    <ng-template #browserPdf>\r\n        <object\r\n            *ngIf=\"hasPdf; else HatchBackground\"\r\n            style=\"flex-grow: 1\"\r\n            [attr.data]=\"valueUrl\"\r\n            type=\"application/pdf\"\r\n            width=\"100%\"\r\n            [style.height]=\"formHeight - 30 > 0 ? formHeight - 30 + 'px' : '100vh'\"\r\n            [attr.html]=\"fallbackLink\"\r\n        ></object>\r\n    </ng-template>\r\n\r\n    <ng-template #HatchBackground>\r\n        <ng-container *ngIf=\"singleControl && value && !value.IsDeleted; else noFile\">\r\n            <div style=\"display: flex\">\r\n                <img *ngIf=\"singleFileThumbnailUrl\" [src]=\"singleFileThumbnailUrl\" />\r\n                <fd-object-identifier>\r\n                    {{ value.FileName }}\r\n                </fd-object-identifier>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #noFile>\r\n            <div class=\"hatchBackground\"></div>\r\n        </ng-template>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:70vh}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}:host ::ng-deep .fd-file-uploader input{display:none}.single-control{height:50px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: i4$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$5.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$7.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["description", "bold", "medium"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i3$3.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "showSpinner", "downloadFileName", "openFile", "download", "startDownload", "viewBookmark", "print", "startPrint", "fullScreen", "find", "zoom", "nameddest", "pagemode", "lastPage", "rotatecw", "rotateccw", "cursor", "scroll", "spread", "locale", "useOnlyCssZoom", "errorOverride", "errorAppend", "errorMessage", "diagnosticLogs", "externalWindowOptions", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiPdfViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-pdf-viewer', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *untilInView=\"el\">\r\n    <fd-toolbar [transparent]=\"true\" [shouldOverflow]=\"true\" *ngIf=\"(disableOrReadonly$ | async) !== true\">\r\n        <fd-file-uploader\r\n            #uploader\r\n            [style.display]=\"'none'\"\r\n            fd-toolbar-item\r\n            [id]=\"id\"\r\n            [name]=\"'pdf_' + id\"\r\n            [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [accept]=\"validExtension\"\r\n            [(ngModel)]=\"files\"\r\n            [multiple]=\"false\"\r\n            (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            [contentDensity]=\"(contentDensity$ | async)!!\"\r\n        ></fd-file-uploader>\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [disabled]=\"!canUpload\"\r\n            (click)=\"uploader.open()\"\r\n        ></button>\r\n        <button\r\n            [disabled]=\"!(canDelete && value)\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            class=\"delete\"\r\n            glyph=\"delete\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDelete()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"canEdit\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"edit\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onEdit()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"canDownload\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"download\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDownload()\"\r\n        ></button>\r\n\r\n        <button\r\n            *ngIf=\"useWordEditor\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'EditInWord' | bbbTranslate\"\r\n            (click)=\"onEditInWord()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"officeOnline\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'OfficeOnline' | bbbTranslate\"\r\n            (click)=\"onOfficeOnline($event)\"\r\n        ></button>\r\n        <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRefresh()\"></button>\r\n\r\n        <fd-busy-indicator\r\n            fd-toolbar-item\r\n            [loading]=\"(uploadingState$ | async)?.uploading === true\"\r\n        ></fd-busy-indicator>\r\n    </fd-toolbar>\r\n    <div\r\n        *ngIf=\"isMobile; else browserPdf\"\r\n        [style.border]=\"!blobUrl ? '.0625rem solid var(--sapGroup_TitleBorderColor)' : null\"\r\n        style=\"height: calc(70vh - 40px); position: relative\"\r\n    >\r\n        <ng2-pdfjs-viewer\r\n            #pdfViewerOnDemand\r\n            [externalWindow]=\"false\"\r\n            [downloadFileName]=\"blobUrl\"\r\n            [openFile]=\"false\"\r\n            [viewBookmark]=\"false\"\r\n            [showSpinner]=\"true\"\r\n            [download]=\"true\"\r\n        ></ng2-pdfjs-viewer>\r\n    </div>\r\n    <ng-template #browserPdf>\r\n        <object\r\n            *ngIf=\"hasPdf; else HatchBackground\"\r\n            style=\"flex-grow: 1\"\r\n            [attr.data]=\"valueUrl\"\r\n            type=\"application/pdf\"\r\n            width=\"100%\"\r\n            [style.height]=\"formHeight - 30 > 0 ? formHeight - 30 + 'px' : '100vh'\"\r\n            [attr.html]=\"fallbackLink\"\r\n        ></object>\r\n    </ng-template>\r\n\r\n    <ng-template #HatchBackground>\r\n        <ng-container *ngIf=\"singleControl && value && !value.IsDeleted; else noFile\">\r\n            <div style=\"display: flex\">\r\n                <img *ngIf=\"singleFileThumbnailUrl\" [src]=\"singleFileThumbnailUrl\" />\r\n                <fd-object-identifier>\r\n                    {{ value.FileName }}\r\n                </fd-object-identifier>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #noFile>\r\n            <div class=\"hatchBackground\"></div>\r\n        </ng-template>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:70vh}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}:host ::ng-deep .fd-file-uploader input{display:none}.single-control{height:50px}\n"] }]
@@ -6986,7 +7238,7 @@ class UiFileLinearListBoxComponent extends DeviceInfoFieldBaseComponent {
     }
 }
 UiFileLinearListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiFileLinearListBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiFileLinearListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiFileLinearListBoxComponent, selector: "bsu-ui-file-linear-list-box", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "fileUploadComponent", first: true, predicate: FileUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"value\">\r\n    <div class=\"token-container\">\r\n        <div class=\"token-wrapper\">\r\n            <ng-container *ngFor=\"let file of value; trackBy: trackById\">\r\n                <fd-popover *ngIf=\"!file.IsDeleted\">\r\n                    <fd-popover-control>\r\n                        <fd-token (onCloseClick)=\"onFileDeleted(file.Id)\" [readOnly]=\"(disableOrReadonly$ | async)!!\"\r\n                            >{{ file.FileName }}\r\n                            <ng-container *ngIf=\"file.IsNew\">\r\n                                <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                                    <span\r\n                                        *ngIf=\"valueExtra[file.Id].UploadState !== 'Complete'\"\r\n                                        fd-object-status\r\n                                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\r\n                                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\r\n                                        [title]=\"valueExtra[file.Id]?.UploadState\"\r\n                                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\r\n                                    ></span>\r\n                                    <fd-object-number\r\n                                        *ngIf=\"valueExtra[file.Id].Progress\"\r\n                                        [number]=\"valueExtra[file.Id].Progress || 0\"\r\n                                        unit=\"%\"\r\n                                        status=\"informative\"\r\n                                    ></fd-object-number>\r\n                                    <ng-container *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\">\r\n                                        <fd-busy-indicator [loading]=\"true\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </fd-token>\r\n                    </fd-popover-control>\r\n                    <fd-popover-body>\r\n                        <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                            <ul\r\n                                fd-list\r\n                                *ngIf=\"\r\n                                    valueExtra[file.Id].UploadState !== 'Error' ||\r\n                                    valueExtra[file.Id].UploadState === 'Complete'\r\n                                \"\r\n                            >\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link (click)=\"onDownloadFile(file)\">\r\n                                        <i fd-list-icon glyph=\"download\"></i>\r\n                                        <span fd-list-title>\r\n                                            {{ 'Download' | bbbTranslate }}\r\n                                        </span>\r\n                                        <fd-busy-indicator [loading]=\"fileDownloading\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </ng-container>\r\n                    </fd-popover-body>\r\n                </fd-popover>\r\n            </ng-container>\r\n            <div style=\"display: flex\">\r\n                <div style=\"position: relative; width: 3rem\" *ngIf=\"loading\">\r\n                    <bsu-mask [size]=\"'s'\" style=\"background: transparent\"></bsu-mask>\r\n                </div>\r\n                <fd-file-uploader\r\n                    *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\"\r\n                    class=\"file-linear-upload\"\r\n                    fd-toolbar-item\r\n                    [id]=\"id\"\r\n                    [name]=\"'linear_' + id\"\r\n                    [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [accept]=\"validExtension\"\r\n                    [multiple]=\"maxFileCount > 1 || Setting.IsMultiSelect\"\r\n                    (selectedFilesChanged)=\"onFileSelection($event)\"\r\n                    [contentDensity]=\"(contentDensity$ | async)!!\"\r\n                ></fd-file-uploader>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}:host.isMobile ::ng-deep fd-token>span{-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;height:auto;text-align:right}:host.isMobile ::ng-deep body[dir=ltr] fd-token>span{text-align:left}.token-container{background:transparent;padding:3px;display:flex}.token-wrapper{align-items:center;flex-grow:1;display:flex;flex-wrap:wrap}.token-wrapper fd-token,.token-wrapper .file-linear-upload{padding:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i6$5.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i5$4.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i9$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.CanUploadFilePipe, name: "canUploadFile" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: UploadFileStatusPipe, name: "uploadFileStatus" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiFileLinearListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiFileLinearListBoxComponent, selector: "bsu-ui-file-linear-list-box", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "fileUploadComponent", first: true, predicate: FileUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"value\">\r\n    <div class=\"token-container\">\r\n        <div class=\"token-wrapper\">\r\n            <ng-container *ngFor=\"let file of value; trackBy: trackById\">\r\n                <fd-popover *ngIf=\"!file.IsDeleted\">\r\n                    <fd-popover-control>\r\n                        <fd-token (onCloseClick)=\"onFileDeleted(file.Id)\" [readOnly]=\"(disableOrReadonly$ | async)!!\"\r\n                            >{{ file.FileName }}\r\n                            <ng-container *ngIf=\"file.IsNew\">\r\n                                <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                                    <span\r\n                                        *ngIf=\"valueExtra[file.Id].UploadState !== 'Complete'\"\r\n                                        fd-object-status\r\n                                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\r\n                                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\r\n                                        [title]=\"valueExtra[file.Id]?.UploadState\"\r\n                                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\r\n                                    ></span>\r\n                                    <fd-object-number\r\n                                        *ngIf=\"valueExtra[file.Id].Progress\"\r\n                                        [number]=\"valueExtra[file.Id].Progress || 0\"\r\n                                        unit=\"%\"\r\n                                        status=\"informative\"\r\n                                    ></fd-object-number>\r\n                                    <ng-container *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\">\r\n                                        <fd-busy-indicator [loading]=\"true\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </fd-token>\r\n                    </fd-popover-control>\r\n                    <fd-popover-body>\r\n                        <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                            <ul\r\n                                fd-list\r\n                                *ngIf=\"\r\n                                    valueExtra[file.Id].UploadState !== 'Error' ||\r\n                                    valueExtra[file.Id].UploadState === 'Complete'\r\n                                \"\r\n                            >\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link (click)=\"onDownloadFile(file)\">\r\n                                        <i fd-list-icon glyph=\"download\"></i>\r\n                                        <span fd-list-title>\r\n                                            {{ 'Download' | bbbTranslate }}\r\n                                        </span>\r\n                                        <fd-busy-indicator [loading]=\"fileDownloading\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </ng-container>\r\n                    </fd-popover-body>\r\n                </fd-popover>\r\n            </ng-container>\r\n            <div style=\"display: flex\">\r\n                <div style=\"position: relative; width: 3rem\" *ngIf=\"loading\">\r\n                    <bsu-mask [size]=\"'s'\" style=\"background: transparent\"></bsu-mask>\r\n                </div>\r\n                <fd-file-uploader\r\n                    *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\"\r\n                    class=\"file-linear-upload\"\r\n                    fd-toolbar-item\r\n                    [id]=\"id\"\r\n                    [name]=\"'linear_' + id\"\r\n                    [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [accept]=\"validExtension\"\r\n                    [multiple]=\"maxFileCount > 1 || Setting.IsMultiSelect\"\r\n                    (selectedFilesChanged)=\"onFileSelection($event)\"\r\n                    [contentDensity]=\"(contentDensity$ | async)!!\"\r\n                ></fd-file-uploader>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}:host.isMobile ::ng-deep fd-token>span{-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;height:auto;text-align:right}:host.isMobile ::ng-deep body[dir=ltr] fd-token>span{text-align:left}.token-container{background:transparent;padding:3px;display:flex}.token-wrapper{align-items:center;flex-grow:1;display:flex;flex-wrap:wrap}.token-wrapper fd-token,.token-wrapper .file-linear-upload{padding:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i6$5.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i5$4.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i9$2.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.CanUploadFilePipe, name: "canUploadFile" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: UploadFileStatusPipe, name: "uploadFileStatus" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiFileLinearListBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-file-linear-list-box', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"value\">\r\n    <div class=\"token-container\">\r\n        <div class=\"token-wrapper\">\r\n            <ng-container *ngFor=\"let file of value; trackBy: trackById\">\r\n                <fd-popover *ngIf=\"!file.IsDeleted\">\r\n                    <fd-popover-control>\r\n                        <fd-token (onCloseClick)=\"onFileDeleted(file.Id)\" [readOnly]=\"(disableOrReadonly$ | async)!!\"\r\n                            >{{ file.FileName }}\r\n                            <ng-container *ngIf=\"file.IsNew\">\r\n                                <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                                    <span\r\n                                        *ngIf=\"valueExtra[file.Id].UploadState !== 'Complete'\"\r\n                                        fd-object-status\r\n                                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\r\n                                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\r\n                                        [title]=\"valueExtra[file.Id]?.UploadState\"\r\n                                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\r\n                                    ></span>\r\n                                    <fd-object-number\r\n                                        *ngIf=\"valueExtra[file.Id].Progress\"\r\n                                        [number]=\"valueExtra[file.Id].Progress || 0\"\r\n                                        unit=\"%\"\r\n                                        status=\"informative\"\r\n                                    ></fd-object-number>\r\n                                    <ng-container *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\">\r\n                                        <fd-busy-indicator [loading]=\"true\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </fd-token>\r\n                    </fd-popover-control>\r\n                    <fd-popover-body>\r\n                        <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n                            <ul\r\n                                fd-list\r\n                                *ngIf=\"\r\n                                    valueExtra[file.Id].UploadState !== 'Error' ||\r\n                                    valueExtra[file.Id].UploadState === 'Complete'\r\n                                \"\r\n                            >\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link (click)=\"onDownloadFile(file)\">\r\n                                        <i fd-list-icon glyph=\"download\"></i>\r\n                                        <span fd-list-title>\r\n                                            {{ 'Download' | bbbTranslate }}\r\n                                        </span>\r\n                                        <fd-busy-indicator [loading]=\"fileDownloading\" [size]=\"'s'\"></fd-busy-indicator>\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </ng-container>\r\n                    </fd-popover-body>\r\n                </fd-popover>\r\n            </ng-container>\r\n            <div style=\"display: flex\">\r\n                <div style=\"position: relative; width: 3rem\" *ngIf=\"loading\">\r\n                    <bsu-mask [size]=\"'s'\" style=\"background: transparent\"></bsu-mask>\r\n                </div>\r\n                <fd-file-uploader\r\n                    *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\"\r\n                    class=\"file-linear-upload\"\r\n                    fd-toolbar-item\r\n                    [id]=\"id\"\r\n                    [name]=\"'linear_' + id\"\r\n                    [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n                    [accept]=\"validExtension\"\r\n                    [multiple]=\"maxFileCount > 1 || Setting.IsMultiSelect\"\r\n                    (selectedFilesChanged)=\"onFileSelection($event)\"\r\n                    [contentDensity]=\"(contentDensity$ | async)!!\"\r\n                ></fd-file-uploader>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}:host.isMobile ::ng-deep fd-token>span{-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;height:auto;text-align:right}:host.isMobile ::ng-deep body[dir=ltr] fd-token>span{text-align:left}.token-container{background:transparent;padding:3px;display:flex}.token-wrapper{align-items:center;flex-grow:1;display:flex;flex-wrap:wrap}.token-wrapper fd-token,.token-wrapper .file-linear-upload{padding:4px}\n"] }]
@@ -7003,7 +7255,7 @@ class BarsaListFileLinearComponent extends UiFileLinearListBoxComponent {
     }
 }
 BarsaListFileLinearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaListFileLinearComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BarsaListFileLinearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaListFileLinearComponent, selector: "bsu-barsa-list-file-linear", providers: [UploadService], usesInheritance: true, ngImport: i0, template: "<fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"true\" *ngIf=\"(disableOrReadonly$ | async) === false\">\r\n    <fd-file-uploader\r\n        fd-toolbar-item\r\n        [id]=\"id\"\r\n        [name]=\"id\"\r\n        [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n        [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n        [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n        [accept]=\"Setting.ValidExtensions || ''\"\r\n        [multiple]=\"maxFileCount > 1\"\r\n        (selectedFilesChanged)=\"onFileSelection($event)\"\r\n        [contentDensity]=\"(contentDensity$ | async)!!\"\r\n    ></fd-file-uploader>\r\n</fd-toolbar>\r\n<ul fd-list [byline]=\"true\">\r\n    <ng-container *ngIf=\"fileCount$ | async as fileCount\">\r\n        <li fd-list-item *ngIf=\"fileCount === 0\">\r\n            <div fd-list-content style=\"text-align: center\">\r\n                <span>{{ 'NoFiles' | bbbTranslate }}</span>\r\n            </div>\r\n        </li>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let file of value\">\r\n        <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n            <li fd-list-item *ngIf=\"!file.IsDeleted\">\r\n                <span fd-list-thumbnail>\r\n                    <fd-icon\r\n                        *ngIf=\"valueExtra[file.Id].IsIcon; else isImage\"\r\n                        [glyph]=\"valueExtra[file.Id].FileUrl\"\r\n                    ></fd-icon>\r\n                    <ng-template #isImage>\r\n                        <fd-avatar size=\"m\" [image]=\"valueExtra[file.Id].FileUrl || ''\"></fd-avatar>\r\n                    </ng-template>\r\n                </span>\r\n                <!-- for byline, fd-list-content is mandatory -->\r\n                <div fd-list-content>\r\n                    <div fd-list-title>{{ file.FileName }}</div>\r\n                    <div fd-list-byline [twoCol]=\"true\">\r\n                        <div fd-list-byline-left></div>\r\n                        <div fd-list-byline-right style=\"display: flex; justify-content: flex-end\">\r\n                            <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                                <ng-container *ngIf=\"file.IsNew\">\r\n                                    <span\r\n                                        fd-toolbar-item\r\n                                        fd-object-status\r\n                                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\r\n                                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\r\n                                        [title]=\"valueExtra[file.Id]?.UploadState\"\r\n                                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\r\n                                    ></span>\r\n                                    <ng-container *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\">\r\n                                        <fdp-slider\r\n                                            fd-toolbar-item\r\n                                            [id]=\"id\"\r\n                                            [name]=\"'filerLinear_' + id\"\r\n                                            [value]=\"valueExtra[file.Id]?.Progress\"\r\n                                            [min]=\"0\"\r\n                                            [max]=\"100\"\r\n                                            [step]=\"1\"\r\n                                            [contentDensity]=\"(contentDensity$ | async)!!\"\r\n                                        >\r\n                                        </fdp-slider>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </fd-toolbar>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <button\r\n                    *ngIf=\"(disableOrReadonly$ | async) === false && valueExtra[file.Id].UploadState !== 'Uploading'\"\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    glyph=\"decline\"\r\n                    (click)=\"onFileDeleted(file.Id)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\"\r\n                    fd-button\r\n                    [fdType]=\"'transparent'\"\r\n                    [glyph]=\"'stop'\"\r\n                    (click)=\"onTerminate(file)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"valueExtra[file.Id].UploadState === 'Error'\"\r\n                    fd-button\r\n                    [fdType]=\"'transparent'\"\r\n                    [glyph]=\"'refresh'\"\r\n                    (click)=\"onRetry(file)\"\r\n                ></button>\r\n            </li>\r\n        </ng-container>\r\n    </ng-container>\r\n</ul>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$5.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: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i6$1.ListBylineLeftDirective, selector: "[fdListBylineLeft], [fd-list-byline-left]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListBylineRightDirective, selector: "[fdListBylineRight], [fd-list-byline-right]", inputs: ["status", "wrap"] }, { kind: "directive", type: i6$1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i6$1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i8.PlatformContentDensityDeprecationDirective, selector: "        fdp-action-bar[contentDensity],        fdp-button[contentDensity],        fdp-object-list-item[contentDensity],        fdp-standard-list-item[contentDensity],        fdp-menu[contentDensity],        fdp-menu-button[contentDensity],        fdp-panel[contentDensity],        fdp-search-field[contentDensity],        fdp-split-menu-button[contentDensity],        fdp-file-uploader[contentDensity],        fdp-upload-collection[contentDensity],        fdp-table[contentDensity],        fdp-multi-input[contentDensity],        fdp-list[contentDensity],        fdp-slider[contentDensity],        fdp-time-picker[contentDensity],        fdp-textarea[contentDensity],        fdp-switch[contentDensity],        fdp-number-step-input[contentDensity],        fdp-select[contentDensity],        fdp-date-picker[contentDensity],        fdp-checkbox[contentDensity],        fdp-checkbox-group[contentDensity],        fdp-combobox[contentDensity],        fdp-datetime-picker[contentDensity],        fdp-input[contentDensity],        fdp-radio-group[contentDensity],        fdp-radio-button[contentDensity],        fdp-multi-combobox[contentDensity],        fdp-input-group-addon-body[contentDensity],        fdp-input-group[contentDensity],        fdp-value-help-dialog[contentDensity],        fdp-filter-single-select[contentDensity],        fdp-filter-multi-select[contentDensity],        fdp-filter-custom[contentDensity]    " }, { kind: "component", type: i10$1.SliderComponent, selector: "fdp-slider", inputs: ["class", "min", "max", "step", "jump", "tickmarksBetweenLabels", "mode", "showTicks", "showTicksLabels", "customValues", "tooltipMode", "hideProgressBar", "value"], outputs: ["sliderChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: UploadFileStatusPipe, name: "uploadFileStatus" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaListFileLinearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaListFileLinearComponent, selector: "bsu-barsa-list-file-linear", providers: [UploadService], usesInheritance: true, ngImport: i0, template: "<fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"true\" *ngIf=\"(disableOrReadonly$ | async) === false\">\r\n    <fd-file-uploader\r\n        fd-toolbar-item\r\n        [id]=\"id\"\r\n        [name]=\"id\"\r\n        [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n        [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n        [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n        [accept]=\"Setting.ValidExtensions || ''\"\r\n        [multiple]=\"maxFileCount > 1\"\r\n        (selectedFilesChanged)=\"onFileSelection($event)\"\r\n        [contentDensity]=\"(contentDensity$ | async)!!\"\r\n    ></fd-file-uploader>\r\n</fd-toolbar>\r\n<ul fd-list [byline]=\"true\">\r\n    <ng-container *ngIf=\"fileCount$ | async as fileCount\">\r\n        <li fd-list-item *ngIf=\"fileCount === 0\">\r\n            <div fd-list-content style=\"text-align: center\">\r\n                <span>{{ 'NoFiles' | bbbTranslate }}</span>\r\n            </div>\r\n        </li>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let file of value\">\r\n        <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n            <li fd-list-item *ngIf=\"!file.IsDeleted\">\r\n                <span fd-list-thumbnail>\r\n                    <fd-icon\r\n                        *ngIf=\"valueExtra[file.Id].IsIcon; else isImage\"\r\n                        [glyph]=\"valueExtra[file.Id].FileUrl\"\r\n                    ></fd-icon>\r\n                    <ng-template #isImage>\r\n                        <fd-avatar size=\"m\" [image]=\"valueExtra[file.Id].FileUrl || ''\"></fd-avatar>\r\n                    </ng-template>\r\n                </span>\r\n                <!-- for byline, fd-list-content is mandatory -->\r\n                <div fd-list-content>\r\n                    <div fd-list-title>{{ file.FileName }}</div>\r\n                    <div fd-list-byline [twoCol]=\"true\">\r\n                        <div fd-list-byline-left></div>\r\n                        <div fd-list-byline-right style=\"display: flex; justify-content: flex-end\">\r\n                            <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                                <ng-container *ngIf=\"file.IsNew\">\r\n                                    <span\r\n                                        fd-toolbar-item\r\n                                        fd-object-status\r\n                                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\r\n                                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\r\n                                        [title]=\"valueExtra[file.Id]?.UploadState\"\r\n                                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\r\n                                    ></span>\r\n                                    <ng-container *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\">\r\n                                        <fdp-slider\r\n                                            fd-toolbar-item\r\n                                            [id]=\"id\"\r\n                                            [name]=\"'filerLinear_' + id\"\r\n                                            [value]=\"valueExtra[file.Id]?.Progress\"\r\n                                            [min]=\"0\"\r\n                                            [max]=\"100\"\r\n                                            [step]=\"1\"\r\n                                            [contentDensity]=\"(contentDensity$ | async)!!\"\r\n                                        >\r\n                                        </fdp-slider>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </fd-toolbar>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <button\r\n                    *ngIf=\"(disableOrReadonly$ | async) === false && valueExtra[file.Id].UploadState !== 'Uploading'\"\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    glyph=\"decline\"\r\n                    (click)=\"onFileDeleted(file.Id)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\"\r\n                    fd-button\r\n                    [fdType]=\"'transparent'\"\r\n                    [glyph]=\"'stop'\"\r\n                    (click)=\"onTerminate(file)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"valueExtra[file.Id].UploadState === 'Error'\"\r\n                    fd-button\r\n                    [fdType]=\"'transparent'\"\r\n                    [glyph]=\"'refresh'\"\r\n                    (click)=\"onRetry(file)\"\r\n                ></button>\r\n            </li>\r\n        </ng-container>\r\n    </ng-container>\r\n</ul>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$5.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: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i6$1.ListBylineLeftDirective, selector: "[fdListBylineLeft], [fd-list-byline-left]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListBylineRightDirective, selector: "[fdListBylineRight], [fd-list-byline-right]", inputs: ["status", "wrap"] }, { kind: "directive", type: i6$1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i6$1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i8.PlatformContentDensityDeprecationDirective, selector: "        fdp-action-bar[contentDensity],        fdp-button[contentDensity],        fdp-object-list-item[contentDensity],        fdp-standard-list-item[contentDensity],        fdp-menu[contentDensity],        fdp-menu-button[contentDensity],        fdp-panel[contentDensity],        fdp-search-field[contentDensity],        fdp-split-menu-button[contentDensity],        fdp-file-uploader[contentDensity],        fdp-upload-collection[contentDensity],        fdp-table[contentDensity],        fdp-multi-input[contentDensity],        fdp-list[contentDensity],        fdp-slider[contentDensity],        fdp-time-picker[contentDensity],        fdp-textarea[contentDensity],        fdp-switch[contentDensity],        fdp-number-step-input[contentDensity],        fdp-select[contentDensity],        fdp-date-picker[contentDensity],        fdp-checkbox[contentDensity],        fdp-checkbox-group[contentDensity],        fdp-combobox[contentDensity],        fdp-datetime-picker[contentDensity],        fdp-input[contentDensity],        fdp-radio-group[contentDensity],        fdp-radio-button[contentDensity],        fdp-multi-combobox[contentDensity],        fdp-input-group-addon-body[contentDensity],        fdp-input-group[contentDensity],        fdp-value-help-dialog[contentDensity],        fdp-filter-single-select[contentDensity],        fdp-filter-multi-select[contentDensity],        fdp-filter-custom[contentDensity]    " }, { kind: "component", type: i10$1.SliderComponent, selector: "fdp-slider", inputs: ["class", "min", "max", "step", "jump", "tickmarksBetweenLabels", "mode", "showTicks", "showTicksLabels", "customValues", "tooltipMode", "hideProgressBar", "value"], outputs: ["sliderChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: UploadFileStatusPipe, name: "uploadFileStatus" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaListFileLinearComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-barsa-list-file-linear', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UploadService], template: "<fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"true\" *ngIf=\"(disableOrReadonly$ | async) === false\">\r\n    <fd-file-uploader\r\n        fd-toolbar-item\r\n        [id]=\"id\"\r\n        [name]=\"id\"\r\n        [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n        [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n        [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n        [accept]=\"Setting.ValidExtensions || ''\"\r\n        [multiple]=\"maxFileCount > 1\"\r\n        (selectedFilesChanged)=\"onFileSelection($event)\"\r\n        [contentDensity]=\"(contentDensity$ | async)!!\"\r\n    ></fd-file-uploader>\r\n</fd-toolbar>\r\n<ul fd-list [byline]=\"true\">\r\n    <ng-container *ngIf=\"fileCount$ | async as fileCount\">\r\n        <li fd-list-item *ngIf=\"fileCount === 0\">\r\n            <div fd-list-content style=\"text-align: center\">\r\n                <span>{{ 'NoFiles' | bbbTranslate }}</span>\r\n            </div>\r\n        </li>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let file of value\">\r\n        <ng-container *ngIf=\"valueExtra$ | async as valueExtra\">\r\n            <li fd-list-item *ngIf=\"!file.IsDeleted\">\r\n                <span fd-list-thumbnail>\r\n                    <fd-icon\r\n                        *ngIf=\"valueExtra[file.Id].IsIcon; else isImage\"\r\n                        [glyph]=\"valueExtra[file.Id].FileUrl\"\r\n                    ></fd-icon>\r\n                    <ng-template #isImage>\r\n                        <fd-avatar size=\"m\" [image]=\"valueExtra[file.Id].FileUrl || ''\"></fd-avatar>\r\n                    </ng-template>\r\n                </span>\r\n                <!-- for byline, fd-list-content is mandatory -->\r\n                <div fd-list-content>\r\n                    <div fd-list-title>{{ file.FileName }}</div>\r\n                    <div fd-list-byline [twoCol]=\"true\">\r\n                        <div fd-list-byline-left></div>\r\n                        <div fd-list-byline-right style=\"display: flex; justify-content: flex-end\">\r\n                            <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"true\">\r\n                                <ng-container *ngIf=\"file.IsNew\">\r\n                                    <span\r\n                                        fd-toolbar-item\r\n                                        fd-object-status\r\n                                        [status]=\"file.Id | uploadFileStatus: valueExtra\"\r\n                                        [label]=\"valueExtra[file.Id]?.UploadState || ''\"\r\n                                        [title]=\"valueExtra[file.Id]?.UploadState\"\r\n                                        [aria-label]=\"'File Upload Status Is ' + valueExtra[file.Id]?.UploadState\"\r\n                                    ></span>\r\n                                    <ng-container *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\">\r\n                                        <fdp-slider\r\n                                            fd-toolbar-item\r\n                                            [id]=\"id\"\r\n                                            [name]=\"'filerLinear_' + id\"\r\n                                            [value]=\"valueExtra[file.Id]?.Progress\"\r\n                                            [min]=\"0\"\r\n                                            [max]=\"100\"\r\n                                            [step]=\"1\"\r\n                                            [contentDensity]=\"(contentDensity$ | async)!!\"\r\n                                        >\r\n                                        </fdp-slider>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </fd-toolbar>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <button\r\n                    *ngIf=\"(disableOrReadonly$ | async) === false && valueExtra[file.Id].UploadState !== 'Uploading'\"\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    glyph=\"decline\"\r\n                    (click)=\"onFileDeleted(file.Id)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"valueExtra[file.Id].UploadState === 'Uploading'\"\r\n                    fd-button\r\n                    [fdType]=\"'transparent'\"\r\n                    [glyph]=\"'stop'\"\r\n                    (click)=\"onTerminate(file)\"\r\n                ></button>\r\n                <button\r\n                    *ngIf=\"valueExtra[file.Id].UploadState === 'Error'\"\r\n                    fd-button\r\n                    [fdType]=\"'transparent'\"\r\n                    [glyph]=\"'refresh'\"\r\n                    (click)=\"onRetry(file)\"\r\n                ></button>\r\n            </li>\r\n        </ng-container>\r\n    </ng-container>\r\n</ul>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .fd-file-uploader input{display:none}\n"] }]
@@ -7203,7 +7455,7 @@ class UlvFormMultiSelectComponent extends BaseComponent {
     }
 }
 UlvFormMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvFormMultiSelectComponent, deps: [{ token: i1$1.DialogService }, { token: i2.BbbTranslatePipe }, { token: i2.PortalService }, { token: i1$1.ContentDensityService }], target: i0.ɵɵFactoryTarget.Component });
-UlvFormMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvFormMultiSelectComponent, selector: "bsu-ulv-form-multi-select", inputs: { Show: "Show" }, viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"fullscreen\"\n                        [glyph]=\"dialog.data.fullscreen ? 'exitfullscreen' : 'resize'\"\n                        fullscreenDialog\n                        [dialog]=\"dialog\"\n                        [dialogComponent]=\"dialogTpl\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onCancel(dialog)\"></fd-button-bar>\n                </div>\n            </ng-template>\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\n      <button fd-dialog-close-button></button> -->\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngIf=\"dialog.data.ulv1 as ulv1\">\n                <bsu-ui-ulv-main-ui\n                    class=\"ulv-form-multi-select\"\n                    [context]=\"ulv1\"\n                    [inDialog]=\"true\"\n                    [isMultiSelect]=\"dialog.data.ShowSecondPanel\"\n                    [fullscreen]=\"dialog.data.fullscreen\"\n                ></bsu-ui-ulv-main-ui>\n            </ng-container>\n            <div\n                *ngIf=\"dialog.data.ulv2 && dialog.data.ShowSecondPanel\"\n                class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\n                [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\n            >\n                <h5 fd-title class=\"selected-and-condition-title\">\n                    <ng-container>\n                        <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\n                        ({{ dialog.data.selectedItems?.MoDataList?.length || 0 }})\n                    </ng-container>\n                </h5>\n\n                <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\n                    <div class=\"ulv-selection-form-dialog__tokens\">\n                        <fd-toolbar [shouldOverflow]=\"true\" *ngIf=\"dialog.data.selectedItems\">\n                            <!-- Selected items -->\n                            <fd-token\n                                fd-toolbar-item\n                                fdOverflowPriority=\"high\"\n                                class=\"fdp-value-help-dialog__selection-token\"\n                                (onCloseClick)=\"onRemoveSelected(dialog, item)\"\n                                *ngFor=\"\n                                    let item of dialog.data.selectedItems.MoDataList;\n                                    index as selectedIndex;\n                                    trackBy: _trackBySelectedFn\n                                \"\n                                >{{ item.$Caption }}\n                            </fd-token>\n                        </fd-toolbar>\n                    </div>\n                    <button\n                        class=\"ulv-selection-form-dialog__tokens-clear\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"decline\"\n                        [aria-label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClear(dialog)\"\n                    ></button>\n                </div>\n            </div>\n        </fd-dialog-body>\n\n        <fd-dialog-footer *ngIf=\"dialog.data.ulv1 && !dialog.data.ulv1?.HideOkCancelButtons\">\n            <ng-template fdTemplate=\"footer\">\n                <div\n                    class=\"ulv-selection-form-dialog__actions-row\"\n                    *ngIf=\"dialog.data.adapter?.ShowOkCancelButtons !== false\"\n                >\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'OK' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        [compact]=\"true\"\n                        (click)=\"onOk(dialog)\"\n                    ></button>\n                    <fdp-button\n                        [contentDensity]=\"'compact'\"\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        [buttonType]=\"'transparent'\"\n                        (click)=\"onCancel(dialog)\"\n                    ></fdp-button>\n                </div>\n            </ng-template>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".ulv-selection-form-dialog{cursor:default}.ulv-selection-form-dialog .fd-dialog__body bsu-ui-table-view{overflow-x:inherit!important}.ulv-selection-form-dialog__advanced-filters{padding-top:1rem}.ulv-selection-form-dialog__advanced-filters label{height:auto}.ulv-selection-form-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.ulv-selection-form-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.ulv-selection-form-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.ulv-selection-form-dialog-mobile .ulv-selection-form-dialog__advanced-actions{justify-content:flex-start}.ulv-selection-form-dialog__advanced-actions .fd-toolbar{padding:0}.ulv-selection-form-dialog fd-dialog-body{height:100%;display:flex;flex-direction:column;overflow-y:hidden}.ulv-selection-form-dialog bsu-ui-ulv-main-ui{height:100%;flex-grow:1}.ulv-selection-form-dialog bsu-ui-ulv-main-ui .viewer-container{height:100%!important;overflow:auto}.ulv-selection-form-dialog .ulv-selection-form-dialog__row{border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9);padding-top:1rem}.ulv-selection-form-dialog bsu-search-panel{border-bottom:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog fd-dialog-footer{height:auto}.ulv-selection-form-dialog .fd-dialog__footer{flex-direction:column}.ulv-selection-form-dialog .fd-dialog__footer.fd-bar{padding:0!important}.ulv-selection-form-dialog .fd-dialog__footer{border-top:none}.ulv-selection-form-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.ulv-selection-form-dialog__row{padding:0 2rem 1rem}.ulv-selection-form-dialog__row.ulv-selection-form-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.ulv-selection-form-dialog__tokens-wrapper{display:flex}.ulv-selection-form-dialog__tokens{display:flex;flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.ulv-selection-form-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.ulv-selection-form-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.ulv-selection-form-dialog__actions-row{padding:.5rem 0;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog__actions-row .fd-button{margin-left:.5rem}.ulv-selection-form-dialog__tokens-wrapper{align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i3$1.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "component", type: i9$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "directive", type: i8.PlatformContentDensityDeprecationDirective, selector: "        fdp-action-bar[contentDensity],        fdp-button[contentDensity],        fdp-object-list-item[contentDensity],        fdp-standard-list-item[contentDensity],        fdp-menu[contentDensity],        fdp-menu-button[contentDensity],        fdp-panel[contentDensity],        fdp-search-field[contentDensity],        fdp-split-menu-button[contentDensity],        fdp-file-uploader[contentDensity],        fdp-upload-collection[contentDensity],        fdp-table[contentDensity],        fdp-multi-input[contentDensity],        fdp-list[contentDensity],        fdp-slider[contentDensity],        fdp-time-picker[contentDensity],        fdp-textarea[contentDensity],        fdp-switch[contentDensity],        fdp-number-step-input[contentDensity],        fdp-select[contentDensity],        fdp-date-picker[contentDensity],        fdp-checkbox[contentDensity],        fdp-checkbox-group[contentDensity],        fdp-combobox[contentDensity],        fdp-datetime-picker[contentDensity],        fdp-input[contentDensity],        fdp-radio-group[contentDensity],        fdp-radio-button[contentDensity],        fdp-multi-combobox[contentDensity],        fdp-input-group-addon-body[contentDensity],        fdp-input-group[contentDensity],        fdp-value-help-dialog[contentDensity],        fdp-filter-single-select[contentDensity],        fdp-filter-multi-select[contentDensity],        fdp-filter-custom[contentDensity]    " }, { kind: "component", type: i13.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: UiUlvMainUiComponent, selector: "bsu-ui-ulv-main-ui", inputs: ["context", "isReportPage", "inDialog", "isMultiSelect", "layoutInfo", "fullscreen"] }, { kind: "directive", type: FullscreenDialogDirective, selector: "[fullscreenDialog]", inputs: ["dialog", "dialogComponent"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+UlvFormMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvFormMultiSelectComponent, selector: "bsu-ulv-form-multi-select", inputs: { Show: "Show" }, viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"fullscreen\"\n                        [glyph]=\"dialog.data.fullscreen ? 'exitfullscreen' : 'resize'\"\n                        fullscreenDialog\n                        [dialog]=\"dialog\"\n                        [dialogComponent]=\"dialogTpl\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onCancel(dialog)\"></fd-button-bar>\n                </div>\n            </ng-template>\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\n      <button fd-dialog-close-button></button> -->\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngIf=\"dialog.data.ulv1 as ulv1\">\n                <bsu-ui-ulv-main-ui\n                    class=\"ulv-form-multi-select\"\n                    [context]=\"ulv1\"\n                    [inDialog]=\"true\"\n                    [isMultiSelect]=\"dialog.data.ShowSecondPanel\"\n                    [fullscreen]=\"dialog.data.fullscreen\"\n                ></bsu-ui-ulv-main-ui>\n            </ng-container>\n            <div\n                *ngIf=\"dialog.data.ulv2 && dialog.data.ShowSecondPanel\"\n                class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\n                [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\n            >\n                <h5 fd-title class=\"selected-and-condition-title\">\n                    <ng-container>\n                        <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\n                        ({{ dialog.data.selectedItems?.MoDataList?.length || 0 }})\n                    </ng-container>\n                </h5>\n\n                <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\n                    <div class=\"ulv-selection-form-dialog__tokens\">\n                        <fd-toolbar [shouldOverflow]=\"true\" *ngIf=\"dialog.data.selectedItems\">\n                            <!-- Selected items -->\n                            <fd-token\n                                fd-toolbar-item\n                                fdOverflowPriority=\"high\"\n                                class=\"fdp-value-help-dialog__selection-token\"\n                                (onCloseClick)=\"onRemoveSelected(dialog, item)\"\n                                *ngFor=\"\n                                    let item of dialog.data.selectedItems.MoDataList;\n                                    index as selectedIndex;\n                                    trackBy: _trackBySelectedFn\n                                \"\n                                >{{ item.$Caption }}\n                            </fd-token>\n                        </fd-toolbar>\n                    </div>\n                    <button\n                        class=\"ulv-selection-form-dialog__tokens-clear\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"decline\"\n                        [aria-label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClear(dialog)\"\n                    ></button>\n                </div>\n            </div>\n        </fd-dialog-body>\n\n        <fd-dialog-footer *ngIf=\"dialog.data.ulv1 && !dialog.data.ulv1?.HideOkCancelButtons\">\n            <ng-template fdTemplate=\"footer\">\n                <div\n                    class=\"ulv-selection-form-dialog__actions-row\"\n                    *ngIf=\"dialog.data.adapter?.ShowOkCancelButtons !== false\"\n                >\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'OK' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        [compact]=\"true\"\n                        (click)=\"onOk(dialog)\"\n                    ></button>\n                    <fdp-button\n                        [contentDensity]=\"'compact'\"\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        [buttonType]=\"'transparent'\"\n                        (click)=\"onCancel(dialog)\"\n                    ></fdp-button>\n                </div>\n            </ng-template>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".ulv-selection-form-dialog{cursor:default}.ulv-selection-form-dialog .fd-dialog__body bsu-ui-table-view{overflow-x:inherit!important}.ulv-selection-form-dialog__advanced-filters{padding-top:1rem}.ulv-selection-form-dialog__advanced-filters label{height:auto}.ulv-selection-form-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.ulv-selection-form-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.ulv-selection-form-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.ulv-selection-form-dialog-mobile .ulv-selection-form-dialog__advanced-actions{justify-content:flex-start}.ulv-selection-form-dialog__advanced-actions .fd-toolbar{padding:0}.ulv-selection-form-dialog fd-dialog-body{height:100%;display:flex;flex-direction:column;overflow-y:hidden}.ulv-selection-form-dialog bsu-ui-ulv-main-ui{height:100%;flex-grow:1}.ulv-selection-form-dialog bsu-ui-ulv-main-ui .viewer-container{height:100%!important;overflow:auto}.ulv-selection-form-dialog .ulv-selection-form-dialog__row{border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9);padding-top:1rem}.ulv-selection-form-dialog bsu-search-panel{border-bottom:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog fd-dialog-footer{height:auto}.ulv-selection-form-dialog .fd-dialog__footer{flex-direction:column}.ulv-selection-form-dialog .fd-dialog__footer.fd-bar{padding:0!important}.ulv-selection-form-dialog .fd-dialog__footer{border-top:none}.ulv-selection-form-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.ulv-selection-form-dialog__row{padding:0 2rem 1rem}.ulv-selection-form-dialog__row.ulv-selection-form-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.ulv-selection-form-dialog__tokens-wrapper{display:flex}.ulv-selection-form-dialog__tokens{display:flex;flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.ulv-selection-form-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.ulv-selection-form-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.ulv-selection-form-dialog__actions-row{padding:.5rem 0;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog__actions-row .fd-button{margin-left:.5rem}.ulv-selection-form-dialog__tokens-wrapper{align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i3$1.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "component", type: i9$2.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "directive", type: i8.PlatformContentDensityDeprecationDirective, selector: "        fdp-action-bar[contentDensity],        fdp-button[contentDensity],        fdp-object-list-item[contentDensity],        fdp-standard-list-item[contentDensity],        fdp-menu[contentDensity],        fdp-menu-button[contentDensity],        fdp-panel[contentDensity],        fdp-search-field[contentDensity],        fdp-split-menu-button[contentDensity],        fdp-file-uploader[contentDensity],        fdp-upload-collection[contentDensity],        fdp-table[contentDensity],        fdp-multi-input[contentDensity],        fdp-list[contentDensity],        fdp-slider[contentDensity],        fdp-time-picker[contentDensity],        fdp-textarea[contentDensity],        fdp-switch[contentDensity],        fdp-number-step-input[contentDensity],        fdp-select[contentDensity],        fdp-date-picker[contentDensity],        fdp-checkbox[contentDensity],        fdp-checkbox-group[contentDensity],        fdp-combobox[contentDensity],        fdp-datetime-picker[contentDensity],        fdp-input[contentDensity],        fdp-radio-group[contentDensity],        fdp-radio-button[contentDensity],        fdp-multi-combobox[contentDensity],        fdp-input-group-addon-body[contentDensity],        fdp-input-group[contentDensity],        fdp-value-help-dialog[contentDensity],        fdp-filter-single-select[contentDensity],        fdp-filter-multi-select[contentDensity],        fdp-filter-custom[contentDensity]    " }, { kind: "component", type: i13.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: UiUlvMainUiComponent, selector: "bsu-ui-ulv-main-ui", inputs: ["context", "isReportPage", "inDialog", "isMultiSelect", "layoutInfo", "fullscreen"] }, { kind: "directive", type: FullscreenDialogDirective, selector: "[fullscreenDialog]", inputs: ["dialog", "dialogComponent"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvFormMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ulv-form-multi-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"fullscreen\"\n                        [glyph]=\"dialog.data.fullscreen ? 'exitfullscreen' : 'resize'\"\n                        fullscreenDialog\n                        [dialog]=\"dialog\"\n                        [dialogComponent]=\"dialogTpl\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onCancel(dialog)\"></fd-button-bar>\n                </div>\n            </ng-template>\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\n      <button fd-dialog-close-button></button> -->\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngIf=\"dialog.data.ulv1 as ulv1\">\n                <bsu-ui-ulv-main-ui\n                    class=\"ulv-form-multi-select\"\n                    [context]=\"ulv1\"\n                    [inDialog]=\"true\"\n                    [isMultiSelect]=\"dialog.data.ShowSecondPanel\"\n                    [fullscreen]=\"dialog.data.fullscreen\"\n                ></bsu-ui-ulv-main-ui>\n            </ng-container>\n            <div\n                *ngIf=\"dialog.data.ulv2 && dialog.data.ShowSecondPanel\"\n                class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\n                [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\n            >\n                <h5 fd-title class=\"selected-and-condition-title\">\n                    <ng-container>\n                        <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\n                        ({{ dialog.data.selectedItems?.MoDataList?.length || 0 }})\n                    </ng-container>\n                </h5>\n\n                <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\n                    <div class=\"ulv-selection-form-dialog__tokens\">\n                        <fd-toolbar [shouldOverflow]=\"true\" *ngIf=\"dialog.data.selectedItems\">\n                            <!-- Selected items -->\n                            <fd-token\n                                fd-toolbar-item\n                                fdOverflowPriority=\"high\"\n                                class=\"fdp-value-help-dialog__selection-token\"\n                                (onCloseClick)=\"onRemoveSelected(dialog, item)\"\n                                *ngFor=\"\n                                    let item of dialog.data.selectedItems.MoDataList;\n                                    index as selectedIndex;\n                                    trackBy: _trackBySelectedFn\n                                \"\n                                >{{ item.$Caption }}\n                            </fd-token>\n                        </fd-toolbar>\n                    </div>\n                    <button\n                        class=\"ulv-selection-form-dialog__tokens-clear\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"decline\"\n                        [aria-label]=\"'Clear' | bbbTranslate\"\n                        (click)=\"onClear(dialog)\"\n                    ></button>\n                </div>\n            </div>\n        </fd-dialog-body>\n\n        <fd-dialog-footer *ngIf=\"dialog.data.ulv1 && !dialog.data.ulv1?.HideOkCancelButtons\">\n            <ng-template fdTemplate=\"footer\">\n                <div\n                    class=\"ulv-selection-form-dialog__actions-row\"\n                    *ngIf=\"dialog.data.adapter?.ShowOkCancelButtons !== false\"\n                >\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'OK' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        [compact]=\"true\"\n                        (click)=\"onOk(dialog)\"\n                    ></button>\n                    <fdp-button\n                        [contentDensity]=\"'compact'\"\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        [buttonType]=\"'transparent'\"\n                        (click)=\"onCancel(dialog)\"\n                    ></fdp-button>\n                </div>\n            </ng-template>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".ulv-selection-form-dialog{cursor:default}.ulv-selection-form-dialog .fd-dialog__body bsu-ui-table-view{overflow-x:inherit!important}.ulv-selection-form-dialog__advanced-filters{padding-top:1rem}.ulv-selection-form-dialog__advanced-filters label{height:auto}.ulv-selection-form-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.ulv-selection-form-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.ulv-selection-form-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.ulv-selection-form-dialog-mobile .ulv-selection-form-dialog__advanced-actions{justify-content:flex-start}.ulv-selection-form-dialog__advanced-actions .fd-toolbar{padding:0}.ulv-selection-form-dialog fd-dialog-body{height:100%;display:flex;flex-direction:column;overflow-y:hidden}.ulv-selection-form-dialog bsu-ui-ulv-main-ui{height:100%;flex-grow:1}.ulv-selection-form-dialog bsu-ui-ulv-main-ui .viewer-container{height:100%!important;overflow:auto}.ulv-selection-form-dialog .ulv-selection-form-dialog__row{border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9);padding-top:1rem}.ulv-selection-form-dialog bsu-search-panel{border-bottom:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog fd-dialog-footer{height:auto}.ulv-selection-form-dialog .fd-dialog__footer{flex-direction:column}.ulv-selection-form-dialog .fd-dialog__footer.fd-bar{padding:0!important}.ulv-selection-form-dialog .fd-dialog__footer{border-top:none}.ulv-selection-form-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.ulv-selection-form-dialog__row{padding:0 2rem 1rem}.ulv-selection-form-dialog__row.ulv-selection-form-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.ulv-selection-form-dialog__tokens-wrapper{display:flex}.ulv-selection-form-dialog__tokens{display:flex;flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.ulv-selection-form-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.ulv-selection-form-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.ulv-selection-form-dialog__actions-row{padding:.5rem 0;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.ulv-selection-form-dialog__actions-row .fd-button{margin-left:.5rem}.ulv-selection-form-dialog__tokens-wrapper{align-items:center}\n"] }]
@@ -7454,7 +7706,7 @@ class FundamentalDynamicFormComponent extends BaseComponent {
     onDynamicComponentEvents(e) { }
 }
 FundamentalDynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FundamentalDynamicFormComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-FundamentalDynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FundamentalDynamicFormComponent, selector: "bsu-fundamental-dynamic-form", inputs: { breadCrumbs: "breadCrumbs", toolbarVisible: "toolbarVisible", toolbarItems: "toolbarItems", layoutActions: "layoutActions", layout94: "layout94", parameters: "parameters", workflowPanelUi: "workflowPanelUi", context: "context", title: "title", subtitle: "subtitle", description: "description", facetList: "facetList", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", rtl: "rtl", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", formVisibilityStatus: "formVisibilityStatus" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"mask\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\n    <bsu-mask size=\"m\"></bsu-mask>\n</div>\n\n<fd-dynamic-page\n    [size]=\"isMobile ? 'small' : 'large'\"\n    [class.header-border]=\"!removeHeaderBorder\"\n    [attr.isMobile]=\"isMobile\"\n    [attr.contentIsPage]=\"contentIsPage\"\n>\n    <fd-dynamic-page-header\n        [class.simple-title]=\"!description\"\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\n        [subtitle]=\"subtitle | bbbTranslate\"\n        [class.p-b0]=\"removeContentPadding\"\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\n        #titleRef\n    >\n        <fd-breadcrumb>\n            <ng-container *ngIf=\"breadCrumbs\">\n                <ng-container\n                    *ngFor=\"let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; let i = index; let last = last\"\n                >\n                    <fd-breadcrumb-item>\n                        <bsu-breadcrumb\n                            [index]=\"i\"\n                            [isLast]=\"last\"\n                            [breadCrumb]=\"breadCrumb\"\n                            [allBreadCrumb]=\"breadCrumbs\"\n                        ></bsu-breadcrumb>\n                    </fd-breadcrumb-item>\n                </ng-container>\n            </ng-container>\n        </fd-breadcrumb>\n        <fd-dynamic-page-global-actions>\n            <!-- global actions -->\n\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n            <!-- added this because in mobile landscape toolbar disapper -->\n            <fd-toolbar\n                *ngIf=\"toolbarVisible\"\n                #formToolbar\n                fdType=\"transparent\"\n                [clearBorder]=\"true\"\n                [shouldOverflow]=\"deviceSize === 's'\"\n                [class.firefox]=\"isFirefox\"\n            >\n                <ng-container *ngFor=\"let btn of toolbarItems; let i = index; let last = last; let first = first\">\n                    <fd-toolbar-separator\n                        [attr.i]=\"i\"\n                        [attr.last]=\"last\"\n                        [attr.first]=\"first\"\n                        *ngIf=\"(btn === '-' || btn.text === '-') && !last && !first\"\n                    ></fd-toolbar-separator>\n                    <ng-container *ngIf=\"btn.IAmMenu; else simpleButton\">\n                        <fd-split-button\n                            [dir]=\"dirValue\"\n                            fd-toolbar-item\n                            [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\n                            [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\n                            (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\n                            (click)=\"menu.open()\"\n                        >\n                            <fd-menu #menu>\n                                <li\n                                    fd-menu-item\n                                    *ngFor=\"let menuItem of btn.menu.items\"\n                                    [disabled]=\"menuItem.disabled\"\n                                    (click)=\"onToolbarClick(menuItem, menu)\"\n                                >\n                                    <div fd-menu-interactive>\n                                        <fd-menu-addon\n                                            position=\"before\"\n                                            [glyph]=\"\n                                                menuItem.newIcon ? menuItem.newIcon : menuItem.Data?.JsonExtraProp?.Icon\n                                            \"\n                                        >\n                                        </fd-menu-addon>\n                                        <img\n                                            class=\"mr8\"\n                                            *ngIf=\"!menuItem.newIcon && menuItem.icon\"\n                                            [src]=\"menuItem.icon\"\n                                        />\n                                        <span fd-menu-title>{{ menuItem.text }}</span>\n                                    </div>\n                                </li>\n                            </fd-menu>\n                        </fd-split-button>\n                    </ng-container>\n                    <ng-template #simpleButton>\n                        <ng-container *ngIf=\"!(btn === '-' || btn.text === '-')\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate;\n                                    context: { $implicit: btn }\n                                \"\n                            ></ng-container>\n                            <ng-template #btnTemplate let-btn>\n                                <button\n                                    fd-toolbar-item\n                                    fd-button\n                                    [disabled]=\"btn.disabled\"\n                                    [attr.fdOverflowPriority]=\"\n                                        btn.isBuiltin\n                                            ? btn.priority\n                                            : deviceSize === 's' && btn.priority === 'low'\n                                            ? 'always'\n                                            : 'high'\n                                    \"\n                                    [fdType]=\"\n                                        btn.isWorkflow\n                                            ? 'positive'\n                                            : btn.design\n                                            ? btn.design\n                                            : btn.Data?.JsonExtraProp?.Design\n                                    \"\n                                    [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                                    (click)=\"onToolbarClick(btn)\"\n                                >\n                                    <img\n                                        *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                        width=\"16\"\n                                        [src]=\"btn.icon\"\n                                    />\n                                    <span *ngIf=\"btn.text\">{{ btn.text }}</span>\n                                </button>\n                            </ng-template>\n                            <ng-template #dynamicBtnTemplate let-btn>\n                                <bnrc-dynamic-form-toolbaritem\n                                    fd-toolbar-item\n                                    [component]=\"btn.Data.CustomUi\"\n                                    [context]=\"btn\"\n                                    [isEnable]=\"btn.Command?._isEnable\"\n                                    (btnClick)=\"onToolbarClick(btn)\"\n                                ></bnrc-dynamic-form-toolbaritem>\n                            </ng-template>\n                        </ng-container>\n                        <!-- <button\n                            *ngIf=\"!(btn === '-' || btn.text === '-')\"\n                            fd-toolbar-item\n                            fd-button\n                            [buttonType]=\"\n                                btn.isWorkflow ? 'positive' : btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\n                            \"\n                            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                            (click)=\"onToolbarClick(btn)\"\n                        >\n                            <img\n                                *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                width=\"16\"\n                                [src]=\"btn.icon\"\n                            />\n                            <span>{{ btn.text }}</span>\n                        </button> -->\n                    </ng-template>\n                </ng-container>\n            </fd-toolbar>\n            <!-- <bsu-ui-form-panel-toolbar\n        [buttons]=\"toolbarItems | tlbButtons: 'inFooter':false\"\n        [size]=\"size\"\n        [deviceSize]=\"deviceSize$ | async\"\n        [visible]=\"toolbarVisible\"\n        (toolClick)=\"onToolbarClick($event)\"\n      ></bsu-ui-form-panel-toolbar> -->\n        </fd-dynamic-page-global-actions>\n        <fd-dynamic-page-layout-actions>\n            <!-- layout actions -->\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\n            <fd-toolbar *ngIf=\"!hideClose\" fdType=\"transparent\" [clearBorder]=\"true\">\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n                    <i class=\"sap-icon--decline\"></i>\n                </button>\n            </fd-toolbar>\n        </fd-dynamic-page-layout-actions>\n    </fd-dynamic-page-header>\n    <fd-dynamic-page-subheader\n        *ngIf=\"description || facetList.length > 0 || workflowInfoText || avatar\"\n        [class.header-no-description]=\"!(description || workflowInfoText)\"\n        [class.no-pin]=\"hidePin\"\n        [collapsible]=\"!!workflowInfoText || (facetList && facetList.length > 0)\"\n        [pinnable]=\"true\"\n        [collapsed]=\"(!facetList || facetList.length === 0) && !workflowInfoText\"\n    >\n        <fd-message-strip [type]=\"'warning'\" *ngIf=\"workflowInfoText\" [dismissible]=\"false\">\n            {{ workflowInfoText | bbbTranslate }}\n        </fd-message-strip>\n        <fd-facet-group ariaLabel=\"Facet Group\">\n            <fd-facet *ngIf=\"avatar\" type=\"image\">\n                <fd-avatar\n                    title=\"avatar\"\n                    [glyph]=\"avatar\"\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\n                    [transparent]=\"true\"\n                ></fd-avatar>\n                <!-- <div\n                    class=\"fd-avatar fd-avatar--circle\"\n                    [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\n                >\n                    <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\n                </div> -->\n            </fd-facet>\n            <fd-facet\n                *ngFor=\"let facet of facetList\"\n                [type]=\"facet.type\"\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\n            >\n                <fd-facet-content *ngFor=\"let item of facet.mo.ItemList?.MoDataList\">\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\n                    <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\n                </fd-facet-content>\n                <span\n                    *ngIf=\"\n                        !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector;\n                        else dynamicComponentTpl\n                    \"\n                    fd-object-status\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [title]=\"facet.mo.Text | facetValue\"\n                    [aria-label]=\"facet.mo.Text | facetValue\"\n                    [glyph]=\"facet.mo.Icon\"\n                >\n                </span>\n                <ng-template #dynamicComponentTpl>\n                    <bnrc-dynamic-component\n                        [class]=\"'fd-object-status--' + facet.mo.Status | facetValue\"\n                        [class.fd-object-status--large]=\"facet.mo.IsLarge\"\n                        [component]=\"facet.mo.Component\"\n                        [value]=\"facet.mo.Text\"\n                    ></bnrc-dynamic-component>\n                </ng-template>\n                <fd-object-number\n                    *ngIf=\"facet.mo.IsNumber && facet.type === 'key-value'\"\n                    [number]=\"facet.mo.Text | facetValue\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [unit]=\"facet.mo.Unit | facetValue\"\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [decimal]=\"facet.mo.Decimal | facetValue\"\n                ></fd-object-number>\n\n                <div *ngIf=\"facet.type === 'plain-text'\" [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\n                    <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\n                </div>\n\n                <fd-facet-content *ngIf=\"facet.type === 'rating-indicator'\">\n                    <fd-rating-indicator\n                        style=\"pointer-events: none\"\n                        size=\"md\"\n                        [dynamicTextIndicator]=\"facet.mo.Footer\"\n                        [displayMode]=\"true\"\n                        [value]=\"facet.mo | facetValue: facet.type\"\n                    ></fd-rating-indicator>\n                </fd-facet-content>\n                <div *ngIf=\"facet.type === 'progress'\" [style.width]=\"'10rem'\">\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\n                    <fd-progress-indicator\n                        style=\"width: 10r em\"\n                        [state]=\"facet.mo.State\"\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\n                        [valueMax]=\"10\"\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\n                    ></fd-progress-indicator>\n                    <!-- <ui5-progress-indicator\n                        style=\"width: 10rem\"\n                        [valueState]=\"facet.mo.State\"\n                        [value]=\"getNumber(facet.mo.Value)\"\n                    ></ui5-progress-indicator> -->\n                </div>\n                <div *ngIf=\"facet.type === 'microcharts'\">\n                    <label wrap>in progress ...</label>\n                </div>\n            </fd-facet>\n        </fd-facet-group>\n        <span *ngIf=\"description\">{{ description }}</span>\n    </fd-dynamic-page-subheader>\n\n    <fd-tab-list\n        (selectedTabChange)=\"onTabChanged($event)\"\n        *ngIf=\"!contentIsPage && modernTabs && modernTabs.length > 0 && !parameters?.LayoutComponent; else renderLayout\"\n        [collapseOverflow]=\"true\"\n        [stackContent]=\"false\"\n        maxContentHeight=\"auto\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        #tablist\n    >\n        <fd-tab *ngFor=\"let tab of modernTabs; let i = index\" [title]=\"tab.Title!! | bbbTranslate\">\n            <fd-dynamic-page-content [id]=\"tab.id\">\n                <bsu-ly-tab-page [config]=\"tab\" [tablist]=\"tablist\"></bsu-ly-tab-page>\n            </fd-dynamic-page-content>\n        </fd-tab>\n    </fd-tab-list>\n    <ng-template #renderLayout>\n        <fd-dynamic-page-content [class.no-padding]=\"removeContentPadding\" *ngIf=\"!contentIsPage\">\n            <!-- <bsu-ly-layout-container-of-root\n            [config]=\"layout94\"\n            [isPanel]=\"false\"\n            [isRoot]=\"true\"\n        ></bsu-ly-layout-container-of-root> -->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\n                    context: {\n                        $implicit: parameters?.LayoutComponent,\n                        layout94: layout94\n                    }\n                \"\n            ></ng-container>\n        </fd-dynamic-page-content>\n    </ng-template>\n    <fd-dynamic-page-footer>\n        <bsu-layout-actions\n            [canSend]=\"canSend\"\n            [buttons]=\"layoutActions\"\n            [isMobile]=\"isMobile\"\n            [landscape]=\"landscape\"\n            [standalone]=\"standalone\"\n            [workflowButtons]=\"workflowButtons\"\n            [workflowButtonsComboMode]=\"workflowButtonsComboMode\"\n            [deviceSize]=\"deviceSize\"\n            [rtl]=\"rtl\"\n            (toolClick)=\"onToolbarClick($event)\"\n            (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\n        >\n        </bsu-layout-actions>\n    </fd-dynamic-page-footer>\n</fd-dynamic-page>\n<ng-container *ngIf=\"contentIsPage\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            renderLayoutComponent;\n            context: {\n                $implicit: parameters?.LayoutComponent,\n                layout94: layout94\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\n    <bsu-ly-layout-container-of-root\n        [config]=\"layout94\"\n        [isPanel]=\"false\"\n        [isRoot]=\"true\"\n    ></bsu-ly-layout-container-of-root>\n</ng-template>\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\n    <bnrc-dynamic-form-component\n        [component]=\"component\"\n        [removeContentPadding]=\"removeContentPadding\"\n        [breadCrumbs]=\"breadCrumbs\"\n        [description]=\"description\"\n        [title]=\"title\"\n        [subtitle]=\"subtitle\"\n        [toolbarItems]=\"toolbarItems\"\n        [layoutActions]=\"layoutActions\"\n        [facetList]=\"facetList\"\n        [settings]=\"component.Settings\"\n        [workflowPanelUi]=\"workflowPanelUi\"\n        [isMobile]=\"isMobile\"\n        [mo]=\"mo\"\n        [layout94]=\"layout94\"\n        [context]=\"context\"\n        [rtl]=\"rtl\"\n        [fieldDict]=\"fieldDict\"\n        [mask]=\"mask\"\n        [dirValue]=\"dirValue\"\n        [deviceSize]=\"deviceSize\"\n        [contentDensity]=\"contentDensity\"\n        [modernTabs]=\"modernTabs\"\n        [avatar]=\"avatar\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-form-component>\n</ng-template>\n", styles: [":host{display:block;height:auto;width:100%}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .fd-progress-indicator__container,:host ::ng-deep .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "layout94", "settings", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "value"], outputs: ["events"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i5$2.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$2.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$5.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i7$5.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i7$5.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i7$5.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i7$5.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i7$5.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i7$5.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i7$8.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "id", "alignEnd"] }, { kind: "component", type: i7$8.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i7$8.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i9.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i5$4.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i13$1.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["class", "name", "ariaLabel", "ariaLabelledBy", "disabled", "displayMode", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator"], outputs: ["ratingChanged"] }, { kind: "component", type: i4$3.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "disabled", "mainActionTitle", "fdType", "expandButtonAriaLabel", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i15.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i15.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "component", type: i18.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.HeaderFacetValuePipe, name: "facetValue" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FundamentalDynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FundamentalDynamicFormComponent, selector: "bsu-fundamental-dynamic-form", inputs: { breadCrumbs: "breadCrumbs", toolbarVisible: "toolbarVisible", toolbarItems: "toolbarItems", layoutActions: "layoutActions", layout94: "layout94", parameters: "parameters", workflowPanelUi: "workflowPanelUi", context: "context", title: "title", subtitle: "subtitle", description: "description", facetList: "facetList", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", rtl: "rtl", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", formVisibilityStatus: "formVisibilityStatus" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"mask\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\n    <bsu-mask size=\"m\"></bsu-mask>\n</div>\n\n<fd-dynamic-page\n    [size]=\"isMobile ? 'small' : 'large'\"\n    [class.header-border]=\"!removeHeaderBorder\"\n    [attr.isMobile]=\"isMobile\"\n    [attr.contentIsPage]=\"contentIsPage\"\n>\n    <fd-dynamic-page-header\n        [class.simple-title]=\"!description\"\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\n        [subtitle]=\"subtitle | bbbTranslate\"\n        [class.p-b0]=\"removeContentPadding\"\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\n        #titleRef\n    >\n        <fd-breadcrumb>\n            <ng-container *ngIf=\"breadCrumbs\">\n                <ng-container\n                    *ngFor=\"let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; let i = index; let last = last\"\n                >\n                    <fd-breadcrumb-item>\n                        <bsu-breadcrumb\n                            [index]=\"i\"\n                            [isLast]=\"last\"\n                            [breadCrumb]=\"breadCrumb\"\n                            [allBreadCrumb]=\"breadCrumbs\"\n                        ></bsu-breadcrumb>\n                    </fd-breadcrumb-item>\n                </ng-container>\n            </ng-container>\n        </fd-breadcrumb>\n        <fd-dynamic-page-global-actions>\n            <!-- global actions -->\n\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n            <!-- added this because in mobile landscape toolbar disapper -->\n            <fd-toolbar\n                *ngIf=\"toolbarVisible\"\n                #formToolbar\n                fdType=\"transparent\"\n                [clearBorder]=\"true\"\n                [shouldOverflow]=\"deviceSize === 's'\"\n                [class.firefox]=\"isFirefox\"\n            >\n                <ng-container *ngFor=\"let btn of toolbarItems; let i = index; let last = last; let first = first\">\n                    <fd-toolbar-separator\n                        [attr.i]=\"i\"\n                        [attr.last]=\"last\"\n                        [attr.first]=\"first\"\n                        *ngIf=\"(btn === '-' || btn.text === '-') && !last && !first\"\n                    ></fd-toolbar-separator>\n                    <ng-container *ngIf=\"btn.IAmMenu; else simpleButton\">\n                        <fd-split-button\n                            [dir]=\"dirValue\"\n                            fd-toolbar-item\n                            [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\n                            [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\n                            (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\n                            (click)=\"menu.open()\"\n                        >\n                            <fd-menu #menu>\n                                <li\n                                    fd-menu-item\n                                    *ngFor=\"let menuItem of btn.menu.items\"\n                                    [disabled]=\"menuItem.disabled\"\n                                    (click)=\"onToolbarClick(menuItem, menu)\"\n                                >\n                                    <div fd-menu-interactive>\n                                        <fd-menu-addon\n                                            position=\"before\"\n                                            [glyph]=\"\n                                                menuItem.newIcon ? menuItem.newIcon : menuItem.Data?.JsonExtraProp?.Icon\n                                            \"\n                                        >\n                                        </fd-menu-addon>\n                                        <img\n                                            class=\"mr8\"\n                                            *ngIf=\"!menuItem.newIcon && menuItem.icon\"\n                                            [src]=\"menuItem.icon\"\n                                        />\n                                        <span fd-menu-title>{{ menuItem.text }}</span>\n                                    </div>\n                                </li>\n                            </fd-menu>\n                        </fd-split-button>\n                    </ng-container>\n                    <ng-template #simpleButton>\n                        <ng-container *ngIf=\"!(btn === '-' || btn.text === '-')\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate;\n                                    context: { $implicit: btn }\n                                \"\n                            ></ng-container>\n                            <ng-template #btnTemplate let-btn>\n                                <button\n                                    fd-toolbar-item\n                                    fd-button\n                                    [disabled]=\"btn.disabled\"\n                                    [attr.fdOverflowPriority]=\"\n                                        btn.isBuiltin\n                                            ? btn.priority\n                                            : deviceSize === 's' && btn.priority === 'low'\n                                            ? 'always'\n                                            : 'high'\n                                    \"\n                                    [fdType]=\"\n                                        btn.isWorkflow\n                                            ? 'positive'\n                                            : btn.design\n                                            ? btn.design\n                                            : btn.Data?.JsonExtraProp?.Design\n                                    \"\n                                    [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                                    (click)=\"onToolbarClick(btn)\"\n                                >\n                                    <img\n                                        *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                        width=\"16\"\n                                        [src]=\"btn.icon\"\n                                    />\n                                    <span *ngIf=\"btn.text\">{{ btn.text }}</span>\n                                </button>\n                            </ng-template>\n                            <ng-template #dynamicBtnTemplate let-btn>\n                                <bnrc-dynamic-form-toolbaritem\n                                    fd-toolbar-item\n                                    [component]=\"btn.Data.CustomUi\"\n                                    [context]=\"btn\"\n                                    [isEnable]=\"btn.Command?._isEnable\"\n                                    (btnClick)=\"onToolbarClick(btn)\"\n                                ></bnrc-dynamic-form-toolbaritem>\n                            </ng-template>\n                        </ng-container>\n                        <!-- <button\n                            *ngIf=\"!(btn === '-' || btn.text === '-')\"\n                            fd-toolbar-item\n                            fd-button\n                            [buttonType]=\"\n                                btn.isWorkflow ? 'positive' : btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\n                            \"\n                            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                            (click)=\"onToolbarClick(btn)\"\n                        >\n                            <img\n                                *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                width=\"16\"\n                                [src]=\"btn.icon\"\n                            />\n                            <span>{{ btn.text }}</span>\n                        </button> -->\n                    </ng-template>\n                </ng-container>\n            </fd-toolbar>\n            <!-- <bsu-ui-form-panel-toolbar\n        [buttons]=\"toolbarItems | tlbButtons: 'inFooter':false\"\n        [size]=\"size\"\n        [deviceSize]=\"deviceSize$ | async\"\n        [visible]=\"toolbarVisible\"\n        (toolClick)=\"onToolbarClick($event)\"\n      ></bsu-ui-form-panel-toolbar> -->\n        </fd-dynamic-page-global-actions>\n        <fd-dynamic-page-layout-actions>\n            <!-- layout actions -->\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\n            <fd-toolbar *ngIf=\"!hideClose\" fdType=\"transparent\" [clearBorder]=\"true\">\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n                    <i class=\"sap-icon--decline\"></i>\n                </button>\n            </fd-toolbar>\n        </fd-dynamic-page-layout-actions>\n    </fd-dynamic-page-header>\n    <fd-dynamic-page-subheader\n        *ngIf=\"description || facetList.length > 0 || workflowInfoText || avatar\"\n        [class.header-no-description]=\"!(description || workflowInfoText)\"\n        [class.no-pin]=\"hidePin\"\n        [collapsible]=\"!!workflowInfoText || (facetList && facetList.length > 0)\"\n        [pinnable]=\"true\"\n        [collapsed]=\"(!facetList || facetList.length === 0) && !workflowInfoText\"\n    >\n        <fd-message-strip [type]=\"'warning'\" *ngIf=\"workflowInfoText\" [dismissible]=\"false\">\n            {{ workflowInfoText | bbbTranslate }}\n        </fd-message-strip>\n        <fd-facet-group ariaLabel=\"Facet Group\">\n            <fd-facet *ngIf=\"avatar\" type=\"image\">\n                <fd-avatar\n                    title=\"avatar\"\n                    [glyph]=\"avatar\"\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\n                    [transparent]=\"true\"\n                ></fd-avatar>\n                <!-- <div\n                    class=\"fd-avatar fd-avatar--circle\"\n                    [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\n                >\n                    <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\n                </div> -->\n            </fd-facet>\n            <fd-facet\n                *ngFor=\"let facet of facetList\"\n                [type]=\"facet.type\"\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\n            >\n                <fd-facet-content *ngFor=\"let item of facet.mo.ItemList?.MoDataList\">\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\n                    <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\n                </fd-facet-content>\n                <span\n                    *ngIf=\"\n                        !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector;\n                        else dynamicComponentTpl\n                    \"\n                    fd-object-status\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [title]=\"facet.mo.Text | facetValue\"\n                    [aria-label]=\"facet.mo.Text | facetValue\"\n                    [glyph]=\"facet.mo.Icon\"\n                >\n                </span>\n                <ng-template #dynamicComponentTpl>\n                    <bnrc-dynamic-component\n                        [class]=\"'fd-object-status--' + facet.mo.Status | facetValue\"\n                        [class.fd-object-status--large]=\"facet.mo.IsLarge\"\n                        [component]=\"facet.mo.Component\"\n                        [value]=\"facet.mo.Text\"\n                    ></bnrc-dynamic-component>\n                </ng-template>\n                <fd-object-number\n                    *ngIf=\"facet.mo.IsNumber && facet.type === 'key-value'\"\n                    [number]=\"facet.mo.Text | facetValue\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [unit]=\"facet.mo.Unit | facetValue\"\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [decimal]=\"facet.mo.Decimal | facetValue\"\n                ></fd-object-number>\n\n                <div *ngIf=\"facet.type === 'plain-text'\" [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\n                    <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\n                </div>\n\n                <fd-facet-content *ngIf=\"facet.type === 'rating-indicator'\">\n                    <fd-rating-indicator\n                        style=\"pointer-events: none\"\n                        size=\"md\"\n                        [dynamicTextIndicator]=\"facet.mo.Footer\"\n                        [displayMode]=\"true\"\n                        [value]=\"facet.mo | facetValue: facet.type\"\n                    ></fd-rating-indicator>\n                </fd-facet-content>\n                <div *ngIf=\"facet.type === 'progress'\" [style.width]=\"'10rem'\">\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\n                    <fd-progress-indicator\n                        style=\"width: 10r em\"\n                        [state]=\"facet.mo.State\"\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\n                        [valueMax]=\"10\"\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\n                    ></fd-progress-indicator>\n                    <!-- <ui5-progress-indicator\n                        style=\"width: 10rem\"\n                        [valueState]=\"facet.mo.State\"\n                        [value]=\"getNumber(facet.mo.Value)\"\n                    ></ui5-progress-indicator> -->\n                </div>\n                <div *ngIf=\"facet.type === 'microcharts'\">\n                    <label wrap>in progress ...</label>\n                </div>\n            </fd-facet>\n        </fd-facet-group>\n        <span *ngIf=\"description\">{{ description }}</span>\n    </fd-dynamic-page-subheader>\n\n    <fd-tab-list\n        (selectedTabChange)=\"onTabChanged($event)\"\n        *ngIf=\"!contentIsPage && modernTabs && modernTabs.length > 0 && !parameters?.LayoutComponent; else renderLayout\"\n        [collapseOverflow]=\"true\"\n        [stackContent]=\"false\"\n        maxContentHeight=\"auto\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        #tablist\n    >\n        <fd-tab *ngFor=\"let tab of modernTabs; let i = index\" [title]=\"tab.Title!! | bbbTranslate\">\n            <fd-dynamic-page-content [id]=\"tab.id\">\n                <bsu-ly-tab-page [config]=\"tab\" [tablist]=\"tablist\"></bsu-ly-tab-page>\n            </fd-dynamic-page-content>\n        </fd-tab>\n    </fd-tab-list>\n    <ng-template #renderLayout>\n        <fd-dynamic-page-content [class.no-padding]=\"removeContentPadding\" *ngIf=\"!contentIsPage\">\n            <!-- <bsu-ly-layout-container-of-root\n            [config]=\"layout94\"\n            [isPanel]=\"false\"\n            [isRoot]=\"true\"\n        ></bsu-ly-layout-container-of-root> -->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\n                    context: {\n                        $implicit: parameters?.LayoutComponent,\n                        layout94: layout94\n                    }\n                \"\n            ></ng-container>\n        </fd-dynamic-page-content>\n    </ng-template>\n    <fd-dynamic-page-footer>\n        <bsu-layout-actions\n            [canSend]=\"canSend\"\n            [buttons]=\"layoutActions\"\n            [isMobile]=\"isMobile\"\n            [landscape]=\"landscape\"\n            [standalone]=\"standalone\"\n            [workflowButtons]=\"workflowButtons\"\n            [workflowButtonsComboMode]=\"workflowButtonsComboMode\"\n            [deviceSize]=\"deviceSize\"\n            [rtl]=\"rtl\"\n            (toolClick)=\"onToolbarClick($event)\"\n            (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\n        >\n        </bsu-layout-actions>\n    </fd-dynamic-page-footer>\n</fd-dynamic-page>\n<ng-container *ngIf=\"contentIsPage\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            renderLayoutComponent;\n            context: {\n                $implicit: parameters?.LayoutComponent,\n                layout94: layout94\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\n    <bsu-ly-layout-container-of-root\n        [config]=\"layout94\"\n        [isPanel]=\"false\"\n        [isRoot]=\"true\"\n    ></bsu-ly-layout-container-of-root>\n</ng-template>\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\n    <bnrc-dynamic-form-component\n        [component]=\"component\"\n        [removeContentPadding]=\"removeContentPadding\"\n        [breadCrumbs]=\"breadCrumbs\"\n        [description]=\"description\"\n        [title]=\"title\"\n        [subtitle]=\"subtitle\"\n        [toolbarItems]=\"toolbarItems\"\n        [layoutActions]=\"layoutActions\"\n        [facetList]=\"facetList\"\n        [settings]=\"component.Settings\"\n        [workflowPanelUi]=\"workflowPanelUi\"\n        [isMobile]=\"isMobile\"\n        [mo]=\"mo\"\n        [layout94]=\"layout94\"\n        [context]=\"context\"\n        [rtl]=\"rtl\"\n        [fieldDict]=\"fieldDict\"\n        [mask]=\"mask\"\n        [dirValue]=\"dirValue\"\n        [deviceSize]=\"deviceSize\"\n        [contentDensity]=\"contentDensity\"\n        [modernTabs]=\"modernTabs\"\n        [avatar]=\"avatar\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-form-component>\n</ng-template>\n", styles: [":host{display:block;height:auto;width:100%}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .fd-progress-indicator__container,:host ::ng-deep .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "layout94", "settings", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "value"], outputs: ["events"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "component", type: i3$4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i5$2.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["containerElement", "reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i5$2.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$5.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i7$5.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "subtitle"] }, { kind: "component", type: i7$5.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i7$5.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i7$5.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "role", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i7$5.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i7$5.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i7$8.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "id", "alignEnd"] }, { kind: "component", type: i7$8.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i7$8.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i9.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i5$4.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: i13$1.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["class", "name", "ariaLabel", "ariaLabelledBy", "disabled", "displayMode", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator"], outputs: ["ratingChanged"] }, { kind: "component", type: i4$3.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "disabled", "mainActionTitle", "fdType", "expandButtonAriaLabel", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i15.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i15.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "component", type: i18.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.HeaderFacetValuePipe, name: "facetValue" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FundamentalDynamicFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-fundamental-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"mask\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\n    <bsu-mask size=\"m\"></bsu-mask>\n</div>\n\n<fd-dynamic-page\n    [size]=\"isMobile ? 'small' : 'large'\"\n    [class.header-border]=\"!removeHeaderBorder\"\n    [attr.isMobile]=\"isMobile\"\n    [attr.contentIsPage]=\"contentIsPage\"\n>\n    <fd-dynamic-page-header\n        [class.simple-title]=\"!description\"\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\n        [subtitle]=\"subtitle | bbbTranslate\"\n        [class.p-b0]=\"removeContentPadding\"\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\n        #titleRef\n    >\n        <fd-breadcrumb>\n            <ng-container *ngIf=\"breadCrumbs\">\n                <ng-container\n                    *ngFor=\"let breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; let i = index; let last = last\"\n                >\n                    <fd-breadcrumb-item>\n                        <bsu-breadcrumb\n                            [index]=\"i\"\n                            [isLast]=\"last\"\n                            [breadCrumb]=\"breadCrumb\"\n                            [allBreadCrumb]=\"breadCrumbs\"\n                        ></bsu-breadcrumb>\n                    </fd-breadcrumb-item>\n                </ng-container>\n            </ng-container>\n        </fd-breadcrumb>\n        <fd-dynamic-page-global-actions>\n            <!-- global actions -->\n\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\n            <!-- added this because in mobile landscape toolbar disapper -->\n            <fd-toolbar\n                *ngIf=\"toolbarVisible\"\n                #formToolbar\n                fdType=\"transparent\"\n                [clearBorder]=\"true\"\n                [shouldOverflow]=\"deviceSize === 's'\"\n                [class.firefox]=\"isFirefox\"\n            >\n                <ng-container *ngFor=\"let btn of toolbarItems; let i = index; let last = last; let first = first\">\n                    <fd-toolbar-separator\n                        [attr.i]=\"i\"\n                        [attr.last]=\"last\"\n                        [attr.first]=\"first\"\n                        *ngIf=\"(btn === '-' || btn.text === '-') && !last && !first\"\n                    ></fd-toolbar-separator>\n                    <ng-container *ngIf=\"btn.IAmMenu; else simpleButton\">\n                        <fd-split-button\n                            [dir]=\"dirValue\"\n                            fd-toolbar-item\n                            [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\n                            [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\n                            (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\n                            (click)=\"menu.open()\"\n                        >\n                            <fd-menu #menu>\n                                <li\n                                    fd-menu-item\n                                    *ngFor=\"let menuItem of btn.menu.items\"\n                                    [disabled]=\"menuItem.disabled\"\n                                    (click)=\"onToolbarClick(menuItem, menu)\"\n                                >\n                                    <div fd-menu-interactive>\n                                        <fd-menu-addon\n                                            position=\"before\"\n                                            [glyph]=\"\n                                                menuItem.newIcon ? menuItem.newIcon : menuItem.Data?.JsonExtraProp?.Icon\n                                            \"\n                                        >\n                                        </fd-menu-addon>\n                                        <img\n                                            class=\"mr8\"\n                                            *ngIf=\"!menuItem.newIcon && menuItem.icon\"\n                                            [src]=\"menuItem.icon\"\n                                        />\n                                        <span fd-menu-title>{{ menuItem.text }}</span>\n                                    </div>\n                                </li>\n                            </fd-menu>\n                        </fd-split-button>\n                    </ng-container>\n                    <ng-template #simpleButton>\n                        <ng-container *ngIf=\"!(btn === '-' || btn.text === '-')\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate;\n                                    context: { $implicit: btn }\n                                \"\n                            ></ng-container>\n                            <ng-template #btnTemplate let-btn>\n                                <button\n                                    fd-toolbar-item\n                                    fd-button\n                                    [disabled]=\"btn.disabled\"\n                                    [attr.fdOverflowPriority]=\"\n                                        btn.isBuiltin\n                                            ? btn.priority\n                                            : deviceSize === 's' && btn.priority === 'low'\n                                            ? 'always'\n                                            : 'high'\n                                    \"\n                                    [fdType]=\"\n                                        btn.isWorkflow\n                                            ? 'positive'\n                                            : btn.design\n                                            ? btn.design\n                                            : btn.Data?.JsonExtraProp?.Design\n                                    \"\n                                    [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                                    (click)=\"onToolbarClick(btn)\"\n                                >\n                                    <img\n                                        *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                        width=\"16\"\n                                        [src]=\"btn.icon\"\n                                    />\n                                    <span *ngIf=\"btn.text\">{{ btn.text }}</span>\n                                </button>\n                            </ng-template>\n                            <ng-template #dynamicBtnTemplate let-btn>\n                                <bnrc-dynamic-form-toolbaritem\n                                    fd-toolbar-item\n                                    [component]=\"btn.Data.CustomUi\"\n                                    [context]=\"btn\"\n                                    [isEnable]=\"btn.Command?._isEnable\"\n                                    (btnClick)=\"onToolbarClick(btn)\"\n                                ></bnrc-dynamic-form-toolbaritem>\n                            </ng-template>\n                        </ng-container>\n                        <!-- <button\n                            *ngIf=\"!(btn === '-' || btn.text === '-')\"\n                            fd-toolbar-item\n                            fd-button\n                            [buttonType]=\"\n                                btn.isWorkflow ? 'positive' : btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\n                            \"\n                            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\n                            (click)=\"onToolbarClick(btn)\"\n                        >\n                            <img\n                                *ngIf=\"!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon\"\n                                width=\"16\"\n                                [src]=\"btn.icon\"\n                            />\n                            <span>{{ btn.text }}</span>\n                        </button> -->\n                    </ng-template>\n                </ng-container>\n            </fd-toolbar>\n            <!-- <bsu-ui-form-panel-toolbar\n        [buttons]=\"toolbarItems | tlbButtons: 'inFooter':false\"\n        [size]=\"size\"\n        [deviceSize]=\"deviceSize$ | async\"\n        [visible]=\"toolbarVisible\"\n        (toolClick)=\"onToolbarClick($event)\"\n      ></bsu-ui-form-panel-toolbar> -->\n        </fd-dynamic-page-global-actions>\n        <fd-dynamic-page-layout-actions>\n            <!-- layout actions -->\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\n            <fd-toolbar *ngIf=\"!hideClose\" fdType=\"transparent\" [clearBorder]=\"true\">\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\n                    <i class=\"sap-icon--decline\"></i>\n                </button>\n            </fd-toolbar>\n        </fd-dynamic-page-layout-actions>\n    </fd-dynamic-page-header>\n    <fd-dynamic-page-subheader\n        *ngIf=\"description || facetList.length > 0 || workflowInfoText || avatar\"\n        [class.header-no-description]=\"!(description || workflowInfoText)\"\n        [class.no-pin]=\"hidePin\"\n        [collapsible]=\"!!workflowInfoText || (facetList && facetList.length > 0)\"\n        [pinnable]=\"true\"\n        [collapsed]=\"(!facetList || facetList.length === 0) && !workflowInfoText\"\n    >\n        <fd-message-strip [type]=\"'warning'\" *ngIf=\"workflowInfoText\" [dismissible]=\"false\">\n            {{ workflowInfoText | bbbTranslate }}\n        </fd-message-strip>\n        <fd-facet-group ariaLabel=\"Facet Group\">\n            <fd-facet *ngIf=\"avatar\" type=\"image\">\n                <fd-avatar\n                    title=\"avatar\"\n                    [glyph]=\"avatar\"\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\n                    [transparent]=\"true\"\n                ></fd-avatar>\n                <!-- <div\n                    class=\"fd-avatar fd-avatar--circle\"\n                    [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\n                >\n                    <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\n                </div> -->\n            </fd-facet>\n            <fd-facet\n                *ngFor=\"let facet of facetList\"\n                [type]=\"facet.type\"\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\n            >\n                <fd-facet-content *ngFor=\"let item of facet.mo.ItemList?.MoDataList\">\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title }}</label>\n                    <fd-text [text]=\"item.Value | facetValue\" id=\"form-value-10\"></fd-text>\n                </fd-facet-content>\n                <span\n                    *ngIf=\"\n                        !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector;\n                        else dynamicComponentTpl\n                    \"\n                    fd-object-status\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue)\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [title]=\"facet.mo.Text | facetValue\"\n                    [aria-label]=\"facet.mo.Text | facetValue\"\n                    [glyph]=\"facet.mo.Icon\"\n                >\n                </span>\n                <ng-template #dynamicComponentTpl>\n                    <bnrc-dynamic-component\n                        [class]=\"'fd-object-status--' + facet.mo.Status | facetValue\"\n                        [class.fd-object-status--large]=\"facet.mo.IsLarge\"\n                        [component]=\"facet.mo.Component\"\n                        [value]=\"facet.mo.Text\"\n                    ></bnrc-dynamic-component>\n                </ng-template>\n                <fd-object-number\n                    *ngIf=\"facet.mo.IsNumber && facet.type === 'key-value'\"\n                    [number]=\"facet.mo.Text | facetValue\"\n                    [large]=\"facet.mo.IsLarge\"\n                    [unit]=\"facet.mo.Unit | facetValue\"\n                    [status]=\"facet.mo.Status | facetValue\"\n                    [decimal]=\"facet.mo.Decimal | facetValue\"\n                ></fd-object-number>\n\n                <div *ngIf=\"facet.type === 'plain-text'\" [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\n                    <fd-text [text]=\"facet.mo.Text | facetValue\" hyphenation=\"auto\"></fd-text>\n                </div>\n\n                <fd-facet-content *ngIf=\"facet.type === 'rating-indicator'\">\n                    <fd-rating-indicator\n                        style=\"pointer-events: none\"\n                        size=\"md\"\n                        [dynamicTextIndicator]=\"facet.mo.Footer\"\n                        [displayMode]=\"true\"\n                        [value]=\"facet.mo | facetValue: facet.type\"\n                    ></fd-rating-indicator>\n                </fd-facet-content>\n                <div *ngIf=\"facet.type === 'progress'\" [style.width]=\"'10rem'\">\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\n                    <fd-progress-indicator\n                        style=\"width: 10r em\"\n                        [state]=\"facet.mo.State\"\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647'\"\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\n                        [valueMax]=\"10\"\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\n                    ></fd-progress-indicator>\n                    <!-- <ui5-progress-indicator\n                        style=\"width: 10rem\"\n                        [valueState]=\"facet.mo.State\"\n                        [value]=\"getNumber(facet.mo.Value)\"\n                    ></ui5-progress-indicator> -->\n                </div>\n                <div *ngIf=\"facet.type === 'microcharts'\">\n                    <label wrap>in progress ...</label>\n                </div>\n            </fd-facet>\n        </fd-facet-group>\n        <span *ngIf=\"description\">{{ description }}</span>\n    </fd-dynamic-page-subheader>\n\n    <fd-tab-list\n        (selectedTabChange)=\"onTabChanged($event)\"\n        *ngIf=\"!contentIsPage && modernTabs && modernTabs.length > 0 && !parameters?.LayoutComponent; else renderLayout\"\n        [collapseOverflow]=\"true\"\n        [stackContent]=\"false\"\n        maxContentHeight=\"auto\"\n        [expandOverflowText]=\"'More' | bbbTranslate\"\n        #tablist\n    >\n        <fd-tab *ngFor=\"let tab of modernTabs; let i = index\" [title]=\"tab.Title!! | bbbTranslate\">\n            <fd-dynamic-page-content [id]=\"tab.id\">\n                <bsu-ly-tab-page [config]=\"tab\" [tablist]=\"tablist\"></bsu-ly-tab-page>\n            </fd-dynamic-page-content>\n        </fd-tab>\n    </fd-tab-list>\n    <ng-template #renderLayout>\n        <fd-dynamic-page-content [class.no-padding]=\"removeContentPadding\" *ngIf=\"!contentIsPage\">\n            <!-- <bsu-ly-layout-container-of-root\n            [config]=\"layout94\"\n            [isPanel]=\"false\"\n            [isRoot]=\"true\"\n        ></bsu-ly-layout-container-of-root> -->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\n                    context: {\n                        $implicit: parameters?.LayoutComponent,\n                        layout94: layout94\n                    }\n                \"\n            ></ng-container>\n        </fd-dynamic-page-content>\n    </ng-template>\n    <fd-dynamic-page-footer>\n        <bsu-layout-actions\n            [canSend]=\"canSend\"\n            [buttons]=\"layoutActions\"\n            [isMobile]=\"isMobile\"\n            [landscape]=\"landscape\"\n            [standalone]=\"standalone\"\n            [workflowButtons]=\"workflowButtons\"\n            [workflowButtonsComboMode]=\"workflowButtonsComboMode\"\n            [deviceSize]=\"deviceSize\"\n            [rtl]=\"rtl\"\n            (toolClick)=\"onToolbarClick($event)\"\n            (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\n        >\n        </bsu-layout-actions>\n    </fd-dynamic-page-footer>\n</fd-dynamic-page>\n<ng-container *ngIf=\"contentIsPage\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            renderLayoutComponent;\n            context: {\n                $implicit: parameters?.LayoutComponent,\n                layout94: layout94\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\n    <bsu-ly-layout-container-of-root\n        [config]=\"layout94\"\n        [isPanel]=\"false\"\n        [isRoot]=\"true\"\n    ></bsu-ly-layout-container-of-root>\n</ng-template>\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\n    <bnrc-dynamic-form-component\n        [component]=\"component\"\n        [removeContentPadding]=\"removeContentPadding\"\n        [breadCrumbs]=\"breadCrumbs\"\n        [description]=\"description\"\n        [title]=\"title\"\n        [subtitle]=\"subtitle\"\n        [toolbarItems]=\"toolbarItems\"\n        [layoutActions]=\"layoutActions\"\n        [facetList]=\"facetList\"\n        [settings]=\"component.Settings\"\n        [workflowPanelUi]=\"workflowPanelUi\"\n        [isMobile]=\"isMobile\"\n        [mo]=\"mo\"\n        [layout94]=\"layout94\"\n        [context]=\"context\"\n        [rtl]=\"rtl\"\n        [fieldDict]=\"fieldDict\"\n        [mask]=\"mask\"\n        [dirValue]=\"dirValue\"\n        [deviceSize]=\"deviceSize\"\n        [contentDensity]=\"contentDensity\"\n        [modernTabs]=\"modernTabs\"\n        [avatar]=\"avatar\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-form-component>\n</ng-template>\n", styles: [":host{display:block;height:auto;width:100%}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .fd-progress-indicator__container,:host ::ng-deep .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"] }]
@@ -7793,7 +8045,7 @@ class UiLinearListContainerWithButtonComponent extends DeviceInfoFieldBaseCompon
     }
 }
 UiLinearListContainerWithButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiLinearListContainerWithButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiLinearListContainerWithButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiLinearListContainerWithButtonComponent, 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\n    [inputId]=\"id\"\n    [class.control-readonly]=\"(readonly$ | async) === true\"\n    [dropdownValues]=\"(dropDownValues$ | async)!!\"\n    [placeholder]=\"'EnterSearchCriteria' | bbbTranslate\"\n    [displayFn]=\"displayFunc\"\n    [showAllButton]=\"false\"\n    [displayAddonButton]=\"false\"\n    [allowNewTokens]=\"false\"\n    [includes]=\"true\"\n    [disabled]=\"(disable$ | async) === true\"\n    (searchTermChange)=\"onSearchTermChange($event)\"\n    (selectedChange)=\"onSelectedChange($event)\"\n></fd-multi-input>\n<!-- <fdp-multi-input\n[placeholder]=\"'EnterSearchCriteria'|bbbTranslate\"\ntype=\"text\"\n[id]=\"id\"\n[dataSource]=\"(dropDownValues$ | async)!!\"\n(selectionChange)=\"onSelectedChange($event)\"\ndisplayKey=\"$Caption\"\n[autofocus]=\"true\"\n\n>\n</fdp-multi-input> -->\n<button\n    *ngIf=\"report\"\n    fd-button\n    [attr.rtl]=\"rtl\"\n    [aria-label]=\"'Advanced' | bbbTranslate\"\n    glyph=\"value-help\"\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\n    (click)=\"onOpenReport()\"\n></button>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"dialogConfig.height !== '100vh'\"\n                        ariaLabel=\"fullscreen\"\n                        [glyph]=\"dialog.data.fullscreen ? 'exitfullscreen' : 'resize'\"\n                        fullscreenDialog\n                        [dialog]=\"dialog\"\n                        [dialogComponent]=\"dialogTpl\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onDismiss()\"></fd-button-bar>\n                </div>\n            </ng-template>\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\n      <button fd-dialog-close-button></button> -->\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-container *ngIf=\"dialog.data.ulvUi as ulvUi\">\n                <bsu-ui-ulv-main-ui [context]=\"ulvUi\" class=\"linear-list-selection\"></bsu-ui-ulv-main-ui>\n            </ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer class=\"linear-footer\">\n            <ng-template fdTemplate=\"footer\">\n                <div\n                    class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\n                    [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\n                >\n                    <h5 fd-title class=\"selected-and-condition-title\">\n                        <ng-container>\n                            <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\n                            ({{ dialog.data.selectedItems?.length || 0 }})\n                        </ng-container>\n                    </h5>\n                    <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\n                        <div class=\"ulv-selection-form-dialog__tokens\">\n                            <fd-toolbar *ngIf=\"dialog.data.selectedItems\">\n                                <!-- Selected items -->\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"onRemoveSelected(item)\"\n                                    *ngFor=\"\n                                        let item of dialog.data.selectedItems;\n                                        index as selectedIndex;\n                                        trackBy: _trackBySelectedFn\n                                    \"\n                                    >{{ item.Text }}\n                                </fd-token>\n                            </fd-toolbar>\n                        </div>\n                        <button\n                            class=\"ulv-selection-form-dialog__tokens-clear\"\n                            fd-button\n                            fdType=\"transparent\"\n                            glyph=\"decline\"\n                            [aria-label]=\"'Clear' | bbbTranslate\"\n                            (click)=\"onClear()\"\n                        ></button>\n                    </div>\n                </div>\n                <div class=\"ulv-selection-form-dialog__actions-row\">\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'OK' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onOk()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        fdType=\"transparent\"\n                        (click)=\"onDismiss()\"\n                    ></button>\n                </div>\n            </ng-template>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: i7$9.MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "dropdownValues", "searchTerm", "inputId", "highlight", "selected", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "autoComplete", "open", "displayAddonButton"], outputs: ["searchTermChange", "selectedChange", "openChange", "allItemsSelectedChange"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "component", type: i9$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: UiUlvMainUiComponent, selector: "bsu-ui-ulv-main-ui", inputs: ["context", "isReportPage", "inDialog", "isMultiSelect", "layoutInfo", "fullscreen"] }, { kind: "directive", type: FullscreenDialogDirective, selector: "[fullscreenDialog]", inputs: ["dialog", "dialogComponent"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiLinearListContainerWithButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiLinearListContainerWithButtonComponent, 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\n    [inputId]=\"id\"\n    [class.control-readonly]=\"(readonly$ | async) === true\"\n    [dropdownValues]=\"(dropDownValues$ | async)!!\"\n    [placeholder]=\"'EnterSearchCriteria' | bbbTranslate\"\n    [displayFn]=\"displayFunc\"\n    [showAllButton]=\"false\"\n    [displayAddonButton]=\"false\"\n    [allowNewTokens]=\"false\"\n    [includes]=\"true\"\n    [disabled]=\"(disable$ | async) === true\"\n    (searchTermChange)=\"onSearchTermChange($event)\"\n    (selectedChange)=\"onSelectedChange($event)\"\n></fd-multi-input>\n<!-- <fdp-multi-input\n[placeholder]=\"'EnterSearchCriteria'|bbbTranslate\"\ntype=\"text\"\n[id]=\"id\"\n[dataSource]=\"(dropDownValues$ | async)!!\"\n(selectionChange)=\"onSelectedChange($event)\"\ndisplayKey=\"$Caption\"\n[autofocus]=\"true\"\n\n>\n</fdp-multi-input> -->\n<button\n    *ngIf=\"report\"\n    fd-button\n    [attr.rtl]=\"rtl\"\n    [aria-label]=\"'Advanced' | bbbTranslate\"\n    glyph=\"value-help\"\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\n    (click)=\"onOpenReport()\"\n></button>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"dialogConfig.height !== '100vh'\"\n                        ariaLabel=\"fullscreen\"\n                        [glyph]=\"dialog.data.fullscreen ? 'exitfullscreen' : 'resize'\"\n                        fullscreenDialog\n                        [dialog]=\"dialog\"\n                        [dialogComponent]=\"dialogTpl\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onDismiss()\"></fd-button-bar>\n                </div>\n            </ng-template>\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\n      <button fd-dialog-close-button></button> -->\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-container *ngIf=\"dialog.data.ulvUi as ulvUi\">\n                <bsu-ui-ulv-main-ui [context]=\"ulvUi\" class=\"linear-list-selection\"></bsu-ui-ulv-main-ui>\n            </ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer class=\"linear-footer\">\n            <ng-template fdTemplate=\"footer\">\n                <div\n                    class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\n                    [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\n                >\n                    <h5 fd-title class=\"selected-and-condition-title\">\n                        <ng-container>\n                            <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\n                            ({{ dialog.data.selectedItems?.length || 0 }})\n                        </ng-container>\n                    </h5>\n                    <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\n                        <div class=\"ulv-selection-form-dialog__tokens\">\n                            <fd-toolbar *ngIf=\"dialog.data.selectedItems\">\n                                <!-- Selected items -->\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"onRemoveSelected(item)\"\n                                    *ngFor=\"\n                                        let item of dialog.data.selectedItems;\n                                        index as selectedIndex;\n                                        trackBy: _trackBySelectedFn\n                                    \"\n                                    >{{ item.Text }}\n                                </fd-token>\n                            </fd-toolbar>\n                        </div>\n                        <button\n                            class=\"ulv-selection-form-dialog__tokens-clear\"\n                            fd-button\n                            fdType=\"transparent\"\n                            glyph=\"decline\"\n                            [aria-label]=\"'Clear' | bbbTranslate\"\n                            (click)=\"onClear()\"\n                        ></button>\n                    </div>\n                </div>\n                <div class=\"ulv-selection-form-dialog__actions-row\">\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'OK' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onOk()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        fdType=\"transparent\"\n                        (click)=\"onDismiss()\"\n                    ></button>\n                </div>\n            </ng-template>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: i7$9.MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "dropdownValues", "searchTerm", "inputId", "highlight", "selected", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "autoComplete", "open", "displayAddonButton"], outputs: ["searchTermChange", "selectedChange", "openChange", "allItemsSelectedChange"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "component", type: i9$2.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: UiUlvMainUiComponent, selector: "bsu-ui-ulv-main-ui", inputs: ["context", "isReportPage", "inDialog", "isMultiSelect", "layoutInfo", "fullscreen"] }, { kind: "directive", type: FullscreenDialogDirective, selector: "[fullscreenDialog]", inputs: ["dialog", "dialogComponent"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiLinearListContainerWithButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-linear-list-container-with-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-multi-input\n    [inputId]=\"id\"\n    [class.control-readonly]=\"(readonly$ | async) === true\"\n    [dropdownValues]=\"(dropDownValues$ | async)!!\"\n    [placeholder]=\"'EnterSearchCriteria' | bbbTranslate\"\n    [displayFn]=\"displayFunc\"\n    [showAllButton]=\"false\"\n    [displayAddonButton]=\"false\"\n    [allowNewTokens]=\"false\"\n    [includes]=\"true\"\n    [disabled]=\"(disable$ | async) === true\"\n    (searchTermChange)=\"onSearchTermChange($event)\"\n    (selectedChange)=\"onSelectedChange($event)\"\n></fd-multi-input>\n<!-- <fdp-multi-input\n[placeholder]=\"'EnterSearchCriteria'|bbbTranslate\"\ntype=\"text\"\n[id]=\"id\"\n[dataSource]=\"(dropDownValues$ | async)!!\"\n(selectionChange)=\"onSelectedChange($event)\"\ndisplayKey=\"$Caption\"\n[autofocus]=\"true\"\n\n>\n</fdp-multi-input> -->\n<button\n    *ngIf=\"report\"\n    fd-button\n    [attr.rtl]=\"rtl\"\n    [aria-label]=\"'Advanced' | bbbTranslate\"\n    glyph=\"value-help\"\n    [disabled]=\"(disableOrReadonly$ | async)!!\"\n    (click)=\"onOpenReport()\"\n></button>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl>\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 id=\"fd-dialog-header-3\" fd-title>{{ dialog.data.title }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"dialogConfig.height !== '100vh'\"\n                        ariaLabel=\"fullscreen\"\n                        [glyph]=\"dialog.data.fullscreen ? 'exitfullscreen' : 'resize'\"\n                        fullscreenDialog\n                        [dialog]=\"dialog\"\n                        [dialogComponent]=\"dialogTpl\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onDismiss()\"></fd-button-bar>\n                </div>\n            </ng-template>\n            <!-- <h3 fd-title>{{ dialog.data.title }}</h3>\n      <button fd-dialog-close-button></button> -->\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-container *ngIf=\"dialog.data.ulvUi as ulvUi\">\n                <bsu-ui-ulv-main-ui [context]=\"ulvUi\" class=\"linear-list-selection\"></bsu-ui-ulv-main-ui>\n            </ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer class=\"linear-footer\">\n            <ng-template fdTemplate=\"footer\">\n                <div\n                    class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\n                    [aria-label]=\"'SelectedItemsAndConditions' | bbbTranslate\"\n                >\n                    <h5 fd-title class=\"selected-and-condition-title\">\n                        <ng-container>\n                            <ng-container>{{ 'SelectedItemsAndConditions' | bbbTranslate }} </ng-container>\n                            ({{ dialog.data.selectedItems?.length || 0 }})\n                        </ng-container>\n                    </h5>\n                    <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\n                        <div class=\"ulv-selection-form-dialog__tokens\">\n                            <fd-toolbar *ngIf=\"dialog.data.selectedItems\">\n                                <!-- Selected items -->\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"onRemoveSelected(item)\"\n                                    *ngFor=\"\n                                        let item of dialog.data.selectedItems;\n                                        index as selectedIndex;\n                                        trackBy: _trackBySelectedFn\n                                    \"\n                                    >{{ item.Text }}\n                                </fd-token>\n                            </fd-toolbar>\n                        </div>\n                        <button\n                            class=\"ulv-selection-form-dialog__tokens-clear\"\n                            fd-button\n                            fdType=\"transparent\"\n                            glyph=\"decline\"\n                            [aria-label]=\"'Clear' | bbbTranslate\"\n                            (click)=\"onClear()\"\n                        ></button>\n                    </div>\n                </div>\n                <div class=\"ulv-selection-form-dialog__actions-row\">\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'OK' | bbbTranslate\"\n                        fdType=\"emphasized\"\n                        (click)=\"onOk()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        fdType=\"transparent\"\n                        (click)=\"onDismiss()\"\n                    ></button>\n                </div>\n            </ng-template>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\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"] }]
@@ -7904,7 +8156,7 @@ class HyperlinkComponent extends FieldBaseComponent {
     }
 }
 HyperlinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: HyperlinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-HyperlinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: HyperlinkComponent, selector: "bsu-hyperlink", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"parameters?.routerLink; else button\">\r\n    <a\r\n        [routerLink]=\"['./']\"\r\n        fd-link\r\n        [emphasized]=\"parameters?.Emphasized\"\r\n        [ngStyle]=\"parameters?.Style | removeNewline | convertToStyle\"\r\n    >\r\n        {{\r\n            layoutInfo.UseLayoutItemTextForControl\r\n                ? layoutInfo.Caption\r\n                : context?.Setting?.ControlFieldCaptionTranslated\r\n        }}\r\n    </a>\r\n</ng-container>\r\n<ng-template #button>\r\n    <a\r\n        fd-link\r\n        [emphasized]=\"parameters?.Emphasized\"\r\n        (click)=\"onClick()\"\r\n        [ngStyle]=\"parameters?.Style | removeNewline | convertToStyle\"\r\n        [href]=\"parameters.Link\"\r\n    >\r\n        {{\r\n            layoutInfo.UseLayoutItemTextForControl\r\n                ? layoutInfo.Caption\r\n                : context?.Setting?.ControlFieldCaptionTranslated\r\n        }}\r\n    </a>\r\n</ng-template>\r\n", styles: [":host{cursor:pointer;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$4.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.RemoveNewlinePipe, name: "removeNewline" }, { kind: "pipe", type: i2.ConvertToStylePipe, name: "convertToStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HyperlinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: HyperlinkComponent, selector: "bsu-hyperlink", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"parameters?.routerLink; else button\">\r\n    <a\r\n        [routerLink]=\"['./']\"\r\n        fd-link\r\n        [emphasized]=\"parameters?.Emphasized\"\r\n        [ngStyle]=\"parameters?.Style | removeNewline | convertToStyle\"\r\n    >\r\n        {{\r\n            layoutInfo.UseLayoutItemTextForControl\r\n                ? layoutInfo.Caption\r\n                : context?.Setting?.ControlFieldCaptionTranslated\r\n        }}\r\n    </a>\r\n</ng-container>\r\n<ng-template #button>\r\n    <a\r\n        fd-link\r\n        [emphasized]=\"parameters?.Emphasized\"\r\n        (click)=\"onClick()\"\r\n        [ngStyle]=\"parameters?.Style | removeNewline | convertToStyle\"\r\n        [href]=\"parameters.Link\"\r\n    >\r\n        {{\r\n            layoutInfo.UseLayoutItemTextForControl\r\n                ? layoutInfo.Caption\r\n                : context?.Setting?.ControlFieldCaptionTranslated\r\n        }}\r\n    </a>\r\n</ng-template>\r\n", styles: [":host{cursor:pointer;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$5.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.RemoveNewlinePipe, name: "removeNewline" }, { kind: "pipe", type: i2.ConvertToStylePipe, name: "convertToStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: HyperlinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-hyperlink', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"parameters?.routerLink; else button\">\r\n    <a\r\n        [routerLink]=\"['./']\"\r\n        fd-link\r\n        [emphasized]=\"parameters?.Emphasized\"\r\n        [ngStyle]=\"parameters?.Style | removeNewline | convertToStyle\"\r\n    >\r\n        {{\r\n            layoutInfo.UseLayoutItemTextForControl\r\n                ? layoutInfo.Caption\r\n                : context?.Setting?.ControlFieldCaptionTranslated\r\n        }}\r\n    </a>\r\n</ng-container>\r\n<ng-template #button>\r\n    <a\r\n        fd-link\r\n        [emphasized]=\"parameters?.Emphasized\"\r\n        (click)=\"onClick()\"\r\n        [ngStyle]=\"parameters?.Style | removeNewline | convertToStyle\"\r\n        [href]=\"parameters.Link\"\r\n    >\r\n        {{\r\n            layoutInfo.UseLayoutItemTextForControl\r\n                ? layoutInfo.Caption\r\n                : context?.Setting?.ControlFieldCaptionTranslated\r\n        }}\r\n    </a>\r\n</ng-template>\r\n", styles: [":host{cursor:pointer;display:flex;flex-direction:column}\n"] }]
@@ -8471,10 +8723,10 @@ class UiMoInfoComboViewerComponent extends FieldBaseComponent {
     }
 }
 UiMoInfoComboViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiMoInfoComboViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiMoInfoComboViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiMoInfoComboViewerComponent, selector: "bsu-ui-mo-info-combo-viewer", usesInheritance: true, ngImport: i0, template: "<fd-text [text]=\"value | bbbTranslate\" hyphenation=\"auto\"></fd-text>\r\n<button\r\n    *ngIf=\"(disableOrReadonly$ | async) !== true && !Setting.IsReadOnly && Setting.ViewRelatedFormType !== 'Hide'\"\r\n    fd-button\r\n    [glyph]=\"'edit'\"\r\n    [fdType]=\"'transparent'\"\r\n    (click)=\"onBtnClick()\"\r\n></button>\r\n", styles: [":host{display:flex;height:auto;align-items:center}h5{align-self:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiMoInfoComboViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiMoInfoComboViewerComponent, selector: "bsu-ui-mo-info-combo-viewer", usesInheritance: true, ngImport: i0, template: "<fd-text class=\"bold\" [text]=\"value | bbbTranslate\" hyphenation=\"auto\"></fd-text>\n<button\n    *ngIf=\"(disableOrReadonly$ | async) !== true && !Setting.IsReadOnly && Setting.ViewRelatedFormType !== 'Hide'\"\n    fd-button\n    [glyph]=\"'edit'\"\n    [fdType]=\"'transparent'\"\n    (click)=\"onBtnClick()\"\n></button>\n", styles: [":host{display:flex;height:auto;align-items:center}h5{align-self:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiMoInfoComboViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-mo-info-combo-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-text [text]=\"value | bbbTranslate\" hyphenation=\"auto\"></fd-text>\r\n<button\r\n    *ngIf=\"(disableOrReadonly$ | async) !== true && !Setting.IsReadOnly && Setting.ViewRelatedFormType !== 'Hide'\"\r\n    fd-button\r\n    [glyph]=\"'edit'\"\r\n    [fdType]=\"'transparent'\"\r\n    (click)=\"onBtnClick()\"\r\n></button>\r\n", styles: [":host{display:flex;height:auto;align-items:center}h5{align-self:center}\n"] }]
+            args: [{ selector: 'bsu-ui-mo-info-combo-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-text class=\"bold\" [text]=\"value | bbbTranslate\" hyphenation=\"auto\"></fd-text>\n<button\n    *ngIf=\"(disableOrReadonly$ | async) !== true && !Setting.IsReadOnly && Setting.ViewRelatedFormType !== 'Hide'\"\n    fd-button\n    [glyph]=\"'edit'\"\n    [fdType]=\"'transparent'\"\n    (click)=\"onBtnClick()\"\n></button>\n", styles: [":host{display:flex;height:auto;align-items:center}h5{align-self:center}\n"] }]
         }] });
 
 class LyTabContainerComponent extends LayoutItemBaseComponent {
@@ -9928,7 +10180,7 @@ class UlvPagingComponent extends BaseComponent {
     }
 }
 UlvPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvPagingComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-UlvPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvPagingComponent, selector: "bsu-ulv-paging", inputs: { pagingSetting: "pagingSetting" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "height.px": "this.height" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <ng-container *ngIf=\"config?.Setting?.Data?.Paging?.HasPaging\">\n  <div class=\"icons\">\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage === totalPage - 1 ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"begin\"\n      (click)=\"onEndClick()\"\n    ></button>\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage + 1 >= totalPage ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"navigation-left-arrow\"\n      (click)=\"onNextClick()\"\n    ></button>\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage - 1 < 0 ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"navigation-right-arrow\"\n      (click)=\"onPreviousClick()\"\n    ></button>\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage === 0 ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"begin\"\n      (click)=\"onFirstClick()\"\n    ></button>\n  </div>\n  <div class=\"pagesize\">\n    <label style=\"padding: 0 5px\"\n      >{{ currentPage * pageSize }}-{{ currentPage * pageSize + pageSize }} \u0627\u0632\n      {{ config.Setting.Data.Paging.TotalRows }}</label\n    >\n    <fd-select (valueChange)=\"onPageSizeChange($event)\" [value]=\"pageSize\">\n      <fd-option [value]=\"24\">24</fd-option>\n      <fd-option [value]=\"100\">100</fd-option>\n      <fd-option [value]=\"100\">100</fd-option>\n    </fd-select>\n\n    <label style=\"padding: 0 5px\">{{ ItemsPerPage }}:</label>\n  </div>\n</ng-container> -->\n<ng-container *ngIf=\"pagingSetting\">\n    <fd-pagination\n        dir=\"rtl\"\n        *ngIf=\"pagingSetting && pagingSetting.HasPaging\"\n        [totalItems]=\"pagingSetting.TotalRows\"\n        (pageChangeStart)=\"onPageChange($event)\"\n        [itemsPerPage]=\"pagingSetting.PageSize\"\n        [currentPage]=\"currentPage\"\n        [displayTextTemplate]=\"showingItems\"\n    ></fd-pagination>\n</ng-container>\n<ng-template #showingItems let-showing=\"showing\">\n    <span dir=\"ltr\">\n        {{ 'From' | bbbTranslate }} {{ showing.from }} {{ 'To' | bbbTranslate }} {{ showing.to }} {{ totalPageStr }}\n    </span>\n</ng-template>\n", styles: [":host{align-items:center;display:flex;justify-content:center;flex-direction:row-reverse;width:100%}.icons{display:flex;justify-content:space-between;padding:0 15px}.icons ui5-button{color:var(--sapContent_LabelColor)}.icons ui5-button:hover{background:var(--sapBackgroundColor)!important;border-color:transparent!important}.pagesize{align-items:center;display:flex;justify-content:flex-start;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$6.PaginationComponent, selector: "fd-pagination", inputs: ["id", "mobile", "totalItems", "currentPage", "itemsPerPage", "itemsPerPageTemplate", "itemsPerPageLabel", "itemsPerPageOptions", "displayTotalItems", "displayTextTemplate", "firstLabel", "previousLabel", "nextLabel", "lastLabel", "ariaLabel", "pageLabel", "currentPageAriaLabel", "labelBeforeInputMobile", "labelAfterInputMobile", "inputAriaLabel"], outputs: ["pageChangeStart", "itemsPerPageChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UlvPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvPagingComponent, selector: "bsu-ulv-paging", inputs: { pagingSetting: "pagingSetting" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "height.px": "this.height" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <ng-container *ngIf=\"config?.Setting?.Data?.Paging?.HasPaging\">\n  <div class=\"icons\">\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage === totalPage - 1 ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"begin\"\n      (click)=\"onEndClick()\"\n    ></button>\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage + 1 >= totalPage ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"navigation-left-arrow\"\n      (click)=\"onNextClick()\"\n    ></button>\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage - 1 < 0 ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"navigation-right-arrow\"\n      (click)=\"onPreviousClick()\"\n    ></button>\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage === 0 ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"begin\"\n      (click)=\"onFirstClick()\"\n    ></button>\n  </div>\n  <div class=\"pagesize\">\n    <label style=\"padding: 0 5px\"\n      >{{ currentPage * pageSize }}-{{ currentPage * pageSize + pageSize }} \u0627\u0632\n      {{ config.Setting.Data.Paging.TotalRows }}</label\n    >\n    <fd-select (valueChange)=\"onPageSizeChange($event)\" [value]=\"pageSize\">\n      <fd-option [value]=\"24\">24</fd-option>\n      <fd-option [value]=\"100\">100</fd-option>\n      <fd-option [value]=\"100\">100</fd-option>\n    </fd-select>\n\n    <label style=\"padding: 0 5px\">{{ ItemsPerPage }}:</label>\n  </div>\n</ng-container> -->\n<ng-container *ngIf=\"pagingSetting\">\n    <fd-pagination\n        dir=\"rtl\"\n        *ngIf=\"pagingSetting && pagingSetting.HasPaging\"\n        [totalItems]=\"pagingSetting.TotalRows\"\n        (pageChangeStart)=\"onPageChange($event)\"\n        [itemsPerPage]=\"pagingSetting.PageSize\"\n        [currentPage]=\"currentPage\"\n        [displayTextTemplate]=\"showingItems\"\n    ></fd-pagination>\n</ng-container>\n<ng-template #showingItems let-showing=\"showing\">\n    <span dir=\"ltr\">\n        {{ 'From' | bbbTranslate }} {{ showing.from }} {{ 'To' | bbbTranslate }} {{ showing.to }} {{ totalPageStr }}\n    </span>\n</ng-template>\n", styles: [":host{align-items:center;display:flex;justify-content:center;flex-direction:row-reverse;width:100%}.icons{display:flex;justify-content:space-between;padding:0 15px}.icons ui5-button{color:var(--sapContent_LabelColor)}.icons ui5-button:hover{background:var(--sapBackgroundColor)!important;border-color:transparent!important}.pagesize{align-items:center;display:flex;justify-content:flex-start;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$7.PaginationComponent, selector: "fd-pagination", inputs: ["id", "mobile", "totalItems", "currentPage", "itemsPerPage", "itemsPerPageTemplate", "itemsPerPageLabel", "itemsPerPageOptions", "displayTotalItems", "displayTextTemplate", "firstLabel", "previousLabel", "nextLabel", "lastLabel", "ariaLabel", "pageLabel", "currentPageAriaLabel", "labelBeforeInputMobile", "labelAfterInputMobile", "inputAriaLabel"], outputs: ["pageChangeStart", "itemsPerPageChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvPagingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ulv-paging', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <ng-container *ngIf=\"config?.Setting?.Data?.Paging?.HasPaging\">\n  <div class=\"icons\">\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage === totalPage - 1 ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"begin\"\n      (click)=\"onEndClick()\"\n    ></button>\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage + 1 >= totalPage ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"navigation-left-arrow\"\n      (click)=\"onNextClick()\"\n    ></button>\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage - 1 < 0 ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"navigation-right-arrow\"\n      (click)=\"onPreviousClick()\"\n    ></button>\n    <button\n      fd-button\n      [attr.disabled]=\"currentPage === 0 ? true : null\"\n      fdType=\"transparent\"\n      glyph=\"begin\"\n      (click)=\"onFirstClick()\"\n    ></button>\n  </div>\n  <div class=\"pagesize\">\n    <label style=\"padding: 0 5px\"\n      >{{ currentPage * pageSize }}-{{ currentPage * pageSize + pageSize }} \u0627\u0632\n      {{ config.Setting.Data.Paging.TotalRows }}</label\n    >\n    <fd-select (valueChange)=\"onPageSizeChange($event)\" [value]=\"pageSize\">\n      <fd-option [value]=\"24\">24</fd-option>\n      <fd-option [value]=\"100\">100</fd-option>\n      <fd-option [value]=\"100\">100</fd-option>\n    </fd-select>\n\n    <label style=\"padding: 0 5px\">{{ ItemsPerPage }}:</label>\n  </div>\n</ng-container> -->\n<ng-container *ngIf=\"pagingSetting\">\n    <fd-pagination\n        dir=\"rtl\"\n        *ngIf=\"pagingSetting && pagingSetting.HasPaging\"\n        [totalItems]=\"pagingSetting.TotalRows\"\n        (pageChangeStart)=\"onPageChange($event)\"\n        [itemsPerPage]=\"pagingSetting.PageSize\"\n        [currentPage]=\"currentPage\"\n        [displayTextTemplate]=\"showingItems\"\n    ></fd-pagination>\n</ng-container>\n<ng-template #showingItems let-showing=\"showing\">\n    <span dir=\"ltr\">\n        {{ 'From' | bbbTranslate }} {{ showing.from }} {{ 'To' | bbbTranslate }} {{ showing.to }} {{ totalPageStr }}\n    </span>\n</ng-template>\n", styles: [":host{align-items:center;display:flex;justify-content:center;flex-direction:row-reverse;width:100%}.icons{display:flex;justify-content:space-between;padding:0 15px}.icons ui5-button{color:var(--sapContent_LabelColor)}.icons ui5-button:hover{background:var(--sapBackgroundColor)!important;border-color:transparent!important}.pagesize{align-items:center;display:flex;justify-content:flex-start;flex-direction:row-reverse}\n"] }]
@@ -9979,7 +10231,7 @@ class UlvSelectionComponent extends BaseComponent {
     }
 }
 UlvSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvSelectionComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-UlvSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvSelectionComponent, selector: "bsu-ulv-selection", inputs: { context: "context", config: "config", body: "body" }, viewQueries: [{ propertyName: "dialogTemplateRef", first: true, predicate: ["dialogRef"], descendants: true, read: TemplateRef }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h3 fd-title>{{ data.title }}</h3>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body>\r\n            <ng-container *ngIf=\"data.ulvUi as ulvUi\">\r\n                <bsu-ui-ulv-main-ui [context]=\"ulvUi\"></bsu-ui-ulv-main-ui>\r\n            </ng-container>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <ng-template fdTemplate=\"footer\">\r\n                <div\r\n                    class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\r\n                    aria-label=\"Selected and condition items\"\r\n                    i18n-aria-label=\"@@platformI18nValueHelpDialog.SelectionBarLabel\"\r\n                >\r\n                    <h5 fd-title class=\"selected-and-condition-title\">\r\n                        <ng-container>\r\n                            <ng-container i18n=\"@@platformI18nValueHelpDialog.SelectedAndConditionLabel\"\r\n                                >Selected Items and Conditions\r\n                            </ng-container>\r\n                            ({{ data.selectedItems?.length || 0 }})\r\n                        </ng-container>\r\n                    </h5>\r\n\r\n                    <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\r\n                        <div class=\"ulv-selection-form-dialog__tokens\">\r\n                            <fd-toolbar [shouldOverflow]=\"true\" *ngIf=\"data.selectedItems\">\r\n                                <!-- Selected items -->\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()\"\r\n                                    *ngFor=\"\r\n                                        let item of data.selectedItems;\r\n                                        index as selectedIndex;\r\n                                        trackBy: _trackBySelectedFn\r\n                                    \"\r\n                                    >{{ item.$Caption }}\r\n                                </fd-token>\r\n                            </fd-toolbar>\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                            i18n-aria-label=\"@@platformI18nValueHelpDialog.ClearSelectedAriaLabel\"\r\n                            aria-label=\"clear selected items\"\r\n                            (click)=\"onClear()\"\r\n                        ></button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"ulv-selection-form-dialog__actions-row\">\r\n                    <button\r\n                        fd-button\r\n                        data-succes\r\n                        i18n-label=\"@@platformI18nValueHelpDialog.SuccessButton\"\r\n                        label=\"OK\"\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                        i18n-label=\"@@platformI18nValueHelpDialog.CancelButton\"\r\n                        label=\"Cancel\"\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: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "component", type: i9$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: UiUlvMainUiComponent, selector: "bsu-ui-ulv-main-ui", inputs: ["context", "isReportPage", "inDialog", "isMultiSelect", "layoutInfo", "fullscreen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+UlvSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UlvSelectionComponent, selector: "bsu-ulv-selection", inputs: { context: "context", config: "config", body: "body" }, viewQueries: [{ propertyName: "dialogTemplateRef", first: true, predicate: ["dialogRef"], descendants: true, read: TemplateRef }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h3 fd-title>{{ data.title }}</h3>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body>\r\n            <ng-container *ngIf=\"data.ulvUi as ulvUi\">\r\n                <bsu-ui-ulv-main-ui [context]=\"ulvUi\"></bsu-ui-ulv-main-ui>\r\n            </ng-container>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <ng-template fdTemplate=\"footer\">\r\n                <div\r\n                    class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\r\n                    aria-label=\"Selected and condition items\"\r\n                    i18n-aria-label=\"@@platformI18nValueHelpDialog.SelectionBarLabel\"\r\n                >\r\n                    <h5 fd-title class=\"selected-and-condition-title\">\r\n                        <ng-container>\r\n                            <ng-container i18n=\"@@platformI18nValueHelpDialog.SelectedAndConditionLabel\"\r\n                                >Selected Items and Conditions\r\n                            </ng-container>\r\n                            ({{ data.selectedItems?.length || 0 }})\r\n                        </ng-container>\r\n                    </h5>\r\n\r\n                    <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\r\n                        <div class=\"ulv-selection-form-dialog__tokens\">\r\n                            <fd-toolbar [shouldOverflow]=\"true\" *ngIf=\"data.selectedItems\">\r\n                                <!-- Selected items -->\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()\"\r\n                                    *ngFor=\"\r\n                                        let item of data.selectedItems;\r\n                                        index as selectedIndex;\r\n                                        trackBy: _trackBySelectedFn\r\n                                    \"\r\n                                    >{{ item.$Caption }}\r\n                                </fd-token>\r\n                            </fd-toolbar>\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                            i18n-aria-label=\"@@platformI18nValueHelpDialog.ClearSelectedAriaLabel\"\r\n                            aria-label=\"clear selected items\"\r\n                            (click)=\"onClear()\"\r\n                        ></button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"ulv-selection-form-dialog__actions-row\">\r\n                    <button\r\n                        fd-button\r\n                        data-succes\r\n                        i18n-label=\"@@platformI18nValueHelpDialog.SuccessButton\"\r\n                        label=\"OK\"\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                        i18n-label=\"@@platformI18nValueHelpDialog.CancelButton\"\r\n                        label=\"Cancel\"\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: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "directive", type: i7$1.ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: ["fdOverflowPriority"] }, { kind: "component", type: i9$2.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: UiUlvMainUiComponent, selector: "bsu-ui-ulv-main-ui", inputs: ["context", "isReportPage", "inDialog", "isMultiSelect", "layoutInfo", "fullscreen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UlvSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ulv-selection', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\r\n        <fd-dialog-header>\r\n            <h3 fd-title>{{ data.title }}</h3>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body>\r\n            <ng-container *ngIf=\"data.ulvUi as ulvUi\">\r\n                <bsu-ui-ulv-main-ui [context]=\"ulvUi\"></bsu-ui-ulv-main-ui>\r\n            </ng-container>\r\n        </fd-dialog-body>\r\n\r\n        <fd-dialog-footer>\r\n            <ng-template fdTemplate=\"footer\">\r\n                <div\r\n                    class=\"ulv-selection-form-dialog__row ulv-selection-form-dialog__selection-row\"\r\n                    aria-label=\"Selected and condition items\"\r\n                    i18n-aria-label=\"@@platformI18nValueHelpDialog.SelectionBarLabel\"\r\n                >\r\n                    <h5 fd-title class=\"selected-and-condition-title\">\r\n                        <ng-container>\r\n                            <ng-container i18n=\"@@platformI18nValueHelpDialog.SelectedAndConditionLabel\"\r\n                                >Selected Items and Conditions\r\n                            </ng-container>\r\n                            ({{ data.selectedItems?.length || 0 }})\r\n                        </ng-container>\r\n                    </h5>\r\n\r\n                    <div class=\"ulv-selection-form-dialog__tokens-wrapper\">\r\n                        <div class=\"ulv-selection-form-dialog__tokens\">\r\n                            <fd-toolbar [shouldOverflow]=\"true\" *ngIf=\"data.selectedItems\">\r\n                                <!-- Selected items -->\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()\"\r\n                                    *ngFor=\"\r\n                                        let item of data.selectedItems;\r\n                                        index as selectedIndex;\r\n                                        trackBy: _trackBySelectedFn\r\n                                    \"\r\n                                    >{{ item.$Caption }}\r\n                                </fd-token>\r\n                            </fd-toolbar>\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                            i18n-aria-label=\"@@platformI18nValueHelpDialog.ClearSelectedAriaLabel\"\r\n                            aria-label=\"clear selected items\"\r\n                            (click)=\"onClear()\"\r\n                        ></button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"ulv-selection-form-dialog__actions-row\">\r\n                    <button\r\n                        fd-button\r\n                        data-succes\r\n                        i18n-label=\"@@platformI18nValueHelpDialog.SuccessButton\"\r\n                        label=\"OK\"\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                        i18n-label=\"@@platformI18nValueHelpDialog.CancelButton\"\r\n                        label=\"Cancel\"\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" }]
@@ -10552,10 +10804,10 @@ class UiMoInfoUlvComboComponent extends FieldBaseComponent {
     }
 }
 UiMoInfoUlvComboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiMoInfoUlvComboComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiMoInfoUlvComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiMoInfoUlvComboComponent, selector: "bsu-ui-mo-info-ulv-combo", inputs: { ulvAdapter: "ulvAdapter", Control: "Control", UlvUi: "UlvUi", UlvMainCtrlr: "UlvMainCtrlr", IsExpanded: "IsExpanded", Collapse: "Collapse", Expand: "Expand", on: "on", Focus: "Focus", SetUlvAdapter: "SetUlvAdapter", IsUiCreated: "IsUiCreated", Mask: "Mask", hide: "hide", show: "show", Unmask: "Unmask", getRawValue: "getRawValue" }, host: { listeners: { "keydown": "onKeyDown($event)", "keydown.alt": "onAlt($event)" } }, viewQueries: [{ propertyName: "fdComboRef", first: true, predicate: ComboboxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"\n        context._showPopup || context._showDropDown === false ? inputTemplate : comboTemplate;\n        context: {\n            $implicit:\n                (loading$ | async) === true\n                | moInfoUlvMoList\n                    : isDataLoadedFirstTime\n                    : ulvAdapter?.Setting?.Data?.MoDataList\n                    : UlvUi?.Setting?.Data?.MoDataList\n                    : ulvAdapter?.Setting?.Data?.Paging\n                    : UlvUi?.Setting?.Data?.Paging,\n            deviceSize: deviceSize$ | async,\n            disableOrReadonly: disableOrReadonly$ | async,\n            disable: disable$ | async,\n            readonly: readonly$ | async\n        }\n    \"\n>\n</ng-container>\n<ng-template\n    #inputTemplate\n    let-deviceSize=\"deviceSize\"\n    let-disableOrReadonly=\"disableOrReadonly\"\n    let-disable=\"disable\"\n    let-readonly=\"readonly\"\n>\n    <div style=\"display: flex\" class=\"fd-input-group\">\n        <input\n            fd-input-group-input\n            fd-form-control\n            #inputRef\n            [placeholder]=\"Setting.NullText || ''\"\n            [attr.readonly]=\"true\"\n            [attr.disabled]=\"disable === true ? true : null\"\n            [value]=\"!value ? '' : (value | bbbTranslate)\"\n            [id]=\"id\"\n            [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\n            (input)=\"onValueChange($event)\"\n        />\n        <span fd-input-group-addon *ngIf=\"hasValue && disableOrReadonly !== true\" class=\"fd-input-group__addon--button\">\n            <button fd-button fdType=\"transparent\" glyph=\"decline\" (click)=\"onClear()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"!hasValue && disableOrReadonly !== true && Setting.ShowNewButton\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"add\" (click)=\"onNew()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"hasValue && disableOrReadonly !== true && Setting.ViewRelatedFormType === 'Show'\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"edit\" (click)=\"onEdit()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"hasValue && disableOrReadonly !== true && Setting.ViewRelatedFormType === 'ShowReadOnly'\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"show\" (click)=\"onEdit()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"context._showPopup && !value && disableOrReadonly !== true\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"search\" (click)=\"onSearch()\"></button>\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #comboTemplate\n    let-moDataList\n    let-deviceSize=\"deviceSize\"\n    let-disableOrReadonly=\"disableOrReadonly\"\n    let-disable=\"disable\"\n    let-readonly=\"readonly\"\n>\n    <div class=\"simple-combo-wrapper\">\n        <fd-combobox\n            #fdCombobox\n            class=\"combo-mo-ulv\"\n            [comboboxId]=\"comboboxId\"\n            [class.has-report]=\"hasReport\"\n            [class.has-Value]=\"hasValue\"\n            [placeholder]=\"''\"\n            [mobile]=\"deviceSize === 's'\"\n            [mobileConfig]=\"mobileConfig\"\n            [fillOnSelect]=\"true\"\n            [readOnly]=\"readonly === true ? true : false\"\n            [disabled]=\"disable === true ? true : false\"\n            [dropdownValues]=\"moDataList\"\n            [filterFn]=\"customFilter\"\n            [openOnKeyboardEvent]=\"true\"\n            [byline]=\"allColumns.length > 0\"\n            [itemTemplate]=\"itemTemplate\"\n            [displayFn]=\"displayFunc\"\n            [showDropdownButton]=\"disableOrReadonly !== true\"\n            (itemClicked)=\"onItemClick($event, moDataList)\"\n            (inputTextChange)=\"onInputChange($event)\"\n            (openChange)=\"onOpenChange(fdCombobox, $event)\"\n        >\n        </fd-combobox>\n        <fdp-button\n            *ngIf=\"hasValue && disableOrReadonly !== true\"\n            glyph=\"decline\"\n            buttonType=\"transparent\"\n            class=\"combo-popup-btn\"\n            (click)=\"onClear()\"\n        ></fdp-button>\n\n        <fdp-button\n            *ngIf=\"hasReport && disableOrReadonly !== true\"\n            glyph=\"search\"\n            buttonType=\"transparent\"\n            class=\"combo-popup-btn\"\n            (click)=\"onSearch()\"\n        ></fdp-button>\n    </div>\n    <ng-template #itemTemplate let-item>\n        <div fd-list-content *ngIf=\"item.$isLoading; else itemWrapper\" style=\"width: 100%; height: 20px\">\n            <bsu-mask [size]=\"'s'\" [top]=\"'10px'\"></bsu-mask>\n        </div>\n        <ng-template #itemWrapper>\n            <ng-container *ngIf=\"item.$LoadMore; else showItem\">\n                <!-- <bsu-ulv-paging\n                    (click)=\"onPagingClick($event)\"\n                    (pageChange)=\"onPageChange($event)\"\n                    [pagingSetting]=\"ulvAdapter.Setting.Data.Paging\"\n                >\n                </bsu-ulv-paging> -->\n                <button\n                    style=\"width: 100%\"\n                    *ngIf=\"ulvAdapter.Setting.Data.Paging.Page + 1 < ulvAdapter.Setting.Data.Paging.TotalPages\"\n                    fd-button\n                    (click)=\"onPageChange2(ulvAdapter.Setting.Data.Paging, $event)\"\n                    [label]=\"'More' | bbbTranslate\"\n                ></button>\n            </ng-container>\n        </ng-template>\n        <ng-template #showItem>\n            <ng-container *ngIf=\"allColumns?.length && !item.isEmpty; else captionTemplate\">\n                <div *ngIf=\"!item.$__IsLast\" class=\"moinfoulv devider\"></div>\n                <span fd-list-thumbnail *ngIf=\"item.$Icon\"><fd-icon [glyph]=\"item.$Icon\"></fd-icon></span>\n                <div fd-list-content class=\"moinfoulv hasColumns\">\n                    <div fd-list-title class=\"title\">{{ allColumns[0].Alias | rval: item:allColumns:true }}</div>\n                    <div fd-list-byline class=\"byline\" *ngIf=\"allColumns[1]\">\n                        {{ allColumns[1].Alias | rval: item:allColumns:true }}\n                    </div>\n                    <div style=\"display: flex; column-gap: 8px; flex-wrap: wrap\">\n                        <ng-container *ngFor=\"let column of allColumns; let index = index\">\n                            <ng-container *ngIf=\"index > 1\">\n                                <ng-container *ngIf=\"column.Alias | rval: item:allColumns:true as value\">\n                                    <span> {{ column.Alias }}:{{ value }}</span>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-template #captionTemplate>\n                <span fd-list-title>{{\n                    item.isEmpty ? ('NoData' | bbbTranslate) : (item.$MoCaption || item.$Caption | bbbTranslate)\n                }}</span>\n            </ng-template>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [":host{display:block}.combo-mo-ulv{width:100%}.combo-mo-ulv ::ng-deep .fd-popover-custom{width:100%}.fd-input-group>.fd-input-group__input{background-color:transparent!important}.simple-combo-wrapper{display:flex;align-items:center;position:relative}.simple-combo-wrapper ::ng-deep .combo-mo-ulv[class*=has-] .fd-input-group{border-left:none;border-bottom-left-radius:unset;border-top-left-radius:unset}.simple-combo-wrapper ::ng-deep .combo-popup-btn{background-color:var(--sapField_Background);border-top:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-bottom:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.simple-combo-wrapper ::ng-deep .combo-popup-btn:first-child{margin-right:-1px}.simple-combo-wrapper ::ng-deep .combo-popup-btn:last-child{border-left:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.combo-wrapper{display:flex;align-items:center;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_BorderColor, #89919a);border-radius:var(--sapField_BorderCornerRadius, .125rem)}::ng-deep .combo-popup-btn{border:none;background:transparent}::ng-deep .combo-popup-btn button{border-color:transparent!important;border:none}::ng-deep .fd-combobox-count-list-results{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2$6.ComboboxComponent, selector: "fd-combobox", inputs: ["comboboxId", "inputId", "ariaLabel", "ariaLabelledBy", "required", "dropdownValues", "filterFn", "disabled", "placeholder", "isSearch", "glyph", "showClearButton", "triggers", "closeOnOutsideClick", "openOnKeyboardEvent", "state", "itemTemplate", "groupFn", "maxHeight", "searchFn", "highlighting", "closeOnSelect", "fillOnSelect", "autoComplete", "fillControlMode", "communicateByObject", "displayFn", "buttonFocusable", "readOnly", "mobile", "mobileConfig", "showDropdownButton", "includes", "title", "byline"], outputs: ["itemClicked", "openChange", "inputTextChange"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i2$1.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i6$3.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "directive", type: i6$3.InputGroupAddOnDirective, selector: "[fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i6$1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i6$1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: i13.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.MoInfoUlvMoListPipe, name: "moInfoUlvMoList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiMoInfoUlvComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiMoInfoUlvComboComponent, selector: "bsu-ui-mo-info-ulv-combo", inputs: { ulvAdapter: "ulvAdapter", Control: "Control", UlvUi: "UlvUi", UlvMainCtrlr: "UlvMainCtrlr", IsExpanded: "IsExpanded", Collapse: "Collapse", Expand: "Expand", on: "on", Focus: "Focus", SetUlvAdapter: "SetUlvAdapter", IsUiCreated: "IsUiCreated", Mask: "Mask", hide: "hide", show: "show", Unmask: "Unmask", getRawValue: "getRawValue" }, host: { listeners: { "keydown": "onKeyDown($event)", "keydown.alt": "onAlt($event)" } }, viewQueries: [{ propertyName: "fdComboRef", first: true, predicate: ComboboxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"\n        context._showPopup || context._showDropDown === false ? inputTemplate : comboTemplate;\n        context: {\n            $implicit:\n                (loading$ | async) === true\n                | moInfoUlvMoList\n                    : isDataLoadedFirstTime\n                    : ulvAdapter?.Setting?.Data?.MoDataList\n                    : UlvUi?.Setting?.Data?.MoDataList\n                    : ulvAdapter?.Setting?.Data?.Paging\n                    : UlvUi?.Setting?.Data?.Paging,\n            deviceSize: deviceSize$ | async,\n            disableOrReadonly: disableOrReadonly$ | async,\n            disable: disable$ | async,\n            readonly: readonly$ | async\n        }\n    \"\n>\n</ng-container>\n<ng-template\n    #inputTemplate\n    let-deviceSize=\"deviceSize\"\n    let-disableOrReadonly=\"disableOrReadonly\"\n    let-disable=\"disable\"\n    let-readonly=\"readonly\"\n>\n    <div style=\"display: flex\" class=\"fd-input-group\">\n        <input\n            fd-input-group-input\n            fd-form-control\n            #inputRef\n            [placeholder]=\"Setting.NullText || ''\"\n            [attr.readonly]=\"true\"\n            [attr.disabled]=\"disable === true ? true : null\"\n            [value]=\"!value ? '' : (value | bbbTranslate)\"\n            [id]=\"id\"\n            [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\n            (input)=\"onValueChange($event)\"\n        />\n        <span fd-input-group-addon *ngIf=\"hasValue && disableOrReadonly !== true\" class=\"fd-input-group__addon--button\">\n            <button fd-button fdType=\"transparent\" glyph=\"decline\" (click)=\"onClear()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"!hasValue && disableOrReadonly !== true && Setting.ShowNewButton\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"add\" (click)=\"onNew()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"hasValue && disableOrReadonly !== true && Setting.ViewRelatedFormType === 'Show'\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"edit\" (click)=\"onEdit()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"hasValue && disableOrReadonly !== true && Setting.ViewRelatedFormType === 'ShowReadOnly'\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"show\" (click)=\"onEdit()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"context._showPopup && !value && disableOrReadonly !== true\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"search\" (click)=\"onSearch()\"></button>\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #comboTemplate\n    let-moDataList\n    let-deviceSize=\"deviceSize\"\n    let-disableOrReadonly=\"disableOrReadonly\"\n    let-disable=\"disable\"\n    let-readonly=\"readonly\"\n>\n    <div class=\"simple-combo-wrapper\">\n        <fd-combobox\n            #fdCombobox\n            class=\"combo-mo-ulv\"\n            [comboboxId]=\"comboboxId\"\n            [class.has-report]=\"hasReport\"\n            [class.has-Value]=\"hasValue\"\n            [placeholder]=\"'Select' | bbbTranslate\"\n            [mobile]=\"deviceSize === 's'\"\n            [mobileConfig]=\"mobileConfig\"\n            [fillOnSelect]=\"true\"\n            [readOnly]=\"readonly === true ? true : false\"\n            [disabled]=\"disable === true ? true : false\"\n            [dropdownValues]=\"moDataList\"\n            [filterFn]=\"customFilter\"\n            [openOnKeyboardEvent]=\"true\"\n            [byline]=\"allColumns.length > 0\"\n            [itemTemplate]=\"itemTemplate\"\n            [displayFn]=\"displayFunc\"\n            [showDropdownButton]=\"disableOrReadonly !== true\"\n            (itemClicked)=\"onItemClick($event, moDataList)\"\n            (inputTextChange)=\"onInputChange($event)\"\n            (openChange)=\"onOpenChange(fdCombobox, $event)\"\n        >\n        </fd-combobox>\n        <fdp-button\n            *ngIf=\"hasValue && disableOrReadonly !== true\"\n            glyph=\"decline\"\n            buttonType=\"transparent\"\n            class=\"combo-popup-btn\"\n            (click)=\"onClear()\"\n        ></fdp-button>\n\n        <fdp-button\n            *ngIf=\"hasReport && disableOrReadonly !== true\"\n            glyph=\"search\"\n            buttonType=\"transparent\"\n            class=\"combo-popup-btn\"\n            (click)=\"onSearch()\"\n        ></fdp-button>\n    </div>\n    <ng-template #itemTemplate let-item>\n        <div fd-list-content *ngIf=\"item.$isLoading; else itemWrapper\" style=\"width: 100%; height: 20px\">\n            <bsu-mask [size]=\"'s'\" [top]=\"'10px'\"></bsu-mask>\n        </div>\n        <ng-template #itemWrapper>\n            <ng-container *ngIf=\"item.$LoadMore; else showItem\">\n                <!-- <bsu-ulv-paging\n                    (click)=\"onPagingClick($event)\"\n                    (pageChange)=\"onPageChange($event)\"\n                    [pagingSetting]=\"ulvAdapter.Setting.Data.Paging\"\n                >\n                </bsu-ulv-paging> -->\n                <button\n                    style=\"width: 100%\"\n                    *ngIf=\"ulvAdapter.Setting.Data.Paging.Page + 1 < ulvAdapter.Setting.Data.Paging.TotalPages\"\n                    fd-button\n                    (click)=\"onPageChange2(ulvAdapter.Setting.Data.Paging, $event)\"\n                    [label]=\"'More' | bbbTranslate\"\n                ></button>\n            </ng-container>\n        </ng-template>\n        <ng-template #showItem>\n            <ng-container *ngIf=\"allColumns?.length && !item.isEmpty; else captionTemplate\">\n                <div *ngIf=\"!item.$__IsLast\" class=\"moinfoulv devider\"></div>\n                <span fd-list-thumbnail *ngIf=\"item.$Icon\"><fd-icon [glyph]=\"item.$Icon\"></fd-icon></span>\n                <div fd-list-content class=\"moinfoulv hasColumns\">\n                    <div fd-list-title class=\"title\">{{ allColumns[0].Alias | rval: item:allColumns:true }}</div>\n                    <div fd-list-byline class=\"byline\" *ngIf=\"allColumns[1]\">\n                        {{ allColumns[1].Alias | rval: item:allColumns:true }}\n                    </div>\n                    <div style=\"display: flex; column-gap: 8px; flex-wrap: wrap\">\n                        <ng-container *ngFor=\"let column of allColumns; let index = index\">\n                            <ng-container *ngIf=\"index > 1\">\n                                <ng-container *ngIf=\"column.Alias | rval: item:allColumns:true as value\">\n                                    <span> {{ column.Alias }}:{{ value }}</span>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-template #captionTemplate>\n                <span fd-list-title>{{\n                    item.isEmpty ? ('NoData' | bbbTranslate) : (item.$MoCaption || item.$Caption | bbbTranslate)\n                }}</span>\n            </ng-template>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [":host{display:block}.combo-mo-ulv{width:100%}.combo-mo-ulv ::ng-deep .fd-popover-custom{width:100%}.fd-input-group>.fd-input-group__input{background-color:transparent!important}.simple-combo-wrapper{display:flex;align-items:center;position:relative}.simple-combo-wrapper ::ng-deep .combo-mo-ulv[class*=has-] .fd-input-group{border-left:none;border-bottom-left-radius:unset;border-top-left-radius:unset}.simple-combo-wrapper ::ng-deep .combo-popup-btn{background-color:var(--sapField_Background);border-top:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-bottom:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.simple-combo-wrapper ::ng-deep .combo-popup-btn:first-child{margin-right:-1px}.simple-combo-wrapper ::ng-deep .combo-popup-btn:last-child{border-left:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.combo-wrapper{display:flex;align-items:center;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_BorderColor, #89919a);border-radius:var(--sapField_BorderCornerRadius, .125rem)}::ng-deep .combo-popup-btn{border:none;background:transparent}::ng-deep .combo-popup-btn button{border-color:transparent!important;border:none}::ng-deep .fd-combobox-count-list-results{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2$6.ComboboxComponent, selector: "fd-combobox", inputs: ["comboboxId", "inputId", "ariaLabel", "ariaLabelledBy", "required", "dropdownValues", "filterFn", "disabled", "placeholder", "isSearch", "glyph", "showClearButton", "triggers", "closeOnOutsideClick", "openOnKeyboardEvent", "state", "itemTemplate", "groupFn", "maxHeight", "searchFn", "highlighting", "closeOnSelect", "fillOnSelect", "autoComplete", "fillControlMode", "communicateByObject", "displayFn", "buttonFocusable", "readOnly", "mobile", "mobileConfig", "showDropdownButton", "includes", "title", "byline"], outputs: ["itemClicked", "openChange", "inputTextChange"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i2$1.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i6$3.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "directive", type: i6$3.InputGroupAddOnDirective, selector: "[fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i6$1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i6$1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: i13.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.MoInfoUlvMoListPipe, name: "moInfoUlvMoList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiMoInfoUlvComboComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-mo-info-ulv-combo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngTemplateOutlet=\"\n        context._showPopup || context._showDropDown === false ? inputTemplate : comboTemplate;\n        context: {\n            $implicit:\n                (loading$ | async) === true\n                | moInfoUlvMoList\n                    : isDataLoadedFirstTime\n                    : ulvAdapter?.Setting?.Data?.MoDataList\n                    : UlvUi?.Setting?.Data?.MoDataList\n                    : ulvAdapter?.Setting?.Data?.Paging\n                    : UlvUi?.Setting?.Data?.Paging,\n            deviceSize: deviceSize$ | async,\n            disableOrReadonly: disableOrReadonly$ | async,\n            disable: disable$ | async,\n            readonly: readonly$ | async\n        }\n    \"\n>\n</ng-container>\n<ng-template\n    #inputTemplate\n    let-deviceSize=\"deviceSize\"\n    let-disableOrReadonly=\"disableOrReadonly\"\n    let-disable=\"disable\"\n    let-readonly=\"readonly\"\n>\n    <div style=\"display: flex\" class=\"fd-input-group\">\n        <input\n            fd-input-group-input\n            fd-form-control\n            #inputRef\n            [placeholder]=\"Setting.NullText || ''\"\n            [attr.readonly]=\"true\"\n            [attr.disabled]=\"disable === true ? true : null\"\n            [value]=\"!value ? '' : (value | bbbTranslate)\"\n            [id]=\"id\"\n            [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\n            (input)=\"onValueChange($event)\"\n        />\n        <span fd-input-group-addon *ngIf=\"hasValue && disableOrReadonly !== true\" class=\"fd-input-group__addon--button\">\n            <button fd-button fdType=\"transparent\" glyph=\"decline\" (click)=\"onClear()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"!hasValue && disableOrReadonly !== true && Setting.ShowNewButton\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"add\" (click)=\"onNew()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"hasValue && disableOrReadonly !== true && Setting.ViewRelatedFormType === 'Show'\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"edit\" (click)=\"onEdit()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"hasValue && disableOrReadonly !== true && Setting.ViewRelatedFormType === 'ShowReadOnly'\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"show\" (click)=\"onEdit()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"context._showPopup && !value && disableOrReadonly !== true\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"search\" (click)=\"onSearch()\"></button>\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #comboTemplate\n    let-moDataList\n    let-deviceSize=\"deviceSize\"\n    let-disableOrReadonly=\"disableOrReadonly\"\n    let-disable=\"disable\"\n    let-readonly=\"readonly\"\n>\n    <div class=\"simple-combo-wrapper\">\n        <fd-combobox\n            #fdCombobox\n            class=\"combo-mo-ulv\"\n            [comboboxId]=\"comboboxId\"\n            [class.has-report]=\"hasReport\"\n            [class.has-Value]=\"hasValue\"\n            [placeholder]=\"''\"\n            [mobile]=\"deviceSize === 's'\"\n            [mobileConfig]=\"mobileConfig\"\n            [fillOnSelect]=\"true\"\n            [readOnly]=\"readonly === true ? true : false\"\n            [disabled]=\"disable === true ? true : false\"\n            [dropdownValues]=\"moDataList\"\n            [filterFn]=\"customFilter\"\n            [openOnKeyboardEvent]=\"true\"\n            [byline]=\"allColumns.length > 0\"\n            [itemTemplate]=\"itemTemplate\"\n            [displayFn]=\"displayFunc\"\n            [showDropdownButton]=\"disableOrReadonly !== true\"\n            (itemClicked)=\"onItemClick($event, moDataList)\"\n            (inputTextChange)=\"onInputChange($event)\"\n            (openChange)=\"onOpenChange(fdCombobox, $event)\"\n        >\n        </fd-combobox>\n        <fdp-button\n            *ngIf=\"hasValue && disableOrReadonly !== true\"\n            glyph=\"decline\"\n            buttonType=\"transparent\"\n            class=\"combo-popup-btn\"\n            (click)=\"onClear()\"\n        ></fdp-button>\n\n        <fdp-button\n            *ngIf=\"hasReport && disableOrReadonly !== true\"\n            glyph=\"search\"\n            buttonType=\"transparent\"\n            class=\"combo-popup-btn\"\n            (click)=\"onSearch()\"\n        ></fdp-button>\n    </div>\n    <ng-template #itemTemplate let-item>\n        <div fd-list-content *ngIf=\"item.$isLoading; else itemWrapper\" style=\"width: 100%; height: 20px\">\n            <bsu-mask [size]=\"'s'\" [top]=\"'10px'\"></bsu-mask>\n        </div>\n        <ng-template #itemWrapper>\n            <ng-container *ngIf=\"item.$LoadMore; else showItem\">\n                <!-- <bsu-ulv-paging\n                    (click)=\"onPagingClick($event)\"\n                    (pageChange)=\"onPageChange($event)\"\n                    [pagingSetting]=\"ulvAdapter.Setting.Data.Paging\"\n                >\n                </bsu-ulv-paging> -->\n                <button\n                    style=\"width: 100%\"\n                    *ngIf=\"ulvAdapter.Setting.Data.Paging.Page + 1 < ulvAdapter.Setting.Data.Paging.TotalPages\"\n                    fd-button\n                    (click)=\"onPageChange2(ulvAdapter.Setting.Data.Paging, $event)\"\n                    [label]=\"'More' | bbbTranslate\"\n                ></button>\n            </ng-container>\n        </ng-template>\n        <ng-template #showItem>\n            <ng-container *ngIf=\"allColumns?.length && !item.isEmpty; else captionTemplate\">\n                <div *ngIf=\"!item.$__IsLast\" class=\"moinfoulv devider\"></div>\n                <span fd-list-thumbnail *ngIf=\"item.$Icon\"><fd-icon [glyph]=\"item.$Icon\"></fd-icon></span>\n                <div fd-list-content class=\"moinfoulv hasColumns\">\n                    <div fd-list-title class=\"title\">{{ allColumns[0].Alias | rval: item:allColumns:true }}</div>\n                    <div fd-list-byline class=\"byline\" *ngIf=\"allColumns[1]\">\n                        {{ allColumns[1].Alias | rval: item:allColumns:true }}\n                    </div>\n                    <div style=\"display: flex; column-gap: 8px; flex-wrap: wrap\">\n                        <ng-container *ngFor=\"let column of allColumns; let index = index\">\n                            <ng-container *ngIf=\"index > 1\">\n                                <ng-container *ngIf=\"column.Alias | rval: item:allColumns:true as value\">\n                                    <span> {{ column.Alias }}:{{ value }}</span>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-template #captionTemplate>\n                <span fd-list-title>{{\n                    item.isEmpty ? ('NoData' | bbbTranslate) : (item.$MoCaption || item.$Caption | bbbTranslate)\n                }}</span>\n            </ng-template>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [":host{display:block}.combo-mo-ulv{width:100%}.combo-mo-ulv ::ng-deep .fd-popover-custom{width:100%}.fd-input-group>.fd-input-group__input{background-color:transparent!important}.simple-combo-wrapper{display:flex;align-items:center;position:relative}.simple-combo-wrapper ::ng-deep .combo-mo-ulv[class*=has-] .fd-input-group{border-left:none;border-bottom-left-radius:unset;border-top-left-radius:unset}.simple-combo-wrapper ::ng-deep .combo-popup-btn{background-color:var(--sapField_Background);border-top:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-bottom:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.simple-combo-wrapper ::ng-deep .combo-popup-btn:first-child{margin-right:-1px}.simple-combo-wrapper ::ng-deep .combo-popup-btn:last-child{border-left:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.combo-wrapper{display:flex;align-items:center;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_BorderColor, #89919a);border-radius:var(--sapField_BorderCornerRadius, .125rem)}::ng-deep .combo-popup-btn{border:none;background:transparent}::ng-deep .combo-popup-btn button{border-color:transparent!important;border:none}::ng-deep .fd-combobox-count-list-results{display:none}\n"] }]
+            args: [{ selector: 'bsu-ui-mo-info-ulv-combo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngTemplateOutlet=\"\n        context._showPopup || context._showDropDown === false ? inputTemplate : comboTemplate;\n        context: {\n            $implicit:\n                (loading$ | async) === true\n                | moInfoUlvMoList\n                    : isDataLoadedFirstTime\n                    : ulvAdapter?.Setting?.Data?.MoDataList\n                    : UlvUi?.Setting?.Data?.MoDataList\n                    : ulvAdapter?.Setting?.Data?.Paging\n                    : UlvUi?.Setting?.Data?.Paging,\n            deviceSize: deviceSize$ | async,\n            disableOrReadonly: disableOrReadonly$ | async,\n            disable: disable$ | async,\n            readonly: readonly$ | async\n        }\n    \"\n>\n</ng-container>\n<ng-template\n    #inputTemplate\n    let-deviceSize=\"deviceSize\"\n    let-disableOrReadonly=\"disableOrReadonly\"\n    let-disable=\"disable\"\n    let-readonly=\"readonly\"\n>\n    <div style=\"display: flex\" class=\"fd-input-group\">\n        <input\n            fd-input-group-input\n            fd-form-control\n            #inputRef\n            [placeholder]=\"Setting.NullText || ''\"\n            [attr.readonly]=\"true\"\n            [attr.disabled]=\"disable === true ? true : null\"\n            [value]=\"!value ? '' : (value | bbbTranslate)\"\n            [id]=\"id\"\n            [style.direction]=\"Setting.IsLtr === true ? 'ltr' : null\"\n            (input)=\"onValueChange($event)\"\n        />\n        <span fd-input-group-addon *ngIf=\"hasValue && disableOrReadonly !== true\" class=\"fd-input-group__addon--button\">\n            <button fd-button fdType=\"transparent\" glyph=\"decline\" (click)=\"onClear()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"!hasValue && disableOrReadonly !== true && Setting.ShowNewButton\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"add\" (click)=\"onNew()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"hasValue && disableOrReadonly !== true && Setting.ViewRelatedFormType === 'Show'\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"edit\" (click)=\"onEdit()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"hasValue && disableOrReadonly !== true && Setting.ViewRelatedFormType === 'ShowReadOnly'\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"show\" (click)=\"onEdit()\"></button>\n        </span>\n        <span\n            fd-input-group-addon\n            *ngIf=\"context._showPopup && !value && disableOrReadonly !== true\"\n            class=\"fd-input-group__addon--button\"\n        >\n            <button fd-button fdType=\"transparent\" glyph=\"search\" (click)=\"onSearch()\"></button>\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #comboTemplate\n    let-moDataList\n    let-deviceSize=\"deviceSize\"\n    let-disableOrReadonly=\"disableOrReadonly\"\n    let-disable=\"disable\"\n    let-readonly=\"readonly\"\n>\n    <div class=\"simple-combo-wrapper\">\n        <fd-combobox\n            #fdCombobox\n            class=\"combo-mo-ulv\"\n            [comboboxId]=\"comboboxId\"\n            [class.has-report]=\"hasReport\"\n            [class.has-Value]=\"hasValue\"\n            [placeholder]=\"'Select' | bbbTranslate\"\n            [mobile]=\"deviceSize === 's'\"\n            [mobileConfig]=\"mobileConfig\"\n            [fillOnSelect]=\"true\"\n            [readOnly]=\"readonly === true ? true : false\"\n            [disabled]=\"disable === true ? true : false\"\n            [dropdownValues]=\"moDataList\"\n            [filterFn]=\"customFilter\"\n            [openOnKeyboardEvent]=\"true\"\n            [byline]=\"allColumns.length > 0\"\n            [itemTemplate]=\"itemTemplate\"\n            [displayFn]=\"displayFunc\"\n            [showDropdownButton]=\"disableOrReadonly !== true\"\n            (itemClicked)=\"onItemClick($event, moDataList)\"\n            (inputTextChange)=\"onInputChange($event)\"\n            (openChange)=\"onOpenChange(fdCombobox, $event)\"\n        >\n        </fd-combobox>\n        <fdp-button\n            *ngIf=\"hasValue && disableOrReadonly !== true\"\n            glyph=\"decline\"\n            buttonType=\"transparent\"\n            class=\"combo-popup-btn\"\n            (click)=\"onClear()\"\n        ></fdp-button>\n\n        <fdp-button\n            *ngIf=\"hasReport && disableOrReadonly !== true\"\n            glyph=\"search\"\n            buttonType=\"transparent\"\n            class=\"combo-popup-btn\"\n            (click)=\"onSearch()\"\n        ></fdp-button>\n    </div>\n    <ng-template #itemTemplate let-item>\n        <div fd-list-content *ngIf=\"item.$isLoading; else itemWrapper\" style=\"width: 100%; height: 20px\">\n            <bsu-mask [size]=\"'s'\" [top]=\"'10px'\"></bsu-mask>\n        </div>\n        <ng-template #itemWrapper>\n            <ng-container *ngIf=\"item.$LoadMore; else showItem\">\n                <!-- <bsu-ulv-paging\n                    (click)=\"onPagingClick($event)\"\n                    (pageChange)=\"onPageChange($event)\"\n                    [pagingSetting]=\"ulvAdapter.Setting.Data.Paging\"\n                >\n                </bsu-ulv-paging> -->\n                <button\n                    style=\"width: 100%\"\n                    *ngIf=\"ulvAdapter.Setting.Data.Paging.Page + 1 < ulvAdapter.Setting.Data.Paging.TotalPages\"\n                    fd-button\n                    (click)=\"onPageChange2(ulvAdapter.Setting.Data.Paging, $event)\"\n                    [label]=\"'More' | bbbTranslate\"\n                ></button>\n            </ng-container>\n        </ng-template>\n        <ng-template #showItem>\n            <ng-container *ngIf=\"allColumns?.length && !item.isEmpty; else captionTemplate\">\n                <div *ngIf=\"!item.$__IsLast\" class=\"moinfoulv devider\"></div>\n                <span fd-list-thumbnail *ngIf=\"item.$Icon\"><fd-icon [glyph]=\"item.$Icon\"></fd-icon></span>\n                <div fd-list-content class=\"moinfoulv hasColumns\">\n                    <div fd-list-title class=\"title\">{{ allColumns[0].Alias | rval: item:allColumns:true }}</div>\n                    <div fd-list-byline class=\"byline\" *ngIf=\"allColumns[1]\">\n                        {{ allColumns[1].Alias | rval: item:allColumns:true }}\n                    </div>\n                    <div style=\"display: flex; column-gap: 8px; flex-wrap: wrap\">\n                        <ng-container *ngFor=\"let column of allColumns; let index = index\">\n                            <ng-container *ngIf=\"index > 1\">\n                                <ng-container *ngIf=\"column.Alias | rval: item:allColumns:true as value\">\n                                    <span> {{ column.Alias }}:{{ value }}</span>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-template #captionTemplate>\n                <span fd-list-title>{{\n                    item.isEmpty ? ('NoData' | bbbTranslate) : (item.$MoCaption || item.$Caption | bbbTranslate)\n                }}</span>\n            </ng-template>\n        </ng-template>\n    </ng-template>\n</ng-template>\n", styles: [":host{display:block}.combo-mo-ulv{width:100%}.combo-mo-ulv ::ng-deep .fd-popover-custom{width:100%}.fd-input-group>.fd-input-group__input{background-color:transparent!important}.simple-combo-wrapper{display:flex;align-items:center;position:relative}.simple-combo-wrapper ::ng-deep .combo-mo-ulv[class*=has-] .fd-input-group{border-left:none;border-bottom-left-radius:unset;border-top-left-radius:unset}.simple-combo-wrapper ::ng-deep .combo-popup-btn{background-color:var(--sapField_Background);border-top:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-bottom:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.simple-combo-wrapper ::ng-deep .combo-popup-btn:first-child{margin-right:-1px}.simple-combo-wrapper ::ng-deep .combo-popup-btn:last-child{border-left:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.combo-wrapper{display:flex;align-items:center;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_BorderColor, #89919a);border-radius:var(--sapField_BorderCornerRadius, .125rem)}::ng-deep .combo-popup-btn{border:none;background:transparent}::ng-deep .combo-popup-btn button{border-color:transparent!important;border:none}::ng-deep .fd-combobox-count-list-results{display:none}\n"] }]
         }], propDecorators: { ulvAdapter: [{
                 type: Input
             }], Control: [{
@@ -10666,7 +10918,7 @@ class UiPictureFileComponent extends FieldBaseComponent {
     }
 }
 UiPictureFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiPictureFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiPictureFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiPictureFileComponent, selector: "bsu-ui-picture-file", inputs: { imageUrl: "imageUrl", sizeMode: "sizeMode" }, providers: [UploadService], usesInheritance: true, ngImport: i0, template: "<div\n    [style.max-height.px]=\"Setting.SizeMode === '2' ? null : layoutInfo.ControlBounds.height\"\n    [class.no-inlineEdit]=\"!inlineEdit\"\n    [class.inlineEdit]=\"inlineEdit\"\n>\n    <div *ngIf=\"!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)\">\n        <fd-toolbar [fdType]=\"'transparent'\">\n            <fd-file-uploader\n                #uploader\n                fd-toolbar-item\n                [style.display]=\"'none'\"\n                [id]=\"id\"\n                [name]=\"'uploader_' + id\"\n                [placeholder]=\"'AttachPicture' | bbbTranslate\"\n                [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n                [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n                [accept]=\"validExtensions\"\n                [(ngModel)]=\"files\"\n                [multiple]=\"false\"\n                (selectedFilesChanged)=\"onFileSelection($event)\"\n            ></fd-file-uploader>\n            <button\n                fd-toolbar-item\n                fd-button\n                [disabled]=\"this.value && value?.IsDeleted !== true\"\n                glyph=\"attachment\"\n                [fdType]=\"'transparent'\"\n                (click)=\"uploader.open()\"\n            ></button>\n            <button\n                class=\"delete\"\n                fd-button\n                fd-toolbar-item\n                [disabled]=\"!this.value || value?.IsDeleted\"\n                glyph=\"delete\"\n                [fdType]=\"'transparent'\"\n                (click)=\"onFileDeleted(uploader)\"\n            ></button>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    loadingTpl;\n                    context: {\n                        uploadingState: uploadingState$ | async\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-toolbar>\n    </div>\n    <div\n        *ngIf=\"!inlineEdit; else avatarTemplate\"\n        [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\n        [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\n        [style.text-align]=\"Setting.SizeMode === '3' ? 'center' : null\"\n    >\n        <bsu-mask *ngIf=\"value && imageUrl\" [top]=\"'0px'\"></bsu-mask>\n        <img\n            *ngIf=\"(value && imageUrl) || Setting.HasDefaultPicture\"\n            imgLazy\n            [imgLazy]=\"imageUrl\"\n            [src]=\"imageUrl\"\n            [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\n            [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\n        />\n    </div>\n    <ng-template #avatarTemplate>\n        <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\n    </ng-template>\n</div>\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\n    <ng-container *ngIf=\"uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading\">\n        <fdp-slider\n            fd-toolbar-item\n            [id]=\"id + '1'\"\n            [name]=\"'slider_' + id\"\n            [value]=\"uploadingState.progress\"\n            [min]=\"0\"\n            [max]=\"100\"\n            [step]=\"1\"\n        >\n        </fdp-slider>\n        <button\n            *ngIf=\"uploadingState.state === 'Uploading'\"\n            fd-toolbar-item\n            fd-button\n            glyph=\"stop\"\n            fdType=\"transparent\"\n            (click)=\"onTerminate()\"\n        ></button>\n        <button\n            *ngIf=\"uploadingState.state === 'Error'\"\n            fd-toolbar-item\n            fd-button\n            glyph=\"refresh\"\n            [fdType]=\"'transparent'\"\n            (click)=\"onRetry()\"\n        ></button>\n    </ng-container>\n</ng-template>\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 ::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{min-height:140px;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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$5.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$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i10$1.SliderComponent, selector: "fdp-slider", inputs: ["class", "min", "max", "step", "jump", "tickmarksBetweenLabels", "mode", "showTicks", "showTicksLabels", "customValues", "tooltipMode", "hideProgressBar", "value"], outputs: ["sliderChange"] }, { 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 });
+UiPictureFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiPictureFileComponent, selector: "bsu-ui-picture-file", inputs: { imageUrl: "imageUrl", sizeMode: "sizeMode" }, providers: [UploadService], usesInheritance: true, ngImport: i0, template: "<div\n    [style.max-height.px]=\"Setting.SizeMode === '2' ? null : layoutInfo.ControlBounds.height\"\n    [class.no-inlineEdit]=\"!inlineEdit\"\n    [class.inlineEdit]=\"inlineEdit\"\n>\n    <div *ngIf=\"!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)\">\n        <fd-toolbar [fdType]=\"'transparent'\">\n            <fd-file-uploader\n                #uploader\n                fd-toolbar-item\n                [style.display]=\"'none'\"\n                [id]=\"id\"\n                [name]=\"'uploader_' + id\"\n                [placeholder]=\"'AttachPicture' | bbbTranslate\"\n                [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n                [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n                [accept]=\"validExtensions\"\n                [(ngModel)]=\"files\"\n                [multiple]=\"false\"\n                (selectedFilesChanged)=\"onFileSelection($event)\"\n            ></fd-file-uploader>\n            <button\n                fd-toolbar-item\n                fd-button\n                [disabled]=\"this.value && value?.IsDeleted !== true\"\n                glyph=\"attachment\"\n                [fdType]=\"'transparent'\"\n                (click)=\"uploader.open()\"\n            ></button>\n            <button\n                class=\"delete\"\n                fd-button\n                fd-toolbar-item\n                [disabled]=\"!this.value || value?.IsDeleted\"\n                glyph=\"delete\"\n                [fdType]=\"'transparent'\"\n                (click)=\"onFileDeleted(uploader)\"\n            ></button>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    loadingTpl;\n                    context: {\n                        uploadingState: uploadingState$ | async\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-toolbar>\n    </div>\n    <div\n        *ngIf=\"!inlineEdit; else avatarTemplate\"\n        [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\n        [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\n        [style.text-align]=\"Setting.SizeMode === '3' ? 'center' : null\"\n    >\n        <bsu-mask *ngIf=\"value && imageUrl\" [top]=\"'0px'\"></bsu-mask>\n        <img\n            *ngIf=\"(value && imageUrl) || Setting.HasDefaultPicture\"\n            imgLazy\n            [imgLazy]=\"imageUrl\"\n            [src]=\"imageUrl\"\n            [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\n            [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\n        />\n    </div>\n    <ng-template #avatarTemplate>\n        <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\n    </ng-template>\n</div>\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\n    <ng-container *ngIf=\"uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading\">\n        <fdp-slider\n            fd-toolbar-item\n            [id]=\"id + '1'\"\n            [name]=\"'slider_' + id\"\n            [value]=\"uploadingState.progress\"\n            [min]=\"0\"\n            [max]=\"100\"\n            [step]=\"1\"\n        >\n        </fdp-slider>\n        <button\n            *ngIf=\"uploadingState.state === 'Uploading'\"\n            fd-toolbar-item\n            fd-button\n            glyph=\"stop\"\n            fdType=\"transparent\"\n            (click)=\"onTerminate()\"\n        ></button>\n        <button\n            *ngIf=\"uploadingState.state === 'Error'\"\n            fd-toolbar-item\n            fd-button\n            glyph=\"refresh\"\n            [fdType]=\"'transparent'\"\n            (click)=\"onRetry()\"\n        ></button>\n    </ng-container>\n</ng-template>\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 ::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{min-height:140px;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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "component", type: i3$4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$5.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$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i10$1.SliderComponent, selector: "fdp-slider", inputs: ["class", "min", "max", "step", "jump", "tickmarksBetweenLabels", "mode", "showTicks", "showTicksLabels", "customValues", "tooltipMode", "hideProgressBar", "value"], outputs: ["sliderChange"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiPictureFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-picture-file', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UploadService], template: "<div\n    [style.max-height.px]=\"Setting.SizeMode === '2' ? null : layoutInfo.ControlBounds.height\"\n    [class.no-inlineEdit]=\"!inlineEdit\"\n    [class.inlineEdit]=\"inlineEdit\"\n>\n    <div *ngIf=\"!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)\">\n        <fd-toolbar [fdType]=\"'transparent'\">\n            <fd-file-uploader\n                #uploader\n                fd-toolbar-item\n                [style.display]=\"'none'\"\n                [id]=\"id\"\n                [name]=\"'uploader_' + id\"\n                [placeholder]=\"'AttachPicture' | bbbTranslate\"\n                [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n                [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n                [accept]=\"validExtensions\"\n                [(ngModel)]=\"files\"\n                [multiple]=\"false\"\n                (selectedFilesChanged)=\"onFileSelection($event)\"\n            ></fd-file-uploader>\n            <button\n                fd-toolbar-item\n                fd-button\n                [disabled]=\"this.value && value?.IsDeleted !== true\"\n                glyph=\"attachment\"\n                [fdType]=\"'transparent'\"\n                (click)=\"uploader.open()\"\n            ></button>\n            <button\n                class=\"delete\"\n                fd-button\n                fd-toolbar-item\n                [disabled]=\"!this.value || value?.IsDeleted\"\n                glyph=\"delete\"\n                [fdType]=\"'transparent'\"\n                (click)=\"onFileDeleted(uploader)\"\n            ></button>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    loadingTpl;\n                    context: {\n                        uploadingState: uploadingState$ | async\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-toolbar>\n    </div>\n    <div\n        *ngIf=\"!inlineEdit; else avatarTemplate\"\n        [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\n        [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\n        [style.text-align]=\"Setting.SizeMode === '3' ? 'center' : null\"\n    >\n        <bsu-mask *ngIf=\"value && imageUrl\" [top]=\"'0px'\"></bsu-mask>\n        <img\n            *ngIf=\"(value && imageUrl) || Setting.HasDefaultPicture\"\n            imgLazy\n            [imgLazy]=\"imageUrl\"\n            [src]=\"imageUrl\"\n            [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\n            [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\n        />\n    </div>\n    <ng-template #avatarTemplate>\n        <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\n    </ng-template>\n</div>\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\n    <ng-container *ngIf=\"uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading\">\n        <fdp-slider\n            fd-toolbar-item\n            [id]=\"id + '1'\"\n            [name]=\"'slider_' + id\"\n            [value]=\"uploadingState.progress\"\n            [min]=\"0\"\n            [max]=\"100\"\n            [step]=\"1\"\n        >\n        </fdp-slider>\n        <button\n            *ngIf=\"uploadingState.state === 'Uploading'\"\n            fd-toolbar-item\n            fd-button\n            glyph=\"stop\"\n            fdType=\"transparent\"\n            (click)=\"onTerminate()\"\n        ></button>\n        <button\n            *ngIf=\"uploadingState.state === 'Error'\"\n            fd-toolbar-item\n            fd-button\n            glyph=\"refresh\"\n            [fdType]=\"'transparent'\"\n            (click)=\"onRetry()\"\n        ></button>\n    </ng-container>\n</ng-template>\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 ::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{min-height:140px;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}\n"] }]
@@ -10722,10 +10974,10 @@ class UiReadOnlyFieldComponent extends FieldBaseComponent {
     }
 }
 UiReadOnlyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiReadOnlyFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiReadOnlyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiReadOnlyFieldComponent, selector: "bsu-ui-read-only-field", usesInheritance: true, ngImport: i0, template: "<fd-text\n    style=\"color: var(--fdIcon_Tab_Bar_Selection_Color)\"\n    [class.empty-bracket]=\"!text\"\n    [text]=\"text || 'Empty_Bracket' | bbbTranslate\"\n    [style.font-weight]=\"text ? 'font-weight: bold' : null\"\n    [whitespaces]=\"true\"\n    [maxLines]=\"2\"\n></fd-text>\n<button\n    *ngIf=\"parameters?.ShowCopy && text\"\n    fd-button\n    glyph=\"copy\"\n    [fdCompact]\n    fdType=\"transparent\"\n    [copy]=\"text | bbbTranslate\"\n></button>\n", styles: [":host{display:flex;width:100%;height:100%;align-items:center}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}fd-text{-webkit-hyphens:auto;hyphens:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CopyDirective, selector: "[copy]", inputs: ["copy"] }, { kind: "directive", type: i3$5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiReadOnlyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiReadOnlyFieldComponent, selector: "bsu-ui-read-only-field", usesInheritance: true, ngImport: i0, template: "<fd-text\n    style=\"color: var(--fdIcon_Tab_Bar_Selection_Color)\"\n    [class.empty-bracket]=\"!text\"\n    [text]=\"text || 'Empty_Bracket' | bbbTranslate\"\n    [class.bold]=\"text !== null && text !== ''\"\n    [whitespaces]=\"true\"\n    [maxLines]=\"2\"\n></fd-text>\n<button\n    *ngIf=\"parameters?.ShowCopy && text\"\n    fd-button\n    glyph=\"copy\"\n    [fdCompact]\n    fdType=\"transparent\"\n    [copy]=\"text | bbbTranslate\"\n></button>\n", styles: [":host{display:flex;width:100%;height:100%;align-items:center}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CopyDirective, selector: "[copy]", inputs: ["copy"] }, { kind: "directive", type: i3$6.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i16.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "moreLabel", "lessLabel", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiReadOnlyFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-read-only-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-text\n    style=\"color: var(--fdIcon_Tab_Bar_Selection_Color)\"\n    [class.empty-bracket]=\"!text\"\n    [text]=\"text || 'Empty_Bracket' | bbbTranslate\"\n    [style.font-weight]=\"text ? 'font-weight: bold' : null\"\n    [whitespaces]=\"true\"\n    [maxLines]=\"2\"\n></fd-text>\n<button\n    *ngIf=\"parameters?.ShowCopy && text\"\n    fd-button\n    glyph=\"copy\"\n    [fdCompact]\n    fdType=\"transparent\"\n    [copy]=\"text | bbbTranslate\"\n></button>\n", styles: [":host{display:flex;width:100%;height:100%;align-items:center}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}fd-text{-webkit-hyphens:auto;hyphens:auto}\n"] }]
+            args: [{ selector: 'bsu-ui-read-only-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-text\n    style=\"color: var(--fdIcon_Tab_Bar_Selection_Color)\"\n    [class.empty-bracket]=\"!text\"\n    [text]=\"text || 'Empty_Bracket' | bbbTranslate\"\n    [class.bold]=\"text !== null && text !== ''\"\n    [whitespaces]=\"true\"\n    [maxLines]=\"2\"\n></fd-text>\n<button\n    *ngIf=\"parameters?.ShowCopy && text\"\n    fd-button\n    glyph=\"copy\"\n    [fdCompact]\n    fdType=\"transparent\"\n    [copy]=\"text | bbbTranslate\"\n></button>\n", styles: [":host{display:flex;width:100%;height:100%;align-items:center}label{overflow:hidden;text-align:justify;line-height:1.6rem}.empty-bracket{opacity:.3}\n"] }]
         }] });
 
 class LyLayoutPanelComponent extends LayoutPanelBaseComponent {
@@ -10769,10 +11021,10 @@ class LyLayoutPanelComponent extends LayoutPanelBaseComponent {
     }
 }
 LyLayoutPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LyLayoutPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LyLayoutPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LyLayoutPanelComponent, selector: "bsu-ly-layout-panel", inputs: { renderItems: "renderItems", isRoot: "isRoot" }, host: { properties: { "attr.maxLabelWidth": "this.maxLabelWidth", "style.flex": "this.flex", "style.display": "this.display" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<canvas #canvas style=\"display: none\"></canvas>\r\n<fd-panel\r\n    [fixed]=\"!config.ExpandButtonVisible\"\r\n    *ngIf=\"visible\"\r\n    [class.hide-header]=\"!config.TextVisible\"\r\n    [attr.maxWidth]=\"maxWidth\"\r\n>\r\n    <h5 fd-panel-title>\r\n        {{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}\r\n    </h5>\r\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\r\n        <ng-container *ngFor=\"let item of config | filterToolbarControl\">\r\n            <ng-container [ngSwitch]=\"item.xtype\">\r\n                <ng-container *ngSwitchCase=\"'Ly.LayoutTabPanel'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\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                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.LayoutContainer'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                name: 'LyLayoutContainerComponent',\r\n                                selector: 'bsu-ly-layout-container'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.EmptySpace'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.SimpleLabel'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\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                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.LayoutLine'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\r\n                    <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                dynamicLayout;\r\n                                context: {\r\n                                    $implicit: item,\r\n                                    selector: 'bsu-ly-horizontal-layout',\r\n                                    name: 'LyLayoutHorizontalComponent'\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n                    </ng-container>\r\n                    <ng-template #verticalJoin>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                dynamicLayout;\r\n                                context: {\r\n                                    $implicit: item,\r\n                                    selector: 'bsu-ly-vertical-layout',\r\n                                    name: 'LyLayoutVerticalComponent'\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.LayoutControl'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                selector: 'bsu-layout-control',\r\n                                name: 'LayoutControlComponent'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template\r\n            #dynamicLayout\r\n            let-config\r\n            let-selector=\"selector\"\r\n            let-maxLabelWidth=\"maxLabelWidth\"\r\n            let-name=\"name\"\r\n        >\r\n            <bnrc-dynamic-layout\r\n                [config]=\"config\"\r\n                [selector]=\"selector\"\r\n                [name]=\"name\"\r\n                [module]=\"'BarsaSapUi'\"\r\n                [moduleFileName]=\"'BarsaSapUi'\"\r\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n                [isSearchPanel]=\"isSearchPanel\"\r\n            >\r\n            </bnrc-dynamic-layout>\r\n        </ng-template>\r\n    </div>\r\n</fd-panel>\r\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}:host ::ng-deep .hide-header .fd-panel__header{display:none}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "component", type: i3$7.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$7.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$7.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LyLayoutPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LyLayoutPanelComponent, selector: "bsu-ly-layout-panel", inputs: { renderItems: "renderItems", isRoot: "isRoot" }, host: { properties: { "attr.maxLabelWidth": "this.maxLabelWidth", "style.flex": "this.flex", "style.display": "this.display" } }, providers: [LayoutService], viewQueries: [{ propertyName: "viewRef", first: true, predicate: ["viewRefTemplate"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<canvas #canvas style=\"display: none\"></canvas>\n<fd-panel\n    [fixed]=\"!config.ExpandButtonVisible\"\n    *ngIf=\"visible\"\n    [class.hide-header]=\"!config.TextVisible\"\n    [attr.maxWidth]=\"maxWidth\"\n    [expanded]=\"config.Expanded\"\n>\n    <h5 fd-panel-title>\n        {{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}\n    </h5>\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\n        <ng-container *ngFor=\"let item of config | filterToolbarControl\">\n            <ng-container [ngSwitch]=\"item.xtype\">\n                <ng-container *ngSwitchCase=\"'Ly.LayoutTabPanel'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: {\n                                $implicit: item,\n                                name: 'LyLayoutPanelComponent',\n                                selector: 'bsu-ly-tab-container'\n                            }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutPanel'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: {\n                                $implicit: item,\n                                name: 'LyLayoutPanelComponent',\n                                selector: 'bsu-ly-layout-panel'\n                            }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutContainer'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: {\n                                $implicit: item,\n                                name: 'LyLayoutContainerComponent',\n                                selector: 'bsu-ly-layout-container'\n                            }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.EmptySpace'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.SimpleLabel'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: {\n                                $implicit: item,\n                                name: 'LySimpleLabelComponent',\n                                selector: 'bsu-ly-simple-label'\n                            }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutLine'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n                    <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                dynamicLayout;\n                                context: {\n                                    $implicit: item,\n                                    selector: 'bsu-ly-horizontal-layout',\n                                    name: 'LyLayoutHorizontalComponent'\n                                }\n                            \"\n                        ></ng-container>\n                        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n                    </ng-container>\n                    <ng-template #verticalJoin>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                dynamicLayout;\n                                context: {\n                                    $implicit: item,\n                                    selector: 'bsu-ly-vertical-layout',\n                                    name: 'LyLayoutVerticalComponent'\n                                }\n                            \"\n                        ></ng-container>\n                        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n                    </ng-template>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutControl'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: {\n                                $implicit: item,\n                                selector: 'bsu-layout-control',\n                                name: 'LayoutControlComponent'\n                            }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template\n            #dynamicLayout\n            let-config\n            let-selector=\"selector\"\n            let-maxLabelWidth=\"maxLabelWidth\"\n            let-name=\"name\"\n        >\n            <bnrc-dynamic-layout\n                [config]=\"config\"\n                [selector]=\"selector\"\n                [name]=\"name\"\n                [module]=\"'BarsaSapUi'\"\n                [moduleFileName]=\"'BarsaSapUi'\"\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n                [isSearchPanel]=\"isSearchPanel\"\n            >\n            </bnrc-dynamic-layout>\n        </ng-template>\n    </div>\n</fd-panel>\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}:host ::ng-deep .hide-header .fd-panel__header{display:none}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "component", type: i3$8.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$8.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterToolbarControlPipe, name: "filterToolbarControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LyLayoutPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-layout-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "<canvas #canvas style=\"display: none\"></canvas>\r\n<fd-panel\r\n    [fixed]=\"!config.ExpandButtonVisible\"\r\n    *ngIf=\"visible\"\r\n    [class.hide-header]=\"!config.TextVisible\"\r\n    [attr.maxWidth]=\"maxWidth\"\r\n>\r\n    <h5 fd-panel-title>\r\n        {{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}\r\n    </h5>\r\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\r\n        <ng-container *ngFor=\"let item of config | filterToolbarControl\">\r\n            <ng-container [ngSwitch]=\"item.xtype\">\r\n                <ng-container *ngSwitchCase=\"'Ly.LayoutTabPanel'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\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                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'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                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.LayoutContainer'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                name: 'LyLayoutContainerComponent',\r\n                                selector: 'bsu-ly-layout-container'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.EmptySpace'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.SimpleLabel'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\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                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.LayoutLine'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\r\n                    <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                dynamicLayout;\r\n                                context: {\r\n                                    $implicit: item,\r\n                                    selector: 'bsu-ly-horizontal-layout',\r\n                                    name: 'LyLayoutHorizontalComponent'\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\r\n                    </ng-container>\r\n                    <ng-template #verticalJoin>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                dynamicLayout;\r\n                                context: {\r\n                                    $implicit: item,\r\n                                    selector: 'bsu-ly-vertical-layout',\r\n                                    name: 'LyLayoutVerticalComponent'\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Ly.LayoutControl'\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            dynamicLayout;\r\n                            context: {\r\n                                $implicit: item,\r\n                                selector: 'bsu-layout-control',\r\n                                name: 'LayoutControlComponent'\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template\r\n            #dynamicLayout\r\n            let-config\r\n            let-selector=\"selector\"\r\n            let-maxLabelWidth=\"maxLabelWidth\"\r\n            let-name=\"name\"\r\n        >\r\n            <bnrc-dynamic-layout\r\n                [config]=\"config\"\r\n                [selector]=\"selector\"\r\n                [name]=\"name\"\r\n                [module]=\"'BarsaSapUi'\"\r\n                [moduleFileName]=\"'BarsaSapUi'\"\r\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\r\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\r\n                [isSearchPanel]=\"isSearchPanel\"\r\n            >\r\n            </bnrc-dynamic-layout>\r\n        </ng-template>\r\n    </div>\r\n</fd-panel>\r\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}:host ::ng-deep .hide-header .fd-panel__header{display:none}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"] }]
+            args: [{ selector: 'bsu-ly-layout-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [LayoutService], template: "<canvas #canvas style=\"display: none\"></canvas>\n<fd-panel\n    [fixed]=\"!config.ExpandButtonVisible\"\n    *ngIf=\"visible\"\n    [class.hide-header]=\"!config.TextVisible\"\n    [attr.maxWidth]=\"maxWidth\"\n    [expanded]=\"config.Expanded\"\n>\n    <h5 fd-panel-title>\n        {{ (config.TextVisible ? config.Title ?? '' : '') | bbbTranslate }}\n    </h5>\n    <div fd-panel-content [class.row-reverse-direction]=\"rowDirection\" [class.column-direction]=\"columnDirection\">\n        <ng-container *ngFor=\"let item of config | filterToolbarControl\">\n            <ng-container [ngSwitch]=\"item.xtype\">\n                <ng-container *ngSwitchCase=\"'Ly.LayoutTabPanel'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: {\n                                $implicit: item,\n                                name: 'LyLayoutPanelComponent',\n                                selector: 'bsu-ly-tab-container'\n                            }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-tab-container [config]=\"item\"></bsu-ly-tab-container> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutPanel'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: {\n                                $implicit: item,\n                                name: 'LyLayoutPanelComponent',\n                                selector: 'bsu-ly-layout-panel'\n                            }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-layout-panel [config]=\"item\"></bsu-ly-layout-panel> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutContainer'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: {\n                                $implicit: item,\n                                name: 'LyLayoutContainerComponent',\n                                selector: 'bsu-ly-layout-container'\n                            }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-layout-container [config]=\"item\"></bsu-ly-layout-container> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.EmptySpace'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: { $implicit: item, name: 'LyEmptySpaceComponent', selector: 'bsu-ly-empty-space' }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-empty-space [config]=\"item\"></bsu-ly-empty-space> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.SimpleLabel'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: {\n                                $implicit: item,\n                                name: 'LySimpleLabelComponent',\n                                selector: 'bsu-ly-simple-label'\n                            }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-simple-label [config]=\"item\"></bsu-ly-simple-label> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutLine'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: { $implicit: item, name: 'LyLineComponent', selector: 'bsu-ly-line' }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-ly-line [isVertical]=\"item.IsVertical\"></bsu-ly-line> -->\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutJoin'\">\n                    <ng-container *ngIf=\"item.Type === 'HorizontalJoin'; else verticalJoin\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                dynamicLayout;\n                                context: {\n                                    $implicit: item,\n                                    selector: 'bsu-ly-horizontal-layout',\n                                    name: 'LyLayoutHorizontalComponent'\n                                }\n                            \"\n                        ></ng-container>\n                        <!-- <bsu-ly-horizontal-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-horizontal-layout> -->\n                    </ng-container>\n                    <ng-template #verticalJoin>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                dynamicLayout;\n                                context: {\n                                    $implicit: item,\n                                    selector: 'bsu-ly-vertical-layout',\n                                    name: 'LyLayoutVerticalComponent'\n                                }\n                            \"\n                        ></ng-container>\n                        <!-- <bsu-ly-vertical-layout [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-ly-vertical-layout> -->\n                    </ng-template>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Ly.LayoutControl'\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            dynamicLayout;\n                            context: {\n                                $implicit: item,\n                                selector: 'bsu-layout-control',\n                                name: 'LayoutControlComponent'\n                            }\n                        \"\n                    ></ng-container>\n                    <!-- <bsu-layout-control [config]=\"item\" [maxLabelWidth]=\"maxLabelWidth\"></bsu-layout-control> -->\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template\n            #dynamicLayout\n            let-config\n            let-selector=\"selector\"\n            let-maxLabelWidth=\"maxLabelWidth\"\n            let-name=\"name\"\n        >\n            <bnrc-dynamic-layout\n                [config]=\"config\"\n                [selector]=\"selector\"\n                [name]=\"name\"\n                [module]=\"'BarsaSapUi'\"\n                [moduleFileName]=\"'BarsaSapUi'\"\n                [maxLabelWidth]=\"(maxLabelWidth$ | async)!!\"\n                [flex]=\"isSearchPanel ? 'unset' : config.Bounds.width\"\n                [isSearchPanel]=\"isSearchPanel\"\n            >\n            </bnrc-dynamic-layout>\n        </ng-template>\n    </div>\n</fd-panel>\n", styles: [":host{width:100%;display:flex;height:auto;align-items:flex-start}:host ::ng-deep .hide-header .fd-panel__header{display:none}.fd-wizard-example .fd-wizard__content{min-height:300px}.full-width{width:100%}@media (max-width: 600px){:host{align-items:stretch}}fd-panel{width:100%}fd-panel div{display:flex;overflow:hidden}\n"] }]
         }], propDecorators: { renderItems: [{
                 type: Input
             }], isRoot: [{
@@ -11107,10 +11359,10 @@ class UiCardViewHorizontalGroupComponent extends UiCardViewComponent {
     }
 }
 UiCardViewHorizontalGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiCardViewHorizontalGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiCardViewHorizontalGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiCardViewHorizontalGroupComponent, selector: "bsu-ui-card-view-horizontal-group", viewQueries: [{ propertyName: "dynamicPage", first: true, predicate: DynamicPageComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page [size]=\"deviceSize | dynamicPageSize\">\n    <fd-tab-list [stackContent]=\"true\">\n        <fd-tab\n            *ngFor=\"let tab of moDataList | groupBy: groupby[0].Name | reverse: isFirefox; let index = index\"\n            [title]=\"tab.key\"\n            [id]=\"'h_' + index\"\n        >\n            <fd-dynamic-page-content>\n                <h4 fd-title [id]=\"'h_' + index + '_h'\">{{ tab.key }}</h4>\n                <bsu-card-view-content\n                    [moDataList]=\"tab.value\"\n                    [groupby]=\"[]\"\n                    [title]=\"tab.key\"\n                    [setting]=\"cardSetting\"\n                    [editMode]=\"inlineEditMode\"\n                    [rtl]=\"rtl\"\n                    [deviceName]=\"deviceName\"\n                    [deviceSize]=\"deviceSize\"\n                    [allColumns]=\"allColumns\"\n                    [contextMenuItems]=\"contextMenuItems\"\n                    [canView]=\"canView\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [navigationArrow]=\"navigationArrow\"\n                    [isCheckList]=\"isCheckList\"\n                    (rowCheck)=\"onRowCheck($event)\"\n                    (rowClick)=\"onRowClick($event)\"\n                    (ulvCommand)=\"onUlvCommand($event)\"\n                    (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                    (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n                    (action)=\"onAction($event)\"\n                ></bsu-card-view-content>\n            </fd-dynamic-page-content>\n        </fd-tab>\n    </fd-tab-list>\n</fd-dynamic-page>\n", styles: ["::ng-deep .fd-container.card-list{padding:0!important}::ng-deep .footer-spacer{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i7$5.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i7$5.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i15.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i15.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: CardViewContentComponent, selector: "bsu-card-view-content" }, { kind: "pipe", type: i2.GroupByPipe, name: "groupBy" }, { kind: "pipe", type: i2.ReversePipe, name: "reverse" }, { kind: "pipe", type: DynamicPageSizePipe, name: "dynamicPageSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiCardViewHorizontalGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiCardViewHorizontalGroupComponent, selector: "bsu-ui-card-view-horizontal-group", viewQueries: [{ propertyName: "dynamicPage", first: true, predicate: DynamicPageComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page [size]=\"deviceSize | dynamicPageSize\">\n    <fd-tab-list [stackContent]=\"true\" *ngIf=\"moDataList?.length; else noData\">\n        <fd-tab\n            *ngFor=\"let tab of moDataList | groupBy: groupby[0].Name | reverse: isFirefox; let index = index\"\n            [title]=\"tab.key\"\n            [id]=\"'h_' + index\"\n        >\n            <fd-dynamic-page-content>\n                <h4 fd-title [id]=\"'h_' + index + '_h'\">{{ tab.key }}</h4>\n                <bsu-card-view-content\n                    [moDataList]=\"tab.value\"\n                    [groupby]=\"[]\"\n                    [title]=\"tab.key\"\n                    [setting]=\"cardSetting\"\n                    [editMode]=\"inlineEditMode\"\n                    [rtl]=\"rtl\"\n                    [deviceName]=\"deviceName\"\n                    [deviceSize]=\"deviceSize\"\n                    [allColumns]=\"allColumns\"\n                    [contextMenuItems]=\"contextMenuItems\"\n                    [canView]=\"canView\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [navigationArrow]=\"navigationArrow\"\n                    [isCheckList]=\"isCheckList\"\n                    (rowCheck)=\"onRowCheck($event)\"\n                    (rowClick)=\"onRowClick($event)\"\n                    (ulvCommand)=\"onUlvCommand($event)\"\n                    (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                    (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n                    (action)=\"onAction($event)\"\n                ></bsu-card-view-content>\n            </fd-dynamic-page-content>\n        </fd-tab>\n    </fd-tab-list>\n</fd-dynamic-page>\n<ng-template #noData>\n    <fd-dynamic-page-content>\n        <bsu-no-data></bsu-no-data>\n    </fd-dynamic-page-content>\n</ng-template>\n", styles: ["::ng-deep .fd-container.card-list{padding:0!important}::ng-deep .footer-spacer{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$5.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["role", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i7$5.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i15.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "expandOverflowText", "defaultTab", "selectDefaultOnTabsChange"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i15.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: NoDataComponent, selector: "bsu-no-data" }, { kind: "component", type: CardViewContentComponent, selector: "bsu-card-view-content" }, { kind: "pipe", type: i2.GroupByPipe, name: "groupBy" }, { kind: "pipe", type: i2.ReversePipe, name: "reverse" }, { kind: "pipe", type: DynamicPageSizePipe, name: "dynamicPageSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiCardViewHorizontalGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-card-view-horizontal-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dynamic-page [size]=\"deviceSize | dynamicPageSize\">\n    <fd-tab-list [stackContent]=\"true\">\n        <fd-tab\n            *ngFor=\"let tab of moDataList | groupBy: groupby[0].Name | reverse: isFirefox; let index = index\"\n            [title]=\"tab.key\"\n            [id]=\"'h_' + index\"\n        >\n            <fd-dynamic-page-content>\n                <h4 fd-title [id]=\"'h_' + index + '_h'\">{{ tab.key }}</h4>\n                <bsu-card-view-content\n                    [moDataList]=\"tab.value\"\n                    [groupby]=\"[]\"\n                    [title]=\"tab.key\"\n                    [setting]=\"cardSetting\"\n                    [editMode]=\"inlineEditMode\"\n                    [rtl]=\"rtl\"\n                    [deviceName]=\"deviceName\"\n                    [deviceSize]=\"deviceSize\"\n                    [allColumns]=\"allColumns\"\n                    [contextMenuItems]=\"contextMenuItems\"\n                    [canView]=\"canView\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [navigationArrow]=\"navigationArrow\"\n                    [isCheckList]=\"isCheckList\"\n                    (rowCheck)=\"onRowCheck($event)\"\n                    (rowClick)=\"onRowClick($event)\"\n                    (ulvCommand)=\"onUlvCommand($event)\"\n                    (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                    (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n                    (action)=\"onAction($event)\"\n                ></bsu-card-view-content>\n            </fd-dynamic-page-content>\n        </fd-tab>\n    </fd-tab-list>\n</fd-dynamic-page>\n", styles: ["::ng-deep .fd-container.card-list{padding:0!important}::ng-deep .footer-spacer{display:none!important}\n"] }]
+            args: [{ selector: 'bsu-ui-card-view-horizontal-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dynamic-page [size]=\"deviceSize | dynamicPageSize\">\n    <fd-tab-list [stackContent]=\"true\" *ngIf=\"moDataList?.length; else noData\">\n        <fd-tab\n            *ngFor=\"let tab of moDataList | groupBy: groupby[0].Name | reverse: isFirefox; let index = index\"\n            [title]=\"tab.key\"\n            [id]=\"'h_' + index\"\n        >\n            <fd-dynamic-page-content>\n                <h4 fd-title [id]=\"'h_' + index + '_h'\">{{ tab.key }}</h4>\n                <bsu-card-view-content\n                    [moDataList]=\"tab.value\"\n                    [groupby]=\"[]\"\n                    [title]=\"tab.key\"\n                    [setting]=\"cardSetting\"\n                    [editMode]=\"inlineEditMode\"\n                    [rtl]=\"rtl\"\n                    [deviceName]=\"deviceName\"\n                    [deviceSize]=\"deviceSize\"\n                    [allColumns]=\"allColumns\"\n                    [contextMenuItems]=\"contextMenuItems\"\n                    [canView]=\"canView\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [navigationArrow]=\"navigationArrow\"\n                    [isCheckList]=\"isCheckList\"\n                    (rowCheck)=\"onRowCheck($event)\"\n                    (rowClick)=\"onRowClick($event)\"\n                    (ulvCommand)=\"onUlvCommand($event)\"\n                    (editFormPanelSave)=\"onEditFormPanelSave($event)\"\n                    (editFormPanelCancel)=\"onEditFormPanelCancel($event)\"\n                    (action)=\"onAction($event)\"\n                ></bsu-card-view-content>\n            </fd-dynamic-page-content>\n        </fd-tab>\n    </fd-tab-list>\n</fd-dynamic-page>\n<ng-template #noData>\n    <fd-dynamic-page-content>\n        <bsu-no-data></bsu-no-data>\n    </fd-dynamic-page-content>\n</ng-template>\n", styles: ["::ng-deep .fd-container.card-list{padding:0!important}::ng-deep .footer-spacer{display:none!important}\n"] }]
         }], propDecorators: { dynamicPage: [{
                 type: ViewChild,
                 args: [DynamicPageComponent, { static: true }]
@@ -11150,7 +11402,7 @@ class FormToolbarButtonComponent extends BaseFormToolbaritemPropsComponent {
         this.icon = this.parameters.Icon;
         this.fdType = this.parameters.FdType$Caption;
         this.text = this.inlineHelp = this.context.text;
-        this.inlineHelpDirective.disabled = this.parameters.ShowTooltip === false;
+        // this.inlineHelpDirective.disabled = this.parameters.ShowTooltip === false;
     }
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
@@ -11162,10 +11414,10 @@ class FormToolbarButtonComponent extends BaseFormToolbaritemPropsComponent {
     }
 }
 FormToolbarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormToolbarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormToolbarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FormToolbarButtonComponent, selector: "bsu-form-toolbar-button", inputs: { parameters: "parameters" }, outputs: { btnClick: "btnClick" }, viewQueries: [{ propertyName: "inlineHelpDirective", first: true, predicate: InlineHelpDirective, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\r\n    fd-toolbar-item\r\n    fd-button\r\n    [fd-inline-help]=\"inlineHelp\"\r\n    [glyph]=\"icon\"\r\n    [class.control-disabled]=\"isEnable === false ? true : false\"\r\n    [fdType]=\"fdType || (!isEnable ? 'transparent' : fdType)\"\r\n    (click)=\"btnClick.emit()\"\r\n>\r\n    <span *ngIf=\"!onlyIcon || showText\">{{ text }}</span>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i7$a.InlineHelpDirective, selector: "[fd-inline-help], [fd-inline-help-template]", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FormToolbarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FormToolbarButtonComponent, selector: "bsu-form-toolbar-button", inputs: { parameters: "parameters" }, outputs: { btnClick: "btnClick" }, viewQueries: [{ propertyName: "inlineHelpDirective", first: true, predicate: InlineHelpDirective, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\n    fd-toolbar-item\n    fd-button\n    [title]=\"inlineHelp\"\n    [glyph]=\"icon\"\n    [class.control-disabled]=\"isEnable === false ? true : false\"\n    [fdType]=\"fdType || (!isEnable ? 'transparent' : fdType)\"\n    (click)=\"btnClick.emit()\"\n>\n    <span *ngIf=\"!onlyIcon || showText\">{{ text }}</span>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormToolbarButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-form-toolbar-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n    fd-toolbar-item\r\n    fd-button\r\n    [fd-inline-help]=\"inlineHelp\"\r\n    [glyph]=\"icon\"\r\n    [class.control-disabled]=\"isEnable === false ? true : false\"\r\n    [fdType]=\"fdType || (!isEnable ? 'transparent' : fdType)\"\r\n    (click)=\"btnClick.emit()\"\r\n>\r\n    <span *ngIf=\"!onlyIcon || showText\">{{ text }}</span>\r\n</button>\r\n" }]
+            args: [{ selector: 'bsu-form-toolbar-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    fd-toolbar-item\n    fd-button\n    [title]=\"inlineHelp\"\n    [glyph]=\"icon\"\n    [class.control-disabled]=\"isEnable === false ? true : false\"\n    [fdType]=\"fdType || (!isEnable ? 'transparent' : fdType)\"\n    (click)=\"btnClick.emit()\"\n>\n    <span *ngIf=\"!onlyIcon || showText\">{{ text }}</span>\n</button>\n" }]
         }], propDecorators: { inlineHelpDirective: [{
                 type: ViewChild,
                 args: [InlineHelpDirective, { static: true }]
@@ -11239,237 +11491,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 args: ['container', { read: TemplateRef }]
             }] } });
 
-class BlobViewerComponent extends BaseComponent {
-    constructor(_cdr, _domSanitizer) {
-        super();
-        this._cdr = _cdr;
-        this._domSanitizer = _domSanitizer;
-        this.loading = false;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.fallbackUrl = this.getFallbackUrl(this.file.Id);
-        this._downloadFileId(this.file.Id, true, 'pdf', false, false);
-    }
-    ngOnChanges(changes) {
-        super.ngOnChanges(changes);
-        const { file } = changes;
-        if (file && !file.firstChange) {
-            this.fallbackUrl = this.getFallbackUrl(this.file.Id);
-            this._downloadFileId(this.file.Id, true, 'pdf', false, false);
-        }
-    }
-    _downloadFileId(fileId, viewInBrowser, convertTo, forOcx, isOfficeOnline) {
-        this._setLoading(true);
-        BarsaApi.Common.File.DownloadFileContent.bind(this)({
-            fileId,
-            fileUrl: null,
-            viewInBrowser,
-            convertTo,
-            isOfficeOnline,
-            forOcx
-        }, (response) => {
-            if (response.succeed) {
-                this._downloadFileIdCompleted(response);
-            }
-            this._setLoading(false);
-        }, (error) => {
-            alert(error);
-            this._setLoading(false);
-        });
-    }
-    getFallbackUrl(fileId) {
-        return `امکان نمایش فایل در این مرورگر وجود ندارد.
-    برای باز کردن فایل از لینک زیر استفاده کنید:  </br> <a href='${BarsaApi.Common.File.CreateAttachmentUrl(fileId, false, true)}'>دانلود فایل بصورت pdf</a>  </br>  <a href='${BarsaApi.Common.File.CreateAttachmentUrl(fileId, false, false)}'>دانلود فایل بصورت بصورت اصلی</a>`;
-    }
-    _setLoading(loading) {
-        this.loading = loading;
-        this._cdr.detectChanges();
-    }
-    _downloadFileIdCompleted(response) {
-        const blob = BarsaApi.Common.File.B64toBlob(response.content, response.contentType);
-        const url = window.URL || window.webkitURL;
-        this.valueUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(url.createObjectURL(blob));
-    }
-}
-BlobViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BlobViewerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-BlobViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: { file: "file" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<bsu-mask *ngIf=\"loading\"></bsu-mask>\r\n<object\r\n    *ngIf=\"valueUrl\"\r\n    style=\"flex-grow: 1\"\r\n    [attr.data]=\"valueUrl\"\r\n    type=\"application/pdf\"\r\n    width=\"100%\"\r\n    height=\"100%\"\r\n    [attr.html]=\"fallbackUrl\"\r\n></object>\r\n", styles: [":host{display:block;position:relative;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BlobViewerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bsu-blob-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bsu-mask *ngIf=\"loading\"></bsu-mask>\r\n<object\r\n    *ngIf=\"valueUrl\"\r\n    style=\"flex-grow: 1\"\r\n    [attr.data]=\"valueUrl\"\r\n    type=\"application/pdf\"\r\n    width=\"100%\"\r\n    height=\"100%\"\r\n    [attr.html]=\"fallbackUrl\"\r\n></object>\r\n", styles: [":host{display:block;position:relative;height:100%;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.DomSanitizer }]; }, propDecorators: { file: [{
-                type: Input
-            }] } });
-
-class FileViewerContentComponent extends BaseComponent {
-    constructor(_picFieldSrc) {
-        super();
-        this._picFieldSrc = _picFieldSrc;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        const file = this.file;
-        const spl = file.FileName?.split('.');
-        const ext = spl ? spl[spl.length - 1] : '';
-        const isImg = isImage(ext);
-        isImg &&
-            (file.thumbnailUrl = this._picFieldSrc.transform(file.Id, 'ID', null, '', 120, 120)) &&
-            (file.mediaUrl = this._picFieldSrc.transform(file.Id, 'Attachment', '', '', 0, 0)) &&
-            (file.isImage = true);
-        !isImg && (file.thumbnailUrl = getIcon(ext || file.Type));
-    }
-}
-FileViewerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerContentComponent, deps: [{ token: i2.PictureFieldSourcePipe }], target: i0.ɵɵFactoryTarget.Component });
-FileViewerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: { fillWidth: "fillWidth", imageOnly: "imageOnly", cardMode: "cardMode", showFooter: "showFooter", showContent: "showContent", width: "width", cardContentHeight: "cardContentHeight", file: "file" }, usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics\">\r\n            <bsu-mask></bsu-mask>\r\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    <bsu-blob-viewer [file]=\"file\" [style.width]=\"width\"></bsu-blob-viewer>\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\">\r\n        <fd-card-content style=\"text-align: center\" [style.height]=\"cardContentHeight\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: ["file"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bsu-file-viewer-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics\">\r\n            <bsu-mask></bsu-mask>\r\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    <bsu-blob-viewer [file]=\"file\" [style.width]=\"width\"></bsu-blob-viewer>\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\">\r\n        <fd-card-content style=\"text-align: center\" [style.height]=\"cardContentHeight\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{display:block;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2.PictureFieldSourcePipe }]; }, propDecorators: { fillWidth: [{
-                type: Input
-            }], imageOnly: [{
-                type: Input
-            }], cardMode: [{
-                type: Input
-            }], showFooter: [{
-                type: Input
-            }], showContent: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], cardContentHeight: [{
-                type: Input
-            }], file: [{
-                type: Input
-            }] } });
-
-class FileViewerComponent extends BaseComponent {
-    constructor(_dialogRef) {
-        super();
-        this._dialogRef = _dialogRef;
-        const { title, files, selectedIndex, deviceSize, contentDensity, isImageGallery } = _dialogRef.data;
-        this.title = title;
-        this.files = files;
-        this.selectedFile = files[selectedIndex || 0];
-        this.deviceSize = deviceSize || 'l';
-        this.contentDensity = contentDensity || 'compact';
-        this.isImageGallery = isImageGallery;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    onMedaiClick(media, index) {
-        this.selectedFile = media;
-        if (this.isImageGallery) {
-            this.gallery.nativeElement.querySelector('[id="' + String(index) + '"]')?.scrollIntoView(true);
-        }
-    }
-    onClose() {
-        this._dialogRef.close();
-    }
-}
-FileViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-FileViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerComponent, selector: "bsu-file-viewer", viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dialog #dialogTpl class=\"vertical\">\r\n    <fd-dialog-header>\r\n        <ng-template fdTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Fit image size\"\r\n                    [glyph]=\"'resize'\"\r\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n                    (click)=\"fillWidth = !fillWidth\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body #fdbody>\r\n        <div #gallery class=\"gallery inDialog\" *ngIf=\"isImageGallery\">\r\n            <ng-container *ngFor=\"let media of files; let i = index\">\r\n                <bsu-file-viewer-content [file]=\"selectedFile\" [imageOnly]=\"true\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"gallery\" *ngIf=\"!isImageGallery\">\r\n            <ng-container *ngIf=\"selectedFile\">\r\n                <bsu-file-viewer-content [fillWidth]=\"fillWidth\" [file]=\"selectedFile\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div *ngIf=\"deviceSize !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\r\n        </div>\r\n    </fd-dialog-body>\r\n</fd-dialog>\r\n<ng-template #layoutGridTpl let-files>\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow *ngIf=\"files\">\r\n            <div\r\n                *ngFor=\"let file of files; let i = index\"\r\n                [fdLayoutGridCol]=\"6\"\r\n                [colMd]=\"3\"\r\n                [colLg]=\"2\"\r\n                [colXl]=\"2\"\r\n                (click)=\"onMedaiClick(file, i)\"\r\n            >\r\n                <bsu-file-viewer-content\r\n                    [cardMode]=\"true\"\r\n                    [cardContentHeight]=\"'120px'\"\r\n                    [file]=\"file\"\r\n                ></bsu-file-viewer-content>\r\n            </div>\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse;padding:0}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1}fd-dialog.vertical .thumbnail{border:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4$5.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$5.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$5.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i4.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "cardMode", "showFooter", "showContent", "width", "cardContentHeight", "file"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bsu-file-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog #dialogTpl class=\"vertical\">\r\n    <fd-dialog-header>\r\n        <ng-template fdTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Fit image size\"\r\n                    [glyph]=\"'resize'\"\r\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n                    (click)=\"fillWidth = !fillWidth\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body #fdbody>\r\n        <div #gallery class=\"gallery inDialog\" *ngIf=\"isImageGallery\">\r\n            <ng-container *ngFor=\"let media of files; let i = index\">\r\n                <bsu-file-viewer-content [file]=\"selectedFile\" [imageOnly]=\"true\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"gallery\" *ngIf=\"!isImageGallery\">\r\n            <ng-container *ngIf=\"selectedFile\">\r\n                <bsu-file-viewer-content [fillWidth]=\"fillWidth\" [file]=\"selectedFile\"></bsu-file-viewer-content>\r\n            </ng-container>\r\n        </div>\r\n        <div *ngIf=\"deviceSize !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\r\n        </div>\r\n    </fd-dialog-body>\r\n</fd-dialog>\r\n<ng-template #layoutGridTpl let-files>\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow *ngIf=\"files\">\r\n            <div\r\n                *ngFor=\"let file of files; let i = index\"\r\n                [fdLayoutGridCol]=\"6\"\r\n                [colMd]=\"3\"\r\n                [colLg]=\"2\"\r\n                [colXl]=\"2\"\r\n                (click)=\"onMedaiClick(file, i)\"\r\n            >\r\n                <bsu-file-viewer-content\r\n                    [cardMode]=\"true\"\r\n                    [cardContentHeight]=\"'120px'\"\r\n                    [file]=\"file\"\r\n                ></bsu-file-viewer-content>\r\n            </div>\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse;padding:0}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1}fd-dialog.vertical .thumbnail{border:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; }, propDecorators: { gallery: [{
-                type: ViewChild,
-                args: ['gallery']
-            }] } });
-
-class FullscreenFilesDirective {
-    constructor(_dialogService) {
-        this._dialogService = _dialogService;
-    }
-    _handleClick() {
-        this._dialogService.open(this.component ?? FileViewerComponent, {
-            data: {
-                isImageGallery: this.isImageGallery,
-                files: this.files,
-                title: this.title
-            },
-            fullScreen: true
-        });
-    }
-}
-FullscreenFilesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FullscreenFilesDirective, deps: [{ token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Directive });
-FullscreenFilesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: { files: "files", title: "title", isImageGallery: "isImageGallery", component: "component" }, host: { listeners: { "click": "_handleClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FullscreenFilesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fullscreenFiles]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogService }]; }, propDecorators: { files: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], isImageGallery: [{
-                type: Input
-            }], component: [{
-                type: Input
-            }], _handleClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-class DownloadFilesDirective {
-    constructor() { }
-    _handleClick() {
-        const files = this.files;
-        if (!files.length) {
-            return;
-        }
-        const firstFile = files[0];
-        if (files.length === 1) {
-            BarsaApi.Common.File.Download5({ fileId: firstFile.Id });
-        }
-        else {
-            BarsaApi.Common.File.DownloadAllAsZip(files.map((c) => c.Id));
-        }
-    }
-}
-DownloadFilesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DownloadFilesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DownloadFilesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: { files: "files" }, host: { listeners: { "click": "_handleClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DownloadFilesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[downloadFiles]'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { files: [{
-                type: Input
-            }], _handleClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-class FileViewerPopoverComponent extends BaseComponent {
-    constructor() {
-        super();
-        this.remove = new EventEmitter();
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-FileViewerPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileViewerPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: { files: "files", file: "file", deviceSize: "deviceSize", canDownload: "canDownload", disableRemove: "disableRemove" }, outputs: { remove: "remove" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\n    <button\n        fd-button\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\n        [label]=\"file.FileName || ''\"\n        glyph=\"attachment\"\n        [fdMenu]=\"true\"\n        class=\"btn-actionsheet\"\n    ></button>\n    <fd-popover\n        #popoverMobile\n        [mobile]=\"true\"\n        [mobileConfig]=\"{ title: 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\n    >\n        <ng-template #popoverBodyContent>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\n            ></ng-container>\n        </ng-template>\n    </fd-popover>\n    <fd-popover #popoverLarge>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n\n    <button *ngIf=\"!disableRemove\" fd-button glyph=\"delete\" (click)=\"remove.emit()\"></button>\n</div>\n\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\n    <div fd-popover-body-header>\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\n            <div fd-bar-left>\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\n            </div>\n        </div>\n    </div>\n    <bsu-file-viewer-content\n        [file]=\"file\"\n        [width]=\"mobile ? '100vw' : '30vw'\"\n        [cardMode]=\"true\"\n        [showContent]=\"true\"\n        [showFooter]=\"true\"\n        [cardContentHeight]=\"mobile ? null : '320px'\"\n    ></bsu-file-viewer-content>\n    <div fd-popover-body-footer *ngIf=\"canDownload\">\n        <div fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-button-bar\n                    fdType=\"transparent\"\n                    glyph=\"download\"\n                    downloadFiles\n                    [files]=\"[file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    *ngIf=\"!mobile\"\n                    fdType=\"transparent\"\n                    glyph=\"resize\"\n                    fullscreenFiles\n                    [files]=\"files?.length ? files : [file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$3.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i2$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "directive", type: i2$3.DeprecatedBarContentDensityDirective, selector: "[fd-bar][cozy]" }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i7$2.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i7$2.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "cardMode", "showFooter", "showContent", "width", "cardContentHeight", "file"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "isImageGallery", "component"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FileViewerPopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bsu-file-viewer-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\n    <button\n        fd-button\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\n        [label]=\"file.FileName || ''\"\n        glyph=\"attachment\"\n        [fdMenu]=\"true\"\n        class=\"btn-actionsheet\"\n    ></button>\n    <fd-popover\n        #popoverMobile\n        [mobile]=\"true\"\n        [mobileConfig]=\"{ title: 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\n    >\n        <ng-template #popoverBodyContent>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\n            ></ng-container>\n        </ng-template>\n    </fd-popover>\n    <fd-popover #popoverLarge>\n        <fd-popover-body>\n            <ng-container\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\n            ></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n\n    <button *ngIf=\"!disableRemove\" fd-button glyph=\"delete\" (click)=\"remove.emit()\"></button>\n</div>\n\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\n    <div fd-popover-body-header>\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\n            <div fd-bar-left>\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\n            </div>\n        </div>\n    </div>\n    <bsu-file-viewer-content\n        [file]=\"file\"\n        [width]=\"mobile ? '100vw' : '30vw'\"\n        [cardMode]=\"true\"\n        [showContent]=\"true\"\n        [showFooter]=\"true\"\n        [cardContentHeight]=\"mobile ? null : '320px'\"\n    ></bsu-file-viewer-content>\n    <div fd-popover-body-footer *ngIf=\"canDownload\">\n        <div fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-button-bar\n                    fdType=\"transparent\"\n                    glyph=\"download\"\n                    downloadFiles\n                    [files]=\"[file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    *ngIf=\"!mobile\"\n                    fdType=\"transparent\"\n                    glyph=\"resize\"\n                    fullscreenFiles\n                    [files]=\"files?.length ? files : [file]\"\n                    (click)=\"popover.close()\"\n                ></fd-button-bar>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { files: [{
-                type: Input
-            }], file: [{
-                type: Input
-            }], deviceSize: [{
-                type: Input
-            }], canDownload: [{
-                type: Input
-            }], disableRemove: [{
-                type: Input
-            }], remove: [{
-                type: Output
-            }] } });
-
 class ExecutePushNotificationCommandComponent extends BaseComponent {
     constructor(_activatedRoute, _portalService, _localStorage) {
         super();
@@ -11552,10 +11573,10 @@ class BarsaCartableFormComponent extends FormBaseComponent {
     }
 }
 BarsaCartableFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaCartableFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BarsaCartableFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaCartableFormComponent, selector: "bsu-barsa-cartable-form", host: { properties: { "class.smallDevice": "this._isSmallDevice" } }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"layout94$ | async as layout94\">\n    <div class=\"groups-wrapper\">\n        <bsu-layout-control\n            class=\"search-group\"\n            *ngIf=\"'\u062C\u0633\u062A\u062C\u0648 \u06AF\u0631\u0648\u0647' | controlUi: layout94 as configUi\"\n            [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n            [config]=\"configUi\"\n            [showLabel]=\"false\"\n        ></bsu-layout-control>\n        <bsu-layout-control\n            class=\"cartable-groups\"\n            *ngIf=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94 as configUi\"\n            [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n            [config]=\"configUi\"\n            [showLabel]=\"false\"\n        ></bsu-layout-control>\n    </div>\n    <bsu-layout-control\n        class=\"cartable-radif\"\n        *ngIf=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644' | controlUi: layout94 as configUi\"\n        [caption]=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n        [config]=\"configUi\"\n        [showLabel]=\"false\"\n    ></bsu-layout-control>\n</ng-container>\n", styles: [":host{display:flex;width:100%;height:100%;border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);background-color:#fff}:host.smallDevice{flex-direction:column;min-height:100vh}:host.smallDevice ::ng-deep bnrc-field-ui{margin:unset!important}:host .groups-wrapper{display:flex;flex-direction:column;min-width:280px;max-width:280px;border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host .cartable-groups{flex:1}:host.smallDevice .groups-wrapper{flex:unset;width:100%;min-width:100%;max-width:100%}:host.smallDevice .search-group{display:none}:host.smallDevice .cartable-groups{flex:unset}div{flex:1}:host ::ng-deep .viewer-container{height:100%!important}:host ::ng-deep tbody{border:none!important}:host ::ng-deep bnrc-field-ui{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaCartableFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaCartableFormComponent, selector: "bsu-barsa-cartable-form", host: { properties: { "class.smallDevice": "this._isSmallDevice" } }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"layout94$ | async as layout94\">\n    <div class=\"groups-wrapper\">\n        <bsu-layout-control\n            class=\"search-group\"\n            *ngIf=\"'\u062C\u0633\u062A\u062C\u0648 \u06AF\u0631\u0648\u0647' | controlUi: layout94 as configUi\"\n            [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n            [config]=\"configUi\"\n            [showLabel]=\"false\"\n        ></bsu-layout-control>\n        <bsu-layout-control\n            class=\"cartable-groups\"\n            *ngIf=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94 as configUi\"\n            [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n            [config]=\"configUi\"\n            [showLabel]=\"false\"\n        ></bsu-layout-control>\n    </div>\n    <bsu-layout-control\n        class=\"cartable-radif\"\n        *ngIf=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644' | controlUi: layout94 as configUi\"\n        [caption]=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n        [config]=\"configUi\"\n        [showLabel]=\"false\"\n    ></bsu-layout-control>\n</ng-container>\n", styles: [":host{display:flex;width:100%;height:100%;border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);background-color:#fff}:host.smallDevice{flex-direction:column;min-height:100vh}:host.smallDevice ::ng-deep bnrc-field-ui{margin:unset!important}:host .groups-wrapper{display:flex;flex-direction:column;min-width:280px;max-width:280px;border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host .cartable-groups{flex:1}:host.smallDevice .groups-wrapper{flex:unset;width:100%;min-width:100%;max-width:100%}:host.smallDevice .search-group{display:none}:host.smallDevice .cartable-groups{flex:unset}div{flex:1}:host ::ng-deep .viewer-container{min-height:100%!important}:host ::ng-deep .viewer-container fd-layout-panel{box-shadow:none}:host ::ng-deep tbody{border:none!important}:host ::ng-deep bnrc-field-ui{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaCartableFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-cartable-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [FormPanelService], template: "<ng-container *ngIf=\"layout94$ | async as layout94\">\n    <div class=\"groups-wrapper\">\n        <bsu-layout-control\n            class=\"search-group\"\n            *ngIf=\"'\u062C\u0633\u062A\u062C\u0648 \u06AF\u0631\u0648\u0647' | controlUi: layout94 as configUi\"\n            [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n            [config]=\"configUi\"\n            [showLabel]=\"false\"\n        ></bsu-layout-control>\n        <bsu-layout-control\n            class=\"cartable-groups\"\n            *ngIf=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94 as configUi\"\n            [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n            [config]=\"configUi\"\n            [showLabel]=\"false\"\n        ></bsu-layout-control>\n    </div>\n    <bsu-layout-control\n        class=\"cartable-radif\"\n        *ngIf=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644' | controlUi: layout94 as configUi\"\n        [caption]=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n        [config]=\"configUi\"\n        [showLabel]=\"false\"\n    ></bsu-layout-control>\n</ng-container>\n", styles: [":host{display:flex;width:100%;height:100%;border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);background-color:#fff}:host.smallDevice{flex-direction:column;min-height:100vh}:host.smallDevice ::ng-deep bnrc-field-ui{margin:unset!important}:host .groups-wrapper{display:flex;flex-direction:column;min-width:280px;max-width:280px;border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host .cartable-groups{flex:1}:host.smallDevice .groups-wrapper{flex:unset;width:100%;min-width:100%;max-width:100%}:host.smallDevice .search-group{display:none}:host.smallDevice .cartable-groups{flex:unset}div{flex:1}:host ::ng-deep .viewer-container{height:100%!important}:host ::ng-deep tbody{border:none!important}:host ::ng-deep bnrc-field-ui{padding:0!important}\n"] }]
+            args: [{ selector: 'bsu-barsa-cartable-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [FormPanelService], template: "<ng-container *ngIf=\"layout94$ | async as layout94\">\n    <div class=\"groups-wrapper\">\n        <bsu-layout-control\n            class=\"search-group\"\n            *ngIf=\"'\u062C\u0633\u062A\u062C\u0648 \u06AF\u0631\u0648\u0647' | controlUi: layout94 as configUi\"\n            [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n            [config]=\"configUi\"\n            [showLabel]=\"false\"\n        ></bsu-layout-control>\n        <bsu-layout-control\n            class=\"cartable-groups\"\n            *ngIf=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644 \u06A9\u0627\u0631\u0628\u0631' | controlUi: layout94 as configUi\"\n            [caption]=\"'\u06AF\u0631\u0648\u0647\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n            [config]=\"configUi\"\n            [showLabel]=\"false\"\n        ></bsu-layout-control>\n    </div>\n    <bsu-layout-control\n        class=\"cartable-radif\"\n        *ngIf=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644' | controlUi: layout94 as configUi\"\n        [caption]=\"'\u0631\u062F\u06CC\u0641\u0647\u0627\u06CC \u06A9\u0627\u0631\u062A\u0627\u0628\u0644'\"\n        [config]=\"configUi\"\n        [showLabel]=\"false\"\n    ></bsu-layout-control>\n</ng-container>\n", styles: [":host{display:flex;width:100%;height:100%;border:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);background-color:#fff}:host.smallDevice{flex-direction:column;min-height:100vh}:host.smallDevice ::ng-deep bnrc-field-ui{margin:unset!important}:host .groups-wrapper{display:flex;flex-direction:column;min-width:280px;max-width:280px;border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host .cartable-groups{flex:1}:host.smallDevice .groups-wrapper{flex:unset;width:100%;min-width:100%;max-width:100%}:host.smallDevice .search-group{display:none}:host.smallDevice .cartable-groups{flex:unset}div{flex:1}:host ::ng-deep .viewer-container{min-height:100%!important}:host ::ng-deep .viewer-container fd-layout-panel{box-shadow:none}:host ::ng-deep tbody{border:none!important}:host ::ng-deep bnrc-field-ui{padding:0!important}\n"] }]
         }], propDecorators: { _isSmallDevice: [{
                 type: HostBinding,
                 args: ['class.smallDevice']
@@ -11644,10 +11665,10 @@ class BarsaCartableGroupComponent extends BaseViewItemPropsComponent {
     }
 }
 BarsaCartableGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaCartableGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BarsaCartableGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaCartableGroupComponent, selector: "bsu-barsa-cartable-group", outputs: { events: "events" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <li\n    [interactive]=\"true\"\n    fd-list-item\n    [selected]=\"allItemChecked ? true : false\"\n    (click)=\"onRowCheckAll()\"\n    *ngIf=\"allItem\"\n>\n    <div class=\"title-container\">\n        <div style=\"background-color: transparent; width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"allItem.unreadCount > 0 ? 'bold' : null\">{{ '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate }}</span>\n                <ng-container *ngIf=\"allItem.unreadCount > 0\">\n                    <strong style=\"padding: 0 2px; direction: ltr\">({{ allItem.unreadCount }})</strong>\n                </ng-container>\n                <span style=\"padding: 0 5px\" *ngIf=\"allItem.allCount > 0\">{{ allItem.allCount }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n\n<ng-container>\n    <ng-container *ngIf=\"allItem\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                    $implicit: '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate,\n                    unreadCount: allItem.unreadCount,\n                    allCount: allItem.allCount,\n                    backColor: 'transparent',\n                    isAll: true,\n                    isChecked: allItemChecked\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"\n            itemTemplate;\n            context: {\n                $implicit: parameters.CartableGroupField | rval: mo:allColumns:true,\n                unreadCount: parameters.UnreadCountField | rval: mo:allColumns,\n                allCount: parameters.AllCountField | rval: mo:allColumns,\n                backColor: (columns[0].Caption | rval: mo:columns),\n                isChecked: isChecked,\n                icon: parameters.IconField | rval: mo:allColumns:true,\n                isBuiltin: isBuiltin\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-container *ngIf=\"isLastBuiltin\">\n    <li fd-list-item class=\"space\">\n        <span fd-list-title></span>\n    </li>\n</ng-container>\n<!-- <ng-container *ngIf=\"last\">\n    <ul fd-list>\n        <li fd-list-group-header>\n            <span fd-list-title style=\"background:#f7f7f7\"></span>\n        </li>\n        <ng-container *ngFor=\"let mo2 of moDataList\">\n            <ng-container *ngIf=\"'\u0633\u06CC\u0633\u062A\u0645\u06CC' | rval: mo2:allColumns\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: parameters.CartableGroupField | rval: mo2:allColumns:true,\n                            unreadCount: parameters.UnreadCountField | rval: mo2:allColumns,\n                            allCount: parameters.AllCountField | rval: mo2:allColumns,\n                            backColor: columns[0].Caption | rval: mo2:columns,\n                            isChecked: isChecked\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-container> -->\n\n<!-- <li fd-list-item [selected]=\"isChecked ? true : false\" (click)=\"onRowCheck()\" [interactive]=\"true\">\n    <div class=\"title-container\">\n        <div [style.backgroundColor]=\"columns[0].Caption | rval: mo:columns\" style=\"width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"parameters.UnreadCountField | rval: mo:allColumns:(true ? 'bold' : null)\"\n                    >{{ parameters.CartableGroupField | rval: mo:allColumns:true }}\n                </span>\n                <ng-container *ngIf=\"parameters.UnreadCountField | rval: mo:allColumns:true\">\n                    <strong style=\"padding: 0 2px; direction: ltr\"\n                        >({{ parameters.UnreadCountField | rval: mo:allColumns:true }})</strong\n                    >\n                </ng-container>\n                <span style=\"padding: 0 5px\">{{ parameters.AllCountField | rval: mo:allColumns:true }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n<ng-template\n    #itemTemplate\n    let-caption\n    let-unreadCount=\"unreadCount\"\n    let-allCount=\"allCount\"\n    let-backColor=\"backColor\"\n    let-isAll=\"isAll\"\n    let-isChecked=\"isChecked\"\n    let-icon=\"icon\"\n    let-isBuiltin=\"isBuiltin\"\n>\n    <li\n        *ngIf=\"isBuiltin || allCount > 0 || isAll\"\n        fd-list-item\n        [selected]=\"isChecked ? true : false\"\n        (click)=\"onClick(isAll)\"\n        [interactive]=\"true\"\n    >\n        <div class=\"title-container\">\n            <div [style.backgroundColor]=\"backColor\" style=\"width: 0.2rem; height: 100%\"></div>\n            <i *ngIf=\"icon\" fd-list-icon [glyph]=\"icon\"></i>\n            <span fd-list-title>\n                <div style=\"height: 100%; display: flex; align-items: center; column-gap: 5px\">\n                    <ng-container *ngIf=\"unreadCount && unreadCount > 0; else spanTemplate\">\n                        <strong>{{ caption }}</strong>\n                        <strong style=\"padding: 0 2px; direction: ltr\">({{ unreadCount }})</strong>\n                    </ng-container>\n                    <ng-template #spanTemplate>\n                        <span>{{ caption }}</span>\n                    </ng-template>\n                    <span style=\"padding: 0 5px\" *ngIf=\"allCount && allCount > 0\">{{ allCount }}</span>\n                </div>\n            </span>\n        </div>\n    </li>\n</ng-template>\n", styles: [":host{display:contents;width:100%;height:100%;cursor:pointer}.title-container{align-items:center;display:flex;column-gap:10px;height:100%;width:100%}li{padding:0}.space{cursor:default;pointer-events:none}.space:focus:before{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: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaCartableGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaCartableGroupComponent, selector: "bsu-barsa-cartable-group", outputs: { events: "events" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <li\n    [interactive]=\"true\"\n    fd-list-item\n    [selected]=\"allItemChecked ? true : false\"\n    (click)=\"onRowCheckAll()\"\n    *ngIf=\"allItem\"\n>\n    <div class=\"title-container\">\n        <div style=\"background-color: transparent; width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"allItem.unreadCount > 0 ? 'bold' : null\">{{ '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate }}</span>\n                <ng-container *ngIf=\"allItem.unreadCount > 0\">\n                    <strong style=\"padding: 0 2px; direction: ltr\">({{ allItem.unreadCount }})</strong>\n                </ng-container>\n                <span style=\"padding: 0 5px\" *ngIf=\"allItem.allCount > 0\">{{ allItem.allCount }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n\n<ng-container>\n    <ng-container *ngIf=\"allItem\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                    $implicit: '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate,\n                    unreadCount: allItem.unreadCount,\n                    allCount: allItem.allCount,\n                    backColor: 'transparent',\n                    isAll: true,\n                    isChecked: allItemChecked\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"\n            itemTemplate;\n            context: {\n                $implicit: parameters.CartableGroupField | rval: mo:allColumns:true,\n                unreadCount: parameters.UnreadCountField | rval: mo:allColumns,\n                allCount: parameters.AllCountField | rval: mo:allColumns,\n                backColor: (columns[0].Caption | rval: mo:columns),\n                isChecked: isChecked,\n                icon: parameters.IconField | rval: mo:allColumns:true,\n                isBuiltin: isBuiltin\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-container *ngIf=\"isLastBuiltin\">\n    <li fd-list-item class=\"space\">\n        <span fd-list-title></span>\n    </li>\n</ng-container>\n<!-- <ng-container *ngIf=\"last\">\n    <ul fd-list>\n        <li fd-list-group-header>\n            <span fd-list-title style=\"background:#f7f7f7\"></span>\n        </li>\n        <ng-container *ngFor=\"let mo2 of moDataList\">\n            <ng-container *ngIf=\"'\u0633\u06CC\u0633\u062A\u0645\u06CC' | rval: mo2:allColumns\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: parameters.CartableGroupField | rval: mo2:allColumns:true,\n                            unreadCount: parameters.UnreadCountField | rval: mo2:allColumns,\n                            allCount: parameters.AllCountField | rval: mo2:allColumns,\n                            backColor: columns[0].Caption | rval: mo2:columns,\n                            isChecked: isChecked\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-container> -->\n\n<!-- <li fd-list-item [selected]=\"isChecked ? true : false\" (click)=\"onRowCheck()\" [interactive]=\"true\">\n    <div class=\"title-container\">\n        <div [style.backgroundColor]=\"columns[0].Caption | rval: mo:columns\" style=\"width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"parameters.UnreadCountField | rval: mo:allColumns:(true ? 'bold' : null)\"\n                    >{{ parameters.CartableGroupField | rval: mo:allColumns:true }}\n                </span>\n                <ng-container *ngIf=\"parameters.UnreadCountField | rval: mo:allColumns:true\">\n                    <strong style=\"padding: 0 2px; direction: ltr\"\n                        >({{ parameters.UnreadCountField | rval: mo:allColumns:true }})</strong\n                    >\n                </ng-container>\n                <span style=\"padding: 0 5px\">{{ parameters.AllCountField | rval: mo:allColumns:true }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n<ng-template\n    #itemTemplate\n    let-caption\n    let-unreadCount=\"unreadCount\"\n    let-allCount=\"allCount\"\n    let-backColor=\"backColor\"\n    let-isAll=\"isAll\"\n    let-isChecked=\"isChecked\"\n    let-icon=\"icon\"\n    let-isBuiltin=\"isBuiltin\"\n>\n    <li\n        *ngIf=\"isBuiltin || allCount > 0 || isAll\"\n        fd-list-item\n        [selected]=\"isChecked ? true : false\"\n        (click)=\"onClick(isAll)\"\n        [interactive]=\"true\"\n    >\n        <div class=\"title-container\">\n            <div [style.backgroundColor]=\"backColor\" style=\"width: 0.2rem; height: 100%\"></div>\n            <i *ngIf=\"icon\" fd-list-icon [glyph]=\"icon\"></i>\n            <span fd-list-title>\n                <div style=\"height: 100%; display: flex; align-items: center; column-gap: 5px\">\n                    <ng-container *ngIf=\"unreadCount && unreadCount > 0; else spanTemplate\">\n                        <strong>{{ caption }}</strong>\n                        <strong style=\"padding: 0 2px; direction: ltr\">({{ unreadCount }})</strong>\n                    </ng-container>\n                    <ng-template #spanTemplate>\n                        <span>{{ caption }}</span>\n                    </ng-template>\n                    <span style=\"padding: 0 5px\" *ngIf=\"allCount && allCount > 0\">{{ allCount }}</span>\n                </div>\n            </span>\n        </div>\n    </li>\n</ng-template>\n", styles: [":host{display:contents;width:100%;height:100%;cursor:pointer}.title-container{align-items:center;display:flex;column-gap:5px;height:100%;width:100%}li{padding:0}.space{cursor:default;background-color:var(--sapBackgroundColor);pointer-events:none}.space:focus:before{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: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaCartableGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-cartable-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <li\n    [interactive]=\"true\"\n    fd-list-item\n    [selected]=\"allItemChecked ? true : false\"\n    (click)=\"onRowCheckAll()\"\n    *ngIf=\"allItem\"\n>\n    <div class=\"title-container\">\n        <div style=\"background-color: transparent; width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"allItem.unreadCount > 0 ? 'bold' : null\">{{ '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate }}</span>\n                <ng-container *ngIf=\"allItem.unreadCount > 0\">\n                    <strong style=\"padding: 0 2px; direction: ltr\">({{ allItem.unreadCount }})</strong>\n                </ng-container>\n                <span style=\"padding: 0 5px\" *ngIf=\"allItem.allCount > 0\">{{ allItem.allCount }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n\n<ng-container>\n    <ng-container *ngIf=\"allItem\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                    $implicit: '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate,\n                    unreadCount: allItem.unreadCount,\n                    allCount: allItem.allCount,\n                    backColor: 'transparent',\n                    isAll: true,\n                    isChecked: allItemChecked\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"\n            itemTemplate;\n            context: {\n                $implicit: parameters.CartableGroupField | rval: mo:allColumns:true,\n                unreadCount: parameters.UnreadCountField | rval: mo:allColumns,\n                allCount: parameters.AllCountField | rval: mo:allColumns,\n                backColor: (columns[0].Caption | rval: mo:columns),\n                isChecked: isChecked,\n                icon: parameters.IconField | rval: mo:allColumns:true,\n                isBuiltin: isBuiltin\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-container *ngIf=\"isLastBuiltin\">\n    <li fd-list-item class=\"space\">\n        <span fd-list-title></span>\n    </li>\n</ng-container>\n<!-- <ng-container *ngIf=\"last\">\n    <ul fd-list>\n        <li fd-list-group-header>\n            <span fd-list-title style=\"background:#f7f7f7\"></span>\n        </li>\n        <ng-container *ngFor=\"let mo2 of moDataList\">\n            <ng-container *ngIf=\"'\u0633\u06CC\u0633\u062A\u0645\u06CC' | rval: mo2:allColumns\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: parameters.CartableGroupField | rval: mo2:allColumns:true,\n                            unreadCount: parameters.UnreadCountField | rval: mo2:allColumns,\n                            allCount: parameters.AllCountField | rval: mo2:allColumns,\n                            backColor: columns[0].Caption | rval: mo2:columns,\n                            isChecked: isChecked\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-container> -->\n\n<!-- <li fd-list-item [selected]=\"isChecked ? true : false\" (click)=\"onRowCheck()\" [interactive]=\"true\">\n    <div class=\"title-container\">\n        <div [style.backgroundColor]=\"columns[0].Caption | rval: mo:columns\" style=\"width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"parameters.UnreadCountField | rval: mo:allColumns:(true ? 'bold' : null)\"\n                    >{{ parameters.CartableGroupField | rval: mo:allColumns:true }}\n                </span>\n                <ng-container *ngIf=\"parameters.UnreadCountField | rval: mo:allColumns:true\">\n                    <strong style=\"padding: 0 2px; direction: ltr\"\n                        >({{ parameters.UnreadCountField | rval: mo:allColumns:true }})</strong\n                    >\n                </ng-container>\n                <span style=\"padding: 0 5px\">{{ parameters.AllCountField | rval: mo:allColumns:true }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n<ng-template\n    #itemTemplate\n    let-caption\n    let-unreadCount=\"unreadCount\"\n    let-allCount=\"allCount\"\n    let-backColor=\"backColor\"\n    let-isAll=\"isAll\"\n    let-isChecked=\"isChecked\"\n    let-icon=\"icon\"\n    let-isBuiltin=\"isBuiltin\"\n>\n    <li\n        *ngIf=\"isBuiltin || allCount > 0 || isAll\"\n        fd-list-item\n        [selected]=\"isChecked ? true : false\"\n        (click)=\"onClick(isAll)\"\n        [interactive]=\"true\"\n    >\n        <div class=\"title-container\">\n            <div [style.backgroundColor]=\"backColor\" style=\"width: 0.2rem; height: 100%\"></div>\n            <i *ngIf=\"icon\" fd-list-icon [glyph]=\"icon\"></i>\n            <span fd-list-title>\n                <div style=\"height: 100%; display: flex; align-items: center; column-gap: 5px\">\n                    <ng-container *ngIf=\"unreadCount && unreadCount > 0; else spanTemplate\">\n                        <strong>{{ caption }}</strong>\n                        <strong style=\"padding: 0 2px; direction: ltr\">({{ unreadCount }})</strong>\n                    </ng-container>\n                    <ng-template #spanTemplate>\n                        <span>{{ caption }}</span>\n                    </ng-template>\n                    <span style=\"padding: 0 5px\" *ngIf=\"allCount && allCount > 0\">{{ allCount }}</span>\n                </div>\n            </span>\n        </div>\n    </li>\n</ng-template>\n", styles: [":host{display:contents;width:100%;height:100%;cursor:pointer}.title-container{align-items:center;display:flex;column-gap:10px;height:100%;width:100%}li{padding:0}.space{cursor:default;pointer-events:none}.space:focus:before{border:none}\n"] }]
+            args: [{ selector: 'bsu-barsa-cartable-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <li\n    [interactive]=\"true\"\n    fd-list-item\n    [selected]=\"allItemChecked ? true : false\"\n    (click)=\"onRowCheckAll()\"\n    *ngIf=\"allItem\"\n>\n    <div class=\"title-container\">\n        <div style=\"background-color: transparent; width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"allItem.unreadCount > 0 ? 'bold' : null\">{{ '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate }}</span>\n                <ng-container *ngIf=\"allItem.unreadCount > 0\">\n                    <strong style=\"padding: 0 2px; direction: ltr\">({{ allItem.unreadCount }})</strong>\n                </ng-container>\n                <span style=\"padding: 0 5px\" *ngIf=\"allItem.allCount > 0\">{{ allItem.allCount }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n\n<ng-container>\n    <ng-container *ngIf=\"allItem\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                    $implicit: '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate,\n                    unreadCount: allItem.unreadCount,\n                    allCount: allItem.allCount,\n                    backColor: 'transparent',\n                    isAll: true,\n                    isChecked: allItemChecked\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"\n            itemTemplate;\n            context: {\n                $implicit: parameters.CartableGroupField | rval: mo:allColumns:true,\n                unreadCount: parameters.UnreadCountField | rval: mo:allColumns,\n                allCount: parameters.AllCountField | rval: mo:allColumns,\n                backColor: (columns[0].Caption | rval: mo:columns),\n                isChecked: isChecked,\n                icon: parameters.IconField | rval: mo:allColumns:true,\n                isBuiltin: isBuiltin\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-container *ngIf=\"isLastBuiltin\">\n    <li fd-list-item class=\"space\">\n        <span fd-list-title></span>\n    </li>\n</ng-container>\n<!-- <ng-container *ngIf=\"last\">\n    <ul fd-list>\n        <li fd-list-group-header>\n            <span fd-list-title style=\"background:#f7f7f7\"></span>\n        </li>\n        <ng-container *ngFor=\"let mo2 of moDataList\">\n            <ng-container *ngIf=\"'\u0633\u06CC\u0633\u062A\u0645\u06CC' | rval: mo2:allColumns\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: parameters.CartableGroupField | rval: mo2:allColumns:true,\n                            unreadCount: parameters.UnreadCountField | rval: mo2:allColumns,\n                            allCount: parameters.AllCountField | rval: mo2:allColumns,\n                            backColor: columns[0].Caption | rval: mo2:columns,\n                            isChecked: isChecked\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-container> -->\n\n<!-- <li fd-list-item [selected]=\"isChecked ? true : false\" (click)=\"onRowCheck()\" [interactive]=\"true\">\n    <div class=\"title-container\">\n        <div [style.backgroundColor]=\"columns[0].Caption | rval: mo:columns\" style=\"width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"parameters.UnreadCountField | rval: mo:allColumns:(true ? 'bold' : null)\"\n                    >{{ parameters.CartableGroupField | rval: mo:allColumns:true }}\n                </span>\n                <ng-container *ngIf=\"parameters.UnreadCountField | rval: mo:allColumns:true\">\n                    <strong style=\"padding: 0 2px; direction: ltr\"\n                        >({{ parameters.UnreadCountField | rval: mo:allColumns:true }})</strong\n                    >\n                </ng-container>\n                <span style=\"padding: 0 5px\">{{ parameters.AllCountField | rval: mo:allColumns:true }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n<ng-template\n    #itemTemplate\n    let-caption\n    let-unreadCount=\"unreadCount\"\n    let-allCount=\"allCount\"\n    let-backColor=\"backColor\"\n    let-isAll=\"isAll\"\n    let-isChecked=\"isChecked\"\n    let-icon=\"icon\"\n    let-isBuiltin=\"isBuiltin\"\n>\n    <li\n        *ngIf=\"isBuiltin || allCount > 0 || isAll\"\n        fd-list-item\n        [selected]=\"isChecked ? true : false\"\n        (click)=\"onClick(isAll)\"\n        [interactive]=\"true\"\n    >\n        <div class=\"title-container\">\n            <div [style.backgroundColor]=\"backColor\" style=\"width: 0.2rem; height: 100%\"></div>\n            <i *ngIf=\"icon\" fd-list-icon [glyph]=\"icon\"></i>\n            <span fd-list-title>\n                <div style=\"height: 100%; display: flex; align-items: center; column-gap: 5px\">\n                    <ng-container *ngIf=\"unreadCount && unreadCount > 0; else spanTemplate\">\n                        <strong>{{ caption }}</strong>\n                        <strong style=\"padding: 0 2px; direction: ltr\">({{ unreadCount }})</strong>\n                    </ng-container>\n                    <ng-template #spanTemplate>\n                        <span>{{ caption }}</span>\n                    </ng-template>\n                    <span style=\"padding: 0 5px\" *ngIf=\"allCount && allCount > 0\">{{ allCount }}</span>\n                </div>\n            </span>\n        </div>\n    </li>\n</ng-template>\n", styles: [":host{display:contents;width:100%;height:100%;cursor:pointer}.title-container{align-items:center;display:flex;column-gap:5px;height:100%;width:100%}li{padding:0}.space{cursor:default;background-color:var(--sapBackgroundColor);pointer-events:none}.space:focus:before{border:none}\n"] }]
         }], propDecorators: { events: [{
                 type: Output
             }] } });
@@ -11741,7 +11762,7 @@ BarsaPishnamayeshPayamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             useFactory: getDateService$1,
             deps: [LogService]
         }
-    ], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"\n        showPayamClass;\n        context: {\n            $implicit: data,\n            primary: !data.$details?.length,\n            isFirst: true\n        }\n    \"\n>\n</ng-container>\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            namayeshPayam;\n            context: {\n                $implicit: data.payam.Subject,\n                fromText: data.payam.FromText,\n                toText: data.$toText,\n                importance: data.$importance,\n                readDate: data.$readDate,\n                sendDate: data.$sendDate,\n                ccText: data.$ccText,\n                bccText: data.$bccText,\n                accessLevel: data.$accessLevel,\n                content: data.$content,\n                fromPhoto: data.$fromPhoto,\n                details: data.$details,\n                attachments: data.$attachments,\n                todo: data.$todo,\n                customText: data.payam.CustomText,\n                primary: primary,\n                isFirst: isFirst\n            }\n        \"\n    >\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #namayeshPayam\n    let-subject\n    let-content=\"content\"\n    let-fromText=\"fromText\"\n    let-toText=\"toText\"\n    let-importance=\"importance\"\n    let-readDate=\"readDate\"\n    let-sendDate=\"sendDate\"\n    let-ccText=\"ccText\"\n    let-bccText=\"bccText\"\n    let-fromPhoto=\"fromPhoto\"\n    let-details=\"details\"\n    let-accessLevel=\"accessLevel\"\n    let-primary=\"primary\"\n    let-isFirst=\"isFirst\"\n    let-attachments=\"attachments\"\n    let-todo=\"todo\"\n    let-customText=\"customText\"\n>\n    <fd-card cardType=\"object\">\n        <fd-card-header>\n            <fd-avatar\n                [image]=\"fromPhoto\"\n                [circle]=\"true\"\n                size=\"s\"\n                [ariaLabel]=\"fromText\"\n                [label]=\"fromText\"\n                [title]=\"fromText\"\n            ></fd-avatar>\n            <div fd-card-title class=\"header-fields\">\n                <h5 fd-title>\n                    <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\n                </h5>\n                <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\n            </div>\n            <div fd-card-subtitle>\n                <h5 fd-title>{{ subject }}</h5>\n                <fd-popover>\n                    <fd-popover-control>\n                        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">{{ 'Recievers' | bbbTranslate }}</button>\n                    </fd-popover-control>\n                    <fd-popover-body>\n                        <ul fd-list>\n                            <li fd-list-item *ngFor=\"let rec of toText\">\n                                <a fd-list-link>{{ rec }}</a>\n                            </li>\n                        </ul>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </fd-card-header>\n        <fd-card-content>\n            <fd-panel [expanded]=\"isFirst\">\n                <div fd-panel-title id=\"panel-expandable-title-1\">\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\n                    <div class=\"payamIcons\">\n                        <fd-popover *ngIf=\"importance.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ importance.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-popover *ngIf=\"accessLevel.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-info-label\n                            *ngIf=\"todo\"\n                            [label]=\"todo.text\"\n                            [color]=\"todo.color\"\n                            [title]=\"todo.text\"\n                        ></fd-info-label>\n                    </div>\n                </div>\n                <div fd-panel-content>\n                    <div *ngIf=\"customText\">\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\n                            {{ customText }}\n                        </fd-message-strip>\n                    </div>\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\n\n                    <div *ngIf=\"attachments?.length\" class=\"attachments\">\n                        <ng-container *ngFor=\"let file of attachments\">\n                            <bsu-file-viewer-popover\n                                *ngIf=\"!file.IsDeleted\"\n                                [file]=\"file\"\n                                [files]=\"attachments\"\n                                [deviceSize]=\"(deviceSize$ | async)!!\"\n                                [canDownload]=\"true\"\n                                [disableRemove]=\"true\"\n                            ></bsu-file-viewer-popover>\n                        </ng-container>\n                        <ng-container *ngIf=\"attachments.length > 1\">\n                            <button\n                                fd-button\n                                [title]=\"'Download' | bbbTranslate\"\n                                [glyph]=\"'download'\"\n                                downloadFiles\n                                [files]=\"attachments\"\n                            ></button>\n                        </ng-container>\n                    </div>\n                    <div class=\"readAt\">\n                        <fd-object-identifier\n                            *ngIf=\"readDate\"\n                            [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\"\n                        >\n                        </fd-object-identifier>\n                    </div>\n                </div>\n            </fd-panel>\n        </fd-card-content>\n        <!-- <fd-card-footer>\n            <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\n        </fd-card-footer> -->\n    </fd-card>\n    <ng-contianer *ngFor=\"let detail of details\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                showPayamClass;\n                context: {\n                    $implicit: detail\n                }\n            \"\n        >\n        </ng-container>\n    </ng-contianer>\n</ng-template>\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}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}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}.attachments{display:flex;flex-wrap:wrap;column-gap:5px;row-gap:5px}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$4.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "directive", type: i5$1.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i6$6.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i7$7.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["description", "bold", "medium"] }, { kind: "component", type: i3$7.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$7.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$7.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove"], outputs: ["remove"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"\n        showPayamClass;\n        context: {\n            $implicit: data,\n            primary: !data.$details?.length,\n            isFirst: true\n        }\n    \"\n>\n</ng-container>\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            namayeshPayam;\n            context: {\n                $implicit: data.payam.Subject,\n                fromText: data.payam.FromText,\n                toText: data.$toText,\n                importance: data.$importance,\n                readDate: data.$readDate,\n                sendDate: data.$sendDate,\n                ccText: data.$ccText,\n                bccText: data.$bccText,\n                accessLevel: data.$accessLevel,\n                content: data.$content,\n                fromPhoto: data.$fromPhoto,\n                details: data.$details,\n                attachments: data.$attachments,\n                todo: data.$todo,\n                customText: data.payam.CustomText,\n                primary: primary,\n                isFirst: isFirst\n            }\n        \"\n    >\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #namayeshPayam\n    let-subject\n    let-content=\"content\"\n    let-fromText=\"fromText\"\n    let-toText=\"toText\"\n    let-importance=\"importance\"\n    let-readDate=\"readDate\"\n    let-sendDate=\"sendDate\"\n    let-ccText=\"ccText\"\n    let-bccText=\"bccText\"\n    let-fromPhoto=\"fromPhoto\"\n    let-details=\"details\"\n    let-accessLevel=\"accessLevel\"\n    let-primary=\"primary\"\n    let-isFirst=\"isFirst\"\n    let-attachments=\"attachments\"\n    let-todo=\"todo\"\n    let-customText=\"customText\"\n>\n    <fd-card cardType=\"object\">\n        <fd-card-header>\n            <fd-avatar\n                [image]=\"fromPhoto\"\n                [circle]=\"true\"\n                size=\"s\"\n                [ariaLabel]=\"fromText\"\n                [label]=\"fromText\"\n                [title]=\"fromText\"\n            ></fd-avatar>\n            <div fd-card-title class=\"header-fields\">\n                <h5 fd-title>\n                    <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\n                </h5>\n                <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\n            </div>\n            <div fd-card-subtitle>\n                <h5 fd-title>{{ subject }}</h5>\n                <fd-popover>\n                    <fd-popover-control>\n                        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">{{ 'Recievers' | bbbTranslate }}</button>\n                    </fd-popover-control>\n                    <fd-popover-body>\n                        <ul fd-list>\n                            <li fd-list-item *ngFor=\"let rec of toText\">\n                                <a fd-list-link>{{ rec }}</a>\n                            </li>\n                        </ul>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </fd-card-header>\n        <fd-card-content>\n            <fd-panel [expanded]=\"isFirst\">\n                <div fd-panel-title id=\"panel-expandable-title-1\">\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\n                    <div class=\"payamIcons\">\n                        <fd-popover *ngIf=\"importance.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ importance.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-popover *ngIf=\"accessLevel.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-info-label\n                            *ngIf=\"todo\"\n                            [label]=\"todo.text\"\n                            [color]=\"todo.color\"\n                            [title]=\"todo.text\"\n                        ></fd-info-label>\n                    </div>\n                </div>\n                <div fd-panel-content>\n                    <div *ngIf=\"customText\">\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\n                            {{ customText }}\n                        </fd-message-strip>\n                    </div>\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\n\n                    <div *ngIf=\"attachments?.length\" class=\"file-viewer-attachments\">\n                        <ng-container *ngFor=\"let file of attachments\">\n                            <bsu-file-viewer-popover\n                                *ngIf=\"!file.IsDeleted\"\n                                [file]=\"file\"\n                                [files]=\"attachments\"\n                                [deviceSize]=\"(deviceSize$ | async)!!\"\n                                [canDownload]=\"true\"\n                                [disableRemove]=\"true\"\n                            ></bsu-file-viewer-popover>\n                        </ng-container>\n                        <ng-container *ngIf=\"attachments.length > 1\">\n                            <button\n                                fd-button\n                                [title]=\"'Download' | bbbTranslate\"\n                                [glyph]=\"'download'\"\n                                downloadFiles\n                                [files]=\"attachments\"\n                            ></button>\n                        </ng-container>\n                    </div>\n                    <div class=\"readAt\">\n                        <fd-object-identifier\n                            *ngIf=\"readDate\"\n                            [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\"\n                        >\n                        </fd-object-identifier>\n                    </div>\n                </div>\n            </fd-panel>\n        </fd-card-content>\n        <!-- <fd-card-footer>\n            <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\n        </fd-card-footer> -->\n    </fd-card>\n    <ng-contianer *ngFor=\"let detail of details\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                showPayamClass;\n                context: {\n                    $implicit: detail\n                }\n            \"\n        >\n        </ng-container>\n    </ng-contianer>\n</ng-template>\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}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$5.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "directive", type: i5$1.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i6$6.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i7$7.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["description", "bold", "medium"] }, { kind: "component", type: i3$8.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$8.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType"], outputs: ["remove"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaPishnamayeshPayamComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-barsa-pishnamayesh-payam', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -11750,7 +11771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                             useFactory: getDateService$1,
                             deps: [LogService]
                         }
-                    ], template: "<ng-container\n    *ngTemplateOutlet=\"\n        showPayamClass;\n        context: {\n            $implicit: data,\n            primary: !data.$details?.length,\n            isFirst: true\n        }\n    \"\n>\n</ng-container>\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            namayeshPayam;\n            context: {\n                $implicit: data.payam.Subject,\n                fromText: data.payam.FromText,\n                toText: data.$toText,\n                importance: data.$importance,\n                readDate: data.$readDate,\n                sendDate: data.$sendDate,\n                ccText: data.$ccText,\n                bccText: data.$bccText,\n                accessLevel: data.$accessLevel,\n                content: data.$content,\n                fromPhoto: data.$fromPhoto,\n                details: data.$details,\n                attachments: data.$attachments,\n                todo: data.$todo,\n                customText: data.payam.CustomText,\n                primary: primary,\n                isFirst: isFirst\n            }\n        \"\n    >\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #namayeshPayam\n    let-subject\n    let-content=\"content\"\n    let-fromText=\"fromText\"\n    let-toText=\"toText\"\n    let-importance=\"importance\"\n    let-readDate=\"readDate\"\n    let-sendDate=\"sendDate\"\n    let-ccText=\"ccText\"\n    let-bccText=\"bccText\"\n    let-fromPhoto=\"fromPhoto\"\n    let-details=\"details\"\n    let-accessLevel=\"accessLevel\"\n    let-primary=\"primary\"\n    let-isFirst=\"isFirst\"\n    let-attachments=\"attachments\"\n    let-todo=\"todo\"\n    let-customText=\"customText\"\n>\n    <fd-card cardType=\"object\">\n        <fd-card-header>\n            <fd-avatar\n                [image]=\"fromPhoto\"\n                [circle]=\"true\"\n                size=\"s\"\n                [ariaLabel]=\"fromText\"\n                [label]=\"fromText\"\n                [title]=\"fromText\"\n            ></fd-avatar>\n            <div fd-card-title class=\"header-fields\">\n                <h5 fd-title>\n                    <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\n                </h5>\n                <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\n            </div>\n            <div fd-card-subtitle>\n                <h5 fd-title>{{ subject }}</h5>\n                <fd-popover>\n                    <fd-popover-control>\n                        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">{{ 'Recievers' | bbbTranslate }}</button>\n                    </fd-popover-control>\n                    <fd-popover-body>\n                        <ul fd-list>\n                            <li fd-list-item *ngFor=\"let rec of toText\">\n                                <a fd-list-link>{{ rec }}</a>\n                            </li>\n                        </ul>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </fd-card-header>\n        <fd-card-content>\n            <fd-panel [expanded]=\"isFirst\">\n                <div fd-panel-title id=\"panel-expandable-title-1\">\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\n                    <div class=\"payamIcons\">\n                        <fd-popover *ngIf=\"importance.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ importance.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-popover *ngIf=\"accessLevel.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-info-label\n                            *ngIf=\"todo\"\n                            [label]=\"todo.text\"\n                            [color]=\"todo.color\"\n                            [title]=\"todo.text\"\n                        ></fd-info-label>\n                    </div>\n                </div>\n                <div fd-panel-content>\n                    <div *ngIf=\"customText\">\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\n                            {{ customText }}\n                        </fd-message-strip>\n                    </div>\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\n\n                    <div *ngIf=\"attachments?.length\" class=\"attachments\">\n                        <ng-container *ngFor=\"let file of attachments\">\n                            <bsu-file-viewer-popover\n                                *ngIf=\"!file.IsDeleted\"\n                                [file]=\"file\"\n                                [files]=\"attachments\"\n                                [deviceSize]=\"(deviceSize$ | async)!!\"\n                                [canDownload]=\"true\"\n                                [disableRemove]=\"true\"\n                            ></bsu-file-viewer-popover>\n                        </ng-container>\n                        <ng-container *ngIf=\"attachments.length > 1\">\n                            <button\n                                fd-button\n                                [title]=\"'Download' | bbbTranslate\"\n                                [glyph]=\"'download'\"\n                                downloadFiles\n                                [files]=\"attachments\"\n                            ></button>\n                        </ng-container>\n                    </div>\n                    <div class=\"readAt\">\n                        <fd-object-identifier\n                            *ngIf=\"readDate\"\n                            [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\"\n                        >\n                        </fd-object-identifier>\n                    </div>\n                </div>\n            </fd-panel>\n        </fd-card-content>\n        <!-- <fd-card-footer>\n            <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\n        </fd-card-footer> -->\n    </fd-card>\n    <ng-contianer *ngFor=\"let detail of details\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                showPayamClass;\n                context: {\n                    $implicit: detail\n                }\n            \"\n        >\n        </ng-container>\n    </ng-contianer>\n</ng-template>\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}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}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}.attachments{display:flex;flex-wrap:wrap;column-gap:5px;row-gap:5px}.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"] }]
+                    ], template: "<ng-container\n    *ngTemplateOutlet=\"\n        showPayamClass;\n        context: {\n            $implicit: data,\n            primary: !data.$details?.length,\n            isFirst: true\n        }\n    \"\n>\n</ng-container>\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            namayeshPayam;\n            context: {\n                $implicit: data.payam.Subject,\n                fromText: data.payam.FromText,\n                toText: data.$toText,\n                importance: data.$importance,\n                readDate: data.$readDate,\n                sendDate: data.$sendDate,\n                ccText: data.$ccText,\n                bccText: data.$bccText,\n                accessLevel: data.$accessLevel,\n                content: data.$content,\n                fromPhoto: data.$fromPhoto,\n                details: data.$details,\n                attachments: data.$attachments,\n                todo: data.$todo,\n                customText: data.payam.CustomText,\n                primary: primary,\n                isFirst: isFirst\n            }\n        \"\n    >\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #namayeshPayam\n    let-subject\n    let-content=\"content\"\n    let-fromText=\"fromText\"\n    let-toText=\"toText\"\n    let-importance=\"importance\"\n    let-readDate=\"readDate\"\n    let-sendDate=\"sendDate\"\n    let-ccText=\"ccText\"\n    let-bccText=\"bccText\"\n    let-fromPhoto=\"fromPhoto\"\n    let-details=\"details\"\n    let-accessLevel=\"accessLevel\"\n    let-primary=\"primary\"\n    let-isFirst=\"isFirst\"\n    let-attachments=\"attachments\"\n    let-todo=\"todo\"\n    let-customText=\"customText\"\n>\n    <fd-card cardType=\"object\">\n        <fd-card-header>\n            <fd-avatar\n                [image]=\"fromPhoto\"\n                [circle]=\"true\"\n                size=\"s\"\n                [ariaLabel]=\"fromText\"\n                [label]=\"fromText\"\n                [title]=\"fromText\"\n            ></fd-avatar>\n            <div fd-card-title class=\"header-fields\">\n                <h5 fd-title>\n                    <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\n                </h5>\n                <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\n            </div>\n            <div fd-card-subtitle>\n                <h5 fd-title>{{ subject }}</h5>\n                <fd-popover>\n                    <fd-popover-control>\n                        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">{{ 'Recievers' | bbbTranslate }}</button>\n                    </fd-popover-control>\n                    <fd-popover-body>\n                        <ul fd-list>\n                            <li fd-list-item *ngFor=\"let rec of toText\">\n                                <a fd-list-link>{{ rec }}</a>\n                            </li>\n                        </ul>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </fd-card-header>\n        <fd-card-content>\n            <fd-panel [expanded]=\"isFirst\">\n                <div fd-panel-title id=\"panel-expandable-title-1\">\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\n                    <div class=\"payamIcons\">\n                        <fd-popover *ngIf=\"importance.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ importance.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-popover *ngIf=\"accessLevel.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-info-label\n                            *ngIf=\"todo\"\n                            [label]=\"todo.text\"\n                            [color]=\"todo.color\"\n                            [title]=\"todo.text\"\n                        ></fd-info-label>\n                    </div>\n                </div>\n                <div fd-panel-content>\n                    <div *ngIf=\"customText\">\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\n                            {{ customText }}\n                        </fd-message-strip>\n                    </div>\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\n\n                    <div *ngIf=\"attachments?.length\" class=\"file-viewer-attachments\">\n                        <ng-container *ngFor=\"let file of attachments\">\n                            <bsu-file-viewer-popover\n                                *ngIf=\"!file.IsDeleted\"\n                                [file]=\"file\"\n                                [files]=\"attachments\"\n                                [deviceSize]=\"(deviceSize$ | async)!!\"\n                                [canDownload]=\"true\"\n                                [disableRemove]=\"true\"\n                            ></bsu-file-viewer-popover>\n                        </ng-container>\n                        <ng-container *ngIf=\"attachments.length > 1\">\n                            <button\n                                fd-button\n                                [title]=\"'Download' | bbbTranslate\"\n                                [glyph]=\"'download'\"\n                                downloadFiles\n                                [files]=\"attachments\"\n                            ></button>\n                        </ng-container>\n                    </div>\n                    <div class=\"readAt\">\n                        <fd-object-identifier\n                            *ngIf=\"readDate\"\n                            [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\"\n                        >\n                        </fd-object-identifier>\n                    </div>\n                </div>\n            </fd-panel>\n        </fd-card-content>\n        <!-- <fd-card-footer>\n            <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\n        </fd-card-footer> -->\n    </fd-card>\n    <ng-contianer *ngFor=\"let detail of details\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                showPayamClass;\n                context: {\n                    $implicit: detail\n                }\n            \"\n        >\n        </ng-container>\n    </ng-contianer>\n</ng-template>\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}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}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) {