barsa-sap-ui 1.0.307 → 1.0.308

package/fesm2015/barsa-sap-ui.mjs

@@ -4122,46 +4122,13 @@ class ColumnRendererComponent extends BaseComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        this._setIconAndValue(this.column, this.mo);
         if (this.deviceSize === 's') {
             this._isSmall = true;
         }
     }
-    ngOnChanges(changes) {
-        super.ngOnChanges(changes);
-        const { mo } = changes;
-        if (mo && !mo.firstChange) {
-            this._setIconAndValue(this.column, mo.currentValue);
-            this._cdr.detectChanges();
-        }
-    }
-    _setIconAndValue(column, mo) {
-        const colName = column.Name;
-        const data = mo[colName];
-        let caption = mo[colName + '$Caption'];
-        let icon = mo[colName + '$Icon'];
-        if (typeof data === 'object' && data) {
-            if (data.$Caption) {
-                caption = data.$Caption;
-            }
-            icon = data.$Icon;
-            if (column.FieldTypeId === '6' && column.Tag === 'Image') {
-                // Column is enum with image
-                caption = '';
-            }
-        }
-        if (!caption && typeof data !== 'object') {
-            caption = data;
-        }
-        if (column.OnlyImage || (column.FieldTypeId === '6' && column.Tag === 'Image')) {
-            caption = '';
-        }
-        this.icon = icon;
-        this.value = caption || '';
-    }
 }
 ColumnRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ColumnRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", mo: "mo", index: "index", editMode: "editMode", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", rtl: "rtl", deviceName: "deviceName", deviceSize: "deviceSize" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\n        <!-- <fd-text\n            #fdText\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            [maxLines]=\"1\"\n            [text]=\"value\"\n            [fd-inline-help]=\"value\"\n            [disabled]=\"!fdText._hasMore\"\n        ></fd-text> -->\n\n        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            class=\"ellapsis\"\n            >{{ value | bbbTranslate }}</span\n        >\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div style=\"display: flex; flex-wrap: wrap; column-gap: 3px; row-gap: 3px\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "maxWidth"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i10.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ColumnRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", mo: "mo", index: "index", editMode: "editMode", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", rtl: "rtl", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\n        <!-- <fd-text\n            #fdText\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            [maxLines]=\"1\"\n            [text]=\"value\"\n            [fd-inline-help]=\"value\"\n            [disabled]=\"!fdText._hasMore\"\n        ></fd-text> -->\n\n        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            class=\"ellapsis\"\n            >{{ value | bbbTranslate }}</span\n        >\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div style=\"display: flex; flex-wrap: wrap; column-gap: 3px; row-gap: 3px\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "maxWidth"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i10.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ColumnRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"column\">\n    <ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n</ng-container>\n<ng-template #renderCellTemplate>\n    <ng-container [ngSwitch]=\"column.FieldTypeId\">\n        <ng-container *ngSwitchCase=\"'42'\">\n            <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'33'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'31'\">\n            <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'5'\">\n            <ng-container\n                *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #renderGeneral>\n    <div style=\"display: flex; width: 100%; height: 100%; align-items: center; justify-content: start\">\n        <img [attr.rtl]=\"rtl\" *ngIf=\"icon\" [src]=\"icon\" />\n        <!-- <fd-text\n            #fdText\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            [maxLines]=\"1\"\n            [text]=\"value\"\n            [fd-inline-help]=\"value\"\n            [disabled]=\"!fdText._hasMore\"\n        ></fd-text> -->\n\n        <span\n            *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n            ellapsisText\n            [ellapsisText]=\"value | bbbTranslate\"\n            [maxWidth]=\"deviceSize === 's' ? 220 : 0\"\n            class=\"ellapsis\"\n            >{{ value | bbbTranslate }}</span\n        >\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    <bsu-layout-control\n        *ngIf=\"controlUi\"\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    <ng-container *ngIf=\"mo[column.Name]\">\n        <div style=\"display: flex; flex-wrap: wrap; column-gap: 3px; row-gap: 3px\">\n            <ng-container *ngFor=\"let file of mo[column.Name].Files\">\n                <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #renderCellFileInfo>\n    <fd-avatar\n        *ngIf=\"mo[column.Name]\"\n        [transparent]=\"true\"\n        [size]=\"deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    <ng-container *ngIf=\"column.Extra?.TrueImage === ''\">{{ value }}</ng-container>\n    <img\n        *ngIf=\"column.Extra?.TrueImage !== ''\"\n        [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\"\n        aling=\"middle\"\n    />\n</ng-template>\n<ng-template #renderCellImage>\n    <fd-avatar\n        *ngIf=\"mo[column.Name] && mo[column.Name]['Url']\"\n        [size]=\"column.FieldTypeId === '42' ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}\n"] }]
@@ -4192,6 +4159,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }], deviceSize: [{
                 type: Input
+            }], value: [{
+                type: Input
+            }], icon: [{
+                type: Input
             }] } });
 
 class LyLayoutContainerOfRootComponent extends LayoutPanelBaseComponent {
@@ -4638,10 +4609,10 @@ class CardItemComponent extends BaseViewItemPropsComponent {
     }
 }
 CardItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CardItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CardItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CardItemComponent, selector: "bsu-card-item", inputs: { setting: "setting" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<fd-card\n    cardType=\"quickView\"\n    class=\"docs-flex-item-margin\"\n    [class.openOnClick]=\"setting.openOnClick\"\n    [style.width]=\"cardWidth\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n            context: {\n                $implicit: mo,\n                index: this.index\n            }\n        \"\n    ></ng-container>\n\n    <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify *ngIf=\"!noContent || contextMenuItems\">\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplate;\n                    context: {\n                        $implicit: mo,\n                        index: this.index\n                    }\n                \"\n            ></ng-container>\n        </div>\n        <ng-container *ngIf=\"contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\">\n            <div\n                ulvContextMenu\n                [allColumns]=\"allColumns\"\n                [footerMode]=\"true\"\n                [menuItems]=\"contextMenuItems\"\n                [styleIndex]=\"styleIndex\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></div>\n        </ng-container>\n    </fd-card-content>\n</fd-card>\n\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\"\n    ><div\n        *ngIf=\"column\"\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n    <fd-quick-view [id]=\"'id'\" *ngIf=\"!noContent\">\n        <fd-quick-view-group>\n            <fd-quick-view-subheader\n                *ngIf=\"setting.Avatar || setting.AvatarField || setting.TitleField || setting.SubtitleField\"\n            >\n                <fd-avatar\n                    *ngIf=\"setting.AvatarField || setting.Avatar\"\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [circle]=\"setting.CircleAvatar\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize ? avatarSize : deviceSize === 's' ? 's' : 'm'\"\n                    [glyph]=\"\n                        setting.Avatar ||\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n                <fd-quick-view-subheader-title *ngIf=\"setting.TitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.TitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-title>\n                <fd-quick-view-subheader-subtitle *ngIf=\"setting.SubtitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-subtitle>\n            </fd-quick-view-subheader>\n            <fd-quick-view-group-item *ngFor=\"let column of setting.FieldListMapped\">\n                <ng-container *ngIf=\"column\">\n                    <fd-quick-view-group-item-label>\n                        {{ column.Caption }}\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    columnTemplate;\n                                    context: {\n                                        $implicit: column,\n                                        layout94: layout$ | async,\n                                        mo: mo,\n                                        index: index\n                                    }\n                                \"\n                            ></ng-container>\n                        </div>\n                    </fd-quick-view-group-item-content>\n                </ng-container>\n            </fd-quick-view-group-item>\n            <fd-quick-view-group-item>\n                <fd-quick-view-group-item-content *ngIf=\"setting.DescriptionField\">\n                    <fd-quick-view-group-item-label *ngIf=\"inlineEditMode && allowInlineEdit\">\n                        {{ setting.DescriptionField?.Alias }}\n                    </fd-quick-view-group-item-label>\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.DescriptionField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </fd-quick-view-group-item-content>\n                <fd-quick-view-group-item-content\n                    class=\"action\"\n                    *ngIf=\"setting.ActionFieldNameField\"\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n                >\n                    <a fd-link>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.ActionFieldNameField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </a>\n                </fd-quick-view-group-item-content>\n            </fd-quick-view-group-item>\n        </fd-quick-view-group>\n    </fd-quick-view>\n</ng-template>\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.ContentComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.ContentComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n    <fd-card-header\n        *ngIf=\"\n            isCheckList ||\n            deviceName !== 'desktop' ||\n            (contextMenuItems && contextMenuItems.length > 0 && !contextMenuInFooter)\n        \"\n    >\n        <div\n            fd-card-title\n            [style.justify-content]=\"!isCheckList && canView && deviceName !== 'desktop' ? 'left' : 'space-between'\"\n        >\n            <div style=\"display: flex; justify-content: start; flex-grow: 1\">\n                <fd-checkbox\n                    *ngIf=\"isCheckList\"\n                    [name]=\"mo.$Caption\"\n                    [ngModel]=\"isChecked\"\n                    (ngModelChange)=\"onRowCheck()\"\n                ></fd-checkbox>\n                <div\n                    *ngIf=\"!contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\"\n                    ulvContextMenu\n                    [allColumns]=\"allColumns\"\n                    [menuItems]=\"contextMenuItems\"\n                    [styleIndex]=\"styleIndex\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></div>\n            </div>\n            <ng-container *ngIf=\"canView\">\n                <button\n                    fd-button\n                    class=\"view-btn\"\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </ng-container>\n        </div>\n    </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.HeaderComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.HeaderComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card fd-card-content{padding:0!important}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-card fd-card-header:hover{background:inherit}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i5$1.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$4.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i7$4.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i7$4.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$4.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i9$1.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i9$1.QuickViewSubheaderComponent, selector: "fd-quick-view-subheader" }, { kind: "component", type: i9$1.QuickViewSubheaderTitleComponent, selector: "fd-quick-view-subheader-title" }, { kind: "component", type: i9$1.QuickViewSubheaderSubtitleComponent, selector: "fd-quick-view-subheader-subtitle" }, { kind: "component", type: i9$1.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i9$1.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i9$1.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i9$1.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i9$1.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "rtl", "deviceName", "deviceSize"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CardItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CardItemComponent, selector: "bsu-card-item", inputs: { setting: "setting" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<fd-card\n    cardType=\"quickView\"\n    class=\"docs-flex-item-margin\"\n    [class.openOnClick]=\"setting.openOnClick\"\n    [style.width]=\"cardWidth\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n            context: {\n                $implicit: mo,\n                index: this.index\n            }\n        \"\n    ></ng-container>\n\n    <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify *ngIf=\"!noContent || contextMenuItems\">\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplate;\n                    context: {\n                        $implicit: mo,\n                        index: this.index\n                    }\n                \"\n            ></ng-container>\n        </div>\n        <ng-container *ngIf=\"contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\">\n            <div\n                ulvContextMenu\n                [allColumns]=\"allColumns\"\n                [footerMode]=\"true\"\n                [menuItems]=\"contextMenuItems\"\n                [styleIndex]=\"styleIndex\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></div>\n        </ng-container>\n    </fd-card-content>\n</fd-card>\n\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\"\n    ><div\n        *ngIf=\"column\"\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"column | columnValue: mo\"\n            [icon]=\"column | columnIcon: mo\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n    <fd-quick-view [id]=\"'id'\" *ngIf=\"!noContent\">\n        <fd-quick-view-group>\n            <fd-quick-view-subheader\n                *ngIf=\"setting.Avatar || setting.AvatarField || setting.TitleField || setting.SubtitleField\"\n            >\n                <fd-avatar\n                    *ngIf=\"setting.AvatarField || setting.Avatar\"\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [circle]=\"setting.CircleAvatar\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize ? avatarSize : deviceSize === 's' ? 's' : 'm'\"\n                    [glyph]=\"\n                        setting.Avatar ||\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n                <fd-quick-view-subheader-title *ngIf=\"setting.TitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.TitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-title>\n                <fd-quick-view-subheader-subtitle *ngIf=\"setting.SubtitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-subtitle>\n            </fd-quick-view-subheader>\n            <fd-quick-view-group-item *ngFor=\"let column of setting.FieldListMapped\">\n                <ng-container *ngIf=\"column\">\n                    <fd-quick-view-group-item-label>\n                        {{ column.Caption }}\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    columnTemplate;\n                                    context: {\n                                        $implicit: column,\n                                        layout94: layout$ | async,\n                                        mo: mo,\n                                        index: index\n                                    }\n                                \"\n                            ></ng-container>\n                        </div>\n                    </fd-quick-view-group-item-content>\n                </ng-container>\n            </fd-quick-view-group-item>\n            <fd-quick-view-group-item>\n                <fd-quick-view-group-item-content *ngIf=\"setting.DescriptionField\">\n                    <fd-quick-view-group-item-label *ngIf=\"inlineEditMode && allowInlineEdit\">\n                        {{ setting.DescriptionField?.Alias }}\n                    </fd-quick-view-group-item-label>\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.DescriptionField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </fd-quick-view-group-item-content>\n                <fd-quick-view-group-item-content\n                    class=\"action\"\n                    *ngIf=\"setting.ActionFieldNameField\"\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n                >\n                    <a fd-link>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.ActionFieldNameField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </a>\n                </fd-quick-view-group-item-content>\n            </fd-quick-view-group-item>\n        </fd-quick-view-group>\n    </fd-quick-view>\n</ng-template>\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.ContentComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.ContentComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n    <fd-card-header\n        *ngIf=\"\n            isCheckList ||\n            deviceName !== 'desktop' ||\n            (contextMenuItems && contextMenuItems.length > 0 && !contextMenuInFooter)\n        \"\n    >\n        <div\n            fd-card-title\n            [style.justify-content]=\"!isCheckList && canView && deviceName !== 'desktop' ? 'left' : 'space-between'\"\n        >\n            <div style=\"display: flex; justify-content: start; flex-grow: 1\">\n                <fd-checkbox\n                    *ngIf=\"isCheckList\"\n                    [name]=\"mo.$Caption\"\n                    [ngModel]=\"isChecked\"\n                    (ngModelChange)=\"onRowCheck()\"\n                ></fd-checkbox>\n                <div\n                    *ngIf=\"!contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\"\n                    ulvContextMenu\n                    [allColumns]=\"allColumns\"\n                    [menuItems]=\"contextMenuItems\"\n                    [styleIndex]=\"styleIndex\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></div>\n            </div>\n            <ng-container *ngIf=\"canView\">\n                <button\n                    fd-button\n                    class=\"view-btn\"\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </ng-container>\n        </div>\n    </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.HeaderComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.HeaderComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card fd-card-content{padding:0!important}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-card fd-card-header:hover{background:inherit}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i5$1.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$4.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i7$4.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i7$4.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i7$4.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i9$1.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i9$1.QuickViewSubheaderComponent, selector: "fd-quick-view-subheader" }, { kind: "component", type: i9$1.QuickViewSubheaderTitleComponent, selector: "fd-quick-view-subheader-title" }, { kind: "component", type: i9$1.QuickViewSubheaderSubtitleComponent, selector: "fd-quick-view-subheader-subtitle" }, { kind: "component", type: i9$1.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i9$1.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i9$1.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i9$1.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i9$1.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "rtl", "deviceName", "deviceSize", "value", "icon"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CardItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-card-item', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-card\n    cardType=\"quickView\"\n    class=\"docs-flex-item-margin\"\n    [class.openOnClick]=\"setting.openOnClick\"\n    [style.width]=\"cardWidth\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n            context: {\n                $implicit: mo,\n                index: this.index\n            }\n        \"\n    ></ng-container>\n\n    <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify *ngIf=\"!noContent || contextMenuItems\">\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplate;\n                    context: {\n                        $implicit: mo,\n                        index: this.index\n                    }\n                \"\n            ></ng-container>\n        </div>\n        <ng-container *ngIf=\"contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\">\n            <div\n                ulvContextMenu\n                [allColumns]=\"allColumns\"\n                [footerMode]=\"true\"\n                [menuItems]=\"contextMenuItems\"\n                [styleIndex]=\"styleIndex\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></div>\n        </ng-container>\n    </fd-card-content>\n</fd-card>\n\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\"\n    ><div\n        *ngIf=\"column\"\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n    <fd-quick-view [id]=\"'id'\" *ngIf=\"!noContent\">\n        <fd-quick-view-group>\n            <fd-quick-view-subheader\n                *ngIf=\"setting.Avatar || setting.AvatarField || setting.TitleField || setting.SubtitleField\"\n            >\n                <fd-avatar\n                    *ngIf=\"setting.AvatarField || setting.Avatar\"\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [circle]=\"setting.CircleAvatar\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize ? avatarSize : deviceSize === 's' ? 's' : 'm'\"\n                    [glyph]=\"\n                        setting.Avatar ||\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n                <fd-quick-view-subheader-title *ngIf=\"setting.TitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.TitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-title>\n                <fd-quick-view-subheader-subtitle *ngIf=\"setting.SubtitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-subtitle>\n            </fd-quick-view-subheader>\n            <fd-quick-view-group-item *ngFor=\"let column of setting.FieldListMapped\">\n                <ng-container *ngIf=\"column\">\n                    <fd-quick-view-group-item-label>\n                        {{ column.Caption }}\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    columnTemplate;\n                                    context: {\n                                        $implicit: column,\n                                        layout94: layout$ | async,\n                                        mo: mo,\n                                        index: index\n                                    }\n                                \"\n                            ></ng-container>\n                        </div>\n                    </fd-quick-view-group-item-content>\n                </ng-container>\n            </fd-quick-view-group-item>\n            <fd-quick-view-group-item>\n                <fd-quick-view-group-item-content *ngIf=\"setting.DescriptionField\">\n                    <fd-quick-view-group-item-label *ngIf=\"inlineEditMode && allowInlineEdit\">\n                        {{ setting.DescriptionField?.Alias }}\n                    </fd-quick-view-group-item-label>\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.DescriptionField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </fd-quick-view-group-item-content>\n                <fd-quick-view-group-item-content\n                    class=\"action\"\n                    *ngIf=\"setting.ActionFieldNameField\"\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n                >\n                    <a fd-link>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.ActionFieldNameField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </a>\n                </fd-quick-view-group-item-content>\n            </fd-quick-view-group-item>\n        </fd-quick-view-group>\n    </fd-quick-view>\n</ng-template>\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.ContentComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.ContentComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n    <fd-card-header\n        *ngIf=\"\n            isCheckList ||\n            deviceName !== 'desktop' ||\n            (contextMenuItems && contextMenuItems.length > 0 && !contextMenuInFooter)\n        \"\n    >\n        <div\n            fd-card-title\n            [style.justify-content]=\"!isCheckList && canView && deviceName !== 'desktop' ? 'left' : 'space-between'\"\n        >\n            <div style=\"display: flex; justify-content: start; flex-grow: 1\">\n                <fd-checkbox\n                    *ngIf=\"isCheckList\"\n                    [name]=\"mo.$Caption\"\n                    [ngModel]=\"isChecked\"\n                    (ngModelChange)=\"onRowCheck()\"\n                ></fd-checkbox>\n                <div\n                    *ngIf=\"!contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\"\n                    ulvContextMenu\n                    [allColumns]=\"allColumns\"\n                    [menuItems]=\"contextMenuItems\"\n                    [styleIndex]=\"styleIndex\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></div>\n            </div>\n            <ng-container *ngIf=\"canView\">\n                <button\n                    fd-button\n                    class=\"view-btn\"\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </ng-container>\n        </div>\n    </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.HeaderComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.HeaderComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card fd-card-content{padding:0!important}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-card fd-card-header:hover{background:inherit}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"] }]
