barsa-sap-ui 3.0.2 → 3.0.3

package/fesm2022/barsa-sap-ui.mjs

@@ -4,12 +4,12 @@ import { Subject, merge, fromEvent, EMPTY, combineLatest, of, BehaviorSubject, t
 import { takeUntil, tap, filter, map, distinctUntilChanged, debounceTime, take, throttleTime, withLatestFrom, exhaustMap, finalize, first, switchMap, delay as delay$1, concatMap as concatMap$1, catchError } from 'rxjs/operators';
 import * as i4 from '@fundamental-ngx/platform';
 import { ComboboxComponent, IconTabBarComponent, PlatformComboboxModule, PlatformIconTabBarModule } from '@fundamental-ngx/platform';
-import * as i2 from 'barsa-novin-ray-core';
-import { getUniqueId, BaseComponent, ReportViewBaseComponent, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, BbbTranslatePipe, LayoutService, measureText, getLabelWidth, searchEx, multilevelSort, SortDirection, sortEx, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, DEFAULT_REPORT_LAYOUT_POLICY, ScrollLayoutContextHolder, EntitySettingsStore, FormPanelService, LayoutMainContentService, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, FieldBaseComponent, PortalService, getDateService as getDateService$1, DateService, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, DynamicDarkColorPipe, EllipsifyDirective, createGridEditorFormPanel, executeUlvCommandHandler, TabpageService, LocalStorageService, CalendarSettingsStore, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, PictureFieldSourcePipe, RotateImage, isImage, getIcon, GetViewableExtensions, UploadService, ColumnRendererBase, LayoutPanelBaseComponent, UlvMainService, scrollLayoutModeToContextEnvironment, getReportTypeDefaultPolicy, extractLayoutPolicyFromView, resolveReportLayoutPolicy, BaseColumnPropsComponent, ColumnService, BaseViewContentPropsComponent, CardViewService, enumValueToStringSize, PreventDefaulEvent, setTableThWidth, TableHeaderWidthMode, DEFAULT_OBJECT_ICON, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, shouldUseFreeColumnSize, calculateColumnWidth, calculateColumnContent, calculateColumnWidthFitToContainer, calculateFreeColumnSize, UlvHeightSizeType, NotificationService, DateRanges, EnumCaptionPipe, LogService, BreadcrumbService, RoutingService, isFirefox, IsDarkMode, isFunction, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, FormBaseComponent, BaseController, TEMPLATE_ENGINE, getFieldValue, FindColumnsPipe, FieldViewBase, ContainerComponent, DialogParams, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, hhmmToMs, FormPropsBaseComponent, UiService, measureText2, NumberBaseComponent, getColumnValueOfMoDataList, ImageMimeType, BaseFormToolbaritemPropsComponent, NetworkStatusService, isInLocalMode, FillAllLayoutControls, ApplicationCtrlrService, ReportNavigatorComponent, DeviceWidth, FORM_DIALOG_COMPONENT, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule, ResizableModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { UntypedFormBuilder, UntypedFormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from 'barsa-novin-ray-core';
+import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, BbbTranslatePipe, LayoutService, measureText, getLabelWidth, searchEx, multilevelSort, SortDirection, sortEx, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, DEFAULT_REPORT_LAYOUT_POLICY, ScrollLayoutContextHolder, EntitySettingsStore, FormPanelService, LayoutMainContentService, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, FieldBaseComponent, PortalService, getDateService as getDateService$1, DateService, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, DynamicDarkColorPipe, EllipsifyDirective, createGridEditorFormPanel, executeUlvCommandHandler, TabpageService, LocalStorageService, CalendarSettingsStore, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, PictureFieldSourcePipe, RotateImage, isImage, getIcon, GetViewableExtensions, UploadService, ColumnRendererBase, LayoutPanelBaseComponent, UlvMainService, scrollLayoutModeToContextEnvironment, getReportTypeDefaultPolicy, extractLayoutPolicyFromView, resolveReportLayoutPolicy, BaseColumnPropsComponent, ColumnService, BaseViewContentPropsComponent, CardViewService, enumValueToStringSize, PreventDefaulEvent, setTableThWidth, TableHeaderWidthMode, DEFAULT_OBJECT_ICON, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, shouldUseFreeColumnSize, calculateColumnWidth, calculateColumnContent, calculateColumnWidthFitToContainer, calculateFreeColumnSize, UlvHeightSizeType, NotificationService, DateRanges, EnumCaptionPipe, LogService, BreadcrumbService, RoutingService, isFirefox, IsDarkMode, isFunction, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, FormBaseComponent, BaseController, TEMPLATE_ENGINE, getFieldValue, FindColumnsPipe, FieldViewBase, ContainerComponent, DialogParams, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, hhmmToMs, FormPropsBaseComponent, UiService, measureText2, NumberBaseComponent, getColumnValueOfMoDataList, ImageMimeType, BaseFormToolbaritemPropsComponent, NetworkStatusService, isInLocalMode, FillAllLayoutControls, ApplicationCtrlrService, ReportNavigatorComponent, DeviceWidth, FORM_DIALOG_COMPONENT, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule, ResizableModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
 import { DataProvider, ComboBoxDataSource } from '@fundamental-ngx/platform/shared';
 import moment from 'moment';
 import jmoment from 'moment-jalaali';
@@ -46,16 +46,16 @@ import * as i3$3 from '@fundamental-ngx/core/content-density';
 import * as i1$5 from '@fundamental-ngx/core/illustrated-message';
 import * as i4$4 from '@fundamental-ngx/core/avatar';
 import * as i5$3 from '@fundamental-ngx/core/text';
-import * as i2$6 from '@angular/cdk/scrolling';
-import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i7$2 from '@fundamental-ngx/core/card';
 import * as i3$4 from 'ng2-pdfjs-viewer';
 import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';
 import * as i10 from '@fundamental-ngx/core/layout-grid';
-import * as i2$7 from '@fundamental-ngx/core/link';
+import * as i2$6 from '@fundamental-ngx/core/link';
 import * as i12 from '@fundamental-ngx/core/quick-view';
 import * as i8$1 from '@fundamental-ngx/core/object-status';
 import * as i10$1 from '@fundamental-ngx/core/token';
+import * as i2$7 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i2$8 from '@fundamental-ngx/core/message-strip';
 import * as i4$5 from '@fundamental-ngx/core/notification';
 import { NotificationRef } from '@fundamental-ngx/core/notification';
@@ -139,7 +139,6 @@ class FundamentalComboComponent {
         this.openChange = new EventEmitter();
         this.dataRequested = new EventEmitter();
         this.dataReceived = new EventEmitter();
-        this.comboboxId = getUniqueId(3);
         this._onDestroy$ = new Subject();
         this._pendingNativeSelectionKeyUps = new Set();
         this._pendingNavigationSelection = null;
@@ -298,21 +297,21 @@ class FundamentalComboComponent {
         return !!option && this._isComboListTarget(option);
     }
     _isComboListTarget(target) {
-        return target?.closest?.('[role="listbox"]')?.id === `${this.comboboxId}-result`;
+        return target?.closest?.('[role="listbox"]')?.id === `${this.id}-result`;
     }
     _isComboListVisible(input) {
-        const list = input?.ownerDocument.getElementById(`${this.comboboxId}-result`);
+        const list = input?.ownerDocument.getElementById(`${this.id}-result`);
         return !!list && (list.getClientRects().length > 0 || list.offsetParent !== null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FundamentalComboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FundamentalComboComponent, isStandalone: false, selector: "bsu-fundamental-combo", inputs: { dataSource: "dataSource", value: "value", displayKey: "displayKey", lookupKey: "lookupKey", byline: "byline", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", mobile: "mobile", mobileConfig: "mobileConfig", isLtr: "isLtr", showDropdownButton: "showDropdownButton", itemTemplate: "itemTemplate", allowFreeText: "allowFreeText", width: "width", comboClass: "comboClass", fillControlMode: "fillControlMode", tabOutStrategy: "tabOutStrategy", closeOnOutsideClick: "closeOnOutsideClick" }, outputs: { selectionChange: "selectionChange", cleared: "cleared", openChange: "openChange", dataRequested: "dataRequested", dataReceived: "dataReceived" }, host: { properties: { "attr.dir": "isLtr ? 'ltr' : null", "class.hide-dropdown-button": "!showDropdownButton" } }, viewQueries: [{ propertyName: "fdComboRef", first: true, predicate: ComboboxComponent, descendants: true }], ngImport: i0, template: "<fdp-combobox\n    #fdCombobox\n    [ngClass]=\"comboClass\"\n    [id]=\"comboboxId\"\n    [name]=\"comboboxId\"\n    [width]=\"width\"\n    [placeholder]=\"placeholder\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [tabOutStrategy]=\"tabOutStrategy\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [dataSource]=\"dataSource\"\n    [lookupKey]=\"lookupKey\"\n    [displayKey]=\"displayKey\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [byline]=\"byline\"\n    [fillControlMode]=\"fillControlMode\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (onDataRequested)=\"onComboDataRequested()\"\n    (onDataReceived)=\"onComboDataReceived()\"\n>\n    <!--\n        \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 \u0622\u06CC\u062A\u0645 \u0628\u0627\u06CC\u062F \u0645\u0633\u062A\u0642\u06CC\u0645\u0627\u064B \u0641\u0631\u0632\u0646\u062F\u0650 \u0645\u062D\u062A\u0648\u0627\u06CC\u0650 fdp-combobox \u0628\u0627\u0634\u062F \u0686\u0648\u0646 fdp \u0628\u0627\n        @ContentChildren(FDP_COMBOBOX_ITEM_DEF) \u0622\u0646 \u0631\u0627 \u0645\u06CC\u200C\u062E\u0648\u0627\u0646\u062F \u0648 \u0627\u0632 \u062F\u0627\u062E\u0644\u0650 <ng-content>\u0650 wrapper\n        \u0639\u0628\u0648\u0631 \u0646\u0645\u06CC\u200C\u06A9\u0646\u062F. \u067E\u0633 directive \u0631\u0627 \u0647\u0645\u06CC\u0646\u200C\u062C\u0627 \u062F\u0631 \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 wrapper \u0627\u0639\u0644\u0627\u0645 \u0645\u06CC\u200C\u06A9\u0646\u06CC\u0645 \u0648 \u0628\u0647 itemTemplate\u0650\n        \u0645\u0635\u0631\u0641\u200C\u06A9\u0646\u0646\u062F\u0647 forward \u0645\u06CC\u200C\u06A9\u0646\u06CC\u0645.\n    -->\n    @if (itemTemplate) {\n        <ng-template fdpComboboxItem let-item let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: index }\"\n            ></ng-container>\n        </ng-template>\n    }\n    <!-- \u0641\u0648\u062A\u0631\u0650 \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC \u0648 \u0633\u0627\u06CC\u0631 \u0645\u062D\u062A\u0648\u0627\u06CC\u0650 \u0644\u06CC\u0633\u062A \u0627\u0632 \u0637\u0631\u06CC\u0642 <ng-content> \u062A\u0632\u0631\u06CC\u0642 \u0645\u06CC\u200C\u0634\u0648\u0646\u062F. -->\n    <ng-content></ng-content>\n</fdp-combobox>\n", styles: [":host{display:block;width:100%}:host fdp-combobox{display:block;width:100%}:host fdp-combobox ::ng-deep>fd-popover{width:100%}:host.hide-dropdown-button fdp-combobox ::ng-deep .fd-input-group__addon.fd-input-group__addon--button{display:none!important}::ng-deep .fdp-combobox__count-list-results{display:none}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer){display:flex!important;flex-direction:column}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.combo-paging-footer{order:1}::ng-deep .fdp-combobox__list:has([data-report-option])>.fd-list__item:has([data-report-option]){border-block-end:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i4.ComboboxComponent, selector: "fdp-combobox", outputs: ["selectionChange"] }, { kind: "directive", type: i4.ComboboxItemDirective, selector: "[fdpComboboxItem]", inputs: ["fdpComboboxItemUse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FundamentalComboComponent, isStandalone: false, selector: "bsu-fundamental-combo", inputs: { dataSource: "dataSource", value: "value", displayKey: "displayKey", lookupKey: "lookupKey", byline: "byline", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", mobile: "mobile", mobileConfig: "mobileConfig", isLtr: "isLtr", id: "id", showDropdownButton: "showDropdownButton", itemTemplate: "itemTemplate", allowFreeText: "allowFreeText", width: "width", comboClass: "comboClass", fillControlMode: "fillControlMode", tabOutStrategy: "tabOutStrategy", closeOnOutsideClick: "closeOnOutsideClick" }, outputs: { selectionChange: "selectionChange", cleared: "cleared", openChange: "openChange", dataRequested: "dataRequested", dataReceived: "dataReceived" }, host: { properties: { "attr.dir": "isLtr ? 'ltr' : null", "class.hide-dropdown-button": "!showDropdownButton" } }, viewQueries: [{ propertyName: "fdComboRef", first: true, predicate: ComboboxComponent, descendants: true }], ngImport: i0, template: "<fdp-combobox\n    #fdCombobox\n    [ngClass]=\"comboClass\"\n    [id]=\"id\"\n    [name]=\"id\"\n    [width]=\"width\"\n    [placeholder]=\"placeholder\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [tabOutStrategy]=\"tabOutStrategy\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [dataSource]=\"dataSource\"\n    [lookupKey]=\"lookupKey\"\n    [displayKey]=\"displayKey\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [byline]=\"byline\"\n    [fillControlMode]=\"fillControlMode\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (onDataRequested)=\"onComboDataRequested()\"\n    (onDataReceived)=\"onComboDataReceived()\"\n>\n    <!--\n        \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 \u0622\u06CC\u062A\u0645 \u0628\u0627\u06CC\u062F \u0645\u0633\u062A\u0642\u06CC\u0645\u0627\u064B \u0641\u0631\u0632\u0646\u062F\u0650 \u0645\u062D\u062A\u0648\u0627\u06CC\u0650 fdp-combobox \u0628\u0627\u0634\u062F \u0686\u0648\u0646 fdp \u0628\u0627\n        @ContentChildren(FDP_COMBOBOX_ITEM_DEF) \u0622\u0646 \u0631\u0627 \u0645\u06CC\u200C\u062E\u0648\u0627\u0646\u062F \u0648 \u0627\u0632 \u062F\u0627\u062E\u0644\u0650 <ng-content>\u0650 wrapper\n        \u0639\u0628\u0648\u0631 \u0646\u0645\u06CC\u200C\u06A9\u0646\u062F. \u067E\u0633 directive \u0631\u0627 \u0647\u0645\u06CC\u0646\u200C\u062C\u0627 \u062F\u0631 \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 wrapper \u0627\u0639\u0644\u0627\u0645 \u0645\u06CC\u200C\u06A9\u0646\u06CC\u0645 \u0648 \u0628\u0647 itemTemplate\u0650\n        \u0645\u0635\u0631\u0641\u200C\u06A9\u0646\u0646\u062F\u0647 forward \u0645\u06CC\u200C\u06A9\u0646\u06CC\u0645.\n    -->\n    @if (itemTemplate) {\n        <ng-template fdpComboboxItem let-item let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: index }\"\n            ></ng-container>\n        </ng-template>\n    }\n    <!-- \u0641\u0648\u062A\u0631\u0650 \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC \u0648 \u0633\u0627\u06CC\u0631 \u0645\u062D\u062A\u0648\u0627\u06CC\u0650 \u0644\u06CC\u0633\u062A \u0627\u0632 \u0637\u0631\u06CC\u0642 <ng-content> \u062A\u0632\u0631\u06CC\u0642 \u0645\u06CC\u200C\u0634\u0648\u0646\u062F. -->\n    <ng-content></ng-content>\n</fdp-combobox>\n", styles: [":host{display:block;width:100%}:host fdp-combobox{display:block;width:100%}:host fdp-combobox ::ng-deep>fd-popover{width:100%}:host.hide-dropdown-button fdp-combobox ::ng-deep .fd-input-group__addon.fd-input-group__addon--button{display:none!important}::ng-deep .fdp-combobox__count-list-results{display:none}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer){display:flex!important;flex-direction:column}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.combo-paging-footer{order:1}::ng-deep .fdp-combobox__list:has([data-report-option])>.fd-list__item:has([data-report-option]){border-block-end:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i4.ComboboxComponent, selector: "fdp-combobox", outputs: ["selectionChange"] }, { kind: "directive", type: i4.ComboboxItemDirective, selector: "[fdpComboboxItem]", inputs: ["fdpComboboxItemUse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FundamentalComboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-fundamental-combo', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.dir]': "isLtr ? 'ltr' : null",
                         '[class.hide-dropdown-button]': '!showDropdownButton'
-                    }, standalone: false, template: "<fdp-combobox\n    #fdCombobox\n    [ngClass]=\"comboClass\"\n    [id]=\"comboboxId\"\n    [name]=\"comboboxId\"\n    [width]=\"width\"\n    [placeholder]=\"placeholder\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [tabOutStrategy]=\"tabOutStrategy\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [dataSource]=\"dataSource\"\n    [lookupKey]=\"lookupKey\"\n    [displayKey]=\"displayKey\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [byline]=\"byline\"\n    [fillControlMode]=\"fillControlMode\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (onDataRequested)=\"onComboDataRequested()\"\n    (onDataReceived)=\"onComboDataReceived()\"\n>\n    <!--\n        \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 \u0622\u06CC\u062A\u0645 \u0628\u0627\u06CC\u062F \u0645\u0633\u062A\u0642\u06CC\u0645\u0627\u064B \u0641\u0631\u0632\u0646\u062F\u0650 \u0645\u062D\u062A\u0648\u0627\u06CC\u0650 fdp-combobox \u0628\u0627\u0634\u062F \u0686\u0648\u0646 fdp \u0628\u0627\n        @ContentChildren(FDP_COMBOBOX_ITEM_DEF) \u0622\u0646 \u0631\u0627 \u0645\u06CC\u200C\u062E\u0648\u0627\u0646\u062F \u0648 \u0627\u0632 \u062F\u0627\u062E\u0644\u0650 <ng-content>\u0650 wrapper\n        \u0639\u0628\u0648\u0631 \u0646\u0645\u06CC\u200C\u06A9\u0646\u062F. \u067E\u0633 directive \u0631\u0627 \u0647\u0645\u06CC\u0646\u200C\u062C\u0627 \u062F\u0631 \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 wrapper \u0627\u0639\u0644\u0627\u0645 \u0645\u06CC\u200C\u06A9\u0646\u06CC\u0645 \u0648 \u0628\u0647 itemTemplate\u0650\n        \u0645\u0635\u0631\u0641\u200C\u06A9\u0646\u0646\u062F\u0647 forward \u0645\u06CC\u200C\u06A9\u0646\u06CC\u0645.\n    -->\n    @if (itemTemplate) {\n        <ng-template fdpComboboxItem let-item let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: index }\"\n            ></ng-container>\n        </ng-template>\n    }\n    <!-- \u0641\u0648\u062A\u0631\u0650 \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC \u0648 \u0633\u0627\u06CC\u0631 \u0645\u062D\u062A\u0648\u0627\u06CC\u0650 \u0644\u06CC\u0633\u062A \u0627\u0632 \u0637\u0631\u06CC\u0642 <ng-content> \u062A\u0632\u0631\u06CC\u0642 \u0645\u06CC\u200C\u0634\u0648\u0646\u062F. -->\n    <ng-content></ng-content>\n</fdp-combobox>\n", styles: [":host{display:block;width:100%}:host fdp-combobox{display:block;width:100%}:host fdp-combobox ::ng-deep>fd-popover{width:100%}:host.hide-dropdown-button fdp-combobox ::ng-deep .fd-input-group__addon.fd-input-group__addon--button{display:none!important}::ng-deep .fdp-combobox__count-list-results{display:none}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer){display:flex!important;flex-direction:column}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.combo-paging-footer{order:1}::ng-deep .fdp-combobox__list:has([data-report-option])>.fd-list__item:has([data-report-option]){border-block-end:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}\n"] }]
+                    }, standalone: false, template: "<fdp-combobox\n    #fdCombobox\n    [ngClass]=\"comboClass\"\n    [id]=\"id\"\n    [name]=\"id\"\n    [width]=\"width\"\n    [placeholder]=\"placeholder\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [tabOutStrategy]=\"tabOutStrategy\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [dataSource]=\"dataSource\"\n    [lookupKey]=\"lookupKey\"\n    [displayKey]=\"displayKey\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [byline]=\"byline\"\n    [fillControlMode]=\"fillControlMode\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (onDataRequested)=\"onComboDataRequested()\"\n    (onDataReceived)=\"onComboDataReceived()\"\n>\n    <!--\n        \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 \u0622\u06CC\u062A\u0645 \u0628\u0627\u06CC\u062F \u0645\u0633\u062A\u0642\u06CC\u0645\u0627\u064B \u0641\u0631\u0632\u0646\u062F\u0650 \u0645\u062D\u062A\u0648\u0627\u06CC\u0650 fdp-combobox \u0628\u0627\u0634\u062F \u0686\u0648\u0646 fdp \u0628\u0627\n        @ContentChildren(FDP_COMBOBOX_ITEM_DEF) \u0622\u0646 \u0631\u0627 \u0645\u06CC\u200C\u062E\u0648\u0627\u0646\u062F \u0648 \u0627\u0632 \u062F\u0627\u062E\u0644\u0650 <ng-content>\u0650 wrapper\n        \u0639\u0628\u0648\u0631 \u0646\u0645\u06CC\u200C\u06A9\u0646\u062F. \u067E\u0633 directive \u0631\u0627 \u0647\u0645\u06CC\u0646\u200C\u062C\u0627 \u062F\u0631 \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 wrapper \u0627\u0639\u0644\u0627\u0645 \u0645\u06CC\u200C\u06A9\u0646\u06CC\u0645 \u0648 \u0628\u0647 itemTemplate\u0650\n        \u0645\u0635\u0631\u0641\u200C\u06A9\u0646\u0646\u062F\u0647 forward \u0645\u06CC\u200C\u06A9\u0646\u06CC\u0645.\n    -->\n    @if (itemTemplate) {\n        <ng-template fdpComboboxItem let-item let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: index }\"\n            ></ng-container>\n        </ng-template>\n    }\n    <!-- \u0641\u0648\u062A\u0631\u0650 \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC \u0648 \u0633\u0627\u06CC\u0631 \u0645\u062D\u062A\u0648\u0627\u06CC\u0650 \u0644\u06CC\u0633\u062A \u0627\u0632 \u0637\u0631\u06CC\u0642 <ng-content> \u062A\u0632\u0631\u06CC\u0642 \u0645\u06CC\u200C\u0634\u0648\u0646\u062F. -->\n    <ng-content></ng-content>\n</fdp-combobox>\n", styles: [":host{display:block;width:100%}:host fdp-combobox{display:block;width:100%}:host fdp-combobox ::ng-deep>fd-popover{width:100%}:host.hide-dropdown-button fdp-combobox ::ng-deep .fd-input-group__addon.fd-input-group__addon--button{display:none!important}::ng-deep .fdp-combobox__count-list-results{display:none}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer){display:flex!important;flex-direction:column}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.combo-paging-footer{order:1}::ng-deep .fdp-combobox__list:has([data-report-option])>.fd-list__item:has([data-report-option]){border-block-end:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}\n"] }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], value: [{
@@ -335,6 +334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], isLtr: [{
                 type: Input
+            }], id: [{
+                type: Input
             }], showDropdownButton: [{
                 type: Input
             }], itemTemplate: [{
@@ -1230,7 +1231,11 @@ class LayoutControlComponent extends LayoutItemBaseComponent {
             if (MaxSize?.width > 0 && !this.isCheckbox) {
                 this.maxWidth = MaxSize.width + extraVal + 'px';
             }
-            if (MinSize?.width > 0) {
+            if (this.isCheckbox) {
+                // مینِ سرور برای چک‌باکس فقط اندازه‌ی مربع است و اجازه می‌دهد کپشن جدا بیفتد
+                this.minWidth = 'max-content';
+            }
+            else if (MinSize?.width > 0) {
                 this.minWidth = MinSize.width + extraVal + 'px';
             }
         }
@@ -1331,6 +1336,13 @@ class LayoutControlComponent extends LayoutItemBaseComponent {
     }
     _setFlex(flex) {
         if (typeof flex !== 'undefined') {
+            if (this.config?.FieldUi?.originalXtype === 'Ui.CheckBox' && !this.isMobile) {
+                // چک‌باکس اتمیک: از مدل «وزنِ grow» خارج می‌شود تا هیچ‌وقت زیرِ عرضِ محتوایش له نشود
+                this._renderer2.setStyle(this._el.nativeElement, 'flex', '0 0 auto');
+                this._renderer2.setStyle(this._el.nativeElement, 'width', 'auto');
+                this._renderer2.setStyle(this._el.nativeElement, 'min-width', 'max-content');
+                return;
+            }
             if (!this.isMobile || this.config.FieldUi.originalXtype !== 'Ui.TextArea')
                 this._renderer2.setStyle(this._el.nativeElement, 'flex', flex);
         }
@@ -4992,14 +5004,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 args: ['style.height']
             }] } });
 
+/** Sentinel id for the section holding files that do not belong to any group. */
+const UNGROUPED_ID = '__ungrouped__';
 class FileGalleryViewerComponent extends BaseComponent {
-    set thumbnailViewport(viewport) {
-        this._thumbnailViewport = viewport;
-        this._scheduleThumbnailViewportRefresh();
-    }
-    get thumbnailViewport() {
-        return this._thumbnailViewport;
-    }
     /**
      *
      */
@@ -5013,13 +5020,15 @@ class FileGalleryViewerComponent extends BaseComponent {
         ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
         this.selectedIdChange = new EventEmitter();
         this.changeOrder = new EventEmitter();
-        this.thumbnailItemSize = 112;
-        this.thumbnailMinBufferPx = 224;
-        this.thumbnailMaxBufferPx = 448;
+        /** Flat, group-ordered list used by the large preview gallery. */
         this.thumbnailFiles = [];
+        /** Grouped, collapsible sections used by the thumbnail strip. */
+        this.thumbnailGroups = [];
         this._renderer2 = inject(Renderer2);
         this._selectedIdChange$ = new Subject();
-        this._thumbnailViewportRefreshQueued = false;
+        this._collapsedGroupIds = new Set();
+        this._knownGroupIds = new Set();
+        this._groupCollapseInitialized = false;
         effect(() => {
             const id = this.selectedId();
             if (!id) {
@@ -5059,19 +5068,28 @@ class FileGalleryViewerComponent extends BaseComponent {
             return;
         }
         this._selectedIndexChanged(media.Id);
-        // if (this.isImageGallery) {
-        //     this.gallery.nativeElement.querySelector('[id="' + String(index) + '"]')?.scrollIntoView(true);
-        // }
+    }
+    /** Whether the strip renders collapsible group headers (only meaningful for the vertical strip). */
+    get thumbnailGrouped() {
+        return !this.isHorizontal && (this.groupList?.length ?? 0) > 0;
+    }
+    toggleGroup(id) {
+        if (this._collapsedGroupIds.has(id)) {
+            this._collapsedGroupIds.delete(id);
+        }
+        else {
+            this._collapsedGroupIds.add(id);
+        }
+    }
+    isGroupCollapsed(id) {
+        return this._collapsedGroupIds.has(id);
     }
     dropItem(event) {
+        // Each section is its own drop list, so the indices are relative to that section's files.
+        const sectionFiles = event.container.data ?? [];
         const draggedFile = event.item.data;
-        const renderedRange = this.thumbnailViewport?.getRenderedRange();
-        const renderedStart = renderedRange?.start ?? 0;
-        const renderedLength = renderedRange ? renderedRange.end - renderedRange.start : this.thumbnailFiles.length;
-        const targetOffset = Math.min(event.currentIndex, Math.max(0, renderedLength - 1));
-        const targetFile = this.thumbnailFiles[renderedStart + targetOffset];
+        const targetFile = sectionFiles[event.currentIndex];
         if (!draggedFile || !targetFile || this.isGroupedFile(draggedFile) || this.isGroupedFile(targetFile)) {
-            this.thumbnailViewport?.checkViewportSize();
             return;
         }
         const oldIndex = this.files.indexOf(draggedFile);
@@ -5097,15 +5115,6 @@ class FileGalleryViewerComponent extends BaseComponent {
     isGroupedFile(file) {
         return !!file?.['groupId'] && file['groupId'] !== '0';
     }
-    isFirstFileOfGroup(file, index) {
-        return this.isGroupedFile(file) && this.thumbnailFiles[index - 1]?.['groupId'] !== file['groupId'];
-    }
-    getGroupName(file) {
-        return this.groupList?.find((group) => group.Id === file?.['groupId'])?.Name ?? '';
-    }
-    trackByFile(_index, file) {
-        return file.Id;
-    }
     get showThumbnailStrip() {
         return (this.thumbnailFiles.length > 0 && ((this.deviceSize !== 's' && this.isImageGallery) || this.isHorizontal));
     }
@@ -5113,11 +5122,25 @@ class FileGalleryViewerComponent extends BaseComponent {
         this._selectedIdChange$.next(id);
     }
     _scrollThumbnailInto(id) {
-        const index = this.thumbnailFiles.findIndex((file) => file.Id === id);
-        if (index < 0) {
-            return;
-        }
-        this.thumbnailViewport?.scrollToIndex(index, 'smooth');
+        queueMicrotask(() => {
+            const container = this.thumbnailScroll?.nativeElement;
+            if (!container) {
+                return;
+            }
+            // Only rendered (expanded-group) thumbnails can be scrolled to; collapsed groups are skipped.
+            const el = container.querySelector(`[data-thumb-id="${id}"]`);
+            if (!el) {
+                return;
+            }
+            const cRect = container.getBoundingClientRect();
+            const eRect = el.getBoundingClientRect();
+            if (this.isHorizontal) {
+                container.scrollTo({ left: container.scrollLeft + (eRect.left - cRect.left), behavior: 'smooth' });
+            }
+            else {
+                container.scrollTo({ top: container.scrollTop + (eRect.top - cRect.top), behavior: 'smooth' });
+            }
+        });
     }
     _applyIndexChanged(id) {
         this.scrollToId.set(id);
@@ -5130,49 +5153,83 @@ class FileGalleryViewerComponent extends BaseComponent {
         if (!viewer || !this.galleryContainer) {
             return;
         }
-        this.galleryContainer.nativeElement.scrollTo({
-            top: viewer.el.nativeElement.offsetTop,
+        const container = this.galleryContainer.nativeElement;
+        const target = viewer.el.nativeElement;
+        // `offsetTop` is measured against the element's offsetParent (here the positioned
+        // `bsu-ui-pictures-info`, not the scroll container), so it points at the wrong place
+        // and the selected image never scrolls into view. Compute the offset against the
+        // container itself via bounding rects, then center the image in the visible area
+        // (top-align it when it is taller than the viewport).
+        const targetTopWithinContent = target.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
+        const centerOffset = Math.max(0, (container.clientHeight - target.offsetHeight) / 2);
+        container.scrollTo({
+            top: Math.max(0, targetTopWithinContent - centerOffset),
             behavior: 'smooth'
         });
     }
     _refreshThumbnailFiles() {
         const files = this.files ?? [];
         const groups = this.groupList ?? [];
-        if (!groups.length) {
-            this.thumbnailFiles = [...files];
-            this._scheduleThumbnailViewportRefresh();
-            return;
-        }
         const groupedFiles = groups.flatMap((group) => files.filter((file) => file['groupId'] === group.Id));
         const ungroupedFiles = files.filter((file) => !file['groupId'] || file['groupId'] === '0');
-        this.thumbnailFiles = [...groupedFiles, ...ungroupedFiles];
-        this._scheduleThumbnailViewportRefresh();
-    }
-    _scheduleThumbnailViewportRefresh() {
-        if (this._thumbnailViewportRefreshQueued) {
+        // Flat list drives the large preview gallery.
+        this.thumbnailFiles = groups.length ? [...groupedFiles, ...ungroupedFiles] : [...files];
+        // Grouped sections drive the collapsible thumbnail strip.
+        const sections = [];
+        for (const group of groups) {
+            const gFiles = files.filter((file) => file['groupId'] === group.Id);
+            if (gFiles.length) {
+                sections.push({ id: group.Id, name: group.Name, isUngrouped: false, files: gFiles });
+            }
+        }
+        if (ungroupedFiles.length) {
+            sections.push({ id: UNGROUPED_ID, name: '', isUngrouped: true, files: ungroupedFiles });
+        }
+        this.thumbnailGroups = sections;
+        this._syncGroupCollapseState();
+    }
+    /** Groups start collapsed; the user's later choices are preserved and new groups appear collapsed. */
+    _syncGroupCollapseState() {
+        const ids = this.thumbnailGroups.map((group) => group.id);
+        const idSet = new Set(ids);
+        if (!this._groupCollapseInitialized) {
+            this._groupCollapseInitialized = true;
+            this._collapsedGroupIds = new Set(ids);
+            this._knownGroupIds = new Set(ids);
             return;
         }
-        this._thumbnailViewportRefreshQueued = true;
-        queueMicrotask(() => {
-            this._thumbnailViewportRefreshQueued = false;
-            this._thumbnailViewport?.checkViewportSize();
-        });
+        for (const id of ids) {
+            if (!this._knownGroupIds.has(id)) {
+                this._collapsedGroupIds.add(id);
+                this._knownGroupIds.add(id);
+            }
+        }
+        for (const id of [...this._collapsedGroupIds]) {
+            if (!idSet.has(id)) {
+                this._collapsedGroupIds.delete(id);
+            }
+        }
+        for (const id of [...this._knownGroupIds]) {
+            if (!idSet.has(id)) {
+                this._knownGroupIds.delete(id);
+            }
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FileGalleryViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FileGalleryViewerComponent, isStandalone: false, selector: "bsu-file-gallery-viewer", inputs: { fillWidth: { classPropertyName: "fillWidth", publicName: "fillWidth", isSignal: false, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: false, isRequired: false, transformFunction: null }, deviceSize: { classPropertyName: "deviceSize", publicName: "deviceSize", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, contentDensity: { classPropertyName: "contentDensity", publicName: "contentDensity", isSignal: false, isRequired: false, transformFunction: null }, isImageGallery: { classPropertyName: "isImageGallery", publicName: "isImageGallery", isSignal: false, isRequired: false, transformFunction: null }, isHorizontal: { classPropertyName: "isHorizontal", publicName: "isHorizontal", isSignal: false, isRequired: false, transformFunction: null }, selectedFile: { classPropertyName: "selectedFile", publicName: "selectedFile", isSignal: false, isRequired: false, transformFunction: null }, groupList: { classPropertyName: "groupList", publicName: "groupList", isSignal: false, isRequired: false, transformFunction: null }, scrollToId: { classPropertyName: "scrollToId", publicName: "scrollToId", isSignal: false, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIdChange: "selectedIdChange", changeOrder: "changeOrder" }, viewQueries: [{ propertyName: "galleryContainer", first: true, predicate: ["galleryContainer"], descendants: true, read: ElementRef }, { propertyName: "thumbnailViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "listOfFileViewerContent", predicate: ["fileViewerContent"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (isImageGallery) {\r\n<div #galleryContainer class=\"gallery inDialog\">\r\n    @for (file of thumbnailFiles; track file.Id) {\r\n    <bsu-file-viewer-content\r\n        #fileViewerContent\r\n        [attr.id]=\"'fv_gl_' + file.Id\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [file]=\"file\"\r\n        [imageOnly]=\"true\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [zoom]=\"zoom\"\r\n        [isImageGallery]=\"isImageGallery\"\r\n    ></bsu-file-viewer-content>\r\n    }\r\n</div>\r\n} @if (!isImageGallery) {\r\n<div class=\"gallery\">\r\n    @if (selectedFile) {\r\n    <bsu-file-viewer-content\r\n        [deviceSize]=\"deviceSize\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [file]=\"selectedFile\"\r\n        [isImageGallery]=\"isImageGallery\"\r\n    ></bsu-file-viewer-content>\r\n    }\r\n</div>\r\n} @if (showThumbnailStrip) {\r\n<div class=\"thumbnail\" #thumnailContainer>\r\n    <cdk-virtual-scroll-viewport\r\n        [style.height]=\"thumnailContainer.offsetHeight + 'px'\"\r\n        [class.horizontal-viewport]=\"isHorizontal\"\r\n        [class.vertical-viewport]=\"!isHorizontal\"\r\n        [itemSize]=\"thumbnailItemSize\"\r\n        [minBufferPx]=\"thumbnailMinBufferPx\"\r\n        [maxBufferPx]=\"thumnailContainer.offsetHeight\"\r\n        [orientation]=\"isHorizontal ? 'horizontal' : 'vertical'\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"thumbnailFiles\"\r\n        [cdkDropListOrientation]=\"isHorizontal ? 'horizontal' : 'vertical'\"\r\n        (cdkDropListDropped)=\"dropItem($event)\"\r\n    >\r\n        <div\r\n            *cdkVirtualFor=\"let file of thumbnailFiles; trackBy: trackByFile; let index = index; templateCacheSize: 8\"\r\n            class=\"thumbnail-item\"\r\n            [attr.aria-label]=\"file.FileName || file['label']\"\r\n            (click)=\"onMedaiClick(file)\"\r\n            cdkDrag\r\n            [cdkDragData]=\"file\"\r\n            [cdkDragDisabled]=\"isGroupedFile(file)\"\r\n            cdkDragHandle\r\n        >\r\n            @if (isFirstFileOfGroup(file, index)) {\r\n            <span class=\"thumbnail-group-label\">{{ getGroupName(file) }}</span>\r\n            }\r\n            <bsu-file-viewer-content\r\n                [selected]=\"scrollToId() === file.Id\"\r\n                [cardMode]=\"true\"\r\n                [deviceSize]=\"deviceSize\"\r\n                [file]=\"file\"\r\n                [isThumbnail]=\"true\"\r\n                [isImageGallery]=\"isImageGallery\"\r\n            ></bsu-file-viewer-content>\r\n            <ng-template cdkDragPreview>\r\n                <div class=\"thumbnail-drag-preview\">\r\n                    <img [src]=\"file.thumbnailUrl\" alt=\"\" />\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </cdk-virtual-scroll-viewport>\r\n</div>\r\n}\r\n", styles: [":host{display:flex;min-width:0;min-height:0;flex-direction:row-reverse}:host .gallery{flex:1;min-width:0;min-height:0;overflow:auto}:host .gallery .pics{position:relative}:host .thumbnail{flex:none;overflow:hidden}:host cdk-virtual-scroll-viewport{display:block;width:100%;height:100%;contain:strict}:host .thumbnail-item{position:relative;box-sizing:border-box;width:7rem;height:7rem;padding:.25rem;cursor:pointer}:host .thumbnail-group-label{position:absolute;z-index:2;inset-block-start:.25rem;inset-inline:.25rem;overflow:hidden;padding:.125rem .25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:var(--sapGroup_ContentBackground, #fff);color:var(--sapTextColor, #1d2d3e);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .horizontal-viewport .cdk-virtual-scroll-content-wrapper{display:flex;flex-direction:row}:host ::ng-deep .thumbnail-item fd-card,:host ::ng-deep .thumbnail-item img{height:6rem}:host.horizontal{flex-direction:column}:host.horizontal .thumbnail{width:100%;min-height:7rem;height:7rem;border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.vertical .gallery{border-inline-end:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.vertical .thumbnail{width:8rem;height:auto;border-block-end:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.vertical .vertical-viewport{overflow-x:hidden;overflow-y:auto}:host.vertical .thumbnail-item{width:100%}.thumbnail-drag-preview{width:4rem;height:4rem;transform:translate(-50%,-50%)}.thumbnail-drag-preview img{width:100%;height:100%;border-radius:var(--sapElement_BorderCornerRadius, .25rem);object-fit:cover}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i1$2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "zoom", "imageOnly", "isImageGallery", "cardMode", "showFooter", "showContent", "selected", "width", "deviceSize", "cardContentHeight", "file", "isThumbnail"], outputs: ["cantView", "imageLoaded"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FileGalleryViewerComponent, isStandalone: false, selector: "bsu-file-gallery-viewer", inputs: { fillWidth: { classPropertyName: "fillWidth", publicName: "fillWidth", isSignal: false, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: false, isRequired: false, transformFunction: null }, deviceSize: { classPropertyName: "deviceSize", publicName: "deviceSize", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, contentDensity: { classPropertyName: "contentDensity", publicName: "contentDensity", isSignal: false, isRequired: false, transformFunction: null }, isImageGallery: { classPropertyName: "isImageGallery", publicName: "isImageGallery", isSignal: false, isRequired: false, transformFunction: null }, isHorizontal: { classPropertyName: "isHorizontal", publicName: "isHorizontal", isSignal: false, isRequired: false, transformFunction: null }, selectedFile: { classPropertyName: "selectedFile", publicName: "selectedFile", isSignal: false, isRequired: false, transformFunction: null }, groupList: { classPropertyName: "groupList", publicName: "groupList", isSignal: false, isRequired: false, transformFunction: null }, scrollToId: { classPropertyName: "scrollToId", publicName: "scrollToId", isSignal: false, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIdChange: "selectedIdChange", changeOrder: "changeOrder" }, viewQueries: [{ propertyName: "galleryContainer", first: true, predicate: ["galleryContainer"], descendants: true, read: ElementRef }, { propertyName: "thumbnailScroll", first: true, predicate: ["thumbnailScroll"], descendants: true, read: ElementRef }, { propertyName: "listOfFileViewerContent", predicate: ["fileViewerContent"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (isImageGallery) {\r\n<div #galleryContainer class=\"gallery inDialog\">\r\n    @for (file of thumbnailFiles; track file.Id) {\r\n    <bsu-file-viewer-content\r\n        #fileViewerContent\r\n        [attr.id]=\"'fv_gl_' + file.Id\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [file]=\"file\"\r\n        [imageOnly]=\"true\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [zoom]=\"zoom\"\r\n        [isImageGallery]=\"isImageGallery\"\r\n    ></bsu-file-viewer-content>\r\n    }\r\n</div>\r\n} @if (!isImageGallery) {\r\n<div class=\"gallery\">\r\n    @if (selectedFile) {\r\n    <bsu-file-viewer-content\r\n        [deviceSize]=\"deviceSize\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [file]=\"selectedFile\"\r\n        [isImageGallery]=\"isImageGallery\"\r\n    ></bsu-file-viewer-content>\r\n    }\r\n</div>\r\n} @if (showThumbnailStrip) {\r\n<div class=\"thumbnail\">\r\n    <div class=\"thumbnail-scroll\" #thumbnailScroll>\r\n        @if (thumbnailGrouped) {\r\n        @for (group of thumbnailGroups; track group.id) {\r\n        <section class=\"thumbnail-group\" [class.collapsed]=\"isGroupCollapsed(group.id)\">\r\n            <button\r\n                type=\"button\"\r\n                class=\"thumbnail-group-header\"\r\n                [attr.aria-expanded]=\"!isGroupCollapsed(group.id)\"\r\n                (click)=\"toggleGroup(group.id)\"\r\n            >\r\n                <fd-icon\r\n                    class=\"thumbnail-group-caret\"\r\n                    [glyph]=\"isGroupCollapsed(group.id) ? 'slim-arrow-left' : 'slim-arrow-down'\"\r\n                ></fd-icon>\r\n                <span class=\"thumbnail-group-title\">{{\r\n                    group.isUngrouped ? ('Without Group' | bbbTranslate) : group.name\r\n                }}</span>\r\n                <span class=\"thumbnail-group-badge\">{{ group.files.length }}</span>\r\n            </button>\r\n            @if (!isGroupCollapsed(group.id)) {\r\n            <div\r\n                class=\"thumbnail-group-body\"\r\n                cdkDropList\r\n                [cdkDropListData]=\"group.files\"\r\n                [cdkDropListOrientation]=\"'vertical'\"\r\n                (cdkDropListDropped)=\"dropItem($event)\"\r\n            >\r\n                @for (file of group.files; track file.Id) {\r\n                <div\r\n                    class=\"thumbnail-item\"\r\n                    [attr.data-thumb-id]=\"file.Id\"\r\n                    [attr.aria-label]=\"file.FileName || file['label']\"\r\n                    (click)=\"onMedaiClick(file)\"\r\n                    cdkDrag\r\n                    [cdkDragData]=\"file\"\r\n                    [cdkDragDisabled]=\"isGroupedFile(file)\"\r\n                    cdkDragHandle\r\n                >\r\n                    <bsu-file-viewer-content\r\n                        [selected]=\"scrollToId() === file.Id\"\r\n                        [cardMode]=\"true\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [file]=\"file\"\r\n                        [isThumbnail]=\"true\"\r\n                        [isImageGallery]=\"isImageGallery\"\r\n                    ></bsu-file-viewer-content>\r\n                    <ng-template cdkDragPreview>\r\n                        <div class=\"thumbnail-drag-preview\">\r\n                            <img [src]=\"file.thumbnailUrl\" alt=\"\" />\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n        </section>\r\n        }\r\n        } @else {\r\n        <div\r\n            class=\"thumbnail-group-body flat\"\r\n            cdkDropList\r\n            [cdkDropListData]=\"thumbnailFiles\"\r\n            [cdkDropListOrientation]=\"isHorizontal ? 'horizontal' : 'vertical'\"\r\n            (cdkDropListDropped)=\"dropItem($event)\"\r\n        >\r\n            @for (file of thumbnailFiles; track file.Id) {\r\n            <div\r\n                class=\"thumbnail-item\"\r\n                [attr.data-thumb-id]=\"file.Id\"\r\n                [attr.aria-label]=\"file.FileName || file['label']\"\r\n                (click)=\"onMedaiClick(file)\"\r\n                cdkDrag\r\n                [cdkDragData]=\"file\"\r\n                [cdkDragDisabled]=\"isGroupedFile(file)\"\r\n                cdkDragHandle\r\n            >\r\n                <bsu-file-viewer-content\r\n                    [selected]=\"scrollToId() === file.Id\"\r\n                    [cardMode]=\"true\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [file]=\"file\"\r\n                    [isThumbnail]=\"true\"\r\n                    [isImageGallery]=\"isImageGallery\"\r\n                ></bsu-file-viewer-content>\r\n                <ng-template cdkDragPreview>\r\n                    <div class=\"thumbnail-drag-preview\">\r\n                        <img [src]=\"file.thumbnailUrl\" alt=\"\" />\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n}\r\n", styles: [":host{display:flex;min-width:0;min-height:0;flex-direction:row-reverse}:host .gallery{flex:1;min-width:0;min-height:0;overflow:auto}:host .gallery .pics{position:relative}:host .thumbnail{display:flex;flex:none;flex-direction:column;overflow:hidden}:host .thumbnail-scroll{flex:1 1 auto;min-height:0;min-width:0;overflow:auto}:host .thumbnail-group{display:flex;flex-direction:column}:host .thumbnail-group+.thumbnail-group{border-block-start:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host .thumbnail-group-header{position:sticky;z-index:3;inset-block-start:0;display:flex;box-sizing:border-box;width:100%;align-items:flex-start;margin:0;padding:.375rem .5rem;border:none;border-block-end:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9);background:var(--sapList_HeaderBackground, #f7f7f7);color:var(--sapList_TextColor, #32363a);cursor:pointer;font:inherit;font-size:.75rem;font-weight:600;gap:.375rem;text-align:start}:host .thumbnail-group-header:hover{background:var(--sapList_Hover_Background, #ededed)}:host .thumbnail-group-caret{flex:none;color:var(--sapContent_IconColor, #0854a0);font-size:.75rem}:host .thumbnail-group-title{display:-webkit-box;overflow:hidden;min-width:0;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.25;overflow-wrap:anywhere;white-space:normal;word-break:break-word}:host .thumbnail-group-badge{box-sizing:border-box;min-width:1.25rem;flex:none;padding:0 .375rem;border:var(--sapButton_BorderWidth, .0625rem) solid var(--sapButton_BorderColor, #d9d9d9);border-radius:.625rem;background:var(--sapButton_Background, #fff);color:var(--sapContent_LabelColor, #6a6d70);font-size:.6875rem;font-weight:600;line-height:1rem;text-align:center}:host .thumbnail-group-body{display:flex;flex-wrap:wrap;padding:.5rem;gap:.25rem}:host .thumbnail-item{position:relative;box-sizing:border-box;width:7rem;height:7rem;padding:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);cursor:pointer}:host ::ng-deep .thumbnail-item fd-card,:host ::ng-deep .thumbnail-item img{height:6rem}:host.horizontal{flex-direction:column}:host.horizontal .thumbnail{width:100%;min-height:7rem;height:7rem;border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.horizontal .thumbnail-scroll{overflow-x:auto;overflow-y:hidden}:host.horizontal .thumbnail-group-body.flat{height:100%;flex-wrap:nowrap;align-items:center}:host.vertical .gallery{border-inline-end:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.vertical .thumbnail{width:8rem;height:auto;border-block-end:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.vertical .thumbnail-scroll{overflow-x:hidden;overflow-y:auto}:host.vertical .thumbnail-item{width:100%}.thumbnail-drag-preview{width:4rem;height:4rem;transform:translate(-50%,-50%)}.thumbnail-drag-preview img{width:100%;height:100%;border-radius:var(--sapElement_BorderCornerRadius, .25rem);object-fit:cover}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i1$2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "zoom", "imageOnly", "isImageGallery", "cardMode", "showFooter", "showContent", "selected", "width", "deviceSize", "cardContentHeight", "file", "isThumbnail"], outputs: ["cantView", "imageLoaded"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FileGalleryViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-file-gallery-viewer', standalone: false, changeDetection: ChangeDetectionStrategy.Eager, template: "@if (isImageGallery) {\r\n<div #galleryContainer class=\"gallery inDialog\">\r\n    @for (file of thumbnailFiles; track file.Id) {\r\n    <bsu-file-viewer-content\r\n        #fileViewerContent\r\n        [attr.id]=\"'fv_gl_' + file.Id\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [file]=\"file\"\r\n        [imageOnly]=\"true\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [zoom]=\"zoom\"\r\n        [isImageGallery]=\"isImageGallery\"\r\n    ></bsu-file-viewer-content>\r\n    }\r\n</div>\r\n} @if (!isImageGallery) {\r\n<div class=\"gallery\">\r\n    @if (selectedFile) {\r\n    <bsu-file-viewer-content\r\n        [deviceSize]=\"deviceSize\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [file]=\"selectedFile\"\r\n        [isImageGallery]=\"isImageGallery\"\r\n    ></bsu-file-viewer-content>\r\n    }\r\n</div>\r\n} @if (showThumbnailStrip) {\r\n<div class=\"thumbnail\" #thumnailContainer>\r\n    <cdk-virtual-scroll-viewport\r\n        [style.height]=\"thumnailContainer.offsetHeight + 'px'\"\r\n        [class.horizontal-viewport]=\"isHorizontal\"\r\n        [class.vertical-viewport]=\"!isHorizontal\"\r\n        [itemSize]=\"thumbnailItemSize\"\r\n        [minBufferPx]=\"thumbnailMinBufferPx\"\r\n        [maxBufferPx]=\"thumnailContainer.offsetHeight\"\r\n        [orientation]=\"isHorizontal ? 'horizontal' : 'vertical'\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"thumbnailFiles\"\r\n        [cdkDropListOrientation]=\"isHorizontal ? 'horizontal' : 'vertical'\"\r\n        (cdkDropListDropped)=\"dropItem($event)\"\r\n    >\r\n        <div\r\n            *cdkVirtualFor=\"let file of thumbnailFiles; trackBy: trackByFile; let index = index; templateCacheSize: 8\"\r\n            class=\"thumbnail-item\"\r\n            [attr.aria-label]=\"file.FileName || file['label']\"\r\n            (click)=\"onMedaiClick(file)\"\r\n            cdkDrag\r\n            [cdkDragData]=\"file\"\r\n            [cdkDragDisabled]=\"isGroupedFile(file)\"\r\n            cdkDragHandle\r\n        >\r\n            @if (isFirstFileOfGroup(file, index)) {\r\n            <span class=\"thumbnail-group-label\">{{ getGroupName(file) }}</span>\r\n            }\r\n            <bsu-file-viewer-content\r\n                [selected]=\"scrollToId() === file.Id\"\r\n                [cardMode]=\"true\"\r\n                [deviceSize]=\"deviceSize\"\r\n                [file]=\"file\"\r\n                [isThumbnail]=\"true\"\r\n                [isImageGallery]=\"isImageGallery\"\r\n            ></bsu-file-viewer-content>\r\n            <ng-template cdkDragPreview>\r\n                <div class=\"thumbnail-drag-preview\">\r\n                    <img [src]=\"file.thumbnailUrl\" alt=\"\" />\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </cdk-virtual-scroll-viewport>\r\n</div>\r\n}\r\n", styles: [":host{display:flex;min-width:0;min-height:0;flex-direction:row-reverse}:host .gallery{flex:1;min-width:0;min-height:0;overflow:auto}:host .gallery .pics{position:relative}:host .thumbnail{flex:none;overflow:hidden}:host cdk-virtual-scroll-viewport{display:block;width:100%;height:100%;contain:strict}:host .thumbnail-item{position:relative;box-sizing:border-box;width:7rem;height:7rem;padding:.25rem;cursor:pointer}:host .thumbnail-group-label{position:absolute;z-index:2;inset-block-start:.25rem;inset-inline:.25rem;overflow:hidden;padding:.125rem .25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:var(--sapGroup_ContentBackground, #fff);color:var(--sapTextColor, #1d2d3e);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .horizontal-viewport .cdk-virtual-scroll-content-wrapper{display:flex;flex-direction:row}:host ::ng-deep .thumbnail-item fd-card,:host ::ng-deep .thumbnail-item img{height:6rem}:host.horizontal{flex-direction:column}:host.horizontal .thumbnail{width:100%;min-height:7rem;height:7rem;border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.vertical .gallery{border-inline-end:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.vertical .thumbnail{width:8rem;height:auto;border-block-end:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.vertical .vertical-viewport{overflow-x:hidden;overflow-y:auto}:host.vertical .thumbnail-item{width:100%}.thumbnail-drag-preview{width:4rem;height:4rem;transform:translate(-50%,-50%)}.thumbnail-drag-preview img{width:100%;height:100%;border-radius:var(--sapElement_BorderCornerRadius, .25rem);object-fit:cover}\n"] }]
+            args: [{ selector: 'bsu-file-gallery-viewer', standalone: false, changeDetection: ChangeDetectionStrategy.Eager, template: "@if (isImageGallery) {\r\n<div #galleryContainer class=\"gallery inDialog\">\r\n    @for (file of thumbnailFiles; track file.Id) {\r\n    <bsu-file-viewer-content\r\n        #fileViewerContent\r\n        [attr.id]=\"'fv_gl_' + file.Id\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [file]=\"file\"\r\n        [imageOnly]=\"true\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [zoom]=\"zoom\"\r\n        [isImageGallery]=\"isImageGallery\"\r\n    ></bsu-file-viewer-content>\r\n    }\r\n</div>\r\n} @if (!isImageGallery) {\r\n<div class=\"gallery\">\r\n    @if (selectedFile) {\r\n    <bsu-file-viewer-content\r\n        [deviceSize]=\"deviceSize\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [file]=\"selectedFile\"\r\n        [isImageGallery]=\"isImageGallery\"\r\n    ></bsu-file-viewer-content>\r\n    }\r\n</div>\r\n} @if (showThumbnailStrip) {\r\n<div class=\"thumbnail\">\r\n    <div class=\"thumbnail-scroll\" #thumbnailScroll>\r\n        @if (thumbnailGrouped) {\r\n        @for (group of thumbnailGroups; track group.id) {\r\n        <section class=\"thumbnail-group\" [class.collapsed]=\"isGroupCollapsed(group.id)\">\r\n            <button\r\n                type=\"button\"\r\n                class=\"thumbnail-group-header\"\r\n                [attr.aria-expanded]=\"!isGroupCollapsed(group.id)\"\r\n                (click)=\"toggleGroup(group.id)\"\r\n            >\r\n                <fd-icon\r\n                    class=\"thumbnail-group-caret\"\r\n                    [glyph]=\"isGroupCollapsed(group.id) ? 'slim-arrow-left' : 'slim-arrow-down'\"\r\n                ></fd-icon>\r\n                <span class=\"thumbnail-group-title\">{{\r\n                    group.isUngrouped ? ('Without Group' | bbbTranslate) : group.name\r\n                }}</span>\r\n                <span class=\"thumbnail-group-badge\">{{ group.files.length }}</span>\r\n            </button>\r\n            @if (!isGroupCollapsed(group.id)) {\r\n            <div\r\n                class=\"thumbnail-group-body\"\r\n                cdkDropList\r\n                [cdkDropListData]=\"group.files\"\r\n                [cdkDropListOrientation]=\"'vertical'\"\r\n                (cdkDropListDropped)=\"dropItem($event)\"\r\n            >\r\n                @for (file of group.files; track file.Id) {\r\n                <div\r\n                    class=\"thumbnail-item\"\r\n                    [attr.data-thumb-id]=\"file.Id\"\r\n                    [attr.aria-label]=\"file.FileName || file['label']\"\r\n                    (click)=\"onMedaiClick(file)\"\r\n                    cdkDrag\r\n                    [cdkDragData]=\"file\"\r\n                    [cdkDragDisabled]=\"isGroupedFile(file)\"\r\n                    cdkDragHandle\r\n                >\r\n                    <bsu-file-viewer-content\r\n                        [selected]=\"scrollToId() === file.Id\"\r\n                        [cardMode]=\"true\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [file]=\"file\"\r\n                        [isThumbnail]=\"true\"\r\n                        [isImageGallery]=\"isImageGallery\"\r\n                    ></bsu-file-viewer-content>\r\n                    <ng-template cdkDragPreview>\r\n                        <div class=\"thumbnail-drag-preview\">\r\n                            <img [src]=\"file.thumbnailUrl\" alt=\"\" />\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n        </section>\r\n        }\r\n        } @else {\r\n        <div\r\n            class=\"thumbnail-group-body flat\"\r\n            cdkDropList\r\n            [cdkDropListData]=\"thumbnailFiles\"\r\n            [cdkDropListOrientation]=\"isHorizontal ? 'horizontal' : 'vertical'\"\r\n            (cdkDropListDropped)=\"dropItem($event)\"\r\n        >\r\n            @for (file of thumbnailFiles; track file.Id) {\r\n            <div\r\n                class=\"thumbnail-item\"\r\n                [attr.data-thumb-id]=\"file.Id\"\r\n                [attr.aria-label]=\"file.FileName || file['label']\"\r\n                (click)=\"onMedaiClick(file)\"\r\n                cdkDrag\r\n                [cdkDragData]=\"file\"\r\n                [cdkDragDisabled]=\"isGroupedFile(file)\"\r\n                cdkDragHandle\r\n            >\r\n                <bsu-file-viewer-content\r\n                    [selected]=\"scrollToId() === file.Id\"\r\n                    [cardMode]=\"true\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [file]=\"file\"\r\n                    [isThumbnail]=\"true\"\r\n                    [isImageGallery]=\"isImageGallery\"\r\n                ></bsu-file-viewer-content>\r\n                <ng-template cdkDragPreview>\r\n                    <div class=\"thumbnail-drag-preview\">\r\n                        <img [src]=\"file.thumbnailUrl\" alt=\"\" />\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n}\r\n", styles: [":host{display:flex;min-width:0;min-height:0;flex-direction:row-reverse}:host .gallery{flex:1;min-width:0;min-height:0;overflow:auto}:host .gallery .pics{position:relative}:host .thumbnail{display:flex;flex:none;flex-direction:column;overflow:hidden}:host .thumbnail-scroll{flex:1 1 auto;min-height:0;min-width:0;overflow:auto}:host .thumbnail-group{display:flex;flex-direction:column}:host .thumbnail-group+.thumbnail-group{border-block-start:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host .thumbnail-group-header{position:sticky;z-index:3;inset-block-start:0;display:flex;box-sizing:border-box;width:100%;align-items:flex-start;margin:0;padding:.375rem .5rem;border:none;border-block-end:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9);background:var(--sapList_HeaderBackground, #f7f7f7);color:var(--sapList_TextColor, #32363a);cursor:pointer;font:inherit;font-size:.75rem;font-weight:600;gap:.375rem;text-align:start}:host .thumbnail-group-header:hover{background:var(--sapList_Hover_Background, #ededed)}:host .thumbnail-group-caret{flex:none;color:var(--sapContent_IconColor, #0854a0);font-size:.75rem}:host .thumbnail-group-title{display:-webkit-box;overflow:hidden;min-width:0;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.25;overflow-wrap:anywhere;white-space:normal;word-break:break-word}:host .thumbnail-group-badge{box-sizing:border-box;min-width:1.25rem;flex:none;padding:0 .375rem;border:var(--sapButton_BorderWidth, .0625rem) solid var(--sapButton_BorderColor, #d9d9d9);border-radius:.625rem;background:var(--sapButton_Background, #fff);color:var(--sapContent_LabelColor, #6a6d70);font-size:.6875rem;font-weight:600;line-height:1rem;text-align:center}:host .thumbnail-group-body{display:flex;flex-wrap:wrap;padding:.5rem;gap:.25rem}:host .thumbnail-item{position:relative;box-sizing:border-box;width:7rem;height:7rem;padding:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);cursor:pointer}:host ::ng-deep .thumbnail-item fd-card,:host ::ng-deep .thumbnail-item img{height:6rem}:host.horizontal{flex-direction:column}:host.horizontal .thumbnail{width:100%;min-height:7rem;height:7rem;border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.horizontal .thumbnail-scroll{overflow-x:auto;overflow-y:hidden}:host.horizontal .thumbnail-group-body.flat{height:100%;flex-wrap:nowrap;align-items:center}:host.vertical .gallery{border-inline-end:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.vertical .thumbnail{width:8rem;height:auto;border-block-end:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9)}:host.vertical .thumbnail-scroll{overflow-x:hidden;overflow-y:auto}:host.vertical .thumbnail-item{width:100%}.thumbnail-drag-preview{width:4rem;height:4rem;transform:translate(-50%,-50%)}.thumbnail-drag-preview img{width:100%;height:100%;border-radius:var(--sapElement_BorderCornerRadius, .25rem);object-fit:cover}\n"] }]
         }], ctorParameters: () => [], propDecorators: { listOfFileViewerContent: [{
                 type: ViewChildren,
                 args: ['fileViewerContent']
             }], galleryContainer: [{
                 type: ViewChild,
                 args: ['galleryContainer', { read: ElementRef }]
-            }], thumbnailViewport: [{
+            }], thumbnailScroll: [{
                 type: ViewChild,
-                args: [CdkVirtualScrollViewport]
+                args: ['thumbnailScroll', { read: ElementRef }]
             }], fillWidth: [{
                 type: Input
             }], zoom: [{
@@ -6057,7 +6114,7 @@ class CardItemComponent extends BaseViewItemPropsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CardItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CardItemComponent, isStandalone: false, selector: "bsu-card-item", inputs: { setting: "setting", extraFooterComponent: "extraFooterComponent" }, providers: [FormPanelService], viewQueries: [{ propertyName: "_quickViewTemplate", first: true, predicate: ["quickViewTemplate"], descendants: true, static: true }, { propertyName: "_contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-card\r\n    [cardType]=\"setting.CardType$Caption\"\r\n    [interactive]=\"setting.IsInteractive === false ? false : true\"    \r\n    [class.openOnClick]=\"setting.openOnClick\"\r\n    [class.hide-header-border]=\"setting.HideHeaderBorder\"\r\n    [style.width]=\"cardWidth\"\r\n    [style.min-width]=\"minWidth\"\r\n    [style.max-width]=\"maxWidth\"\r\n    [class.card-media]=\"cardMedia\"\r\n    (click)=\"onRowCheck()\"\r\n    (dblclick)=\"onRowClick()\"\r\n>\r\n    @if(cardMedia){\r\n    <fd-card-media>\r\n        @if(isCardTypeBanner){\r\n        <div\r\n            fd-card-media-content-container\r\n            [legendColor]=\"setting.CustomColor ? null : 13\"\r\n            [style.background]=\"setting.CustomColor ? setting.CustomColor : null\"\r\n        >\r\n            <div fd-card-media-heading [level]=\"2\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            <p fd-card-media-text>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </p>\r\n            @if (contextMenuItems.length ) {\r\n\r\n            <bsu-ulv-context-menu\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [mo]=\"mo\"\r\n                [index]=\"index\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n                (overflowClick)=\"onRowCheck(true)\"\r\n                [deviceName]=\"deviceName\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [allColumns]=\"allColumns\"\r\n            ></bsu-ulv-context-menu>\r\n            }\r\n        </div>\r\n        }\r\n        <div fd-card-media-image-container #container>\r\n            <img\r\n                fd-card-media-image\r\n                [src]=\"\r\n                    setting.MediaField\r\n                        ? (mo[setting.MediaField.Name]?.FileId\r\n                          | picFieldSrc: 'ID':setting.MediaField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                alt=\"pic not loaded\"\r\n                [style.max-height.px]=\"isCardTypeBanner ? setting?.SliderHeight || 300 : null\"\r\n                loading=\"lazy\"\r\n            />\r\n        </div>\r\n    </fd-card-media>\r\n    } @if(!isCardTypeBanner && !setting.HideHeader){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\r\n            context: {\r\n                $implicit: mo,\r\n                index: this.index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    } @if (!noContent || contextMenuItems) {\r\n    <fd-card-content ellipsify class=\"tw-flex tw-flex-col tw-justify-stretch tw-items-stretch\">\r\n        <div\r\n            #divEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"divEl\"\r\n            class=\"tw-h-full tw-w-full tw-flex-1\"\r\n        >\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplateRef;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: setting.ContentComponent,\r\n                        componentSettings: setting.ContentComponent?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            @for(item of setting.ContentComponents?.MoDataList;track item.Id){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    contentTemplateComponent;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: item.Component,\r\n                        componentSettings: item.Component?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n                    @if (detailsComponent && detailsComponent.Selector) {\r\n        <bnrc-dynamic-item-component\r\n            [component]=\"detailsComponent\"\r\n            [mo]=\"mo\"\r\n            [isChecked]=\"isChecked\"\r\n            [UlvMainCtrlr]=\"UlvMainCtrlr\"\r\n            [setting]=\"setting\"\r\n            [parameters]=\"detailsComponent.Settings\"\r\n            [editMode]=\"inlineEditMode\"\r\n            [formSetting]=\"formSetting\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [allColumns]=\"allColumns\"\r\n            [typeDefId]=\"typeDefId\"\r\n        ></bnrc-dynamic-item-component>\r\n        }\r\n        </div>\r\n    </fd-card-content>\r\n    } @if(detailsText || contextMenuEnabled && !isCardTypeBanner){\r\n    <fd-card-footer\r\n        [class.extra-footer]=\"extraFooterComponent?.Selector\"\r\n        [class.hasDetailsAndContextMenu]=\"detailsText && contextMenuEnabled && contextMenuInFooter\"\r\n    >\r\n        @if(extraFooterComponent?.Selector){\r\n        <bnrc-dynamic-item-component\r\n            style=\"display: block; flex: 1\"\r\n            [component]=\"extraFooterComponent\"\r\n            [mo]=\"mo\"\r\n            [styleIndex]=\"mo.$StyleIndex\"\r\n            [isChecked]=\"isChecked\"\r\n            [setting]=\"setting\"\r\n            [parameters]=\"extraFooterComponent.Settings\"\r\n            [editMode]=\"inlineEditMode\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [allColumns]=\"allColumns\"\r\n        ></bnrc-dynamic-item-component>\r\n        } @if(detailsText){<button *fdCardFooterActionItem fd-button fdType=\"transparent\" [fdPopoverTrigger]=\"popover\">\r\n            {{ detailsText }}\r\n        </button>\r\n        } @if(contextMenuInFooter){\r\n        <div\r\n            *fdCardFooterActionItem\r\n            ulvContextMenu\r\n            [allColumns]=\"allColumns\"\r\n            [footerMode]=\"false\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"mo\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n            (overflowClick)=\"onRowCheck(true)\"\r\n        ></div>\r\n        }\r\n        <fd-popover #popover>\r\n            @if (detailsColumns?.length) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    detailsColumnsTemplate;\r\n                    context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover>\r\n    </fd-card-footer>\r\n    }\r\n</fd-card>\r\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            detailsFormItems;\r\n            context: {\r\n                $implicit: detailsColumns,\r\n                mo: this.mo,\r\n                inlineEditMode: this.inlineEditMode,\r\n                layout94: layout94\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template\r\n    #detailsFormItems\r\n    let-detailsColumns\r\n    let-mo=\"mo\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    <div class=\"form-items\" class=\"tw-p-2\">\r\n        @for (column of detailsColumns; track column; let columnIndex = $index) {\r\n        <div\r\n            fd-form-item\r\n            class=\"!tw-flex-row\"\r\n            [dynCommand]=\"column.$CustomComponent?.DynamicCommand\"\r\n            [mo]=\"mo\"\r\n            [enableCommand]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n            bodyClick\r\n            [class.tw-cursor-pointer]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n        >\r\n            @if(!column.$CustomComponent?.HideColumnCaption) {<label fd-form-label for=\"input-2\"\r\n                >{{ column.Caption }}<span>:</span></label\r\n            >}\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    columnTemplate;\r\n                    context: {\r\n                        $implicit: column,\r\n                        mo: mo,\r\n                        index: columnIndex,\r\n                        inlineEditMode: inlineEditMode,\r\n                        layout94: layout94\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template\r\n    #columnTemplate\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n    let-disableEllapsis=\"disableEllapsis\"\r\n    let-fdTextMode=\"fdTextMode\"\r\n>\r\n    @if (column) {\r\n    <bsu-barsa-table-column\r\n        [mo]=\"mo\"\r\n        [allColumns]=\"allColumns\"\r\n        [column]=\"column\"\r\n        [isdirty]=\"false\"\r\n        [value]=\"column | columnValue: mo\"\r\n        [icon]=\"column | columnIcon: mo\"\r\n        [customComponent]=\"column.$CustomComponent\"\r\n        [column]=\"column\"\r\n        [disableEllapsis]=\"disableEllapsis === false ? false : true\"\r\n        [fdTextMode]=\"fdTextMode\"\r\n        [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\r\n        [inlineEditMode]=\"inlineEditMode\"\r\n        [isChecked]=\"isChecked\"\r\n        [index]=\"index\"\r\n        [formSetting]=\"formSetting\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [layout94]=\"layout94\"\r\n        (save)=\"onEditFormPanelSave(null)\"\r\n        (cancel)=\"onEditFormPanelCancel(null)\"\r\n        (tab)=\"onTabKeyDown($event, index)\"\r\n        (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\r\n    >\r\n    </bsu-barsa-table-column>\r\n\r\n    }\r\n</ng-template>\r\n<ng-template #quickViewTemplate let-mo let-index=\"index\">\r\n    @if (!noContent) {\r\n    <fd-quick-view [id]=\"'id'\">\r\n        <fd-quick-view-group>\r\n            @for (column of setting.FieldListMapped; track column) {\r\n            <fd-quick-view-group-item [class.rowDirection]=\"column?.$CustomComponent?.IsRowDirection\">\r\n                @if (column) { @if(!column.$CustomComponent?.HideColumnCaption) {<fd-quick-view-group-item-label>\r\n                    {{ column.Caption | bbbTranslate }} </fd-quick-view-group-item-label\r\n                >}\r\n                <fd-quick-view-group-item-content>\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: column,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            } @if (setting.DescriptionField) {\r\n            <fd-quick-view-group-item>\r\n                <fd-quick-view-group-item-content>\r\n                    @if (inlineEditMode && allowInlineEdit) {\r\n                    <fd-quick-view-group-item-label>\r\n                        {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                    </fd-quick-view-group-item-label>\r\n                    }\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.DescriptionField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                @if (setting.ActionFieldNameField) {\r\n                <fd-quick-view-group-item-content\r\n                    class=\"action\"\r\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\r\n                >\r\n                    <a fd-link>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.ActionFieldNameField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </a>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            }\r\n        </fd-quick-view-group>\r\n    </fd-quick-view>\r\n    }\r\n</ng-template>\r\n<ng-template #contentTemplate let-mo let-index=\"index\">\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow style=\"align-items: center\">\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @for (column of setting.FieldListMapped; track column) {\r\n                <div style=\"display: flex\">\r\n                    <label fd-form-label [colon]=\"true\">{{ column.Caption | bbbTranslate }}</label>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            columnTemplate;\r\n                            context: {\r\n                                $implicit: column,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                index: index\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (setting.DescriptionField) {\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @if (inlineEditMode && allowInlineEdit) {\r\n                <label>\r\n                    {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                </label>\r\n                }\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.DescriptionField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            }\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n<ng-template #avatar let-avatar let-visible=\"visible\" let-circle=\"circle\" let-avatarField=\"avatarField\">\r\n    @if (visible) {\r\n    <fd-avatar\r\n        alterIcon=\"alt|content|backup|default-icon\"\r\n        [circle]=\"circle\"\r\n        [image]=\"\r\n            avatarField\r\n                ? (mo[avatarField.Name]?.FileId | picFieldSrc: 'ID':avatarField.FieldDefId)\r\n                : ''\r\n        \"\r\n        [size]=\"\r\n            deviceSize === 'xl' || deviceSize === 'l' ? setting.AvatarSizeDesktop$Caption : setting.AvatarSize$Caption\r\n        \"\r\n        [glyph]=\"avatar || (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\"\r\n    >\r\n    </fd-avatar>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template\r\n    #contentTemplateComponent\r\n    let-mo\r\n    let-index=\"index\"\r\n    let-componentSettings=\"componentSettings\"\r\n    let-component=\"component\"\r\n>\r\n    <bnrc-dynamic-item-component\r\n        [component]=\"component\"\r\n        [mo]=\"mo\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"componentSettings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n    ></bnrc-dynamic-item-component>\r\n</ng-template>\r\n\r\n<ng-template #renderHeader let-mo let-index=\"index\">\r\n    @if(!hideOpenIcon && (openOnClick || (canView && deviceName !== 'desktop'))){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderMobileCanView;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }@else{\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderDesktop;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #renderHeaderDesktop let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderDesktop\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if (setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId\r\n                          | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n            <span fd-card-counter status=\"positive\" [class.!tw-hidden]=\"!setting.CounterField\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n                (overflowClick)=\"onRowCheck(true)\"\r\n            ></div>\r\n            }\r\n        </fd-card-main-header>\r\n        <ng-container *ngTemplateOutlet=\"extendedHeader\"></ng-container>\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #extendedHeader>\r\n    @if(setting.hasExtHeader){\r\n    <fd-card-extended-header>\r\n        <div fd-card-header-column>\r\n            <div fd-card-header-row>\r\n                @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst, layout94:\r\n                layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                }\r\n            </div>\r\n        </div>\r\n        <div fd-card-header-column [align]=\"'right'\">\r\n            <div fd-card-header-row>\r\n                @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst, layout94:\r\n                layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                }\r\n            </div>\r\n        </div>\r\n    </fd-card-extended-header>\r\n    }\r\n</ng-template>\r\n<!--\r\n    \u0633\u0644\u0648\u0644\u0650 \u0627\u06A9\u0633\u062A\u0646\u062F\u062F\u200C\u0647\u062F\u0631: \u0627\u06AF\u0631 \u0645\u0642\u062F\u0627\u0631 \u06CC\u06A9 \u0633\u062A\u0648\u0646\u0650 \u06CC\u0627\u0641\u062A\u0647\u200C\u0634\u062F\u0647 \u0628\u0627\u0634\u062F (\u062F\u0627\u0631\u0627\u06CC Name) \u0628\u0627 columnTemplate \u0631\u0646\u062F\u0631 \u0645\u06CC\u200C\u0634\u0648\u062F\u061B\r\n    \u062F\u0631 \u063A\u06CC\u0631\u0650 \u0627\u06CC\u0646 \u0635\u0648\u0631\u062A \u0647\u0645\u0627\u0646 \u0645\u0642\u062F\u0627\u0631\u0650 \u062E\u0627\u0645\u0650 \u062A\u0646\u0638\u06CC\u0645 \u0628\u0647\u200C\u0635\u0648\u0631\u062A\u0650 \u0645\u062A\u0646\u0650 \u062B\u0627\u0628\u062A \u0646\u0645\u0627\u06CC\u0634 \u062F\u0627\u062F\u0647 \u0645\u06CC\u200C\u0634\u0648\u062F.\r\n-->\r\n<ng-template\r\n    #extHeaderCell\r\n    let-val\r\n    let-mo=\"mo\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n    let-disableEllapsis=\"disableEllapsis\"\r\n>\r\n    @if (val?.Name) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            columnTemplate;\r\n            context: { $implicit: val, mo: mo, index: index, layout94: layout94, disableEllapsis: disableEllapsis }\r\n        \"\r\n    ></ng-container>\r\n    } @else if (val) {\r\n    <span class=\"ext-header-literal\">{{ val | bbbTranslate }}</span>\r\n    }\r\n</ng-template>\r\n<ng-template #renderHeaderMobileCanView let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderMobileCanView\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if ( setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId\r\n                          | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n                (overflowClick)=\"onRowCheck(true)\"\r\n            ></div>\r\n            }@else {\r\n            <button\r\n                fd-button\r\n                fd-card-header-action\r\n                class=\"view-btn\"\r\n                stopPropagation\r\n                (click)=\"onRowClick()\"\r\n                [glyph]=\"navigationArrow\"\r\n                fdType=\"transparent\"\r\n            ></button>\r\n            }\r\n        </fd-card-main-header>\r\n        @if(setting.hasExtHeader){\r\n        <fd-card-extended-header>\r\n            <div fd-card-header-column>\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fd-card-header-column [align]=\"'right'\">\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </fd-card-extended-header>\r\n        }\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\r\n    <bnrc-card-dynamic-item-component\r\n        [component]=\"setting.HeaderComponent\"\r\n        [maxHeightHeader]=\"maxHeightHeader\"\r\n        [mo]=\"mo\"\r\n        [columnTemplate]=\"columnTemplate\"\r\n        [extendedHeaderTemplate]=\"extendedHeader\"\r\n        [layout94$]=\"layout$\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"setting.HeaderComponent.Settings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [canView]=\"canView\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [isCheckList]=\"isCheckList\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-card-dynamic-item-component>\r\n</ng-template>\r\n", styles: ["fd-card.fd-card--banner>fd-card-media{border-radius:inherit}fd-card.fd-card--banner>fd-card-media .fd-card__media-image-container{z-index:4}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card fd-card-content ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.extra-footer{flex-wrap:wrap}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card.hide-header-border ::ng-deep fd-card-header fd-card-main-header>.fd-card__header-main{border:none}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "hideOpenIcon", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "maxHeightHeader", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "component", type: i2.CardDynamicItemComponent, selector: "bnrc-card-dynamic-item-component", inputs: ["columnTemplate", "extendedHeaderTemplate"] }, { kind: "directive", type: i2.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[stopPropagation]" }, { kind: "component", type: i4$4.AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$7.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize", "ariaDescribedby"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange", "keyDown"] }, { kind: "component", type: i7$2.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$2.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "directive", type: i7$2.CardHeaderActionDirective, selector: "[fd-card-header-action]" }, { kind: "component", type: i7$2.CardExtendedHeaderComponent, selector: "fd-card-extended-header", inputs: ["ariaRoleDescription", "align"] }, { kind: "directive", type: i7$2.CardHeaderRowDirective, selector: "[fd-card-header-row]" }, { kind: "directive", type: i7$2.CardHeaderColumnDirective, selector: "[fd-card-header-column]", inputs: ["align"] }, { kind: "component", type: i7$2.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$2.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i7$2.CardSubtitleDirective, selector: "[fd-card-subtitle]", inputs: ["id"] }, { kind: "directive", type: i7$2.CardCounterDirective, selector: "[fd-card-counter]", inputs: ["id", "statusInput"] }, { kind: "component", type: i7$2.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$2.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i7$2.CardMediaComponent, selector: "fd-card-media", inputs: ["ariaRoleDescription", "hasPadding", "shellColor", "legendColor"] }, { kind: "directive", type: i7$2.CardMediaImageDirective, selector: "[fd-card-media-image]" }, { kind: "directive", type: i7$2.CardMediaImageContainerDirective, selector: "[fd-card-media-image-container]" }, { kind: "directive", type: i7$2.CardMediaContentContainerDirective, selector: "[fd-card-media-content-container]", inputs: ["isOverlay", "shellColor", "legendColor"] }, { kind: "directive", type: i7$2.CardMediaHeadingDirective, selector: "[fd-card-media-heading]", inputs: ["id", "level"] }, { kind: "directive", type: i7$2.CardMediaTextDirective, selector: "[fd-card-media-text]" }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id", "disabled", "unitDescription", "independent"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "directive", type: i6.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i12.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i12.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label", inputs: ["allowWrap"] }, { kind: "component", type: i12.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i12.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick", "overflowClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: ["disableEllapsis", "fdTextMode"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CardItemComponent, isStandalone: false, selector: "bsu-card-item", inputs: { setting: "setting", extraFooterComponent: "extraFooterComponent" }, providers: [FormPanelService], viewQueries: [{ propertyName: "_quickViewTemplate", first: true, predicate: ["quickViewTemplate"], descendants: true, static: true }, { propertyName: "_contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-card\r\n    [cardType]=\"setting.CardType$Caption\"\r\n    [interactive]=\"setting.IsInteractive === false ? false : true\"    \r\n    [class.openOnClick]=\"setting.openOnClick\"\r\n    [class.hide-header-border]=\"setting.HideHeaderBorder\"\r\n    [style.width]=\"cardWidth\"\r\n    [style.min-width]=\"minWidth\"\r\n    [style.max-width]=\"maxWidth\"\r\n    [class.card-media]=\"cardMedia\"\r\n    (click)=\"onRowCheck()\"\r\n    (dblclick)=\"onRowClick()\"\r\n>\r\n    @if(cardMedia){\r\n    <fd-card-media>\r\n        @if(isCardTypeBanner){\r\n        <div\r\n            fd-card-media-content-container\r\n            [legendColor]=\"setting.CustomColor ? null : 13\"\r\n            [style.background]=\"setting.CustomColor ? setting.CustomColor : null\"\r\n        >\r\n            <div fd-card-media-heading [level]=\"2\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            <p fd-card-media-text>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </p>\r\n            @if (contextMenuItems.length ) {\r\n\r\n            <bsu-ulv-context-menu\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [mo]=\"mo\"\r\n                [index]=\"index\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n                (overflowClick)=\"onRowCheck(true)\"\r\n                [deviceName]=\"deviceName\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [allColumns]=\"allColumns\"\r\n            ></bsu-ulv-context-menu>\r\n            }\r\n        </div>\r\n        }\r\n        <div fd-card-media-image-container #container>\r\n            <img\r\n                fd-card-media-image\r\n                [src]=\"\r\n                    setting.MediaField\r\n                        ? (mo[setting.MediaField.Name]?.FileId\r\n                          | picFieldSrc: 'ID':setting.MediaField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                alt=\"pic not loaded\"\r\n                [style.max-height.px]=\"isCardTypeBanner ? setting?.SliderHeight || 300 : null\"\r\n                loading=\"lazy\"\r\n            />\r\n        </div>\r\n    </fd-card-media>\r\n    } @if(!isCardTypeBanner && !setting.HideHeader){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\r\n            context: {\r\n                $implicit: mo,\r\n                index: this.index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    } @if (!noContent || contextMenuItems) {\r\n    <fd-card-content ellipsify class=\"tw-flex tw-flex-col tw-justify-stretch tw-items-stretch\">\r\n        <div\r\n            #divEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"divEl\"\r\n            class=\"tw-h-full tw-w-full tw-flex-1\"\r\n        >\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplateRef;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: setting.ContentComponent,\r\n                        componentSettings: setting.ContentComponent?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            @for(item of setting.ContentComponents?.MoDataList;track item.Id){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    contentTemplateComponent;\r\n                    context: {\r\n                        $implicit: mo,\r\n                        index: this.index,\r\n                        component: item.Component,\r\n                        componentSettings: item.Component?.Settings\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n                    @if (detailsComponent && detailsComponent.Selector) {\r\n        <bnrc-dynamic-item-component\r\n            [component]=\"detailsComponent\"\r\n            [mo]=\"mo\"\r\n            [isChecked]=\"isChecked\"\r\n            [UlvMainCtrlr]=\"UlvMainCtrlr\"\r\n            [setting]=\"setting\"\r\n            [parameters]=\"detailsComponent.Settings\"\r\n            [editMode]=\"inlineEditMode\"\r\n            [formSetting]=\"formSetting\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [allColumns]=\"allColumns\"\r\n            [typeDefId]=\"typeDefId\"\r\n        ></bnrc-dynamic-item-component>\r\n        }\r\n        </div>\r\n    </fd-card-content>\r\n    } @if(detailsText || contextMenuEnabled && !isCardTypeBanner){\r\n    <fd-card-footer\r\n        [class.extra-footer]=\"extraFooterComponent?.Selector\"\r\n        [class.hasDetailsAndContextMenu]=\"detailsText && contextMenuEnabled && contextMenuInFooter\"\r\n    >\r\n        @if(extraFooterComponent?.Selector){\r\n        <bnrc-dynamic-item-component\r\n            style=\"display: block; flex: 1\"\r\n            [component]=\"extraFooterComponent\"\r\n            [mo]=\"mo\"\r\n            [styleIndex]=\"mo.$StyleIndex\"\r\n            [isChecked]=\"isChecked\"\r\n            [setting]=\"setting\"\r\n            [parameters]=\"extraFooterComponent.Settings\"\r\n            [editMode]=\"inlineEditMode\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [allColumns]=\"allColumns\"\r\n        ></bnrc-dynamic-item-component>\r\n        } @if(detailsText){<button *fdCardFooterActionItem fd-button fdType=\"transparent\" [fdPopoverTrigger]=\"popover\">\r\n            {{ detailsText }}\r\n        </button>\r\n        } @if(contextMenuInFooter){\r\n        <div\r\n            *fdCardFooterActionItem\r\n            ulvContextMenu\r\n            [allColumns]=\"allColumns\"\r\n            [footerMode]=\"false\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"mo\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n            (overflowClick)=\"onRowCheck(true)\"\r\n        ></div>\r\n        }\r\n        <fd-popover #popover>\r\n            @if (detailsColumns?.length) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    detailsColumnsTemplate;\r\n                    context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\r\n                \"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover>\r\n    </fd-card-footer>\r\n    }\r\n</fd-card>\r\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            detailsFormItems;\r\n            context: {\r\n                $implicit: detailsColumns,\r\n                mo: this.mo,\r\n                inlineEditMode: this.inlineEditMode,\r\n                layout94: layout94\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template\r\n    #detailsFormItems\r\n    let-detailsColumns\r\n    let-mo=\"mo\"\r\n    let-inlineEditMode=\"inlineEditMode\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    <div class=\"form-items\" class=\"tw-p-2\">\r\n        @for (column of detailsColumns; track column; let columnIndex = $index) {\r\n        <div\r\n            fd-form-item\r\n            class=\"!tw-flex-row\"\r\n            [dynCommand]=\"column.$CustomComponent?.DynamicCommand\"\r\n            [mo]=\"mo\"\r\n            [enableCommand]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n            bodyClick\r\n            [class.tw-cursor-pointer]=\"!!column.$CustomComponent?.DynamicCommand\"\r\n        >\r\n            @if(!column.$CustomComponent?.HideColumnCaption) {<label fd-form-label for=\"input-2\"\r\n                >{{ column.Caption }}<span>:</span></label\r\n            >}\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    columnTemplate;\r\n                    context: {\r\n                        $implicit: column,\r\n                        mo: mo,\r\n                        index: columnIndex,\r\n                        inlineEditMode: inlineEditMode,\r\n                        layout94: layout94\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n<ng-template\r\n    #columnTemplate\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n    let-disableEllapsis=\"disableEllapsis\"\r\n    let-fdTextMode=\"fdTextMode\"\r\n>\r\n    @if (column) {\r\n    <bsu-barsa-table-column\r\n        [mo]=\"mo\"\r\n        [allColumns]=\"allColumns\"\r\n        [column]=\"column\"\r\n        [isdirty]=\"false\"\r\n        [value]=\"column | columnValue: mo\"\r\n        [icon]=\"column | columnIcon: mo\"\r\n        [customComponent]=\"column.$CustomComponent\"\r\n        [column]=\"column\"\r\n        [disableEllapsis]=\"disableEllapsis === false ? false : true\"\r\n        [fdTextMode]=\"fdTextMode\"\r\n        [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\r\n        [inlineEditMode]=\"inlineEditMode\"\r\n        [isChecked]=\"isChecked\"\r\n        [index]=\"index\"\r\n        [formSetting]=\"formSetting\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [layout94]=\"layout94\"\r\n        (save)=\"onEditFormPanelSave(null)\"\r\n        (cancel)=\"onEditFormPanelCancel(null)\"\r\n        (tab)=\"onTabKeyDown($event, index)\"\r\n        (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\r\n    >\r\n    </bsu-barsa-table-column>\r\n\r\n    }\r\n</ng-template>\r\n<ng-template #quickViewTemplate let-mo let-index=\"index\">\r\n    @if (!noContent) {\r\n    <fd-quick-view [id]=\"'id'\">\r\n        <fd-quick-view-group>\r\n            @for (column of setting.FieldListMapped; track column) {\r\n            <fd-quick-view-group-item [class.rowDirection]=\"column?.$CustomComponent?.IsRowDirection\">\r\n                @if (column) { @if(!column.$CustomComponent?.HideColumnCaption) {<fd-quick-view-group-item-label>\r\n                    {{ column.Caption | bbbTranslate }} </fd-quick-view-group-item-label\r\n                >}\r\n                <fd-quick-view-group-item-content>\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: column,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            } @if (setting.DescriptionField) {\r\n            <fd-quick-view-group-item>\r\n                <fd-quick-view-group-item-content>\r\n                    @if (inlineEditMode && allowInlineEdit) {\r\n                    <fd-quick-view-group-item-label>\r\n                        {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                    </fd-quick-view-group-item-label>\r\n                    }\r\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.DescriptionField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </fd-quick-view-group-item-content>\r\n                @if (setting.ActionFieldNameField) {\r\n                <fd-quick-view-group-item-content\r\n                    class=\"action\"\r\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\r\n                >\r\n                    <a fd-link>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                columnTemplate;\r\n                                context: {\r\n                                    $implicit: setting.ActionFieldNameField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    index: index\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </a>\r\n                </fd-quick-view-group-item-content>\r\n                }\r\n            </fd-quick-view-group-item>\r\n            }\r\n        </fd-quick-view-group>\r\n    </fd-quick-view>\r\n    }\r\n</ng-template>\r\n<ng-template #contentTemplate let-mo let-index=\"index\">\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow style=\"align-items: center\">\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @for (column of setting.FieldListMapped; track column) {\r\n                <div style=\"display: flex\">\r\n                    <label fd-form-label [colon]=\"true\">{{ column.Caption | bbbTranslate }}</label>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            columnTemplate;\r\n                            context: {\r\n                                $implicit: column,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                index: index\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (setting.DescriptionField) {\r\n            <div [fdLayoutGridCol]=\"12\">\r\n                @if (inlineEditMode && allowInlineEdit) {\r\n                <label>\r\n                    {{ setting.DescriptionField?.Alias | bbbTranslate }}\r\n                </label>\r\n                }\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.DescriptionField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            }\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n<ng-template #avatar let-avatar let-visible=\"visible\" let-circle=\"circle\" let-avatarField=\"avatarField\">\r\n    @if (visible) {\r\n    <fd-avatar\r\n        alterIcon=\"alt|content|backup|default-icon\"\r\n        [circle]=\"circle\"\r\n        [image]=\"\r\n            avatarField\r\n                ? (mo[avatarField.Name]?.FileId | picFieldSrc: 'ID':avatarField.FieldDefId)\r\n                : ''\r\n        \"\r\n        [size]=\"\r\n            deviceSize === 'xl' || deviceSize === 'l' ? setting.AvatarSizeDesktop$Caption : setting.AvatarSize$Caption\r\n        \"\r\n        [glyph]=\"avatar || (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\"\r\n    >\r\n    </fd-avatar>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template\r\n    #contentTemplateComponent\r\n    let-mo\r\n    let-index=\"index\"\r\n    let-componentSettings=\"componentSettings\"\r\n    let-component=\"component\"\r\n>\r\n    <bnrc-dynamic-item-component\r\n        [component]=\"component\"\r\n        [mo]=\"mo\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"componentSettings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n    ></bnrc-dynamic-item-component>\r\n</ng-template>\r\n\r\n<ng-template #renderHeader let-mo let-index=\"index\">\r\n    @if(!hideOpenIcon && (openOnClick || (canView && deviceName !== 'desktop'))){\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderMobileCanView;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }@else{\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            renderHeaderDesktop;\r\n            context: {\r\n                $implicit: mo,\r\n                index: index\r\n            }\r\n        \"\r\n    ></ng-container>\r\n    }\r\n</ng-template>\r\n<ng-template #renderHeaderDesktop let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderDesktop\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if (setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId\r\n                          | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n            <span fd-card-counter status=\"positive\" [class.!tw-hidden]=\"!setting.CounterField\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            disableEllapsis: false\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n                (overflowClick)=\"onRowCheck(true)\"\r\n            ></div>\r\n            }\r\n        </fd-card-main-header>\r\n        <ng-container *ngTemplateOutlet=\"extendedHeader\"></ng-container>\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #extendedHeader>\r\n    @if(setting.hasExtHeader){\r\n    <fd-card-extended-header>\r\n        <div fd-card-header-column>\r\n            <div fd-card-header-row>\r\n                @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst, layout94:\r\n                layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                }\r\n            </div>\r\n        </div>\r\n        <div fd-card-header-column [align]=\"'right'\">\r\n            <div fd-card-header-row>\r\n                @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst, layout94:\r\n                layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                }\r\n            </div>\r\n        </div>\r\n    </fd-card-extended-header>\r\n    }\r\n</ng-template>\r\n<!--\r\n    \u0633\u0644\u0648\u0644\u0650 \u0627\u06A9\u0633\u062A\u0646\u062F\u062F\u200C\u0647\u062F\u0631: \u0627\u06AF\u0631 \u0645\u0642\u062F\u0627\u0631 \u06CC\u06A9 \u0633\u062A\u0648\u0646\u0650 \u06CC\u0627\u0641\u062A\u0647\u200C\u0634\u062F\u0647 \u0628\u0627\u0634\u062F (\u062F\u0627\u0631\u0627\u06CC Name) \u0628\u0627 columnTemplate \u0631\u0646\u062F\u0631 \u0645\u06CC\u200C\u0634\u0648\u062F\u061B\r\n    \u062F\u0631 \u063A\u06CC\u0631\u0650 \u0627\u06CC\u0646 \u0635\u0648\u0631\u062A \u0647\u0645\u0627\u0646 \u0645\u0642\u062F\u0627\u0631\u0650 \u062E\u0627\u0645\u0650 \u062A\u0646\u0638\u06CC\u0645 \u0628\u0647\u200C\u0635\u0648\u0631\u062A\u0650 \u0645\u062A\u0646\u0650 \u062B\u0627\u0628\u062A \u0646\u0645\u0627\u06CC\u0634 \u062F\u0627\u062F\u0647 \u0645\u06CC\u200C\u0634\u0648\u062F.\r\n-->\r\n<ng-template\r\n    #extHeaderCell\r\n    let-val\r\n    let-mo=\"mo\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n    let-disableEllapsis=\"disableEllapsis\"\r\n>\r\n    @if (val?.Name) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            columnTemplate;\r\n            context: { $implicit: val, mo: mo, index: index, layout94: layout94, disableEllapsis: disableEllapsis }\r\n        \"\r\n    ></ng-container>\r\n    } @else if (val) {\r\n    <span class=\"ext-header-literal\">{{ val | bbbTranslate }}</span>\r\n    }\r\n</ng-template>\r\n<ng-template #renderHeaderMobileCanView let-mo let-index=\"index\">\r\n    <fd-card-header class=\"HeaderMobileCanView\">\r\n        <div>\r\n            @if(isCheckList){\r\n            <fd-checkbox\r\n                [name]=\"mo.$Caption\"\r\n                [ngModel]=\"isChecked\"\r\n                (ngModelChange)=\"onRowCheck()\"\r\n                stopPropagation\r\n            ></fd-checkbox>\r\n            }\r\n        </div>\r\n        <fd-card-main-header>\r\n            @if ( setting.AvatarField || setting.Avatar) {\r\n            <fd-avatar\r\n                alterIcon=\"alt|content|backup|default-icon\"\r\n                [circle]=\"setting.CircleAvatar\"\r\n                [image]=\"\r\n                    setting.AvatarField\r\n                        ? (mo[setting.AvatarField.Name]?.FileId\r\n                          | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                        : ''\r\n                \"\r\n                [size]=\"\r\n                    deviceSize === 'xl' || deviceSize === 'l'\r\n                        ? setting.AvatarSizeDesktop$Caption\r\n                        : setting.AvatarSize$Caption\r\n                \"\r\n                [glyph]=\"\r\n                    setting.Avatar ||\r\n                    (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                \"\r\n            ></fd-avatar>\r\n            }\r\n            <h2 fd-card-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index,\r\n                            fdTextMode: true\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h2>\r\n            <h3 fd-card-subtitle>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        columnTemplate;\r\n                        context: {\r\n                            $implicit: setting.SubtitleField,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </h3>\r\n\r\n            @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\r\n            <div\r\n                ulvContextMenu\r\n                fd-card-header-action\r\n                [allColumns]=\"allColumns\"\r\n                [footerMode]=\"false\"\r\n                [menuItems]=\"contextMenuItems\"\r\n                [contextMenuOverflowText]=\"contextMenuOverflowText\"\r\n                [styleIndex]=\"styleIndex\"\r\n                [conditionalFormats]=\"conditionalFormats\"\r\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                [mo]=\"mo\"\r\n                (commandClick)=\"onUlvCommand()\"\r\n                (overflowClick)=\"onRowCheck(true)\"\r\n            ></div>\r\n            }@else {\r\n            <button\r\n                fd-button\r\n                fd-card-header-action\r\n                class=\"view-btn\"\r\n                stopPropagation\r\n                (click)=\"onRowClick()\"\r\n                [glyph]=\"navigationArrow\"\r\n                fdType=\"transparent\"\r\n            ></button>\r\n            }\r\n        </fd-card-main-header>\r\n        @if(setting.hasExtHeader){\r\n        <fd-card-extended-header>\r\n            <div fd-card-header-column>\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderFColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderFColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderFColRowSec) { @let ctx = { $implicit: setting.ExtHeaderFColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fd-card-header-column [align]=\"'right'\">\r\n                <div fd-card-header-row>\r\n                    @if (setting.ExtHeaderSColRowFirst) { @let ctx = { $implicit: setting.ExtHeaderSColRowFirst,\r\n                    layout94: layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                    } @if (setting.ExtHeaderSColRowSec) { @let ctx = { $implicit: setting.ExtHeaderSColRowSec, layout94:\r\n                    layout$ | async, mo: mo, index: index, disableEllapsis: false };\r\n                    <ng-container *ngTemplateOutlet=\"extHeaderCell; context: ctx\"></ng-container>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </fd-card-extended-header>\r\n        }\r\n    </fd-card-header>\r\n</ng-template>\r\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\r\n    <bnrc-card-dynamic-item-component\r\n        [component]=\"setting.HeaderComponent\"\r\n        [maxHeightHeader]=\"maxHeightHeader\"\r\n        [mo]=\"mo\"\r\n        [columnTemplate]=\"columnTemplate\"\r\n        [extendedHeaderTemplate]=\"extendedHeader\"\r\n        [layout94$]=\"layout$\"\r\n        [styleIndex]=\"mo.$StyleIndex\"\r\n        [isChecked]=\"isChecked\"\r\n        [setting]=\"setting\"\r\n        [parameters]=\"setting.HeaderComponent.Settings\"\r\n        [editMode]=\"inlineEditMode\"\r\n        [rtl]=\"rtl\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [index]=\"index\"\r\n        [allColumns]=\"allColumns\"\r\n        [contextMenuItems]=\"contextMenuItems\"\r\n        [canView]=\"canView\"\r\n        [hideOpenIcon]=\"hideOpenIcon\"\r\n        [conditionalFormats]=\"conditionalFormats\"\r\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n        [navigationArrow]=\"navigationArrow\"\r\n        [isCheckList]=\"isCheckList\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-card-dynamic-item-component>\r\n</ng-template>\r\n", styles: ["fd-card.fd-card--banner>fd-card-media{border-radius:inherit}fd-card.fd-card--banner>fd-card-media .fd-card__media-image-container{z-index:4}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card fd-card-content ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.extra-footer{flex-wrap:wrap}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card.hide-header-border ::ng-deep fd-card-header fd-card-main-header>.fd-card__header-main{border:none}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "hideOpenIcon", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "maxHeightHeader", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "component", type: i2.CardDynamicItemComponent, selector: "bnrc-card-dynamic-item-component", inputs: ["columnTemplate", "extendedHeaderTemplate"] }, { kind: "directive", type: i2.DynamicCommandDirective, selector: "[dynCommand]", inputs: ["dynCommand", "mo", "enableCommand"], outputs: ["commandClick"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[stopPropagation]" }, { kind: "component", type: i4$4.AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize", "ariaDescribedby"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange", "keyDown"] }, { kind: "component", type: i7$2.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$2.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "directive", type: i7$2.CardHeaderActionDirective, selector: "[fd-card-header-action]" }, { kind: "component", type: i7$2.CardExtendedHeaderComponent, selector: "fd-card-extended-header", inputs: ["ariaRoleDescription", "align"] }, { kind: "directive", type: i7$2.CardHeaderRowDirective, selector: "[fd-card-header-row]" }, { kind: "directive", type: i7$2.CardHeaderColumnDirective, selector: "[fd-card-header-column]", inputs: ["align"] }, { kind: "component", type: i7$2.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$2.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i7$2.CardSubtitleDirective, selector: "[fd-card-subtitle]", inputs: ["id"] }, { kind: "directive", type: i7$2.CardCounterDirective, selector: "[fd-card-counter]", inputs: ["id", "statusInput"] }, { kind: "component", type: i7$2.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$2.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i7$2.CardMediaComponent, selector: "fd-card-media", inputs: ["ariaRoleDescription", "hasPadding", "shellColor", "legendColor"] }, { kind: "directive", type: i7$2.CardMediaImageDirective, selector: "[fd-card-media-image]" }, { kind: "directive", type: i7$2.CardMediaImageContainerDirective, selector: "[fd-card-media-image-container]" }, { kind: "directive", type: i7$2.CardMediaContentContainerDirective, selector: "[fd-card-media-content-container]", inputs: ["isOverlay", "shellColor", "legendColor"] }, { kind: "directive", type: i7$2.CardMediaHeadingDirective, selector: "[fd-card-media-heading]", inputs: ["id", "level"] }, { kind: "directive", type: i7$2.CardMediaTextDirective, selector: "[fd-card-media-text]" }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id", "disabled", "unitDescription", "independent"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "directive", type: i6.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i12.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i12.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label", inputs: ["allowWrap"] }, { kind: "component", type: i12.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i12.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick", "overflowClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: ["disableEllapsis", "fdTextMode"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CardItemComponent, decorators: [{
             type: Component,
@@ -6191,7 +6248,7 @@ class ListItemComponent extends BaseViewItemPropsComponent {
         PreventDefaulEvent(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ListItemComponent, isStandalone: false, selector: "bsu-list-item", inputs: { setting: "setting", isDisplayType: "isDisplayType" }, usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\r\n></ng-container>\r\n<ng-template #standardTemplate let-mo>\r\n    <li\r\n        fd-list-item\r\n        class=\"standard-list-row\"\r\n        [ngClass]=\"deviceSize\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n        [class.selected]=\"isChecked === true\"\r\n        [selected]=\"isChecked === true\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n        [subline]=\"true\"\r\n    >\r\n        <fd-checkbox\r\n            [class.tw-hidden]=\"!isCheckList\"\r\n            [name]=\"mo.$Caption\"\r\n            [ngModel]=\"isChecked\"\r\n            (change)=\"onRowCheck2($event)\"\r\n        ></fd-checkbox>\r\n\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n            [moLinker]=\"mo\"\r\n            [disableHyperLink]=\"disableHyperLink || inlineEditMode || !canView\"\r\n            [alternateEditObjectColumn]=\"alternateEditObjectColumn\"\r\n        >\r\n            @if (setting.IconFont || setting.AvatarField) {\r\n            <span fd-list-thumbnail>\r\n                <fd-avatar\r\n                    alterIcon=\"alt|content|backup|default-icon\"\r\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\r\n                    [circle]=\"true\"\r\n                    [image]=\"\r\n                        setting.AvatarField\r\n                            ? (mo[setting.AvatarField.Name]?.FileId\r\n                              | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                            : ''\r\n                    \"\r\n                    [size]=\"avatarSize\"\r\n                    [transparent]=\"true\"\r\n                    [glyph]=\"\r\n                        setting.IconFont ??\r\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                    \"\r\n                >\r\n                </fd-avatar>\r\n            </span>\r\n            }\r\n            <div fd-list-content>\r\n                <div fd-list-byline [twoCol]=\"true\">\r\n                    <div fd-list-title>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.TitleField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats,\r\n                                    index: 0\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.StatusField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </div>\r\n                <div fd-list-byline [class.tw-hidden]=\"!setting.SubtitleField\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderColumn;\r\n                            context: {\r\n                                $implicit: setting.SubtitleField,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                conditionalFormats: conditionalFormats\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n\r\n                <div fd-list-byline class=\"tw-flex-wrap tw-flex tw-gap-4\">\r\n                    @for (column of setting.FieldListMapped; track column) { @if (column) {\r\n                    @if(column.$CustomComponent?.HideColumnCaption===false) {\r\n                    <span class=\"\"> {{ column.Caption | bbbTranslate }} </span>}\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderColumn;\r\n                            context: {\r\n                                $implicit: column,\r\n                                conditionalFormats: conditionalFormats,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                index: index\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    } }\r\n                </div>\r\n            </div>\r\n        </a>\r\n        @if (contextMenuItems.length) {\r\n        <bsu-ulv-context-menu\r\n            class=\"tw-self-center\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"mo\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n            (overflowClick)=\"onRowCheck()\"\r\n        ></bsu-ulv-context-menu>\r\n        } @if (canView && !hideOpenIcon) {\r\n        <button (click)=\"onRowClick()\" fdType=\"transparent\" [glyph]=\"navigationArrow\" fd-button></button>\r\n        }\r\n    </li>\r\n</ng-template>\r\n<ng-template #displayTemplate let-mo>\r\n    @if (!mo.parent || mo.parent?.expanded) {\r\n    <li\r\n        class=\"display\"\r\n        [ngClass]=\"deviceSize\"\r\n        fd-list-item\r\n        [interactive]=\"false\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n    >\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            style=\"cursor: default\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n            style=\"column-gap: 3px\"\r\n            [moLinker]=\"mo\"\r\n            [disableHyperLink]=\"disableHyperLink || inlineEditMode || !canView\"\r\n            [alternateEditObjectColumn]=\"alternateEditObjectColumn\"\r\n        >\r\n            @if (setting.AvatarField) {\r\n            <img\r\n                [src]=\"\r\n                    mo[setting.AvatarField.Name]?.FileId\r\n                        | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\r\n                \"\r\n                style=\"width: 24px; height: 24px\"\r\n                loading=\"lazy\"\r\n            />\r\n            } @if (setting.IconFont) {\r\n            <i fd-list-icon [glyph]=\"setting.IconFont\" [style.color]=\"setting.IconColor ? setting.IconColor : null\">\r\n            </i>\r\n            } @if (!setting.IconFont && mo.$State === 'New' && !isChecked) {\r\n            <i fd-list-icon glyph=\"favorite\"></i>\r\n            } @if (!setting.IconFont && inlineEditMode && isChecked) {\r\n            <i fd-list-icon glyph=\"edit\"></i>\r\n            } @if (isCheckList) {\r\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\r\n            }\r\n            <span fd-list-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: 0\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\" [class.flex1]=\"contextMenuItems.length === 0\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                @if (canView && !hideOpenIcon) {\r\n                <button fd-button (click)=\"onRowClick()\" [glyph]=\"navigationArrow\" fdType=\"transparent\"></button>\r\n                } @if (contextMenuItems.length) {\r\n                <bsu-ulv-context-menu\r\n                    [menuItems]=\"contextMenuItems\"\r\n                    [conditionalFormats]=\"conditionalFormats\"\r\n                    [styleIndex]=\"styleIndex\"\r\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                    [mo]=\"mo\"\r\n                    (commandClick)=\"onUlvCommand()\"\r\n                    (overflowClick)=\"onRowCheck()\"\r\n                ></bsu-ulv-context-menu>\r\n                }\r\n            </span>\r\n        </a>\r\n    </li>\r\n    }\r\n</ng-template>\r\n<ng-template\r\n    #renderColumn\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    @if (column) {\r\n    <div\r\n        #divEl\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [styleIndex]=\"styleIndex\"\r\n        [hostEl]=\"divEl\"\r\n        [dbName]=\"column.Name\"\r\n    >\r\n        <bsu-barsa-table-column\r\n            [mo]=\"mo\"\r\n            [allColumns]=\"allColumns\"\r\n            [column]=\"column\"\r\n            [attachmentViewType]=\"attachmentViewType\"\r\n            [isdirty]=\"dirtyColumns && dirtyColumns[column.Name]\"\r\n            [value]=\"column | columnValue: mo\"\r\n            [icon]=\"column | columnIcon: mo\"\r\n            [customComponent]=\"column.$CustomComponent\"\r\n            [column]=\"column\"\r\n            [disableEllapsis]=\"secondaryColumns?.length || disableEllapsis\"\r\n            [editMode]=\"(isChecked || inlineEditWithoutSelection) && inlineEditMode && allowInlineEdit\"\r\n            [inlineEditMode]=\"inlineEditMode\"\r\n            [isChecked]=\"isChecked === true\"\r\n            [index]=\"index\"\r\n            [formSetting]=\"formSetting\"\r\n            [rtl]=\"rtl\"\r\n            [isMobile]=\"isMobile\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [layout94]=\"layout94\"\r\n            [cellEdit]=\"activeColumn() === column && isChecked\"\r\n            (save)=\"onEditFormPanelSave(null)\"\r\n            (cancel)=\"onEditFormPanelCancel(null)\"\r\n            (tab)=\"onTabKeyDown($event, index)\"\r\n            (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\r\n        >\r\n        </bsu-barsa-table-column>\r\n    </div>\r\n    }\r\n</ng-template>\r\n", styles: [":host ::ng-deep .conditional-format *{font-weight:inherit!important;background-color:inherit!important;color:inherit!important}:host li.s{height:auto}:host .flex1{flex:1;display:flex;justify-content:start;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.MoLinkerDirective, selector: "[moLinker]", inputs: ["moLinker", "alternateEditObjectColumn", "disableHyperLink"] }, { kind: "component", type: i4$4.AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "directive", type: i7.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i7.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i2$6.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick", "overflowClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: ["disableEllapsis", "fdTextMode"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ListItemComponent, isStandalone: false, selector: "bsu-list-item", inputs: { setting: "setting", isDisplayType: "isDisplayType" }, usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\r\n></ng-container>\r\n<ng-template #standardTemplate let-mo>\r\n    <li\r\n        fd-list-item\r\n        class=\"standard-list-row\"\r\n        [ngClass]=\"deviceSize\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n        [class.selected]=\"isChecked === true\"\r\n        [selected]=\"isChecked === true\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n        [subline]=\"true\"\r\n    >\r\n        <fd-checkbox\r\n            [class.tw-hidden]=\"!isCheckList\"\r\n            [name]=\"mo.$Caption\"\r\n            [ngModel]=\"isChecked\"\r\n            (change)=\"onRowCheck2($event)\"\r\n        ></fd-checkbox>\r\n\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n            [moLinker]=\"mo\"\r\n            [disableHyperLink]=\"disableHyperLink || inlineEditMode || !canView\"\r\n            [alternateEditObjectColumn]=\"alternateEditObjectColumn\"\r\n        >\r\n            @if (setting.IconFont || setting.AvatarField) {\r\n            <span fd-list-thumbnail>\r\n                <fd-avatar\r\n                    alterIcon=\"alt|content|backup|default-icon\"\r\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\r\n                    [circle]=\"true\"\r\n                    [image]=\"\r\n                        setting.AvatarField\r\n                            ? (mo[setting.AvatarField.Name]?.FileId\r\n                              | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\r\n                            : ''\r\n                    \"\r\n                    [size]=\"avatarSize\"\r\n                    [transparent]=\"true\"\r\n                    [glyph]=\"\r\n                        setting.IconFont ??\r\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\r\n                    \"\r\n                >\r\n                </fd-avatar>\r\n            </span>\r\n            }\r\n            <div fd-list-content>\r\n                <div fd-list-byline [twoCol]=\"true\">\r\n                    <div fd-list-title>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.TitleField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats,\r\n                                    index: 0\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                renderColumn;\r\n                                context: {\r\n                                    $implicit: setting.StatusField,\r\n                                    layout94: layout$ | async,\r\n                                    mo: mo,\r\n                                    conditionalFormats: conditionalFormats\r\n                                }\r\n                            \"\r\n                        ></ng-container>\r\n                    </div>\r\n                </div>\r\n                <div fd-list-byline [class.tw-hidden]=\"!setting.SubtitleField\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderColumn;\r\n                            context: {\r\n                                $implicit: setting.SubtitleField,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                conditionalFormats: conditionalFormats\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n\r\n                <div fd-list-byline class=\"tw-flex-wrap tw-flex tw-gap-4\">\r\n                    @for (column of setting.FieldListMapped; track column) { @if (column) {\r\n                    @if(column.$CustomComponent?.HideColumnCaption===false) {\r\n                    <span class=\"\"> {{ column.Caption | bbbTranslate }} </span>}\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderColumn;\r\n                            context: {\r\n                                $implicit: column,\r\n                                conditionalFormats: conditionalFormats,\r\n                                layout94: layout$ | async,\r\n                                mo: mo,\r\n                                index: index\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                    } }\r\n                </div>\r\n            </div>\r\n        </a>\r\n        @if (contextMenuItems.length) {\r\n        <bsu-ulv-context-menu\r\n            class=\"tw-self-center\"\r\n            [menuItems]=\"contextMenuItems\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [mo]=\"mo\"\r\n            (commandClick)=\"onUlvCommand()\"\r\n            (overflowClick)=\"onRowCheck()\"\r\n        ></bsu-ulv-context-menu>\r\n        } @if (canView && !hideOpenIcon) {\r\n        <button (click)=\"onRowClick()\" fdType=\"transparent\" [glyph]=\"navigationArrow\" fd-button></button>\r\n        }\r\n    </li>\r\n</ng-template>\r\n<ng-template #displayTemplate let-mo>\r\n    @if (!mo.parent || mo.parent?.expanded) {\r\n    <li\r\n        class=\"display\"\r\n        [ngClass]=\"deviceSize\"\r\n        fd-list-item\r\n        [interactive]=\"false\"\r\n        (dblclick)=\"onRowClick()\"\r\n        (click)=\"onRowCheck()\"\r\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\r\n    >\r\n        <a\r\n            fd-list-link\r\n            [attr.rtl]=\"rtl\"\r\n            class=\"li-link\"\r\n            style=\"cursor: default\"\r\n            [class.checklist]=\"isCheckList\"\r\n            #aEl\r\n            [applyConditionalFormats]=\"conditionalFormats\"\r\n            [styleIndex]=\"styleIndex\"\r\n            [hostEl]=\"aEl\"\r\n            style=\"column-gap: 3px\"\r\n            [moLinker]=\"mo\"\r\n            [disableHyperLink]=\"disableHyperLink || inlineEditMode || !canView\"\r\n            [alternateEditObjectColumn]=\"alternateEditObjectColumn\"\r\n        >\r\n            @if (setting.AvatarField) {\r\n            <img\r\n                [src]=\"\r\n                    mo[setting.AvatarField.Name]?.FileId\r\n                        | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\r\n                \"\r\n                style=\"width: 24px; height: 24px\"\r\n                loading=\"lazy\"\r\n            />\r\n            } @if (setting.IconFont) {\r\n            <i fd-list-icon [glyph]=\"setting.IconFont\" [style.color]=\"setting.IconColor ? setting.IconColor : null\">\r\n            </i>\r\n            } @if (!setting.IconFont && mo.$State === 'New' && !isChecked) {\r\n            <i fd-list-icon glyph=\"favorite\"></i>\r\n            } @if (!setting.IconFont && inlineEditMode && isChecked) {\r\n            <i fd-list-icon glyph=\"edit\"></i>\r\n            } @if (isCheckList) {\r\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\r\n            }\r\n            <span fd-list-title>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.TitleField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: 0\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n            </span>\r\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\" [class.flex1]=\"contextMenuItems.length === 0\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderColumn;\r\n                        context: {\r\n                            $implicit: setting.CounterField,\r\n                            conditionalFormats: conditionalFormats,\r\n                            layout94: layout$ | async,\r\n                            mo: mo,\r\n                            index: index\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                @if (canView && !hideOpenIcon) {\r\n                <button fd-button (click)=\"onRowClick()\" [glyph]=\"navigationArrow\" fdType=\"transparent\"></button>\r\n                } @if (contextMenuItems.length) {\r\n                <bsu-ulv-context-menu\r\n                    [menuItems]=\"contextMenuItems\"\r\n                    [conditionalFormats]=\"conditionalFormats\"\r\n                    [styleIndex]=\"styleIndex\"\r\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n                    [mo]=\"mo\"\r\n                    (commandClick)=\"onUlvCommand()\"\r\n                    (overflowClick)=\"onRowCheck()\"\r\n                ></bsu-ulv-context-menu>\r\n                }\r\n            </span>\r\n        </a>\r\n    </li>\r\n    }\r\n</ng-template>\r\n<ng-template\r\n    #renderColumn\r\n    let-column\r\n    let-mo=\"mo\"\r\n    let-conditionalFormats=\"conditionalFormats\"\r\n    let-index=\"index\"\r\n    let-layout94=\"layout94\"\r\n>\r\n    @if (column) {\r\n    <div\r\n        #divEl\r\n        [applyConditionalFormats]=\"conditionalFormats\"\r\n        [styleIndex]=\"styleIndex\"\r\n        [hostEl]=\"divEl\"\r\n        [dbName]=\"column.Name\"\r\n    >\r\n        <bsu-barsa-table-column\r\n            [mo]=\"mo\"\r\n            [allColumns]=\"allColumns\"\r\n            [column]=\"column\"\r\n            [attachmentViewType]=\"attachmentViewType\"\r\n            [isdirty]=\"dirtyColumns && dirtyColumns[column.Name]\"\r\n            [value]=\"column | columnValue: mo\"\r\n            [icon]=\"column | columnIcon: mo\"\r\n            [customComponent]=\"column.$CustomComponent\"\r\n            [column]=\"column\"\r\n            [disableEllapsis]=\"secondaryColumns?.length || disableEllapsis\"\r\n            [editMode]=\"(isChecked || inlineEditWithoutSelection) && inlineEditMode && allowInlineEdit\"\r\n            [inlineEditMode]=\"inlineEditMode\"\r\n            [isChecked]=\"isChecked === true\"\r\n            [index]=\"index\"\r\n            [formSetting]=\"formSetting\"\r\n            [rtl]=\"rtl\"\r\n            [isMobile]=\"isMobile\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [layout94]=\"layout94\"\r\n            [cellEdit]=\"activeColumn() === column && isChecked\"\r\n            (save)=\"onEditFormPanelSave(null)\"\r\n            (cancel)=\"onEditFormPanelCancel(null)\"\r\n            (tab)=\"onTabKeyDown($event, index)\"\r\n            (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\r\n        >\r\n        </bsu-barsa-table-column>\r\n    </div>\r\n    }\r\n</ng-template>\r\n", styles: [":host ::ng-deep .conditional-format *{font-weight:inherit!important;background-color:inherit!important;color:inherit!important}:host li.s{height:auto}:host .flex1{flex:1;display:flex;justify-content:start;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.MoLinkerDirective, selector: "[moLinker]", inputs: ["moLinker", "alternateEditObjectColumn", "disableHyperLink"] }, { kind: "component", type: i4$4.AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "directive", type: i7.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i7.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i2$7.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "closeOnOutsideClick", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "contextMenuOverflowText", "appendTo"], outputs: ["commandClick", "overflowClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: ["disableEllapsis", "fdTextMode"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
@@ -6468,11 +6525,15 @@ class BarsaTableHeaderComponent extends BaseComponent {
         const thList = this.thArr;
         this.columns.forEach((c, i) => {
             c.Width = thList[i].offsetWidth;
-            if (i !== this.columns.length - 1) {
-                this._renderer2.setStyle(thList[i], 'width', `${c.Width}px`);
-            }
+            this._renderer2.setStyle(thList[i], 'width', `${c.Width}px`);
         });
-        this._renderer2.setStyle(thList[thList.length - 1], 'width', '100%');
+        // اگه مجموعِ عرضِ ستون‌ها از عرضِ کانتینر کمتره، آخرین ستون رو کش می‌دیم که فضای خالیِ بعدش
+        // زشت نمونه؛ وگرنه (ستون‌ها زیادن و از عرض کانتینر رد زدن، پس باید اسکرولِ افقی بخوره) عرضِ
+        // طبیعیِ خودش رو نگه می‌داره تا از عرضِ جدولِ از قبل سرریزشده هم بیشتر بیرون نزنه.
+        const allColWidth = this.columns.reduce((sum, c) => sum + c.Width, 0);
+        if (this.tableWidth > 0 && allColWidth < this.tableWidth) {
+            this._renderer2.setStyle(thList[thList.length - 1], 'width', '100%');
+        }
         this.columnResize.emit(this.columns.map((c, i) => ({ name: c.Name, width: c.Width, thDom: thList[i] })));
         // console.log('columnWidthChange');
     }
@@ -7132,7 +7193,8 @@ class UiTableViewComponent extends ReportViewBaseComponent {
         calculateColumnWidthFitToContainer(elDom, this.canView, this.disableHeaderContextMenu, this.contextMenuItems, this.columns);
     }
     _freeColumnSize(_moDataList, _columns) {
-        calculateFreeColumnSize(this.columns);
+        const elDom = this._el.nativeElement.parentElement;
+        calculateFreeColumnSize(this.columns, elDom?.clientWidth ?? 0);
     }
     _setHeight(parentHeight, checkDialog = true) {
         super._setHeight(parentHeight, checkDialog);
@@ -7943,7 +8005,7 @@ class BreadcrumbComponent extends BaseComponent {
         this.url = url;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BreadcrumbComponent, isStandalone: false, selector: "bsu-breadcrumb", inputs: { breadCrumb: "breadCrumb", allBreadCrumb: "allBreadCrumb", isLast: "isLast", index: "index" }, usesInheritance: true, ngImport: i0, template: "@if (!isLast) {\r\n<a fd-link [href]=\"'#/'+url\">{{ breadCrumb.label | bbbTranslate }}</a>\r\n} @if (isLast) {\r\n<span dir=\"ltr\" [style.direction]=\"rtl ? 'rtl' : 'ltr'\">{{ breadCrumb.label | bbbTranslate }}</span>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i2$7.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "directive", type: i2$6.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BreadcrumbComponent, isStandalone: false, selector: "bsu-breadcrumb", inputs: { breadCrumb: "breadCrumb", allBreadCrumb: "allBreadCrumb", isLast: "isLast", index: "index" }, usesInheritance: true, ngImport: i0, template: "@if (!isLast) {\r\n<a fd-link [href]=\"'#/'+url\">{{ breadCrumb.label | bbbTranslate }}</a>\r\n} @if (isLast) {\r\n<span dir=\"ltr\" [style.direction]=\"rtl ? 'rtl' : 'ltr'\">{{ breadCrumb.label | bbbTranslate }}</span>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "directive", type: i2$7.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
@@ -10557,7 +10619,7 @@ class FormToolbarComponent extends FormToolbarBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormToolbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FormToolbarComponent, isStandalone: false, selector: "bsu-form-toolbar", outputs: { toolbarClick: "toolbarClick" }, viewQueries: [{ propertyName: "_tlbCmp", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "_divTempWidth", first: true, predicate: ["divTempWidth"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    resizeHandler\r\n    [fnResize]=\"onResize\"\r\n    #divTempWidth\r\n></div>\r\n<fd-toolbar\r\n    #formToolbar\r\n    fdType=\"transparent\"\r\n    [clearBorder]=\"true\"\r\n    [shouldOverflow]=\"true\"\r\n    [forceOverflow]=\"true\"\r\n    [style.width]=\"width\"\r\n    [class.firefox]=\"isFirefox\"\r\n    [style.width]=\"'100%'\"\r\n>\r\n    @for (btn of buttons; track btn; let i = $index; let last = $last; let first = $first) { @if ((btn === '-' ||\r\n    btn.text === '-') && !last && !first && deviceSize !== 's') {\r\n    <fd-toolbar-separator [attr.i]=\"i\" [attr.last]=\"last\" [attr.first]=\"first\"></fd-toolbar-separator>\r\n    } @if (btn.IAmMenu) { @if (btn.isBuiltin) {\r\n    <fd-split-button\r\n        [dir]=\"dirValue === 'rtl' ? 'rtl' : 'ltr'\"\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\r\n        (click)=\"menu2.open()\"\r\n    >\r\n        <fd-menu #menu2>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu2)\">\r\n                <div fd-menu-interactive>\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [glyph]=\"\r\n                            menuItem.newIcon\r\n                                ? menuItem.newIcon\r\n                                : menuItem.Data?.JsonExtraProp?.Icon\r\n                        \"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    @if (!menuItem.newIcon && menuItem.icon) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" loading=\"lazy\" />\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    } @if (!btn.isBuiltin) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [attr.text]=\"btn.text\"\r\n        [attr.itemId]=\"btn.itemId\"\r\n        [attr.name]=\"btn.name\"\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [glyph]=\"btn.FontIcon\"\r\n        [style.color]=\"btn.IconColor\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n    >\r\n        @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\" />\r\n        }\r\n        <fd-menu #menu>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu)\">\r\n                <div fd-menu-interactive>\r\n                    @if ( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon || menuItem.FontIcon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon ) {\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [ngClass]=\"\r\n                            menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                ? 'fd-button--' +\r\n                                  menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                : ''\r\n                        \"\r\n                        [style.color]=\"menuItem.IconColor\"\r\n                        [attr.name]=\"menuItem.name\"\r\n                        [attr.itemId]=\"menuItem.itemId\"\r\n                        [attr.text]=\"menuItem.text\"\r\n                        [glyph]=\"\r\n                            menuItem.newIcon ||\r\n                            menuItem.Data?.JsonExtraProp?.Icon ||\r\n                            menuItem.FontIcon ||\r\n                            menuItem.Data?.CustomUi?.Parameters?.Icon\r\n                        \"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    } @if ( !( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon || menuItem.FontIcon ) && menuItem.icon ) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" loading=\"lazy\" />\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } } @else { @if (!(btn === '-' || btn.text === '-')) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate; context: { $implicit: btn }\"\r\n    ></ng-container>\r\n    <ng-template #btnTemplate let-btn>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [disabled]=\"btn.disabled\"\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [fdOverflowPriority]=\"btn.overflowPriority\"\r\n            [fdOverflowGroup]=\"btn.overflowGroup\"\r\n            [fdType]=\"\r\n                btn.isWorkflow\r\n                    ? 'positive'\r\n                    : btn.design\r\n                    ? btn.design\r\n                    : btn.Data?.JsonExtraProp?.Design\r\n            \"\r\n            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\r\n            (click)=\"onToolbarClick(btn)\"\r\n        >\r\n            @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n            <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\" />\r\n            } @if (btn.text) {\r\n            <span>{{ btn.text }}</span>\r\n            }\r\n        </button>\r\n    </ng-template>\r\n    <ng-template #dynamicBtnTemplate let-btn>\r\n        <bnrc-dynamic-form-toolbaritem\r\n            fd-toolbar-item\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [component]=\"btn.Data.CustomUi\"\r\n            [context]=\"btn\"\r\n            [isEnable]=\"btn.Command?._isEnable\"\r\n            (btnClick)=\"onToolbarClick(btn)\"\r\n        ></bnrc-dynamic-form-toolbaritem>\r\n    </ng-template>\r\n    } } }\r\n</fd-toolbar>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column}:host fd-toolbar ::ng-deep .fd-toolbar__spacer{max-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.ResizeHandlerDirective, selector: "[resizeHandler]", inputs: ["fnResize"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "closeOnNavigation", "restoreFocusOnClose", "appendTo", "fixedPosition", "scrollStrategy", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaOrientation", "id"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: i2$6.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FormToolbarComponent, isStandalone: false, selector: "bsu-form-toolbar", outputs: { toolbarClick: "toolbarClick" }, viewQueries: [{ propertyName: "_tlbCmp", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "_divTempWidth", first: true, predicate: ["divTempWidth"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    resizeHandler\r\n    [fnResize]=\"onResize\"\r\n    #divTempWidth\r\n></div>\r\n<fd-toolbar\r\n    #formToolbar\r\n    fdType=\"transparent\"\r\n    [clearBorder]=\"true\"\r\n    [shouldOverflow]=\"true\"\r\n    [forceOverflow]=\"true\"\r\n    [style.width]=\"width\"\r\n    [class.firefox]=\"isFirefox\"\r\n    [style.width]=\"'100%'\"\r\n>\r\n    @for (btn of buttons; track btn; let i = $index; let last = $last; let first = $first) { @if ((btn === '-' ||\r\n    btn.text === '-') && !last && !first && deviceSize !== 's') {\r\n    <fd-toolbar-separator [attr.i]=\"i\" [attr.last]=\"last\" [attr.first]=\"first\"></fd-toolbar-separator>\r\n    } @if (btn.IAmMenu) { @if (btn.isBuiltin) {\r\n    <fd-split-button\r\n        [dir]=\"dirValue === 'rtl' ? 'rtl' : 'ltr'\"\r\n        fd-toolbar-item\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [mainAction]=\"{ mainActionTitle: btn.text, keepMainAction: true }\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        (primaryButtonClicked)=\"btn.isBuiltin && onToolbarClick(btn)\"\r\n        (click)=\"menu2.open()\"\r\n    >\r\n        <fd-menu #menu2>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu2)\">\r\n                <div fd-menu-interactive>\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [glyph]=\"\r\n                            menuItem.newIcon\r\n                                ? menuItem.newIcon\r\n                                : menuItem.Data?.JsonExtraProp?.Icon\r\n                        \"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    @if (!menuItem.newIcon && menuItem.icon) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" loading=\"lazy\" />\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    } @if (!btn.isBuiltin) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [attr.text]=\"btn.text\"\r\n        [attr.itemId]=\"btn.itemId\"\r\n        [attr.name]=\"btn.name\"\r\n        [fdOverflowPriority]=\"btn.overflowPriority\"\r\n        [fdOverflowGroup]=\"btn.overflowGroup\"\r\n        [glyph]=\"btn.FontIcon\"\r\n        [style.color]=\"btn.IconColor\"\r\n        [fdType]=\"btn.design ? btn.design : btn.Data?.JsonExtraProp?.Design\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n    >\r\n        @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\" />\r\n        }\r\n        <fd-menu #menu>\r\n            @for (menuItem of btn.menu.items; track menuItem) {\r\n            <li fd-menu-item [disabled]=\"menuItem.disabled\" (click)=\"onToolbarClick(menuItem, menu)\">\r\n                <div fd-menu-interactive>\r\n                    @if ( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon || menuItem.FontIcon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon ) {\r\n                    <fd-menu-addon\r\n                        position=\"before\"\r\n                        [ngClass]=\"\r\n                            menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                ? 'fd-button--' +\r\n                                  menuItem.Data?.CustomUi?.Parameters?.FdType$Caption\r\n                                : ''\r\n                        \"\r\n                        [style.color]=\"menuItem.IconColor\"\r\n                        [attr.name]=\"menuItem.name\"\r\n                        [attr.itemId]=\"menuItem.itemId\"\r\n                        [attr.text]=\"menuItem.text\"\r\n                        [glyph]=\"\r\n                            menuItem.newIcon ||\r\n                            menuItem.Data?.JsonExtraProp?.Icon ||\r\n                            menuItem.FontIcon ||\r\n                            menuItem.Data?.CustomUi?.Parameters?.Icon\r\n                        \"\r\n                    >\r\n                    </fd-menu-addon>\r\n                    } @if ( !( menuItem.newIcon || menuItem.Data?.JsonExtraProp?.Icon ||\r\n                    menuItem.Data?.CustomUi?.Parameters?.Icon || menuItem.FontIcon ) && menuItem.icon ) {\r\n                    <img class=\"mr8\" [src]=\"menuItem.icon\" loading=\"lazy\" />\r\n                    }\r\n                    <span fd-menu-title>{{ menuItem.text }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } } @else { @if (!(btn === '-' || btn.text === '-')) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate; context: { $implicit: btn }\"\r\n    ></ng-container>\r\n    <ng-template #btnTemplate let-btn>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [disabled]=\"btn.disabled\"\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [fdOverflowPriority]=\"btn.overflowPriority\"\r\n            [fdOverflowGroup]=\"btn.overflowGroup\"\r\n            [fdType]=\"\r\n                btn.isWorkflow\r\n                    ? 'positive'\r\n                    : btn.design\r\n                    ? btn.design\r\n                    : btn.Data?.JsonExtraProp?.Design\r\n            \"\r\n            [glyph]=\"btn.newIcon ? btn.newIcon : btn.Data?.JsonExtraProp?.Icon\"\r\n            (click)=\"onToolbarClick(btn)\"\r\n        >\r\n            @if (!btn.Data?.JsonExtraProp?.Icon && !btn.newIcon && btn.icon) {\r\n            <img width=\"16\" [src]=\"btn.icon\" loading=\"lazy\" />\r\n            } @if (btn.text) {\r\n            <span>{{ btn.text }}</span>\r\n            }\r\n        </button>\r\n    </ng-template>\r\n    <ng-template #dynamicBtnTemplate let-btn>\r\n        <bnrc-dynamic-form-toolbaritem\r\n            fd-toolbar-item\r\n            [attr.text]=\"btn.text\"\r\n            [attr.itemId]=\"btn.itemId\"\r\n            [attr.name]=\"btn.name\"\r\n            [component]=\"btn.Data.CustomUi\"\r\n            [context]=\"btn\"\r\n            [isEnable]=\"btn.Command?._isEnable\"\r\n            (btnClick)=\"onToolbarClick(btn)\"\r\n        ></bnrc-dynamic-form-toolbaritem>\r\n    </ng-template>\r\n    } } }\r\n</fd-toolbar>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column}:host fd-toolbar ::ng-deep .fd-toolbar__spacer{max-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.ResizeHandlerDirective, selector: "[resizeHandler]", inputs: ["fnResize"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "closeOnNavigation", "restoreFocusOnClose", "appendTo", "fixedPosition", "scrollStrategy", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaOrientation", "id"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: i2$7.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormToolbarComponent, decorators: [{
             type: Component,
@@ -10733,11 +10795,11 @@ class FundamentalDynamicFormComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FundamentalDynamicFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FundamentalDynamicFormComponent, isStandalone: false, 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", infobars: "infobars", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", circleAvatar: "circleAvatar", hideBreadCrumb: "hideBreadCrumb", rtl: "rtl", hideFooter: "hideFooter", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", fullscreen: "fullscreen", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", selectedTabPageName: "selectedTabPageName", modernTabContainerComponent: "modernTabContainerComponent", layoutGridCol: "layoutGridCol", colLg: "colLg", colXl: "colXl", colMd: "colMd", footerDesign: "footerDesign", formContentMaxWidth: "formContentMaxWidth", formContentJustify: "formContentJustify", workflowButtons: "workflowButtons", lastUpdateTime: "lastUpdateTime" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close", fullscreenRequest: "fullscreenRequest", dismissInfobar: "dismissInfobar" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true, static: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "closeFormTemplate", first: true, predicate: ["closeForm"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (mask) {\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\r\n    <bsu-mask size=\"m\"></bsu-mask>\r\n</div>\r\n}\r\n\r\n<fd-dynamic-page\r\n    [size]=\"isMobile ? 'small' : 'large'\"\r\n    [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\r\n    [class.header-border]=\"!removeHeaderBorder\"\r\n    [attr.isMobile]=\"isMobile\"\r\n    [attr.contentIsPage]=\"contentIsPage\"\r\n    mobile\r\n    formClose\r\n    [isMobile]=\"isMobile\"\r\n>\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"!description\"\r\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\r\n        [class.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb\r\n            [class.hide]=\"isMobile || hideBreadCrumb\"\r\n            *ngIf=\"breadCrumbs?.length; else noBreadcrumbs\"\r\n        >\r\n            <fd-breadcrumb>\r\n                @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\r\n                trackBreadCrumb($index, breadCrumb); let i = $index; let last = $last) { @if(i>0) {\r\n                <fd-breadcrumb-item>\r\n                    <bsu-breadcrumb\r\n                        [index]=\"i\"\r\n                        [isLast]=\"last\"\r\n                        [breadCrumb]=\"breadCrumb\"\r\n                        [allBreadCrumb]=\"breadCrumbs\"\r\n                    ></bsu-breadcrumb>\r\n                </fd-breadcrumb-item>\r\n                } }}\r\n            </fd-breadcrumb>\r\n        </fd-dynamic-page-breadcrumb>\r\n        <ng-template #noBreadcrumbs></ng-template>\r\n        <fd-dynamic-page-global-actions>\r\n            <!-- global actions -->\r\n\r\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\r\n            <!-- added this because in mobile landscape toolbar disapper -->\r\n            @if (toolbarVisible) {\r\n            <bsu-form-toolbar\r\n                [deviceSize]=\"deviceSize\"\r\n                [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\r\n                [dirValue]=\"dirValue\"\r\n                [isFirefox]=\"isFirefox\"\r\n                (toolbarClick)=\"toolbarClick.emit($event)\"\r\n                #formToolbar\r\n            ></bsu-form-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <!-- layout actions -->\r\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\r\n            @if (!hideClose) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                @if (deviceSize !== 's') {\r\n                <fd-toolbar-separator></fd-toolbar-separator>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    @if (description || facetList.length > 0 || workflowInfoText || avatar || infobars?.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars?.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars?.length)\"\r\n        [collapsible]=\"!hidePin\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars?.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\r\n        <fd-facet-group ariaLabel=\"Facet Group\">\r\n            @if (avatar) {\r\n            <fd-facet type=\"image\">\r\n                <fd-avatar\r\n                    title=\"avatar\"\r\n                    [glyph]=\"avatar\"\r\n                    [image]=\"\r\n                        !avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\r\n                    \"\r\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\r\n                    [transparent]=\"true\"\r\n                    [circle]=\"circleAvatar\"\r\n                ></fd-avatar>\r\n                <!-- <div\r\n                  class=\"fd-avatar fd-avatar--circle\"\r\n                  [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\r\n                  >\r\n                  <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\r\n                </div> -->\r\n            </fd-facet>\r\n            } @for (facet of facetList; track facet) {\r\n            <fd-facet\r\n                [type]=\"facet.type\"\r\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\r\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\r\n            >\r\n                @for (item of facet.mo.ItemList?.MoDataList; track item) {\r\n                <fd-facet-content>\r\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" id=\"form-value-10\"></fd-text>\r\n                </fd-facet-content>\r\n                } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\r\n                <span\r\n                    fd-object-status\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [glyph]=\"facet.mo.Icon\"\r\n                >\r\n                </span>\r\n                } @else {\r\n                <bnrc-dynamic-component\r\n                    [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\r\n                    [class.fd-object-status--large]=\"facet.mo.IsLarge\"\r\n                    [component]=\"facet.mo.Component\"\r\n                    [value]=\"facet.mo.Text | bbbTranslate\"\r\n                ></bnrc-dynamic-component>\r\n                } @if (facet.mo.IsNumber && facet.type === 'key-value') {\r\n                <fd-object-number\r\n                    [number]=\"facet.mo.Text | facetValue\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [unit]=\"facet.mo.Unit | facetValue | bbbTranslate\"\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [decimal]=\"facet.mo.DecimalValue | facetValue\"\r\n                ></fd-object-number>\r\n                } @if (facet.type === 'plain-text') {\r\n                <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\r\n                    <fd-text [text]=\"facet.mo.Text | facetValue | bbbTranslate\" hyphenation=\"auto\"></fd-text>\r\n                </div>\r\n                } @if (facet.type === 'rating-indicator') {\r\n                <fd-facet-content>\r\n                    <fd-rating-indicator\r\n                        style=\"pointer-events: none\"\r\n                        size=\"md\"\r\n                        [dynamicTextIndicator]=\"facet.mo.Footer | bbbTranslate\"\r\n                        [displayMode]=\"true\"\r\n                        [value]=\"facet.mo | facetValue: facet.type\"\r\n                    ></fd-rating-indicator>\r\n                </fd-facet-content>\r\n                } @if (facet.type === 'progress') {\r\n                <div [style.width]=\"'10rem'\">\r\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\r\n                    <fd-progress-indicator\r\n                        class=\"facet-progress\"\r\n                        style=\"width: 10r em\"\r\n                        [state]=\"facet.mo.State\"\r\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647' | bbbTranslate\"\r\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\r\n                        [valueMax]=\"10\"\r\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\r\n                    ></fd-progress-indicator>\r\n                    <!-- <ui5-progress-indicator\r\n                    style=\"width: 10rem\"\r\n                    [valueState]=\"facet.mo.State\"\r\n                    [value]=\"getNumber(facet.mo.Value)\"\r\n                  ></ui5-progress-indicator> -->\r\n                </div>\r\n                } @if (facet.type === 'microcharts') {\r\n                <div>\r\n                    <label wrap>in progress ...</label>\r\n                </div>\r\n                }\r\n            </fd-facet>\r\n            }\r\n        </fd-facet-group>\r\n        @if (description) {\r\n        <span>{{ description | bbbTranslate }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if((!modernTabs.length && !contentIsPage) || (modernTabs.length && !contentIsPage && parameters?.LayoutComponent))\r\n    {\r\n    <fd-dynamic-page-content\r\n        [style.justify-content]=\"formContentJustify\"\r\n        [class.limit-content-width]=\"formContentMaxWidth > 0\"\r\n        cdkScrollable\r\n    >\r\n        <fd-layout-grid class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout1.colMd\"\r\n                    [colLg]=\"layout1.colLg\"\r\n                    [colXl]=\"layout1.colXl\"\r\n                ></div>\r\n                <div class=\"!tw-p-0\" [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\r\n                            context: {\r\n                                $implicit: parameters?.LayoutComponent,\r\n                                layout94: layout94\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout2.colMd\"\r\n                    [colLg]=\"layout2.colLg\"\r\n                    [colXl]=\"layout2.colXl\"\r\n                ></div>\r\n            </div>\r\n        </fd-layout-grid>\r\n    </fd-dynamic-page-content>\r\n    } @else if(modernTabs.length && !contentIsPage && !parameters?.LayoutComponent){\r\n    <fdp-icon-tab-bar\r\n        #tabListComponent\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n        fixMore\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"tab.ControlId\"\r\n            [active]=\"selectedTabPageName === tab.ControlId\"\r\n            [label]=\"tab.Title!! | bbbTranslate\"\r\n            [title]=\"tab.Title!! | bbbTranslate\"\r\n            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\r\n            [class.is-expanded]=\"selectedTab === tab.Title\"\r\n            #tablist\r\n        >\r\n            <fd-dynamic-page-content\r\n                [id]=\"tab.id\"\r\n                [style.justify-content]=\"formContentJustify\"\r\n                [class.limit-content-width]=\"formContentMaxWidth > 0\"\r\n            >\r\n                <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                    </div>\r\n                </fd-layout-grid>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n        }\r\n    </fdp-icon-tab-bar>\r\n    } @if (contentIsPage) {\r\n    <fd-dynamic-page-content class=\"page-layout-content\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                renderLayoutComponent;\r\n                context: {\r\n                    $implicit: parameters?.LayoutComponent,\r\n                    layout94: layout94\r\n                }\r\n            \"\r\n        ></ng-container>\r\n    </fd-dynamic-page-content>\r\n    } @if(!hideFooter && hasLayoutButtons || (workflowButtons.length && isMobile)){\r\n    <fd-dynamic-page-footer>\r\n        <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    </fd-dynamic-page-footer>\r\n    }\r\n</fd-dynamic-page>\r\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\r\n    <bsu-ly-layout-container-of-root\r\n        [config]=\"layout94\"\r\n        [isPanel]=\"false\"\r\n        [isRoot]=\"true\"\r\n    ></bsu-ly-layout-container-of-root>\r\n</ng-template>\r\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\r\n    <bnrc-dynamic-form-component\r\n        [component]=\"component\"\r\n        [layoutActionsTemplateRef]=\"layoutActionsTemplateRef\"\r\n        [removeContentPadding]=\"removeContentPadding\"\r\n        [breadCrumbs]=\"breadCrumbs\"\r\n        [description]=\"description\"\r\n        [title]=\"title\"\r\n        [subtitle]=\"subtitle\"\r\n        [toolbarItems]=\"toolbarItems\"\r\n        [layoutActions]=\"layoutActions\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [facetList]=\"facetList\"\r\n        [settings]=\"component.Settings\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowPanelUi]=\"workflowPanelUi\"\r\n        [isMobile]=\"isMobile\"\r\n        [mo]=\"mo\"\r\n        [layout94]=\"layout94\"\r\n        [context]=\"context\"\r\n        [rtl]=\"rtl\"\r\n        [fieldDict]=\"fieldDict\"\r\n        [mask]=\"mask\"\r\n        [dirValue]=\"dirValue\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [modernTabs]=\"modernTabs\"\r\n        [avatar]=\"avatar\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-dynamic-form-component>\r\n</ng-template>\r\n<ng-template #closeForm>\r\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\r\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n    </button>\r\n</ng-template>\r\n<ng-template #fullscreenForm>\r\n    @if (canFullscreen) {\r\n    <button\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        (click)=\"fullscreenRequest.emit()\"\r\n        [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\r\n    ></button>\r\n    }\r\n</ng-template>\r\n<ng-template #layoutActionsTemplateRef>\r\n    <bsu-layout-actions\r\n        [canSend]=\"canSend\"\r\n        [buttons]=\"layoutActions\"\r\n        [isMobile]=\"isMobile\"\r\n        [landscape]=\"landscape\"\r\n        [standalone]=\"standalone\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [rtl]=\"rtl\"\r\n        (toolClick)=\"toolbarClick.emit($event)\"\r\n        (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\r\n    >\r\n    </bsu-layout-actions>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto;width:100%}:host>fd-dynamic-page[contentispage=false]:not([ismobile=true]) ::ng-deep fd-dynamic-page-header .fd-dynamic-page__title{max-width:50svw}:host ::ng-deep fd-dynamic-page-global-actions{flex:1;display:flex}:host ::ng-deep .fd-dynamic-page__title-container{flex:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{display:flex;flex:1}:host ::ng-deep .fd-facet .fd-title{font-family:B-Font Medium}:host ::ng-deep .facet-progress .fd-progress-indicator__container,:host ::ng-deep .facet-progress .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep>article{height:calc(100svh - var(--shellbar-height) - env(safe-area-inset-bottom) - constant(safe-area-inset-bottom))!important}fd-dynamic-page ::ng-deep>article{min-height:calc(100svh - var(--shellbar-height))}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page ::ng-deep>article>.fd-scrollbar{height:inherit}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-dynamic-page[contentispage=true]{box-sizing:border-box;height:calc(100svh - var(--shellbar-height));min-height:0;overflow:hidden}fd-dynamic-page[contentispage=true] ::ng-deep>article.fd-dynamic-page{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}fd-dynamic-page[contentispage=true] ::ng-deep>article.fd-dynamic-page>.fd-scrollbar{display:flex;flex:1 1 0;flex-direction:column;height:auto;min-height:0;overflow:hidden!important}fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow:hidden;padding:0!important}fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content>bnrc-dynamic-form-component,fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content>bnrc-dynamic-form-component>*{display:flex;flex:1 1 0;flex-direction:column;min-height:0}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.hide-title.hide-breadcrumb{display:none}.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.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: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "layoutActionsTemplateRef", "workflowButtons", "layout94", "footerDesign", "settings", "lastUpdateTime", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "isModal", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "FnHandleEvents", "value"], outputs: ["events"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i2.MeasureFormTitleWidthDirective, selector: "[mWidthTitle]", inputs: ["mWidthTitle", "enableMobile"] }, { kind: "directive", type: i1$2.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4$4.AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$6.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex", "separatorStyle"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i4$6.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i8$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i8$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "subtitleHeadingLevel", "titleId"] }, { kind: "component", type: i8$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i8$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i8$2.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i8$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i8$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i8$2.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i8$3.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "headingLevel", "id", "alignEnd"] }, { kind: "component", type: i8$3.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i8$3.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id", "disabled", "unitDescription", "independent"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["dismissible", "ariaLabelledBy", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i7$3.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "statusMessage", "ariaLabelledBy", "ariaLabel", "interactive", "inverted"] }, { kind: "component", type: i8$1.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["status", "statusMessage", "glyph", "glyphFont", "label", "ariaLabel", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate", "ariaRoleDescription"] }, { kind: "component", type: i14.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["name", "ariaLabel", "ariaLabelledBy", "ariaRoledescription", "disabled", "displayMode", "nonInteractive", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator", "showDynamicText"], outputs: ["ratingChanged"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed", "subline"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaOrientation", "id"] }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i12$1.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: i4.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i4.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { 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"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "component", type: BarsaInfobarsComponent, selector: "bsu-barsa-infobars", inputs: ["infobars"], outputs: ["dismiss"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "directive", type: FixMoreDirective, selector: "[fixMore]" }, { 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" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FundamentalDynamicFormComponent, isStandalone: false, 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", infobars: "infobars", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", circleAvatar: "circleAvatar", hideBreadCrumb: "hideBreadCrumb", rtl: "rtl", hideFooter: "hideFooter", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", fullscreen: "fullscreen", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", selectedTabPageName: "selectedTabPageName", modernTabContainerComponent: "modernTabContainerComponent", layoutGridCol: "layoutGridCol", colLg: "colLg", colXl: "colXl", colMd: "colMd", footerDesign: "footerDesign", formContentMaxWidth: "formContentMaxWidth", formContentJustify: "formContentJustify", workflowButtons: "workflowButtons", lastUpdateTime: "lastUpdateTime" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close", fullscreenRequest: "fullscreenRequest", dismissInfobar: "dismissInfobar" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true, static: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "closeFormTemplate", first: true, predicate: ["closeForm"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (mask) {\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\r\n    <bsu-mask size=\"m\"></bsu-mask>\r\n</div>\r\n}\r\n\r\n<fd-dynamic-page\r\n    [size]=\"isMobile ? 'small' : 'large'\"\r\n    [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\r\n    [class.header-border]=\"!removeHeaderBorder\"\r\n    [attr.isMobile]=\"isMobile\"\r\n    [attr.contentIsPage]=\"contentIsPage\"\r\n    mobile\r\n    formClose\r\n    [isMobile]=\"isMobile\"\r\n>\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"!description\"\r\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\r\n        [class.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb\r\n            [class.hide]=\"isMobile || hideBreadCrumb\"\r\n            *ngIf=\"breadCrumbs?.length; else noBreadcrumbs\"\r\n        >\r\n            <fd-breadcrumb>\r\n                @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\r\n                trackBreadCrumb($index, breadCrumb); let i = $index; let last = $last) { @if(i>0) {\r\n                <fd-breadcrumb-item>\r\n                    <bsu-breadcrumb\r\n                        [index]=\"i\"\r\n                        [isLast]=\"last\"\r\n                        [breadCrumb]=\"breadCrumb\"\r\n                        [allBreadCrumb]=\"breadCrumbs\"\r\n                    ></bsu-breadcrumb>\r\n                </fd-breadcrumb-item>\r\n                } }}\r\n            </fd-breadcrumb>\r\n        </fd-dynamic-page-breadcrumb>\r\n        <ng-template #noBreadcrumbs></ng-template>\r\n        <fd-dynamic-page-global-actions>\r\n            <!-- global actions -->\r\n\r\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\r\n            <!-- added this because in mobile landscape toolbar disapper -->\r\n            @if (toolbarVisible) {\r\n            <bsu-form-toolbar\r\n                [deviceSize]=\"deviceSize\"\r\n                [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\r\n                [dirValue]=\"dirValue\"\r\n                [isFirefox]=\"isFirefox\"\r\n                (toolbarClick)=\"toolbarClick.emit($event)\"\r\n                #formToolbar\r\n            ></bsu-form-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <!-- layout actions -->\r\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\r\n            @if (!hideClose) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                @if (deviceSize !== 's') {\r\n                <fd-toolbar-separator></fd-toolbar-separator>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    @if (description || facetList.length > 0 || workflowInfoText || avatar || infobars?.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars?.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars?.length)\"\r\n        [collapsible]=\"!hidePin\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars?.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\r\n        <fd-facet-group ariaLabel=\"Facet Group\">\r\n            @if (avatar) {\r\n            <fd-facet type=\"image\">\r\n                <fd-avatar\r\n                    title=\"avatar\"\r\n                    [glyph]=\"avatar\"\r\n                    [image]=\"\r\n                        !avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\r\n                    \"\r\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\r\n                    [transparent]=\"true\"\r\n                    [circle]=\"circleAvatar\"\r\n                ></fd-avatar>\r\n                <!-- <div\r\n                  class=\"fd-avatar fd-avatar--circle\"\r\n                  [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\r\n                  >\r\n                  <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\r\n                </div> -->\r\n            </fd-facet>\r\n            } @for (facet of facetList; track facet) {\r\n            <fd-facet\r\n                [type]=\"facet.type\"\r\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\r\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\r\n            >\r\n                @for (item of facet.mo.ItemList?.MoDataList; track item) {\r\n                <fd-facet-content>\r\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" id=\"form-value-10\"></fd-text>\r\n                </fd-facet-content>\r\n                } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\r\n                <span\r\n                    fd-object-status\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [glyph]=\"facet.mo.Icon\"\r\n                >\r\n                </span>\r\n                } @else {\r\n                <bnrc-dynamic-component\r\n                    [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\r\n                    [class.fd-object-status--large]=\"facet.mo.IsLarge\"\r\n                    [component]=\"facet.mo.Component\"\r\n                    [value]=\"facet.mo.Text | bbbTranslate\"\r\n                ></bnrc-dynamic-component>\r\n                } @if (facet.mo.IsNumber && facet.type === 'key-value') {\r\n                <fd-object-number\r\n                    [number]=\"facet.mo.Text | facetValue\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [unit]=\"facet.mo.Unit | facetValue | bbbTranslate\"\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [decimal]=\"facet.mo.DecimalValue | facetValue\"\r\n                ></fd-object-number>\r\n                } @if (facet.type === 'plain-text') {\r\n                <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\r\n                    <fd-text [text]=\"facet.mo.Text | facetValue | bbbTranslate\" hyphenation=\"auto\"></fd-text>\r\n                </div>\r\n                } @if (facet.type === 'rating-indicator') {\r\n                <fd-facet-content>\r\n                    <fd-rating-indicator\r\n                        style=\"pointer-events: none\"\r\n                        size=\"md\"\r\n                        [dynamicTextIndicator]=\"facet.mo.Footer | bbbTranslate\"\r\n                        [displayMode]=\"true\"\r\n                        [value]=\"facet.mo | facetValue: facet.type\"\r\n                    ></fd-rating-indicator>\r\n                </fd-facet-content>\r\n                } @if (facet.type === 'progress') {\r\n                <div [style.width]=\"'10rem'\">\r\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\r\n                    <fd-progress-indicator\r\n                        class=\"facet-progress\"\r\n                        style=\"width: 10r em\"\r\n                        [state]=\"facet.mo.State\"\r\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647' | bbbTranslate\"\r\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\r\n                        [valueMax]=\"10\"\r\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\r\n                    ></fd-progress-indicator>\r\n                    <!-- <ui5-progress-indicator\r\n                    style=\"width: 10rem\"\r\n                    [valueState]=\"facet.mo.State\"\r\n                    [value]=\"getNumber(facet.mo.Value)\"\r\n                  ></ui5-progress-indicator> -->\r\n                </div>\r\n                } @if (facet.type === 'microcharts') {\r\n                <div>\r\n                    <label wrap>in progress ...</label>\r\n                </div>\r\n                }\r\n            </fd-facet>\r\n            }\r\n        </fd-facet-group>\r\n        @if (description) {\r\n        <span>{{ description | bbbTranslate }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if((!modernTabs.length && !contentIsPage) || (modernTabs.length && !contentIsPage && parameters?.LayoutComponent))\r\n    {\r\n    <fd-dynamic-page-content\r\n        [style.justify-content]=\"formContentJustify\"\r\n        [class.limit-content-width]=\"formContentMaxWidth > 0\"\r\n        cdkScrollable\r\n    >\r\n        <fd-layout-grid class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout1.colMd\"\r\n                    [colLg]=\"layout1.colLg\"\r\n                    [colXl]=\"layout1.colXl\"\r\n                ></div>\r\n                <div class=\"!tw-p-0\" [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\r\n                            context: {\r\n                                $implicit: parameters?.LayoutComponent,\r\n                                layout94: layout94\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout2.colMd\"\r\n                    [colLg]=\"layout2.colLg\"\r\n                    [colXl]=\"layout2.colXl\"\r\n                ></div>\r\n            </div>\r\n        </fd-layout-grid>\r\n    </fd-dynamic-page-content>\r\n    } @else if(modernTabs.length && !contentIsPage && !parameters?.LayoutComponent){\r\n    <fdp-icon-tab-bar\r\n        #tabListComponent\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n        fixMore\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"tab.ControlId\"\r\n            [active]=\"selectedTabPageName === tab.ControlId\"\r\n            [label]=\"tab.Title!! | bbbTranslate\"\r\n            [title]=\"tab.Title!! | bbbTranslate\"\r\n            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\r\n            [class.is-expanded]=\"selectedTab === tab.Title\"\r\n            #tablist\r\n        >\r\n            <fd-dynamic-page-content\r\n                [id]=\"tab.id\"\r\n                [style.justify-content]=\"formContentJustify\"\r\n                [class.limit-content-width]=\"formContentMaxWidth > 0\"\r\n            >\r\n                <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                    </div>\r\n                </fd-layout-grid>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n        }\r\n    </fdp-icon-tab-bar>\r\n    } @if (contentIsPage) {\r\n    <fd-dynamic-page-content class=\"page-layout-content\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                renderLayoutComponent;\r\n                context: {\r\n                    $implicit: parameters?.LayoutComponent,\r\n                    layout94: layout94\r\n                }\r\n            \"\r\n        ></ng-container>\r\n    </fd-dynamic-page-content>\r\n    } @if(!hideFooter && hasLayoutButtons || (workflowButtons.length && isMobile)){\r\n    <fd-dynamic-page-footer>\r\n        <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    </fd-dynamic-page-footer>\r\n    }\r\n</fd-dynamic-page>\r\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\r\n    <bsu-ly-layout-container-of-root\r\n        [config]=\"layout94\"\r\n        [isPanel]=\"false\"\r\n        [isRoot]=\"true\"\r\n    ></bsu-ly-layout-container-of-root>\r\n</ng-template>\r\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\r\n    <bnrc-dynamic-form-component\r\n        [component]=\"component\"\r\n        [layoutActionsTemplateRef]=\"layoutActionsTemplateRef\"\r\n        [removeContentPadding]=\"removeContentPadding\"\r\n        [breadCrumbs]=\"breadCrumbs\"\r\n        [description]=\"description\"\r\n        [title]=\"title\"\r\n        [subtitle]=\"subtitle\"\r\n        [toolbarItems]=\"toolbarItems\"\r\n        [layoutActions]=\"layoutActions\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [facetList]=\"facetList\"\r\n        [settings]=\"component.Settings\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowPanelUi]=\"workflowPanelUi\"\r\n        [isMobile]=\"isMobile\"\r\n        [mo]=\"mo\"\r\n        [layout94]=\"layout94\"\r\n        [context]=\"context\"\r\n        [rtl]=\"rtl\"\r\n        [fieldDict]=\"fieldDict\"\r\n        [mask]=\"mask\"\r\n        [dirValue]=\"dirValue\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [modernTabs]=\"modernTabs\"\r\n        [avatar]=\"avatar\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-dynamic-form-component>\r\n</ng-template>\r\n<ng-template #closeForm>\r\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\r\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n    </button>\r\n</ng-template>\r\n<ng-template #fullscreenForm>\r\n    @if (canFullscreen) {\r\n    <button\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        (click)=\"fullscreenRequest.emit()\"\r\n        [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\r\n    ></button>\r\n    }\r\n</ng-template>\r\n<ng-template #layoutActionsTemplateRef>\r\n    <bsu-layout-actions\r\n        [canSend]=\"canSend\"\r\n        [buttons]=\"layoutActions\"\r\n        [isMobile]=\"isMobile\"\r\n        [landscape]=\"landscape\"\r\n        [standalone]=\"standalone\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [rtl]=\"rtl\"\r\n        (toolClick)=\"toolbarClick.emit($event)\"\r\n        (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\r\n    >\r\n    </bsu-layout-actions>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto;width:100%}:host>fd-dynamic-page[contentispage=false]:not([ismobile=true]) ::ng-deep fd-dynamic-page-header .fd-dynamic-page__title{max-width:50svw}:host ::ng-deep fd-dynamic-page-global-actions{flex:1;display:flex}:host ::ng-deep .fd-dynamic-page__title-container{flex:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{display:flex;flex:1}:host ::ng-deep .fd-facet .fd-title{font-family:B-Font Medium}:host ::ng-deep .facet-progress .fd-progress-indicator__container,:host ::ng-deep .facet-progress .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page.floating-footer{position:relative}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep>article{height:calc(100svh - var(--shellbar-height) - env(safe-area-inset-bottom) - constant(safe-area-inset-bottom))!important}fd-dynamic-page ::ng-deep>article{min-height:calc(100svh - var(--shellbar-height))}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page ::ng-deep>article>.fd-scrollbar{height:inherit}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-dynamic-page[contentispage=true]{box-sizing:border-box;height:calc(100svh - var(--shellbar-height));min-height:0;overflow:hidden}fd-dynamic-page[contentispage=true] ::ng-deep>article.fd-dynamic-page{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}fd-dynamic-page[contentispage=true] ::ng-deep>article.fd-dynamic-page>.fd-scrollbar{display:flex;flex:1 1 0;flex-direction:column;height:auto;min-height:0;overflow:hidden!important}fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow:hidden;padding:0!important}fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content>bnrc-dynamic-form-component,fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content>bnrc-dynamic-form-component>*{display:flex;flex:1 1 0;flex-direction:column;min-height:0}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.hide-title.hide-breadcrumb{display:none}.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.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: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "layoutActionsTemplateRef", "workflowButtons", "layout94", "footerDesign", "settings", "lastUpdateTime", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "isModal", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "FnHandleEvents", "value"], outputs: ["events"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i2.MeasureFormTitleWidthDirective, selector: "[mWidthTitle]", inputs: ["mWidthTitle", "enableMobile"] }, { kind: "directive", type: i1$2.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4$4.AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$6.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex", "separatorStyle"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i4$6.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i8$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i8$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "subtitleHeadingLevel", "titleId"] }, { kind: "component", type: i8$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i8$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i8$2.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i8$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i8$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i8$2.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i8$3.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "headingLevel", "id", "alignEnd"] }, { kind: "component", type: i8$3.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i8$3.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id", "disabled", "unitDescription", "independent"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["dismissible", "ariaLabelledBy", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i7$3.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "statusMessage", "ariaLabelledBy", "ariaLabel", "interactive", "inverted"] }, { kind: "component", type: i8$1.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["status", "statusMessage", "glyph", "glyphFont", "label", "ariaLabel", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate", "ariaRoleDescription"] }, { kind: "component", type: i14.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["name", "ariaLabel", "ariaLabelledBy", "ariaRoledescription", "disabled", "displayMode", "nonInteractive", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator", "showDynamicText"], outputs: ["ratingChanged"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed", "subline"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaOrientation", "id"] }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i12$1.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: i4.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i4.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { 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"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "component", type: BarsaInfobarsComponent, selector: "bsu-barsa-infobars", inputs: ["infobars"], outputs: ["dismiss"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "directive", type: FixMoreDirective, selector: "[fixMore]" }, { 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" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FundamentalDynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-fundamental-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (mask) {\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\r\n    <bsu-mask size=\"m\"></bsu-mask>\r\n</div>\r\n}\r\n\r\n<fd-dynamic-page\r\n    [size]=\"isMobile ? 'small' : 'large'\"\r\n    [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\r\n    [class.header-border]=\"!removeHeaderBorder\"\r\n    [attr.isMobile]=\"isMobile\"\r\n    [attr.contentIsPage]=\"contentIsPage\"\r\n    mobile\r\n    formClose\r\n    [isMobile]=\"isMobile\"\r\n>\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"!description\"\r\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\r\n        [class.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb\r\n            [class.hide]=\"isMobile || hideBreadCrumb\"\r\n            *ngIf=\"breadCrumbs?.length; else noBreadcrumbs\"\r\n        >\r\n            <fd-breadcrumb>\r\n                @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\r\n                trackBreadCrumb($index, breadCrumb); let i = $index; let last = $last) { @if(i>0) {\r\n                <fd-breadcrumb-item>\r\n                    <bsu-breadcrumb\r\n                        [index]=\"i\"\r\n                        [isLast]=\"last\"\r\n                        [breadCrumb]=\"breadCrumb\"\r\n                        [allBreadCrumb]=\"breadCrumbs\"\r\n                    ></bsu-breadcrumb>\r\n                </fd-breadcrumb-item>\r\n                } }}\r\n            </fd-breadcrumb>\r\n        </fd-dynamic-page-breadcrumb>\r\n        <ng-template #noBreadcrumbs></ng-template>\r\n        <fd-dynamic-page-global-actions>\r\n            <!-- global actions -->\r\n\r\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\r\n            <!-- added this because in mobile landscape toolbar disapper -->\r\n            @if (toolbarVisible) {\r\n            <bsu-form-toolbar\r\n                [deviceSize]=\"deviceSize\"\r\n                [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\r\n                [dirValue]=\"dirValue\"\r\n                [isFirefox]=\"isFirefox\"\r\n                (toolbarClick)=\"toolbarClick.emit($event)\"\r\n                #formToolbar\r\n            ></bsu-form-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <!-- layout actions -->\r\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\r\n            @if (!hideClose) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                @if (deviceSize !== 's') {\r\n                <fd-toolbar-separator></fd-toolbar-separator>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    @if (description || facetList.length > 0 || workflowInfoText || avatar || infobars?.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars?.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars?.length)\"\r\n        [collapsible]=\"!hidePin\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars?.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\r\n        <fd-facet-group ariaLabel=\"Facet Group\">\r\n            @if (avatar) {\r\n            <fd-facet type=\"image\">\r\n                <fd-avatar\r\n                    title=\"avatar\"\r\n                    [glyph]=\"avatar\"\r\n                    [image]=\"\r\n                        !avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\r\n                    \"\r\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\r\n                    [transparent]=\"true\"\r\n                    [circle]=\"circleAvatar\"\r\n                ></fd-avatar>\r\n                <!-- <div\r\n                  class=\"fd-avatar fd-avatar--circle\"\r\n                  [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\r\n                  >\r\n                  <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\r\n                </div> -->\r\n            </fd-facet>\r\n            } @for (facet of facetList; track facet) {\r\n            <fd-facet\r\n                [type]=\"facet.type\"\r\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\r\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\r\n            >\r\n                @for (item of facet.mo.ItemList?.MoDataList; track item) {\r\n                <fd-facet-content>\r\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" id=\"form-value-10\"></fd-text>\r\n                </fd-facet-content>\r\n                } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\r\n                <span\r\n                    fd-object-status\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [glyph]=\"facet.mo.Icon\"\r\n                >\r\n                </span>\r\n                } @else {\r\n                <bnrc-dynamic-component\r\n                    [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\r\n                    [class.fd-object-status--large]=\"facet.mo.IsLarge\"\r\n                    [component]=\"facet.mo.Component\"\r\n                    [value]=\"facet.mo.Text | bbbTranslate\"\r\n                ></bnrc-dynamic-component>\r\n                } @if (facet.mo.IsNumber && facet.type === 'key-value') {\r\n                <fd-object-number\r\n                    [number]=\"facet.mo.Text | facetValue\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [unit]=\"facet.mo.Unit | facetValue | bbbTranslate\"\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [decimal]=\"facet.mo.DecimalValue | facetValue\"\r\n                ></fd-object-number>\r\n                } @if (facet.type === 'plain-text') {\r\n                <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\r\n                    <fd-text [text]=\"facet.mo.Text | facetValue | bbbTranslate\" hyphenation=\"auto\"></fd-text>\r\n                </div>\r\n                } @if (facet.type === 'rating-indicator') {\r\n                <fd-facet-content>\r\n                    <fd-rating-indicator\r\n                        style=\"pointer-events: none\"\r\n                        size=\"md\"\r\n                        [dynamicTextIndicator]=\"facet.mo.Footer | bbbTranslate\"\r\n                        [displayMode]=\"true\"\r\n                        [value]=\"facet.mo | facetValue: facet.type\"\r\n                    ></fd-rating-indicator>\r\n                </fd-facet-content>\r\n                } @if (facet.type === 'progress') {\r\n                <div [style.width]=\"'10rem'\">\r\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\r\n                    <fd-progress-indicator\r\n                        class=\"facet-progress\"\r\n                        style=\"width: 10r em\"\r\n                        [state]=\"facet.mo.State\"\r\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647' | bbbTranslate\"\r\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\r\n                        [valueMax]=\"10\"\r\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\r\n                    ></fd-progress-indicator>\r\n                    <!-- <ui5-progress-indicator\r\n                    style=\"width: 10rem\"\r\n                    [valueState]=\"facet.mo.State\"\r\n                    [value]=\"getNumber(facet.mo.Value)\"\r\n                  ></ui5-progress-indicator> -->\r\n                </div>\r\n                } @if (facet.type === 'microcharts') {\r\n                <div>\r\n                    <label wrap>in progress ...</label>\r\n                </div>\r\n                }\r\n            </fd-facet>\r\n            }\r\n        </fd-facet-group>\r\n        @if (description) {\r\n        <span>{{ description | bbbTranslate }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if((!modernTabs.length && !contentIsPage) || (modernTabs.length && !contentIsPage && parameters?.LayoutComponent))\r\n    {\r\n    <fd-dynamic-page-content\r\n        [style.justify-content]=\"formContentJustify\"\r\n        [class.limit-content-width]=\"formContentMaxWidth > 0\"\r\n        cdkScrollable\r\n    >\r\n        <fd-layout-grid class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout1.colMd\"\r\n                    [colLg]=\"layout1.colLg\"\r\n                    [colXl]=\"layout1.colXl\"\r\n                ></div>\r\n                <div class=\"!tw-p-0\" [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\r\n                            context: {\r\n                                $implicit: parameters?.LayoutComponent,\r\n                                layout94: layout94\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout2.colMd\"\r\n                    [colLg]=\"layout2.colLg\"\r\n                    [colXl]=\"layout2.colXl\"\r\n                ></div>\r\n            </div>\r\n        </fd-layout-grid>\r\n    </fd-dynamic-page-content>\r\n    } @else if(modernTabs.length && !contentIsPage && !parameters?.LayoutComponent){\r\n    <fdp-icon-tab-bar\r\n        #tabListComponent\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n        fixMore\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"tab.ControlId\"\r\n            [active]=\"selectedTabPageName === tab.ControlId\"\r\n            [label]=\"tab.Title!! | bbbTranslate\"\r\n            [title]=\"tab.Title!! | bbbTranslate\"\r\n            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\r\n            [class.is-expanded]=\"selectedTab === tab.Title\"\r\n            #tablist\r\n        >\r\n            <fd-dynamic-page-content\r\n                [id]=\"tab.id\"\r\n                [style.justify-content]=\"formContentJustify\"\r\n                [class.limit-content-width]=\"formContentMaxWidth > 0\"\r\n            >\r\n                <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                    </div>\r\n                </fd-layout-grid>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n        }\r\n    </fdp-icon-tab-bar>\r\n    } @if (contentIsPage) {\r\n    <fd-dynamic-page-content class=\"page-layout-content\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                renderLayoutComponent;\r\n                context: {\r\n                    $implicit: parameters?.LayoutComponent,\r\n                    layout94: layout94\r\n                }\r\n            \"\r\n        ></ng-container>\r\n    </fd-dynamic-page-content>\r\n    } @if(!hideFooter && hasLayoutButtons || (workflowButtons.length && isMobile)){\r\n    <fd-dynamic-page-footer>\r\n        <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    </fd-dynamic-page-footer>\r\n    }\r\n</fd-dynamic-page>\r\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\r\n    <bsu-ly-layout-container-of-root\r\n        [config]=\"layout94\"\r\n        [isPanel]=\"false\"\r\n        [isRoot]=\"true\"\r\n    ></bsu-ly-layout-container-of-root>\r\n</ng-template>\r\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\r\n    <bnrc-dynamic-form-component\r\n        [component]=\"component\"\r\n        [layoutActionsTemplateRef]=\"layoutActionsTemplateRef\"\r\n        [removeContentPadding]=\"removeContentPadding\"\r\n        [breadCrumbs]=\"breadCrumbs\"\r\n        [description]=\"description\"\r\n        [title]=\"title\"\r\n        [subtitle]=\"subtitle\"\r\n        [toolbarItems]=\"toolbarItems\"\r\n        [layoutActions]=\"layoutActions\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [facetList]=\"facetList\"\r\n        [settings]=\"component.Settings\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowPanelUi]=\"workflowPanelUi\"\r\n        [isMobile]=\"isMobile\"\r\n        [mo]=\"mo\"\r\n        [layout94]=\"layout94\"\r\n        [context]=\"context\"\r\n        [rtl]=\"rtl\"\r\n        [fieldDict]=\"fieldDict\"\r\n        [mask]=\"mask\"\r\n        [dirValue]=\"dirValue\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [modernTabs]=\"modernTabs\"\r\n        [avatar]=\"avatar\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-dynamic-form-component>\r\n</ng-template>\r\n<ng-template #closeForm>\r\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\r\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n    </button>\r\n</ng-template>\r\n<ng-template #fullscreenForm>\r\n    @if (canFullscreen) {\r\n    <button\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        (click)=\"fullscreenRequest.emit()\"\r\n        [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\r\n    ></button>\r\n    }\r\n</ng-template>\r\n<ng-template #layoutActionsTemplateRef>\r\n    <bsu-layout-actions\r\n        [canSend]=\"canSend\"\r\n        [buttons]=\"layoutActions\"\r\n        [isMobile]=\"isMobile\"\r\n        [landscape]=\"landscape\"\r\n        [standalone]=\"standalone\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [rtl]=\"rtl\"\r\n        (toolClick)=\"toolbarClick.emit($event)\"\r\n        (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\r\n    >\r\n    </bsu-layout-actions>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto;width:100%}:host>fd-dynamic-page[contentispage=false]:not([ismobile=true]) ::ng-deep fd-dynamic-page-header .fd-dynamic-page__title{max-width:50svw}:host ::ng-deep fd-dynamic-page-global-actions{flex:1;display:flex}:host ::ng-deep .fd-dynamic-page__title-container{flex:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{display:flex;flex:1}:host ::ng-deep .fd-facet .fd-title{font-family:B-Font Medium}:host ::ng-deep .facet-progress .fd-progress-indicator__container,:host ::ng-deep .facet-progress .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep>article{height:calc(100svh - var(--shellbar-height) - env(safe-area-inset-bottom) - constant(safe-area-inset-bottom))!important}fd-dynamic-page ::ng-deep>article{min-height:calc(100svh - var(--shellbar-height))}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page ::ng-deep>article>.fd-scrollbar{height:inherit}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-dynamic-page[contentispage=true]{box-sizing:border-box;height:calc(100svh - var(--shellbar-height));min-height:0;overflow:hidden}fd-dynamic-page[contentispage=true] ::ng-deep>article.fd-dynamic-page{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}fd-dynamic-page[contentispage=true] ::ng-deep>article.fd-dynamic-page>.fd-scrollbar{display:flex;flex:1 1 0;flex-direction:column;height:auto;min-height:0;overflow:hidden!important}fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow:hidden;padding:0!important}fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content>bnrc-dynamic-form-component,fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content>bnrc-dynamic-form-component>*{display:flex;flex:1 1 0;flex-direction:column;min-height:0}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.hide-title.hide-breadcrumb{display:none}.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"] }]
+            args: [{ selector: 'bsu-fundamental-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (mask) {\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\r\n    <bsu-mask size=\"m\"></bsu-mask>\r\n</div>\r\n}\r\n\r\n<fd-dynamic-page\r\n    [size]=\"isMobile ? 'small' : 'large'\"\r\n    [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\r\n    [class.header-border]=\"!removeHeaderBorder\"\r\n    [attr.isMobile]=\"isMobile\"\r\n    [attr.contentIsPage]=\"contentIsPage\"\r\n    mobile\r\n    formClose\r\n    [isMobile]=\"isMobile\"\r\n>\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"!description\"\r\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\r\n        [class.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb\r\n            [class.hide]=\"isMobile || hideBreadCrumb\"\r\n            *ngIf=\"breadCrumbs?.length; else noBreadcrumbs\"\r\n        >\r\n            <fd-breadcrumb>\r\n                @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\r\n                trackBreadCrumb($index, breadCrumb); let i = $index; let last = $last) { @if(i>0) {\r\n                <fd-breadcrumb-item>\r\n                    <bsu-breadcrumb\r\n                        [index]=\"i\"\r\n                        [isLast]=\"last\"\r\n                        [breadCrumb]=\"breadCrumb\"\r\n                        [allBreadCrumb]=\"breadCrumbs\"\r\n                    ></bsu-breadcrumb>\r\n                </fd-breadcrumb-item>\r\n                } }}\r\n            </fd-breadcrumb>\r\n        </fd-dynamic-page-breadcrumb>\r\n        <ng-template #noBreadcrumbs></ng-template>\r\n        <fd-dynamic-page-global-actions>\r\n            <!-- global actions -->\r\n\r\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\r\n            <!-- added this because in mobile landscape toolbar disapper -->\r\n            @if (toolbarVisible) {\r\n            <bsu-form-toolbar\r\n                [deviceSize]=\"deviceSize\"\r\n                [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\r\n                [dirValue]=\"dirValue\"\r\n                [isFirefox]=\"isFirefox\"\r\n                (toolbarClick)=\"toolbarClick.emit($event)\"\r\n                #formToolbar\r\n            ></bsu-form-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <!-- layout actions -->\r\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\r\n            @if (!hideClose) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                @if (deviceSize !== 's') {\r\n                <fd-toolbar-separator></fd-toolbar-separator>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    @if (description || facetList.length > 0 || workflowInfoText || avatar || infobars?.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars?.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars?.length)\"\r\n        [collapsible]=\"!hidePin\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars?.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\r\n        <fd-facet-group ariaLabel=\"Facet Group\">\r\n            @if (avatar) {\r\n            <fd-facet type=\"image\">\r\n                <fd-avatar\r\n                    title=\"avatar\"\r\n                    [glyph]=\"avatar\"\r\n                    [image]=\"\r\n                        !avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\r\n                    \"\r\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\r\n                    [transparent]=\"true\"\r\n                    [circle]=\"circleAvatar\"\r\n                ></fd-avatar>\r\n                <!-- <div\r\n                  class=\"fd-avatar fd-avatar--circle\"\r\n                  [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\r\n                  >\r\n                  <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\r\n                </div> -->\r\n            </fd-facet>\r\n            } @for (facet of facetList; track facet) {\r\n            <fd-facet\r\n                [type]=\"facet.type\"\r\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\r\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\r\n            >\r\n                @for (item of facet.mo.ItemList?.MoDataList; track item) {\r\n                <fd-facet-content>\r\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" id=\"form-value-10\"></fd-text>\r\n                </fd-facet-content>\r\n                } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\r\n                <span\r\n                    fd-object-status\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [glyph]=\"facet.mo.Icon\"\r\n                >\r\n                </span>\r\n                } @else {\r\n                <bnrc-dynamic-component\r\n                    [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\r\n                    [class.fd-object-status--large]=\"facet.mo.IsLarge\"\r\n                    [component]=\"facet.mo.Component\"\r\n                    [value]=\"facet.mo.Text | bbbTranslate\"\r\n                ></bnrc-dynamic-component>\r\n                } @if (facet.mo.IsNumber && facet.type === 'key-value') {\r\n                <fd-object-number\r\n                    [number]=\"facet.mo.Text | facetValue\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [unit]=\"facet.mo.Unit | facetValue | bbbTranslate\"\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [decimal]=\"facet.mo.DecimalValue | facetValue\"\r\n                ></fd-object-number>\r\n                } @if (facet.type === 'plain-text') {\r\n                <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\r\n                    <fd-text [text]=\"facet.mo.Text | facetValue | bbbTranslate\" hyphenation=\"auto\"></fd-text>\r\n                </div>\r\n                } @if (facet.type === 'rating-indicator') {\r\n                <fd-facet-content>\r\n                    <fd-rating-indicator\r\n                        style=\"pointer-events: none\"\r\n                        size=\"md\"\r\n                        [dynamicTextIndicator]=\"facet.mo.Footer | bbbTranslate\"\r\n                        [displayMode]=\"true\"\r\n                        [value]=\"facet.mo | facetValue: facet.type\"\r\n                    ></fd-rating-indicator>\r\n                </fd-facet-content>\r\n                } @if (facet.type === 'progress') {\r\n                <div [style.width]=\"'10rem'\">\r\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\r\n                    <fd-progress-indicator\r\n                        class=\"facet-progress\"\r\n                        style=\"width: 10r em\"\r\n                        [state]=\"facet.mo.State\"\r\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647' | bbbTranslate\"\r\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\r\n                        [valueMax]=\"10\"\r\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\r\n                    ></fd-progress-indicator>\r\n                    <!-- <ui5-progress-indicator\r\n                    style=\"width: 10rem\"\r\n                    [valueState]=\"facet.mo.State\"\r\n                    [value]=\"getNumber(facet.mo.Value)\"\r\n                  ></ui5-progress-indicator> -->\r\n                </div>\r\n                } @if (facet.type === 'microcharts') {\r\n                <div>\r\n                    <label wrap>in progress ...</label>\r\n                </div>\r\n                }\r\n            </fd-facet>\r\n            }\r\n        </fd-facet-group>\r\n        @if (description) {\r\n        <span>{{ description | bbbTranslate }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if((!modernTabs.length && !contentIsPage) || (modernTabs.length && !contentIsPage && parameters?.LayoutComponent))\r\n    {\r\n    <fd-dynamic-page-content\r\n        [style.justify-content]=\"formContentJustify\"\r\n        [class.limit-content-width]=\"formContentMaxWidth > 0\"\r\n        cdkScrollable\r\n    >\r\n        <fd-layout-grid class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout1.colMd\"\r\n                    [colLg]=\"layout1.colLg\"\r\n                    [colXl]=\"layout1.colXl\"\r\n                ></div>\r\n                <div class=\"!tw-p-0\" [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\r\n                            context: {\r\n                                $implicit: parameters?.LayoutComponent,\r\n                                layout94: layout94\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout2.colMd\"\r\n                    [colLg]=\"layout2.colLg\"\r\n                    [colXl]=\"layout2.colXl\"\r\n                ></div>\r\n            </div>\r\n        </fd-layout-grid>\r\n    </fd-dynamic-page-content>\r\n    } @else if(modernTabs.length && !contentIsPage && !parameters?.LayoutComponent){\r\n    <fdp-icon-tab-bar\r\n        #tabListComponent\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n        fixMore\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"tab.ControlId\"\r\n            [active]=\"selectedTabPageName === tab.ControlId\"\r\n            [label]=\"tab.Title!! | bbbTranslate\"\r\n            [title]=\"tab.Title!! | bbbTranslate\"\r\n            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\r\n            [class.is-expanded]=\"selectedTab === tab.Title\"\r\n            #tablist\r\n        >\r\n            <fd-dynamic-page-content\r\n                [id]=\"tab.id\"\r\n                [style.justify-content]=\"formContentJustify\"\r\n                [class.limit-content-width]=\"formContentMaxWidth > 0\"\r\n            >\r\n                <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                    </div>\r\n                </fd-layout-grid>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n        }\r\n    </fdp-icon-tab-bar>\r\n    } @if (contentIsPage) {\r\n    <fd-dynamic-page-content class=\"page-layout-content\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                renderLayoutComponent;\r\n                context: {\r\n                    $implicit: parameters?.LayoutComponent,\r\n                    layout94: layout94\r\n                }\r\n            \"\r\n        ></ng-container>\r\n    </fd-dynamic-page-content>\r\n    } @if(!hideFooter && hasLayoutButtons || (workflowButtons.length && isMobile)){\r\n    <fd-dynamic-page-footer>\r\n        <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    </fd-dynamic-page-footer>\r\n    }\r\n</fd-dynamic-page>\r\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\r\n    <bsu-ly-layout-container-of-root\r\n        [config]=\"layout94\"\r\n        [isPanel]=\"false\"\r\n        [isRoot]=\"true\"\r\n    ></bsu-ly-layout-container-of-root>\r\n</ng-template>\r\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\r\n    <bnrc-dynamic-form-component\r\n        [component]=\"component\"\r\n        [layoutActionsTemplateRef]=\"layoutActionsTemplateRef\"\r\n        [removeContentPadding]=\"removeContentPadding\"\r\n        [breadCrumbs]=\"breadCrumbs\"\r\n        [description]=\"description\"\r\n        [title]=\"title\"\r\n        [subtitle]=\"subtitle\"\r\n        [toolbarItems]=\"toolbarItems\"\r\n        [layoutActions]=\"layoutActions\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [facetList]=\"facetList\"\r\n        [settings]=\"component.Settings\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowPanelUi]=\"workflowPanelUi\"\r\n        [isMobile]=\"isMobile\"\r\n        [mo]=\"mo\"\r\n        [layout94]=\"layout94\"\r\n        [context]=\"context\"\r\n        [rtl]=\"rtl\"\r\n        [fieldDict]=\"fieldDict\"\r\n        [mask]=\"mask\"\r\n        [dirValue]=\"dirValue\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [modernTabs]=\"modernTabs\"\r\n        [avatar]=\"avatar\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-dynamic-form-component>\r\n</ng-template>\r\n<ng-template #closeForm>\r\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\r\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n    </button>\r\n</ng-template>\r\n<ng-template #fullscreenForm>\r\n    @if (canFullscreen) {\r\n    <button\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        (click)=\"fullscreenRequest.emit()\"\r\n        [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\r\n    ></button>\r\n    }\r\n</ng-template>\r\n<ng-template #layoutActionsTemplateRef>\r\n    <bsu-layout-actions\r\n        [canSend]=\"canSend\"\r\n        [buttons]=\"layoutActions\"\r\n        [isMobile]=\"isMobile\"\r\n        [landscape]=\"landscape\"\r\n        [standalone]=\"standalone\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [rtl]=\"rtl\"\r\n        (toolClick)=\"toolbarClick.emit($event)\"\r\n        (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\r\n    >\r\n    </bsu-layout-actions>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto;width:100%}:host>fd-dynamic-page[contentispage=false]:not([ismobile=true]) ::ng-deep fd-dynamic-page-header .fd-dynamic-page__title{max-width:50svw}:host ::ng-deep fd-dynamic-page-global-actions{flex:1;display:flex}:host ::ng-deep .fd-dynamic-page__title-container{flex:1}:host ::ng-deep .fd-dynamic-page__toolbar-container{display:flex;flex:1}:host ::ng-deep .fd-facet .fd-title{font-family:B-Font Medium}:host ::ng-deep .facet-progress .fd-progress-indicator__container,:host ::ng-deep .facet-progress .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page.floating-footer{position:relative}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep>article{height:calc(100svh - var(--shellbar-height) - env(safe-area-inset-bottom) - constant(safe-area-inset-bottom))!important}fd-dynamic-page ::ng-deep>article{min-height:calc(100svh - var(--shellbar-height))}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page ::ng-deep>article>.fd-scrollbar{height:inherit}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-dynamic-page[contentispage=true]{box-sizing:border-box;height:calc(100svh - var(--shellbar-height));min-height:0;overflow:hidden}fd-dynamic-page[contentispage=true] ::ng-deep>article.fd-dynamic-page{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}fd-dynamic-page[contentispage=true] ::ng-deep>article.fd-dynamic-page>.fd-scrollbar{display:flex;flex:1 1 0;flex-direction:column;height:auto;min-height:0;overflow:hidden!important}fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow:hidden;padding:0!important}fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content>bnrc-dynamic-form-component,fd-dynamic-page[contentispage=true] ::ng-deep fd-dynamic-page-content.page-layout-content>bnrc-dynamic-form-component>*{display:flex;flex:1 1 0;flex-direction:column;min-height:0}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.hide-title.hide-breadcrumb{display:none}.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"] }]
         }], propDecorators: { _dynamicPageComponent: [{
                 type: ViewChild,
                 args: [DynamicPageComponent, { static: true }]
@@ -11364,7 +11426,7 @@ class HyperlinkComponent extends FieldBaseComponent {
         this.context.fireEvent('click', this.context);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HyperlinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HyperlinkComponent, isStandalone: false, selector: "bsu-hyperlink", usesInheritance: true, ngImport: i0, template: "@if (parameters?.RouterLink) {\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    {{ layoutInfo.UseLayoutItemTextForControl ? layoutInfo.Caption : context?.Setting?.ControlFieldCaptionTranslated }}\r\n</a>\r\n} @else {\r\n<a\r\n    fd-link\r\n    [emphasized]=\"parameters?.Emphasized\"\r\n    (click)=\"onClick($event, parameters.Link)\"\r\n    [ngStyle]=\"parameters?.Style | removeNewline | convertToStyle\"\r\n    [href]=\"parameters.Link\"\r\n>\r\n    {{ layoutInfo.UseLayoutItemTextForControl ? layoutInfo.Caption : context?.Setting?.ControlFieldCaptionTranslated }}\r\n</a>\r\n}\r\n", styles: [":host{cursor:pointer;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$7.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "directive", type: i3$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "pipe", type: i2.RemoveNewlinePipe, name: "removeNewline" }, { kind: "pipe", type: i2.ConvertToStylePipe, name: "convertToStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HyperlinkComponent, isStandalone: false, selector: "bsu-hyperlink", usesInheritance: true, ngImport: i0, template: "@if (parameters?.RouterLink) {\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    {{ layoutInfo.UseLayoutItemTextForControl ? layoutInfo.Caption : context?.Setting?.ControlFieldCaptionTranslated }}\r\n</a>\r\n} @else {\r\n<a\r\n    fd-link\r\n    [emphasized]=\"parameters?.Emphasized\"\r\n    (click)=\"onClick($event, parameters.Link)\"\r\n    [ngStyle]=\"parameters?.Style | removeNewline | convertToStyle\"\r\n    [href]=\"parameters.Link\"\r\n>\r\n    {{ layoutInfo.UseLayoutItemTextForControl ? layoutInfo.Caption : context?.Setting?.ControlFieldCaptionTranslated }}\r\n</a>\r\n}\r\n", styles: [":host{cursor:pointer;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "directive", type: i3$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "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: "22.0.8", ngImport: i0, type: HyperlinkComponent, decorators: [{
             type: Component,
@@ -11540,11 +11602,11 @@ class UiTextFieldAutoCompleteComponent extends FieldBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiTextFieldAutoCompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: UiTextFieldAutoCompleteComponent, isStandalone: false, selector: "bsu-ui-text-field-auto-complete", usesInheritance: true, ngImport: i0, template: "<bsu-fundamental-combo\n    [allowFreeText]=\"true\"\n    [placeholder]=\"Setting?.NullText || ''\"\n    [readonly]=\"(readonly$ | async) === true\"\n    [showDropdownButton]=\"false\"\n    [disabled]=\"(disable$ | async) === true\"\n    [isLtr]=\"Setting?.IsLtr === true\"\n    [dataSource]=\"comboDataSource\"\n    [value]=\"value || ''\"\n    (selectionChange)=\"onComboSelection($event)\"\n    (cleared)=\"onComboCleared()\"\n>\n</bsu-fundamental-combo>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: FundamentalComboComponent, selector: "bsu-fundamental-combo", inputs: ["dataSource", "value", "displayKey", "lookupKey", "byline", "placeholder", "disabled", "readonly", "mobile", "mobileConfig", "isLtr", "showDropdownButton", "itemTemplate", "allowFreeText", "width", "comboClass", "fillControlMode", "tabOutStrategy", "closeOnOutsideClick"], outputs: ["selectionChange", "cleared", "openChange", "dataRequested", "dataReceived"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: UiTextFieldAutoCompleteComponent, isStandalone: false, selector: "bsu-ui-text-field-auto-complete", usesInheritance: true, ngImport: i0, template: "<bsu-fundamental-combo\n    [id]=\"id\"\n    [allowFreeText]=\"true\"\n    [placeholder]=\"Setting?.NullText || ''\"\n    [readonly]=\"(readonly$ | async) === true\"\n    [showDropdownButton]=\"false\"\n    [disabled]=\"(disable$ | async) === true\"\n    [isLtr]=\"Setting?.IsLtr === true\"\n    [dataSource]=\"comboDataSource\"\n    [value]=\"value || ''\"\n    (selectionChange)=\"onComboSelection($event)\"\n    (cleared)=\"onComboCleared()\"\n>\n</bsu-fundamental-combo>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: FundamentalComboComponent, selector: "bsu-fundamental-combo", inputs: ["dataSource", "value", "displayKey", "lookupKey", "byline", "placeholder", "disabled", "readonly", "mobile", "mobileConfig", "isLtr", "id", "showDropdownButton", "itemTemplate", "allowFreeText", "width", "comboClass", "fillControlMode", "tabOutStrategy", "closeOnOutsideClick"], outputs: ["selectionChange", "cleared", "openChange", "dataRequested", "dataReceived"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiTextFieldAutoCompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-text-field-auto-complete', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bsu-fundamental-combo\n    [allowFreeText]=\"true\"\n    [placeholder]=\"Setting?.NullText || ''\"\n    [readonly]=\"(readonly$ | async) === true\"\n    [showDropdownButton]=\"false\"\n    [disabled]=\"(disable$ | async) === true\"\n    [isLtr]=\"Setting?.IsLtr === true\"\n    [dataSource]=\"comboDataSource\"\n    [value]=\"value || ''\"\n    (selectionChange)=\"onComboSelection($event)\"\n    (cleared)=\"onComboCleared()\"\n>\n</bsu-fundamental-combo>\n", styles: [":host{display:block;height:100%}\n"] }]
+            args: [{ selector: 'bsu-ui-text-field-auto-complete', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<bsu-fundamental-combo\n    [id]=\"id\"\n    [allowFreeText]=\"true\"\n    [placeholder]=\"Setting?.NullText || ''\"\n    [readonly]=\"(readonly$ | async) === true\"\n    [showDropdownButton]=\"false\"\n    [disabled]=\"(disable$ | async) === true\"\n    [isLtr]=\"Setting?.IsLtr === true\"\n    [dataSource]=\"comboDataSource\"\n    [value]=\"value || ''\"\n    (selectionChange)=\"onComboSelection($event)\"\n    (cleared)=\"onComboCleared()\"\n>\n</bsu-fundamental-combo>\n", styles: [":host{display:block;height:100%}\n"] }]
         }] });
 
 class UlLoadingMaskUiComponent extends BaseComponent {
@@ -12304,11 +12366,11 @@ class UiPicturesInfoComponent extends DeviceInfoFieldBaseComponent {
         this.value = value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiPicturesInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiPicturesInfoComponent, isStandalone: false, selector: "bsu-ui-pictures-info", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "_fileUploader", first: true, predicate: FileUploaderComponent, descendants: true }, { propertyName: "_fileGalleryViewer", first: true, predicate: FileGalleryViewerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (uploadingState$ | async; as uploadingState) { @if (uploadingState.uploading) {\r\n<div\r\n    class=\"picture-upload-overlay\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"'Uploading' | bbbTranslate\"\r\n>\r\n    <div class=\"picture-upload-status\">\r\n        <fd-busy-indicator [loading]=\"true\" [size]=\"'m'\"></fd-busy-indicator>\r\n        <span>{{ 'Uploading' | bbbTranslate }}</span>\r\n        <fd-progress-indicator\r\n            state=\"informative\"\r\n            [valueNow]=\"uploadingState.progress ?? 0\"\r\n            [valueMax]=\"100\"\r\n            [valueText]=\"(uploadingState.progress ?? 0) + '%'\"\r\n        ></fd-progress-indicator>\r\n    </div>\r\n</div>\r\n} }\r\n\r\n<fd-file-uploader\r\n    #uploader\r\n    [style.display]=\"'none'\"\r\n    [id]=\"id\"\r\n    [name]=\"'pictures_' + id\"\r\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif,.pdf\"\r\n    [multiple]=\"maxFileCount !== 1\"\r\n    (selectedFilesChanged)=\"onFileSelection($event)\"\r\n    (selectedInvalidFiles)=\"onInvalidFiles($event)\"\r\n></fd-file-uploader>\r\n\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isInlineGallery ? inlineGallery : layoutGridTpl;\r\n        context: {\r\n            disableOrReadonly: (disableOrReadonly$ | async),\r\n            mediaData: (mediaData$ | async),\r\n            deviceSize: (deviceSize$ | async),\r\n            uploader: uploader\r\n        }\r\n    \"\r\n></ng-container>\r\n<ng-template #inlineGallery let-mediaData=\"mediaData\" let-deviceSize=\"deviceSize\">\r\n    <fd-toolbar [shouldOverflow]=\"true\">\r\n        @if(mediaData.length && selectedMedia){\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Download' | bbbTranslate\"\r\n            glyph=\"download\"\r\n            [name]=\"selectedMedia.label\"\r\n            [src]=\"selectedMedia.mediaUrl\"\r\n            saveImage\r\n        ></button>\r\n        }\r\n        <button\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Scan' | bbbTranslate\"\r\n            fd-toolbar-item\r\n            [glyph]=\"'x-ray'\"\r\n            [fdMenuTrigger]=\"menu\"\r\n        ></button>\r\n        @if(!Setting.GroupList?.length){\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"add-photo\"\r\n            fdType=\"transparent\"\r\n            [label]=\"'AttachFile' | bbbTranslate\"\r\n            (click)=\"onPrimaryUpload(uploader)\"\r\n        ></button>\r\n        }@else{\r\n        <fd-split-button\r\n            fd-toolbar-item\r\n            [mainAction]=\"{ mainActionTitle: ('AttachFile' | bbbTranslate), keepMainAction: true }\"\r\n            (primaryButtonClicked)=\"onPrimaryUpload(uploader)\"\r\n        >\r\n            <fd-menu #menu>\r\n                @for (groupItem of Setting.GroupList; track groupItem.Id; let index = $index) {\r\n                <li fd-menu-item (click)=\"onGroupAttach(groupItem, uploader)\">\r\n                    <div fd-menu-interactive>\r\n                        <span fd-menu-title>{{ groupItem.Name | bbbTranslate }}</span>\r\n                    </div>\r\n                </li>\r\n                }\r\n            </fd-menu>\r\n        </fd-split-button>\r\n        }\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'PreviewZoomIn' | bbbTranslate\"\r\n            glyph=\"zoom-in\"\r\n            (click)=\"onZoomIn()\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'PreviewZoomOut' | bbbTranslate\"\r\n            glyph=\"zoom-out\"\r\n            (click)=\"onZoomOut()\"\r\n        ></button>\r\n\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Rotate' | bbbTranslate\"\r\n            glyph=\"rotate\"\r\n            (click)=\"onRotate2()\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Delete' | bbbTranslate\"\r\n            glyph=\"delete\"\r\n            (click)=\"onDelete(selectedId)\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'MoveUp' | bbbTranslate\"\r\n            glyph=\"arrow-top\"\r\n            (click)=\"onMoveUp(selectedId)\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'MoveDown' | bbbTranslate\"\r\n            glyph=\"arrow-bottom\"\r\n            (click)=\"onMoveDown(selectedId)\"\r\n        ></button>\r\n        <fd-toolbar-separator></fd-toolbar-separator>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"full-screen\"\r\n            fdType=\"transparent\"\r\n            fullscreenFiles\r\n            [label]=\"'FullScreen' | bbbTranslate\"\r\n            [files]=\"mediaData\"\r\n            [selectedId]=\"selectedId\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n        ></button>\r\n        <button\r\n            glyph=\"print\"\r\n            fdType=\"transparent\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            [files]=\"mediaData\"\r\n            printFiles\r\n            [label]=\"'Print' | bbbTranslate\"\r\n        ></button>\r\n\r\n        <button\r\n            glyph=\"download\"\r\n            fdType=\"transparent\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            (click)=\"onDownloadAsPdf()\"\r\n            [label]=\"'Download' | bbbTranslate\"\r\n        ></button>\r\n    </fd-toolbar>\r\n\r\n    <bsu-file-gallery-viewer\r\n        [style.max-height]=\"'100svh'\"\r\n        fillEmptySpace\r\n        [decrement]=\"'4.5rem'\"\r\n        [fillWidth]=\"true\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [groupList]=\"Setting.GroupList\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [title]=\"'AttachPicture' | bbbTranslate\"\r\n        [files]=\"mediaData\"\r\n        [isImageGallery]=\"true\"\r\n        [isHorizontal]=\"isThumbnailHorizontal\"\r\n        [selectedId]=\"selectedId\"\r\n        [zoom]=\"selectedZoom\"\r\n        (selectedIdChange)=\"selectedId = $event\"\r\n        (changeOrder)=\"onChangeOrder($event)\"\r\n    ></bsu-file-gallery-viewer>\r\n</ng-template>\r\n<ng-template\r\n    #layoutGridTpl\r\n    let-inDialog=\"inDialog\"\r\n    let-gallery=\"gallery\"\r\n    let-disableOrReadonly=\"disableOrReadonly\"\r\n    let-mediaData=\"mediaData\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-uploader=\"uploader\"\r\n>\r\n    <bsu-file-card-viewer\r\n        [inDialog]=\"inDialog\"\r\n        [mediaData]=\"mediaData\"\r\n        [disableOrReadonly]=\"disableOrReadonly\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [uploader]=\"uploader\"\r\n        [groupList]=\"Setting.GroupList\"\r\n        [scanMenu]=\"menu\"\r\n        (rotateMedia)=\"onRotate($event)\"\r\n        (deleteMedia)=\"onDelete($event)\"\r\n        (openUploader)=\"onOpenUploader($event, uploader)\"\r\n    ></bsu-file-card-viewer>\r\n</ng-template>\r\n\r\n<fd-menu #menu>\r\n    <li fd-menu-item (click)=\"onScan()\">\r\n        <a fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n    <li fd-menu-item (click)=\"onAdvanceScan()\">\r\n        <a fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.picture-upload-overlay{position:absolute;z-index:1000;inset:0;display:flex;align-items:center;justify-content:center;background:#0003}.picture-upload-status{display:flex;width:min(20rem,100% - 2rem);flex-direction:column;gap:.75rem;align-items:center;padding:1rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:var(--sapGroup_ContentBackground, #fff);box-shadow:var(--sapContent_Shadow2, 0 .5rem 1rem rgba(0, 0, 0, .16));color:var(--sapTextColor, #1d2d3e)}.picture-upload-status fd-progress-indicator{width:100%}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["mode", "containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight", "setMaxHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i2.SaveImageDirective, selector: "[saveImage]", inputs: ["name", "src"] }, { kind: "component", type: i5$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive", "preventWheelEvents"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i5$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: i5$2.MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "closeOnNavigation", "restoreFocusOnClose", "appendTo", "fixedPosition", "scrollStrategy", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaOrientation", "id"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i12$1.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: FileGalleryViewerComponent, selector: "bsu-file-gallery-viewer", inputs: ["fillWidth", "zoom", "deviceSize", "title", "files", "contentDensity", "isImageGallery", "isHorizontal", "selectedFile", "groupList", "scrollToId", "selectedId"], outputs: ["selectedIdChange", "changeOrder"] }, { kind: "component", type: FileCardViewerComponent, selector: "bsu-file-card-viewer", inputs: ["mediaData", "inDialog", "disableOrReadonly", "deviceSize", "uploader", "scanMenu", "groupList"], outputs: ["openUploader", "rotateMedia", "deleteMedia"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "selectedId", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiPicturesInfoComponent, isStandalone: false, selector: "bsu-ui-pictures-info", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "_fileUploader", first: true, predicate: FileUploaderComponent, descendants: true }, { propertyName: "_fileGalleryViewer", first: true, predicate: FileGalleryViewerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (uploadingState$ | async; as uploadingState) { @if (uploadingState.uploading) {\r\n<div\r\n    class=\"picture-upload-overlay\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"'Uploading' | bbbTranslate\"\r\n>\r\n    <div class=\"picture-upload-status\">\r\n        <fd-busy-indicator [loading]=\"true\" [size]=\"'m'\"></fd-busy-indicator>\r\n        <span>{{ 'Uploading' | bbbTranslate }}</span>\r\n        <fd-progress-indicator\r\n            state=\"informative\"\r\n            [valueNow]=\"uploadingState.progress ?? 0\"\r\n            [valueMax]=\"100\"\r\n            [valueText]=\"(uploadingState.progress ?? 0) + '%'\"\r\n        ></fd-progress-indicator>\r\n    </div>\r\n</div>\r\n} }\r\n\r\n<fd-file-uploader\r\n    #uploader\r\n    [style.display]=\"'none'\"\r\n    [id]=\"id\"\r\n    [name]=\"'pictures_' + id\"\r\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif,.pdf\"\r\n    [multiple]=\"maxFileCount !== 1\"\r\n    (selectedFilesChanged)=\"onFileSelection($event)\"\r\n    (selectedInvalidFiles)=\"onInvalidFiles($event)\"\r\n></fd-file-uploader>\r\n\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isInlineGallery ? inlineGallery : layoutGridTpl;\r\n        context: {\r\n            disableOrReadonly: (disableOrReadonly$ | async),\r\n            mediaData: (mediaData$ | async),\r\n            deviceSize: (deviceSize$ | async),\r\n            uploader: uploader\r\n        }\r\n    \"\r\n></ng-container>\r\n<ng-template\r\n    #inlineGallery\r\n    let-mediaData=\"mediaData\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-disableOrReadonly=\"disableOrReadonly\"\r\n>\r\n    <fd-toolbar [shouldOverflow]=\"true\">\r\n        @if(mediaData.length && selectedMedia){\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Download' | bbbTranslate\"\r\n            glyph=\"download\"\r\n            [name]=\"selectedMedia.label\"\r\n            [src]=\"selectedMedia.mediaUrl\"\r\n            saveImage\r\n        ></button>\r\n        } @if(!disableOrReadonly){\r\n        <button\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Scan' | bbbTranslate\"\r\n            fd-toolbar-item\r\n            [glyph]=\"'x-ray'\"\r\n            [fdMenuTrigger]=\"menu\"\r\n        ></button>\r\n        } @if(!disableOrReadonly){ @if(!Setting.GroupList?.length ){\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"add-photo\"\r\n            fdType=\"transparent\"\r\n            [label]=\"'AttachFile' | bbbTranslate\"\r\n            (click)=\"onPrimaryUpload(uploader)\"\r\n        ></button>\r\n        }@else{\r\n        <fd-split-button\r\n            fd-toolbar-item\r\n            [mainAction]=\"{ mainActionTitle: ('AttachFile' | bbbTranslate), keepMainAction: true }\"\r\n            (primaryButtonClicked)=\"onPrimaryUpload(uploader)\"\r\n        >\r\n            <fd-menu #menu>\r\n                @for (groupItem of Setting.GroupList; track groupItem.Id; let index = $index) {\r\n                <li fd-menu-item (click)=\"onGroupAttach(groupItem, uploader)\">\r\n                    <div fd-menu-interactive>\r\n                        <span fd-menu-title>{{ groupItem.Name | bbbTranslate }}</span>\r\n                    </div>\r\n                </li>\r\n                }\r\n            </fd-menu>\r\n        </fd-split-button>\r\n        } }\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'PreviewZoomIn' | bbbTranslate\"\r\n            glyph=\"zoom-in\"\r\n            (click)=\"onZoomIn()\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'PreviewZoomOut' | bbbTranslate\"\r\n            glyph=\"zoom-out\"\r\n            (click)=\"onZoomOut()\"\r\n        ></button>\r\n        @if(!disableOrReadonly){\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Rotate' | bbbTranslate\"\r\n            glyph=\"rotate\"\r\n            (click)=\"onRotate2()\"\r\n        ></button>\r\n\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Delete' | bbbTranslate\"\r\n            glyph=\"delete\"\r\n            (click)=\"onDelete(selectedId)\"\r\n        ></button>\r\n\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'MoveUp' | bbbTranslate\"\r\n            glyph=\"arrow-top\"\r\n            (click)=\"onMoveUp(selectedId)\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'MoveDown' | bbbTranslate\"\r\n            glyph=\"arrow-bottom\"\r\n            (click)=\"onMoveDown(selectedId)\"\r\n        ></button>\r\n        }\r\n        <fd-toolbar-separator></fd-toolbar-separator>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"full-screen\"\r\n            fdType=\"transparent\"\r\n            fullscreenFiles\r\n            [label]=\"'FullScreen' | bbbTranslate\"\r\n            [files]=\"mediaData\"\r\n            [selectedId]=\"selectedId\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n        ></button>\r\n        <button\r\n            glyph=\"print\"\r\n            fdType=\"transparent\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            [files]=\"mediaData\"\r\n            printFiles\r\n            [label]=\"'Print' | bbbTranslate\"\r\n        ></button>\r\n\r\n        <button\r\n            glyph=\"pdf-attachment\"\r\n            fdType=\"transparent\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            (click)=\"onDownloadAsPdf()\"\r\n            [label]=\"'DownloadFile' | bbbTranslate\"\r\n        ></button>\r\n    </fd-toolbar>\r\n\r\n    <bsu-file-gallery-viewer\r\n        [style.max-height]=\"'100svh'\"\r\n        fillEmptySpace\r\n        [decrement]=\"'4.5rem'\"\r\n        [fillWidth]=\"true\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [groupList]=\"Setting.GroupList\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [title]=\"'AttachPicture' | bbbTranslate\"\r\n        [files]=\"mediaData\"\r\n        [isImageGallery]=\"true\"\r\n        [isHorizontal]=\"isThumbnailHorizontal\"\r\n        [selectedId]=\"selectedId\"\r\n        [zoom]=\"selectedZoom\"\r\n        (selectedIdChange)=\"selectedId = $event\"\r\n        (changeOrder)=\"onChangeOrder($event)\"\r\n    ></bsu-file-gallery-viewer>\r\n</ng-template>\r\n<ng-template\r\n    #layoutGridTpl\r\n    let-inDialog=\"inDialog\"\r\n    let-gallery=\"gallery\"\r\n    let-disableOrReadonly=\"disableOrReadonly\"\r\n    let-mediaData=\"mediaData\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-uploader=\"uploader\"\r\n>\r\n    <bsu-file-card-viewer\r\n        [inDialog]=\"inDialog\"\r\n        [mediaData]=\"mediaData\"\r\n        [disableOrReadonly]=\"disableOrReadonly\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [uploader]=\"uploader\"\r\n        [groupList]=\"Setting.GroupList\"\r\n        [scanMenu]=\"menu\"\r\n        (rotateMedia)=\"onRotate($event)\"\r\n        (deleteMedia)=\"onDelete($event)\"\r\n        (openUploader)=\"onOpenUploader($event, uploader)\"\r\n    ></bsu-file-card-viewer>\r\n</ng-template>\r\n\r\n<fd-menu #menu>\r\n    <li fd-menu-item (click)=\"onScan()\">\r\n        <a fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n    <li fd-menu-item (click)=\"onAdvanceScan()\">\r\n        <a fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.picture-upload-overlay{position:absolute;z-index:1000;inset:0;display:flex;align-items:center;justify-content:center;background:#0003}.picture-upload-status{display:flex;width:min(20rem,100% - 2rem);flex-direction:column;gap:.75rem;align-items:center;padding:1rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:var(--sapGroup_ContentBackground, #fff);box-shadow:var(--sapContent_Shadow2, 0 .5rem 1rem rgba(0, 0, 0, .16));color:var(--sapTextColor, #1d2d3e)}.picture-upload-status fd-progress-indicator{width:100%}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["mode", "containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight", "setMaxHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i2.SaveImageDirective, selector: "[saveImage]", inputs: ["name", "src"] }, { kind: "component", type: i5$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive", "preventWheelEvents"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i5$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: i5$2.MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "closeOnNavigation", "restoreFocusOnClose", "appendTo", "fixedPosition", "scrollStrategy", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i7$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaOrientation", "id"] }, { kind: "directive", type: i7$1.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i7$1.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i12$1.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: FileGalleryViewerComponent, selector: "bsu-file-gallery-viewer", inputs: ["fillWidth", "zoom", "deviceSize", "title", "files", "contentDensity", "isImageGallery", "isHorizontal", "selectedFile", "groupList", "scrollToId", "selectedId"], outputs: ["selectedIdChange", "changeOrder"] }, { kind: "component", type: FileCardViewerComponent, selector: "bsu-file-card-viewer", inputs: ["mediaData", "inDialog", "disableOrReadonly", "deviceSize", "uploader", "scanMenu", "groupList"], outputs: ["openUploader", "rotateMedia", "deleteMedia"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "selectedId", "title", "deviceSize", "isImageGallery", "component"] }, { 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: "22.0.8", ngImport: i0, type: UiPicturesInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (uploadingState$ | async; as uploadingState) { @if (uploadingState.uploading) {\r\n<div\r\n    class=\"picture-upload-overlay\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"'Uploading' | bbbTranslate\"\r\n>\r\n    <div class=\"picture-upload-status\">\r\n        <fd-busy-indicator [loading]=\"true\" [size]=\"'m'\"></fd-busy-indicator>\r\n        <span>{{ 'Uploading' | bbbTranslate }}</span>\r\n        <fd-progress-indicator\r\n            state=\"informative\"\r\n            [valueNow]=\"uploadingState.progress ?? 0\"\r\n            [valueMax]=\"100\"\r\n            [valueText]=\"(uploadingState.progress ?? 0) + '%'\"\r\n        ></fd-progress-indicator>\r\n    </div>\r\n</div>\r\n} }\r\n\r\n<fd-file-uploader\r\n    #uploader\r\n    [style.display]=\"'none'\"\r\n    [id]=\"id\"\r\n    [name]=\"'pictures_' + id\"\r\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif,.pdf\"\r\n    [multiple]=\"maxFileCount !== 1\"\r\n    (selectedFilesChanged)=\"onFileSelection($event)\"\r\n    (selectedInvalidFiles)=\"onInvalidFiles($event)\"\r\n></fd-file-uploader>\r\n\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isInlineGallery ? inlineGallery : layoutGridTpl;\r\n        context: {\r\n            disableOrReadonly: (disableOrReadonly$ | async),\r\n            mediaData: (mediaData$ | async),\r\n            deviceSize: (deviceSize$ | async),\r\n            uploader: uploader\r\n        }\r\n    \"\r\n></ng-container>\r\n<ng-template #inlineGallery let-mediaData=\"mediaData\" let-deviceSize=\"deviceSize\">\r\n    <fd-toolbar [shouldOverflow]=\"true\">\r\n        @if(mediaData.length && selectedMedia){\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Download' | bbbTranslate\"\r\n            glyph=\"download\"\r\n            [name]=\"selectedMedia.label\"\r\n            [src]=\"selectedMedia.mediaUrl\"\r\n            saveImage\r\n        ></button>\r\n        }\r\n        <button\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Scan' | bbbTranslate\"\r\n            fd-toolbar-item\r\n            [glyph]=\"'x-ray'\"\r\n            [fdMenuTrigger]=\"menu\"\r\n        ></button>\r\n        @if(!Setting.GroupList?.length){\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"add-photo\"\r\n            fdType=\"transparent\"\r\n            [label]=\"'AttachFile' | bbbTranslate\"\r\n            (click)=\"onPrimaryUpload(uploader)\"\r\n        ></button>\r\n        }@else{\r\n        <fd-split-button\r\n            fd-toolbar-item\r\n            [mainAction]=\"{ mainActionTitle: ('AttachFile' | bbbTranslate), keepMainAction: true }\"\r\n            (primaryButtonClicked)=\"onPrimaryUpload(uploader)\"\r\n        >\r\n            <fd-menu #menu>\r\n                @for (groupItem of Setting.GroupList; track groupItem.Id; let index = $index) {\r\n                <li fd-menu-item (click)=\"onGroupAttach(groupItem, uploader)\">\r\n                    <div fd-menu-interactive>\r\n                        <span fd-menu-title>{{ groupItem.Name | bbbTranslate }}</span>\r\n                    </div>\r\n                </li>\r\n                }\r\n            </fd-menu>\r\n        </fd-split-button>\r\n        }\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'PreviewZoomIn' | bbbTranslate\"\r\n            glyph=\"zoom-in\"\r\n            (click)=\"onZoomIn()\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'PreviewZoomOut' | bbbTranslate\"\r\n            glyph=\"zoom-out\"\r\n            (click)=\"onZoomOut()\"\r\n        ></button>\r\n\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Rotate' | bbbTranslate\"\r\n            glyph=\"rotate\"\r\n            (click)=\"onRotate2()\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Delete' | bbbTranslate\"\r\n            glyph=\"delete\"\r\n            (click)=\"onDelete(selectedId)\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'MoveUp' | bbbTranslate\"\r\n            glyph=\"arrow-top\"\r\n            (click)=\"onMoveUp(selectedId)\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'MoveDown' | bbbTranslate\"\r\n            glyph=\"arrow-bottom\"\r\n            (click)=\"onMoveDown(selectedId)\"\r\n        ></button>\r\n        <fd-toolbar-separator></fd-toolbar-separator>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"full-screen\"\r\n            fdType=\"transparent\"\r\n            fullscreenFiles\r\n            [label]=\"'FullScreen' | bbbTranslate\"\r\n            [files]=\"mediaData\"\r\n            [selectedId]=\"selectedId\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n        ></button>\r\n        <button\r\n            glyph=\"print\"\r\n            fdType=\"transparent\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            [files]=\"mediaData\"\r\n            printFiles\r\n            [label]=\"'Print' | bbbTranslate\"\r\n        ></button>\r\n\r\n        <button\r\n            glyph=\"download\"\r\n            fdType=\"transparent\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            (click)=\"onDownloadAsPdf()\"\r\n            [label]=\"'Download' | bbbTranslate\"\r\n        ></button>\r\n    </fd-toolbar>\r\n\r\n    <bsu-file-gallery-viewer\r\n        [style.max-height]=\"'100svh'\"\r\n        fillEmptySpace\r\n        [decrement]=\"'4.5rem'\"\r\n        [fillWidth]=\"true\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [groupList]=\"Setting.GroupList\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [title]=\"'AttachPicture' | bbbTranslate\"\r\n        [files]=\"mediaData\"\r\n        [isImageGallery]=\"true\"\r\n        [isHorizontal]=\"isThumbnailHorizontal\"\r\n        [selectedId]=\"selectedId\"\r\n        [zoom]=\"selectedZoom\"\r\n        (selectedIdChange)=\"selectedId = $event\"\r\n        (changeOrder)=\"onChangeOrder($event)\"\r\n    ></bsu-file-gallery-viewer>\r\n</ng-template>\r\n<ng-template\r\n    #layoutGridTpl\r\n    let-inDialog=\"inDialog\"\r\n    let-gallery=\"gallery\"\r\n    let-disableOrReadonly=\"disableOrReadonly\"\r\n    let-mediaData=\"mediaData\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-uploader=\"uploader\"\r\n>\r\n    <bsu-file-card-viewer\r\n        [inDialog]=\"inDialog\"\r\n        [mediaData]=\"mediaData\"\r\n        [disableOrReadonly]=\"disableOrReadonly\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [uploader]=\"uploader\"\r\n        [groupList]=\"Setting.GroupList\"\r\n        [scanMenu]=\"menu\"\r\n        (rotateMedia)=\"onRotate($event)\"\r\n        (deleteMedia)=\"onDelete($event)\"\r\n        (openUploader)=\"onOpenUploader($event, uploader)\"\r\n    ></bsu-file-card-viewer>\r\n</ng-template>\r\n\r\n<fd-menu #menu>\r\n    <li fd-menu-item (click)=\"onScan()\">\r\n        <a fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n    <li fd-menu-item (click)=\"onAdvanceScan()\">\r\n        <a fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.picture-upload-overlay{position:absolute;z-index:1000;inset:0;display:flex;align-items:center;justify-content:center;background:#0003}.picture-upload-status{display:flex;width:min(20rem,100% - 2rem);flex-direction:column;gap:.75rem;align-items:center;padding:1rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:var(--sapGroup_ContentBackground, #fff);box-shadow:var(--sapContent_Shadow2, 0 .5rem 1rem rgba(0, 0, 0, .16));color:var(--sapTextColor, #1d2d3e)}.picture-upload-status fd-progress-indicator{width:100%}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}\n"] }]
+            args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (uploadingState$ | async; as uploadingState) { @if (uploadingState.uploading) {\r\n<div\r\n    class=\"picture-upload-overlay\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"'Uploading' | bbbTranslate\"\r\n>\r\n    <div class=\"picture-upload-status\">\r\n        <fd-busy-indicator [loading]=\"true\" [size]=\"'m'\"></fd-busy-indicator>\r\n        <span>{{ 'Uploading' | bbbTranslate }}</span>\r\n        <fd-progress-indicator\r\n            state=\"informative\"\r\n            [valueNow]=\"uploadingState.progress ?? 0\"\r\n            [valueMax]=\"100\"\r\n            [valueText]=\"(uploadingState.progress ?? 0) + '%'\"\r\n        ></fd-progress-indicator>\r\n    </div>\r\n</div>\r\n} }\r\n\r\n<fd-file-uploader\r\n    #uploader\r\n    [style.display]=\"'none'\"\r\n    [id]=\"id\"\r\n    [name]=\"'pictures_' + id\"\r\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif,.pdf\"\r\n    [multiple]=\"maxFileCount !== 1\"\r\n    (selectedFilesChanged)=\"onFileSelection($event)\"\r\n    (selectedInvalidFiles)=\"onInvalidFiles($event)\"\r\n></fd-file-uploader>\r\n\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        isInlineGallery ? inlineGallery : layoutGridTpl;\r\n        context: {\r\n            disableOrReadonly: (disableOrReadonly$ | async),\r\n            mediaData: (mediaData$ | async),\r\n            deviceSize: (deviceSize$ | async),\r\n            uploader: uploader\r\n        }\r\n    \"\r\n></ng-container>\r\n<ng-template\r\n    #inlineGallery\r\n    let-mediaData=\"mediaData\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-disableOrReadonly=\"disableOrReadonly\"\r\n>\r\n    <fd-toolbar [shouldOverflow]=\"true\">\r\n        @if(mediaData.length && selectedMedia){\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Download' | bbbTranslate\"\r\n            glyph=\"download\"\r\n            [name]=\"selectedMedia.label\"\r\n            [src]=\"selectedMedia.mediaUrl\"\r\n            saveImage\r\n        ></button>\r\n        } @if(!disableOrReadonly){\r\n        <button\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Scan' | bbbTranslate\"\r\n            fd-toolbar-item\r\n            [glyph]=\"'x-ray'\"\r\n            [fdMenuTrigger]=\"menu\"\r\n        ></button>\r\n        } @if(!disableOrReadonly){ @if(!Setting.GroupList?.length ){\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"add-photo\"\r\n            fdType=\"transparent\"\r\n            [label]=\"'AttachFile' | bbbTranslate\"\r\n            (click)=\"onPrimaryUpload(uploader)\"\r\n        ></button>\r\n        }@else{\r\n        <fd-split-button\r\n            fd-toolbar-item\r\n            [mainAction]=\"{ mainActionTitle: ('AttachFile' | bbbTranslate), keepMainAction: true }\"\r\n            (primaryButtonClicked)=\"onPrimaryUpload(uploader)\"\r\n        >\r\n            <fd-menu #menu>\r\n                @for (groupItem of Setting.GroupList; track groupItem.Id; let index = $index) {\r\n                <li fd-menu-item (click)=\"onGroupAttach(groupItem, uploader)\">\r\n                    <div fd-menu-interactive>\r\n                        <span fd-menu-title>{{ groupItem.Name | bbbTranslate }}</span>\r\n                    </div>\r\n                </li>\r\n                }\r\n            </fd-menu>\r\n        </fd-split-button>\r\n        } }\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'PreviewZoomIn' | bbbTranslate\"\r\n            glyph=\"zoom-in\"\r\n            (click)=\"onZoomIn()\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'PreviewZoomOut' | bbbTranslate\"\r\n            glyph=\"zoom-out\"\r\n            (click)=\"onZoomOut()\"\r\n        ></button>\r\n        @if(!disableOrReadonly){\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Rotate' | bbbTranslate\"\r\n            glyph=\"rotate\"\r\n            (click)=\"onRotate2()\"\r\n        ></button>\r\n\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'Delete' | bbbTranslate\"\r\n            glyph=\"delete\"\r\n            (click)=\"onDelete(selectedId)\"\r\n        ></button>\r\n\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'MoveUp' | bbbTranslate\"\r\n            glyph=\"arrow-top\"\r\n            (click)=\"onMoveUp(selectedId)\"\r\n        ></button>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [label]=\"'MoveDown' | bbbTranslate\"\r\n            glyph=\"arrow-bottom\"\r\n            (click)=\"onMoveDown(selectedId)\"\r\n        ></button>\r\n        }\r\n        <fd-toolbar-separator></fd-toolbar-separator>\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"full-screen\"\r\n            fdType=\"transparent\"\r\n            fullscreenFiles\r\n            [label]=\"'FullScreen' | bbbTranslate\"\r\n            [files]=\"mediaData\"\r\n            [selectedId]=\"selectedId\"\r\n            [isImageGallery]=\"true\"\r\n            [deviceSize]=\"deviceSize\"\r\n        ></button>\r\n        <button\r\n            glyph=\"print\"\r\n            fdType=\"transparent\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            [files]=\"mediaData\"\r\n            printFiles\r\n            [label]=\"'Print' | bbbTranslate\"\r\n        ></button>\r\n\r\n        <button\r\n            glyph=\"pdf-attachment\"\r\n            fdType=\"transparent\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            (click)=\"onDownloadAsPdf()\"\r\n            [label]=\"'DownloadFile' | bbbTranslate\"\r\n        ></button>\r\n    </fd-toolbar>\r\n\r\n    <bsu-file-gallery-viewer\r\n        [style.max-height]=\"'100svh'\"\r\n        fillEmptySpace\r\n        [decrement]=\"'4.5rem'\"\r\n        [fillWidth]=\"true\"\r\n        [fillWidth]=\"fillWidth\"\r\n        [groupList]=\"Setting.GroupList\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [title]=\"'AttachPicture' | bbbTranslate\"\r\n        [files]=\"mediaData\"\r\n        [isImageGallery]=\"true\"\r\n        [isHorizontal]=\"isThumbnailHorizontal\"\r\n        [selectedId]=\"selectedId\"\r\n        [zoom]=\"selectedZoom\"\r\n        (selectedIdChange)=\"selectedId = $event\"\r\n        (changeOrder)=\"onChangeOrder($event)\"\r\n    ></bsu-file-gallery-viewer>\r\n</ng-template>\r\n<ng-template\r\n    #layoutGridTpl\r\n    let-inDialog=\"inDialog\"\r\n    let-gallery=\"gallery\"\r\n    let-disableOrReadonly=\"disableOrReadonly\"\r\n    let-mediaData=\"mediaData\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-uploader=\"uploader\"\r\n>\r\n    <bsu-file-card-viewer\r\n        [inDialog]=\"inDialog\"\r\n        [mediaData]=\"mediaData\"\r\n        [disableOrReadonly]=\"disableOrReadonly\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [uploader]=\"uploader\"\r\n        [groupList]=\"Setting.GroupList\"\r\n        [scanMenu]=\"menu\"\r\n        (rotateMedia)=\"onRotate($event)\"\r\n        (deleteMedia)=\"onDelete($event)\"\r\n        (openUploader)=\"onOpenUploader($event, uploader)\"\r\n    ></bsu-file-card-viewer>\r\n</ng-template>\r\n\r\n<fd-menu #menu>\r\n    <li fd-menu-item (click)=\"onScan()\">\r\n        <a fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n    <li fd-menu-item (click)=\"onAdvanceScan()\">\r\n        <a fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.picture-upload-overlay{position:absolute;z-index:1000;inset:0;display:flex;align-items:center;justify-content:center;background:#0003}.picture-upload-status{display:flex;width:min(20rem,100% - 2rem);flex-direction:column;gap:.75rem;align-items:center;padding:1rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:var(--sapGroup_ContentBackground, #fff);box-shadow:var(--sapContent_Shadow2, 0 .5rem 1rem rgba(0, 0, 0, .16));color:var(--sapTextColor, #1d2d3e)}.picture-upload-status fd-progress-indicator{width:100%}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}\n"] }]
         }], propDecorators: { _fileUploader: [{
                 type: ViewChild,
                 args: [FileUploaderComponent]
@@ -13567,11 +13629,13 @@ class UiTinymceComponent extends FieldBaseComponent {
         this.context.fireEvent('change', this, newValue, this.value, {});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiTinymceComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: UiTinymceComponent, isStandalone: false, selector: "bsu-ui-tinymce", host: { properties: { "style.min-height": "this.tinyHeight", "style.min-width": "this._minWidth" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            (Setting.IsHtmlViewer || (disableOrReadonly$ | async)) === true ? readonlyMode : editMode;\r\n            context: { disable: (disable$ | async) === true }\r\n        \"\r\n    ></ng-container>\r\n    <ng-template #readonlyMode let-disable=\"disable\">\r\n        <input fd-form-control class=\"hide\" />\r\n        <div\r\n            class=\"html-readonly fd-input\"\r\n            contentDensity\r\n            [attr.id]=\"id\"\r\n            [attr.readonly]=\"true\"\r\n            [class.readonly]=\"true\"\r\n            [class.anonymous]=\"isAnonymous\"\r\n            [class.disable]=\"disable\"\r\n            [innerHtml]=\"value | scopedCss: '#' + id | sanitizeText\"\r\n            [style.pointer-event]=\"disable ? 'none' : null\"\r\n            style=\"height: auto !important; text-wrap: auto\"\r\n        ></div>\r\n    </ng-template>\r\n\r\n    <ng-template #editMode>\r\n        <bsu-mask *ngIf=\"!tinyInit\"></bsu-mask>\r\n        <bsu-barsa-tinyemce\r\n            [attr.ismobile]=\"isMobile\"\r\n            [attr.ismobile]=\"isTablet\"\r\n            [Setting]=\"Setting\"\r\n            [IsInline]=\"parameters?.IsInline === true\"\r\n            [value]=\"value\"\r\n            [defaultVerbs]=\"context.defaultVerbs\"\r\n            (tinyInit)=\"onTinyInit()\"\r\n            (valueChange)=\"onTinyChanged($event)\"\r\n            [readonly]=\"isReadonly\"\r\n        ></bsu-barsa-tinyemce>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;height:100%;width:100%;align-self:flex-start}:host ::ng-deep .tox.tox-tinymce{border-radius:0%;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.html-readonly ::ng-deep>p{overflow:unset}.html-readonly ::ng-deep ol,.html-readonly ::ng-deep ul{list-style:revert!important;margin:revert!important;padding:revert!important}.html-readonly ::ng-deep li{border-width:revert;border-style:revert;border-color:revert}.readonly{background:var(--sapBackgroundColor);height:100%}.disable{background:var(--sapBackgroundColor);height:100%;opacity:.5}.readonly.anonymous{background-color:transparent;border:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BarsaTinyemceComponent, selector: "bsu-barsa-tinyemce", inputs: ["Setting", "isReadonly", "value", "IsInline", "defaultVerbs"], outputs: ["valueChange", "tinyInit"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: i2.ScopedCssPipe, name: "scopedCss" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiTinymceComponent, isStandalone: false, selector: "bsu-ui-tinymce", host: { properties: { "style.position": "!tinyInit ? 'relative' : null", "style.min-height": "this.tinyHeight", "style.min-width": "this._minWidth" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            (Setting.IsHtmlViewer || (disableOrReadonly$ | async)) === true ? readonlyMode : editMode;\r\n            context: { disable: (disable$ | async) === true }\r\n        \"\r\n    ></ng-container>\r\n    <ng-template #readonlyMode let-disable=\"disable\">\r\n        <input fd-form-control class=\"hide\" />\r\n        <div\r\n            class=\"html-readonly fd-input\"\r\n            contentDensity\r\n            [attr.id]=\"id\"\r\n            [attr.readonly]=\"true\"\r\n            [class.readonly]=\"true\"\r\n            [class.anonymous]=\"isAnonymous\"\r\n            [class.disable]=\"disable\"\r\n            [innerHtml]=\"value | scopedCss: '#' + id | sanitizeText\"\r\n            [style.pointer-event]=\"disable ? 'none' : null\"\r\n            style=\"height: auto !important; text-wrap: auto\"\r\n        ></div>\r\n    </ng-template>\r\n\r\n    <ng-template #editMode>\r\n        @if(!tinyInit){ <bsu-mask></bsu-mask>}\r\n        <bsu-barsa-tinyemce\r\n            [attr.ismobile]=\"isMobile\"\r\n            [attr.ismobile]=\"isTablet\"\r\n            [Setting]=\"Setting\"\r\n            [IsInline]=\"parameters?.IsInline === true\"\r\n            [value]=\"value\"\r\n            [defaultVerbs]=\"context.defaultVerbs\"\r\n            (tinyInit)=\"onTinyInit()\"\r\n            (valueChange)=\"onTinyChanged($event)\"\r\n            [readonly]=\"isReadonly\"\r\n        ></bsu-barsa-tinyemce>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;height:100%;width:100%;align-self:flex-start}:host ::ng-deep .tox.tox-tinymce{border-radius:0%;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.html-readonly ::ng-deep>p{overflow:unset}.html-readonly ::ng-deep ol,.html-readonly ::ng-deep ul{list-style:revert!important;margin:revert!important;padding:revert!important}.html-readonly ::ng-deep li{border-width:revert;border-style:revert;border-color:revert}.readonly{background:var(--sapBackgroundColor);height:100%}.disable{background:var(--sapBackgroundColor);height:100%;opacity:.5}.readonly.anonymous{background-color:transparent;border:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BarsaTinyemceComponent, selector: "bsu-barsa-tinyemce", inputs: ["Setting", "isReadonly", "value", "IsInline", "defaultVerbs"], outputs: ["valueChange", "tinyInit"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: i2.ScopedCssPipe, name: "scopedCss" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiTinymceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-tinymce', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *untilInView=\"el\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            (Setting.IsHtmlViewer || (disableOrReadonly$ | async)) === true ? readonlyMode : editMode;\r\n            context: { disable: (disable$ | async) === true }\r\n        \"\r\n    ></ng-container>\r\n    <ng-template #readonlyMode let-disable=\"disable\">\r\n        <input fd-form-control class=\"hide\" />\r\n        <div\r\n            class=\"html-readonly fd-input\"\r\n            contentDensity\r\n            [attr.id]=\"id\"\r\n            [attr.readonly]=\"true\"\r\n            [class.readonly]=\"true\"\r\n            [class.anonymous]=\"isAnonymous\"\r\n            [class.disable]=\"disable\"\r\n            [innerHtml]=\"value | scopedCss: '#' + id | sanitizeText\"\r\n            [style.pointer-event]=\"disable ? 'none' : null\"\r\n            style=\"height: auto !important; text-wrap: auto\"\r\n        ></div>\r\n    </ng-template>\r\n\r\n    <ng-template #editMode>\r\n        <bsu-mask *ngIf=\"!tinyInit\"></bsu-mask>\r\n        <bsu-barsa-tinyemce\r\n            [attr.ismobile]=\"isMobile\"\r\n            [attr.ismobile]=\"isTablet\"\r\n            [Setting]=\"Setting\"\r\n            [IsInline]=\"parameters?.IsInline === true\"\r\n            [value]=\"value\"\r\n            [defaultVerbs]=\"context.defaultVerbs\"\r\n            (tinyInit)=\"onTinyInit()\"\r\n            (valueChange)=\"onTinyChanged($event)\"\r\n            [readonly]=\"isReadonly\"\r\n        ></bsu-barsa-tinyemce>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;height:100%;width:100%;align-self:flex-start}:host ::ng-deep .tox.tox-tinymce{border-radius:0%;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.html-readonly ::ng-deep>p{overflow:unset}.html-readonly ::ng-deep ol,.html-readonly ::ng-deep ul{list-style:revert!important;margin:revert!important;padding:revert!important}.html-readonly ::ng-deep li{border-width:revert;border-style:revert;border-color:revert}.readonly{background:var(--sapBackgroundColor);height:100%}.disable{background:var(--sapBackgroundColor);height:100%;opacity:.5}.readonly.anonymous{background-color:transparent;border:none}\n"] }]
+            args: [{ selector: 'bsu-ui-tinymce', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
+                        '[style.position]': "!tinyInit ? 'relative' : null"
+                    }, template: "<ng-container *untilInView=\"el\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            (Setting.IsHtmlViewer || (disableOrReadonly$ | async)) === true ? readonlyMode : editMode;\r\n            context: { disable: (disable$ | async) === true }\r\n        \"\r\n    ></ng-container>\r\n    <ng-template #readonlyMode let-disable=\"disable\">\r\n        <input fd-form-control class=\"hide\" />\r\n        <div\r\n            class=\"html-readonly fd-input\"\r\n            contentDensity\r\n            [attr.id]=\"id\"\r\n            [attr.readonly]=\"true\"\r\n            [class.readonly]=\"true\"\r\n            [class.anonymous]=\"isAnonymous\"\r\n            [class.disable]=\"disable\"\r\n            [innerHtml]=\"value | scopedCss: '#' + id | sanitizeText\"\r\n            [style.pointer-event]=\"disable ? 'none' : null\"\r\n            style=\"height: auto !important; text-wrap: auto\"\r\n        ></div>\r\n    </ng-template>\r\n\r\n    <ng-template #editMode>\r\n        @if(!tinyInit){ <bsu-mask></bsu-mask>}\r\n        <bsu-barsa-tinyemce\r\n            [attr.ismobile]=\"isMobile\"\r\n            [attr.ismobile]=\"isTablet\"\r\n            [Setting]=\"Setting\"\r\n            [IsInline]=\"parameters?.IsInline === true\"\r\n            [value]=\"value\"\r\n            [defaultVerbs]=\"context.defaultVerbs\"\r\n            (tinyInit)=\"onTinyInit()\"\r\n            (valueChange)=\"onTinyChanged($event)\"\r\n            [readonly]=\"isReadonly\"\r\n        ></bsu-barsa-tinyemce>\r\n    </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;height:100%;width:100%;align-self:flex-start}:host ::ng-deep .tox.tox-tinymce{border-radius:0%;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor)}.html-readonly,bsu-barsa-tinyemce{flex-grow:1}.html-readonly ::ng-deep>p{overflow:unset}.html-readonly ::ng-deep ol,.html-readonly ::ng-deep ul{list-style:revert!important;margin:revert!important;padding:revert!important}.html-readonly ::ng-deep li{border-width:revert;border-style:revert;border-color:revert}.readonly{background:var(--sapBackgroundColor);height:100%}.disable{background:var(--sapBackgroundColor);height:100%;opacity:.5}.readonly.anonymous{background-color:transparent;border:none}\n"] }]
         }], propDecorators: { tinyHeight: [{
                 type: HostBinding,
                 args: ['style.min-height']
@@ -13774,7 +13838,7 @@ class UlvPagingComponent extends BaseComponent {
         this.pageChange.emit(pageNumber);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UlvPagingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UlvPagingComponent, isStandalone: false, 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\">\r\n<div class=\"icons\">\r\n  <button\r\n    fd-button\r\n    [attr.disabled]=\"currentPage === totalPage - 1 ? true : null\"\r\n    fdType=\"transparent\"\r\n    glyph=\"begin\"\r\n    (click)=\"onEndClick()\"\r\n  ></button>\r\n  <button\r\n    fd-button\r\n    [attr.disabled]=\"currentPage + 1 >= totalPage ? true : null\"\r\n    fdType=\"transparent\"\r\n    glyph=\"navigation-left-arrow\"\r\n    (click)=\"onNextClick()\"\r\n  ></button>\r\n  <button\r\n    fd-button\r\n    [attr.disabled]=\"currentPage - 1 < 0 ? true : null\"\r\n    fdType=\"transparent\"\r\n    glyph=\"navigation-right-arrow\"\r\n    (click)=\"onPreviousClick()\"\r\n  ></button>\r\n  <button\r\n    fd-button\r\n    [attr.disabled]=\"currentPage === 0 ? true : null\"\r\n    fdType=\"transparent\"\r\n    glyph=\"begin\"\r\n    (click)=\"onFirstClick()\"\r\n  ></button>\r\n</div>\r\n<div class=\"pagesize\">\r\n  <label style=\"padding: 0 5px\"\r\n    >{{ currentPage * pageSize }}-{{ currentPage * pageSize + pageSize }} \u0627\u0632\r\n    {{ config.Setting.Data.Paging.TotalRows }}</label\r\n    >\r\n    <fd-select (valueChange)=\"onPageSizeChange($event)\" [value]=\"pageSize\">\r\n      <fd-option [value]=\"24\">24</fd-option>\r\n      <fd-option [value]=\"100\">100</fd-option>\r\n      <fd-option [value]=\"100\">100</fd-option>\r\n    </fd-select>\r\n\r\n    <label style=\"padding: 0 5px\">{{ ItemsPerPage }}:</label>\r\n  </div>\r\n</ng-container> -->\r\n@if (pagingSetting) { @if (pagingSetting && pagingSetting.HasPaging && pagingSetting.TotalPages>1) {\r\n<fd-pagination\r\n    dir=\"rtl\"\r\n    [totalItems]=\"pagingSetting.TotalRows\"\r\n    (pageChangeStart)=\"onPageChange($event)\"\r\n    [itemsPerPage]=\"pagingSetting.PageSize\"\r\n    [currentPage]=\"currentPage\"\r\n    [displayTextTemplate]=\"showingItems\"\r\n></fd-pagination>\r\n} }\r\n<ng-template #showingItems let-showing=\"showing\">\r\n    <span dir=\"ltr\">\r\n        {{ 'From' | bbbTranslate }} {{ showing.from }} {{ 'To' | bbbTranslate }} {{ showing.to }} {{ totalPageStr }}\r\n    </span>\r\n</ng-template>\r\n", styles: [":host{align-items:center;display:flex;justify-content:center;flex-direction:row-reverse;width:100%}.icons{display:flex;justify-content:space-between}.icons ui5-button{color:var(--sapContent_LabelColor)}.icons ui5-button:hover{background:var(--sapBackgroundColor)!important;border-color:transparent!important}.icons{padding:0 15px}.pagesize{align-items:center;display:flex;justify-content:flex-start;flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: i1$7.PaginationComponent, selector: "fd-pagination", inputs: ["id", "mobile", "totalItems", "currentPage", "itemsPerPage", "itemsPerPageTemplate", "itemsPerPageOptions", "displayTotalItems", "displayTextTemplate"], outputs: ["pageChangeStart", "itemsPerPageChange"] }, { kind: "directive", type: i2$6.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UlvPagingComponent, isStandalone: false, 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\">\r\n<div class=\"icons\">\r\n  <button\r\n    fd-button\r\n    [attr.disabled]=\"currentPage === totalPage - 1 ? true : null\"\r\n    fdType=\"transparent\"\r\n    glyph=\"begin\"\r\n    (click)=\"onEndClick()\"\r\n  ></button>\r\n  <button\r\n    fd-button\r\n    [attr.disabled]=\"currentPage + 1 >= totalPage ? true : null\"\r\n    fdType=\"transparent\"\r\n    glyph=\"navigation-left-arrow\"\r\n    (click)=\"onNextClick()\"\r\n  ></button>\r\n  <button\r\n    fd-button\r\n    [attr.disabled]=\"currentPage - 1 < 0 ? true : null\"\r\n    fdType=\"transparent\"\r\n    glyph=\"navigation-right-arrow\"\r\n    (click)=\"onPreviousClick()\"\r\n  ></button>\r\n  <button\r\n    fd-button\r\n    [attr.disabled]=\"currentPage === 0 ? true : null\"\r\n    fdType=\"transparent\"\r\n    glyph=\"begin\"\r\n    (click)=\"onFirstClick()\"\r\n  ></button>\r\n</div>\r\n<div class=\"pagesize\">\r\n  <label style=\"padding: 0 5px\"\r\n    >{{ currentPage * pageSize }}-{{ currentPage * pageSize + pageSize }} \u0627\u0632\r\n    {{ config.Setting.Data.Paging.TotalRows }}</label\r\n    >\r\n    <fd-select (valueChange)=\"onPageSizeChange($event)\" [value]=\"pageSize\">\r\n      <fd-option [value]=\"24\">24</fd-option>\r\n      <fd-option [value]=\"100\">100</fd-option>\r\n      <fd-option [value]=\"100\">100</fd-option>\r\n    </fd-select>\r\n\r\n    <label style=\"padding: 0 5px\">{{ ItemsPerPage }}:</label>\r\n  </div>\r\n</ng-container> -->\r\n@if (pagingSetting) { @if (pagingSetting && pagingSetting.HasPaging && pagingSetting.TotalPages>1) {\r\n<fd-pagination\r\n    dir=\"rtl\"\r\n    [totalItems]=\"pagingSetting.TotalRows\"\r\n    (pageChangeStart)=\"onPageChange($event)\"\r\n    [itemsPerPage]=\"pagingSetting.PageSize\"\r\n    [currentPage]=\"currentPage\"\r\n    [displayTextTemplate]=\"showingItems\"\r\n></fd-pagination>\r\n} }\r\n<ng-template #showingItems let-showing=\"showing\">\r\n    <span dir=\"ltr\">\r\n        {{ 'From' | bbbTranslate }} {{ showing.from }} {{ 'To' | bbbTranslate }} {{ showing.to }} {{ totalPageStr }}\r\n    </span>\r\n</ng-template>\r\n", styles: [":host{align-items:center;display:flex;justify-content:center;flex-direction:row-reverse;width:100%}.icons{display:flex;justify-content:space-between}.icons ui5-button{color:var(--sapContent_LabelColor)}.icons ui5-button:hover{background:var(--sapBackgroundColor)!important;border-color:transparent!important}.icons{padding:0 15px}.pagesize{align-items:center;display:flex;justify-content:flex-start;flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: i1$7.PaginationComponent, selector: "fd-pagination", inputs: ["id", "mobile", "totalItems", "currentPage", "itemsPerPage", "itemsPerPageTemplate", "itemsPerPageOptions", "displayTotalItems", "displayTextTemplate"], outputs: ["pageChangeStart", "itemsPerPageChange"] }, { kind: "directive", type: i2$7.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UlvPagingComponent, decorators: [{
             type: Component,
@@ -14358,6 +14422,7 @@ class UiMoInfoUlvComboComponent extends FieldBaseComponent {
     set UlvUi(value) {
         this._UlvUi = value;
         if (value) {
+            this._publishComboItems();
             value.viewerControl.on({
                 MoDataListChanged: () => {
                     this._publishComboItems();
@@ -14725,13 +14790,13 @@ class UiMoInfoUlvComboComponent extends FieldBaseComponent {
         // this._trigger$.next('ItemSelect', this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiMoInfoUlvComboComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiMoInfoUlvComboComponent, isStandalone: false, selector: "bsu-ui-mo-info-ulv-combo", inputs: { ulvAdapter: "ulvAdapter", Control: "Control", UlvMainCtrlr: "UlvMainCtrlr", UlvUi: "UlvUi", 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)" }, properties: { "attr.dir": "Setting?.IsLtr ? 'ltr' : null" } }, viewQueries: [{ propertyName: "comboRef", first: true, predicate: FundamentalComboComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        comboTemplate;\r\n        context: {\r\n            disableOrReadonly: disableOrReadonly$ | async,\r\n            disable: disable$ | async,\r\n            readonly: readonly$ | async\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n\r\n<ng-template #btnsTpl let-disableOrReadonly=\"disableOrReadonly\">\r\n    @if( showExtraButtons() && !disableOrReadonly ){\r\n    <div class=\"combo-actions fd-input-group\">\r\n        @if (showClearAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            tabindex=\"-1\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"decline\"\r\n            [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n            [title]=\"'Delete' | bbbTranslate\"\r\n            (click)=\"onClear()\"\r\n        ></button>\r\n        } @if (showNewAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"add\"\r\n            [ariaLabel]=\"'New' | bbbTranslate\"\r\n            [title]=\"'New' | bbbTranslate\"\r\n            (click)=\"onNew()\"\r\n        ></button>\r\n        } @if (showEditAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"edit\"\r\n            [ariaLabel]=\"'Edit' | bbbTranslate\"\r\n            [title]=\"'Edit' | bbbTranslate\"\r\n            (click)=\"onEdit()\"\r\n        ></button>\r\n        } @if (showSearchAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"search\"\r\n            [ariaLabel]=\"'Search' | bbbTranslate\"\r\n            [title]=\"'Search' | bbbTranslate\"\r\n            (click)=\"onSearch()\"\r\n        ></button>\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #comboTemplate let-disableOrReadonly=\"disableOrReadonly\" let-disable=\"disable\" let-readonly=\"readonly\">\r\n    <div\r\n        class=\"simple-combo-wrapper\"\r\n        contentDensity\r\n        [class.one-extra-button]=\"disableOrReadonly !== true && actionButtonCount === 1\"\r\n        [class.two-extra-buttons]=\"disableOrReadonly !== true && actionButtonCount === 2\"\r\n        [class.dropdown-hidden]=\"context._showDropDown === false || disableOrReadonly === true\"\r\n    >\r\n        @if ((loading$ | async) === true && !isDataLoadedFirstTime) {\r\n        <div class=\"combo-loading-mask\">\r\n            <bsu-mask [size]=\"'s'\" [top]=\"'10px'\"></bsu-mask>\r\n        </div>\r\n        }\r\n        @if (iconMo()) {\r\n        <span class=\"combo-value-icon\" aria-hidden=\"true\">\r\n            <img [src]=\"iconMo()\" loading=\"lazy\" width=\"16\" height=\"16\" alt=\"\" />\r\n        </span>\r\n        }\r\n        <bsu-fundamental-combo\r\n            #fdCombobox\r\n            [comboClass]=\"{\r\n                'combo-mo-ulv': true,\r\n                'has-value-icon': !!iconMo(),\r\n                canAdd: !hasValue && disableOrReadonly !== true && Setting.ShowNewButton,\r\n                canEdit: hasValue && disableOrReadonly !== true,\r\n                disableorreadonly: disableOrReadonly === true,\r\n                'hide-dropdown-button': context._showDropDown === false || disableOrReadonly === true,\r\n                showExtraButtons: disableOrReadonly !== true && showExtraButtons(),\r\n                'has-Value': hasValue\r\n            }\"\r\n            [placeholder]=\"'Select' | bbbTranslate\"\r\n            [mobile]=\"false\"\r\n            [mobileConfig]=\"mobileConfig\"\r\n            [tabOutStrategy]=\"'close'\"\r\n            [readonly]=\"readonly === true\"\r\n            [disabled]=\"disable === true\"\r\n            [dataSource]=\"comboDataSource\"\r\n            [lookupKey]=\"'Id'\"\r\n            [displayKey]=\"'$__displayCaption'\"\r\n            [value]=\"value\"\r\n            [byline]=\"allColumns.length > 0\"\r\n            [fillControlMode]=\"'equal'\"\r\n            [closeOnOutsideClick]=\"true\"\r\n            (selectionChange)=\"onComboSelectionChange($event)\"\r\n            (cleared)=\"onComboCleared()\"\r\n            (openChange)=\"onComboOpenChange($event)\"\r\n            (dataRequested)=\"onComboDataRequested()\"\r\n            (dataReceived)=\"onComboDataReceived()\"\r\n            [itemTemplate]=\"comboItemTpl\"\r\n        >\r\n            <!-- \u0641\u0648\u062A\u0631\u0650 \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC \u0627\u0632 \u0637\u0631\u06CC\u0642 <ng-content>\u0650 wrapper \u0628\u0647 \u0644\u06CC\u0633\u062A\u0650 fdp \u062A\u0632\u0631\u06CC\u0642 \u0645\u06CC\u200C\u0634\u0648\u062F. -->\r\n            @if (ulvPagingSetting; as pagingSetting) { @if (pagingSetting.HasPaging && pagingSetting.TotalPages > 1) {\r\n            <li class=\"combo-paging-footer\" role=\"presentation\">\r\n                <bsu-ulv-paging [pagingSetting]=\"pagingSetting\" (pageChange)=\"onPageChange($event)\"></bsu-ulv-paging>\r\n            </li>\r\n            } }\r\n        </bsu-fundamental-combo>\r\n        <!--\r\n            \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 \u0622\u06CC\u062A\u0645 \u0631\u0627 \u0628\u0647\u200C\u0635\u0648\u0631\u062A \u0646\u0627\u0645\u200C\u062F\u0627\u0631 \u0628\u0647 [itemTemplate] \u0645\u06CC\u200C\u062F\u0647\u06CC\u0645\u061B wrapper \u062E\u0648\u062F\u0634 directive\u0650\r\n            fdpComboboxItem \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u0648 \u0627\u06CC\u0646 \u062A\u0645\u067E\u0644\u06CC\u062A \u0631\u0627 \u0631\u0646\u062F\u0631 \u0645\u06CC\u200C\u06A9\u0646\u062F (projection \u0645\u0633\u062A\u0642\u06CC\u0645\u0650 fdpComboboxItem\r\n            \u0627\u0632 \u062F\u0627\u062E\u0644\u0650 <ng-content> \u062A\u0648\u0633\u0637\u0650 ContentChildren\u0650 fdp \u062F\u06CC\u062F\u0647 \u0646\u0645\u06CC\u200C\u0634\u0648\u062F).\r\n        -->\r\n        <ng-template #comboItemTpl let-item>\r\n            <span fd-list-thumbnail class=\"!tw-w-auto tw-me-[0.2rem]\">\r\n                <img [src]=\"item | moIcon: UlvMainCtrlr?.Ac?.Setting\" loading=\"lazy\" width=\"16px\" height=\"16px\" alt=\"object icon\"\r\n            /></span>\r\n            @if (allColumns?.length) { @if (getReportOptionView(item); as reportOption) {\r\n                <div fd-list-content data-report-option>\r\n                    <h6\r\n                        fd-title\r\n                        [headerSize]=\"6\"\r\n                        [wrap]=\"true\"\r\n                        [attr.dir]=\"reportOption.primary.column?.IsLtr ? 'ltr' : null\"\r\n                        [title]=\"reportOption.primary.value\"\r\n                    >\r\n                        {{ reportOption.primary.value }}\r\n                    </h6>\r\n                    @if (reportOption.secondary; as secondary) {\r\n                    <div\r\n                        fd-list-title\r\n                        [wrap]=\"true\"\r\n                        [attr.dir]=\"secondary.column?.IsLtr ? 'ltr' : null\"\r\n                        [title]=\"secondary.value\"\r\n                    >\r\n                        {{ secondary.value }}\r\n                    </div>\r\n                    } @if (reportOption.details.length) {\r\n                    <fd-layout-grid [noHorizontalGap]=\"true\">\r\n                        <div fdLayoutGridRow [style.min-width.%]=\"100\">\r\n                            @for (field of reportOption.details; track field.column?.Name) {\r\n                            <div [fdLayoutGridCol]=\"12\" [colMd]=\"6\">\r\n                                <div fd-form-item [horizontal]=\"true\">\r\n                                    <label\r\n                                        fd-form-label\r\n                                        [colon]=\"true\"\r\n                                        [title]=\"field.column?.Caption || field.column?.Alias\"\r\n                                    >\r\n                                        {{ field.column?.Caption || field.column?.Alias | bbbTranslate }}\r\n                                    </label>\r\n                                    <div\r\n                                        fd-list-title\r\n                                        [wrap]=\"true\"\r\n                                        [attr.dir]=\"field.column?.IsLtr ? 'ltr' : null\"\r\n                                        [title]=\"field.value\"\r\n                                    >\r\n                                        {{ field.value }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                    </fd-layout-grid>\r\n                    }\r\n                </div>\r\n                } } @else {\r\n                <span fd-list-title>\r\n                    {{ item.$MoCaption || item.$Caption | bbbTranslate }}\r\n                </span>\r\n                }\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"btnsTpl; context: { disableOrReadonly: disableOrReadonly }\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block}.combo-mo-ulv{display:block;width:100%}.combo-mo-ulv ::ng-deep .fd-popover-custom{width:100%}.simple-combo-wrapper{--combo-control-height: var(--sapElement_Height, 2.75rem);--combo-dropdown-width: 2.25rem;--combo-value-icon-width: 1.75rem;display:block;width:100%;position:relative}.simple-combo-wrapper.is-compact,.simple-combo-wrapper.is-condensed{--combo-control-height: var(--sapElement_Compact_Height, 2rem);--combo-dropdown-width: 2rem}.simple-combo-wrapper.one-extra-button ::ng-deep .combo-mo-ulv.showExtraButtons:not(.disableorreadonly) .fd-input-group__input{padding-inline-end:calc(var(--fdInput_Group_Addon_Width, 2.25rem) + .25rem)}.simple-combo-wrapper.two-extra-buttons ::ng-deep .combo-mo-ulv.showExtraButtons:not(.disableorreadonly) .fd-input-group__input{padding-inline-end:calc(var(--fdInput_Group_Addon_Width, 2.25rem) + var(--fdInput_Group_Addon_Width, 2.25rem) + .25rem)}.simple-combo-wrapper.dropdown-hidden{--combo-dropdown-width: 0rem}.simple-combo-wrapper ::ng-deep .combo-mo-ulv.hide-dropdown-button .fd-input-group__addon--button{display:none}.simple-combo-wrapper ::ng-deep .combo-mo-ulv.has-value-icon .fd-input-group__input{padding-inline-start:var(--combo-value-icon-width, 1.75rem)}.combo-value-icon{position:absolute;inset-block-start:2px;inset-inline-start:0;z-index:6;display:flex;align-items:center;justify-content:center;width:var(--combo-value-icon-width, 1.75rem);height:var(--combo-control-height);pointer-events:none}.combo-value-icon img{width:1rem;height:1rem;object-fit:contain}.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 .fdp-combobox__count-list-results{display:none}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer){display:flex!important;flex-direction:column}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.fd-list__item{flex:0 0 auto}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.combo-paging-footer{order:1}::ng-deep .fdp-combobox__list:has([data-report-option])>.fd-list__item:has([data-report-option]){border-block-end:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.combo-loading-mask{position:absolute;inset:0;z-index:8}.combo-paging-footer{position:sticky;inset-block-end:0;z-index:1;order:1;flex:0 0 auto;box-sizing:border-box;width:100%;padding-block:.25rem;overflow-x:auto;list-style:none;border-block-start:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9);background:var(--sapList_Background, var(--sapGroup_ContentBackground, #fff))}.combo-actions{position:absolute;inset-block-start:0;inset-inline-end:var(--combo-dropdown-width);z-index:7;display:flex;align-items:stretch;width:auto;min-width:0;height:var(--combo-control-height);overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.combo-actions .combo-action-button{width:auto;height:100%;border-radius:0}@media(hover:hover)and (pointer:fine){.combo-actions{opacity:0;pointer-events:none;transform:translateY(.125rem);transition:opacity .18s ease-out,transform .18s ease-out}.simple-combo-wrapper:hover .combo-actions,.simple-combo-wrapper:focus-within .combo-actions{opacity:1;pointer-events:auto;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.combo-actions{transform:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id", "disabled", "unitDescription", "independent"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: FundamentalComboComponent, selector: "bsu-fundamental-combo", inputs: ["dataSource", "value", "displayKey", "lookupKey", "byline", "placeholder", "disabled", "readonly", "mobile", "mobileConfig", "isLtr", "showDropdownButton", "itemTemplate", "allowFreeText", "width", "comboClass", "fillControlMode", "tabOutStrategy", "closeOnOutsideClick"], outputs: ["selectionChange", "cleared", "openChange", "dataRequested", "dataReceived"] }, { kind: "component", type: UlvPagingComponent, selector: "bsu-ulv-paging", inputs: ["pagingSetting"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.MoIconPipe, name: "moIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiMoInfoUlvComboComponent, isStandalone: false, selector: "bsu-ui-mo-info-ulv-combo", inputs: { ulvAdapter: "ulvAdapter", Control: "Control", UlvMainCtrlr: "UlvMainCtrlr", UlvUi: "UlvUi", 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)" }, properties: { "attr.dir": "Setting?.IsLtr ? 'ltr' : null" } }, viewQueries: [{ propertyName: "comboRef", first: true, predicate: FundamentalComboComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        comboTemplate;\r\n        context: {\r\n            disableOrReadonly: disableOrReadonly$ | async,\r\n            disable: disable$ | async,\r\n            readonly: readonly$ | async\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n\r\n<ng-template #btnsTpl let-disableOrReadonly=\"disableOrReadonly\">\r\n    @if( showExtraButtons() && !disableOrReadonly ){\r\n    <div class=\"combo-actions fd-input-group\">\r\n        @if (showClearAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            tabindex=\"-1\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"decline\"\r\n            [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n            [title]=\"'Delete' | bbbTranslate\"\r\n            (click)=\"onClear()\"\r\n        ></button>\r\n        } @if (showNewAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"add\"\r\n            [ariaLabel]=\"'New' | bbbTranslate\"\r\n            [title]=\"'New' | bbbTranslate\"\r\n            (click)=\"onNew()\"\r\n        ></button>\r\n        } @if (showEditAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"edit\"\r\n            [ariaLabel]=\"'Edit' | bbbTranslate\"\r\n            [title]=\"'Edit' | bbbTranslate\"\r\n            (click)=\"onEdit()\"\r\n        ></button>\r\n        } @if (showSearchAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"search\"\r\n            [ariaLabel]=\"'Search' | bbbTranslate\"\r\n            [title]=\"'Search' | bbbTranslate\"\r\n            (click)=\"onSearch()\"\r\n        ></button>\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #comboTemplate let-disableOrReadonly=\"disableOrReadonly\" let-disable=\"disable\" let-readonly=\"readonly\">\r\n    <div\r\n        class=\"simple-combo-wrapper\"\r\n        contentDensity\r\n        [class.one-extra-button]=\"disableOrReadonly !== true && actionButtonCount === 1\"\r\n        [class.two-extra-buttons]=\"disableOrReadonly !== true && actionButtonCount === 2\"\r\n        [class.dropdown-hidden]=\"context._showDropDown === false || disableOrReadonly === true\"\r\n    >\r\n        @if ((loading$ | async) === true && !isDataLoadedFirstTime) {\r\n        <div class=\"combo-loading-mask\">\r\n            <bsu-mask [size]=\"'s'\" [top]=\"'10px'\"></bsu-mask>\r\n        </div>\r\n        } @if (iconMo()) {\r\n        <span class=\"combo-value-icon\" aria-hidden=\"true\">\r\n            <img [src]=\"iconMo()\" loading=\"lazy\" width=\"16\" height=\"16\" alt=\"\" />\r\n        </span>\r\n        }\r\n        <bsu-fundamental-combo\r\n            #fdCombobox\r\n            [comboClass]=\"{\r\n                'combo-mo-ulv': true,\r\n                'has-value-icon': !!iconMo(),\r\n                canAdd: !hasValue && disableOrReadonly !== true && Setting.ShowNewButton,\r\n                canEdit: hasValue && disableOrReadonly !== true,\r\n                disableorreadonly: disableOrReadonly === true,\r\n                'hide-dropdown-button': context._showDropDown === false || disableOrReadonly === true,\r\n                showExtraButtons: disableOrReadonly !== true && showExtraButtons(),\r\n                'has-Value': hasValue\r\n            }\"\r\n            [placeholder]=\"'Select' | bbbTranslate\"\r\n            [id]=\"id\"\r\n            [mobile]=\"false\"\r\n            [mobileConfig]=\"mobileConfig\"\r\n            [tabOutStrategy]=\"'close'\"\r\n            [readonly]=\"readonly === true\"\r\n            [disabled]=\"disable === true\"\r\n            [dataSource]=\"comboDataSource\"\r\n            [lookupKey]=\"'Id'\"\r\n            [displayKey]=\"'$__displayCaption'\"\r\n            [value]=\"value\"\r\n            [byline]=\"allColumns.length > 0\"\r\n            [fillControlMode]=\"'equal'\"\r\n            [closeOnOutsideClick]=\"true\"\r\n            (selectionChange)=\"onComboSelectionChange($event)\"\r\n            (cleared)=\"onComboCleared()\"\r\n            (openChange)=\"onComboOpenChange($event)\"\r\n            (dataRequested)=\"onComboDataRequested()\"\r\n            (dataReceived)=\"onComboDataReceived()\"\r\n            [itemTemplate]=\"comboItemTpl\"\r\n        >\r\n            <!-- \u0641\u0648\u062A\u0631\u0650 \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC \u0627\u0632 \u0637\u0631\u06CC\u0642 <ng-content>\u0650 wrapper \u0628\u0647 \u0644\u06CC\u0633\u062A\u0650 fdp \u062A\u0632\u0631\u06CC\u0642 \u0645\u06CC\u200C\u0634\u0648\u062F. -->\r\n            @if (ulvPagingSetting; as pagingSetting) { @if (pagingSetting.HasPaging && pagingSetting.TotalPages > 1) {\r\n            <li class=\"combo-paging-footer\" role=\"presentation\">\r\n                <bsu-ulv-paging [pagingSetting]=\"pagingSetting\" (pageChange)=\"onPageChange($event)\"></bsu-ulv-paging>\r\n            </li>\r\n            } }\r\n        </bsu-fundamental-combo>\r\n        <!--\r\n            \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 \u0622\u06CC\u062A\u0645 \u0631\u0627 \u0628\u0647\u200C\u0635\u0648\u0631\u062A \u0646\u0627\u0645\u200C\u062F\u0627\u0631 \u0628\u0647 [itemTemplate] \u0645\u06CC\u200C\u062F\u0647\u06CC\u0645\u061B wrapper \u062E\u0648\u062F\u0634 directive\u0650\r\n            fdpComboboxItem \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u0648 \u0627\u06CC\u0646 \u062A\u0645\u067E\u0644\u06CC\u062A \u0631\u0627 \u0631\u0646\u062F\u0631 \u0645\u06CC\u200C\u06A9\u0646\u062F (projection \u0645\u0633\u062A\u0642\u06CC\u0645\u0650 fdpComboboxItem\r\n            \u0627\u0632 \u062F\u0627\u062E\u0644\u0650 <ng-content> \u062A\u0648\u0633\u0637\u0650 ContentChildren\u0650 fdp \u062F\u06CC\u062F\u0647 \u0646\u0645\u06CC\u200C\u0634\u0648\u062F).\r\n        -->\r\n        <ng-template #comboItemTpl let-item>\r\n            <span fd-list-thumbnail class=\"!tw-w-auto tw-me-[0.2rem]\">\r\n                <img\r\n                    [src]=\"item | moIcon: UlvMainCtrlr?.Ac?.Setting\"\r\n                    loading=\"lazy\"\r\n                    width=\"16px\"\r\n                    height=\"16px\"\r\n                    alt=\"object icon\"\r\n            /></span>\r\n            @if (allColumns?.length) { @if (getReportOptionView(item); as reportOption) {\r\n            <div fd-list-content data-report-option>\r\n                <h6\r\n                    fd-title\r\n                    [headerSize]=\"6\"\r\n                    [wrap]=\"true\"\r\n                    [attr.dir]=\"reportOption.primary.column?.IsLtr ? 'ltr' : null\"\r\n                    [title]=\"reportOption.primary.value\"\r\n                >\r\n                    {{ reportOption.primary.value }}\r\n                </h6>\r\n                @if (reportOption.secondary; as secondary) {\r\n                <div\r\n                    fd-list-title\r\n                    [wrap]=\"true\"\r\n                    [attr.dir]=\"secondary.column?.IsLtr ? 'ltr' : null\"\r\n                    [title]=\"secondary.value\"\r\n                >\r\n                    {{ secondary.value }}\r\n                </div>\r\n                } @if (reportOption.details.length) {\r\n                <div style=\"display: flex; column-gap: 8px; flex-wrap: wrap\">\r\n                    @for (field of reportOption.details; track field.column?.Name) {\r\n                    <span\r\n                        class=\"tw-flex tw-justify-start\"\r\n                        [attr.dir]=\"field.column?.IsLtr ? 'ltr' : null\"\r\n                        [title]=\"field.value\"\r\n                    >\r\n                        <span class=\"!tw-w-auto fd-form-label\">\r\n                            {{ field.column?.Caption || field.column?.Alias | bbbTranslate }}:</span\r\n                        >\r\n                        <span class=\"!tw-w-auto\">{{ field.value }}</span>\r\n                    </span>\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n            } } @else {\r\n            <span fd-list-title>\r\n                {{ item.$MoCaption || item.$Caption | bbbTranslate }}\r\n            </span>\r\n            }\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"btnsTpl; context: { disableOrReadonly: disableOrReadonly }\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block}.combo-mo-ulv{display:block;width:100%}.combo-mo-ulv ::ng-deep .fd-popover-custom{width:100%}.simple-combo-wrapper{--combo-control-height: var(--sapElement_Height, 2.75rem);--combo-dropdown-width: 2.25rem;--combo-value-icon-width: 1.75rem;display:block;width:100%;position:relative}.simple-combo-wrapper.is-compact,.simple-combo-wrapper.is-condensed{--combo-control-height: var(--sapElement_Compact_Height, 2rem);--combo-dropdown-width: 2rem}.simple-combo-wrapper.one-extra-button ::ng-deep .combo-mo-ulv.showExtraButtons:not(.disableorreadonly) .fd-input-group__input{padding-inline-end:calc(var(--fdInput_Group_Addon_Width, 2.25rem) + .25rem)}.simple-combo-wrapper.two-extra-buttons ::ng-deep .combo-mo-ulv.showExtraButtons:not(.disableorreadonly) .fd-input-group__input{padding-inline-end:calc(var(--fdInput_Group_Addon_Width, 2.25rem) + var(--fdInput_Group_Addon_Width, 2.25rem) + .25rem)}.simple-combo-wrapper.dropdown-hidden{--combo-dropdown-width: 0rem}.simple-combo-wrapper ::ng-deep .combo-mo-ulv.hide-dropdown-button .fd-input-group__addon--button{display:none}.simple-combo-wrapper ::ng-deep .combo-mo-ulv.has-value-icon .fd-input-group__input{padding-inline-start:var(--combo-value-icon-width, 1.75rem)}.combo-value-icon{position:absolute;inset-block-start:2px;inset-inline-start:0;z-index:6;display:flex;align-items:center;justify-content:center;width:var(--combo-value-icon-width, 1.75rem);height:var(--combo-control-height);pointer-events:none}.combo-value-icon img{width:1rem;height:1rem;object-fit:contain}.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 .fdp-combobox__count-list-results{display:none}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer){display:flex!important;flex-direction:column}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.fd-list__item{flex:0 0 auto}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.combo-paging-footer{order:1}::ng-deep .fdp-combobox__list:has([data-report-option])>.fd-list__item:has([data-report-option]){border-block-end:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.combo-loading-mask{position:absolute;inset:0;z-index:8}.combo-paging-footer{position:sticky;inset-block-end:0;z-index:1;order:1;flex:0 0 auto;box-sizing:border-box;width:100%;padding-block:.25rem;overflow-x:auto;list-style:none;border-block-start:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9);background:var(--sapList_Background, var(--sapGroup_ContentBackground, #fff))}.combo-actions{position:absolute;inset-block-start:0;inset-inline-end:var(--combo-dropdown-width);z-index:7;display:flex;align-items:stretch;width:auto;min-width:0;height:var(--combo-control-height);overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.combo-actions .combo-action-button{width:auto;height:100%;border-radius:0}@media(hover:hover)and (pointer:fine){.combo-actions{opacity:0;pointer-events:none;transform:translateY(.125rem);transition:opacity .18s ease-out,transform .18s ease-out}.simple-combo-wrapper:hover .combo-actions,.simple-combo-wrapper:focus-within .combo-actions{opacity:1;pointer-events:auto;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.combo-actions{transform:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: FundamentalComboComponent, selector: "bsu-fundamental-combo", inputs: ["dataSource", "value", "displayKey", "lookupKey", "byline", "placeholder", "disabled", "readonly", "mobile", "mobileConfig", "isLtr", "id", "showDropdownButton", "itemTemplate", "allowFreeText", "width", "comboClass", "fillControlMode", "tabOutStrategy", "closeOnOutsideClick"], outputs: ["selectionChange", "cleared", "openChange", "dataRequested", "dataReceived"] }, { kind: "component", type: UlvPagingComponent, selector: "bsu-ulv-paging", inputs: ["pagingSetting"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.MoIconPipe, name: "moIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiMoInfoUlvComboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-mo-info-ulv-combo', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.dir]': "Setting?.IsLtr ? 'ltr' : null"
-                    }, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        comboTemplate;\r\n        context: {\r\n            disableOrReadonly: disableOrReadonly$ | async,\r\n            disable: disable$ | async,\r\n            readonly: readonly$ | async\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n\r\n<ng-template #btnsTpl let-disableOrReadonly=\"disableOrReadonly\">\r\n    @if( showExtraButtons() && !disableOrReadonly ){\r\n    <div class=\"combo-actions fd-input-group\">\r\n        @if (showClearAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            tabindex=\"-1\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"decline\"\r\n            [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n            [title]=\"'Delete' | bbbTranslate\"\r\n            (click)=\"onClear()\"\r\n        ></button>\r\n        } @if (showNewAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"add\"\r\n            [ariaLabel]=\"'New' | bbbTranslate\"\r\n            [title]=\"'New' | bbbTranslate\"\r\n            (click)=\"onNew()\"\r\n        ></button>\r\n        } @if (showEditAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"edit\"\r\n            [ariaLabel]=\"'Edit' | bbbTranslate\"\r\n            [title]=\"'Edit' | bbbTranslate\"\r\n            (click)=\"onEdit()\"\r\n        ></button>\r\n        } @if (showSearchAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"search\"\r\n            [ariaLabel]=\"'Search' | bbbTranslate\"\r\n            [title]=\"'Search' | bbbTranslate\"\r\n            (click)=\"onSearch()\"\r\n        ></button>\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #comboTemplate let-disableOrReadonly=\"disableOrReadonly\" let-disable=\"disable\" let-readonly=\"readonly\">\r\n    <div\r\n        class=\"simple-combo-wrapper\"\r\n        contentDensity\r\n        [class.one-extra-button]=\"disableOrReadonly !== true && actionButtonCount === 1\"\r\n        [class.two-extra-buttons]=\"disableOrReadonly !== true && actionButtonCount === 2\"\r\n        [class.dropdown-hidden]=\"context._showDropDown === false || disableOrReadonly === true\"\r\n    >\r\n        @if ((loading$ | async) === true && !isDataLoadedFirstTime) {\r\n        <div class=\"combo-loading-mask\">\r\n            <bsu-mask [size]=\"'s'\" [top]=\"'10px'\"></bsu-mask>\r\n        </div>\r\n        }\r\n        @if (iconMo()) {\r\n        <span class=\"combo-value-icon\" aria-hidden=\"true\">\r\n            <img [src]=\"iconMo()\" loading=\"lazy\" width=\"16\" height=\"16\" alt=\"\" />\r\n        </span>\r\n        }\r\n        <bsu-fundamental-combo\r\n            #fdCombobox\r\n            [comboClass]=\"{\r\n                'combo-mo-ulv': true,\r\n                'has-value-icon': !!iconMo(),\r\n                canAdd: !hasValue && disableOrReadonly !== true && Setting.ShowNewButton,\r\n                canEdit: hasValue && disableOrReadonly !== true,\r\n                disableorreadonly: disableOrReadonly === true,\r\n                'hide-dropdown-button': context._showDropDown === false || disableOrReadonly === true,\r\n                showExtraButtons: disableOrReadonly !== true && showExtraButtons(),\r\n                'has-Value': hasValue\r\n            }\"\r\n            [placeholder]=\"'Select' | bbbTranslate\"\r\n            [mobile]=\"false\"\r\n            [mobileConfig]=\"mobileConfig\"\r\n            [tabOutStrategy]=\"'close'\"\r\n            [readonly]=\"readonly === true\"\r\n            [disabled]=\"disable === true\"\r\n            [dataSource]=\"comboDataSource\"\r\n            [lookupKey]=\"'Id'\"\r\n            [displayKey]=\"'$__displayCaption'\"\r\n            [value]=\"value\"\r\n            [byline]=\"allColumns.length > 0\"\r\n            [fillControlMode]=\"'equal'\"\r\n            [closeOnOutsideClick]=\"true\"\r\n            (selectionChange)=\"onComboSelectionChange($event)\"\r\n            (cleared)=\"onComboCleared()\"\r\n            (openChange)=\"onComboOpenChange($event)\"\r\n            (dataRequested)=\"onComboDataRequested()\"\r\n            (dataReceived)=\"onComboDataReceived()\"\r\n            [itemTemplate]=\"comboItemTpl\"\r\n        >\r\n            <!-- \u0641\u0648\u062A\u0631\u0650 \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC \u0627\u0632 \u0637\u0631\u06CC\u0642 <ng-content>\u0650 wrapper \u0628\u0647 \u0644\u06CC\u0633\u062A\u0650 fdp \u062A\u0632\u0631\u06CC\u0642 \u0645\u06CC\u200C\u0634\u0648\u062F. -->\r\n            @if (ulvPagingSetting; as pagingSetting) { @if (pagingSetting.HasPaging && pagingSetting.TotalPages > 1) {\r\n            <li class=\"combo-paging-footer\" role=\"presentation\">\r\n                <bsu-ulv-paging [pagingSetting]=\"pagingSetting\" (pageChange)=\"onPageChange($event)\"></bsu-ulv-paging>\r\n            </li>\r\n            } }\r\n        </bsu-fundamental-combo>\r\n        <!--\r\n            \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 \u0622\u06CC\u062A\u0645 \u0631\u0627 \u0628\u0647\u200C\u0635\u0648\u0631\u062A \u0646\u0627\u0645\u200C\u062F\u0627\u0631 \u0628\u0647 [itemTemplate] \u0645\u06CC\u200C\u062F\u0647\u06CC\u0645\u061B wrapper \u062E\u0648\u062F\u0634 directive\u0650\r\n            fdpComboboxItem \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u0648 \u0627\u06CC\u0646 \u062A\u0645\u067E\u0644\u06CC\u062A \u0631\u0627 \u0631\u0646\u062F\u0631 \u0645\u06CC\u200C\u06A9\u0646\u062F (projection \u0645\u0633\u062A\u0642\u06CC\u0645\u0650 fdpComboboxItem\r\n            \u0627\u0632 \u062F\u0627\u062E\u0644\u0650 <ng-content> \u062A\u0648\u0633\u0637\u0650 ContentChildren\u0650 fdp \u062F\u06CC\u062F\u0647 \u0646\u0645\u06CC\u200C\u0634\u0648\u062F).\r\n        -->\r\n        <ng-template #comboItemTpl let-item>\r\n            <span fd-list-thumbnail class=\"!tw-w-auto tw-me-[0.2rem]\">\r\n                <img [src]=\"item | moIcon: UlvMainCtrlr?.Ac?.Setting\" loading=\"lazy\" width=\"16px\" height=\"16px\" alt=\"object icon\"\r\n            /></span>\r\n            @if (allColumns?.length) { @if (getReportOptionView(item); as reportOption) {\r\n                <div fd-list-content data-report-option>\r\n                    <h6\r\n                        fd-title\r\n                        [headerSize]=\"6\"\r\n                        [wrap]=\"true\"\r\n                        [attr.dir]=\"reportOption.primary.column?.IsLtr ? 'ltr' : null\"\r\n                        [title]=\"reportOption.primary.value\"\r\n                    >\r\n                        {{ reportOption.primary.value }}\r\n                    </h6>\r\n                    @if (reportOption.secondary; as secondary) {\r\n                    <div\r\n                        fd-list-title\r\n                        [wrap]=\"true\"\r\n                        [attr.dir]=\"secondary.column?.IsLtr ? 'ltr' : null\"\r\n                        [title]=\"secondary.value\"\r\n                    >\r\n                        {{ secondary.value }}\r\n                    </div>\r\n                    } @if (reportOption.details.length) {\r\n                    <fd-layout-grid [noHorizontalGap]=\"true\">\r\n                        <div fdLayoutGridRow [style.min-width.%]=\"100\">\r\n                            @for (field of reportOption.details; track field.column?.Name) {\r\n                            <div [fdLayoutGridCol]=\"12\" [colMd]=\"6\">\r\n                                <div fd-form-item [horizontal]=\"true\">\r\n                                    <label\r\n                                        fd-form-label\r\n                                        [colon]=\"true\"\r\n                                        [title]=\"field.column?.Caption || field.column?.Alias\"\r\n                                    >\r\n                                        {{ field.column?.Caption || field.column?.Alias | bbbTranslate }}\r\n                                    </label>\r\n                                    <div\r\n                                        fd-list-title\r\n                                        [wrap]=\"true\"\r\n                                        [attr.dir]=\"field.column?.IsLtr ? 'ltr' : null\"\r\n                                        [title]=\"field.value\"\r\n                                    >\r\n                                        {{ field.value }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            }\r\n                        </div>\r\n                    </fd-layout-grid>\r\n                    }\r\n                </div>\r\n                } } @else {\r\n                <span fd-list-title>\r\n                    {{ item.$MoCaption || item.$Caption | bbbTranslate }}\r\n                </span>\r\n                }\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"btnsTpl; context: { disableOrReadonly: disableOrReadonly }\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block}.combo-mo-ulv{display:block;width:100%}.combo-mo-ulv ::ng-deep .fd-popover-custom{width:100%}.simple-combo-wrapper{--combo-control-height: var(--sapElement_Height, 2.75rem);--combo-dropdown-width: 2.25rem;--combo-value-icon-width: 1.75rem;display:block;width:100%;position:relative}.simple-combo-wrapper.is-compact,.simple-combo-wrapper.is-condensed{--combo-control-height: var(--sapElement_Compact_Height, 2rem);--combo-dropdown-width: 2rem}.simple-combo-wrapper.one-extra-button ::ng-deep .combo-mo-ulv.showExtraButtons:not(.disableorreadonly) .fd-input-group__input{padding-inline-end:calc(var(--fdInput_Group_Addon_Width, 2.25rem) + .25rem)}.simple-combo-wrapper.two-extra-buttons ::ng-deep .combo-mo-ulv.showExtraButtons:not(.disableorreadonly) .fd-input-group__input{padding-inline-end:calc(var(--fdInput_Group_Addon_Width, 2.25rem) + var(--fdInput_Group_Addon_Width, 2.25rem) + .25rem)}.simple-combo-wrapper.dropdown-hidden{--combo-dropdown-width: 0rem}.simple-combo-wrapper ::ng-deep .combo-mo-ulv.hide-dropdown-button .fd-input-group__addon--button{display:none}.simple-combo-wrapper ::ng-deep .combo-mo-ulv.has-value-icon .fd-input-group__input{padding-inline-start:var(--combo-value-icon-width, 1.75rem)}.combo-value-icon{position:absolute;inset-block-start:2px;inset-inline-start:0;z-index:6;display:flex;align-items:center;justify-content:center;width:var(--combo-value-icon-width, 1.75rem);height:var(--combo-control-height);pointer-events:none}.combo-value-icon img{width:1rem;height:1rem;object-fit:contain}.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 .fdp-combobox__count-list-results{display:none}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer){display:flex!important;flex-direction:column}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.fd-list__item{flex:0 0 auto}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.combo-paging-footer{order:1}::ng-deep .fdp-combobox__list:has([data-report-option])>.fd-list__item:has([data-report-option]){border-block-end:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.combo-loading-mask{position:absolute;inset:0;z-index:8}.combo-paging-footer{position:sticky;inset-block-end:0;z-index:1;order:1;flex:0 0 auto;box-sizing:border-box;width:100%;padding-block:.25rem;overflow-x:auto;list-style:none;border-block-start:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9);background:var(--sapList_Background, var(--sapGroup_ContentBackground, #fff))}.combo-actions{position:absolute;inset-block-start:0;inset-inline-end:var(--combo-dropdown-width);z-index:7;display:flex;align-items:stretch;width:auto;min-width:0;height:var(--combo-control-height);overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.combo-actions .combo-action-button{width:auto;height:100%;border-radius:0}@media(hover:hover)and (pointer:fine){.combo-actions{opacity:0;pointer-events:none;transform:translateY(.125rem);transition:opacity .18s ease-out,transform .18s ease-out}.simple-combo-wrapper:hover .combo-actions,.simple-combo-wrapper:focus-within .combo-actions{opacity:1;pointer-events:auto;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.combo-actions{transform:none;transition:none}}\n"] }]
+                    }, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"\r\n        comboTemplate;\r\n        context: {\r\n            disableOrReadonly: disableOrReadonly$ | async,\r\n            disable: disable$ | async,\r\n            readonly: readonly$ | async\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n\r\n<ng-template #btnsTpl let-disableOrReadonly=\"disableOrReadonly\">\r\n    @if( showExtraButtons() && !disableOrReadonly ){\r\n    <div class=\"combo-actions fd-input-group\">\r\n        @if (showClearAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            tabindex=\"-1\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"decline\"\r\n            [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n            [title]=\"'Delete' | bbbTranslate\"\r\n            (click)=\"onClear()\"\r\n        ></button>\r\n        } @if (showNewAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"add\"\r\n            [ariaLabel]=\"'New' | bbbTranslate\"\r\n            [title]=\"'New' | bbbTranslate\"\r\n            (click)=\"onNew()\"\r\n        ></button>\r\n        } @if (showEditAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"edit\"\r\n            [ariaLabel]=\"'Edit' | bbbTranslate\"\r\n            [title]=\"'Edit' | bbbTranslate\"\r\n            (click)=\"onEdit()\"\r\n        ></button>\r\n        } @if (showSearchAction) {\r\n        <button\r\n            class=\"combo-action-button fd-input-group__button\"\r\n            type=\"button\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            glyph=\"search\"\r\n            [ariaLabel]=\"'Search' | bbbTranslate\"\r\n            [title]=\"'Search' | bbbTranslate\"\r\n            (click)=\"onSearch()\"\r\n        ></button>\r\n        }\r\n    </div>\r\n    }\r\n</ng-template>\r\n<ng-template #comboTemplate let-disableOrReadonly=\"disableOrReadonly\" let-disable=\"disable\" let-readonly=\"readonly\">\r\n    <div\r\n        class=\"simple-combo-wrapper\"\r\n        contentDensity\r\n        [class.one-extra-button]=\"disableOrReadonly !== true && actionButtonCount === 1\"\r\n        [class.two-extra-buttons]=\"disableOrReadonly !== true && actionButtonCount === 2\"\r\n        [class.dropdown-hidden]=\"context._showDropDown === false || disableOrReadonly === true\"\r\n    >\r\n        @if ((loading$ | async) === true && !isDataLoadedFirstTime) {\r\n        <div class=\"combo-loading-mask\">\r\n            <bsu-mask [size]=\"'s'\" [top]=\"'10px'\"></bsu-mask>\r\n        </div>\r\n        } @if (iconMo()) {\r\n        <span class=\"combo-value-icon\" aria-hidden=\"true\">\r\n            <img [src]=\"iconMo()\" loading=\"lazy\" width=\"16\" height=\"16\" alt=\"\" />\r\n        </span>\r\n        }\r\n        <bsu-fundamental-combo\r\n            #fdCombobox\r\n            [comboClass]=\"{\r\n                'combo-mo-ulv': true,\r\n                'has-value-icon': !!iconMo(),\r\n                canAdd: !hasValue && disableOrReadonly !== true && Setting.ShowNewButton,\r\n                canEdit: hasValue && disableOrReadonly !== true,\r\n                disableorreadonly: disableOrReadonly === true,\r\n                'hide-dropdown-button': context._showDropDown === false || disableOrReadonly === true,\r\n                showExtraButtons: disableOrReadonly !== true && showExtraButtons(),\r\n                'has-Value': hasValue\r\n            }\"\r\n            [placeholder]=\"'Select' | bbbTranslate\"\r\n            [id]=\"id\"\r\n            [mobile]=\"false\"\r\n            [mobileConfig]=\"mobileConfig\"\r\n            [tabOutStrategy]=\"'close'\"\r\n            [readonly]=\"readonly === true\"\r\n            [disabled]=\"disable === true\"\r\n            [dataSource]=\"comboDataSource\"\r\n            [lookupKey]=\"'Id'\"\r\n            [displayKey]=\"'$__displayCaption'\"\r\n            [value]=\"value\"\r\n            [byline]=\"allColumns.length > 0\"\r\n            [fillControlMode]=\"'equal'\"\r\n            [closeOnOutsideClick]=\"true\"\r\n            (selectionChange)=\"onComboSelectionChange($event)\"\r\n            (cleared)=\"onComboCleared()\"\r\n            (openChange)=\"onComboOpenChange($event)\"\r\n            (dataRequested)=\"onComboDataRequested()\"\r\n            (dataReceived)=\"onComboDataReceived()\"\r\n            [itemTemplate]=\"comboItemTpl\"\r\n        >\r\n            <!-- \u0641\u0648\u062A\u0631\u0650 \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC \u0627\u0632 \u0637\u0631\u06CC\u0642 <ng-content>\u0650 wrapper \u0628\u0647 \u0644\u06CC\u0633\u062A\u0650 fdp \u062A\u0632\u0631\u06CC\u0642 \u0645\u06CC\u200C\u0634\u0648\u062F. -->\r\n            @if (ulvPagingSetting; as pagingSetting) { @if (pagingSetting.HasPaging && pagingSetting.TotalPages > 1) {\r\n            <li class=\"combo-paging-footer\" role=\"presentation\">\r\n                <bsu-ulv-paging [pagingSetting]=\"pagingSetting\" (pageChange)=\"onPageChange($event)\"></bsu-ulv-paging>\r\n            </li>\r\n            } }\r\n        </bsu-fundamental-combo>\r\n        <!--\r\n            \u062A\u0645\u067E\u0644\u06CC\u062A\u0650 \u0622\u06CC\u062A\u0645 \u0631\u0627 \u0628\u0647\u200C\u0635\u0648\u0631\u062A \u0646\u0627\u0645\u200C\u062F\u0627\u0631 \u0628\u0647 [itemTemplate] \u0645\u06CC\u200C\u062F\u0647\u06CC\u0645\u061B wrapper \u062E\u0648\u062F\u0634 directive\u0650\r\n            fdpComboboxItem \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u0648 \u0627\u06CC\u0646 \u062A\u0645\u067E\u0644\u06CC\u062A \u0631\u0627 \u0631\u0646\u062F\u0631 \u0645\u06CC\u200C\u06A9\u0646\u062F (projection \u0645\u0633\u062A\u0642\u06CC\u0645\u0650 fdpComboboxItem\r\n            \u0627\u0632 \u062F\u0627\u062E\u0644\u0650 <ng-content> \u062A\u0648\u0633\u0637\u0650 ContentChildren\u0650 fdp \u062F\u06CC\u062F\u0647 \u0646\u0645\u06CC\u200C\u0634\u0648\u062F).\r\n        -->\r\n        <ng-template #comboItemTpl let-item>\r\n            <span fd-list-thumbnail class=\"!tw-w-auto tw-me-[0.2rem]\">\r\n                <img\r\n                    [src]=\"item | moIcon: UlvMainCtrlr?.Ac?.Setting\"\r\n                    loading=\"lazy\"\r\n                    width=\"16px\"\r\n                    height=\"16px\"\r\n                    alt=\"object icon\"\r\n            /></span>\r\n            @if (allColumns?.length) { @if (getReportOptionView(item); as reportOption) {\r\n            <div fd-list-content data-report-option>\r\n                <h6\r\n                    fd-title\r\n                    [headerSize]=\"6\"\r\n                    [wrap]=\"true\"\r\n                    [attr.dir]=\"reportOption.primary.column?.IsLtr ? 'ltr' : null\"\r\n                    [title]=\"reportOption.primary.value\"\r\n                >\r\n                    {{ reportOption.primary.value }}\r\n                </h6>\r\n                @if (reportOption.secondary; as secondary) {\r\n                <div\r\n                    fd-list-title\r\n                    [wrap]=\"true\"\r\n                    [attr.dir]=\"secondary.column?.IsLtr ? 'ltr' : null\"\r\n                    [title]=\"secondary.value\"\r\n                >\r\n                    {{ secondary.value }}\r\n                </div>\r\n                } @if (reportOption.details.length) {\r\n                <div style=\"display: flex; column-gap: 8px; flex-wrap: wrap\">\r\n                    @for (field of reportOption.details; track field.column?.Name) {\r\n                    <span\r\n                        class=\"tw-flex tw-justify-start\"\r\n                        [attr.dir]=\"field.column?.IsLtr ? 'ltr' : null\"\r\n                        [title]=\"field.value\"\r\n                    >\r\n                        <span class=\"!tw-w-auto fd-form-label\">\r\n                            {{ field.column?.Caption || field.column?.Alias | bbbTranslate }}:</span\r\n                        >\r\n                        <span class=\"!tw-w-auto\">{{ field.value }}</span>\r\n                    </span>\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n            } } @else {\r\n            <span fd-list-title>\r\n                {{ item.$MoCaption || item.$Caption | bbbTranslate }}\r\n            </span>\r\n            }\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"btnsTpl; context: { disableOrReadonly: disableOrReadonly }\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block}.combo-mo-ulv{display:block;width:100%}.combo-mo-ulv ::ng-deep .fd-popover-custom{width:100%}.simple-combo-wrapper{--combo-control-height: var(--sapElement_Height, 2.75rem);--combo-dropdown-width: 2.25rem;--combo-value-icon-width: 1.75rem;display:block;width:100%;position:relative}.simple-combo-wrapper.is-compact,.simple-combo-wrapper.is-condensed{--combo-control-height: var(--sapElement_Compact_Height, 2rem);--combo-dropdown-width: 2rem}.simple-combo-wrapper.one-extra-button ::ng-deep .combo-mo-ulv.showExtraButtons:not(.disableorreadonly) .fd-input-group__input{padding-inline-end:calc(var(--fdInput_Group_Addon_Width, 2.25rem) + .25rem)}.simple-combo-wrapper.two-extra-buttons ::ng-deep .combo-mo-ulv.showExtraButtons:not(.disableorreadonly) .fd-input-group__input{padding-inline-end:calc(var(--fdInput_Group_Addon_Width, 2.25rem) + var(--fdInput_Group_Addon_Width, 2.25rem) + .25rem)}.simple-combo-wrapper.dropdown-hidden{--combo-dropdown-width: 0rem}.simple-combo-wrapper ::ng-deep .combo-mo-ulv.hide-dropdown-button .fd-input-group__addon--button{display:none}.simple-combo-wrapper ::ng-deep .combo-mo-ulv.has-value-icon .fd-input-group__input{padding-inline-start:var(--combo-value-icon-width, 1.75rem)}.combo-value-icon{position:absolute;inset-block-start:2px;inset-inline-start:0;z-index:6;display:flex;align-items:center;justify-content:center;width:var(--combo-value-icon-width, 1.75rem);height:var(--combo-control-height);pointer-events:none}.combo-value-icon img{width:1rem;height:1rem;object-fit:contain}.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 .fdp-combobox__count-list-results{display:none}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer){display:flex!important;flex-direction:column}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.fd-list__item{flex:0 0 auto}::ng-deep .fdp-combobox__list:has(>.combo-paging-footer)>.combo-paging-footer{order:1}::ng-deep .fdp-combobox__list:has([data-report-option])>.fd-list__item:has([data-report-option]){border-block-end:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.combo-loading-mask{position:absolute;inset:0;z-index:8}.combo-paging-footer{position:sticky;inset-block-end:0;z-index:1;order:1;flex:0 0 auto;box-sizing:border-box;width:100%;padding-block:.25rem;overflow-x:auto;list-style:none;border-block-start:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #d9d9d9);background:var(--sapList_Background, var(--sapGroup_ContentBackground, #fff))}.combo-actions{position:absolute;inset-block-start:0;inset-inline-end:var(--combo-dropdown-width);z-index:7;display:flex;align-items:stretch;width:auto;min-width:0;height:var(--combo-control-height);overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.combo-actions .combo-action-button{width:auto;height:100%;border-radius:0}@media(hover:hover)and (pointer:fine){.combo-actions{opacity:0;pointer-events:none;transform:translateY(.125rem);transition:opacity .18s ease-out,transform .18s ease-out}.simple-combo-wrapper:hover .combo-actions,.simple-combo-wrapper:focus-within .combo-actions{opacity:1;pointer-events:auto;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.combo-actions{transform:none;transition:none}}\n"] }]
         }], propDecorators: { ulvAdapter: [{
                 type: Input
             }], Control: [{
@@ -16038,7 +16103,7 @@ class BarsaPishnamayeshPayamComponent extends FieldBaseComponent {
                 useFactory: getDateService$1,
                 deps: [LogService]
             }
-        ], usesInheritance: true, ngImport: i0, template: "@if (data) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        showPayamClass;\r\n        context: {\r\n            $implicit: data,\r\n            primary: !data?.$details?.length,\r\n            isFirst: true\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n}\r\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            namayeshPayam;\r\n            context: {\r\n                $implicit: data.payam.Subject,\r\n                mailNoText: data.payam.MailNoText,\r\n                fromText: data.payam.FromText,\r\n                toText: data.$toText,\r\n                importance: data.$importance,\r\n                readDate: data.$readDate,\r\n                sendDate: data.$sendDate,\r\n                ccText: data.$ccText,\r\n                bccText: data.$bccText,\r\n                accessLevel: data.$accessLevel,\r\n                content: data.$content,\r\n                fromPhoto: data.$fromPhoto,\r\n                details: data.$details,\r\n                attachments: data.$attachments,\r\n                todo: data.$todo,\r\n                customText: data.payam.CustomText,\r\n                primary: primary,\r\n                isFirst: isFirst\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #namayeshPayam\r\n    let-subject\r\n    let-mailNoText=\"mailNoText\"\r\n    let-content=\"content\"\r\n    let-fromText=\"fromText\"\r\n    let-toText=\"toText\"\r\n    let-importance=\"importance\"\r\n    let-readDate=\"readDate\"\r\n    let-sendDate=\"sendDate\"\r\n    let-ccText=\"ccText\"\r\n    let-bccText=\"bccText\"\r\n    let-fromPhoto=\"fromPhoto\"\r\n    let-details=\"details\"\r\n    let-accessLevel=\"accessLevel\"\r\n    let-primary=\"primary\"\r\n    let-isFirst=\"isFirst\"\r\n    let-attachments=\"attachments\"\r\n    let-todo=\"todo\"\r\n    let-customText=\"customText\"\r\n>\r\n    <fd-card cardType=\"object\" class=\"!tw-mb-2\">\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <fd-avatar\r\n                    [image]=\"fromPhoto\"\r\n                    [circle]=\"true\"\r\n                    size=\"s\"\r\n                    [ariaLabel]=\"fromText\"\r\n                    [label]=\"fromText\"\r\n                    [title]=\"fromText\"\r\n                ></fd-avatar>\r\n                <div fd-card-title class=\"header-fields\">\r\n                    <h5 fd-title>\r\n                        <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\r\n                    </h5>\r\n                    <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\r\n                </div>\r\n                <div fd-card-subtitle>\r\n                    <h5 fd-title>\r\n                        {{ subject }} @if(mailNoText){ <span>({{ mailNoText }})</span>}\r\n                    </h5>\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Recievers' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of toText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    @if(ccText?.length && ccText[0]){\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Cc' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of ccText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if(bccText?.length && bccText[0]){\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Bcc' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of bccText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    }\r\n                </div>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content>\r\n            <fd-panel [expanded]=\"isFirst\">\r\n                <div fd-panel-title>\r\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\r\n                    <div class=\"payamIcons\">\r\n                        @if (importance.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" loading=\"lazy\"/>\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ importance.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (accessLevel.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" loading=\"lazy\"/>\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (todo) {\r\n                        <fd-info-label [label]=\"todo.text\" [color]=\"todo.color\" [title]=\"todo.text\"></fd-info-label>\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <div fd-panel-content>\r\n                    @if (customText) {\r\n                    <div>\r\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\r\n                            {{ customText }}\r\n                        </fd-message-strip>\r\n                    </div>\r\n                    }\r\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\r\n\r\n                    @if (attachments?.length) {\r\n                    <div class=\"file-viewer-attachments\">\r\n                        @for (file of attachments; track file;let index=$index) { @if (!file.IsDeleted) {\r\n                        <bsu-file-viewer-popover\r\n                            [file]=\"file\"\r\n                            [index]=\"index\"\r\n                            [files]=\"attachments\"\r\n                            [deviceSize]=\"(deviceSize$ | async)!!\"\r\n                            [canDownload]=\"true\"\r\n                            [disableRemove]=\"true\"\r\n                        ></bsu-file-viewer-popover>\r\n                        } } @if (attachments.length > 1) {\r\n                        <button\r\n                            fd-button\r\n                            [title]=\"'Download' | bbbTranslate\"\r\n                            [glyph]=\"'download'\"\r\n                            downloadFiles\r\n                            [files]=\"attachments\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                    }\r\n                    <div class=\"readAt\">\r\n                        @if (readDate) {\r\n                        <fd-object-identifier [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\">\r\n                        </fd-object-identifier>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-panel>\r\n        </fd-card-content>\r\n        <!-- <fd-card-footer>\r\n    <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\r\n  </fd-card-footer> -->\r\n    </fd-card>\r\n    @for (detail of details; track detail) {        \r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            showPayamClass;\r\n            context: {\r\n                $implicit: detail\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start;height:auto;max-height:initial}:host ::ng-deep .fd-card__subtitle h5{white-space:initial!important}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}:host ::ng-deep ol{list-style:auto;margin:unset;padding:revert}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media(max-width:410px){h5{max-width:240px}}@media(max-width:1040px){.h5{max-width:600px}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$4.AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$7.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize", "ariaDescribedby"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange", "keyDown"] }, { kind: "component", type: i7$2.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$2.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i7$2.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$2.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i7$2.CardSubtitleDirective, selector: "[fd-card-subtitle]", inputs: ["id"] }, { kind: "component", type: i6$3.InfoLabelComponent, selector: "fd-info-label", inputs: ["type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy", "srText"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["dismissible", "ariaLabelledBy", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i10$2.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["id", "description", "ariaLabel", "bold", "medium"] }, { kind: "component", type: i6$2.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i6$2.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i6$2.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id", "wrap"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "index", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files", "nozip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (data) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        showPayamClass;\r\n        context: {\r\n            $implicit: data,\r\n            primary: !data?.$details?.length,\r\n            isFirst: true\r\n        }\r\n    \"\r\n>\r\n</ng-container>\r\n}\r\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            namayeshPayam;\r\n            context: {\r\n                $implicit: data.payam.Subject,\r\n                mailNoText: data.payam.MailNoText,\r\n                fromText: data.payam.FromText,\r\n                toText: data.$toText,\r\n                importance: data.$importance,\r\n                readDate: data.$readDate,\r\n                sendDate: data.$sendDate,\r\n                ccText: data.$ccText,\r\n                bccText: data.$bccText,\r\n                accessLevel: data.$accessLevel,\r\n                content: data.$content,\r\n                fromPhoto: data.$fromPhoto,\r\n                details: data.$details,\r\n                attachments: data.$attachments,\r\n                todo: data.$todo,\r\n                customText: data.payam.CustomText,\r\n                primary: primary,\r\n                isFirst: isFirst\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #namayeshPayam\r\n    let-subject\r\n    let-mailNoText=\"mailNoText\"\r\n    let-content=\"content\"\r\n    let-fromText=\"fromText\"\r\n    let-toText=\"toText\"\r\n    let-importance=\"importance\"\r\n    let-readDate=\"readDate\"\r\n    let-sendDate=\"sendDate\"\r\n    let-ccText=\"ccText\"\r\n    let-bccText=\"bccText\"\r\n    let-fromPhoto=\"fromPhoto\"\r\n    let-details=\"details\"\r\n    let-accessLevel=\"accessLevel\"\r\n    let-primary=\"primary\"\r\n    let-isFirst=\"isFirst\"\r\n    let-attachments=\"attachments\"\r\n    let-todo=\"todo\"\r\n    let-customText=\"customText\"\r\n>\r\n    <fd-card cardType=\"object\" class=\"!tw-mb-2\">\r\n        <fd-card-header>\r\n            <fd-card-main-header>\r\n                <fd-avatar\r\n                    [image]=\"fromPhoto\"\r\n                    [circle]=\"true\"\r\n                    size=\"s\"\r\n                    [ariaLabel]=\"fromText\"\r\n                    [label]=\"fromText\"\r\n                    [title]=\"fromText\"\r\n                ></fd-avatar>\r\n                <div fd-card-title class=\"header-fields\">\r\n                    <h5 fd-title>\r\n                        <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\r\n                    </h5>\r\n                    <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\r\n                </div>\r\n                <div fd-card-subtitle>\r\n                    <h5 fd-title>\r\n                        {{ subject }} @if(mailNoText){ <span>({{ mailNoText }})</span>}\r\n                    </h5>\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Recievers' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of toText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    @if(ccText?.length && ccText[0]){\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Cc' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of ccText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    } @if(bccText?.length && bccText[0]){\r\n                    <fd-popover>\r\n                        <fd-popover-control>\r\n                            <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">\r\n                                {{ 'Bcc' | bbbTranslate }}\r\n                            </button>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <ul fd-list>\r\n                                @for (rec of bccText; track rec) {\r\n                                <li fd-list-item>\r\n                                    <a fd-list-link>{{ rec }}</a>\r\n                                </li>\r\n                                }\r\n                            </ul>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                    }\r\n                </div>\r\n            </fd-card-main-header>\r\n        </fd-card-header>\r\n        <fd-card-content>\r\n            <fd-panel [expanded]=\"isFirst\">\r\n                <div fd-panel-title>\r\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\r\n                    <div class=\"payamIcons\">\r\n                        @if (importance.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" loading=\"lazy\"/>\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ importance.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (accessLevel.icon) {\r\n                        <fd-popover>\r\n                            <fd-popover-control>\r\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" loading=\"lazy\"/>\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <ul fd-list>\r\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\r\n                                </ul>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                        } @if (todo) {\r\n                        <fd-info-label [label]=\"todo.text\" [color]=\"todo.color\" [title]=\"todo.text\"></fd-info-label>\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <div fd-panel-content>\r\n                    @if (customText) {\r\n                    <div>\r\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\r\n                            {{ customText }}\r\n                        </fd-message-strip>\r\n                    </div>\r\n                    }\r\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\r\n\r\n                    @if (attachments?.length) {\r\n                    <div class=\"file-viewer-attachments\">\r\n                        @for (file of attachments; track file;let index=$index) { @if (!file.IsDeleted) {\r\n                        <bsu-file-viewer-popover\r\n                            [file]=\"file\"\r\n                            [index]=\"index\"\r\n                            [files]=\"attachments\"\r\n                            [deviceSize]=\"(deviceSize$ | async)!!\"\r\n                            [canDownload]=\"true\"\r\n                            [disableRemove]=\"true\"\r\n                        ></bsu-file-viewer-popover>\r\n                        } } @if (attachments.length > 1) {\r\n                        <button\r\n                            fd-button\r\n                            [title]=\"'Download' | bbbTranslate\"\r\n                            [glyph]=\"'download'\"\r\n                            downloadFiles\r\n                            [files]=\"attachments\"\r\n                        ></button>\r\n                        }\r\n                    </div>\r\n                    }\r\n                    <div class=\"readAt\">\r\n                        @if (readDate) {\r\n                        <fd-object-identifier [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\">\r\n                        </fd-object-identifier>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </fd-panel>\r\n        </fd-card-content>\r\n        <!-- <fd-card-footer>\r\n    <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\r\n  </fd-card-footer> -->\r\n    </fd-card>\r\n    @for (detail of details; track detail) {        \r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            showPayamClass;\r\n            context: {\r\n                $implicit: detail\r\n            }\r\n        \"\r\n    >\r\n    </ng-container>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start;height:auto;max-height:initial}:host ::ng-deep .fd-card__subtitle h5{white-space:initial!important}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}:host ::ng-deep ol{list-style:auto;margin:unset;padding:revert}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media(max-width:410px){h5{max-width:240px}}@media(max-width:1040px){.h5{max-width:600px}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$4.AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i7$2.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize", "ariaDescribedby"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange", "keyDown"] }, { kind: "component", type: i7$2.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i7$2.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i7$2.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$2.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i7$2.CardSubtitleDirective, selector: "[fd-card-subtitle]", inputs: ["id"] }, { kind: "component", type: i6$3.InfoLabelComponent, selector: "fd-info-label", inputs: ["type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy", "srText"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["dismissible", "ariaLabelledBy", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i10$2.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["id", "description", "ariaLabel", "bold", "medium"] }, { kind: "component", type: i6$2.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: i6$2.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "directive", type: i6$2.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id", "wrap"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "index", "deviceSize", "canDownload", "disableRemove", "fdType", "attachmentViewType"], outputs: ["remove"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files", "nozip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaPishnamayeshPayamComponent, decorators: [{
             type: Component,
@@ -16216,7 +16281,7 @@ class BarsaLinkableItemsPanelComponent extends LayoutPanelBaseComponent {
         this.hideControls = this.hideControls.filter((c) => c.Caption !== item.Caption);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaLinkableItemsPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaLinkableItemsPanelComponent, isStandalone: false, selector: "bsu-barsa-linkable-items-panel", providers: [LayoutService], usesInheritance: true, ngImport: i0, template: "@for (item of visibleControls; track item; let i = $index) {\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            index: i\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n<ng-template\r\n    #dynamicLayout\r\n    let-index\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]=\"config.Bounds.width\"\r\n        [isSearchPanel]=\"isSearchPanel\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n<div style=\"display: flex; column-gap: 3px; padding: 0 5px\">\r\n    @for (item of hideControls; track item; let i = $index) {\r\n    <a fd-link [attr.aria-label]=\"item.Caption\" (click)=\"onAddToVisibleControls(item)\"> {{ item.Caption }}</a>\r\n    @if (i < hideControls.length - 1) {\r\n    <span>/</span>\r\n    } }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "component", type: i2$7.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaLinkableItemsPanelComponent, isStandalone: false, selector: "bsu-barsa-linkable-items-panel", providers: [LayoutService], usesInheritance: true, ngImport: i0, template: "@for (item of visibleControls; track item; let i = $index) {\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            index: i\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n<ng-template\r\n    #dynamicLayout\r\n    let-index\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]=\"config.Bounds.width\"\r\n        [isSearchPanel]=\"isSearchPanel\"\r\n    >\r\n    </bnrc-dynamic-layout>\r\n</ng-template>\r\n<div style=\"display: flex; column-gap: 3px; padding: 0 5px\">\r\n    @for (item of hideControls; track item; let i = $index) {\r\n    <a fd-link [attr.aria-label]=\"item.Caption\" (click)=\"onAddToVisibleControls(item)\"> {{ item.Caption }}</a>\r\n    @if (i < hideControls.length - 1) {\r\n    <span>/</span>\r\n    } }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicLayoutComponent, selector: "bnrc-dynamic-layout", inputs: ["selector", "module", "name", "parameters", "moduleFileName", "flex", "config", "maxLabelWidth", "hasHorizontalText", "isSearchPanel"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaLinkableItemsPanelComponent, decorators: [{
             type: Component,
@@ -16874,7 +16939,7 @@ class BarsaQuestionPostComponent extends BaseViewItemPropsComponent {
         this.events.emit({ title: 'rowClick', data: { mo: this.mo, index: this.index } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaQuestionPostComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaQuestionPostComponent, isStandalone: false, selector: "bsu-barsa-question-post", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-w-full tw-flex tw-items-start tw-gap-2 tw-pt-8\">\r\n    @if (!isMobile) {\r\n    <div class=\"tw-shrink-0 tw-grow-0 tw-w-12\">\r\n        <div class=\"tw-size-10 tw-rounded-full tw-bg-gray-500 tw-overflow-hidden\">\r\n            <img src=\"https://picsum.photos/50/50?x={{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\" class=\"tw-full h-full\" loading=\"lazy\"/>\r\n        </div>\r\n    </div>\r\n    } @if (isMobile) {\r\n    <div\r\n        class=\"tw-shrink-0 tw-grow-0 tw-py-1 tw-text-center tw-w-10 tw-border tw-rounded-md\"\r\n        [ngClass]=\"{\r\n            'tw-border-gray-500 tw-text-gray-500': mo.F4 === '0',\r\n            'tw-border-green-600 tw-text-green-600': mo.F4 !== '0',\r\n            'tw-bg-green-600 tw-text-white': !!('\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns:true)\r\n        }\"\r\n    >\r\n        {{ mo.TotalVotes$Caption }}\r\n    </div>\r\n    }\r\n    <div class=\"tw-grow tw-shrink tw-flex tw-flex-col tw-gap-2\">\r\n        <div class=\"tw-w-full tw-flex tw-justify-between\">\r\n            <div class=\"tw-grow tw-flex tw-flex-col tw-gap-1\">\r\n                <span class=\"!tw-text-[.75rem]\">\r\n                    <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                    \u067E\u0631\u0633\u06CC\u062F\u0647 \u0627\u0633\u062A\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0627\u06CC\u062C\u0627\u062F' | rval: mo:allColumns:true }}\r\n                </span>\r\n                <a\r\n                    fd-link\r\n                    aria-label=\"Standard\"\r\n                    (click)=\"onRowClick()\"\r\n                    class=\"!tw-text-[1rem] hover:tw-cursor-pointer !tw-no-underline tw-transition-all\"\r\n                >\r\n                    {{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\r\n                    @if (mo.IsClosed) {\r\n                    <span class=\"tw-black tw-text-sm tw-ms-1\">[\u0628\u0633\u062A\u0647 \u0634\u062F\u0647]</span>\r\n                    }\r\n                </a>\r\n                <div class=\"!tw-text-[.75rem] tw-flex tw-gap-2\">\r\n                    <span>\r\n                        <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                        \u0648\u06CC\u0631\u0627\u06CC\u0634 \u06A9\u0631\u062F\u0647 \u0627\u0633\u062A\r\n                    </span>\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0622\u062E\u0631\u06CC\u0646 \u062A\u063A\u06CC\u06CC\u0631' | rval: mo:allColumns:true }}\r\n                </div>\r\n                @if (!isMobile && mo.Tags.MoDataList.length) {\r\n                <div class=\"tw-text-small tw-flex tw-gap-2 tw-flex-wrap\">\r\n                    @for (tag of mo.Tags.MoDataList; track tag; let last = $last) {\r\n                    <a\r\n                        class=\"tw-text-[.625rem] tw-block hover:tw-cursor-pointer tw-border tw-border-solid tw-border-transparent tw-whitespace-nowrap tw-text-blue-800 hover:tw-text-blue-700 tw-py-0.5 tw-px-1.5 tw-rounded-md tw-bg-[rgb(237,245,253)] tw-no-underline hover:tw-border-[rgb(203,231,255)] tw-transition-all\"\r\n                        >{{ tag.$Caption }}</a\r\n                    >\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (!isMobile) {\r\n            <div class=\"tw-shrink-0 tw-grow-0 tw-flex tw-gap-1 tw-items-start\">\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 py-1 tw-rounded-md tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                    [ngClass]=\"{\r\n                        'tw-bg-green-100': mo.CorrectAnswer\r\n                    }\"\r\n                >\r\n                    <span>\u067E\u0627\u0633\u062E \u0647\u0627</span>\r\n                    <span>{{ mo.CountOfAnswers }}</span>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 tw-py-1 tw-rounded-lg tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                >\r\n                    <span>\u0631\u0627\u06CC \u0647\u0627</span>\r\n                    <span>{{ '\u0645\u062C\u0645\u0648\u0639 \u0631\u0627\u06CC \u0647\u0627' | rval: mo:allColumns:true }}</span>\r\n                </div>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$7.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaQuestionPostComponent, isStandalone: false, selector: "bsu-barsa-question-post", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-w-full tw-flex tw-items-start tw-gap-2 tw-pt-8\">\r\n    @if (!isMobile) {\r\n    <div class=\"tw-shrink-0 tw-grow-0 tw-w-12\">\r\n        <div class=\"tw-size-10 tw-rounded-full tw-bg-gray-500 tw-overflow-hidden\">\r\n            <img src=\"https://picsum.photos/50/50?x={{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\" class=\"tw-full h-full\" loading=\"lazy\"/>\r\n        </div>\r\n    </div>\r\n    } @if (isMobile) {\r\n    <div\r\n        class=\"tw-shrink-0 tw-grow-0 tw-py-1 tw-text-center tw-w-10 tw-border tw-rounded-md\"\r\n        [ngClass]=\"{\r\n            'tw-border-gray-500 tw-text-gray-500': mo.F4 === '0',\r\n            'tw-border-green-600 tw-text-green-600': mo.F4 !== '0',\r\n            'tw-bg-green-600 tw-text-white': !!('\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns:true)\r\n        }\"\r\n    >\r\n        {{ mo.TotalVotes$Caption }}\r\n    </div>\r\n    }\r\n    <div class=\"tw-grow tw-shrink tw-flex tw-flex-col tw-gap-2\">\r\n        <div class=\"tw-w-full tw-flex tw-justify-between\">\r\n            <div class=\"tw-grow tw-flex tw-flex-col tw-gap-1\">\r\n                <span class=\"!tw-text-[.75rem]\">\r\n                    <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                    \u067E\u0631\u0633\u06CC\u062F\u0647 \u0627\u0633\u062A\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0627\u06CC\u062C\u0627\u062F' | rval: mo:allColumns:true }}\r\n                </span>\r\n                <a\r\n                    fd-link\r\n                    aria-label=\"Standard\"\r\n                    (click)=\"onRowClick()\"\r\n                    class=\"!tw-text-[1rem] hover:tw-cursor-pointer !tw-no-underline tw-transition-all\"\r\n                >\r\n                    {{ '\u0639\u0646\u0648\u0627\u0646' | rval: mo:allColumns:true }}\r\n                    @if (mo.IsClosed) {\r\n                    <span class=\"tw-black tw-text-sm tw-ms-1\">[\u0628\u0633\u062A\u0647 \u0634\u062F\u0647]</span>\r\n                    }\r\n                </a>\r\n                <div class=\"!tw-text-[.75rem] tw-flex tw-gap-2\">\r\n                    <span>\r\n                        <span class=\"tw-font-bold\">{{ '\u06A9\u0627\u0631\u0628\u0631 \u0627\u06CC\u062C\u0627\u062F \u06A9\u0646\u0646\u062F\u0647' | rval: mo:allColumns:true }}</span>\r\n                        \u0648\u06CC\u0631\u0627\u06CC\u0634 \u06A9\u0631\u062F\u0647 \u0627\u0633\u062A\r\n                    </span>\r\n                    <span class=\"tw-font-bold\">|</span>\r\n                    {{ '\u0632\u0645\u0627\u0646 \u0622\u062E\u0631\u06CC\u0646 \u062A\u063A\u06CC\u06CC\u0631' | rval: mo:allColumns:true }}\r\n                </div>\r\n                @if (!isMobile && mo.Tags.MoDataList.length) {\r\n                <div class=\"tw-text-small tw-flex tw-gap-2 tw-flex-wrap\">\r\n                    @for (tag of mo.Tags.MoDataList; track tag; let last = $last) {\r\n                    <a\r\n                        class=\"tw-text-[.625rem] tw-block hover:tw-cursor-pointer tw-border tw-border-solid tw-border-transparent tw-whitespace-nowrap tw-text-blue-800 hover:tw-text-blue-700 tw-py-0.5 tw-px-1.5 tw-rounded-md tw-bg-[rgb(237,245,253)] tw-no-underline hover:tw-border-[rgb(203,231,255)] tw-transition-all\"\r\n                        >{{ tag.$Caption }}</a\r\n                    >\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n            @if (!isMobile) {\r\n            <div class=\"tw-shrink-0 tw-grow-0 tw-flex tw-gap-1 tw-items-start\">\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 py-1 tw-rounded-md tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                    [ngClass]=\"{\r\n                        'tw-bg-green-100': mo.CorrectAnswer\r\n                    }\"\r\n                >\r\n                    <span>\u067E\u0627\u0633\u062E \u0647\u0627</span>\r\n                    <span>{{ mo.CountOfAnswers }}</span>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-text-[.75rem] tw-px-2 tw-py-1 tw-rounded-lg tw-flex tw-flex-col tw-gap-2 tw-items-center\"\r\n                >\r\n                    <span>\u0631\u0627\u06CC \u0647\u0627</span>\r\n                    <span>{{ '\u0645\u062C\u0645\u0648\u0639 \u0631\u0627\u06CC \u0647\u0627' | rval: mo:allColumns:true }}</span>\r\n                </div>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaQuestionPostComponent, decorators: [{
             type: Component,
@@ -16960,7 +17025,7 @@ class BarsaQuestionAnswerContentActionsSectionComponent {
         return this._domSanitizer.bypassSecurityTrustHtml(html ?? '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaQuestionAnswerContentActionsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaQuestionAnswerContentActionsSectionComponent, isStandalone: false, selector: "bsu-barsa-question-answer-content-actions-section", inputs: { mo: "mo", buttons: "buttons" }, outputs: { btnClick: "btnClick" }, host: { classAttribute: "w-full flex grow shrink flex-col" }, providers: [UploadService], ngImport: i0, template: "<div class=\"tw-my-4 [&_*]:!tw-bg-transparent\" [innerHTML]=\"safeHtml(mo.Post.Content)\"></div>\r\n<div class=\"tw-grow tw-shrink\"></div>\r\n<div class=\"tw-flex tw-justify-between tw-items-center\">\r\n    @if (mo.Tags?.MoDataList) {\r\n    <div class=\"tw-flex tw-gap-3\">\r\n        @for (tag of mo.Tags.MoDataList; track tag) {\r\n        <bsu-barsa-chip [title]=\"tag.$Caption\"></bsu-barsa-chip>\r\n        }\r\n    </div>\r\n    }\r\n    <div class=\"tw-flex tw-gap-3\">\r\n        @for (item of buttons; track item) { @if (!item.hidden && !item.isBuiltin) {\r\n        <a\r\n            fd-link\r\n            aria-label=\"Emphasized\"\r\n            class=\"!hover:tw-cursor-pointer !tw-no-underline\"\r\n            (click)=\"btnClick.emit(); item.handler(item, item)\"\r\n            [disabled]=\"item.disabled\"\r\n            >{{ item.text }}</a\r\n        >\r\n        } }\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i2$7.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: BarsaChipComponent, selector: "bsu-barsa-chip", inputs: ["title", "moreInfo", "canCheck", "isChecked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaQuestionAnswerContentActionsSectionComponent, isStandalone: false, selector: "bsu-barsa-question-answer-content-actions-section", inputs: { mo: "mo", buttons: "buttons" }, outputs: { btnClick: "btnClick" }, host: { classAttribute: "w-full flex grow shrink flex-col" }, providers: [UploadService], ngImport: i0, template: "<div class=\"tw-my-4 [&_*]:!tw-bg-transparent\" [innerHTML]=\"safeHtml(mo.Post.Content)\"></div>\r\n<div class=\"tw-grow tw-shrink\"></div>\r\n<div class=\"tw-flex tw-justify-between tw-items-center\">\r\n    @if (mo.Tags?.MoDataList) {\r\n    <div class=\"tw-flex tw-gap-3\">\r\n        @for (tag of mo.Tags.MoDataList; track tag) {\r\n        <bsu-barsa-chip [title]=\"tag.$Caption\"></bsu-barsa-chip>\r\n        }\r\n    </div>\r\n    }\r\n    <div class=\"tw-flex tw-gap-3\">\r\n        @for (item of buttons; track item) { @if (!item.hidden && !item.isBuiltin) {\r\n        <a\r\n            fd-link\r\n            aria-label=\"Emphasized\"\r\n            class=\"!hover:tw-cursor-pointer !tw-no-underline\"\r\n            (click)=\"btnClick.emit(); item.handler(item, item)\"\r\n            [disabled]=\"item.disabled\"\r\n            >{{ item.text }}</a\r\n        >\r\n        } }\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: BarsaChipComponent, selector: "bsu-barsa-chip", inputs: ["title", "moreInfo", "canCheck", "isChecked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaQuestionAnswerContentActionsSectionComponent, decorators: [{
             type: Component,
@@ -17034,7 +17099,7 @@ class BarsaQuestionAnswerVoteSectionComponent extends BaseComponent {
         // }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaQuestionAnswerVoteSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: BarsaQuestionAnswerVoteSectionComponent, isStandalone: false, selector: "bsu-barsa-question-answer-vote-section", inputs: { vote: "vote", voteDowns: "voteDowns", voteUps: "voteUps" }, outputs: { voteChange: "voteChange" }, providers: [UploadService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-items-stretch tw-grow tw-shrink-0\">\r\n    <div class=\"tw-flex tw-flex-col tw-tems-center tw-gap-1 tw-shrink-0 tw-grow-0\">\r\n        <button\r\n            fd-button\r\n            [fdType]=\"vote === '' ? 'standard' : vote ? 'positive' : 'standard'\"\r\n            glyph=\"add\"\r\n            class=\"!tw-max-w-8 !tw-max-h-8 !tw-size-8 !tw-rounded-full !tw-border-2\"\r\n            (click)=\"onVote(true)\"\r\n        ></button>\r\n        <span class=\"tw-text-lg tw-font-bold\" dir=\"ltr\">{{ voteUps - voteDowns }}</span>\r\n        <button\r\n            fd-button\r\n            [fdType]=\"vote === '' ? 'standard' : !vote ? 'negative' : 'standard'\"\r\n            glyph=\"less\"\r\n            class=\"!tw-max-w-8 !tw-max-h-8 !tw-size-8 !tw-rounded-full !tw-border-2\"\r\n            (click)=\"onVote(false)\"\r\n        ></button>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: i2$6.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: BarsaQuestionAnswerVoteSectionComponent, isStandalone: false, selector: "bsu-barsa-question-answer-vote-section", inputs: { vote: "vote", voteDowns: "voteDowns", voteUps: "voteUps" }, outputs: { voteChange: "voteChange" }, providers: [UploadService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-items-stretch tw-grow tw-shrink-0\">\r\n    <div class=\"tw-flex tw-flex-col tw-tems-center tw-gap-1 tw-shrink-0 tw-grow-0\">\r\n        <button\r\n            fd-button\r\n            [fdType]=\"vote === '' ? 'standard' : vote ? 'positive' : 'standard'\"\r\n            glyph=\"add\"\r\n            class=\"!tw-max-w-8 !tw-max-h-8 !tw-size-8 !tw-rounded-full !tw-border-2\"\r\n            (click)=\"onVote(true)\"\r\n        ></button>\r\n        <span class=\"tw-text-lg tw-font-bold\" dir=\"ltr\">{{ voteUps - voteDowns }}</span>\r\n        <button\r\n            fd-button\r\n            [fdType]=\"vote === '' ? 'standard' : !vote ? 'negative' : 'standard'\"\r\n            glyph=\"less\"\r\n            class=\"!tw-max-w-8 !tw-max-h-8 !tw-size-8 !tw-rounded-full !tw-border-2\"\r\n            (click)=\"onVote(false)\"\r\n        ></button>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: i2$7.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaQuestionAnswerVoteSectionComponent, decorators: [{
             type: Component,
@@ -17087,7 +17152,7 @@ class BarsaQuestionAnswerFormAddCommentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaQuestionAnswerFormAddCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaQuestionAnswerFormAddCommentComponent, isStandalone: false, selector: "bsu-barsa-question-answer-form-add-comment", inputs: { postId: "postId" }, outputs: { addComment: "addComment" }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@if (!showAddCommentTextArea) {\r\n<div class=\"tw-w-full tw-mt-2 tw-flex tw-gap-3\">\r\n    <a\r\n        fd-link\r\n        aria-label=\"Emphasized\"\r\n        class=\"hover:tw-cursor-pointer\"\r\n        (click)=\"showAddCommentTextArea = true; newCommentText = ''\"\r\n        >\u0627\u0631\u0633\u0627\u0644 \u0646\u0638\u0631</a\r\n    >\r\n    <ng-content></ng-content>\r\n</div>\r\n}\r\n<div [class.!flex]=\"showAddCommentTextArea\" class=\"tw-hidden tw-items-end tw-w-full tw-gap-4\">\r\n    <textarea\r\n        rows=\"3\"\r\n        class=\"tw-block tw-p-2.5 tw-w-full tw-text-sm tw-text-gray-900 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-300\"\r\n        placeholder=\"\u0646\u0638\u0631 \u0634\u0645\u0627...\"\r\n        [disabled]=\"sending\"\r\n        [(ngModel)]=\"newCommentText\"\r\n    ></textarea>\r\n    <div class=\"tw-flex tw-justify-end\">\r\n        <button fd-button fdType=\"standard\" [disabled]=\"sending || newCommentText.length < 3\" (click)=\"onAddComment()\">\r\n            \u0627\u0631\u0633\u0627\u0644\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$7.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaQuestionAnswerFormAddCommentComponent, isStandalone: false, selector: "bsu-barsa-question-answer-form-add-comment", inputs: { postId: "postId" }, outputs: { addComment: "addComment" }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@if (!showAddCommentTextArea) {\r\n<div class=\"tw-w-full tw-mt-2 tw-flex tw-gap-3\">\r\n    <a\r\n        fd-link\r\n        aria-label=\"Emphasized\"\r\n        class=\"hover:tw-cursor-pointer\"\r\n        (click)=\"showAddCommentTextArea = true; newCommentText = ''\"\r\n        >\u0627\u0631\u0633\u0627\u0644 \u0646\u0638\u0631</a\r\n    >\r\n    <ng-content></ng-content>\r\n</div>\r\n}\r\n<div [class.!flex]=\"showAddCommentTextArea\" class=\"tw-hidden tw-items-end tw-w-full tw-gap-4\">\r\n    <textarea\r\n        rows=\"3\"\r\n        class=\"tw-block tw-p-2.5 tw-w-full tw-text-sm tw-text-gray-900 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-300\"\r\n        placeholder=\"\u0646\u0638\u0631 \u0634\u0645\u0627...\"\r\n        [disabled]=\"sending\"\r\n        [(ngModel)]=\"newCommentText\"\r\n    ></textarea>\r\n    <div class=\"tw-flex tw-justify-end\">\r\n        <button fd-button fdType=\"standard\" [disabled]=\"sending || newCommentText.length < 3\" (click)=\"onAddComment()\">\r\n            \u0627\u0631\u0633\u0627\u0644\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaQuestionAnswerFormAddCommentComponent, decorators: [{
             type: Component,
@@ -17102,7 +17167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 class BarsaQuestionAnswerCommentsSectionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaQuestionAnswerCommentsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaQuestionAnswerCommentsSectionComponent, isStandalone: false, selector: "bsu-barsa-question-answer-comments-section", inputs: { post: "post" }, providers: [UploadService], ngImport: i0, template: "<div class=\"tw-flex tw-w-full tw-flex-col tw-items-start\">\r\n    <div class=\"tw-border-b tw-border-gray-300 tw-w-full tw-mt-2\"></div>\r\n    @if (post.Comments.MoDataList.length > 2 && !post.showAllCommnets) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"CommentRows; context: { $implicit: post.Comments.MoDataList.slice(0, 2) }\"\r\n    ></ng-container>\r\n    } @else {\r\n    <ng-container *ngTemplateOutlet=\"CommentRows; context: { $implicit: post.Comments.MoDataList }\"></ng-container>\r\n    }\r\n    <ng-template #CommentRows let-comments>\r\n        @for (comment of comments; track comment) {\r\n        <div class=\"tw-py-2 tw-border-b tw-border-gray-200 tw-text-sm tw-w-full\">\r\n            <p>\r\n                <a fd-link class=\"tw-inline\">{{ comment.CreatorUser$Caption.trim() }}</a>\r\n                &nbsp;<span class=\"tw-text-gray-500\">({{ comment.CreationDate$Caption.trim() }}):</span>\r\n                {{ comment.$Caption.trim() }}\r\n                @if ( comment.LastUpdateDate && comment.LastUpdateDate.getTime() !== comment.CreationDate.getTime() ) {\r\n                <span class=\"tw-italic tw-text-gray-500\">\r\n                    -\r\n                    {{ comment.LastUpdateDate$Caption }}\r\n                    \u0648\u06CC\u0631\u0627\u06CC\u0634 \u0634\u062F\u0647\r\n                </span>\r\n                }\r\n            </p>\r\n        </div>\r\n        }\r\n    </ng-template>\r\n    <bsu-barsa-question-answer-form-add-comment\r\n        [postId]=\"post.Id\"\r\n        (addComment)=\"post.Comments.MoDataList.push($event); post.showAllCommnets = true\"\r\n    >\r\n        @if (post.Comments.MoDataList.length > 2 && !post.showAllCommnets) {\r\n        <span>|</span>\r\n        <a fd-link aria-label=\"Emphasized\" class=\"hover:tw-cursor-pointer\" (click)=\"post.showAllCommnets = true\">\r\n            \u0646\u0645\u0627\u06CC\u0634\r\n            {{ post.Comments.MoDataList.length - 2 }}\r\n            \u0646\u0638\u0631 \u062F\u06CC\u06AF\u0631\r\n        </a>\r\n        }\r\n    </bsu-barsa-question-answer-form-add-comment>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$7.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: BarsaQuestionAnswerFormAddCommentComponent, selector: "bsu-barsa-question-answer-form-add-comment", inputs: ["postId"], outputs: ["addComment"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaQuestionAnswerCommentsSectionComponent, isStandalone: false, selector: "bsu-barsa-question-answer-comments-section", inputs: { post: "post" }, providers: [UploadService], ngImport: i0, template: "<div class=\"tw-flex tw-w-full tw-flex-col tw-items-start\">\r\n    <div class=\"tw-border-b tw-border-gray-300 tw-w-full tw-mt-2\"></div>\r\n    @if (post.Comments.MoDataList.length > 2 && !post.showAllCommnets) {\r\n    <ng-container\r\n        *ngTemplateOutlet=\"CommentRows; context: { $implicit: post.Comments.MoDataList.slice(0, 2) }\"\r\n    ></ng-container>\r\n    } @else {\r\n    <ng-container *ngTemplateOutlet=\"CommentRows; context: { $implicit: post.Comments.MoDataList }\"></ng-container>\r\n    }\r\n    <ng-template #CommentRows let-comments>\r\n        @for (comment of comments; track comment) {\r\n        <div class=\"tw-py-2 tw-border-b tw-border-gray-200 tw-text-sm tw-w-full\">\r\n            <p>\r\n                <a fd-link class=\"tw-inline\">{{ comment.CreatorUser$Caption.trim() }}</a>\r\n                &nbsp;<span class=\"tw-text-gray-500\">({{ comment.CreationDate$Caption.trim() }}):</span>\r\n                {{ comment.$Caption.trim() }}\r\n                @if ( comment.LastUpdateDate && comment.LastUpdateDate.getTime() !== comment.CreationDate.getTime() ) {\r\n                <span class=\"tw-italic tw-text-gray-500\">\r\n                    -\r\n                    {{ comment.LastUpdateDate$Caption }}\r\n                    \u0648\u06CC\u0631\u0627\u06CC\u0634 \u0634\u062F\u0647\r\n                </span>\r\n                }\r\n            </p>\r\n        </div>\r\n        }\r\n    </ng-template>\r\n    <bsu-barsa-question-answer-form-add-comment\r\n        [postId]=\"post.Id\"\r\n        (addComment)=\"post.Comments.MoDataList.push($event); post.showAllCommnets = true\"\r\n    >\r\n        @if (post.Comments.MoDataList.length > 2 && !post.showAllCommnets) {\r\n        <span>|</span>\r\n        <a fd-link aria-label=\"Emphasized\" class=\"hover:tw-cursor-pointer\" (click)=\"post.showAllCommnets = true\">\r\n            \u0646\u0645\u0627\u06CC\u0634\r\n            {{ post.Comments.MoDataList.length - 2 }}\r\n            \u0646\u0638\u0631 \u062F\u06CC\u06AF\u0631\r\n        </a>\r\n        }\r\n    </bsu-barsa-question-answer-form-add-comment>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: BarsaQuestionAnswerFormAddCommentComponent, selector: "bsu-barsa-question-answer-form-add-comment", inputs: ["postId"], outputs: ["addComment"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaQuestionAnswerCommentsSectionComponent, decorators: [{
             type: Component,
@@ -17209,7 +17274,7 @@ class BarsaReportCardFlexViewComponent extends ReportViewBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaReportCardFlexViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaReportCardFlexViewComponent, isStandalone: false, selector: "bsu-barsa-report-card-flex-view", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-border tw-border-gray-200 tw-bg-white tw-rounded-md\">\r\n    <div class=\"tw-px-4 tw-py-2 tw-border-b tw-border-gray-200 tw-text-lg\">{{ title }}</div>\r\n    <div\r\n        class=\"tw-flex tw-flex-wrap\"\r\n        [ngClass]=\"{\r\n            'tw-px-4 tw-py-3': !viewSetting.NoContentPadding,\r\n            'tw-flex-col': viewSetting.FlexCol,\r\n            'tw-gap-2': viewSetting.RowOlgo.Selector\r\n        }\"\r\n    >\r\n        @for (mo of moDataList; track mo; let index = $index) { @if (viewSetting?.RowOlgo.Selector) {\r\n        <bnrc-dynamic-item-component\r\n            [component]=\"viewSetting.RowOlgo\"\r\n            [mo]=\"mo\"\r\n            [UlvMainCtrlr]=\"UlvMainCtrlr\"\r\n            [moDataList]=\"moDataList\"\r\n            [hideOpenIcon]=\"hideOpenIcon\"\r\n            [showRowNumber]=\"contextView?.Grid_ShowRowNumber\"\r\n            [rowNumber]=\"mo.Id | rowNumber: pagingSetting:moDataList\"\r\n            [columnComponents]=\"viewSetting?.ColumnComponents || null\"\r\n            [cartableMo]=\"mo.RelatedMo\"\r\n            [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\r\n            [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\r\n            [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\r\n            [isChecked]=\"mo.$IsChecked\"\r\n            [visibility]=\"mo.$Visibility\"\r\n            [expanded]=\"mo.$Expanded\"\r\n            [styleIndex]=\"mo.$StyleIndex\"\r\n            [level]=\"mo.$Level\"\r\n            [parentExpanded]=\"mo.$Parent?.$Expanded\"\r\n            [typeDefId]=\"typeDefId\"\r\n            [extraRelation]=\"extraRelation\"\r\n            [formSetting]=\"formSetting\"\r\n            [index]=\"index\"\r\n            [setting]=\"viewSetting\"\r\n            [secondaryColumns]=\"secondaryColumns\"\r\n            [columns]=\"columns\"\r\n            [isNewInlineMo]=\"mo.$NewInlineMo\"\r\n            [access]=\"access\"\r\n            [inlineEditMode]=\"inlineEditMode\"\r\n            [allowInlineEdit]=\"allowInlineEdit\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [allColumns]=\"allColumns\"\r\n            [contextMenuItems]=\"contextMenuItems\"\r\n            [canView]=\"canView\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [navigationArrow]=\"navigationArrow\"\r\n            [isCheckList]=\"isCheckList\"\r\n            (events)=\"onOlgoEvents($event)\"\r\n        >\r\n        </bnrc-dynamic-item-component>\r\n        } @else {\r\n        <div\r\n            class=\"tw-group hover:tw-bg-[#fdfdfd] tw-px-4 tw-py-2 tw-transition-all hover:tw-cursor-pointer\"\r\n            (click)=\"onRowClick({mo, index})\"\r\n        >\r\n            <a fd-link class=\"tw-block group-hover:tw-text-black !tw-no-underline\">\r\n                <div\r\n                    class=\"tw-inline-block tw-w-8 tw-h-5 tw-p-.5 tw-text-small tw-text-center tw-rounded-md tw-border tw-border-gray-400 tw-text-gray-400\"\r\n                    [class.!text-green-500]=\"\r\n                        ('\u062A\u0639\u062F\u0627\u062F \u067E\u0627\u0633\u062E \u0647\u0627' | rval: mo:allColumns) > 0 && !('\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns)\r\n                    \"\r\n                    [class.!tw-border-green-500]=\"('\u062A\u0639\u062F\u0627\u062F \u067E\u0627\u0633\u062E \u0647\u0627' | rval: mo:allColumns) > 0\"\r\n                    [class.!tw-bg-green-500]=\"'\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns\"\r\n                    [class.!tw-text-white]=\"'\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns\"\r\n                >\r\n                    {{ '\u0645\u062C\u0645\u0648\u0639 \u0631\u0627\u06CC \u0647\u0627' | rval: mo:allColumns:true }}\r\n                </div>\r\n                {{ mo.$Caption }}\r\n            </a>\r\n        </div>\r\n        } }\r\n    </div>\r\n    @if (!viewSetting.HideShowAllButton) {\r\n    <div class=\"tw-px-4 tw-py-2 tw-border-t tw-border-gray-200 tw-flex tw-justify-center\">\r\n        @for (button of toolbarButtons; track button) { @if (!button.Command?.IsBuiltin) {\r\n        <a fd-link [ulvCommandHandler]=\"button\">{{ button.text }}</a>\r\n        } }\r\n    </div>\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "hideOpenIcon", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "maxHeightHeader", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "directive", type: i2.UlvCommandDirective, selector: "[ulvCommandHandler]", inputs: ["ulvCommandHandler", "disable"], outputs: ["commandClick"] }, { kind: "component", type: i2$7.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.RowNumberPipe, name: "rowNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: BarsaReportCardFlexViewComponent, isStandalone: false, selector: "bsu-barsa-report-card-flex-view", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-border tw-border-gray-200 tw-bg-white tw-rounded-md\">\r\n    <div class=\"tw-px-4 tw-py-2 tw-border-b tw-border-gray-200 tw-text-lg\">{{ title }}</div>\r\n    <div\r\n        class=\"tw-flex tw-flex-wrap\"\r\n        [ngClass]=\"{\r\n            'tw-px-4 tw-py-3': !viewSetting.NoContentPadding,\r\n            'tw-flex-col': viewSetting.FlexCol,\r\n            'tw-gap-2': viewSetting.RowOlgo.Selector\r\n        }\"\r\n    >\r\n        @for (mo of moDataList; track mo; let index = $index) { @if (viewSetting?.RowOlgo.Selector) {\r\n        <bnrc-dynamic-item-component\r\n            [component]=\"viewSetting.RowOlgo\"\r\n            [mo]=\"mo\"\r\n            [UlvMainCtrlr]=\"UlvMainCtrlr\"\r\n            [moDataList]=\"moDataList\"\r\n            [hideOpenIcon]=\"hideOpenIcon\"\r\n            [showRowNumber]=\"contextView?.Grid_ShowRowNumber\"\r\n            [rowNumber]=\"mo.Id | rowNumber: pagingSetting:moDataList\"\r\n            [columnComponents]=\"viewSetting?.ColumnComponents || null\"\r\n            [cartableMo]=\"mo.RelatedMo\"\r\n            [cartableWorkflowData]=\"mo.SerializedWorkflowData\"\r\n            [serializedRelatedMo]=\"mo.SerializedRelatedMo\"\r\n            [detailsText]=\"viewSetting?.DetailsSetting?.ButtonText\"\r\n            [isChecked]=\"mo.$IsChecked\"\r\n            [visibility]=\"mo.$Visibility\"\r\n            [expanded]=\"mo.$Expanded\"\r\n            [styleIndex]=\"mo.$StyleIndex\"\r\n            [level]=\"mo.$Level\"\r\n            [parentExpanded]=\"mo.$Parent?.$Expanded\"\r\n            [typeDefId]=\"typeDefId\"\r\n            [extraRelation]=\"extraRelation\"\r\n            [formSetting]=\"formSetting\"\r\n            [index]=\"index\"\r\n            [setting]=\"viewSetting\"\r\n            [secondaryColumns]=\"secondaryColumns\"\r\n            [columns]=\"columns\"\r\n            [isNewInlineMo]=\"mo.$NewInlineMo\"\r\n            [access]=\"access\"\r\n            [inlineEditMode]=\"inlineEditMode\"\r\n            [allowInlineEdit]=\"allowInlineEdit\"\r\n            [rtl]=\"rtl\"\r\n            [deviceName]=\"deviceName\"\r\n            [deviceSize]=\"deviceSize\"\r\n            [index]=\"index\"\r\n            [allColumns]=\"allColumns\"\r\n            [contextMenuItems]=\"contextMenuItems\"\r\n            [canView]=\"canView\"\r\n            [conditionalFormats]=\"conditionalFormats\"\r\n            [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\r\n            [navigationArrow]=\"navigationArrow\"\r\n            [isCheckList]=\"isCheckList\"\r\n            (events)=\"onOlgoEvents($event)\"\r\n        >\r\n        </bnrc-dynamic-item-component>\r\n        } @else {\r\n        <div\r\n            class=\"tw-group hover:tw-bg-[#fdfdfd] tw-px-4 tw-py-2 tw-transition-all hover:tw-cursor-pointer\"\r\n            (click)=\"onRowClick({mo, index})\"\r\n        >\r\n            <a fd-link class=\"tw-block group-hover:tw-text-black !tw-no-underline\">\r\n                <div\r\n                    class=\"tw-inline-block tw-w-8 tw-h-5 tw-p-.5 tw-text-small tw-text-center tw-rounded-md tw-border tw-border-gray-400 tw-text-gray-400\"\r\n                    [class.!text-green-500]=\"\r\n                        ('\u062A\u0639\u062F\u0627\u062F \u067E\u0627\u0633\u062E \u0647\u0627' | rval: mo:allColumns) > 0 && !('\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns)\r\n                    \"\r\n                    [class.!tw-border-green-500]=\"('\u062A\u0639\u062F\u0627\u062F \u067E\u0627\u0633\u062E \u0647\u0627' | rval: mo:allColumns) > 0\"\r\n                    [class.!tw-bg-green-500]=\"'\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns\"\r\n                    [class.!tw-text-white]=\"'\u067E\u0627\u0633\u062E \u0635\u062D\u06CC\u062D' | rval: mo:allColumns\"\r\n                >\r\n                    {{ '\u0645\u062C\u0645\u0648\u0639 \u0631\u0627\u06CC \u0647\u0627' | rval: mo:allColumns:true }}\r\n                </div>\r\n                {{ mo.$Caption }}\r\n            </a>\r\n        </div>\r\n        } }\r\n    </div>\r\n    @if (!viewSetting.HideShowAllButton) {\r\n    <div class=\"tw-px-4 tw-py-2 tw-border-t tw-border-gray-200 tw-flex tw-justify-center\">\r\n        @for (button of toolbarButtons; track button) { @if (!button.Command?.IsBuiltin) {\r\n        <a fd-link [ulvCommandHandler]=\"button\">{{ button.text }}</a>\r\n        } }\r\n    </div>\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "hideOpenIcon", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "maxHeightHeader", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "directive", type: i2.UlvCommandDirective, selector: "[ulvCommandHandler]", inputs: ["ulvCommandHandler", "disable"], outputs: ["commandClick"] }, { kind: "component", type: i2$6.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.RowNumberPipe, name: "rowNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaReportCardFlexViewComponent, decorators: [{
             type: Component,
@@ -18397,7 +18462,7 @@ class BarsaThemeInspectorComponent {
                 </div>
             </fd-popover-body>
         </fd-popover>
-    `, isInline: true, styles: [".ti-scope{display:flex;flex-direction:column;gap:4px;padding:8px 12px;font-size:12px;border-bottom:1px solid var(--sapList_BorderColor, #e5e5e5);background:var(--sapList_Background, #fafafa)}.ti-scope-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.ti-scope-label{opacity:.7}.ti-scope-value{font-weight:600}.ti-scope-org{color:var(--sapPositiveColor, #107e3e)}.ti-scope-ver{opacity:.7;font-weight:400;margin-inline-start:4px}.ti-scope-new{color:var(--sapCriticalColor, #e76500)}.ti-scope-hint{opacity:.6;font-size:10px}.ti-body{font-size:12px;overflow:auto;padding:4px 0}.ti-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px}.ti-row:hover{background:var(--sapList_Hover_Background, #f5f5f5)}.ti-caption{font-weight:600}.ti-var{opacity:.6;direction:ltr;font-size:10px}.ti-empty{padding:12px;text-align:center;opacity:.7}.ti-color{width:36px;height:24px;border:none;background:transparent;cursor:pointer}.ti-font{min-width:9rem;max-width:12rem}.ti-size{display:flex;gap:4px;align-items:center}.ti-num-display{min-width:2.75rem;text-align:center;font-variant-numeric:tabular-nums}.ti-unit{min-width:4.5rem}\n"], dependencies: [{ kind: "component", type: i1$3.BarComponent, selector: "[fd-bar]", inputs: ["barDesign", "inPage", "inHomePage", "clear", "size", "initialSuggestionTitle", "initialSuggestionSubline", "role"] }, { kind: "directive", type: i1$3.BarLeftDirective, selector: "[fd-bar-left]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: i1$3.BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: i1$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i1$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: i3$3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "directive", type: i6.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i6.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: i2$3.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "ariaHasPopup", "ariaDescription", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i2$3.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$6.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [".ti-scope{display:flex;flex-direction:column;gap:4px;padding:8px 12px;font-size:12px;border-bottom:1px solid var(--sapList_BorderColor, #e5e5e5);background:var(--sapList_Background, #fafafa)}.ti-scope-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.ti-scope-label{opacity:.7}.ti-scope-value{font-weight:600}.ti-scope-org{color:var(--sapPositiveColor, #107e3e)}.ti-scope-ver{opacity:.7;font-weight:400;margin-inline-start:4px}.ti-scope-new{color:var(--sapCriticalColor, #e76500)}.ti-scope-hint{opacity:.6;font-size:10px}.ti-body{font-size:12px;overflow:auto;padding:4px 0}.ti-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px}.ti-row:hover{background:var(--sapList_Hover_Background, #f5f5f5)}.ti-caption{font-weight:600}.ti-var{opacity:.6;direction:ltr;font-size:10px}.ti-empty{padding:12px;text-align:center;opacity:.7}.ti-color{width:36px;height:24px;border:none;background:transparent;cursor:pointer}.ti-font{min-width:9rem;max-width:12rem}.ti-size{display:flex;gap:4px;align-items:center}.ti-num-display{min-width:2.75rem;text-align:center;font-variant-numeric:tabular-nums}.ti-unit{min-width:4.5rem}\n"], dependencies: [{ kind: "component", type: i1$3.BarComponent, selector: "[fd-bar]", inputs: ["barDesign", "inPage", "inHomePage", "clear", "size", "initialSuggestionTitle", "initialSuggestionSubline", "role"] }, { kind: "directive", type: i1$3.BarLeftDirective, selector: "[fd-bar-left]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: i1$3.BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: i1$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i1$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: i3$3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "directive", type: i6.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i6.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: i2$3.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "ariaHasPopup", "ariaDescription", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i2$3.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$7.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BarsaThemeInspectorComponent, decorators: [{
             type: Component,