barsa-sap-ui 3.0.6 → 3.0.7

package/fesm2022/barsa-sap-ui.mjs

@@ -132,6 +132,11 @@ class FundamentalComboComponent {
         this.fillControlMode = 'equal';
         this.tabOutStrategy = 'close';
         this.closeOnOutsideClick = true;
+        /**
+         * typeahead داخلی Platform را فقط برای صفحه‌کلید لمسی متوقف می‌کند. این guard برای
+         * جستجوی ناهمگام ULV است؛ مصرف‌کننده‌های دیگر و ورودی دسکتاپ رفتار پیش‌فرض را دارند.
+         */
+        this.suppressTypeaheadOnCoarsePointer = false;
         /** انتخابِ نهایی: آبجکتِ رکورد، یا (در حالتِ allowFreeText) رشته‌ی متنِ آزاد. */
         this.selectionChange = new EventEmitter();
         /** درخواستِ پاک‌کردنِ مقدار (payload خالی از سمتِ کمبو). */
@@ -144,6 +149,14 @@ class FundamentalComboComponent {
         this._pendingNavigationSelection = null;
         this._commitPendingNavigationSelection = false;
         this._pointerSelectionInProgress = false;
+        /**
+         * آیتمِ زیرِ mousedown (اگر روی یک option بوده). وقتی فیلد نزدیکِ لبه‌ی صفحه است، CDK popover
+         * ممکن است بینِ mousedown و click جابه‌جا شود (flip بالا/پایین)؛ در آن حالت click واقعیِ کاربر
+         * به مکانِ قبلی می‌خورد و هیچ‌چیز انتخاب نمی‌شود. نگه‌داشتنِ همین رفرنس اجازه می‌دهد در
+         * _trackComboListInteraction کلیک را روی همان المان (که فقط جابه‌جا شده، نه از بین رفته) دوباره
+         * شبیه‌سازی کنیم؛ نیازی به دانستنِ value یا data-model نیست.
+         */
+        this._pendingMouseDownOptionEl = null;
     }
     ngAfterViewInit() {
         this.fdComboRef.openChange.pipe(takeUntil(this._onDestroy$)).subscribe((isOpen) => this.onOpenChange(isOpen));
@@ -212,13 +225,16 @@ class FundamentalComboComponent {
         this.fdComboRef?.writeValue(value);
     }
     _handleComboInputKeyboard(event) {
+        const shouldSuppressTypeahead = event.type === 'keyup' &&
+            this.suppressTypeaheadOnCoarsePointer &&
+            this._hasCoarsePointer(event.currentTarget);
         if (event.key === 'ArrowDown') {
             if (event.type === 'keydown' &&
                 !this.fdComboRef?.isOpen &&
                 this._isComboListVisible(event.currentTarget)) {
                 this.fdComboRef.isOpenChangeHandle(true);
             }
-            else if (event.type === 'keyup' && this.fdComboRef?.isOpen) {
+            else if (event.type === 'keyup' && (this.fdComboRef?.isOpen || shouldSuppressTypeahead)) {
                 event.stopImmediatePropagation();
             }
             return;
@@ -234,14 +250,27 @@ class FundamentalComboComponent {
         }
         if (event.type === 'keyup' && this._pendingNativeSelectionKeyUps.delete(event.key)) {
             event.stopImmediatePropagation();
+            return;
+        }
+        if (shouldSuppressTypeahead) {
+            event.stopImmediatePropagation();
         }
     }
+    _hasCoarsePointer(input) {
+        return input?.ownerDocument.defaultView?.matchMedia?.('(pointer: coarse)').matches === true;
+    }
     _trackComboListInteraction(event) {
         if (event.type === 'mousedown') {
-            this._pointerSelectionInProgress = this._isComboOptionTarget(event.target);
+            const optionEl = this._closestComboOption(event.target);
+            this._pointerSelectionInProgress = !!optionEl;
+            this._pendingMouseDownOptionEl = optionEl;
             return;
         }
         if (event.type === 'click') {
+            // رویدادِ synthetic-ای که خودمان در _retryStaleOptionClick می‌فرستیم؛ اینجا دوباره پردازشش نکنیم.
+            if (!event.isTrusted) {
+                return;
+            }
             if (this._pointerSelectionInProgress &&
                 this._pendingNavigationSelection &&
                 this.fdComboRef?.isOpen &&
@@ -249,9 +278,13 @@ class FundamentalComboComponent {
                 this._commitPendingNavigationSelection = true;
                 this._finalizePendingNavigationSelection();
             }
+            else if (this._shouldRetryStaleOptionClick(event)) {
+                this._retryStaleOptionClick();
+            }
             else {
                 this._pointerSelectionInProgress = false;
             }
+            this._pendingMouseDownOptionEl = null;
             return;
         }
         if (!this._isComboOptionTarget(event.target)) {
@@ -292,10 +325,36 @@ class FundamentalComboComponent {
         this._pointerSelectionInProgress = false;
     }
     _isComboOptionTarget(target) {
-        const element = target;
-        const option = element?.closest?.('[role="option"]');
+        const option = this._closestComboOption(target);
         return !!option && this._isComboListTarget(option);
     }
+    _closestComboOption(target) {
+        return target?.closest?.('[role="option"]') ?? null;
+    }
+    /**
+     * true وقتی: mousedown روی یک option افتاده، آن option هنوز در DOM و داخلِ لیستِ بازِ همین
+     * کمبو است، ولی click واقعی به جای دیگری خورده (چون popover جابه‌جا شده و آن مکانِ قبلی
+     * دیگر چیزی نیست).
+     */
+    _shouldRetryStaleOptionClick(event) {
+        const pending = this._pendingMouseDownOptionEl;
+        if (!pending || !pending.isConnected || !this.fdComboRef?.isOpen) {
+            return false;
+        }
+        if (pending.contains(event.target)) {
+            return false;
+        }
+        return this._isComboListTarget(pending);
+    }
+    /** کلیکِ گم‌شده را روی همان المانِ mousedown-شده (که فقط جابه‌جا شده) دوباره شبیه‌سازی می‌کند. */
+    _retryStaleOptionClick() {
+        const target = this._pendingMouseDownOptionEl;
+        this._pointerSelectionInProgress = false;
+        if (!target) {
+            return;
+        }
+        target.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, composed: true }));
+    }
     _isComboListTarget(target) {
         return target?.closest?.('[role="listbox"]')?.id === `${this.id}-result`;
     }
@@ -304,7 +363,7 @@ class FundamentalComboComponent {
         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", 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 }); }
+    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", suppressTypeaheadOnCoarsePointer: "suppressTypeaheadOnCoarsePointer" }, 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,
@@ -352,6 +411,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], closeOnOutsideClick: [{
                 type: Input
+            }], suppressTypeaheadOnCoarsePointer: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], cleared: [{
@@ -4910,6 +4971,12 @@ class FileViewerContentComponent extends BaseComponent {
         this._picFieldSrc = inject(PictureFieldSourcePipe);
         this._renderer2 = inject(Renderer2);
     }
+    get effectiveCardContentHeight() {
+        if (!this.cardContentHeight || this.file?.isImage || this.imageOnly || this.hideContent()) {
+            return null;
+        }
+        return this.cardContentHeight;
+    }
     ngOnInit() {
         super.ngOnInit();
         this._prepare(this.file);
@@ -4993,11 +5060,11 @@ class FileViewerContentComponent extends BaseComponent {
         this._imageLoadingTimer = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FileViewerContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FileViewerContentComponent, isStandalone: false, selector: "bsu-file-viewer-content", inputs: { fillWidth: "fillWidth", zoom: "zoom", imageOnly: "imageOnly", isImageGallery: "isImageGallery", cardMode: "cardMode", showFooter: "showFooter", showContent: "showContent", selected: "selected", width: "width", deviceSize: "deviceSize", cardContentHeight: "cardContentHeight", file: "file", isThumbnail: "isThumbnail" }, outputs: { cantView: "cantView", imageLoaded: "imageLoaded" }, host: { properties: { "style.height": "this._height" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"tw-flex tw-flex-col big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics\" [class.tw-m-auto]=\"!fillWidth\">\r\n            @if (showImageLoadingPlaceholder()) {\r\n            <div class=\"image-loading-placeholder\" [attr.aria-busy]=\"imageIsLoading()\">\r\n                <img class=\"image-loading-thumbnail\" imgLazy [imgLazy]=\"file.thumbnailUrl\" alt=\"\" />\r\n                @if (imageIsLoading()) {\r\n                <div class=\"image-loading-indicator\">\r\n                    <fd-busy-indicator\r\n                        [loading]=\"true\"\r\n                        [size]=\"'m'\"\r\n                        [title]=\"'Loading' | bbbTranslate\"\r\n                    ></fd-busy-indicator>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n            <img\r\n                imgLazy\r\n                [imgLazy]=\"file.mediaUrl\"\r\n                [style.width]=\"width\"\r\n                [style.zoom]=\"zoom === 'zoom1-5' ? 1.5 : zoom === 'zoom2' ? 2 : 1\"\r\n                (imageLoadStarted)=\"onImageLoadStarted()\"\r\n                (imageLoaded)=\"onImageLoaded()\"\r\n                (imageLoadError)=\"onImageLoadError()\"\r\n            />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    @if(!hideContent()){\r\n    <bsu-blob-viewer\r\n        [file]=\"file\"\r\n        [type]=\"type\"\r\n        [style.width]=\"width\"\r\n        fillEmptySpace\r\n        [disable]=\"deviceSize !== 's'\"\r\n        [decrement]=\"'25px'\"\r\n    ></bsu-blob-viewer>\r\n    }@else{ }\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\" [class.hideContent]=\"hideContent()\" [class.selected]=\"selected\">\r\n        <fd-card-content\r\n            style=\"text-align: center; padding: 0; margin: auto\"\r\n            [style.height]=\"cardContentHeight\"\r\n            [style.flex]=\"isThumbnail ? 0 : null\"\r\n        >\r\n            @if(hideContent() && file){\r\n            <figure fd-illustrated-message type=\"dialog\" [svgConfig]=\"sceneConfig\" svgAriaLabel=\"Illustration label\">\r\n                <figcaption fd-illustrated-message-figcaption>\r\n                    <h3 fd-illustrated-message-title>{{ 'Unable To Load File' | bbbTranslate }}</h3>\r\n                </figcaption>\r\n            </figure>\r\n            } @else{\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n            }\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;min-height:100%;flex-direction:column}.big-imgs-box{min-height:100%}.pics{position:relative;min-height:8rem}.image-loading-placeholder{position:absolute;z-index:1;inset:0;overflow:hidden;background:var(--sapGroup_ContentBackground, #fff)}.image-loading-thumbnail{width:100%!important;height:100%!important;opacity:.72;object-fit:contain}.image-loading-indicator{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--sapGroup_ContentBackground, #fff) 35%,transparent)}fd-card.hideContent{box-shadow:none}fd-card.selected{border:.25rem solid var(--sapList_SelectionBorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoadStarted", "imageLoaded", "imageLoadError"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["mode", "containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight", "setMaxHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i5$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive", "preventWheelEvents"] }, { 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.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i1$4.IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: ["type", "svgConfig", "svgAriaLabel", "noSvg", "id"] }, { kind: "component", type: i1$4.IllustratedMessageFigcaptionComponent, selector: "[fd-illustrated-message-figcaption]" }, { kind: "directive", type: i1$4.IllustratedMessageTitleDirective, selector: "[fd-illustrated-message-title]" }, { kind: "component", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: ["file", "type"] }, { 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: FileViewerContentComponent, isStandalone: false, selector: "bsu-file-viewer-content", inputs: { fillWidth: "fillWidth", zoom: "zoom", imageOnly: "imageOnly", isImageGallery: "isImageGallery", cardMode: "cardMode", showFooter: "showFooter", showContent: "showContent", selected: "selected", width: "width", deviceSize: "deviceSize", cardContentHeight: "cardContentHeight", file: "file", isThumbnail: "isThumbnail" }, outputs: { cantView: "cantView", imageLoaded: "imageLoaded" }, host: { properties: { "style.height": "this._height" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"tw-flex tw-flex-col big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics\" [class.tw-m-auto]=\"!fillWidth\">\r\n            @if (showImageLoadingPlaceholder()) {\r\n            <div class=\"image-loading-placeholder\" [attr.aria-busy]=\"imageIsLoading()\">\r\n                <img class=\"image-loading-thumbnail\" imgLazy [imgLazy]=\"file.thumbnailUrl\" alt=\"\" />\r\n                @if (imageIsLoading()) {\r\n                <div class=\"image-loading-indicator\">\r\n                    <fd-busy-indicator\r\n                        [loading]=\"true\"\r\n                        [size]=\"'m'\"\r\n                        [title]=\"'Loading' | bbbTranslate\"\r\n                    ></fd-busy-indicator>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n            <img\r\n                imgLazy\r\n                [imgLazy]=\"file.mediaUrl\"\r\n                [style.width]=\"width\"\r\n                [style.zoom]=\"zoom === 'zoom1-5' ? 1.5 : zoom === 'zoom2' ? 2 : 1\"\r\n                (imageLoadStarted)=\"onImageLoadStarted()\"\r\n                (imageLoaded)=\"onImageLoaded()\"\r\n                (imageLoadError)=\"onImageLoadError()\"\r\n            />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    @if(!hideContent()){\r\n    <bsu-blob-viewer\r\n        [file]=\"file\"\r\n        [type]=\"type\"\r\n        [style.width]=\"width\"\r\n        fillEmptySpace\r\n        [disable]=\"deviceSize !== 's'\"\r\n        [decrement]=\"'25px'\"\r\n    ></bsu-blob-viewer>\r\n    }@else{ }\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\" [class.hideContent]=\"hideContent()\" [class.selected]=\"selected\">\r\n        <fd-card-content\r\n            style=\"text-align: center; padding: 0; margin: auto\"\r\n            [style.height]=\"effectiveCardContentHeight\"\r\n            [style.flex]=\"isThumbnail ? 0 : null\"\r\n        >\r\n            @if(hideContent() && file){\r\n            <figure fd-illustrated-message type=\"dialog\" [svgConfig]=\"sceneConfig\" svgAriaLabel=\"Illustration label\">\r\n                <figcaption fd-illustrated-message-figcaption>\r\n                    <h3 fd-illustrated-message-title>{{ 'Unable To Load File' | bbbTranslate }}</h3>\r\n                </figcaption>\r\n            </figure>\r\n            } @else{\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n            }\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;min-height:100%;flex-direction:column}.big-imgs-box{min-height:100%}.pics{position:relative;min-height:8rem}.image-loading-placeholder{position:absolute;z-index:1;inset:0;overflow:hidden;background:var(--sapGroup_ContentBackground, #fff)}.image-loading-thumbnail{width:100%!important;height:100%!important;opacity:.72;object-fit:contain}.image-loading-indicator{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--sapGroup_ContentBackground, #fff) 35%,transparent)}fd-card.hideContent{box-shadow:none}fd-card.selected{border:.25rem solid var(--sapList_SelectionBorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoadStarted", "imageLoaded", "imageLoadError"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["mode", "containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight", "setMaxHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i5$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive", "preventWheelEvents"] }, { 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.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i1$4.IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: ["type", "svgConfig", "svgAriaLabel", "noSvg", "id"] }, { kind: "component", type: i1$4.IllustratedMessageFigcaptionComponent, selector: "[fd-illustrated-message-figcaption]" }, { kind: "directive", type: i1$4.IllustratedMessageTitleDirective, selector: "[fd-illustrated-message-title]" }, { kind: "component", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: ["file", "type"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FileViewerContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-file-viewer-content', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"tw-flex tw-flex-col big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics\" [class.tw-m-auto]=\"!fillWidth\">\r\n            @if (showImageLoadingPlaceholder()) {\r\n            <div class=\"image-loading-placeholder\" [attr.aria-busy]=\"imageIsLoading()\">\r\n                <img class=\"image-loading-thumbnail\" imgLazy [imgLazy]=\"file.thumbnailUrl\" alt=\"\" />\r\n                @if (imageIsLoading()) {\r\n                <div class=\"image-loading-indicator\">\r\n                    <fd-busy-indicator\r\n                        [loading]=\"true\"\r\n                        [size]=\"'m'\"\r\n                        [title]=\"'Loading' | bbbTranslate\"\r\n                    ></fd-busy-indicator>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n            <img\r\n                imgLazy\r\n                [imgLazy]=\"file.mediaUrl\"\r\n                [style.width]=\"width\"\r\n                [style.zoom]=\"zoom === 'zoom1-5' ? 1.5 : zoom === 'zoom2' ? 2 : 1\"\r\n                (imageLoadStarted)=\"onImageLoadStarted()\"\r\n                (imageLoaded)=\"onImageLoaded()\"\r\n                (imageLoadError)=\"onImageLoadError()\"\r\n            />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    @if(!hideContent()){\r\n    <bsu-blob-viewer\r\n        [file]=\"file\"\r\n        [type]=\"type\"\r\n        [style.width]=\"width\"\r\n        fillEmptySpace\r\n        [disable]=\"deviceSize !== 's'\"\r\n        [decrement]=\"'25px'\"\r\n    ></bsu-blob-viewer>\r\n    }@else{ }\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\" [class.hideContent]=\"hideContent()\" [class.selected]=\"selected\">\r\n        <fd-card-content\r\n            style=\"text-align: center; padding: 0; margin: auto\"\r\n            [style.height]=\"cardContentHeight\"\r\n            [style.flex]=\"isThumbnail ? 0 : null\"\r\n        >\r\n            @if(hideContent() && file){\r\n            <figure fd-illustrated-message type=\"dialog\" [svgConfig]=\"sceneConfig\" svgAriaLabel=\"Illustration label\">\r\n                <figcaption fd-illustrated-message-figcaption>\r\n                    <h3 fd-illustrated-message-title>{{ 'Unable To Load File' | bbbTranslate }}</h3>\r\n                </figcaption>\r\n            </figure>\r\n            } @else{\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n            }\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;min-height:100%;flex-direction:column}.big-imgs-box{min-height:100%}.pics{position:relative;min-height:8rem}.image-loading-placeholder{position:absolute;z-index:1;inset:0;overflow:hidden;background:var(--sapGroup_ContentBackground, #fff)}.image-loading-thumbnail{width:100%!important;height:100%!important;opacity:.72;object-fit:contain}.image-loading-indicator{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--sapGroup_ContentBackground, #fff) 35%,transparent)}fd-card.hideContent{box-shadow:none}fd-card.selected{border:.25rem solid var(--sapList_SelectionBorderColor)}\n"] }]
+            args: [{ selector: 'bsu-file-viewer-content', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"tw-flex tw-flex-col big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics\" [class.tw-m-auto]=\"!fillWidth\">\r\n            @if (showImageLoadingPlaceholder()) {\r\n            <div class=\"image-loading-placeholder\" [attr.aria-busy]=\"imageIsLoading()\">\r\n                <img class=\"image-loading-thumbnail\" imgLazy [imgLazy]=\"file.thumbnailUrl\" alt=\"\" />\r\n                @if (imageIsLoading()) {\r\n                <div class=\"image-loading-indicator\">\r\n                    <fd-busy-indicator\r\n                        [loading]=\"true\"\r\n                        [size]=\"'m'\"\r\n                        [title]=\"'Loading' | bbbTranslate\"\r\n                    ></fd-busy-indicator>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n            <img\r\n                imgLazy\r\n                [imgLazy]=\"file.mediaUrl\"\r\n                [style.width]=\"width\"\r\n                [style.zoom]=\"zoom === 'zoom1-5' ? 1.5 : zoom === 'zoom2' ? 2 : 1\"\r\n                (imageLoadStarted)=\"onImageLoadStarted()\"\r\n                (imageLoaded)=\"onImageLoaded()\"\r\n                (imageLoadError)=\"onImageLoadError()\"\r\n            />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    @if(!hideContent()){\r\n    <bsu-blob-viewer\r\n        [file]=\"file\"\r\n        [type]=\"type\"\r\n        [style.width]=\"width\"\r\n        fillEmptySpace\r\n        [disable]=\"deviceSize !== 's'\"\r\n        [decrement]=\"'25px'\"\r\n    ></bsu-blob-viewer>\r\n    }@else{ }\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\" [class.hideContent]=\"hideContent()\" [class.selected]=\"selected\">\r\n        <fd-card-content\r\n            style=\"text-align: center; padding: 0; margin: auto\"\r\n            [style.height]=\"effectiveCardContentHeight\"\r\n            [style.flex]=\"isThumbnail ? 0 : null\"\r\n        >\r\n            @if(hideContent() && file){\r\n            <figure fd-illustrated-message type=\"dialog\" [svgConfig]=\"sceneConfig\" svgAriaLabel=\"Illustration label\">\r\n                <figcaption fd-illustrated-message-figcaption>\r\n                    <h3 fd-illustrated-message-title>{{ 'Unable To Load File' | bbbTranslate }}</h3>\r\n                </figcaption>\r\n            </figure>\r\n            } @else{\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n            }\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;min-height:100%;flex-direction:column}.big-imgs-box{min-height:100%}.pics{position:relative;min-height:8rem}.image-loading-placeholder{position:absolute;z-index:1;inset:0;overflow:hidden;background:var(--sapGroup_ContentBackground, #fff)}.image-loading-thumbnail{width:100%!important;height:100%!important;opacity:.72;object-fit:contain}.image-loading-indicator{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--sapGroup_ContentBackground, #fff) 35%,transparent)}fd-card.hideContent{box-shadow:none}fd-card.selected{border:.25rem solid var(--sapList_SelectionBorderColor)}\n"] }]
         }], propDecorators: { fillWidth: [{
                 type: Input
             }], zoom: [{
@@ -5486,9 +5553,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }] } });
 
 const FILE_PREVIEW_SIZES = {
-    compact: { width: '30vw', maxWidth: null, maxHeight: null },
-    comfortable: { width: 'clamp(22rem, 45vw, 44rem)', maxWidth: '90vw', maxHeight: '70vh' },
-    large: { width: 'clamp(26rem, 65vw, 60rem)', maxWidth: '92vw', maxHeight: '80vh' }
+    compact: { width: '30vw', maxWidth: null, maxHeight: null, documentContentHeight: null },
+    comfortable: {
+        width: 'clamp(22rem, 45vw, 44rem)',
+        maxWidth: '90vw',
+        maxHeight: '70vh',
+        documentContentHeight: 'calc(70vh - 4rem)'
+    },
+    large: {
+        width: 'clamp(26rem, 65vw, 60rem)',
+        maxWidth: '92vw',
+        maxHeight: '80vh',
+        documentContentHeight: 'calc(80vh - 4rem)'
+    }
 };
 class FileViewerPopoverComponent extends BaseComponent {
     constructor() {
@@ -5498,17 +5575,28 @@ class FileViewerPopoverComponent extends BaseComponent {
         this.remove = new EventEmitter();
         this.hideFullScreen = false;
         this.popoverOpened = false;
+        this.viewportCenteredPositions = [
+            {
+                originX: 'center',
+                originY: 'center',
+                overlayX: 'center',
+                overlayY: 'center'
+            }
+        ];
     }
     get sizeConfig() {
         // مقدارِ نامعتبر (از سمتِ قالبِ لو-کدِ بدونِ تایپ) نباید undefined بدهد
         return FILE_PREVIEW_SIZES[this.previewSize] ?? FILE_PREVIEW_SIZES.compact;
     }
+    get isViewportBounded() {
+        return this.sizeConfig.maxHeight !== null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FileViewerPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FileViewerPopoverComponent, isStandalone: false, selector: "bsu-file-viewer-popover", inputs: { files: "files", file: "file", index: "index", deviceSize: "deviceSize", canDownload: "canDownload", disableRemove: "disableRemove", fdType: "fdType", attachmentViewType: "attachmentViewType", previewSize: "previewSize" }, outputs: { remove: "remove" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\r\n    <button\r\n        fd-button\r\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\r\n        [label]=\"attachmentViewType === 1 ? ('\u0645\u0634\u0627\u0647\u062F\u0647' | bbbTranslate) : file.FileName || ''\"\r\n        [title]=\"attachmentViewType === 1 ? ('\u0645\u0634\u0627\u0647\u062F\u0647' | bbbTranslate) : file.FileName || ''\"\r\n        [glyph]=\"attachmentViewType === 1 ? '' : 'attachment'\"\r\n        [fdMenu]=\"deviceSize === 's' || attachmentViewType === 1 ? false : true\"\r\n        [fdType]=\"fdType\"\r\n        class=\"btn-actionsheet\"\r\n        (click)=\"popoverOpened = true\"\r\n    >\r\n        <button\r\n            fd-button\r\n            glyph=\"download\"\r\n            fdType=\"transparent\"\r\n            downloadFiles\r\n            stopPropagation\r\n            [files]=\"file ? [file] : files\"\r\n        ></button>\r\n        @if (!disableRemove) {\r\n        <button fd-button fdType=\"transparent\" glyph=\"delete\" stopPropagation (click)=\"remove.emit()\"></button>\r\n        }\r\n    </button>\r\n\r\n    <fd-popover\r\n        #popoverMobile\r\n        [mobile]=\"true\"\r\n        [mobileConfig]=\"{ title: file?.FileName || 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\r\n    >\r\n        <ng-template #popoverBodyContent>\r\n            @if(popoverOpened){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\r\n            ></ng-container>\r\n            }\r\n        </ng-template>\r\n    </fd-popover>\r\n    <fd-popover #popoverLarge>\r\n        <fd-popover-body\r\n            class=\"file-viewer-popover-body\"\r\n            [maxWidth]=\"sizeConfig.maxWidth\"\r\n            [maxHeight]=\"sizeConfig.maxHeight\"\r\n        >\r\n            @if(popoverOpened){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</div>\r\n\r\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\r\n    <!-- <div fd-popover-body-header>\r\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n    <bsu-file-viewer-content\r\n        [file]=\"file\"\r\n        [width]=\"mobile ? '100vw' : sizeConfig.width\"\r\n        [cardMode]=\"true\"\r\n        [showContent]=\"true\"\r\n        [showFooter]=\"true\"\r\n        [deviceSize]=\"deviceSize || 's'\"\r\n        (cantView)=\"hideFullScreen = true\"\r\n        [class.mobile]=\"mobile\"\r\n    ></bsu-file-viewer-content>\r\n    @if (canDownload) {\r\n    <div fd-popover-body-footer>\r\n        <bsu-barsa-bar-download-file\r\n            [isMobile]=\"mobile\"\r\n            [popover]=\"popover\"\r\n            [files]=\"files?.length ? files : [file]\"\r\n            [file]=\"file\"\r\n            [selectedId]=\"file.Id\"\r\n            [deviceSize]=\"deviceSize || 's'\"\r\n            [hideFullScreen]=\"hideFullScreen\"\r\n        ></bsu-barsa-bar-download-file>\r\n    </div>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block}:host button ::ng-deep fd-icon.sap-icon--slim-arrow-down{display:none!important}.file-viewer-popover-body ::ng-deep .fd-popover__wrapper{max-height:inherit}.file-viewer-popover-body ::ng-deep bsu-file-viewer-content{min-height:auto}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[stopPropagation]" }, { kind: "component", type: i1$3.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight", "ariaModal"], outputs: ["onClose"] }, { 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: "directive", type: i6.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: BarsaBarDownloadFileComponent, selector: "bsu-barsa-bar-download-file", inputs: ["popover", "file", "files", "selectedId", "hideFullScreen", "isMobile", "canPrint", "selectedIndex", "deviceSize"] }, { 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: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files", "nozip"] }, { 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: FileViewerPopoverComponent, isStandalone: false, selector: "bsu-file-viewer-popover", inputs: { files: "files", file: "file", index: "index", deviceSize: "deviceSize", canDownload: "canDownload", disableRemove: "disableRemove", fdType: "fdType", attachmentViewType: "attachmentViewType", previewSize: "previewSize" }, outputs: { remove: "remove" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\r\n    <span #viewportAnchor class=\"file-viewer-viewport-anchor\" aria-hidden=\"true\"></span>\r\n    <button\r\n        fd-button\r\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\r\n        [label]=\"attachmentViewType === 1 ? ('\u0645\u0634\u0627\u0647\u062F\u0647' | bbbTranslate) : file.FileName || ''\"\r\n        [title]=\"attachmentViewType === 1 ? ('\u0645\u0634\u0627\u0647\u062F\u0647' | bbbTranslate) : file.FileName || ''\"\r\n        [glyph]=\"attachmentViewType === 1 ? '' : 'attachment'\"\r\n        [fdMenu]=\"deviceSize === 's' || attachmentViewType === 1 ? false : true\"\r\n        [fdType]=\"fdType\"\r\n        class=\"btn-actionsheet\"\r\n        (click)=\"popoverOpened = true\"\r\n    >\r\n        <button\r\n            fd-button\r\n            glyph=\"download\"\r\n            fdType=\"transparent\"\r\n            downloadFiles\r\n            stopPropagation\r\n            [files]=\"file ? [file] : files\"\r\n        ></button>\r\n        @if (!disableRemove) {\r\n        <button fd-button fdType=\"transparent\" glyph=\"delete\" stopPropagation (click)=\"remove.emit()\"></button>\r\n        }\r\n    </button>\r\n\r\n    <fd-popover\r\n        #popoverMobile\r\n        [mobile]=\"true\"\r\n        [mobileConfig]=\"{ title: file?.FileName || 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\r\n    >\r\n        <ng-template #popoverBodyContent>\r\n            @if(popoverOpened){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\r\n            ></ng-container>\r\n            }\r\n        </ng-template>\r\n    </fd-popover>\r\n    <fd-popover\r\n        #popoverLarge\r\n        [appendTo]=\"isViewportBounded ? viewportAnchor : null\"\r\n        [cdkPositions]=\"isViewportBounded ? viewportCenteredPositions : null\"\r\n        [noArrow]=\"isViewportBounded\"\r\n    >\r\n        <fd-popover-body\r\n            class=\"file-viewer-popover-body\"\r\n            [maxWidth]=\"sizeConfig.maxWidth\"\r\n            [maxHeight]=\"sizeConfig.maxHeight\"\r\n        >\r\n            @if(popoverOpened){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</div>\r\n\r\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\r\n    <!-- <div fd-popover-body-header>\r\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n    <bsu-file-viewer-content\r\n        [file]=\"file\"\r\n        [width]=\"mobile ? '100vw' : sizeConfig.width\"\r\n        [cardContentHeight]=\"mobile ? null : sizeConfig.documentContentHeight\"\r\n        [cardMode]=\"true\"\r\n        [showContent]=\"true\"\r\n        [showFooter]=\"true\"\r\n        [deviceSize]=\"deviceSize || 's'\"\r\n        (cantView)=\"hideFullScreen = true\"\r\n        [class.mobile]=\"mobile\"\r\n    ></bsu-file-viewer-content>\r\n    @if (canDownload) {\r\n    <div fd-popover-body-footer>\r\n        <bsu-barsa-bar-download-file\r\n            [isMobile]=\"mobile\"\r\n            [popover]=\"popover\"\r\n            [files]=\"files?.length ? files : [file]\"\r\n            [file]=\"file\"\r\n            [selectedId]=\"file.Id\"\r\n            [deviceSize]=\"deviceSize || 's'\"\r\n            [hideFullScreen]=\"hideFullScreen\"\r\n        ></bsu-barsa-bar-download-file>\r\n    </div>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block}:host button ::ng-deep fd-icon.sap-icon--slim-arrow-down{display:none!important}.file-viewer-popover-body ::ng-deep .fd-popover__wrapper{max-height:inherit}.file-viewer-popover-body ::ng-deep bsu-file-viewer-content{min-height:auto}.file-viewer-viewport-anchor{position:fixed;inset-block-start:50%;inset-inline-start:50%;width:0;height:0;pointer-events:none}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[stopPropagation]" }, { kind: "component", type: i1$3.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight", "ariaModal"], outputs: ["onClose"] }, { 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: "directive", type: i6.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: BarsaBarDownloadFileComponent, selector: "bsu-barsa-bar-download-file", inputs: ["popover", "file", "files", "selectedId", "hideFullScreen", "isMobile", "canPrint", "selectedIndex", "deviceSize"] }, { 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: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files", "nozip"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FileViewerPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-file-viewer-popover', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\r\n    <button\r\n        fd-button\r\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\r\n        [label]=\"attachmentViewType === 1 ? ('\u0645\u0634\u0627\u0647\u062F\u0647' | bbbTranslate) : file.FileName || ''\"\r\n        [title]=\"attachmentViewType === 1 ? ('\u0645\u0634\u0627\u0647\u062F\u0647' | bbbTranslate) : file.FileName || ''\"\r\n        [glyph]=\"attachmentViewType === 1 ? '' : 'attachment'\"\r\n        [fdMenu]=\"deviceSize === 's' || attachmentViewType === 1 ? false : true\"\r\n        [fdType]=\"fdType\"\r\n        class=\"btn-actionsheet\"\r\n        (click)=\"popoverOpened = true\"\r\n    >\r\n        <button\r\n            fd-button\r\n            glyph=\"download\"\r\n            fdType=\"transparent\"\r\n            downloadFiles\r\n            stopPropagation\r\n            [files]=\"file ? [file] : files\"\r\n        ></button>\r\n        @if (!disableRemove) {\r\n        <button fd-button fdType=\"transparent\" glyph=\"delete\" stopPropagation (click)=\"remove.emit()\"></button>\r\n        }\r\n    </button>\r\n\r\n    <fd-popover\r\n        #popoverMobile\r\n        [mobile]=\"true\"\r\n        [mobileConfig]=\"{ title: file?.FileName || 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\r\n    >\r\n        <ng-template #popoverBodyContent>\r\n            @if(popoverOpened){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\r\n            ></ng-container>\r\n            }\r\n        </ng-template>\r\n    </fd-popover>\r\n    <fd-popover #popoverLarge>\r\n        <fd-popover-body\r\n            class=\"file-viewer-popover-body\"\r\n            [maxWidth]=\"sizeConfig.maxWidth\"\r\n            [maxHeight]=\"sizeConfig.maxHeight\"\r\n        >\r\n            @if(popoverOpened){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</div>\r\n\r\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\r\n    <!-- <div fd-popover-body-header>\r\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n    <bsu-file-viewer-content\r\n        [file]=\"file\"\r\n        [width]=\"mobile ? '100vw' : sizeConfig.width\"\r\n        [cardMode]=\"true\"\r\n        [showContent]=\"true\"\r\n        [showFooter]=\"true\"\r\n        [deviceSize]=\"deviceSize || 's'\"\r\n        (cantView)=\"hideFullScreen = true\"\r\n        [class.mobile]=\"mobile\"\r\n    ></bsu-file-viewer-content>\r\n    @if (canDownload) {\r\n    <div fd-popover-body-footer>\r\n        <bsu-barsa-bar-download-file\r\n            [isMobile]=\"mobile\"\r\n            [popover]=\"popover\"\r\n            [files]=\"files?.length ? files : [file]\"\r\n            [file]=\"file\"\r\n            [selectedId]=\"file.Id\"\r\n            [deviceSize]=\"deviceSize || 's'\"\r\n            [hideFullScreen]=\"hideFullScreen\"\r\n        ></bsu-barsa-bar-download-file>\r\n    </div>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block}:host button ::ng-deep fd-icon.sap-icon--slim-arrow-down{display:none!important}.file-viewer-popover-body ::ng-deep .fd-popover__wrapper{max-height:inherit}.file-viewer-popover-body ::ng-deep bsu-file-viewer-content{min-height:auto}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"] }]
+            args: [{ selector: 'bsu-file-viewer-popover', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div style=\"display: flex; align-items: center; column-gap: 1px\">\r\n    <span #viewportAnchor class=\"file-viewer-viewport-anchor\" aria-hidden=\"true\"></span>\r\n    <button\r\n        fd-button\r\n        [fdPopoverTrigger]=\"deviceSize === 's' ? popoverMobile : popoverLarge\"\r\n        [label]=\"attachmentViewType === 1 ? ('\u0645\u0634\u0627\u0647\u062F\u0647' | bbbTranslate) : file.FileName || ''\"\r\n        [title]=\"attachmentViewType === 1 ? ('\u0645\u0634\u0627\u0647\u062F\u0647' | bbbTranslate) : file.FileName || ''\"\r\n        [glyph]=\"attachmentViewType === 1 ? '' : 'attachment'\"\r\n        [fdMenu]=\"deviceSize === 's' || attachmentViewType === 1 ? false : true\"\r\n        [fdType]=\"fdType\"\r\n        class=\"btn-actionsheet\"\r\n        (click)=\"popoverOpened = true\"\r\n    >\r\n        <button\r\n            fd-button\r\n            glyph=\"download\"\r\n            fdType=\"transparent\"\r\n            downloadFiles\r\n            stopPropagation\r\n            [files]=\"file ? [file] : files\"\r\n        ></button>\r\n        @if (!disableRemove) {\r\n        <button fd-button fdType=\"transparent\" glyph=\"delete\" stopPropagation (click)=\"remove.emit()\"></button>\r\n        }\r\n    </button>\r\n\r\n    <fd-popover\r\n        #popoverMobile\r\n        [mobile]=\"true\"\r\n        [mobileConfig]=\"{ title: file?.FileName || 'ShowFiles' | bbbTranslate, hasCloseButton: true }\"\r\n    >\r\n        <ng-template #popoverBodyContent>\r\n            @if(popoverOpened){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverMobile, mobile: true }\"\r\n            ></ng-container>\r\n            }\r\n        </ng-template>\r\n    </fd-popover>\r\n    <fd-popover\r\n        #popoverLarge\r\n        [appendTo]=\"isViewportBounded ? viewportAnchor : null\"\r\n        [cdkPositions]=\"isViewportBounded ? viewportCenteredPositions : null\"\r\n        [noArrow]=\"isViewportBounded\"\r\n    >\r\n        <fd-popover-body\r\n            class=\"file-viewer-popover-body\"\r\n            [maxWidth]=\"sizeConfig.maxWidth\"\r\n            [maxHeight]=\"sizeConfig.maxHeight\"\r\n        >\r\n            @if(popoverOpened){\r\n            <ng-container\r\n                *ngTemplateOutlet=\"popoverbodyTpl; context: { $implicit: popoverLarge, mobile: false }\"\r\n            ></ng-container>\r\n            }\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</div>\r\n\r\n<ng-template #popoverbodyTpl let-popover let-mobile=\"mobile\">\r\n    <!-- <div fd-popover-body-header>\r\n        <div fd-bar [cozy]=\"true\" id=\"popover-bar-header-3\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>{{ file.FileName }}</fd-bar-element>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n    <bsu-file-viewer-content\r\n        [file]=\"file\"\r\n        [width]=\"mobile ? '100vw' : sizeConfig.width\"\r\n        [cardContentHeight]=\"mobile ? null : sizeConfig.documentContentHeight\"\r\n        [cardMode]=\"true\"\r\n        [showContent]=\"true\"\r\n        [showFooter]=\"true\"\r\n        [deviceSize]=\"deviceSize || 's'\"\r\n        (cantView)=\"hideFullScreen = true\"\r\n        [class.mobile]=\"mobile\"\r\n    ></bsu-file-viewer-content>\r\n    @if (canDownload) {\r\n    <div fd-popover-body-footer>\r\n        <bsu-barsa-bar-download-file\r\n            [isMobile]=\"mobile\"\r\n            [popover]=\"popover\"\r\n            [files]=\"files?.length ? files : [file]\"\r\n            [file]=\"file\"\r\n            [selectedId]=\"file.Id\"\r\n            [deviceSize]=\"deviceSize || 's'\"\r\n            [hideFullScreen]=\"hideFullScreen\"\r\n        ></bsu-barsa-bar-download-file>\r\n    </div>\r\n    }\r\n</ng-template>\r\n", styles: [":host{display:block}:host button ::ng-deep fd-icon.sap-icon--slim-arrow-down{display:none!important}.file-viewer-popover-body ::ng-deep .fd-popover__wrapper{max-height:inherit}.file-viewer-popover-body ::ng-deep bsu-file-viewer-content{min-height:auto}.file-viewer-viewport-anchor{position:fixed;inset-block-start:50%;inset-inline-start:50%;width:0;height:0;pointer-events:none}.btn-actionsheet{width:100%!important;max-width:100%!important}\n"] }]
         }], propDecorators: { files: [{
                 type: Input
             }], file: [{
@@ -6149,6 +6237,13 @@ class CardItemComponent extends BaseViewItemPropsComponent {
         super(...arguments);
         this.cardMedia = false;
         this.isCardTypeBanner = false;
+        /**
+         * بنر بدون IsOverlay: دقیقاً رفتارِ قبلی (کانتینرِ عنوان/زیرعنوان همیشه رندر می‌شود).
+         * بنر با IsOverlay=true: حالتِ overlay فاندامنتال (`[isOverlay]` روی
+         * fd-card-media-content-container) اعمال می‌شود، ولی اگر نه عنوان و نه زیرعنوان تنظیم
+         * نشده باشند، کلِ کانتینر رندر نمی‌شود و فقط عکسِ بنر می‌ماند.
+         */
+        this.showBannerContentContainer = false;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -6164,6 +6259,8 @@ class CardItemComponent extends BaseViewItemPropsComponent {
         this.contextMenuInFooter = setting.ContextMenuInFooter;
         setting.MediaField && (this.cardMedia = true);
         setting.CardType$Caption === 'banner' && (this.isCardTypeBanner = true);
+        const isOverlayWithoutTitles = setting.IsOverlay === true && !setting.TitleField && !setting.SubtitleField;
+        this.showBannerContentContainer = this.isCardTypeBanner && !isOverlayWithoutTitles;
         this.contextMenuEnabled =
             (this.contextMenuInFooter || this.deviceName !== 'desktop' || this.openOnClick) &&
                 this.contextMenuItems &&
@@ -6188,11 +6285,11 @@ 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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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            [preserveSelectionOnOpen]=\"isCheckList\"\r\n            [selectionContextVisible]=\"!isCheckList || isChecked\"\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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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$3.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: i3$1.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", "preserveSelectionOnOpen", "selectionContextVisible", "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    [class.card-media-overlay]=\"setting.IsOverlay === true\"\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(showBannerContentContainer){\r\n        <div\r\n            fd-card-media-content-container\r\n            [isOverlay]=\"setting.IsOverlay === true\"\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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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            [preserveSelectionOnOpen]=\"isCheckList\"\r\n            [selectionContextVisible]=\"!isCheckList || isChecked\"\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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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.fd-card--banner.card-media-overlay>fd-card-media{--fdCard_Media_Image_Container_Width: 100%}fd-card.fd-card--banner.card-media-overlay>fd-card-media .fd-card__media-image-container{z-index:auto}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$3.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: i3$1.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", "preserveSelectionOnOpen", "selectionContextVisible", "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,
-            args: [{ selector: 'bsu-card-item', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-card\r\n    [cardType]=\"setting.CardType$Caption\"\r\n    [interactive]=\"setting.IsInteractive === false ? false : true\"    \r\n    [class.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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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            [preserveSelectionOnOpen]=\"isCheckList\"\r\n            [selectionContextVisible]=\"!isCheckList || isChecked\"\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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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"] }]
+            args: [{ selector: 'bsu-card-item', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-card\r\n    [cardType]=\"setting.CardType$Caption\"\r\n    [interactive]=\"setting.IsInteractive === false ? false : true\"    \r\n    [class.openOnClick]=\"setting.openOnClick\"\r\n    [class.hide-header-border]=\"setting.HideHeaderBorder\"\r\n    [class.card-media-overlay]=\"setting.IsOverlay === true\"\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(showBannerContentContainer){\r\n        <div\r\n            fd-card-media-content-container\r\n            [isOverlay]=\"setting.IsOverlay === true\"\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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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            [preserveSelectionOnOpen]=\"isCheckList\"\r\n            [selectionContextVisible]=\"!isCheckList || isChecked\"\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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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                [preserveSelectionOnOpen]=\"isCheckList\"\r\n                [selectionContextVisible]=\"!isCheckList || isChecked\"\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.fd-card--banner.card-media-overlay>fd-card-media{--fdCard_Media_Image_Container_Width: 100%}fd-card.fd-card--banner.card-media-overlay>fd-card-media .fd-card__media-image-container{z-index:auto}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card fd-card-content ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.extra-footer{flex-wrap:wrap}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card.hide-header-border ::ng-deep fd-card-header fd-card-main-header>.fd-card__header-main{border:none}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"] }]
         }], propDecorators: { setting: [{
                 type: Input
             }], _quickViewTemplate: [{
@@ -11686,7 +11783,7 @@ 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    [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 }); }
+    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", "suppressTypeaheadOnCoarsePointer"], 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,
@@ -14994,13 +15091,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        } @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$3.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 }); }
+    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            [suppressTypeaheadOnCoarsePointer]=\"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$3.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", "suppressTypeaheadOnCoarsePointer"], 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        } @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"] }]
+                    }, 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            [suppressTypeaheadOnCoarsePointer]=\"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: [{