+            args: [{ selector: 'bsu-card-item', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-card\n    cardType=\"quickView\"\n    class=\"docs-flex-item-margin\"\n    [class.openOnClick]=\"setting.openOnClick\"\n    [style.width]=\"cardWidth\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n            context: {\n                $implicit: mo,\n                index: this.index\n            }\n        \"\n    ></ng-container>\n\n    <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify *ngIf=\"!noContent || contextMenuItems\">\n        <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    setting.ContentComponent ? contentTemplateComponent : contentTemplate;\n                    context: {\n                        $implicit: mo,\n                        index: this.index\n                    }\n                \"\n            ></ng-container>\n        </div>\n        <ng-container *ngIf=\"contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\">\n            <div\n                ulvContextMenu\n                [allColumns]=\"allColumns\"\n                [footerMode]=\"true\"\n                [menuItems]=\"contextMenuItems\"\n                [styleIndex]=\"styleIndex\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></div>\n        </ng-container>\n    </fd-card-content>\n</fd-card>\n\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\"\n    ><div\n        *ngIf=\"column\"\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"column | columnValue: mo\"\n            [icon]=\"column | columnIcon: mo\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n    <fd-quick-view [id]=\"'id'\" *ngIf=\"!noContent\">\n        <fd-quick-view-group>\n            <fd-quick-view-subheader\n                *ngIf=\"setting.Avatar || setting.AvatarField || setting.TitleField || setting.SubtitleField\"\n            >\n                <fd-avatar\n                    *ngIf=\"setting.AvatarField || setting.Avatar\"\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [circle]=\"setting.CircleAvatar\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize ? avatarSize : deviceSize === 's' ? 's' : 'm'\"\n                    [glyph]=\"\n                        setting.Avatar ||\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n                <fd-quick-view-subheader-title *ngIf=\"setting.TitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.TitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-title>\n                <fd-quick-view-subheader-subtitle *ngIf=\"setting.SubtitleField\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            columnTemplate;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                index: index\n                            }\n                        \"\n                    ></ng-container>\n                </fd-quick-view-subheader-subtitle>\n            </fd-quick-view-subheader>\n            <fd-quick-view-group-item *ngFor=\"let column of setting.FieldListMapped\">\n                <ng-container *ngIf=\"column\">\n                    <fd-quick-view-group-item-label>\n                        {{ column.Caption }}\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    columnTemplate;\n                                    context: {\n                                        $implicit: column,\n                                        layout94: layout$ | async,\n                                        mo: mo,\n                                        index: index\n                                    }\n                                \"\n                            ></ng-container>\n                        </div>\n                    </fd-quick-view-group-item-content>\n                </ng-container>\n            </fd-quick-view-group-item>\n            <fd-quick-view-group-item>\n                <fd-quick-view-group-item-content *ngIf=\"setting.DescriptionField\">\n                    <fd-quick-view-group-item-label *ngIf=\"inlineEditMode && allowInlineEdit\">\n                        {{ setting.DescriptionField?.Alias }}\n                    </fd-quick-view-group-item-label>\n                    <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.DescriptionField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </fd-quick-view-group-item-content>\n                <fd-quick-view-group-item-content\n                    class=\"action\"\n                    *ngIf=\"setting.ActionFieldNameField\"\n                    (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n                >\n                    <a fd-link>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                columnTemplate;\n                                context: {\n                                    $implicit: setting.ActionFieldNameField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    index: index\n                                }\n                            \"\n                        ></ng-container>\n                    </a>\n                </fd-quick-view-group-item-content>\n            </fd-quick-view-group-item>\n        </fd-quick-view-group>\n    </fd-quick-view>\n</ng-template>\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.ContentComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.ContentComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n    <fd-card-header\n        *ngIf=\"\n            isCheckList ||\n            deviceName !== 'desktop' ||\n            (contextMenuItems && contextMenuItems.length > 0 && !contextMenuInFooter)\n        \"\n    >\n        <div\n            fd-card-title\n            [style.justify-content]=\"!isCheckList && canView && deviceName !== 'desktop' ? 'left' : 'space-between'\"\n        >\n            <div style=\"display: flex; justify-content: start; flex-grow: 1\">\n                <fd-checkbox\n                    *ngIf=\"isCheckList\"\n                    [name]=\"mo.$Caption\"\n                    [ngModel]=\"isChecked\"\n                    (ngModelChange)=\"onRowCheck()\"\n                ></fd-checkbox>\n                <div\n                    *ngIf=\"!contextMenuInFooter && contextMenuItems && contextMenuItems.length > 0\"\n                    ulvContextMenu\n                    [allColumns]=\"allColumns\"\n                    [menuItems]=\"contextMenuItems\"\n                    [styleIndex]=\"styleIndex\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></div>\n            </div>\n            <ng-container *ngIf=\"canView\">\n                <button\n                    fd-button\n                    class=\"view-btn\"\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </ng-container>\n        </div>\n    </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n    <bnrc-dynamic-item-component\n        [component]=\"setting.HeaderComponent\"\n        [mo]=\"mo\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [isChecked]=\"isChecked\"\n        [setting]=\"setting\"\n        [parameters]=\"setting.HeaderComponent.Settings\"\n        [editMode]=\"inlineEditMode\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [index]=\"index\"\n        [allColumns]=\"allColumns\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [canView]=\"canView\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n        [navigationArrow]=\"navigationArrow\"\n        [isCheckList]=\"isCheckList\"\n        (events)=\"onDynamicComponentEvents($event)\"\n    ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card fd-card-content{padding:0!important}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-card fd-card-header:hover{background:inherit}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"] }]
         }], propDecorators: { setting: [{
                 type: Input
             }] } });
@@ -4706,10 +4677,10 @@ class ListItemComponent extends BaseViewItemPropsComponent {
     }
 }
 ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ListItemComponent, selector: "bsu-list-item", inputs: { setting: "setting", isDisplayType: "isDisplayType" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\n></ng-container>\n<ng-template #standardTemplate let-mo>\n    <li\n        fd-list-item\n        class=\"standard-list-row\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [class.selected]=\"isChecked === true\"\n        [selected]=\"isChecked === true\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n        >\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n\n            <span fd-list-thumbnail *ngIf=\"setting.IconFont || setting.AvatarField\">\n                <fd-avatar\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n                    [circle]=\"true\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize\"\n                    [transparent]=\"true\"\n                    [glyph]=\"\n                        setting.IconFont ??\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n            </span>\n            <div fd-list-content>\n                <div fd-list-byline [twoCol]=\"true\">\n                    <div fd-list-title>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.TitleField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats,\n                                    index: 0\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.StatusField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n                <div fd-list-byline>\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderColumn;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                conditionalFormats: conditionalFormats\n                            }\n                        \"\n                    ></ng-container>\n                </div>\n            </div>\n            <bsu-ulv-context-menu\n                [menuItems]=\"contextMenuItems\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></bsu-ulv-context-menu>\n\n            <button\n                *ngIf=\"canView\"\n                (click)=\"onRowClick()\"\n                fdType=\"transparent\"\n                [glyph]=\"navigationArrow\"\n                fd-button\n            ></button>\n        </a>\n    </li>\n</ng-template>\n<ng-template #displayTemplate let-mo>\n    <li\n        class=\"display\"\n        fd-list-item\n        [interactive]=\"false\"\n        *ngIf=\"!mo.parent || mo.parent?.expanded\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            style=\"cursor: default\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n            style=\"column-gap: 3px\"\n        >\n            <img\n                *ngIf=\"setting.AvatarField\"\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\n                style=\"width: 24px; height: 24px\"\n            />\n            <i\n                fd-list-icon\n                *ngIf=\"setting.IconFont\"\n                [glyph]=\"setting.IconFont\"\n                [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n            >\n            </i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && inlineEditMode && isChecked\" glyph=\"edit\"></i>\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n            <span fd-list-title>\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.TitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: 0\n                        }\n                    \"\n                ></ng-container>\n            </span>\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.SubtitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: index\n                        }\n                    \"\n                ></ng-container>\n                <bsu-ulv-context-menu\n                    [menuItems]=\"contextMenuItems\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></bsu-ulv-context-menu>\n                <button\n                    *ngIf=\"canView\"\n                    fd-button\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </span>\n        </a>\n    </li>\n</ng-template>\n<ng-template\n    #renderColumn\n    let-column\n    let-mo=\"mo\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-index=\"index\"\n    let-layout94=\"layout94\"\n>\n    <ng-container *ngIf=\"column\">\n        <div\n            #divEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"divEl\"\n            [dbName]=\"column.Name\"\n        >\n            <bsu-column-renderer\n                [mo]=\"mo\"\n                [column]=\"column\"\n                [editMode]=\"inlineEditMode && allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [controlUi]=\"column.Caption | controlUi: layout94\"\n                (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n                (keyup.esc)=\"onEditFormPanelCancel($event)\"\n                (keydown.Tab)=\"onTabKeyDown($event, index)\"\n                [formLayoutShowLabel]=\"true\"\n            ></bsu-column-renderer>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [":host .display ::ng-deep .fd-list__secondary{align-items:center;justify-content:stretch;display:flex}:host .display bsu-ulv-context-menu{margin:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "directive", type: i6$1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i6$1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i6$1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "rtl", "deviceName", "deviceSize"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ListItemComponent, selector: "bsu-list-item", inputs: { setting: "setting", isDisplayType: "isDisplayType" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\n></ng-container>\n<ng-template #standardTemplate let-mo>\n    <li\n        fd-list-item\n        class=\"standard-list-row\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [class.selected]=\"isChecked === true\"\n        [selected]=\"isChecked === true\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n        >\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n\n            <span fd-list-thumbnail *ngIf=\"setting.IconFont || setting.AvatarField\">\n                <fd-avatar\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n                    [circle]=\"true\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize\"\n                    [transparent]=\"true\"\n                    [glyph]=\"\n                        setting.IconFont ??\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n            </span>\n            <div fd-list-content>\n                <div fd-list-byline [twoCol]=\"true\">\n                    <div fd-list-title>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.TitleField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats,\n                                    index: 0\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.StatusField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n                <div fd-list-byline>\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderColumn;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                conditionalFormats: conditionalFormats\n                            }\n                        \"\n                    ></ng-container>\n                </div>\n            </div>\n            <bsu-ulv-context-menu\n                [menuItems]=\"contextMenuItems\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></bsu-ulv-context-menu>\n\n            <button\n                *ngIf=\"canView\"\n                (click)=\"onRowClick()\"\n                fdType=\"transparent\"\n                [glyph]=\"navigationArrow\"\n                fd-button\n            ></button>\n        </a>\n    </li>\n</ng-template>\n<ng-template #displayTemplate let-mo>\n    <li\n        class=\"display\"\n        fd-list-item\n        [interactive]=\"false\"\n        *ngIf=\"!mo.parent || mo.parent?.expanded\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            style=\"cursor: default\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n            style=\"column-gap: 3px\"\n        >\n            <img\n                *ngIf=\"setting.AvatarField\"\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\n                style=\"width: 24px; height: 24px\"\n            />\n            <i\n                fd-list-icon\n                *ngIf=\"setting.IconFont\"\n                [glyph]=\"setting.IconFont\"\n                [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n            >\n            </i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && inlineEditMode && isChecked\" glyph=\"edit\"></i>\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n            <span fd-list-title>\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.TitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: 0\n                        }\n                    \"\n                ></ng-container>\n            </span>\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.SubtitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: index\n                        }\n                    \"\n                ></ng-container>\n                <bsu-ulv-context-menu\n                    [menuItems]=\"contextMenuItems\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></bsu-ulv-context-menu>\n                <button\n                    *ngIf=\"canView\"\n                    fd-button\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </span>\n        </a>\n    </li>\n</ng-template>\n<ng-template\n    #renderColumn\n    let-column\n    let-mo=\"mo\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-index=\"index\"\n    let-layout94=\"layout94\"\n>\n    <ng-container *ngIf=\"column\">\n        <div\n            #divEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"divEl\"\n            [dbName]=\"column.Name\"\n        >\n            <bsu-column-renderer\n                [mo]=\"mo\"\n                [column]=\"column\"\n                [value]=\"column | columnValue: mo\"\n                [icon]=\"column | columnIcon: mo\"\n                [editMode]=\"inlineEditMode && allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [controlUi]=\"column.Caption | controlUi: layout94\"\n                (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n                (keyup.esc)=\"onEditFormPanelCancel($event)\"\n                (keydown.Tab)=\"onTabKeyDown($event, index)\"\n                [formLayoutShowLabel]=\"true\"\n            ></bsu-column-renderer>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [":host .display ::ng-deep .fd-list__secondary{align-items:center;justify-content:stretch;display:flex}:host .display bsu-ulv-context-menu{margin:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "directive", type: i6$1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i6$1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i6$1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "rtl", "deviceName", "deviceSize", "value", "icon"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-list-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\n></ng-container>\n<ng-template #standardTemplate let-mo>\n    <li\n        fd-list-item\n        class=\"standard-list-row\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [class.selected]=\"isChecked === true\"\n        [selected]=\"isChecked === true\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n        >\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n\n            <span fd-list-thumbnail *ngIf=\"setting.IconFont || setting.AvatarField\">\n                <fd-avatar\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n                    [circle]=\"true\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize\"\n                    [transparent]=\"true\"\n                    [glyph]=\"\n                        setting.IconFont ??\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n            </span>\n            <div fd-list-content>\n                <div fd-list-byline [twoCol]=\"true\">\n                    <div fd-list-title>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.TitleField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats,\n                                    index: 0\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.StatusField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n                <div fd-list-byline>\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderColumn;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                conditionalFormats: conditionalFormats\n                            }\n                        \"\n                    ></ng-container>\n                </div>\n            </div>\n            <bsu-ulv-context-menu\n                [menuItems]=\"contextMenuItems\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></bsu-ulv-context-menu>\n\n            <button\n                *ngIf=\"canView\"\n                (click)=\"onRowClick()\"\n                fdType=\"transparent\"\n                [glyph]=\"navigationArrow\"\n                fd-button\n            ></button>\n        </a>\n    </li>\n</ng-template>\n<ng-template #displayTemplate let-mo>\n    <li\n        class=\"display\"\n        fd-list-item\n        [interactive]=\"false\"\n        *ngIf=\"!mo.parent || mo.parent?.expanded\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            style=\"cursor: default\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n            style=\"column-gap: 3px\"\n        >\n            <img\n                *ngIf=\"setting.AvatarField\"\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\n                style=\"width: 24px; height: 24px\"\n            />\n            <i\n                fd-list-icon\n                *ngIf=\"setting.IconFont\"\n                [glyph]=\"setting.IconFont\"\n                [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n            >\n            </i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && inlineEditMode && isChecked\" glyph=\"edit\"></i>\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n            <span fd-list-title>\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.TitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: 0\n                        }\n                    \"\n                ></ng-container>\n            </span>\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.SubtitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: index\n                        }\n                    \"\n                ></ng-container>\n                <bsu-ulv-context-menu\n                    [menuItems]=\"contextMenuItems\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></bsu-ulv-context-menu>\n                <button\n                    *ngIf=\"canView\"\n                    fd-button\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </span>\n        </a>\n    </li>\n</ng-template>\n<ng-template\n    #renderColumn\n    let-column\n    let-mo=\"mo\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-index=\"index\"\n    let-layout94=\"layout94\"\n>\n    <ng-container *ngIf=\"column\">\n        <div\n            #divEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"divEl\"\n            [dbName]=\"column.Name\"\n        >\n            <bsu-column-renderer\n                [mo]=\"mo\"\n                [column]=\"column\"\n                [editMode]=\"inlineEditMode && allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [controlUi]=\"column.Caption | controlUi: layout94\"\n                (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n                (keyup.esc)=\"onEditFormPanelCancel($event)\"\n                (keydown.Tab)=\"onTabKeyDown($event, index)\"\n                [formLayoutShowLabel]=\"true\"\n            ></bsu-column-renderer>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [":host .display ::ng-deep .fd-list__secondary{align-items:center;justify-content:stretch;display:flex}:host .display bsu-ulv-context-menu{margin:auto}\n"] }]
+            args: [{ selector: 'bsu-list-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\n></ng-container>\n<ng-template #standardTemplate let-mo>\n    <li\n        fd-list-item\n        class=\"standard-list-row\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n        [class.selected]=\"isChecked === true\"\n        [selected]=\"isChecked === true\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n        >\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n\n            <span fd-list-thumbnail *ngIf=\"setting.IconFont || setting.AvatarField\">\n                <fd-avatar\n                    alterIcon=\"alt|content|backup|default-icon\"\n                    [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n                    [circle]=\"true\"\n                    [image]=\"\n                        setting.AvatarField\n                            ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n                            : ''\n                    \"\n                    [size]=\"avatarSize\"\n                    [transparent]=\"true\"\n                    [glyph]=\"\n                        setting.IconFont ??\n                        (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n                    \"\n                >\n                </fd-avatar>\n            </span>\n            <div fd-list-content>\n                <div fd-list-byline [twoCol]=\"true\">\n                    <div fd-list-title>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.TitleField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats,\n                                    index: 0\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                    <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                renderColumn;\n                                context: {\n                                    $implicit: setting.StatusField,\n                                    layout94: layout$ | async,\n                                    mo: mo,\n                                    conditionalFormats: conditionalFormats\n                                }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n                <div fd-list-byline>\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderColumn;\n                            context: {\n                                $implicit: setting.SubtitleField,\n                                layout94: layout$ | async,\n                                mo: mo,\n                                conditionalFormats: conditionalFormats\n                            }\n                        \"\n                    ></ng-container>\n                </div>\n            </div>\n            <bsu-ulv-context-menu\n                [menuItems]=\"contextMenuItems\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [mo]=\"mo\"\n                (commandClick)=\"onUlvCommand()\"\n            ></bsu-ulv-context-menu>\n\n            <button\n                *ngIf=\"canView\"\n                (click)=\"onRowClick()\"\n                fdType=\"transparent\"\n                [glyph]=\"navigationArrow\"\n                fd-button\n            ></button>\n        </a>\n    </li>\n</ng-template>\n<ng-template #displayTemplate let-mo>\n    <li\n        class=\"display\"\n        fd-list-item\n        [interactive]=\"false\"\n        *ngIf=\"!mo.parent || mo.parent?.expanded\"\n        (dblclick)=\"onRowClick()\"\n        (click)=\"onRowCheck()\"\n        [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n    >\n        <a\n            fd-list-link\n            [attr.rtl]=\"rtl\"\n            class=\"li-link\"\n            style=\"cursor: default\"\n            [class.checklist]=\"isCheckList\"\n            #aEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"aEl\"\n            style=\"column-gap: 3px\"\n        >\n            <img\n                *ngIf=\"setting.AvatarField\"\n                [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\n                style=\"width: 24px; height: 24px\"\n            />\n            <i\n                fd-list-icon\n                *ngIf=\"setting.IconFont\"\n                [glyph]=\"setting.IconFont\"\n                [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n            >\n            </i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></i>\n            <i fd-list-icon *ngIf=\"!setting.IconFont && inlineEditMode && isChecked\" glyph=\"edit\"></i>\n            <fd-checkbox\n                *ngIf=\"isCheckList\"\n                [name]=\"mo.$Caption\"\n                [ngModel]=\"isChecked\"\n                (change)=\"onRowCheck2($event)\"\n            ></fd-checkbox>\n            <span fd-list-title>\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.TitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: 0\n                        }\n                    \"\n                ></ng-container>\n            </span>\n            <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderColumn;\n                        context: {\n                            $implicit: setting.SubtitleField,\n                            conditionalFormats: conditionalFormats,\n                            layout94: layout$ | async,\n                            mo: mo,\n                            index: index\n                        }\n                    \"\n                ></ng-container>\n                <bsu-ulv-context-menu\n                    [menuItems]=\"contextMenuItems\"\n                    [conditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                    [mo]=\"mo\"\n                    (commandClick)=\"onUlvCommand()\"\n                ></bsu-ulv-context-menu>\n                <button\n                    *ngIf=\"canView\"\n                    fd-button\n                    (click)=\"onRowClick()\"\n                    [glyph]=\"navigationArrow\"\n                    fdType=\"transparent\"\n                ></button>\n            </span>\n        </a>\n    </li>\n</ng-template>\n<ng-template\n    #renderColumn\n    let-column\n    let-mo=\"mo\"\n    let-conditionalFormats=\"conditionalFormats\"\n    let-index=\"index\"\n    let-layout94=\"layout94\"\n>\n    <ng-container *ngIf=\"column\">\n        <div\n            #divEl\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [styleIndex]=\"styleIndex\"\n            [hostEl]=\"divEl\"\n            [dbName]=\"column.Name\"\n        >\n            <bsu-column-renderer\n                [mo]=\"mo\"\n                [column]=\"column\"\n                [value]=\"column | columnValue: mo\"\n                [icon]=\"column | columnIcon: mo\"\n                [editMode]=\"inlineEditMode && allowInlineEdit\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [controlUi]=\"column.Caption | controlUi: layout94\"\n                (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n                (keyup.esc)=\"onEditFormPanelCancel($event)\"\n                (keydown.Tab)=\"onTabKeyDown($event, index)\"\n                [formLayoutShowLabel]=\"true\"\n            ></bsu-column-renderer>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [":host .display ::ng-deep .fd-list__secondary{align-items:center;justify-content:stretch;display:flex}:host .display bsu-ulv-context-menu{margin:auto}\n"] }]
         }], propDecorators: { setting: [{
                 type: Input
             }], isDisplayType: [{
@@ -4905,10 +4876,10 @@ class BarsaTableColumnComponent extends BaseColumnPropsComponent {
     }
 }
 BarsaTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTableColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BarsaTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", providers: [FormPanelService, ColumnService], usesInheritance: true, ngImport: i0, template: "<div\n    [class.editMode]=\"editMode\"\n    style=\"display: flex; width: 100%\"\n    [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n    <ng-container *ngIf=\"customComponent; else columnRendererTpl\">\n        <bnrc-dynamic-item-component\n            [component]=\"customComponent\"\n            [mo]=\"mo\"\n            [isChecked]=\"isChecked\"\n            [setting]=\"detailsComponentSetting\"\n            [parameters]=\"customComponent.Settings\"\n            [column]=\"column\"\n            [editMode]=\"editMode\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [allColumns]=\"allColumns\"\n        ></bnrc-dynamic-item-component>\n    </ng-container>\n    <ng-template #columnRendererTpl>\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [editMode]=\"editMode\"\n            [isChecked]=\"isChecked\"\n            [index]=\"index\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [formLayoutShowLabel]=\"false\"\n            [deviceSize]=\"deviceSize\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"save.emit($event)\"\n            (keyup.esc)=\"cancel.emit($event)\"\n            (keydown.Tab)=\"tab.emit($event)\"\n        ></bsu-column-renderer>\n    </ng-template>\n\n    <ng-container *ngIf=\"editMode\">\n        <ng-container *ngFor=\"let fieldCaption of column.$MergedFieldsToColumn\">\n            <ng-container *ngIf=\"fieldCaption | controlUi: layout94 as layoutConfig\">\n                <bsu-layout-control\n                    [caption]=\"fieldCaption\"\n                    [config]=\"layoutConfig\"\n                    [showLabel]=\"false\"\n                    [inlineEdit]=\"true\"\n                    (keyup.control.enter)=\"save.emit($event)\"\n                    (keyup.esc)=\"cancel.emit($event)\"\n                    (keydown.Tab)=\"tab.emit($event)\"\n                ></bsu-layout-control>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "rtl", "deviceName", "deviceSize"] }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", providers: [FormPanelService, ColumnService], usesInheritance: true, ngImport: i0, template: "<div\n    [class.editMode]=\"editMode\"\n    style=\"display: flex; width: 100%\"\n    [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n    <ng-container *ngIf=\"customComponent; else columnRendererTpl\">\n        <bnrc-dynamic-item-component\n            [component]=\"customComponent\"\n            [mo]=\"mo\"\n            [isChecked]=\"isChecked\"\n            [setting]=\"detailsComponentSetting\"\n            [parameters]=\"customComponent.Settings\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [allColumns]=\"allColumns\"\n        ></bnrc-dynamic-item-component>\n    </ng-container>\n    <ng-template #columnRendererTpl>\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [isChecked]=\"isChecked\"\n            [index]=\"index\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [formLayoutShowLabel]=\"false\"\n            [deviceSize]=\"deviceSize\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"save.emit($event)\"\n            (keyup.esc)=\"cancel.emit($event)\"\n            (keydown.Tab)=\"tab.emit($event)\"\n        ></bsu-column-renderer>\n    </ng-template>\n\n    <ng-container *ngIf=\"editMode\">\n        <ng-container *ngFor=\"let fieldCaption of column.$MergedFieldsToColumn\">\n            <ng-container *ngIf=\"fieldCaption | controlUi: layout94 as layoutConfig\">\n                <bsu-layout-control\n                    [caption]=\"fieldCaption\"\n                    [config]=\"layoutConfig\"\n                    [showLabel]=\"false\"\n                    [inlineEdit]=\"true\"\n                    (keyup.control.enter)=\"save.emit($event)\"\n                    (keyup.esc)=\"cancel.emit($event)\"\n                    (keydown.Tab)=\"tab.emit($event)\"\n                ></bsu-layout-control>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "rtl", "deviceName", "deviceSize", "value", "icon"] }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTableColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-table-column', providers: [FormPanelService, ColumnService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [class.editMode]=\"editMode\"\n    style=\"display: flex; width: 100%\"\n    [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n    <ng-container *ngIf=\"customComponent; else columnRendererTpl\">\n        <bnrc-dynamic-item-component\n            [component]=\"customComponent\"\n            [mo]=\"mo\"\n            [isChecked]=\"isChecked\"\n            [setting]=\"detailsComponentSetting\"\n            [parameters]=\"customComponent.Settings\"\n            [column]=\"column\"\n            [editMode]=\"editMode\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [allColumns]=\"allColumns\"\n        ></bnrc-dynamic-item-component>\n    </ng-container>\n    <ng-template #columnRendererTpl>\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [editMode]=\"editMode\"\n            [isChecked]=\"isChecked\"\n            [index]=\"index\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [formLayoutShowLabel]=\"false\"\n            [deviceSize]=\"deviceSize\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"save.emit($event)\"\n            (keyup.esc)=\"cancel.emit($event)\"\n            (keydown.Tab)=\"tab.emit($event)\"\n        ></bsu-column-renderer>\n    </ng-template>\n\n    <ng-container *ngIf=\"editMode\">\n        <ng-container *ngFor=\"let fieldCaption of column.$MergedFieldsToColumn\">\n            <ng-container *ngIf=\"fieldCaption | controlUi: layout94 as layoutConfig\">\n                <bsu-layout-control\n                    [caption]=\"fieldCaption\"\n                    [config]=\"layoutConfig\"\n                    [showLabel]=\"false\"\n                    [inlineEdit]=\"true\"\n                    (keyup.control.enter)=\"save.emit($event)\"\n                    (keyup.esc)=\"cancel.emit($event)\"\n                    (keydown.Tab)=\"tab.emit($event)\"\n                ></bsu-layout-control>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"] }]
+            args: [{ selector: 'bsu-barsa-table-column', providers: [FormPanelService, ColumnService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [class.editMode]=\"editMode\"\n    style=\"display: flex; width: 100%\"\n    [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n    <ng-container *ngIf=\"customComponent; else columnRendererTpl\">\n        <bnrc-dynamic-item-component\n            [component]=\"customComponent\"\n            [mo]=\"mo\"\n            [isChecked]=\"isChecked\"\n            [setting]=\"detailsComponentSetting\"\n            [parameters]=\"customComponent.Settings\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [allColumns]=\"allColumns\"\n        ></bnrc-dynamic-item-component>\n    </ng-container>\n    <ng-template #columnRendererTpl>\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"value\"\n            [icon]=\"icon\"\n            [editMode]=\"editMode\"\n            [isChecked]=\"isChecked\"\n            [index]=\"index\"\n            [rtl]=\"rtl\"\n            [deviceName]=\"deviceName\"\n            [formLayoutShowLabel]=\"false\"\n            [deviceSize]=\"deviceSize\"\n            [controlUi]=\"column.Caption | controlUi: layout94\"\n            (keyup.control.enter)=\"save.emit($event)\"\n            (keyup.esc)=\"cancel.emit($event)\"\n            (keydown.Tab)=\"tab.emit($event)\"\n        ></bsu-column-renderer>\n    </ng-template>\n\n    <ng-container *ngIf=\"editMode\">\n        <ng-container *ngFor=\"let fieldCaption of column.$MergedFieldsToColumn\">\n            <ng-container *ngIf=\"fieldCaption | controlUi: layout94 as layoutConfig\">\n                <bsu-layout-control\n                    [caption]=\"fieldCaption\"\n                    [config]=\"layoutConfig\"\n                    [showLabel]=\"false\"\n                    [inlineEdit]=\"true\"\n                    (keyup.control.enter)=\"save.emit($event)\"\n                    (keyup.esc)=\"cancel.emit($event)\"\n                    (keydown.Tab)=\"tab.emit($event)\"\n                ></bsu-layout-control>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"] }]
         }] });
 
 class BarsaColumnIndicatorComponent extends BaseComponent {
@@ -4947,10 +4918,10 @@ class BarsaTableRowComponent extends BaseViewItemPropsComponent {
     }
 }
 BarsaTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BarsaTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTableRowComponent, selector: "bsu-barsa-table-row", inputs: { showDetailsInRow: "showDetailsInRow", detailsComponent: "detailsComponent", detailsColumns: "detailsColumns", detailsText: "detailsText", columnComponents: "columnComponents" }, providers: [FormPanelService], viewQueries: [{ propertyName: "detailsFormItems", first: true, predicate: ["detailsFormItems"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<tr\n    [class.row-error]=\"hasError\"\n    [class.showdetails-on]=\"!detailsCollapsed\"\n    #trEl\n    *ngIf=\"(!mo.$Parent || parentExpanded) && visibility !== false\"\n    fd-table-row\n    [activable]=\"false\"\n    [hoverable]=\"false\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"trEl\"\n    [main]=\"true\"\n    [focusable]=\"true\"\n    [attr.aria-selected]=\"isChecked\"\n    [focusable]=\"!inlineEditMode || !allowInlineEdit\"\n    [class.brule-message]=\"bruleActionMessage || workflowState?.errorText\"\n    [class.workflow-pending]=\"workflowState?.state === 'Pending'\"\n>\n    <ng-container *ngIf=\"mo.$Group || mo.$Group === ''; else renderRow\">\n        <td\n            [style.padding-right]=\"rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n            [style.padding-left]=\"!rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n            fd-table-cell\n            [attr.colspan]=\"canView ? columnsCount + 1 : columnsCount\"\n            class=\"row-group\"\n            [class.mobile-mode]=\"secondaryColumns?.length\"\n            [attr.level]=\"level\"\n            [class.root-group]=\"level === 0\"\n        >\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [glyph]=\"expanded !== false ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n                class=\"cell-expand\"\n                [disabled]=\"inlineEditMode\"\n                (click)=\"onExpandClick()\"\n            ></button>\n            {{ mo.$Group }}\n        </td>\n    </ng-container>\n    <ng-template #renderRow>\n        <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n        <td fd-table-cell *ngIf=\"isCheckList\">\n            <div\n                *ngIf=\"workflowState?.state === 'Pending'\"\n                style=\"position: absolute; left: 0; right: 0; bottom: 0; top: 0\"\n            >\n                <bsu-mask [marginTop]=\"'20px'\" [size]=\"'s'\"></bsu-mask>\n            </div>\n\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n        </td>\n        <td\n            fd-table-cell\n            class=\"single-select\"\n            *ngIf=\"!isCheckList\"\n            (click)=\"onRowCheck()\"\n            style=\"padding: 0; text-align: center\"\n        >\n            <ng-container\n                *ngIf=\"inlineEditMode && allowInlineEdit && (hasError || saving || saved); else iconStateTemplate\"\n            >\n                <fd-icon *ngIf=\"hasError\" class=\"save-error\" glyph=\"error\"></fd-icon>\n                <fd-busy-indicator\n                    *ngIf=\"saving\"\n                    [loading]=\"true\"\n                    [size]=\"'s'\"\n                    title=\"record saving\"\n                ></fd-busy-indicator>\n                <fd-icon *ngIf=\"saved\" class=\"save-success\" glyph=\"accept\"></fd-icon>\n            </ng-container>\n            <ng-template #iconStateTemplate>\n                <fd-icon *ngIf=\"mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></fd-icon>\n                <fd-icon *ngIf=\"inlineEditMode && allowInlineEdit && isChecked\" glyph=\"edit\"></fd-icon>\n            </ng-template>\n        </td>\n        <ng-container *ngFor=\"let column of columns; let columnIndex = index\">\n            <td\n                *ngIf=\"(rowIndicator && columnIndex > 0) || !rowIndicator\"\n                [attr.dbName]=\"column.Name\"\n                #tdEl\n                fd-table-cell\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [hostEl]=\"tdEl\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"column.Name\"\n                [focusable]=\"false\"\n                (click)=\"onRowCheck()\"\n                (dblclick)=\"onRowClick()\"\n                [hoverable]=\"inlineEditMode && allowInlineEdit\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        columnTemplate;\n                        context: {\n                            $implicit: column,\n                            mo: mo,\n                            index: columnIndex,\n                            inlineEditMode: inlineEditMode,\n                            layout94: layout$ | async\n                        }\n                    \"\n                ></ng-container>\n            </td>\n        </ng-container>\n        <td\n            class=\"col-context-menu\"\n            *ngIf=\"contextMenuItems?.length && (!inlineEditMode || !allowInlineEdit)\"\n            fd-table-cell\n        >\n            <bsu-ulv-context-menu\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [mo]=\"mo\"\n                [index]=\"index\"\n                (commandClick)=\"onUlvCommand()\"\n                [deviceName]=\"deviceName\"\n                [menuItems]=\"contextMenuItems\"\n                [allColumns]=\"allColumns\"\n            ></bsu-ulv-context-menu>\n        </td>\n        <td\n            class=\"col-details\"\n            fd-table-cell\n            [fitContent]=\"true\"\n            *ngIf=\"showDetailsInRow && (!inlineEditMode || !allowInlineEdit)\"\n        >\n            <button\n                *ngIf=\"detailsComponent?.Selector || cartableParams?.moId\"\n                fd-button\n                [label]=\"(detailsCollapsed ? detailsText : 'Hide') | bbbTranslate\"\n                [fdType]=\"'transparent'\"\n                (click)=\"onRowDetails()\"\n            ></button>\n        </td>\n        <td\n            class=\"col-view\"\n            fd-table-cell\n            [fitContent]=\"true\"\n            *ngIf=\"!hideOpenIcon && canView && (!inlineEditMode || !allowInlineEdit)\"\n        >\n            <button\n                fd-button\n                [glyph]=\"navigationArrow\"\n                [navigation]=\"true\"\n                [fdType]=\"'transparent'\"\n                role=\"presentation\"\n                (click)=\"onRowClick()\"\n            ></button>\n        </td>\n    </ng-template>\n</tr>\n\n<tr\n    #trEl\n    *ngIf=\"secondaryColumns?.length && !mo.$Group && (!mo.$Parent || parentExpanded) && visibility !== false\"\n    fd-table-row\n    [secondary]=\"true\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"trEl\"\n    [attr.aria-selected]=\"isChecked && !inlineEditMode ? true : false\"\n>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell class=\"single-select\" *ngIf=\"!isCheckList\" (click)=\"onRowCheck()\"></td>\n    <td fd-table-cell colspan=\"100%\" (click)=\"onRowCheck()\">\n        <p\n            #pEl\n            fd-table-text\n            *ngFor=\"let column of secondaryColumns; let columnIndex = index; trackBy: _trackByColumn\"\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [hostEl]=\"pEl\"\n            [styleIndex]=\"styleIndex\"\n            [dbName]=\"column.Name\"\n        >\n            <label fd-form-label>{{ column.Caption }} :</label>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: {\n                        $implicit: column,\n                        mo: mo,\n                        index: columnIndex,\n                        inlineEditMode: inlineEditMode,\n                        layout94: layout$ | async\n                    }\n                \"\n            ></ng-container>\n        </p>\n    </td>\n</tr>\n<tr *ngIf=\"!detailsCollapsed && cartableParams?.moId\" fd-table-row class=\"showdetails\" [attr.aria-selected]=\"isChecked\">\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell (click)=\"onRowCheck()\"></td>\n    <td\n        (click)=\"onRowCheck()\"\n        fd-table-cell\n        [attr.colspan]=\"\n            columns.length + 1 + (contextMenuItems.length ? 1 : 0) + (canView ? 1 : 0) + (showDetailsInRow ? 1 : 0)\n        \"\n    >\n        <ng-container>\n            <bnrc-form\n                (click)=\"OnCartableFormClick($event)\"\n                class=\"cartable-template\"\n                [params]=\"cartableParams\"\n                (formClose)=\"onCartableFormClosed()\"\n            ></bnrc-form>\n        </ng-container>\n    </td>\n</tr>\n<tr\n    *ngIf=\"!detailsCollapsed && detailsComponent?.Selector\"\n    fd-table-row\n    class=\"showdetails\"\n    [attr.aria-selected]=\"isChecked\"\n>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell (click)=\"onRowCheck()\"></td>\n    <td\n        (click)=\"onRowCheck()\"\n        fd-table-cell\n        [attr.colspan]=\"\n            columns.length + 1 + (contextMenuItems.length ? 1 : 0) + (canView ? 1 : 0) + (showDetailsInRow ? 1 : 0)\n        \"\n    >\n        <ng-container *ngTemplateOutlet=\"detailsColumnsTemplate\"></ng-container>\n        <ng-container *ngIf=\"detailsComponent && detailsComponent.Selector\">\n            <bnrc-dynamic-item-component\n                [component]=\"detailsComponent\"\n                [mo]=\"mo\"\n                [isChecked]=\"isChecked\"\n                [setting]=\"detailsComponentSetting\"\n                [parameters]=\"detailsComponent.Settings\"\n                [editMode]=\"inlineEditMode\"\n                [formSetting]=\"formSetting\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [allColumns]=\"allColumns\"\n                [typeDefId]=\"typeDefId\"\n            ></bnrc-dynamic-item-component>\n        </ng-container>\n    </td>\n</tr>\n<ng-template #detailsColumnsTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            detailsFormItems;\n            context: {\n                $implicit: detailsColumns,\n                mo: mo,\n                inlineEditMode: inlineEditMode,\n                layout94: layout$\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #detailsFormItems let-detailsColumns let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout$=\"layout$\">\n    <div class=\"form-items\">\n        <div fd-form-item *ngFor=\"let column of detailsColumns; let columnIndex = index\">\n            <label fd-form-label for=\"input-2\">{{ column.Caption }}</label>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: {\n                        $implicit: column,\n                        mo: mo,\n                        index: columnIndex,\n                        inlineEditMode: inlineEditMode,\n                        layout94: layout$ | async\n                    }\n                \"\n            ></ng-container>\n        </div>\n    </div>\n</ng-template>\n<tr *ngIf=\"bruleActionMessage && inlineEditMode\" fd-table-row>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n    <td fd-table-cell [attr.colspan]=\"columns.length + 1\">\n        <fd-message-strip\n            *ngIf=\"bruleActionMessage.MessageType === 2\"\n            [type]=\"bruleActionMessage.MessageType === 2 ? 'error' : 'information'\"\n            [dismissible]=\"false\"\n        >\n            {{ bruleActionMessage.MessageExpression }}\n        </fd-message-strip>\n    </td>\n</tr>\n<tr *ngIf=\"workflowState?.errorText\" fd-table-row>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n    <td fd-table-cell [attr.colspan]=\"columns.length + 4\">\n        <fd-message-strip type=\"error\" [dismissible]=\"true\">\n            {{ workflowState.errorText }}\n        </fd-message-strip>\n    </td>\n</tr>\n<ng-template\n    #columnTemplate\n    let-column\n    let-mo=\"mo\"\n    let-index=\"index\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-layout94=\"layout94\"\n>\n    <bsu-barsa-table-column\n        [mo]=\"mo\"\n        [column]=\"column\"\n        [customComponent]=\"column.$CustomComponent\"\n        [column]=\"column\"\n        [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [isChecked]=\"isChecked\"\n        [index]=\"index\"\n        [formSetting]=\"formSetting\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [layout94]=\"layout94\"\n        (save)=\"onEditFormPanelSave(null)\"\n        (cancel)=\"onEditFormPanelCancel(null)\"\n        (tab)=\"onTabKeyDown($event, index)\"\n        (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\n    >\n    </bsu-barsa-table-column>\n</ng-template>\n<ng-template #statusIndicator>\n    <bsu-barsa-column-indicator\n        [hideBorderBottom]=\"!detailsCollapsed\"\n        *ngIf=\"rowIndicator\"\n        [backColor]=\"rowIndicatorColor\"\n    >\n    </bsu-barsa-column-indicator>\n</ng-template>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .inlineEditMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .inlineEditMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}.workflow-pending{opacity:.5;pointer-events:none;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "formPanelCtrlId"], outputs: ["titleChanged", "moChanged", "formClose", "formRendered"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "component", type: i4$2.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i4$3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i9$2.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "directive", type: i4$5.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i4$5.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i4$5.TableTextDirective, selector: "[fdTableText], [fd-table-text]", inputs: ["fdTableTextClass", "noWrap", "title", "maxWidth"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column" }, { kind: "component", type: BarsaColumnIndicatorComponent, selector: "bsu-barsa-column-indicator", inputs: ["backColor", "hideBorderBottom"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTableRowComponent, selector: "bsu-barsa-table-row", inputs: { showDetailsInRow: "showDetailsInRow", detailsComponent: "detailsComponent", detailsColumns: "detailsColumns", detailsText: "detailsText", columnComponents: "columnComponents" }, providers: [FormPanelService], viewQueries: [{ propertyName: "detailsFormItems", first: true, predicate: ["detailsFormItems"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<tr\n    [class.row-error]=\"hasError\"\n    [class.showdetails-on]=\"!detailsCollapsed\"\n    #trEl\n    *ngIf=\"(!mo.$Parent || parentExpanded) && visibility !== false\"\n    fd-table-row\n    [activable]=\"false\"\n    [hoverable]=\"false\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"trEl\"\n    [main]=\"true\"\n    [focusable]=\"true\"\n    [attr.aria-selected]=\"isChecked\"\n    [focusable]=\"!inlineEditMode || !allowInlineEdit\"\n    [class.brule-message]=\"bruleActionMessage || workflowState?.errorText\"\n    [class.workflow-pending]=\"workflowState?.state === 'Pending'\"\n>\n    <ng-container *ngIf=\"mo.$Group || mo.$Group === ''; else renderRow\">\n        <td\n            [style.padding-right]=\"rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n            [style.padding-left]=\"!rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n            fd-table-cell\n            [attr.colspan]=\"canView ? columnsCount + 1 : columnsCount\"\n            class=\"row-group\"\n            [class.mobile-mode]=\"secondaryColumns?.length\"\n            [attr.level]=\"level\"\n            [class.root-group]=\"level === 0\"\n        >\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [glyph]=\"expanded !== false ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n                class=\"cell-expand\"\n                [disabled]=\"inlineEditMode\"\n                (click)=\"onExpandClick()\"\n            ></button>\n            {{ mo.$Group }}\n        </td>\n    </ng-container>\n    <ng-template #renderRow>\n        <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n        <td fd-table-cell *ngIf=\"isCheckList\">\n            <div\n                *ngIf=\"workflowState?.state === 'Pending'\"\n                style=\"position: absolute; left: 0; right: 0; bottom: 0; top: 0\"\n            >\n                <bsu-mask [marginTop]=\"'20px'\" [size]=\"'s'\"></bsu-mask>\n            </div>\n\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n        </td>\n        <td\n            fd-table-cell\n            class=\"single-select\"\n            *ngIf=\"!isCheckList\"\n            (click)=\"onRowCheck()\"\n            style=\"padding: 0; text-align: center\"\n        >\n            <ng-container\n                *ngIf=\"inlineEditMode && allowInlineEdit && (hasError || saving || saved); else iconStateTemplate\"\n            >\n                <fd-icon *ngIf=\"hasError\" class=\"save-error\" glyph=\"error\"></fd-icon>\n                <fd-busy-indicator\n                    *ngIf=\"saving\"\n                    [loading]=\"true\"\n                    [size]=\"'s'\"\n                    title=\"record saving\"\n                ></fd-busy-indicator>\n                <fd-icon *ngIf=\"saved\" class=\"save-success\" glyph=\"accept\"></fd-icon>\n            </ng-container>\n            <ng-template #iconStateTemplate>\n                <fd-icon *ngIf=\"mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></fd-icon>\n                <fd-icon *ngIf=\"inlineEditMode && allowInlineEdit && isChecked\" glyph=\"edit\"></fd-icon>\n            </ng-template>\n        </td>\n        <ng-container *ngFor=\"let column of columns; let columnIndex = index\">\n            <td\n                *ngIf=\"(rowIndicator && columnIndex > 0) || !rowIndicator\"\n                [attr.dbName]=\"column.Name\"\n                #tdEl\n                fd-table-cell\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [hostEl]=\"tdEl\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"column.Name\"\n                [focusable]=\"false\"\n                (click)=\"onRowCheck()\"\n                (dblclick)=\"onRowClick()\"\n                [hoverable]=\"inlineEditMode && allowInlineEdit\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        columnTemplate;\n                        context: {\n                            $implicit: column,\n                            mo: mo,\n                            index: columnIndex,\n                            inlineEditMode: inlineEditMode,\n                            layout94: layout$ | async\n                        }\n                    \"\n                ></ng-container>\n            </td>\n        </ng-container>\n        <td\n            class=\"col-context-menu\"\n            *ngIf=\"contextMenuItems?.length && (!inlineEditMode || !allowInlineEdit)\"\n            fd-table-cell\n        >\n            <bsu-ulv-context-menu\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [mo]=\"mo\"\n                [index]=\"index\"\n                (commandClick)=\"onUlvCommand()\"\n                [deviceName]=\"deviceName\"\n                [menuItems]=\"contextMenuItems\"\n                [allColumns]=\"allColumns\"\n            ></bsu-ulv-context-menu>\n        </td>\n        <td\n            class=\"col-details\"\n            fd-table-cell\n            [fitContent]=\"true\"\n            *ngIf=\"showDetailsInRow && (!inlineEditMode || !allowInlineEdit)\"\n        >\n            <button\n                *ngIf=\"detailsComponent?.Selector || cartableParams?.moId\"\n                fd-button\n                [label]=\"(detailsCollapsed ? detailsText : 'Hide') | bbbTranslate\"\n                [fdType]=\"'transparent'\"\n                (click)=\"onRowDetails()\"\n            ></button>\n        </td>\n        <td\n            class=\"col-view\"\n            fd-table-cell\n            [fitContent]=\"true\"\n            *ngIf=\"!hideOpenIcon && canView && (!inlineEditMode || !allowInlineEdit)\"\n        >\n            <button\n                fd-button\n                [glyph]=\"navigationArrow\"\n                [navigation]=\"true\"\n                [fdType]=\"'transparent'\"\n                role=\"presentation\"\n                (click)=\"onRowClick()\"\n            ></button>\n        </td>\n    </ng-template>\n</tr>\n\n<tr\n    #trEl\n    *ngIf=\"secondaryColumns?.length && !mo.$Group && (!mo.$Parent || parentExpanded) && visibility !== false\"\n    fd-table-row\n    [secondary]=\"true\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"trEl\"\n    [attr.aria-selected]=\"isChecked && !inlineEditMode ? true : false\"\n>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell class=\"single-select\" *ngIf=\"!isCheckList\" (click)=\"onRowCheck()\"></td>\n    <td fd-table-cell colspan=\"100%\" (click)=\"onRowCheck()\">\n        <p\n            #pEl\n            fd-table-text\n            *ngFor=\"let column of secondaryColumns; let columnIndex = index; trackBy: _trackByColumn\"\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [hostEl]=\"pEl\"\n            [styleIndex]=\"styleIndex\"\n            [dbName]=\"column.Name\"\n        >\n            <label fd-form-label>{{ column.Caption }} :</label>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: {\n                        $implicit: column,\n                        mo: mo,\n                        index: columnIndex,\n                        inlineEditMode: inlineEditMode,\n                        layout94: layout$ | async\n                    }\n                \"\n            ></ng-container>\n        </p>\n    </td>\n</tr>\n<tr *ngIf=\"!detailsCollapsed && cartableParams?.moId\" fd-table-row class=\"showdetails\" [attr.aria-selected]=\"isChecked\">\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell (click)=\"onRowCheck()\"></td>\n    <td\n        (click)=\"onRowCheck()\"\n        fd-table-cell\n        [attr.colspan]=\"\n            columns.length + 1 + (contextMenuItems.length ? 1 : 0) + (canView ? 1 : 0) + (showDetailsInRow ? 1 : 0)\n        \"\n    >\n        <ng-container>\n            <bnrc-form\n                (click)=\"OnCartableFormClick($event)\"\n                class=\"cartable-template\"\n                [params]=\"cartableParams\"\n                (formClose)=\"onCartableFormClosed()\"\n            ></bnrc-form>\n        </ng-container>\n    </td>\n</tr>\n<tr\n    *ngIf=\"!detailsCollapsed && detailsComponent?.Selector\"\n    fd-table-row\n    class=\"showdetails\"\n    [attr.aria-selected]=\"isChecked\"\n>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell (click)=\"onRowCheck()\"></td>\n    <td\n        (click)=\"onRowCheck()\"\n        fd-table-cell\n        [attr.colspan]=\"\n            columns.length + 1 + (contextMenuItems.length ? 1 : 0) + (canView ? 1 : 0) + (showDetailsInRow ? 1 : 0)\n        \"\n    >\n        <ng-container *ngTemplateOutlet=\"detailsColumnsTemplate\"></ng-container>\n        <ng-container *ngIf=\"detailsComponent && detailsComponent.Selector\">\n            <bnrc-dynamic-item-component\n                [component]=\"detailsComponent\"\n                [mo]=\"mo\"\n                [isChecked]=\"isChecked\"\n                [setting]=\"detailsComponentSetting\"\n                [parameters]=\"detailsComponent.Settings\"\n                [editMode]=\"inlineEditMode\"\n                [formSetting]=\"formSetting\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [allColumns]=\"allColumns\"\n                [typeDefId]=\"typeDefId\"\n            ></bnrc-dynamic-item-component>\n        </ng-container>\n    </td>\n</tr>\n<ng-template #detailsColumnsTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            detailsFormItems;\n            context: {\n                $implicit: detailsColumns,\n                mo: mo,\n                inlineEditMode: inlineEditMode,\n                layout94: layout$\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #detailsFormItems let-detailsColumns let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout$=\"layout$\">\n    <div class=\"form-items\">\n        <div fd-form-item *ngFor=\"let column of detailsColumns; let columnIndex = index\">\n            <label fd-form-label for=\"input-2\">{{ column.Caption }}</label>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: {\n                        $implicit: column,\n                        mo: mo,\n                        index: columnIndex,\n                        inlineEditMode: inlineEditMode,\n                        layout94: layout$ | async\n                    }\n                \"\n            ></ng-container>\n        </div>\n    </div>\n</ng-template>\n<tr *ngIf=\"bruleActionMessage && inlineEditMode\" fd-table-row>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n    <td fd-table-cell [attr.colspan]=\"columns.length + 1\">\n        <fd-message-strip\n            *ngIf=\"bruleActionMessage.MessageType === 2\"\n            [type]=\"bruleActionMessage.MessageType === 2 ? 'error' : 'information'\"\n            [dismissible]=\"false\"\n        >\n            {{ bruleActionMessage.MessageExpression }}\n        </fd-message-strip>\n    </td>\n</tr>\n<tr *ngIf=\"workflowState?.errorText\" fd-table-row>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n    <td fd-table-cell [attr.colspan]=\"columns.length + 4\">\n        <fd-message-strip type=\"error\" [dismissible]=\"true\">\n            {{ workflowState.errorText }}\n        </fd-message-strip>\n    </td>\n</tr>\n<ng-template\n    #columnTemplate\n    let-column\n    let-mo=\"mo\"\n    let-index=\"index\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-layout94=\"layout94\"\n>\n    <bsu-barsa-table-column\n        [mo]=\"mo\"\n        [column]=\"column\"\n        [value]=\"column | columnValue: mo\"\n        [icon]=\"column | columnIcon: mo\"\n        [customComponent]=\"column.$CustomComponent\"\n        [column]=\"column\"\n        [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [isChecked]=\"isChecked\"\n        [index]=\"index\"\n        [formSetting]=\"formSetting\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [layout94]=\"layout94\"\n        (save)=\"onEditFormPanelSave(null)\"\n        (cancel)=\"onEditFormPanelCancel(null)\"\n        (tab)=\"onTabKeyDown($event, index)\"\n        (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\n    >\n    </bsu-barsa-table-column>\n</ng-template>\n<ng-template #statusIndicator>\n    <bsu-barsa-column-indicator\n        [hideBorderBottom]=\"!detailsCollapsed\"\n        *ngIf=\"rowIndicator\"\n        [backColor]=\"rowIndicatorColor\"\n    >\n    </bsu-barsa-column-indicator>\n</ng-template>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .inlineEditMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .inlineEditMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}.workflow-pending{opacity:.5;pointer-events:none;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "formPanelCtrlId"], outputs: ["titleChanged", "moChanged", "formClose", "formRendered"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor"] }, { kind: "component", type: i4$2.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "component", type: i4$3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i9$2.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "directive", type: i4$5.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i4$5.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i4$5.TableTextDirective, selector: "[fdTableText], [fd-table-text]", inputs: ["fdTableTextClass", "noWrap", "title", "maxWidth"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column" }, { kind: "component", type: BarsaColumnIndicatorComponent, selector: "bsu-barsa-column-indicator", inputs: ["backColor", "hideBorderBottom"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: "14.2.7", ngImport: i0, type: BarsaTableRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-table-row', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tr\n    [class.row-error]=\"hasError\"\n    [class.showdetails-on]=\"!detailsCollapsed\"\n    #trEl\n    *ngIf=\"(!mo.$Parent || parentExpanded) && visibility !== false\"\n    fd-table-row\n    [activable]=\"false\"\n    [hoverable]=\"false\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"trEl\"\n    [main]=\"true\"\n    [focusable]=\"true\"\n    [attr.aria-selected]=\"isChecked\"\n    [focusable]=\"!inlineEditMode || !allowInlineEdit\"\n    [class.brule-message]=\"bruleActionMessage || workflowState?.errorText\"\n    [class.workflow-pending]=\"workflowState?.state === 'Pending'\"\n>\n    <ng-container *ngIf=\"mo.$Group || mo.$Group === ''; else renderRow\">\n        <td\n            [style.padding-right]=\"rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n            [style.padding-left]=\"!rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n            fd-table-cell\n            [attr.colspan]=\"canView ? columnsCount + 1 : columnsCount\"\n            class=\"row-group\"\n            [class.mobile-mode]=\"secondaryColumns?.length\"\n            [attr.level]=\"level\"\n            [class.root-group]=\"level === 0\"\n        >\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [glyph]=\"expanded !== false ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n                class=\"cell-expand\"\n                [disabled]=\"inlineEditMode\"\n                (click)=\"onExpandClick()\"\n            ></button>\n            {{ mo.$Group }}\n        </td>\n    </ng-container>\n    <ng-template #renderRow>\n        <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n        <td fd-table-cell *ngIf=\"isCheckList\">\n            <div\n                *ngIf=\"workflowState?.state === 'Pending'\"\n                style=\"position: absolute; left: 0; right: 0; bottom: 0; top: 0\"\n            >\n                <bsu-mask [marginTop]=\"'20px'\" [size]=\"'s'\"></bsu-mask>\n            </div>\n\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n        </td>\n        <td\n            fd-table-cell\n            class=\"single-select\"\n            *ngIf=\"!isCheckList\"\n            (click)=\"onRowCheck()\"\n            style=\"padding: 0; text-align: center\"\n        >\n            <ng-container\n                *ngIf=\"inlineEditMode && allowInlineEdit && (hasError || saving || saved); else iconStateTemplate\"\n            >\n                <fd-icon *ngIf=\"hasError\" class=\"save-error\" glyph=\"error\"></fd-icon>\n                <fd-busy-indicator\n                    *ngIf=\"saving\"\n                    [loading]=\"true\"\n                    [size]=\"'s'\"\n                    title=\"record saving\"\n                ></fd-busy-indicator>\n                <fd-icon *ngIf=\"saved\" class=\"save-success\" glyph=\"accept\"></fd-icon>\n            </ng-container>\n            <ng-template #iconStateTemplate>\n                <fd-icon *ngIf=\"mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></fd-icon>\n                <fd-icon *ngIf=\"inlineEditMode && allowInlineEdit && isChecked\" glyph=\"edit\"></fd-icon>\n            </ng-template>\n        </td>\n        <ng-container *ngFor=\"let column of columns; let columnIndex = index\">\n            <td\n                *ngIf=\"(rowIndicator && columnIndex > 0) || !rowIndicator\"\n                [attr.dbName]=\"column.Name\"\n                #tdEl\n                fd-table-cell\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [hostEl]=\"tdEl\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"column.Name\"\n                [focusable]=\"false\"\n                (click)=\"onRowCheck()\"\n                (dblclick)=\"onRowClick()\"\n                [hoverable]=\"inlineEditMode && allowInlineEdit\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        columnTemplate;\n                        context: {\n                            $implicit: column,\n                            mo: mo,\n                            index: columnIndex,\n                            inlineEditMode: inlineEditMode,\n                            layout94: layout$ | async\n                        }\n                    \"\n                ></ng-container>\n            </td>\n        </ng-container>\n        <td\n            class=\"col-context-menu\"\n            *ngIf=\"contextMenuItems?.length && (!inlineEditMode || !allowInlineEdit)\"\n            fd-table-cell\n        >\n            <bsu-ulv-context-menu\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [mo]=\"mo\"\n                [index]=\"index\"\n                (commandClick)=\"onUlvCommand()\"\n                [deviceName]=\"deviceName\"\n                [menuItems]=\"contextMenuItems\"\n                [allColumns]=\"allColumns\"\n            ></bsu-ulv-context-menu>\n        </td>\n        <td\n            class=\"col-details\"\n            fd-table-cell\n            [fitContent]=\"true\"\n            *ngIf=\"showDetailsInRow && (!inlineEditMode || !allowInlineEdit)\"\n        >\n            <button\n                *ngIf=\"detailsComponent?.Selector || cartableParams?.moId\"\n                fd-button\n                [label]=\"(detailsCollapsed ? detailsText : 'Hide') | bbbTranslate\"\n                [fdType]=\"'transparent'\"\n                (click)=\"onRowDetails()\"\n            ></button>\n        </td>\n        <td\n            class=\"col-view\"\n            fd-table-cell\n            [fitContent]=\"true\"\n            *ngIf=\"!hideOpenIcon && canView && (!inlineEditMode || !allowInlineEdit)\"\n        >\n            <button\n                fd-button\n                [glyph]=\"navigationArrow\"\n                [navigation]=\"true\"\n                [fdType]=\"'transparent'\"\n                role=\"presentation\"\n                (click)=\"onRowClick()\"\n            ></button>\n        </td>\n    </ng-template>\n</tr>\n\n<tr\n    #trEl\n    *ngIf=\"secondaryColumns?.length && !mo.$Group && (!mo.$Parent || parentExpanded) && visibility !== false\"\n    fd-table-row\n    [secondary]=\"true\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"trEl\"\n    [attr.aria-selected]=\"isChecked && !inlineEditMode ? true : false\"\n>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell class=\"single-select\" *ngIf=\"!isCheckList\" (click)=\"onRowCheck()\"></td>\n    <td fd-table-cell colspan=\"100%\" (click)=\"onRowCheck()\">\n        <p\n            #pEl\n            fd-table-text\n            *ngFor=\"let column of secondaryColumns; let columnIndex = index; trackBy: _trackByColumn\"\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [hostEl]=\"pEl\"\n            [styleIndex]=\"styleIndex\"\n            [dbName]=\"column.Name\"\n        >\n            <label fd-form-label>{{ column.Caption }} :</label>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: {\n                        $implicit: column,\n                        mo: mo,\n                        index: columnIndex,\n                        inlineEditMode: inlineEditMode,\n                        layout94: layout$ | async\n                    }\n                \"\n            ></ng-container>\n        </p>\n    </td>\n</tr>\n<tr *ngIf=\"!detailsCollapsed && cartableParams?.moId\" fd-table-row class=\"showdetails\" [attr.aria-selected]=\"isChecked\">\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell (click)=\"onRowCheck()\"></td>\n    <td\n        (click)=\"onRowCheck()\"\n        fd-table-cell\n        [attr.colspan]=\"\n            columns.length + 1 + (contextMenuItems.length ? 1 : 0) + (canView ? 1 : 0) + (showDetailsInRow ? 1 : 0)\n        \"\n    >\n        <ng-container>\n            <bnrc-form\n                (click)=\"OnCartableFormClick($event)\"\n                class=\"cartable-template\"\n                [params]=\"cartableParams\"\n                (formClose)=\"onCartableFormClosed()\"\n            ></bnrc-form>\n        </ng-container>\n    </td>\n</tr>\n<tr\n    *ngIf=\"!detailsCollapsed && detailsComponent?.Selector\"\n    fd-table-row\n    class=\"showdetails\"\n    [attr.aria-selected]=\"isChecked\"\n>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell (click)=\"onRowCheck()\"></td>\n    <td\n        (click)=\"onRowCheck()\"\n        fd-table-cell\n        [attr.colspan]=\"\n            columns.length + 1 + (contextMenuItems.length ? 1 : 0) + (canView ? 1 : 0) + (showDetailsInRow ? 1 : 0)\n        \"\n    >\n        <ng-container *ngTemplateOutlet=\"detailsColumnsTemplate\"></ng-container>\n        <ng-container *ngIf=\"detailsComponent && detailsComponent.Selector\">\n            <bnrc-dynamic-item-component\n                [component]=\"detailsComponent\"\n                [mo]=\"mo\"\n                [isChecked]=\"isChecked\"\n                [setting]=\"detailsComponentSetting\"\n                [parameters]=\"detailsComponent.Settings\"\n                [editMode]=\"inlineEditMode\"\n                [formSetting]=\"formSetting\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [allColumns]=\"allColumns\"\n                [typeDefId]=\"typeDefId\"\n            ></bnrc-dynamic-item-component>\n        </ng-container>\n    </td>\n</tr>\n<ng-template #detailsColumnsTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            detailsFormItems;\n            context: {\n                $implicit: detailsColumns,\n                mo: mo,\n                inlineEditMode: inlineEditMode,\n                layout94: layout$\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #detailsFormItems let-detailsColumns let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout$=\"layout$\">\n    <div class=\"form-items\">\n        <div fd-form-item *ngFor=\"let column of detailsColumns; let columnIndex = index\">\n            <label fd-form-label for=\"input-2\">{{ column.Caption }}</label>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: {\n                        $implicit: column,\n                        mo: mo,\n                        index: columnIndex,\n                        inlineEditMode: inlineEditMode,\n                        layout94: layout$ | async\n                    }\n                \"\n            ></ng-container>\n        </div>\n    </div>\n</ng-template>\n<tr *ngIf=\"bruleActionMessage && inlineEditMode\" fd-table-row>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n    <td fd-table-cell [attr.colspan]=\"columns.length + 1\">\n        <fd-message-strip\n            *ngIf=\"bruleActionMessage.MessageType === 2\"\n            [type]=\"bruleActionMessage.MessageType === 2 ? 'error' : 'information'\"\n            [dismissible]=\"false\"\n        >\n            {{ bruleActionMessage.MessageExpression }}\n        </fd-message-strip>\n    </td>\n</tr>\n<tr *ngIf=\"workflowState?.errorText\" fd-table-row>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n    <td fd-table-cell [attr.colspan]=\"columns.length + 4\">\n        <fd-message-strip type=\"error\" [dismissible]=\"true\">\n            {{ workflowState.errorText }}\n        </fd-message-strip>\n    </td>\n</tr>\n<ng-template\n    #columnTemplate\n    let-column\n    let-mo=\"mo\"\n    let-index=\"index\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-layout94=\"layout94\"\n>\n    <bsu-barsa-table-column\n        [mo]=\"mo\"\n        [column]=\"column\"\n        [customComponent]=\"column.$CustomComponent\"\n        [column]=\"column\"\n        [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [isChecked]=\"isChecked\"\n        [index]=\"index\"\n        [formSetting]=\"formSetting\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [layout94]=\"layout94\"\n        (save)=\"onEditFormPanelSave(null)\"\n        (cancel)=\"onEditFormPanelCancel(null)\"\n        (tab)=\"onTabKeyDown($event, index)\"\n        (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\n    >\n    </bsu-barsa-table-column>\n</ng-template>\n<ng-template #statusIndicator>\n    <bsu-barsa-column-indicator\n        [hideBorderBottom]=\"!detailsCollapsed\"\n        *ngIf=\"rowIndicator\"\n        [backColor]=\"rowIndicatorColor\"\n    >\n    </bsu-barsa-column-indicator>\n</ng-template>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .inlineEditMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .inlineEditMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}.workflow-pending{opacity:.5;pointer-events:none;position:relative}\n"] }]
+            args: [{ selector: 'bsu-barsa-table-row', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tr\n    [class.row-error]=\"hasError\"\n    [class.showdetails-on]=\"!detailsCollapsed\"\n    #trEl\n    *ngIf=\"(!mo.$Parent || parentExpanded) && visibility !== false\"\n    fd-table-row\n    [activable]=\"false\"\n    [hoverable]=\"false\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"trEl\"\n    [main]=\"true\"\n    [focusable]=\"true\"\n    [attr.aria-selected]=\"isChecked\"\n    [focusable]=\"!inlineEditMode || !allowInlineEdit\"\n    [class.brule-message]=\"bruleActionMessage || workflowState?.errorText\"\n    [class.workflow-pending]=\"workflowState?.state === 'Pending'\"\n>\n    <ng-container *ngIf=\"mo.$Group || mo.$Group === ''; else renderRow\">\n        <td\n            [style.padding-right]=\"rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n            [style.padding-left]=\"!rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n            fd-table-cell\n            [attr.colspan]=\"canView ? columnsCount + 1 : columnsCount\"\n            class=\"row-group\"\n            [class.mobile-mode]=\"secondaryColumns?.length\"\n            [attr.level]=\"level\"\n            [class.root-group]=\"level === 0\"\n        >\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [glyph]=\"expanded !== false ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n                class=\"cell-expand\"\n                [disabled]=\"inlineEditMode\"\n                (click)=\"onExpandClick()\"\n            ></button>\n            {{ mo.$Group }}\n        </td>\n    </ng-container>\n    <ng-template #renderRow>\n        <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n        <td fd-table-cell *ngIf=\"isCheckList\">\n            <div\n                *ngIf=\"workflowState?.state === 'Pending'\"\n                style=\"position: absolute; left: 0; right: 0; bottom: 0; top: 0\"\n            >\n                <bsu-mask [marginTop]=\"'20px'\" [size]=\"'s'\"></bsu-mask>\n            </div>\n\n            <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n        </td>\n        <td\n            fd-table-cell\n            class=\"single-select\"\n            *ngIf=\"!isCheckList\"\n            (click)=\"onRowCheck()\"\n            style=\"padding: 0; text-align: center\"\n        >\n            <ng-container\n                *ngIf=\"inlineEditMode && allowInlineEdit && (hasError || saving || saved); else iconStateTemplate\"\n            >\n                <fd-icon *ngIf=\"hasError\" class=\"save-error\" glyph=\"error\"></fd-icon>\n                <fd-busy-indicator\n                    *ngIf=\"saving\"\n                    [loading]=\"true\"\n                    [size]=\"'s'\"\n                    title=\"record saving\"\n                ></fd-busy-indicator>\n                <fd-icon *ngIf=\"saved\" class=\"save-success\" glyph=\"accept\"></fd-icon>\n            </ng-container>\n            <ng-template #iconStateTemplate>\n                <fd-icon *ngIf=\"mo.$State === 'New' && !isChecked\" glyph=\"favorite\"></fd-icon>\n                <fd-icon *ngIf=\"inlineEditMode && allowInlineEdit && isChecked\" glyph=\"edit\"></fd-icon>\n            </ng-template>\n        </td>\n        <ng-container *ngFor=\"let column of columns; let columnIndex = index\">\n            <td\n                *ngIf=\"(rowIndicator && columnIndex > 0) || !rowIndicator\"\n                [attr.dbName]=\"column.Name\"\n                #tdEl\n                fd-table-cell\n                [applyConditionalFormats]=\"conditionalFormats\"\n                [hostEl]=\"tdEl\"\n                [styleIndex]=\"styleIndex\"\n                [dbName]=\"column.Name\"\n                [focusable]=\"false\"\n                (click)=\"onRowCheck()\"\n                (dblclick)=\"onRowClick()\"\n                [hoverable]=\"inlineEditMode && allowInlineEdit\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        columnTemplate;\n                        context: {\n                            $implicit: column,\n                            mo: mo,\n                            index: columnIndex,\n                            inlineEditMode: inlineEditMode,\n                            layout94: layout$ | async\n                        }\n                    \"\n                ></ng-container>\n            </td>\n        </ng-container>\n        <td\n            class=\"col-context-menu\"\n            *ngIf=\"contextMenuItems?.length && (!inlineEditMode || !allowInlineEdit)\"\n            fd-table-cell\n        >\n            <bsu-ulv-context-menu\n                [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n                [conditionalFormats]=\"conditionalFormats\"\n                [styleIndex]=\"styleIndex\"\n                [mo]=\"mo\"\n                [index]=\"index\"\n                (commandClick)=\"onUlvCommand()\"\n                [deviceName]=\"deviceName\"\n                [menuItems]=\"contextMenuItems\"\n                [allColumns]=\"allColumns\"\n            ></bsu-ulv-context-menu>\n        </td>\n        <td\n            class=\"col-details\"\n            fd-table-cell\n            [fitContent]=\"true\"\n            *ngIf=\"showDetailsInRow && (!inlineEditMode || !allowInlineEdit)\"\n        >\n            <button\n                *ngIf=\"detailsComponent?.Selector || cartableParams?.moId\"\n                fd-button\n                [label]=\"(detailsCollapsed ? detailsText : 'Hide') | bbbTranslate\"\n                [fdType]=\"'transparent'\"\n                (click)=\"onRowDetails()\"\n            ></button>\n        </td>\n        <td\n            class=\"col-view\"\n            fd-table-cell\n            [fitContent]=\"true\"\n            *ngIf=\"!hideOpenIcon && canView && (!inlineEditMode || !allowInlineEdit)\"\n        >\n            <button\n                fd-button\n                [glyph]=\"navigationArrow\"\n                [navigation]=\"true\"\n                [fdType]=\"'transparent'\"\n                role=\"presentation\"\n                (click)=\"onRowClick()\"\n            ></button>\n        </td>\n    </ng-template>\n</tr>\n\n<tr\n    #trEl\n    *ngIf=\"secondaryColumns?.length && !mo.$Group && (!mo.$Parent || parentExpanded) && visibility !== false\"\n    fd-table-row\n    [secondary]=\"true\"\n    [applyConditionalFormats]=\"conditionalFormats\"\n    [styleIndex]=\"styleIndex\"\n    [hostEl]=\"trEl\"\n    [attr.aria-selected]=\"isChecked && !inlineEditMode ? true : false\"\n>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell class=\"single-select\" *ngIf=\"!isCheckList\" (click)=\"onRowCheck()\"></td>\n    <td fd-table-cell colspan=\"100%\" (click)=\"onRowCheck()\">\n        <p\n            #pEl\n            fd-table-text\n            *ngFor=\"let column of secondaryColumns; let columnIndex = index; trackBy: _trackByColumn\"\n            [applyConditionalFormats]=\"conditionalFormats\"\n            [hostEl]=\"pEl\"\n            [styleIndex]=\"styleIndex\"\n            [dbName]=\"column.Name\"\n        >\n            <label fd-form-label>{{ column.Caption }} :</label>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: {\n                        $implicit: column,\n                        mo: mo,\n                        index: columnIndex,\n                        inlineEditMode: inlineEditMode,\n                        layout94: layout$ | async\n                    }\n                \"\n            ></ng-container>\n        </p>\n    </td>\n</tr>\n<tr *ngIf=\"!detailsCollapsed && cartableParams?.moId\" fd-table-row class=\"showdetails\" [attr.aria-selected]=\"isChecked\">\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell (click)=\"onRowCheck()\"></td>\n    <td\n        (click)=\"onRowCheck()\"\n        fd-table-cell\n        [attr.colspan]=\"\n            columns.length + 1 + (contextMenuItems.length ? 1 : 0) + (canView ? 1 : 0) + (showDetailsInRow ? 1 : 0)\n        \"\n    >\n        <ng-container>\n            <bnrc-form\n                (click)=\"OnCartableFormClick($event)\"\n                class=\"cartable-template\"\n                [params]=\"cartableParams\"\n                (formClose)=\"onCartableFormClosed()\"\n            ></bnrc-form>\n        </ng-container>\n    </td>\n</tr>\n<tr\n    *ngIf=\"!detailsCollapsed && detailsComponent?.Selector\"\n    fd-table-row\n    class=\"showdetails\"\n    [attr.aria-selected]=\"isChecked\"\n>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n    <td fd-table-cell (click)=\"onRowCheck()\"></td>\n    <td\n        (click)=\"onRowCheck()\"\n        fd-table-cell\n        [attr.colspan]=\"\n            columns.length + 1 + (contextMenuItems.length ? 1 : 0) + (canView ? 1 : 0) + (showDetailsInRow ? 1 : 0)\n        \"\n    >\n        <ng-container *ngTemplateOutlet=\"detailsColumnsTemplate\"></ng-container>\n        <ng-container *ngIf=\"detailsComponent && detailsComponent.Selector\">\n            <bnrc-dynamic-item-component\n                [component]=\"detailsComponent\"\n                [mo]=\"mo\"\n                [isChecked]=\"isChecked\"\n                [setting]=\"detailsComponentSetting\"\n                [parameters]=\"detailsComponent.Settings\"\n                [editMode]=\"inlineEditMode\"\n                [formSetting]=\"formSetting\"\n                [rtl]=\"rtl\"\n                [deviceName]=\"deviceName\"\n                [deviceSize]=\"deviceSize\"\n                [index]=\"index\"\n                [allColumns]=\"allColumns\"\n                [typeDefId]=\"typeDefId\"\n            ></bnrc-dynamic-item-component>\n        </ng-container>\n    </td>\n</tr>\n<ng-template #detailsColumnsTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            detailsFormItems;\n            context: {\n                $implicit: detailsColumns,\n                mo: mo,\n                inlineEditMode: inlineEditMode,\n                layout94: layout$\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #detailsFormItems let-detailsColumns let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout$=\"layout$\">\n    <div class=\"form-items\">\n        <div fd-form-item *ngFor=\"let column of detailsColumns; let columnIndex = index\">\n            <label fd-form-label for=\"input-2\">{{ column.Caption }}</label>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: {\n                        $implicit: column,\n                        mo: mo,\n                        index: columnIndex,\n                        inlineEditMode: inlineEditMode,\n                        layout94: layout$ | async\n                    }\n                \"\n            ></ng-container>\n        </div>\n    </div>\n</ng-template>\n<tr *ngIf=\"bruleActionMessage && inlineEditMode\" fd-table-row>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n    <td fd-table-cell [attr.colspan]=\"columns.length + 1\">\n        <fd-message-strip\n            *ngIf=\"bruleActionMessage.MessageType === 2\"\n            [type]=\"bruleActionMessage.MessageType === 2 ? 'error' : 'information'\"\n            [dismissible]=\"false\"\n        >\n            {{ bruleActionMessage.MessageExpression }}\n        </fd-message-strip>\n    </td>\n</tr>\n<tr *ngIf=\"workflowState?.errorText\" fd-table-row>\n    <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n    <td fd-table-cell [attr.colspan]=\"columns.length + 4\">\n        <fd-message-strip type=\"error\" [dismissible]=\"true\">\n            {{ workflowState.errorText }}\n        </fd-message-strip>\n    </td>\n</tr>\n<ng-template\n    #columnTemplate\n    let-column\n    let-mo=\"mo\"\n    let-index=\"index\"\n    let-inlineEditMode=\"inlineEditMode\"\n    let-layout94=\"layout94\"\n>\n    <bsu-barsa-table-column\n        [mo]=\"mo\"\n        [column]=\"column\"\n        [value]=\"column | columnValue: mo\"\n        [icon]=\"column | columnIcon: mo\"\n        [customComponent]=\"column.$CustomComponent\"\n        [column]=\"column\"\n        [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [isChecked]=\"isChecked\"\n        [index]=\"index\"\n        [formSetting]=\"formSetting\"\n        [rtl]=\"rtl\"\n        [deviceName]=\"deviceName\"\n        [deviceSize]=\"deviceSize\"\n        [layout94]=\"layout94\"\n        (save)=\"onEditFormPanelSave(null)\"\n        (cancel)=\"onEditFormPanelCancel(null)\"\n        (tab)=\"onTabKeyDown($event, index)\"\n        (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\n    >\n    </bsu-barsa-table-column>\n</ng-template>\n<ng-template #statusIndicator>\n    <bsu-barsa-column-indicator\n        [hideBorderBottom]=\"!detailsCollapsed\"\n        *ngIf=\"rowIndicator\"\n        [backColor]=\"rowIndicatorColor\"\n    >\n    </bsu-barsa-column-indicator>\n</ng-template>\n", styles: [":host{display:contents;width:100%}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .inlineEditMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .inlineEditMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}.workflow-pending{opacity:.5;pointer-events:none;position:relative}\n"] }]
         }], propDecorators: { showDetailsInRow: [{
                 type: Input
             }], detailsComponent: [{
@@ -8808,10 +8779,10 @@ class UiPicturesInfoComponent extends DeviceInfoFieldBaseComponent {
     }
 }
 UiPicturesInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiPicturesInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiPicturesInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiPicturesInfoComponent, selector: "bsu-ui-pictures-info", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<fd-file-uploader\n    #uploader\n    [style.display]=\"'none'\"\n    [id]=\"id\"\n    [name]=\"'pictures_' + id\"\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n    [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n    [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n<!-- <ng-container *ngTemplateOutlet=\"toolbarTpl\"></ng-container>\n<ng-template #toolbarTpl let-inDialog=\"inDialog\">\n    <fd-toolbar *untilInView=\"el\" [fdType]=\"'transparent'\" [clearBorder]=\"true\" [shouldOverflow]=\"true\">\n        <fdp-button *ngIf=\"!inDialog\"\n            [disabled]=\"!(value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!)\"\n            fd-toolbar-item glyph=\"attachment\" buttonType=\"transparent\" (click)=\"uploader.open()\"></fdp-button>\n        <fdp-button [disabled]=\"selectedIndex === -1 || (disableOrReadonly$ | async)!!\" class=\"delete\" fd-toolbar-item\n            glyph=\"delete\" [buttonType]=\"'transparent'\" (click)=\"onDelete()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"zoom-in\" [buttonType]=\"'transparent'\" (click)=\"onZoomIn()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"zoom-out\" [buttonType]=\"'transparent'\" (click)=\"onZoomOut()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"exitfullscreen\" [buttonType]=\"'transparent'\"\n            (click)=\"onFillOriginal()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"resize-horizontal\" [buttonType]=\"'transparent'\"\n            (click)=\"onFillWidth()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"resize\" [buttonType]=\"'transparent'\" (click)=\"onFillAll()\"></fdp-button>\n        <ng-container *ngIf=\"!inDialog\">\n            <fdp-split-menu-button fd-toolbar-item [readonly]=\"(readonly$ | async)!!\" [disabled]=\"(readonly$ | async)!!\"\n                *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\" [menu]=\"menu1\"\n                [buttonLabel]=\"'Scan' | bbbTranslate\" [title]=\"'Scan' | bbbTranslate\" type=\"transparent\"\n                [menuTitle]=\"'Scan' | bbbTranslate\" (primaryButtonClick)=\"onScan()\">\n            </fdp-split-menu-button>\n            <fdp-menu #menu1 xPosition=\"after\">\n                <fdp-menu-item (itemSelect)=\"onAdvanceScan()\">{{ 'AdvancedScan' | bbbTranslate }}</fdp-menu-item>\n            </fdp-menu>\n        </ng-container>\n    </fd-toolbar>\n</ng-template> -->\n\n<!-- <ng-container *ngIf=\"mediaData$ | async as mediaData\">\n    <div *ngIf=\"mediaData.length > 0; else hashed\" dir=\"rtl\" class=\"gallery\" #gallery>\n        <div class=\"column small-imgs-box\">\n            <div class=\"pics\" (click)=\"onThumbnailClicked(i)\" *ngFor=\"let media of mediaData; let i = index\"\n                [class.selected]=\"i === selectedIndex || (!selectedIndex && i === 0)\">\n                <img [src]=\"media.thumbnailUrl\" />\n            </div>\n        </div>\n        <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\" [class.fill-all]=\"fillAll\"\n            [class.fill-original]=\"fillOriginal\" [ngClass]=\"selectedZoom\">\n            <div class=\"pics\" [id]=\"i\" *ngFor=\"let media of mediaData; let i = index\">\n                <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n            </div>\n        </div>\n    </div>\n\n    <ng-template #hashed>\n        <div class=\"hatchBackground\" style=\"display: flex; align-items: center; justify-content: center\"></div>\n    </ng-template>\n</ng-container> -->\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\n            <div\n                *ngFor=\"let media of mediaData; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(media, i)\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        cardTpl;\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n                    \"\n                ></ng-container>\n            </div>\n            <div\n                *ngIf=\"!inDialog && (disableOrReadonly$ | async) === false\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n            >\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n        <fd-card-content style=\"text-align: center; height: 120px\">\n            <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" />\n        </fd-card-content>\n        <fd-card-footer *ngIf=\"!inDialog\">\n            <button\n                glyph=\"message-information\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                [fd-inline-help]=\"media.title\"\n                [triggers]=\"['click']\"\n                [closeOnOutsideClick]=\"true\"\n            ></button>\n            <button\n                glyph=\"full-screen\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                (click)=\"onFullscreen(media, mediaData)\"\n            ></button>\n            <ng-container *ngIf=\"(disableOrReadonly$ | async) === false\">\n                <button\n                    glyph=\"delete\"\n                    *fdCardFooterActionItem\n                    fd-button\n                    fdType=\"transparent\"\n                    (click)=\"onDelete(index)\"\n                ></button>\n            </ng-container>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n<ng-template #newFile>\n    <div style=\"position: relative; height: 100%\">\n        <fd-card>\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n                <button\n                    fd-button\n                    glyph=\"add-photo\"\n                    fdType=\"transparent\"\n                    [label]=\"'AttachFile' | bbbTranslate\"\n                    (click)=\"uploader.open()\"\n                ></button>\n            </fd-card-content>\n\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n                <fd-menu #menu>\n                    <li fd-menu-item (click)=\"onScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                    <li fd-menu-item (click)=\"onAdvanceScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                </fd-menu>\n            </fd-card-footer>\n        </fd-card>\n        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"Fit image size\"\n                        [glyph]=\"'resize'\"\n                        [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                        (click)=\"fillWidth = !fillWidth\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body #fdbody>\n            <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n                <div\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\n                    class=\"column big-imgs-box\"\n                    [class.fill-width]=\"fillWidth\"\n                    [class.fill-all]=\"fillAll\"\n                    [class.fill-original]=\"fillOriginal\"\n                    [ngClass]=\"selectedZoom\"\n                >\n                    <div class=\"pics\" [id]=\"i\">\n                        <bsu-mask></bsu-mask>\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\n            </div>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:rgb(85,84,84);border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-width img{width:100%!important}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$4.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i7$4.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i7$4.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$4.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i6$5.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "directive", type: i7$a.InlineHelpDirective, selector: "[fd-inline-help], [fd-inline-help-template]", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { kind: "component", type: i4$6.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$6.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$6.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i9.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiPicturesInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: UiPicturesInfoComponent, selector: "bsu-ui-pictures-info", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<fd-file-uploader\n    #uploader\n    [style.display]=\"'none'\"\n    [id]=\"id\"\n    [name]=\"'pictures_' + id\"\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n    [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n    [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\n            <div\n                *ngFor=\"let media of mediaData; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(media, i)\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        cardTpl;\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n                    \"\n                ></ng-container>\n            </div>\n            <div\n                *ngIf=\"!inDialog && (disableOrReadonly$ | async) === true ? false : true\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n            >\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n        <fd-card-content style=\"text-align: center; height: 120px\">\n            <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" />\n        </fd-card-content>\n        <fd-card-footer *ngIf=\"!inDialog\">\n            <button\n                glyph=\"message-information\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                [fd-inline-help]=\"media.title\"\n                [triggers]=\"['click']\"\n                [closeOnOutsideClick]=\"true\"\n            ></button>\n            <button\n                glyph=\"full-screen\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                (click)=\"onFullscreen(media, mediaData)\"\n            ></button>\n            <ng-container *ngIf=\"(disableOrReadonly$ | async) === true ? false : true\">\n                <button\n                    glyph=\"delete\"\n                    *fdCardFooterActionItem\n                    fd-button\n                    fdType=\"transparent\"\n                    (click)=\"onDelete(index)\"\n                ></button>\n            </ng-container>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n<ng-template #newFile>\n    <div style=\"position: relative; height: 100%\">\n        <fd-card>\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n                <button\n                    fd-button\n                    glyph=\"add-photo\"\n                    fdType=\"transparent\"\n                    [label]=\"'AttachFile' | bbbTranslate\"\n                    (click)=\"uploader.open()\"\n                ></button>\n            </fd-card-content>\n\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n                <fd-menu #menu>\n                    <li fd-menu-item (click)=\"onScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                    <li fd-menu-item (click)=\"onAdvanceScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                </fd-menu>\n            </fd-card-footer>\n        </fd-card>\n        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"Fit image size\"\n                        [glyph]=\"'resize'\"\n                        [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                        (click)=\"fillWidth = !fillWidth\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body #fdbody>\n            <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n                <div\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\n                    class=\"column big-imgs-box\"\n                    [class.fill-width]=\"fillWidth\"\n                    [class.fill-all]=\"fillAll\"\n                    [class.fill-original]=\"fillOriginal\"\n                    [ngClass]=\"selectedZoom\"\n                >\n                    <div class=\"pics\" [id]=\"i\">\n                        <bsu-mask></bsu-mask>\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\n            </div>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:rgb(85,84,84);border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-width img{width:100%!important}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$4.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i7$4.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i7$4.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$4.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i6$5.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "directive", type: i7$a.InlineHelpDirective, selector: "[fd-inline-help], [fd-inline-help-template]", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { kind: "component", type: i4$6.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$6.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$6.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i9.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiPicturesInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-file-uploader\n    #uploader\n    [style.display]=\"'none'\"\n    [id]=\"id\"\n    [name]=\"'pictures_' + id\"\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n    [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n    [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n<!-- <ng-container *ngTemplateOutlet=\"toolbarTpl\"></ng-container>\n<ng-template #toolbarTpl let-inDialog=\"inDialog\">\n    <fd-toolbar *untilInView=\"el\" [fdType]=\"'transparent'\" [clearBorder]=\"true\" [shouldOverflow]=\"true\">\n        <fdp-button *ngIf=\"!inDialog\"\n            [disabled]=\"!(value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!)\"\n            fd-toolbar-item glyph=\"attachment\" buttonType=\"transparent\" (click)=\"uploader.open()\"></fdp-button>\n        <fdp-button [disabled]=\"selectedIndex === -1 || (disableOrReadonly$ | async)!!\" class=\"delete\" fd-toolbar-item\n            glyph=\"delete\" [buttonType]=\"'transparent'\" (click)=\"onDelete()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"zoom-in\" [buttonType]=\"'transparent'\" (click)=\"onZoomIn()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"zoom-out\" [buttonType]=\"'transparent'\" (click)=\"onZoomOut()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"exitfullscreen\" [buttonType]=\"'transparent'\"\n            (click)=\"onFillOriginal()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"resize-horizontal\" [buttonType]=\"'transparent'\"\n            (click)=\"onFillWidth()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"resize\" [buttonType]=\"'transparent'\" (click)=\"onFillAll()\"></fdp-button>\n        <ng-container *ngIf=\"!inDialog\">\n            <fdp-split-menu-button fd-toolbar-item [readonly]=\"(readonly$ | async)!!\" [disabled]=\"(readonly$ | async)!!\"\n                *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\" [menu]=\"menu1\"\n                [buttonLabel]=\"'Scan' | bbbTranslate\" [title]=\"'Scan' | bbbTranslate\" type=\"transparent\"\n                [menuTitle]=\"'Scan' | bbbTranslate\" (primaryButtonClick)=\"onScan()\">\n            </fdp-split-menu-button>\n            <fdp-menu #menu1 xPosition=\"after\">\n                <fdp-menu-item (itemSelect)=\"onAdvanceScan()\">{{ 'AdvancedScan' | bbbTranslate }}</fdp-menu-item>\n            </fdp-menu>\n        </ng-container>\n    </fd-toolbar>\n</ng-template> -->\n\n<!-- <ng-container *ngIf=\"mediaData$ | async as mediaData\">\n    <div *ngIf=\"mediaData.length > 0; else hashed\" dir=\"rtl\" class=\"gallery\" #gallery>\n        <div class=\"column small-imgs-box\">\n            <div class=\"pics\" (click)=\"onThumbnailClicked(i)\" *ngFor=\"let media of mediaData; let i = index\"\n                [class.selected]=\"i === selectedIndex || (!selectedIndex && i === 0)\">\n                <img [src]=\"media.thumbnailUrl\" />\n            </div>\n        </div>\n        <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\" [class.fill-all]=\"fillAll\"\n            [class.fill-original]=\"fillOriginal\" [ngClass]=\"selectedZoom\">\n            <div class=\"pics\" [id]=\"i\" *ngFor=\"let media of mediaData; let i = index\">\n                <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n            </div>\n        </div>\n    </div>\n\n    <ng-template #hashed>\n        <div class=\"hatchBackground\" style=\"display: flex; align-items: center; justify-content: center\"></div>\n    </ng-template>\n</ng-container> -->\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\n            <div\n                *ngFor=\"let media of mediaData; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(media, i)\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        cardTpl;\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n                    \"\n                ></ng-container>\n            </div>\n            <div\n                *ngIf=\"!inDialog && (disableOrReadonly$ | async) === false\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n            >\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n        <fd-card-content style=\"text-align: center; height: 120px\">\n            <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" />\n        </fd-card-content>\n        <fd-card-footer *ngIf=\"!inDialog\">\n            <button\n                glyph=\"message-information\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                [fd-inline-help]=\"media.title\"\n                [triggers]=\"['click']\"\n                [closeOnOutsideClick]=\"true\"\n            ></button>\n            <button\n                glyph=\"full-screen\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                (click)=\"onFullscreen(media, mediaData)\"\n            ></button>\n            <ng-container *ngIf=\"(disableOrReadonly$ | async) === false\">\n                <button\n                    glyph=\"delete\"\n                    *fdCardFooterActionItem\n                    fd-button\n                    fdType=\"transparent\"\n                    (click)=\"onDelete(index)\"\n                ></button>\n            </ng-container>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n<ng-template #newFile>\n    <div style=\"position: relative; height: 100%\">\n        <fd-card>\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n                <button\n                    fd-button\n                    glyph=\"add-photo\"\n                    fdType=\"transparent\"\n                    [label]=\"'AttachFile' | bbbTranslate\"\n                    (click)=\"uploader.open()\"\n                ></button>\n            </fd-card-content>\n\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n                <fd-menu #menu>\n                    <li fd-menu-item (click)=\"onScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                    <li fd-menu-item (click)=\"onAdvanceScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                </fd-menu>\n            </fd-card-footer>\n        </fd-card>\n        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"Fit image size\"\n                        [glyph]=\"'resize'\"\n                        [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                        (click)=\"fillWidth = !fillWidth\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body #fdbody>\n            <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n                <div\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\n                    class=\"column big-imgs-box\"\n                    [class.fill-width]=\"fillWidth\"\n                    [class.fill-all]=\"fillAll\"\n                    [class.fill-original]=\"fillOriginal\"\n                    [ngClass]=\"selectedZoom\"\n                >\n                    <div class=\"pics\" [id]=\"i\">\n                        <bsu-mask></bsu-mask>\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\n            </div>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:rgb(85,84,84);border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-width img{width:100%!important}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
+            args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-file-uploader\n    #uploader\n    [style.display]=\"'none'\"\n    [id]=\"id\"\n    [name]=\"'pictures_' + id\"\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n    [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n    [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\n            <div\n                *ngFor=\"let media of mediaData; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(media, i)\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        cardTpl;\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n                    \"\n                ></ng-container>\n            </div>\n            <div\n                *ngIf=\"!inDialog && (disableOrReadonly$ | async) === true ? false : true\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n            >\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n        <fd-card-content style=\"text-align: center; height: 120px\">\n            <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" />\n        </fd-card-content>\n        <fd-card-footer *ngIf=\"!inDialog\">\n            <button\n                glyph=\"message-information\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                [fd-inline-help]=\"media.title\"\n                [triggers]=\"['click']\"\n                [closeOnOutsideClick]=\"true\"\n            ></button>\n            <button\n                glyph=\"full-screen\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                (click)=\"onFullscreen(media, mediaData)\"\n            ></button>\n            <ng-container *ngIf=\"(disableOrReadonly$ | async) === true ? false : true\">\n                <button\n                    glyph=\"delete\"\n                    *fdCardFooterActionItem\n                    fd-button\n                    fdType=\"transparent\"\n                    (click)=\"onDelete(index)\"\n                ></button>\n            </ng-container>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n<ng-template #newFile>\n    <div style=\"position: relative; height: 100%\">\n        <fd-card>\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n                <button\n                    fd-button\n                    glyph=\"add-photo\"\n                    fdType=\"transparent\"\n                    [label]=\"'AttachFile' | bbbTranslate\"\n                    (click)=\"uploader.open()\"\n                ></button>\n            </fd-card-content>\n\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n                <fd-menu #menu>\n                    <li fd-menu-item (click)=\"onScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                    <li fd-menu-item (click)=\"onAdvanceScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                </fd-menu>\n            </fd-card-footer>\n        </fd-card>\n        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"Fit image size\"\n                        [glyph]=\"'resize'\"\n                        [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                        (click)=\"fillWidth = !fillWidth\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body #fdbody>\n            <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n                <div\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\n                    class=\"column big-imgs-box\"\n                    [class.fill-width]=\"fillWidth\"\n                    [class.fill-all]=\"fillAll\"\n                    [class.fill-original]=\"fillOriginal\"\n                    [ngClass]=\"selectedZoom\"\n                >\n                    <div class=\"pics\" [id]=\"i\">\n                        <bsu-mask></bsu-mask>\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\n            </div>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:rgb(85,84,84);border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-width img{width:100%!important}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], gallery: [{