barsa-sap-ui 2.3.75 → 2.3.77

package/fesm2022/barsa-sap-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Input, Pipe, EventEmitter, inject, NgZone, Renderer2, ElementRef, Output, HostBinding, ViewChild, ViewEncapsulation, ChangeDetectorRef, ViewChildren, DOCUMENT, Directive, TemplateRef, HostListener, signal, ViewContainerRef, Injector, computed, ComponentFactoryResolver, NgModule, input, output, EnvironmentInjector, afterNextRender, runInInjectionContext, Injectable, provideAppInitializer, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, Pipe, EventEmitter, inject, NgZone, Renderer2, ElementRef, Output, HostBinding, ViewChild, ViewEncapsulation, ChangeDetectorRef, ViewChildren, DOCUMENT, Directive, signal, TemplateRef, HostListener, ViewContainerRef, Injector, computed, ComponentFactoryResolver, NgModule, input, output, EnvironmentInjector, afterNextRender, runInInjectionContext, Injectable, provideAppInitializer, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from 'barsa-novin-ray-core';
 import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, BbbTranslatePipe, LayoutService, measureText, getLabelWidth, SortDirection, BaseUlvSettingComponent, getResetGridSettings, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, SelectionMode, FormPanelService, LayoutMainContentService, GetAllColumnsSorted, getParentHeight, getControlSizeMode, getDeviceIsDesktop, getDeviceIsTablet, getGridSettings, BaseDirective, PortalService, FieldBaseComponent, getDateService as getDateService$1, DateService, DateMiladiService, DateHijriService, DateShamsiService, DynamicDarkColorPipe, EllipsifyDirective, createGridEditorFormPanel, TabpageService, LocalStorageService, getAllItemsPerChildren, setOneDepthLevel, BaseViewItemPropsComponent, MoReportValuePipe, ExecuteDynamicCommand, PictureFieldSourcePipe, isImage, getIcon, UploadService, LayoutPanelBaseComponent, UlvMainService, BaseColumnPropsComponent, ColumnService, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, setTableThWidth, TableHeaderWidthMode, calcContextMenuWidth, setColumnWidthByMaxMoContentWidth, calculateColumnWidth, calculateColumnContent, calculateColumnWidthFitToContainer, calculateFreeColumnSize, NotificationService, DateRanges, LogService, ApplicationCtrlrService, BreadcrumbService, IsDarkMode, isFunction, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, getFieldValue, ContainerComponent, DialogParams, ContainerService, FindToolbarItem, FindLayoutSettingFromLayout94, FormPropsBaseComponent, UiService, measureText2, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, NetworkStatusService, isInLocalMode, executeUlvCommandHandler, FillAllLayoutControls, IntersectionStatus, FORM_DIALOG_COMPONENT, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule, ResizableModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
 import moment from 'moment';
@@ -30,6 +30,8 @@ import { RtlService as RtlService$1 } from '@fundamental-ngx/cdk/utils';
 import * as i5 from '@fundamental-ngx/core/title';
 import * as i2$3 from '@fundamental-ngx/core/select';
 import * as i5$1 from '@fundamental-ngx/core/busy-indicator';
+import * as i4$8 from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
 import * as i5$2 from '@fundamental-ngx/core/menu';
 import * as i7$1 from '@fundamental-ngx/core/split-button';
 import * as i8 from '@fundamental-ngx/core/toolbar';
@@ -57,8 +59,6 @@ import * as i4$5 from '@fundamental-ngx/core/notification';
 import { NotificationRef } from '@fundamental-ngx/core/notification';
 import * as i2$9 from '@fundamental-ngx/core/action-sheet';
 import * as i3$7 from '@fundamental-ngx/core/radio';
-import * as i4$8 from '@angular/router';
-import { ActivatedRoute, Router, NavigationEnd, RouterModule } from '@angular/router';
 import * as i4$6 from '@fundamental-ngx/core/breadcrumb';
 import * as i8$1 from '@fundamental-ngx/core/dynamic-page';
 import * as i9 from '@fundamental-ngx/core/dynamic-side-content';
@@ -2568,42 +2568,41 @@ class UlvToolbarComponent extends BaseComponent {
         this.editModeClick = new EventEmitter();
         this.viewClick = new EventEmitter();
         this.createNewInlineMo = new EventEmitter();
+        this._setWidth$ = new Subject();
+        this._refreshToolbar$ = new Subject();
         this._renderer2 = inject(Renderer2);
         this._portalService = inject(PortalService);
-        this.visibled = false;
+        this.visibled = signal(false);
+        this.ulvWidth = signal('100%');
         this.parentWidth = 0;
         this._cdr = inject(ChangeDetectorRef);
+        this._router = inject(Router);
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
-        this._portalService.windowResize$.pipe(takeUntil$1(this._onDestroy$)).subscribe(() => {
-            this.refreshResize();
+        this._portalService.windowResize$
+            .pipe(takeUntil$1(this._onDestroy$))
+            .subscribe(() => {
+            this._setWidth$.next();
         });
+        this._setWidth$
+            .asObservable()
+            .pipe(takeUntil$1(this._onDestroy$))
+            .subscribe(() => this._setWidth());
+        this._refreshToolbar$
+            .pipe(takeUntil$1(this._onDestroy$), debounceTime$1(100))
+            .subscribe(() => this._refreshToolbar());
     }
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
         const { toolbarButtons } = changes;
         if (toolbarButtons) {
-            if (toolbarButtons.firstChange) {
-                setTimeout(() => {
-                    this._refreshToolbar();
-                });
-            }
-            else {
-                this._refreshToolbar();
-                this._cdr.detectChanges();
-            }
+            this._setWidth$.next();
         }
     }
     onVisibilityChange(e) {
         if (e === 'Visible') {
-            this._setWidth();
-            if (!this.visibled) {
-                this.visibled = true;
-            }
-            else {
-                this._refreshToolbar();
-            }
+            this._setWidth$.next();
         }
     }
     onGroupbySettings() {
@@ -2628,27 +2627,15 @@ class UlvToolbarComponent extends BaseComponent {
         return item.text;
     }
     _setWidth() {
-        const x = this._el.nativeElement.parentNode?.offsetWidth;
-        if (this.visibled || this.hideToolbar) {
+        if (this.hideToolbar) {
             return;
         }
-        if (this.parentWidth !== x) {
-            this.parentWidth = x;
-            this._setWidthByElementWidth(x);
-            this.visibled = false;
-        }
-        this.refreshResize();
+        this.ulvWidth.set(`${this._divTempWidth.nativeElement.offsetWidth}px`);
+        this.visibled.set(true);
+        this._refreshToolbar$.next();
     }
-    refreshResize() {
-        const x = Math.floor(this.el.nativeElement.parentNode.getBoundingClientRect().width);
-        this._setWidthByElementWidth(x);
-        // setTimeout(() => {
-        this._refreshToolbar();
-        // });
-    }
-    _setWidthByElementWidth(x) {
-        this.parentWidth > 0 &&
-            this._renderer2.setStyle(this.el.nativeElement, 'width', (x > this.parentWidth ? this.parentWidth : x) + 'px');
+    _refreshUlvWidth() {
+        this.visibled() && setTimeout(() => this._refreshToolbar());
     }
     _refreshToolbar() {
         if (this._tlbCmp) {
@@ -2657,14 +2644,17 @@ class UlvToolbarComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UlvToolbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UlvToolbarComponent, isStandalone: false, selector: "bsu-ulv-toolbar", inputs: { allowGridColumnSort: "allowGridColumnSort", useLayoutItemTextForControl: "useLayoutItemTextForControl", enableSearch: "enableSearch", hideTitle: "hideTitle", title: "title", icon: "icon", deviceName: "deviceName", deviceSize: "deviceSize", access: "access", hideToolbar: "hideToolbar", toolbarButtons: "toolbarButtons", contentDensity: "contentDensity", inlineEditMode: "inlineEditMode", allowInlineEdit: "allowInlineEdit", gridSetting: "gridSetting", viewCollection: "viewCollection", reportView: "reportView", inDialog: "inDialog", isMultiSelect: "isMultiSelect", cls: "cls", hasSelected: "hasSelected", config: "config", hidden: "hidden", buttons: "buttons", moDataListCount: "moDataListCount" }, outputs: { search: "search", groupbyClick: "groupbyClick", sortClick: "sortClick", columnClick: "columnClick", editModeClick: "editModeClick", viewClick: "viewClick", createNewInlineMo: "createNewInlineMo" }, viewQueries: [{ propertyName: "_tlbCmp", first: true, predicate: ["toolbar"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.1\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n></div>\r\n@if (!useLayoutItemTextForControl && !hideToolbar) {\r\n<fd-toolbar\r\n    #toolbar\r\n    [shouldOverflow]=\"deviceSize === 's'\"\r\n    [ngClass]=\"deviceSize\"\r\n    [hasTitle]=\"!hideTitle\"\r\n    [forceOverflow]=\"true\"\r\n    [ngClass]=\"cls\"\r\n>\r\n    @if(!hideTitle && deviceSize !== 's' ? (title | bbbTranslate) : ''){ @if(icon){\r\n    <fd-icon [glyph]=\"icon\"></fd-icon>\r\n    }\r\n    <h4 fd-title>{{ title | bbbTranslate }}</h4>\r\n    } @if (deviceSize !== 's') {\r\n    <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer>\r\n    } @if (!hideToolbar) { @for (btn of toolbarButtons; track _trackBy(i, btn); let i = $index) { @if (btn !== '-' &&\r\n    btn.Command && !btn.Command.CustomUi && !btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"btn.itemId === 'Edit' ? 'always' : btn.Command?.IsBuiltin ? 'low' : 'high'\"\r\n        [ulvCommandHandler]=\"btn\"\r\n        [disable]=\"inlineEditMode && btn.itemId === 'New'\"\r\n        [disabled]=\"btn.Command._isEnable === false ? true : false\"\r\n        [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\r\n        [glyph]=\"deviceSize === 's' ? null : btn.newIcon || btn.Command.JsonExtraProp?.Icon\"\r\n        [title]=\"(btn.Command?.IsBuiltin ? btn.text : '') | bbbTranslate\"\r\n        (click)=\"inlineEditMode && btn.itemId === 'New' && createNewInlineMo.emit()\"\r\n        bodyClick\r\n    >\r\n        @if (!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" />\r\n        } @if (!btn.hideText || deviceSize === 's') {\r\n        <span>{{ (!btn.text && btn.isCustom ? btn.itemId : btn.text) | bbbTranslate }}</span>\r\n        }\r\n    </button>\r\n    } @if ((btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile') {\r\n    <fd-toolbar-separator fd-toolbar-item></fd-toolbar-separator>\r\n    } @if (btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [fdType]=\"btn.Command?.IsBuiltin ? 'standard' : 'transparent'\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n        bodyClick\r\n    >\r\n        <fd-menu #menu>\r\n            @for (btnCommand of btn.menu.items; track btnCommand) {\r\n            <li fd-menu-item [ulvCommandHandler]=\"btnCommand\" (click)=\"menu.close()\">\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } @if (btn !== '-' && btn.Command && btn.Command.CustomUi) {\r\n    <bnrc-dynamic-form-toolbaritem\r\n        fd-toolbar-item\r\n        [ulvCommandHandler]=\"btn\"\r\n        [component]=\"btn.Command?.CustomUi\"\r\n        [context]=\"btn\"\r\n        [isEnable]=\"btn.Command?._isEnable\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        bodyClick\r\n    ></bnrc-dynamic-form-toolbaritem>\r\n    } }\r\n    <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n    @if (allowInlineEdit && access?.Edit) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\r\n        [glyph]=\"'edit'\"\r\n        [label]=\"deviceSize === 's' ? ('Inline Edit In List' | bbbTranslate) : ''\"\r\n        (click)=\"onEditMode()\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        [title]=\"'Inline Edit In List' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (gridSetting && gridSetting.Hidden !== true && allowGridColumnSort) { @if (deviceSize === 's') {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onGroupbySettings()\"\r\n        [label]=\"'Groups' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onSortSettings()\"\r\n        [label]=\"'Sort' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onColumnSettings()\"\r\n        [label]=\"'Columns' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (deviceSize !== 's') {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"'never'\"\r\n        [fdMenu]=\"true\"\r\n        fdType=\"transparent\"\r\n        glyph=\"action-settings\"\r\n        [title]=\"'Settings' | bbbTranslate\"\r\n        [fdMenuTrigger]=\"tableMenuSettings\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <fd-menu #tableMenuSettings>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onColumnSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"action-settings\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Columns' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onSortSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"sort\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Sort' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onGroupbySettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"group-2\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Groups' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n    </fd-menu>\r\n    } @if (viewCollection && viewCollection.length > 1) {\r\n    <fd-split-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"deviceSize === 's' ? 'always' : 'low'\"\r\n        [fdType]=\"'transparent'\"\r\n        [mainAction]=\"{\r\n            keepMainAction: true,\r\n            mainActionTitle: splitBtnTitle\r\n        }\"\r\n    >\r\n        <fd-menu>\r\n            @for (viewObject of viewCollection; track viewObject) {\r\n            <li fd-menu-item>\r\n                <div fd-menu-interactive (click)=\"onChangeView(viewObject)\" bodyClick>\r\n                    <span fd-menu-title>\r\n                        <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    }\r\n    <ng-template #splitBtnTitle>\r\n        <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\r\n    </ng-template>\r\n    <ng-template #splitBtnSettings>\r\n        <fd-icon [glyph]=\"'action-settings'\"></fd-icon>\r\n    </ng-template>\r\n    }\r\n</fd-toolbar>\r\n}\r\n", styles: [":host{display:block;width:100%;position:relative}:host fd-toolbar.border-b-0{border-bottom-width:0px!important}:host ::ng-deep .fd-toolbar{flex-wrap:nowrap!important}:host ::ng-deep .fd-toolbar{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host fd-toolbar.s ::ng-deep .fd-toolbar{justify-content:end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.UlvCommandDirective, selector: "[ulvCommandHandler]", inputs: ["ulvCommandHandler", "disable"], outputs: ["commandClick"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i7$1.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i8.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i8.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UlvToolbarComponent, isStandalone: false, selector: "bsu-ulv-toolbar", inputs: { allowGridColumnSort: "allowGridColumnSort", useLayoutItemTextForControl: "useLayoutItemTextForControl", enableSearch: "enableSearch", hideTitle: "hideTitle", title: "title", icon: "icon", deviceName: "deviceName", deviceSize: "deviceSize", access: "access", hideToolbar: "hideToolbar", toolbarButtons: "toolbarButtons", contentDensity: "contentDensity", inlineEditMode: "inlineEditMode", allowInlineEdit: "allowInlineEdit", gridSetting: "gridSetting", viewCollection: "viewCollection", reportView: "reportView", inDialog: "inDialog", isMultiSelect: "isMultiSelect", cls: "cls", hasSelected: "hasSelected", config: "config", hidden: "hidden", buttons: "buttons", moDataListCount: "moDataListCount" }, outputs: { search: "search", groupbyClick: "groupbyClick", sortClick: "sortClick", columnClick: "columnClick", editModeClick: "editModeClick", viewClick: "viewClick", createNewInlineMo: "createNewInlineMo" }, viewQueries: [{ propertyName: "_tlbCmp", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "_divTempWidth", first: true, predicate: ["divTempWidth"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.1\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n    #divTempWidth\r\n></div>\r\n@if (!useLayoutItemTextForControl && !hideToolbar && visibled()) {\r\n<fd-toolbar\r\n    #toolbar\r\n    [shouldOverflow]=\"deviceSize === 's'\"\r\n    [ngClass]=\"deviceSize\"\r\n    [hasTitle]=\"!hideTitle\"\r\n    [forceOverflow]=\"true\"\r\n    [ngClass]=\"cls\"\r\n    [style.width]=\"ulvWidth()\"\r\n>\r\n    @if(!hideTitle && deviceSize !== 's' ? (title | bbbTranslate) : ''){ @if(icon){\r\n    <fd-icon [glyph]=\"icon\"></fd-icon>\r\n    }\r\n    <h4 fd-title>{{ title | bbbTranslate }}</h4>\r\n    } @if (deviceSize !== 's') {\r\n    <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer>\r\n    } @if (!hideToolbar) { @for (btn of toolbarButtons; track _trackBy(i, btn); let i = $index) { @if (btn !== '-' &&\r\n    btn.Command && !btn.Command.CustomUi && !btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"btn.itemId === 'Edit' ? 'always' : btn.Command?.IsBuiltin ? 'low' : 'high'\"\r\n        [ulvCommandHandler]=\"btn\"\r\n        [disable]=\"inlineEditMode && btn.itemId === 'New'\"\r\n        [disabled]=\"btn.Command._isEnable === false ? true : false\"\r\n        [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\r\n        [glyph]=\"deviceSize === 's' ? null : btn.newIcon || btn.Command.JsonExtraProp?.Icon\"\r\n        [title]=\"(btn.Command?.IsBuiltin ? btn.text : '') | bbbTranslate\"\r\n        (click)=\"inlineEditMode && btn.itemId === 'New' && createNewInlineMo.emit()\"\r\n        bodyClick\r\n    >\r\n        @if (!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" />\r\n        } @if (!btn.hideText || deviceSize === 's') {\r\n        <span>{{ (!btn.text && btn.isCustom ? btn.itemId : btn.text) | bbbTranslate }}</span>\r\n        }\r\n    </button>\r\n    } @if ((btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile') {\r\n    <fd-toolbar-separator fd-toolbar-item></fd-toolbar-separator>\r\n    } @if (btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [fdType]=\"btn.Command?.IsBuiltin ? 'standard' : 'transparent'\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n        bodyClick\r\n    >\r\n        <fd-menu #menu>\r\n            @for (btnCommand of btn.menu.items; track btnCommand) {\r\n            <li fd-menu-item [ulvCommandHandler]=\"btnCommand\" (click)=\"menu.close()\">\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } @if (btn !== '-' && btn.Command && btn.Command.CustomUi) {\r\n    <bnrc-dynamic-form-toolbaritem\r\n        fd-toolbar-item\r\n        [ulvCommandHandler]=\"btn\"\r\n        [component]=\"btn.Command?.CustomUi\"\r\n        [context]=\"btn\"\r\n        [isEnable]=\"btn.Command?._isEnable\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        bodyClick\r\n    ></bnrc-dynamic-form-toolbaritem>\r\n    } }\r\n    <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n    @if (allowInlineEdit && access?.Edit) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\r\n        [glyph]=\"'edit'\"\r\n        [label]=\"deviceSize === 's' ? ('Inline Edit In List' | bbbTranslate) : ''\"\r\n        (click)=\"onEditMode()\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        [title]=\"'Inline Edit In List' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (gridSetting && gridSetting.Hidden !== true && allowGridColumnSort) { @if (deviceSize === 's') {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onGroupbySettings()\"\r\n        [label]=\"'Groups' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onSortSettings()\"\r\n        [label]=\"'Sort' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onColumnSettings()\"\r\n        [label]=\"'Columns' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (deviceSize !== 's') {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"'never'\"\r\n        [fdMenu]=\"true\"\r\n        fdType=\"transparent\"\r\n        glyph=\"action-settings\"\r\n        [title]=\"'Settings' | bbbTranslate\"\r\n        [fdMenuTrigger]=\"tableMenuSettings\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <fd-menu #tableMenuSettings>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onColumnSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"action-settings\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Columns' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onSortSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"sort\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Sort' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onGroupbySettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"group-2\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Groups' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n    </fd-menu>\r\n    } @if (viewCollection && viewCollection.length > 1) {\r\n    <fd-split-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"deviceSize === 's' ? 'always' : 'low'\"\r\n        [fdType]=\"'transparent'\"\r\n        [mainAction]=\"{\r\n            keepMainAction: true,\r\n            mainActionTitle: splitBtnTitle\r\n        }\"\r\n    >\r\n        <fd-menu>\r\n            @for (viewObject of viewCollection; track viewObject) {\r\n            <li fd-menu-item>\r\n                <div fd-menu-interactive (click)=\"onChangeView(viewObject)\" bodyClick>\r\n                    <span fd-menu-title>\r\n                        <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    }\r\n    <ng-template #splitBtnTitle>\r\n        <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\r\n    </ng-template>\r\n    <ng-template #splitBtnSettings>\r\n        <fd-icon [glyph]=\"'action-settings'\"></fd-icon>\r\n    </ng-template>\r\n    }\r\n</fd-toolbar>\r\n}\r\n", styles: [":host{display:block;width:100%;position:relative}:host fd-toolbar.border-b-0{border-bottom-width:0px!important}:host ::ng-deep .fd-toolbar{flex-wrap:nowrap!important}:host ::ng-deep .fd-toolbar{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host fd-toolbar.s ::ng-deep .fd-toolbar{justify-content:end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.UlvCommandDirective, selector: "[ulvCommandHandler]", inputs: ["ulvCommandHandler", "disable"], outputs: ["commandClick"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i5$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i5$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i5$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i5$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i5$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i7$1.SplitButtonComponent, selector: "fd-split-button", inputs: ["glyph", "glyphFont", "disabled", "fdType", "expandButtonTitle", "selected", "fixedWidth", "mainAction", "arialLabel"], outputs: ["primaryButtonClicked"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i8.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i8.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UlvToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ulv-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.1\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n></div>\r\n@if (!useLayoutItemTextForControl && !hideToolbar) {\r\n<fd-toolbar\r\n    #toolbar\r\n    [shouldOverflow]=\"deviceSize === 's'\"\r\n    [ngClass]=\"deviceSize\"\r\n    [hasTitle]=\"!hideTitle\"\r\n    [forceOverflow]=\"true\"\r\n    [ngClass]=\"cls\"\r\n>\r\n    @if(!hideTitle && deviceSize !== 's' ? (title | bbbTranslate) : ''){ @if(icon){\r\n    <fd-icon [glyph]=\"icon\"></fd-icon>\r\n    }\r\n    <h4 fd-title>{{ title | bbbTranslate }}</h4>\r\n    } @if (deviceSize !== 's') {\r\n    <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer>\r\n    } @if (!hideToolbar) { @for (btn of toolbarButtons; track _trackBy(i, btn); let i = $index) { @if (btn !== '-' &&\r\n    btn.Command && !btn.Command.CustomUi && !btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"btn.itemId === 'Edit' ? 'always' : btn.Command?.IsBuiltin ? 'low' : 'high'\"\r\n        [ulvCommandHandler]=\"btn\"\r\n        [disable]=\"inlineEditMode && btn.itemId === 'New'\"\r\n        [disabled]=\"btn.Command._isEnable === false ? true : false\"\r\n        [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\r\n        [glyph]=\"deviceSize === 's' ? null : btn.newIcon || btn.Command.JsonExtraProp?.Icon\"\r\n        [title]=\"(btn.Command?.IsBuiltin ? btn.text : '') | bbbTranslate\"\r\n        (click)=\"inlineEditMode && btn.itemId === 'New' && createNewInlineMo.emit()\"\r\n        bodyClick\r\n    >\r\n        @if (!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" />\r\n        } @if (!btn.hideText || deviceSize === 's') {\r\n        <span>{{ (!btn.text && btn.isCustom ? btn.itemId : btn.text) | bbbTranslate }}</span>\r\n        }\r\n    </button>\r\n    } @if ((btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile') {\r\n    <fd-toolbar-separator fd-toolbar-item></fd-toolbar-separator>\r\n    } @if (btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [fdType]=\"btn.Command?.IsBuiltin ? 'standard' : 'transparent'\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n        bodyClick\r\n    >\r\n        <fd-menu #menu>\r\n            @for (btnCommand of btn.menu.items; track btnCommand) {\r\n            <li fd-menu-item [ulvCommandHandler]=\"btnCommand\" (click)=\"menu.close()\">\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } @if (btn !== '-' && btn.Command && btn.Command.CustomUi) {\r\n    <bnrc-dynamic-form-toolbaritem\r\n        fd-toolbar-item\r\n        [ulvCommandHandler]=\"btn\"\r\n        [component]=\"btn.Command?.CustomUi\"\r\n        [context]=\"btn\"\r\n        [isEnable]=\"btn.Command?._isEnable\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        bodyClick\r\n    ></bnrc-dynamic-form-toolbaritem>\r\n    } }\r\n    <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n    @if (allowInlineEdit && access?.Edit) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\r\n        [glyph]=\"'edit'\"\r\n        [label]=\"deviceSize === 's' ? ('Inline Edit In List' | bbbTranslate) : ''\"\r\n        (click)=\"onEditMode()\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        [title]=\"'Inline Edit In List' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (gridSetting && gridSetting.Hidden !== true && allowGridColumnSort) { @if (deviceSize === 's') {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onGroupbySettings()\"\r\n        [label]=\"'Groups' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onSortSettings()\"\r\n        [label]=\"'Sort' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onColumnSettings()\"\r\n        [label]=\"'Columns' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (deviceSize !== 's') {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"'never'\"\r\n        [fdMenu]=\"true\"\r\n        fdType=\"transparent\"\r\n        glyph=\"action-settings\"\r\n        [title]=\"'Settings' | bbbTranslate\"\r\n        [fdMenuTrigger]=\"tableMenuSettings\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <fd-menu #tableMenuSettings>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onColumnSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"action-settings\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Columns' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onSortSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"sort\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Sort' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onGroupbySettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"group-2\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Groups' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n    </fd-menu>\r\n    } @if (viewCollection && viewCollection.length > 1) {\r\n    <fd-split-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"deviceSize === 's' ? 'always' : 'low'\"\r\n        [fdType]=\"'transparent'\"\r\n        [mainAction]=\"{\r\n            keepMainAction: true,\r\n            mainActionTitle: splitBtnTitle\r\n        }\"\r\n    >\r\n        <fd-menu>\r\n            @for (viewObject of viewCollection; track viewObject) {\r\n            <li fd-menu-item>\r\n                <div fd-menu-interactive (click)=\"onChangeView(viewObject)\" bodyClick>\r\n                    <span fd-menu-title>\r\n                        <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    }\r\n    <ng-template #splitBtnTitle>\r\n        <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\r\n    </ng-template>\r\n    <ng-template #splitBtnSettings>\r\n        <fd-icon [glyph]=\"'action-settings'\"></fd-icon>\r\n    </ng-template>\r\n    }\r\n</fd-toolbar>\r\n}\r\n", styles: [":host{display:block;width:100%;position:relative}:host fd-toolbar.border-b-0{border-bottom-width:0px!important}:host ::ng-deep .fd-toolbar{flex-wrap:nowrap!important}:host ::ng-deep .fd-toolbar{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host fd-toolbar.s ::ng-deep .fd-toolbar{justify-content:end}\n"] }]
+            args: [{ selector: 'bsu-ulv-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\r\n    style=\"width: 100%; height: 0; visibility: hidden; opacity: 0\"\r\n    intersectionObserver\r\n    [intersectionThreshold]=\"0.1\"\r\n    (visibilityChange)=\"onVisibilityChange($event)\"\r\n    #divTempWidth\r\n></div>\r\n@if (!useLayoutItemTextForControl && !hideToolbar && visibled()) {\r\n<fd-toolbar\r\n    #toolbar\r\n    [shouldOverflow]=\"deviceSize === 's'\"\r\n    [ngClass]=\"deviceSize\"\r\n    [hasTitle]=\"!hideTitle\"\r\n    [forceOverflow]=\"true\"\r\n    [ngClass]=\"cls\"\r\n    [style.width]=\"ulvWidth()\"\r\n>\r\n    @if(!hideTitle && deviceSize !== 's' ? (title | bbbTranslate) : ''){ @if(icon){\r\n    <fd-icon [glyph]=\"icon\"></fd-icon>\r\n    }\r\n    <h4 fd-title>{{ title | bbbTranslate }}</h4>\r\n    } @if (deviceSize !== 's') {\r\n    <fd-toolbar-spacer fd-toolbar-item></fd-toolbar-spacer>\r\n    } @if (!hideToolbar) { @for (btn of toolbarButtons; track _trackBy(i, btn); let i = $index) { @if (btn !== '-' &&\r\n    btn.Command && !btn.Command.CustomUi && !btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"btn.itemId === 'Edit' ? 'always' : btn.Command?.IsBuiltin ? 'low' : 'high'\"\r\n        [ulvCommandHandler]=\"btn\"\r\n        [disable]=\"inlineEditMode && btn.itemId === 'New'\"\r\n        [disabled]=\"btn.Command._isEnable === false ? true : false\"\r\n        [fdType]=\"!btn.Command._isEnable ? 'transparent' : btn.Command.JsonExtraProp?.Design || 'transparent'\"\r\n        [glyph]=\"deviceSize === 's' ? null : btn.newIcon || btn.Command.JsonExtraProp?.Icon\"\r\n        [title]=\"(btn.Command?.IsBuiltin ? btn.text : '') | bbbTranslate\"\r\n        (click)=\"inlineEditMode && btn.itemId === 'New' && createNewInlineMo.emit()\"\r\n        bodyClick\r\n    >\r\n        @if (!btn.Command.JsonExtraProp?.Icon && !btn.Command?.IsBuiltin && btn.icon) {\r\n        <img width=\"16\" [src]=\"btn.icon\" />\r\n        } @if (!btn.hideText || deviceSize === 's') {\r\n        <span>{{ (!btn.text && btn.isCustom ? btn.itemId : btn.text) | bbbTranslate }}</span>\r\n        }\r\n    </button>\r\n    } @if ((btn === '-' || btn.type === 'seperator') && deviceName !== 'mobile') {\r\n    <fd-toolbar-separator fd-toolbar-item></fd-toolbar-separator>\r\n    } @if (btn.menu) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdMenu]=\"true\"\r\n        [fdType]=\"btn.Command?.IsBuiltin ? 'standard' : 'transparent'\"\r\n        [label]=\"btn.text | bbbTranslate\"\r\n        [ariaLabel]=\"btn.text | bbbTranslate\"\r\n        [fdMenuTrigger]=\"menu\"\r\n        bodyClick\r\n    >\r\n        <fd-menu #menu>\r\n            @for (btnCommand of btn.menu.items; track btnCommand) {\r\n            <li fd-menu-item [ulvCommandHandler]=\"btnCommand\" (click)=\"menu.close()\">\r\n                <div fd-menu-interactive>\r\n                    <span fd-menu-title>{{ btnCommand.text | bbbTranslate }}</span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </button>\r\n    } @if (btn !== '-' && btn.Command && btn.Command.CustomUi) {\r\n    <bnrc-dynamic-form-toolbaritem\r\n        fd-toolbar-item\r\n        [ulvCommandHandler]=\"btn\"\r\n        [component]=\"btn.Command?.CustomUi\"\r\n        [context]=\"btn\"\r\n        [isEnable]=\"btn.Command?._isEnable\"\r\n        [deviceName]=\"deviceName\"\r\n        [deviceSize]=\"deviceSize\"\r\n        bodyClick\r\n    ></bnrc-dynamic-form-toolbaritem>\r\n    } }\r\n    <ng-content select=\"[fd-toolbar-item]\"></ng-content>\r\n    @if (allowInlineEdit && access?.Edit) {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [fdType]=\"inlineEditMode ? 'emphasized' : 'transparent'\"\r\n        [glyph]=\"'edit'\"\r\n        [label]=\"deviceSize === 's' ? ('Inline Edit In List' | bbbTranslate) : ''\"\r\n        (click)=\"onEditMode()\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        [title]=\"'Inline Edit In List' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (gridSetting && gridSetting.Hidden !== true && allowGridColumnSort) { @if (deviceSize === 's') {\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onGroupbySettings()\"\r\n        [label]=\"'Groups' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onSortSettings()\"\r\n        [label]=\"'Sort' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    <button\r\n        fd-toolbar-item\r\n        fd-button\r\n        [contentDensity]=\"contentDensity\"\r\n        fdType=\"transparent\"\r\n        [attr.fdOverflowPriority]=\"'always'\"\r\n        (click)=\"onColumnSettings()\"\r\n        [label]=\"'Columns' | bbbTranslate\"\r\n        bodyClick\r\n    ></button>\r\n    } @if (deviceSize !== 's') {\r\n    <button\r\n        fd-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"'never'\"\r\n        [fdMenu]=\"true\"\r\n        fdType=\"transparent\"\r\n        glyph=\"action-settings\"\r\n        [title]=\"'Settings' | bbbTranslate\"\r\n        [fdMenuTrigger]=\"tableMenuSettings\"\r\n        bodyClick\r\n    ></button>\r\n    }\r\n    <fd-menu #tableMenuSettings>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onColumnSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"action-settings\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Columns' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onSortSettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"sort\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Sort' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n        <li fd-menu-item>\r\n            <div fd-menu-interactive (click)=\"tableMenuSettings.close(); onGroupbySettings()\" bodyClick>\r\n                <fd-menu-addon position=\"before\" glyph=\"group-2\"></fd-menu-addon>\r\n                <span fd-menu-title>\r\n                    {{ 'Groups' | bbbTranslate }}\r\n                </span>\r\n            </div>\r\n        </li>\r\n    </fd-menu>\r\n    } @if (viewCollection && viewCollection.length > 1) {\r\n    <fd-split-button\r\n        fd-toolbar-item\r\n        [attr.fdOverflowPriority]=\"deviceSize === 's' ? 'always' : 'low'\"\r\n        [fdType]=\"'transparent'\"\r\n        [mainAction]=\"{\r\n            keepMainAction: true,\r\n            mainActionTitle: splitBtnTitle\r\n        }\"\r\n    >\r\n        <fd-menu>\r\n            @for (viewObject of viewCollection; track viewObject) {\r\n            <li fd-menu-item>\r\n                <div fd-menu-interactive (click)=\"onChangeView(viewObject)\" bodyClick>\r\n                    <span fd-menu-title>\r\n                        <fd-icon [glyph]=\"viewObject.UiComponent.Settings?.Icon\"> </fd-icon>\r\n                    </span>\r\n                </div>\r\n            </li>\r\n            }\r\n        </fd-menu>\r\n    </fd-split-button>\r\n    }\r\n    <ng-template #splitBtnTitle>\r\n        <fd-icon [glyph]=\"reportView.UiComponent.Settings?.Icon\"></fd-icon>\r\n    </ng-template>\r\n    <ng-template #splitBtnSettings>\r\n        <fd-icon [glyph]=\"'action-settings'\"></fd-icon>\r\n    </ng-template>\r\n    }\r\n</fd-toolbar>\r\n}\r\n", styles: [":host{display:block;width:100%;position:relative}:host fd-toolbar.border-b-0{border-bottom-width:0px!important}:host ::ng-deep .fd-toolbar{flex-wrap:nowrap!important}:host ::ng-deep .fd-toolbar{border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-left:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}:host fd-toolbar.s ::ng-deep .fd-toolbar{justify-content:end}\n"] }]
         }], propDecorators: { _tlbCmp: [{
                 type: ViewChild,
                 args: ['toolbar']
+            }], _divTempWidth: [{
+                type: ViewChild,
+                args: ['divTempWidth', { static: true }]
             }], allowGridColumnSort: [{
                 type: Input
             }], useLayoutItemTextForControl: [{
@@ -4620,11 +4610,11 @@ class BlobViewerComponent extends BaseComponent {
         this.valueUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(url.createObjectURL(blob));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BlobViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BlobViewerComponent, isStandalone: false, selector: "bsu-blob-viewer", inputs: { file: "file" }, viewQueries: [{ propertyName: "_pdfViewerOnDemand", first: true, predicate: ["pdfViewerOnDemand"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (loading()) {\r\n<bsu-mask></bsu-mask>\r\n} @else if (valueUrl) { @switch (file.Type) { @case ('pdf') {\r\n<ng-container *ngTemplateOutlet=\"objectTpl\"></ng-container>\r\n} @case('txt'){\r\n<ng-container *ngTemplateOutlet=\"objectTpl\"></ng-container>\r\n} @case('m4a'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('x-ms-wma'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('x-wav'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('mp4'){\r\n<ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n} @case('webm'){\r\n<ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n} } }\r\n\r\n<ng-template #objectTpl let-type>\r\n    @if(!isMobile){\r\n    <object\r\n        style=\"flex-grow: 1\"\r\n        [attr.data]=\"valueUrl\"\r\n        type=\"application/pdf\"\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        [attr.html]=\"fallbackUrl\"\r\n    ></object>\r\n    }\r\n</ng-template>\r\n<ng-template #audio>\r\n    <audio controls>\r\n        <source [src]=\"valueUrl\" />\r\n        Your browser does not support the audio element.\r\n    </audio>\r\n</ng-template>\r\n<ng-template #video>\r\n    <video controls>\r\n        <source [src]=\"valueUrl\" />\r\n        Your browser does not support the audio element.\r\n    </video>\r\n</ng-template>\r\n@if(blobUrl && isMobile){\r\n<div intersectionObserver [intersectionThreshold]=\"0.1\" (visibilityChange)=\"onVisibilityChange($event)\"></div>\r\n<ng2-pdfjs-viewer\r\n    #pdfViewerOnDemand\r\n    [downloadFileName]=\"blobUrl\"\r\n    [externalWindow]=\"false\"\r\n    [openFile]=\"false\"\r\n    [viewBookmark]=\"false\"\r\n    [showSpinner]=\"true\"\r\n    [download]=\"true\"\r\n    [pdfSrc]=\"blobUrl\"\r\n></ng2-pdfjs-viewer>\r\n}\r\n", styles: [":host{display:block;position:relative;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "component", type: i3$5.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "target", "showSpinner", "downloadFileName", "openFile", "download", "startDownload", "viewBookmark", "print", "startPrint", "fullScreen", "find", "zoom", "nameddest", "pagemode", "lastPage", "rotatecw", "rotateccw", "cursor", "scroll", "spread", "locale", "useOnlyCssZoom", "errorOverride", "errorAppend", "errorMessage", "diagnosticLogs", "externalWindowOptions", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BlobViewerComponent, isStandalone: false, selector: "bsu-blob-viewer", inputs: { file: "file" }, viewQueries: [{ propertyName: "_pdfViewerOnDemand", first: true, predicate: ["pdfViewerOnDemand"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (loading()) {\r\n<bsu-mask></bsu-mask>\r\n} @else if (valueUrl) { @switch (file.Type) { @case ('pdf') {\r\n<ng-container *ngTemplateOutlet=\"objectTpl\"></ng-container>\r\n} @case('txt'){\r\n<ng-container *ngTemplateOutlet=\"objectTpl\"></ng-container>\r\n} @case('m4a'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('x-ms-wma'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('x-wav'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('mp4'){\r\n<ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n} @case('webm'){\r\n<ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n} } }\r\n\r\n<ng-template #objectTpl let-type>\r\n    @if(!isMobile){\r\n    <object\r\n        style=\"flex-grow: 1\"\r\n        [attr.data]=\"valueUrl\"\r\n        type=\"application/pdf\"\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        [attr.html]=\"fallbackUrl\"\r\n    ></object>\r\n    }\r\n</ng-template>\r\n<ng-template #audio>\r\n    <audio controls>\r\n        <source [src]=\"valueUrl\" />\r\n        Your browser does not support the audio element.\r\n    </audio>\r\n</ng-template>\r\n<ng-template #video>\r\n    <video controls>\r\n        <source [src]=\"valueUrl\" />\r\n        Your browser does not support the audio element.\r\n    </video>\r\n</ng-template>\r\n@if(blobUrl && isMobile){\r\n<div intersectionObserver [intersectionThreshold]=\"0.1\" (visibilityChange)=\"onVisibilityChange($event)\"></div>\r\n<ng2-pdfjs-viewer\r\n    #pdfViewerOnDemand\r\n    [downloadFileName]=\"blobUrl\"\r\n    [externalWindow]=\"false\"\r\n    [openFile]=\"false\"\r\n    [viewBookmark]=\"false\"\r\n    [showSpinner]=\"true\"\r\n    [download]=\"true\"\r\n    [pdfSrc]=\"blobUrl\"\r\n></ng2-pdfjs-viewer>\r\n}\r\n", styles: [":host{display:flex;position:relative;height:100%;width:100%;flex:1;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "component", type: i3$5.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "target", "showSpinner", "downloadFileName", "openFile", "download", "startDownload", "viewBookmark", "print", "startPrint", "fullScreen", "find", "zoom", "nameddest", "pagemode", "lastPage", "rotatecw", "rotateccw", "cursor", "scroll", "spread", "locale", "useOnlyCssZoom", "errorOverride", "errorAppend", "errorMessage", "diagnosticLogs", "externalWindowOptions", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BlobViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-blob-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (loading()) {\r\n<bsu-mask></bsu-mask>\r\n} @else if (valueUrl) { @switch (file.Type) { @case ('pdf') {\r\n<ng-container *ngTemplateOutlet=\"objectTpl\"></ng-container>\r\n} @case('txt'){\r\n<ng-container *ngTemplateOutlet=\"objectTpl\"></ng-container>\r\n} @case('m4a'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('x-ms-wma'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('x-wav'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('mp4'){\r\n<ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n} @case('webm'){\r\n<ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n} } }\r\n\r\n<ng-template #objectTpl let-type>\r\n    @if(!isMobile){\r\n    <object\r\n        style=\"flex-grow: 1\"\r\n        [attr.data]=\"valueUrl\"\r\n        type=\"application/pdf\"\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        [attr.html]=\"fallbackUrl\"\r\n    ></object>\r\n    }\r\n</ng-template>\r\n<ng-template #audio>\r\n    <audio controls>\r\n        <source [src]=\"valueUrl\" />\r\n        Your browser does not support the audio element.\r\n    </audio>\r\n</ng-template>\r\n<ng-template #video>\r\n    <video controls>\r\n        <source [src]=\"valueUrl\" />\r\n        Your browser does not support the audio element.\r\n    </video>\r\n</ng-template>\r\n@if(blobUrl && isMobile){\r\n<div intersectionObserver [intersectionThreshold]=\"0.1\" (visibilityChange)=\"onVisibilityChange($event)\"></div>\r\n<ng2-pdfjs-viewer\r\n    #pdfViewerOnDemand\r\n    [downloadFileName]=\"blobUrl\"\r\n    [externalWindow]=\"false\"\r\n    [openFile]=\"false\"\r\n    [viewBookmark]=\"false\"\r\n    [showSpinner]=\"true\"\r\n    [download]=\"true\"\r\n    [pdfSrc]=\"blobUrl\"\r\n></ng2-pdfjs-viewer>\r\n}\r\n", styles: [":host{display:block;position:relative;height:100%;width:100%}\n"] }]
+            args: [{ selector: 'bsu-blob-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (loading()) {\r\n<bsu-mask></bsu-mask>\r\n} @else if (valueUrl) { @switch (file.Type) { @case ('pdf') {\r\n<ng-container *ngTemplateOutlet=\"objectTpl\"></ng-container>\r\n} @case('txt'){\r\n<ng-container *ngTemplateOutlet=\"objectTpl\"></ng-container>\r\n} @case('m4a'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('x-ms-wma'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('x-wav'){\r\n<ng-container *ngTemplateOutlet=\"audio\"></ng-container>\r\n} @case('mp4'){\r\n<ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n} @case('webm'){\r\n<ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n} } }\r\n\r\n<ng-template #objectTpl let-type>\r\n    @if(!isMobile){\r\n    <object\r\n        style=\"flex-grow: 1\"\r\n        [attr.data]=\"valueUrl\"\r\n        type=\"application/pdf\"\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        [attr.html]=\"fallbackUrl\"\r\n    ></object>\r\n    }\r\n</ng-template>\r\n<ng-template #audio>\r\n    <audio controls>\r\n        <source [src]=\"valueUrl\" />\r\n        Your browser does not support the audio element.\r\n    </audio>\r\n</ng-template>\r\n<ng-template #video>\r\n    <video controls>\r\n        <source [src]=\"valueUrl\" />\r\n        Your browser does not support the audio element.\r\n    </video>\r\n</ng-template>\r\n@if(blobUrl && isMobile){\r\n<div intersectionObserver [intersectionThreshold]=\"0.1\" (visibilityChange)=\"onVisibilityChange($event)\"></div>\r\n<ng2-pdfjs-viewer\r\n    #pdfViewerOnDemand\r\n    [downloadFileName]=\"blobUrl\"\r\n    [externalWindow]=\"false\"\r\n    [openFile]=\"false\"\r\n    [viewBookmark]=\"false\"\r\n    [showSpinner]=\"true\"\r\n    [download]=\"true\"\r\n    [pdfSrc]=\"blobUrl\"\r\n></ng2-pdfjs-viewer>\r\n}\r\n", styles: [":host{display:flex;position:relative;height:100%;width:100%;flex:1;flex-direction:column}\n"] }]
         }], propDecorators: { file: [{
                 type: Input
             }], _pdfViewerOnDemand: [{
@@ -4672,11 +4662,11 @@ class FileViewerContentComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileViewerContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileViewerContentComponent, isStandalone: false, selector: "bsu-file-viewer-content", inputs: { fillWidth: "fillWidth", imageOnly: "imageOnly", isImageGallery: "isImageGallery", cardMode: "cardMode", showFooter: "showFooter", showContent: "showContent", selected: "selected", width: "width", deviceSize: "deviceSize", cardContentHeight: "cardContentHeight", file: "file" }, outputs: { cantView: "cantView", imageLoaded: "imageLoaded" }, host: { properties: { "style.height": "this._height" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"tw-flex tw-flex-col big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics \" [class.tw-m-auto]=\"!fillWidth\">\r\n            <bsu-mask></bsu-mask>\r\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" (imageLoaded)=\"imageLoaded.emit()\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    @if(!hideContent()){\r\n    <bsu-blob-viewer\r\n        [file]=\"file\"\r\n        [style.width]=\"width\"\r\n        fillEmptySpace\r\n        [disable]=\"deviceSize !== 's'\"\r\n        [decrement]=\"'25px'\"\r\n    ></bsu-blob-viewer>\r\n    }@else{ }\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\" [class.hideContent]=\"hideContent()\" [class.selected]=\"selected\">\r\n        <fd-card-content style=\"text-align: center; padding: 0;margin:auto\" [style.height]=\"cardContentHeight\">\r\n            @if(hideContent() && file){\r\n            <figure fd-illustrated-message type=\"dialog\" [svgConfig]=\"sceneConfig\" svgAriaLabel=\"Illustration label\">\r\n                <figcaption fd-illustrated-message-figcaption>\r\n                    <h3 fd-illustrated-message-title>{{ 'Unable To Load File' | bbbTranslate }}</h3>\r\n                </figcaption>\r\n            </figure>\r\n            } @else{\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n            }\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{display:block;min-height:100%}fd-card.hideContent{box-shadow:none}fd-card.selected{border:.25rem solid var(--sapList_SelectionBorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i1$3.IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: ["type", "svgConfig", "svgAriaLabel", "noSvg", "id", "class"] }, { kind: "component", type: i1$3.IllustratedMessageFigcaptionComponent, selector: "[fd-illustrated-message-figcaption]" }, { kind: "directive", type: i1$3.IllustratedMessageTitleDirective, selector: "[fd-illustrated-message-title]" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: ["file"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileViewerContentComponent, isStandalone: false, selector: "bsu-file-viewer-content", inputs: { fillWidth: "fillWidth", imageOnly: "imageOnly", isImageGallery: "isImageGallery", cardMode: "cardMode", showFooter: "showFooter", showContent: "showContent", selected: "selected", width: "width", deviceSize: "deviceSize", cardContentHeight: "cardContentHeight", file: "file" }, outputs: { cantView: "cantView", imageLoaded: "imageLoaded" }, host: { properties: { "style.height": "this._height" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"tw-flex tw-flex-col big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics \" [class.tw-m-auto]=\"!fillWidth\">\r\n            <bsu-mask></bsu-mask>\r\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" (imageLoaded)=\"imageLoaded.emit()\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    @if(!hideContent()){\r\n    <bsu-blob-viewer\r\n        [file]=\"file\"\r\n        [style.width]=\"width\"\r\n        fillEmptySpace\r\n        [disable]=\"deviceSize !== 's'\"\r\n        [decrement]=\"'25px'\"\r\n    ></bsu-blob-viewer>\r\n    }@else{ }\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\" [class.hideContent]=\"hideContent()\" [class.selected]=\"selected\">\r\n        <fd-card-content style=\"text-align: center; padding: 0;margin:auto\" [style.height]=\"cardContentHeight\">\r\n            @if(hideContent() && file){\r\n            <figure fd-illustrated-message type=\"dialog\" [svgConfig]=\"sceneConfig\" svgAriaLabel=\"Illustration label\">\r\n                <figcaption fd-illustrated-message-figcaption>\r\n                    <h3 fd-illustrated-message-title>{{ 'Unable To Load File' | bbbTranslate }}</h3>\r\n                </figcaption>\r\n            </figure>\r\n            } @else{\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n            }\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;min-height:100%;flex-direction:column}fd-card.hideContent{box-shadow:none}fd-card.selected{border:.25rem solid var(--sapList_SelectionBorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i7$3.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i7$3.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i1$3.IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: ["type", "svgConfig", "svgAriaLabel", "noSvg", "id", "class"] }, { kind: "component", type: i1$3.IllustratedMessageFigcaptionComponent, selector: "[fd-illustrated-message-figcaption]" }, { kind: "directive", type: i1$3.IllustratedMessageTitleDirective, selector: "[fd-illustrated-message-title]" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: ["file"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileViewerContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-file-viewer-content', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"tw-flex tw-flex-col big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics \" [class.tw-m-auto]=\"!fillWidth\">\r\n            <bsu-mask></bsu-mask>\r\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" (imageLoaded)=\"imageLoaded.emit()\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    @if(!hideContent()){\r\n    <bsu-blob-viewer\r\n        [file]=\"file\"\r\n        [style.width]=\"width\"\r\n        fillEmptySpace\r\n        [disable]=\"deviceSize !== 's'\"\r\n        [decrement]=\"'25px'\"\r\n    ></bsu-blob-viewer>\r\n    }@else{ }\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\" [class.hideContent]=\"hideContent()\" [class.selected]=\"selected\">\r\n        <fd-card-content style=\"text-align: center; padding: 0;margin:auto\" [style.height]=\"cardContentHeight\">\r\n            @if(hideContent() && file){\r\n            <figure fd-illustrated-message type=\"dialog\" [svgConfig]=\"sceneConfig\" svgAriaLabel=\"Illustration label\">\r\n                <figcaption fd-illustrated-message-figcaption>\r\n                    <h3 fd-illustrated-message-title>{{ 'Unable To Load File' | bbbTranslate }}</h3>\r\n                </figcaption>\r\n            </figure>\r\n            } @else{\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n            }\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{display:block;min-height:100%}fd-card.hideContent{box-shadow:none}fd-card.selected{border:.25rem solid var(--sapList_SelectionBorderColor)}\n"] }]
+            args: [{ selector: 'bsu-file-viewer-content', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\r\n    *ngTemplateOutlet=\"cardMode ? cardTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n></ng-container>\r\n\r\n<ng-template #showImage>\r\n    <div class=\"tw-flex tw-flex-col big-imgs-box\" [class.fill-width]=\"fillWidth\">\r\n        <div class=\"pics \" [class.tw-m-auto]=\"!fillWidth\">\r\n            <bsu-mask></bsu-mask>\r\n            <img imgLazy [imgLazy]=\"file.mediaUrl\" [src]=\"file.mediaUrl\" [style.width]=\"width\" (imageLoaded)=\"imageLoaded.emit()\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #blobViewer>\r\n    @if(!hideContent()){\r\n    <bsu-blob-viewer\r\n        [file]=\"file\"\r\n        [style.width]=\"width\"\r\n        fillEmptySpace\r\n        [disable]=\"deviceSize !== 's'\"\r\n        [decrement]=\"'25px'\"\r\n    ></bsu-blob-viewer>\r\n    }@else{ }\r\n</ng-template>\r\n<ng-template #cardTpl>\r\n    <fd-card class=\"media\" [class.hideContent]=\"hideContent()\" [class.selected]=\"selected\">\r\n        <fd-card-content style=\"text-align: center; padding: 0;margin:auto\" [style.height]=\"cardContentHeight\">\r\n            @if(hideContent() && file){\r\n            <figure fd-illustrated-message type=\"dialog\" [svgConfig]=\"sceneConfig\" svgAriaLabel=\"Illustration label\">\r\n                <figcaption fd-illustrated-message-figcaption>\r\n                    <h3 fd-illustrated-message-title>{{ 'Unable To Load File' | bbbTranslate }}</h3>\r\n                </figcaption>\r\n            </figure>\r\n            } @else{\r\n            <ng-container\r\n                *ngTemplateOutlet=\"!showContent ? thumbnailTpl : file.isImage || imageOnly ? showImage : blobViewer\"\r\n            ></ng-container>\r\n            }\r\n        </fd-card-content>\r\n    </fd-card>\r\n</ng-template>\r\n<ng-template #thumbnailTpl>\r\n    <img imgLazy [imgLazy]=\"file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.width]=\"width\" />\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;min-height:100%;flex-direction:column}fd-card.hideContent{box-shadow:none}fd-card.selected{border:.25rem solid var(--sapList_SelectionBorderColor)}\n"] }]
         }], propDecorators: { fillWidth: [{
                 type: Input
             }], imageOnly: [{
@@ -4761,11 +4751,11 @@ class FileViewerComponent extends BaseComponent {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileViewerComponent, isStandalone: false, selector: "bsu-file-viewer", viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dialog #dialogTpl [ngClass]=\"isHorizontal ? 'horizontal' : 'vertical'\">\r\n    <fd-dialog-header>\r\n        <ng-template fdkTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Print\"\r\n                    glyph=\"print\"\r\n                    fdType=\"transparent\"\r\n                    printFiles\r\n                    [files]=\"files\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Fit image size\"\r\n                    [glyph]=\"'text-align-justified'\"\r\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n                    (click)=\"fillWidth = !fillWidth\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body #fdbody>\r\n        @if (isImageGallery) {\r\n        <div #gallery class=\"gallery inDialog\" fillEmptySpace [disable]=\"!isHorizontal\" [decrement]=\"'9rem'\">\r\n            @for (media of files; track media; let i = $index) {\r\n            <div\r\n                intersectionObserver\r\n                [intersectionThreshold]=\"0.5\"\r\n                (visibilityChange)=\"onFileViewerContentVisiblitChange($event, i)\"\r\n            ></div>\r\n            <bsu-file-viewer-content\r\n                [attr.id]=\"'fv_gl_' + media.Id\"\r\n                [deviceSize]=\"deviceSize\"\r\n                [file]=\"media\"\r\n                [imageOnly]=\"true\"\r\n                [fillWidth]=\"fillWidth\"\r\n                [isImageGallery]=\"isImageGallery\"\r\n                (imageLoaded)=\"onImageLoaded(i)\"\r\n                [scrollToSelected]=\"allNeedImagesLoaded() && selectedFile?.Id === media.Id\"\r\n            ></bsu-file-viewer-content>\r\n            }\r\n        </div>\r\n        } @if (!isImageGallery) {\r\n        <div class=\"gallery\">\r\n            @if (selectedFile) {\r\n            <bsu-file-viewer-content\r\n                [deviceSize]=\"deviceSize\"\r\n                [fillWidth]=\"fillWidth\"\r\n                [file]=\"selectedFile\"\r\n                [isImageGallery]=\"isImageGallery\"\r\n            ></bsu-file-viewer-content>\r\n            }\r\n        </div>\r\n        } @if (deviceSize !== 's' && isImageGallery) {\r\n        <div\r\n            class=\"thumbnail\"\r\n            style=\"flex-shrink: 1\"\r\n            fillEmptySpace\r\n            [disable]=\"isHorizontal\"\r\n            [class.tw-h-36]=\"isHorizontal\"\r\n        >\r\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\r\n        </div>\r\n        }\r\n    </fd-dialog-body>\r\n</fd-dialog>\r\n<ng-template #layoutGridTpl let-files>\r\n    <fd-layout-grid>\r\n        @if (files) {\r\n        <div fdLayoutGridRow>\r\n            @for (file of files; track file; let i = $index) {\r\n            <div\r\n                [fdLayoutGridCol]=\"6\"\r\n                [colMd]=\"3\"\r\n                [colLg]=\"2\"\r\n                [colXl]=\"2\"\r\n                (click)=\"onMedaiClick(file, i)\"\r\n            >\r\n                <bsu-file-viewer-content\r\n                    [selected]=\"scrollToThumbnailIndex === i\"\r\n                    [cardMode]=\"true\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [file]=\"file\"\r\n                    [isImageGallery]=\"isImageGallery\"\r\n                    [scrollToSelected]=\"scrollToThumbnailIndex === i\"\r\n                ></bsu-file-viewer-content>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </fd-layout-grid>\r\n</ng-template>\r\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{padding:0!important}fd-dialog fd-dialog-body ::ng-deep>section{display:flex}fd-dialog.horizontal fd-dialog-body ::ng-deep>section{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 ::ng-deep>section{flex-direction:row-reverse;padding:0}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1;border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}fd-dialog.vertical .thumbnail{position:sticky;top:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i2.ScrollToSelectedDirective, selector: "[scrollToSelected]", inputs: ["scrollToSelected"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i4$4.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$4.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$4.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "isImageGallery", "cardMode", "showFooter", "showContent", "selected", "width", "deviceSize", "cardContentHeight", "file"], outputs: ["cantView", "imageLoaded"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileViewerComponent, isStandalone: false, selector: "bsu-file-viewer", viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-dialog #dialogTpl [ngClass]=\"isHorizontal ? 'horizontal' : 'vertical'\">\r\n    <fd-dialog-header>\r\n        <ng-template fdkTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                @if(!(files.length===1 && files[0].Type==='pdf')){\r\n                <fd-button-bar\r\n                    ariaLabel=\"Print\"\r\n                    glyph=\"print\"\r\n                    fdType=\"transparent\"\r\n                    printFiles\r\n                    [files]=\"files\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Fit image size\"\r\n                    [glyph]=\"'text-align-justified'\"\r\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n                    (click)=\"fillWidth = !fillWidth\"\r\n                ></fd-button-bar>\r\n                }\r\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body #fdbody>\r\n        @if (isImageGallery) {\r\n        <div #gallery class=\"gallery inDialog\" fillEmptySpace [disable]=\"!isHorizontal\" [decrement]=\"'9rem'\">\r\n            @for (media of files; track media; let i = $index) {\r\n            <div\r\n                intersectionObserver\r\n                [intersectionThreshold]=\"0.5\"\r\n                (visibilityChange)=\"onFileViewerContentVisiblitChange($event, i)\"\r\n            ></div>\r\n            <bsu-file-viewer-content\r\n                [attr.id]=\"'fv_gl_' + media.Id\"\r\n                [deviceSize]=\"deviceSize\"\r\n                [file]=\"media\"\r\n                [imageOnly]=\"true\"\r\n                [fillWidth]=\"fillWidth\"\r\n                [isImageGallery]=\"isImageGallery\"\r\n                (imageLoaded)=\"onImageLoaded(i)\"\r\n                [scrollToSelected]=\"allNeedImagesLoaded() && selectedFile?.Id === media.Id\"\r\n            ></bsu-file-viewer-content>\r\n            }\r\n        </div>\r\n        } @if (!isImageGallery) {\r\n        <div class=\"gallery\">\r\n            @if (selectedFile) {\r\n            <bsu-file-viewer-content\r\n                [deviceSize]=\"deviceSize\"\r\n                [fillWidth]=\"fillWidth\"\r\n                [file]=\"selectedFile\"\r\n                [isImageGallery]=\"isImageGallery\"\r\n            ></bsu-file-viewer-content>\r\n            }\r\n        </div>\r\n        } @if (deviceSize !== 's' && isImageGallery) {\r\n        <div\r\n            class=\"thumbnail\"\r\n            style=\"flex-shrink: 1\"\r\n            fillEmptySpace\r\n            [disable]=\"isHorizontal\"\r\n            [class.tw-h-36]=\"isHorizontal\"\r\n        >\r\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\r\n        </div>\r\n        }\r\n    </fd-dialog-body>\r\n</fd-dialog>\r\n<ng-template #layoutGridTpl let-files>\r\n    <fd-layout-grid>\r\n        @if (files) {\r\n        <div fdLayoutGridRow>\r\n            @for (file of files; track file; let i = $index) {\r\n            <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\" (click)=\"onMedaiClick(file, i)\">\r\n                <bsu-file-viewer-content\r\n                    [selected]=\"scrollToThumbnailIndex === i\"\r\n                    [cardMode]=\"true\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [file]=\"file\"\r\n                    [isImageGallery]=\"isImageGallery\"\r\n                    [scrollToSelected]=\"scrollToThumbnailIndex === i\"\r\n                ></bsu-file-viewer-content>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </fd-layout-grid>\r\n</ng-template>\r\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{padding:0!important}fd-dialog fd-dialog-body ::ng-deep>section{display:flex}fd-dialog.horizontal fd-dialog-body ::ng-deep>section{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 ::ng-deep>section{flex-direction:row-reverse;padding:0;height:100%}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1;border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}fd-dialog.vertical .thumbnail{position:sticky;top:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i2.ScrollToSelectedDirective, selector: "[scrollToSelected]", inputs: ["scrollToSelected"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i4$4.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$4.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$4.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "isImageGallery", "cardMode", "showFooter", "showContent", "selected", "width", "deviceSize", "cardContentHeight", "file"], outputs: ["cantView", "imageLoaded"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-file-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-dialog #dialogTpl [ngClass]=\"isHorizontal ? 'horizontal' : 'vertical'\">\r\n    <fd-dialog-header>\r\n        <ng-template fdkTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Print\"\r\n                    glyph=\"print\"\r\n                    fdType=\"transparent\"\r\n                    printFiles\r\n                    [files]=\"files\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Fit image size\"\r\n                    [glyph]=\"'text-align-justified'\"\r\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n                    (click)=\"fillWidth = !fillWidth\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body #fdbody>\r\n        @if (isImageGallery) {\r\n        <div #gallery class=\"gallery inDialog\" fillEmptySpace [disable]=\"!isHorizontal\" [decrement]=\"'9rem'\">\r\n            @for (media of files; track media; let i = $index) {\r\n            <div\r\n                intersectionObserver\r\n                [intersectionThreshold]=\"0.5\"\r\n                (visibilityChange)=\"onFileViewerContentVisiblitChange($event, i)\"\r\n            ></div>\r\n            <bsu-file-viewer-content\r\n                [attr.id]=\"'fv_gl_' + media.Id\"\r\n                [deviceSize]=\"deviceSize\"\r\n                [file]=\"media\"\r\n                [imageOnly]=\"true\"\r\n                [fillWidth]=\"fillWidth\"\r\n                [isImageGallery]=\"isImageGallery\"\r\n                (imageLoaded)=\"onImageLoaded(i)\"\r\n                [scrollToSelected]=\"allNeedImagesLoaded() && selectedFile?.Id === media.Id\"\r\n            ></bsu-file-viewer-content>\r\n            }\r\n        </div>\r\n        } @if (!isImageGallery) {\r\n        <div class=\"gallery\">\r\n            @if (selectedFile) {\r\n            <bsu-file-viewer-content\r\n                [deviceSize]=\"deviceSize\"\r\n                [fillWidth]=\"fillWidth\"\r\n                [file]=\"selectedFile\"\r\n                [isImageGallery]=\"isImageGallery\"\r\n            ></bsu-file-viewer-content>\r\n            }\r\n        </div>\r\n        } @if (deviceSize !== 's' && isImageGallery) {\r\n        <div\r\n            class=\"thumbnail\"\r\n            style=\"flex-shrink: 1\"\r\n            fillEmptySpace\r\n            [disable]=\"isHorizontal\"\r\n            [class.tw-h-36]=\"isHorizontal\"\r\n        >\r\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\r\n        </div>\r\n        }\r\n    </fd-dialog-body>\r\n</fd-dialog>\r\n<ng-template #layoutGridTpl let-files>\r\n    <fd-layout-grid>\r\n        @if (files) {\r\n        <div fdLayoutGridRow>\r\n            @for (file of files; track file; let i = $index) {\r\n            <div\r\n                [fdLayoutGridCol]=\"6\"\r\n                [colMd]=\"3\"\r\n                [colLg]=\"2\"\r\n                [colXl]=\"2\"\r\n                (click)=\"onMedaiClick(file, i)\"\r\n            >\r\n                <bsu-file-viewer-content\r\n                    [selected]=\"scrollToThumbnailIndex === i\"\r\n                    [cardMode]=\"true\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [file]=\"file\"\r\n                    [isImageGallery]=\"isImageGallery\"\r\n                    [scrollToSelected]=\"scrollToThumbnailIndex === i\"\r\n                ></bsu-file-viewer-content>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </fd-layout-grid>\r\n</ng-template>\r\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{padding:0!important}fd-dialog fd-dialog-body ::ng-deep>section{display:flex}fd-dialog.horizontal fd-dialog-body ::ng-deep>section{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 ::ng-deep>section{flex-direction:row-reverse;padding:0}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1;border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}fd-dialog.vertical .thumbnail{position:sticky;top:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);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-file-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-dialog #dialogTpl [ngClass]=\"isHorizontal ? 'horizontal' : 'vertical'\">\r\n    <fd-dialog-header>\r\n        <ng-template fdkTemplate=\"header\">\r\n            <div fd-bar-left>\r\n                <fd-bar-element>\r\n                    <h3 fd-title>{{ title | bbbTranslate }}</h3>\r\n                </fd-bar-element>\r\n            </div>\r\n            <div fd-bar-right>\r\n                @if(!(files.length===1 && files[0].Type==='pdf')){\r\n                <fd-button-bar\r\n                    ariaLabel=\"Print\"\r\n                    glyph=\"print\"\r\n                    fdType=\"transparent\"\r\n                    printFiles\r\n                    [files]=\"files\"\r\n                ></fd-button-bar>\r\n                <fd-button-bar\r\n                    ariaLabel=\"Fit image size\"\r\n                    [glyph]=\"'text-align-justified'\"\r\n                    [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n                    (click)=\"fillWidth = !fillWidth\"\r\n                ></fd-button-bar>\r\n                }\r\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onClose()\"></fd-button-bar>\r\n            </div>\r\n        </ng-template>\r\n    </fd-dialog-header>\r\n    <fd-dialog-body #fdbody>\r\n        @if (isImageGallery) {\r\n        <div #gallery class=\"gallery inDialog\" fillEmptySpace [disable]=\"!isHorizontal\" [decrement]=\"'9rem'\">\r\n            @for (media of files; track media; let i = $index) {\r\n            <div\r\n                intersectionObserver\r\n                [intersectionThreshold]=\"0.5\"\r\n                (visibilityChange)=\"onFileViewerContentVisiblitChange($event, i)\"\r\n            ></div>\r\n            <bsu-file-viewer-content\r\n                [attr.id]=\"'fv_gl_' + media.Id\"\r\n                [deviceSize]=\"deviceSize\"\r\n                [file]=\"media\"\r\n                [imageOnly]=\"true\"\r\n                [fillWidth]=\"fillWidth\"\r\n                [isImageGallery]=\"isImageGallery\"\r\n                (imageLoaded)=\"onImageLoaded(i)\"\r\n                [scrollToSelected]=\"allNeedImagesLoaded() && selectedFile?.Id === media.Id\"\r\n            ></bsu-file-viewer-content>\r\n            }\r\n        </div>\r\n        } @if (!isImageGallery) {\r\n        <div class=\"gallery\">\r\n            @if (selectedFile) {\r\n            <bsu-file-viewer-content\r\n                [deviceSize]=\"deviceSize\"\r\n                [fillWidth]=\"fillWidth\"\r\n                [file]=\"selectedFile\"\r\n                [isImageGallery]=\"isImageGallery\"\r\n            ></bsu-file-viewer-content>\r\n            }\r\n        </div>\r\n        } @if (deviceSize !== 's' && isImageGallery) {\r\n        <div\r\n            class=\"thumbnail\"\r\n            style=\"flex-shrink: 1\"\r\n            fillEmptySpace\r\n            [disable]=\"isHorizontal\"\r\n            [class.tw-h-36]=\"isHorizontal\"\r\n        >\r\n            <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { $implicit: files }\"></ng-cotainer>\r\n        </div>\r\n        }\r\n    </fd-dialog-body>\r\n</fd-dialog>\r\n<ng-template #layoutGridTpl let-files>\r\n    <fd-layout-grid>\r\n        @if (files) {\r\n        <div fdLayoutGridRow>\r\n            @for (file of files; track file; let i = $index) {\r\n            <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\" (click)=\"onMedaiClick(file, i)\">\r\n                <bsu-file-viewer-content\r\n                    [selected]=\"scrollToThumbnailIndex === i\"\r\n                    [cardMode]=\"true\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [file]=\"file\"\r\n                    [isImageGallery]=\"isImageGallery\"\r\n                    [scrollToSelected]=\"scrollToThumbnailIndex === i\"\r\n                ></bsu-file-viewer-content>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </fd-layout-grid>\r\n</ng-template>\r\n", styles: ["fd-dialog .gallery{overflow:auto}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{padding:0!important}fd-dialog fd-dialog-body ::ng-deep>section{display:flex}fd-dialog.horizontal fd-dialog-body ::ng-deep>section{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 ::ng-deep>section{flex-direction:row-reverse;padding:0;height:100%}fd-dialog.vertical .gallery{flex-direction:column;height:100%;flex:1;border-right:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}fd-dialog.vertical .thumbnail{position:sticky;top:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gallery: [{
                 type: ViewChild,
                 args: ['gallery']
@@ -6230,6 +6220,10 @@ class UiTableViewComponent extends ReportViewBaseComponent {
             const x = Math.floor(this.parentClientBound.width);
             this._renderer2.setStyle(this._tableRef.nativeElement, 'width', x + 'px');
             this._renderer2.setStyle(this._tableRef.nativeElement, 'max-width', x + 'px');
+            const elWidth = Math.floor(this._el.nativeElement.getBoundingClientRect().width);
+            if (x !== elWidth) {
+                this._renderer2.setStyle(this._el.nativeElement, 'width', x + 'px');
+            }
             this._refreshThWidth();
         });
         this.hasRowOlgo = this.viewSetting?.RowOlgo?.Selector;
@@ -6510,7 +6504,6 @@ class NotificationItemComponent extends BaseComponent {
     constructor() {
         super(...arguments);
         this.showCloseButton = false;
-        this._deviceSize = '';
         this.viewed = new EventEmitter();
         this.remove = new EventEmitter();
         this.actionClick = new EventEmitter();
@@ -6520,25 +6513,19 @@ class NotificationItemComponent extends BaseComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        this._deviceSize = this.deviceSize;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NotificationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NotificationItemComponent, isStandalone: false, selector: "bsu-notification-item", inputs: { option: "option", notificationItem: "notificationItem", showCloseButton: "showCloseButton", deviceSize: "deviceSize" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", showEvent: "showEvent", closeEvent: "closeEvent" }, host: { properties: { "class": "this._deviceSize" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\r\n\r\n<ng-template #optionTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            bodyTemplate;\r\n            context: {\r\n                choiceDefStatus: null,\r\n                isNew: false,\r\n                loading: false,\r\n                icon: option.icon,\r\n                statusCaption: '',\r\n                unread: true,\r\n                title: option.title,\r\n                content: option.msg,\r\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\r\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\r\n                overflowButtons: true,\r\n                uiActions: option.NotificationItem?.UiActions,\r\n                hideShowButton: option.NotificationItem?.HideShowButton,\r\n                tag: option.NotificationItem?.Tag,\r\n                hideDeleteButton: true,\r\n                mo: option.mo\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #notificationItemTemplate>\r\n    <fd-notification>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                bodyTemplate;\r\n                context: {\r\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\r\n                    isNew: notificationItem.$NewNotification,\r\n                    loading: notificationItem.$NotificatoinLoading,\r\n                    icon: notificationItem.Icon,\r\n                    statusCaption: notificationItem.Status$Caption,\r\n                    unread: notificationItem.Unread,\r\n                    title: notificationItem.Title,\r\n                    content: notificationItem.$SafeContent,\r\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\r\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\r\n                    overflowButtons: true,\r\n                    uiActions: notificationItem.UiActions,\r\n                    tag: notificationItem.Tag,\r\n                    hideShowButton: notificationItem.HideShowButton,\r\n                    hideDeleteButton: notificationItem.HideDeleteButton,\r\n                    mo: notificationItem\r\n                }\r\n            \"\r\n        ></ng-container>\r\n    </fd-notification>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #bodyTemplate\r\n    let-choiceDefStatus=\"choiceDefStatus\"\r\n    let-isNew=\"isNew\"\r\n    let-loading=\"loading\"\r\n    let-icon=\"icon\"\r\n    let-statusCaption=\"statusCaption\"\r\n    let-unread=\"unread\"\r\n    let-title=\"title\"\r\n    let-content=\"content\"\r\n    let-userCaption=\"userCaption\"\r\n    let-dateCaption=\"dateCaption\"\r\n    let-overflowButtons=\"overflowButtons\"\r\n    let-uiActions=\"uiActions\"\r\n    let-hideShowButton=\"hideShowButton\"\r\n    let-hideDeleteButton=\"hideDeleteButton\"\r\n    let-mo=\"mo\"\r\n    let-tag=\"tag\"\r\n>\r\n    <fd-notification-body>\r\n        @if (choiceDefStatus?.error) {\r\n        <fd-message-strip type=\"error\" style=\"margin: 0.5rem\">\r\n            {{ choiceDefStatus.error.Text }}\r\n        </fd-message-strip>\r\n        } @if (loading || isNew || choiceDefStatus?.loading) {\r\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\r\n        }\r\n        <fd-avatar\r\n            [transparent]=\"true\"\r\n            [circle]=\"true\"\r\n            size=\"xs\"\r\n            [glyph]=\"!icon ? 'bell' : null\"\r\n            [image]=\"icon ? icon : null\"\r\n        ></fd-avatar>\r\n        <fd-notification-content style=\"overflow: hidden\">\r\n            <fd-notification-header>\r\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\r\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\r\n            </fd-notification-header>\r\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\r\n            <fd-notification-footer>\r\n                <span fd-notification-footer-content>{{ userCaption }}</span>\r\n                <span fd-notification-separator></span>\r\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\r\n            </fd-notification-footer>\r\n        </fd-notification-content>\r\n        <fd-notification-actions>\r\n            @if (overflowButtons) {\r\n            <fd-action-sheet #sheet>\r\n                <fd-action-sheet-control>\r\n                    @if (uiActions?.length) {\r\n                    <button\r\n                        role=\"menu\"\r\n                        [ariaLabel]=\"'More' | bbbTranslate\"\r\n                        [title]=\"'More' | bbbTranslate\"\r\n                        fd-button\r\n                        fdType=\"transparent\"\r\n                        glyph=\"overflow\"\r\n                    ></button>\r\n                    }\r\n                </fd-action-sheet-control>\r\n                <fd-action-sheet-body>\r\n                    @for (btn of uiActions; track btn) {\r\n                    <li\r\n                        fd-action-sheet-item\r\n                        [glyph]=\"btn.Icon\"\r\n                        [label]=\"btn.Title | bbbTranslate\"\r\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: btn }); closeEvent.emit()\"\r\n                    ></li>\r\n                    }\r\n                </fd-action-sheet-body>\r\n            </fd-action-sheet>\r\n            } @else { @for (btn of uiActions; track btn) {\r\n            <button\r\n                fd-button\r\n                [glyph]=\"btn.Icon\"\r\n                [fdType]=\"btn.Status\"\r\n                [label]=\"btn.Title | bbbTranslate\"\r\n                [title]=\"btn.Title | bbbTranslate\"\r\n                fdCompact\r\n                (click)=\"actionClick.emit({ item: mo, btn: btn }); closeEvent.emit()\"\r\n            ></button>\r\n            } } @if (hideShowButton === false && mo.RelatedMo) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Show' | bbbTranslate\"\r\n                [title]=\"'Show' | bbbTranslate\"\r\n                glyph=\"show\"\r\n                (click)=\"showEvent.emit({tag,  mo: mo.RelatedMo, nama: mo.RelatedMoNama });closeEvent.emit()\"\r\n            ></button>\r\n            } @if (hideDeleteButton === false) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n                [title]=\"'Delete' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"remove.emit({ items: [mo], silent: false }); closeEvent.emit()\"\r\n            ></button>\r\n            } @if (showCloseButton) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'close' | bbbTranslate\"\r\n                [title]=\"'close' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"closeEvent.emit()\"\r\n            ></button>\r\n            }\r\n        </fd-notification-actions>\r\n    </fd-notification-body>\r\n</ng-template>\r\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}:host.s fd-notification-content{min-width:auto!important}fd-notification-actions{max-width:200px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$9.ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers", "controlTitle", "controlTitleHeading"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: i2$9.ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: i2$9.ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "glyphFont", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: i2$9.ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "component", type: i3$6.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: i4$3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i4$5.NotificationComponent, selector: "fd-notification", inputs: ["width", "mobile", "selected"] }, { kind: "component", type: i4$5.NotificationBodyComponent, selector: "fd-notification-body" }, { kind: "component", type: i4$5.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i4$5.NotificationFooterComponent, selector: "fd-notification-footer", inputs: ["moreLabel", "lessLabel"] }, { kind: "component", type: i4$5.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i4$5.NotificationContentComponent, selector: "fd-notification-content" }, { kind: "directive", type: i4$5.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread", "id"] }, { kind: "directive", type: i4$5.NotificationSeparatorDirective, selector: "[fdNotificationSeparator], [fd-notification-separator]" }, { kind: "directive", type: i4$5.NotificationParagraphDirective, selector: "[fdNotificationParagraph], [fd-notification-paragraph]", inputs: ["id"] }, { kind: "directive", type: i4$5.NotificationFooterContentDirective, selector: "[fdNotificationFooterContent], [fd-notification-footer-content]" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NotificationItemComponent, isStandalone: false, selector: "bsu-notification-item", inputs: { option: "option", notificationItem: "notificationItem", showCloseButton: "showCloseButton" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", showEvent: "showEvent", closeEvent: "closeEvent" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\r\n\r\n<ng-template #optionTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            bodyTemplate;\r\n            context: {\r\n                choiceDefStatus: null,\r\n                isNew: false,\r\n                loading: false,\r\n                icon: option.icon,\r\n                statusCaption: '',\r\n                unread: true,\r\n                title: option.title,\r\n                content: option.msg,\r\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\r\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\r\n                overflowButtons: true,\r\n                uiActions: option.NotificationItem?.UiActions,\r\n                hideShowButton: option.NotificationItem?.HideShowButton,\r\n                tag: option.NotificationItem?.Tag,\r\n                hideDeleteButton: true,\r\n                mo: option.mo\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #notificationItemTemplate>\r\n    <fd-notification>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                bodyTemplate;\r\n                context: {\r\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\r\n                    isNew: notificationItem.$NewNotification,\r\n                    loading: notificationItem.$NotificatoinLoading,\r\n                    icon: notificationItem.Icon,\r\n                    statusCaption: notificationItem.Status$Caption,\r\n                    unread: notificationItem.Unread,\r\n                    title: notificationItem.Title,\r\n                    content: notificationItem.$SafeContent,\r\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\r\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\r\n                    overflowButtons: true,\r\n                    uiActions: notificationItem.UiActions,\r\n                    tag: notificationItem.Tag,\r\n                    hideShowButton: notificationItem.HideShowButton,\r\n                    hideDeleteButton: notificationItem.HideDeleteButton,\r\n                    mo: notificationItem\r\n                }\r\n            \"\r\n        ></ng-container>\r\n    </fd-notification>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #bodyTemplate\r\n    let-choiceDefStatus=\"choiceDefStatus\"\r\n    let-isNew=\"isNew\"\r\n    let-loading=\"loading\"\r\n    let-icon=\"icon\"\r\n    let-statusCaption=\"statusCaption\"\r\n    let-unread=\"unread\"\r\n    let-title=\"title\"\r\n    let-content=\"content\"\r\n    let-userCaption=\"userCaption\"\r\n    let-dateCaption=\"dateCaption\"\r\n    let-overflowButtons=\"overflowButtons\"\r\n    let-uiActions=\"uiActions\"\r\n    let-hideShowButton=\"hideShowButton\"\r\n    let-hideDeleteButton=\"hideDeleteButton\"\r\n    let-mo=\"mo\"\r\n    let-tag=\"tag\"\r\n>\r\n    <fd-notification-body>\r\n        @if (choiceDefStatus?.error) {\r\n        <fd-message-strip type=\"error\" style=\"margin: 0.5rem\">\r\n            {{ choiceDefStatus.error.Text }}\r\n        </fd-message-strip>\r\n        } @if (loading || isNew || choiceDefStatus?.loading) {\r\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\r\n        }\r\n        <fd-avatar\r\n            [transparent]=\"true\"\r\n            [circle]=\"true\"\r\n            size=\"xs\"\r\n            [glyph]=\"!icon ? 'bell' : null\"\r\n            [image]=\"icon ? icon : null\"\r\n        ></fd-avatar>\r\n        <fd-notification-content style=\"overflow: hidden\">\r\n            <fd-notification-header>\r\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\r\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\r\n            </fd-notification-header>\r\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\r\n            <fd-notification-footer>\r\n                <span fd-notification-footer-content>{{ userCaption }}</span>\r\n                <span fd-notification-separator></span>\r\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\r\n            </fd-notification-footer>\r\n        </fd-notification-content>\r\n        <fd-notification-actions>\r\n            @if (overflowButtons) {\r\n            <fd-action-sheet #sheet>\r\n                <fd-action-sheet-control>\r\n                    @if (uiActions?.length) {\r\n                    <button\r\n                        role=\"menu\"\r\n                        [ariaLabel]=\"'More' | bbbTranslate\"\r\n                        [title]=\"'More' | bbbTranslate\"\r\n                        fd-button\r\n                        fdType=\"transparent\"\r\n                        glyph=\"overflow\"\r\n                    ></button>\r\n                    }\r\n                </fd-action-sheet-control>\r\n                <fd-action-sheet-body>\r\n                    @for (btn of uiActions; track btn) {\r\n                    <li\r\n                        fd-action-sheet-item\r\n                        [glyph]=\"btn.Icon\"\r\n                        [label]=\"btn.Title | bbbTranslate\"\r\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: btn }); closeEvent.emit()\"\r\n                    ></li>\r\n                    }\r\n                </fd-action-sheet-body>\r\n            </fd-action-sheet>\r\n            } @else { @for (btn of uiActions; track btn) {\r\n            <button\r\n                fd-button\r\n                [glyph]=\"btn.Icon\"\r\n                [fdType]=\"btn.Status\"\r\n                [label]=\"btn.Title | bbbTranslate\"\r\n                [title]=\"btn.Title | bbbTranslate\"\r\n                fdCompact\r\n                (click)=\"actionClick.emit({ item: mo, btn: btn }); closeEvent.emit()\"\r\n            ></button>\r\n            } } @if (hideShowButton === false && mo.RelatedMo) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Show' | bbbTranslate\"\r\n                [title]=\"'Show' | bbbTranslate\"\r\n                glyph=\"show\"\r\n                (click)=\"showEvent.emit({tag,  mo: mo.RelatedMo, nama: mo.RelatedMoNama });closeEvent.emit()\"\r\n            ></button>\r\n            } @if (hideDeleteButton === false) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n                [title]=\"'Delete' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"remove.emit({ items: [mo], silent: false }); closeEvent.emit()\"\r\n            ></button>\r\n            } @if (showCloseButton) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'close' | bbbTranslate\"\r\n                [title]=\"'close' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"closeEvent.emit()\"\r\n            ></button>\r\n            }\r\n        </fd-notification-actions>\r\n    </fd-notification-body>\r\n</ng-template>\r\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}fd-notification-actions{max-width:200px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$9.ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers", "controlTitle", "controlTitleHeading"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: i2$9.ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: i2$9.ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "glyphFont", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: i2$9.ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "component", type: i3$6.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: i4$3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i4$5.NotificationComponent, selector: "fd-notification", inputs: ["width", "mobile", "selected"] }, { kind: "component", type: i4$5.NotificationBodyComponent, selector: "fd-notification-body" }, { kind: "component", type: i4$5.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i4$5.NotificationFooterComponent, selector: "fd-notification-footer", inputs: ["moreLabel", "lessLabel"] }, { kind: "component", type: i4$5.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i4$5.NotificationContentComponent, selector: "fd-notification-content" }, { kind: "directive", type: i4$5.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread", "id"] }, { kind: "directive", type: i4$5.NotificationSeparatorDirective, selector: "[fdNotificationSeparator], [fd-notification-separator]" }, { kind: "directive", type: i4$5.NotificationParagraphDirective, selector: "[fdNotificationParagraph], [fd-notification-paragraph]", inputs: ["id"] }, { kind: "directive", type: i4$5.NotificationFooterContentDirective, selector: "[fdNotificationFooterContent], [fd-notification-footer-content]" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NotificationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-notification-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\r\n\r\n<ng-template #optionTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            bodyTemplate;\r\n            context: {\r\n                choiceDefStatus: null,\r\n                isNew: false,\r\n                loading: false,\r\n                icon: option.icon,\r\n                statusCaption: '',\r\n                unread: true,\r\n                title: option.title,\r\n                content: option.msg,\r\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\r\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\r\n                overflowButtons: true,\r\n                uiActions: option.NotificationItem?.UiActions,\r\n                hideShowButton: option.NotificationItem?.HideShowButton,\r\n                tag: option.NotificationItem?.Tag,\r\n                hideDeleteButton: true,\r\n                mo: option.mo\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #notificationItemTemplate>\r\n    <fd-notification>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                bodyTemplate;\r\n                context: {\r\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\r\n                    isNew: notificationItem.$NewNotification,\r\n                    loading: notificationItem.$NotificatoinLoading,\r\n                    icon: notificationItem.Icon,\r\n                    statusCaption: notificationItem.Status$Caption,\r\n                    unread: notificationItem.Unread,\r\n                    title: notificationItem.Title,\r\n                    content: notificationItem.$SafeContent,\r\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\r\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\r\n                    overflowButtons: true,\r\n                    uiActions: notificationItem.UiActions,\r\n                    tag: notificationItem.Tag,\r\n                    hideShowButton: notificationItem.HideShowButton,\r\n                    hideDeleteButton: notificationItem.HideDeleteButton,\r\n                    mo: notificationItem\r\n                }\r\n            \"\r\n        ></ng-container>\r\n    </fd-notification>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #bodyTemplate\r\n    let-choiceDefStatus=\"choiceDefStatus\"\r\n    let-isNew=\"isNew\"\r\n    let-loading=\"loading\"\r\n    let-icon=\"icon\"\r\n    let-statusCaption=\"statusCaption\"\r\n    let-unread=\"unread\"\r\n    let-title=\"title\"\r\n    let-content=\"content\"\r\n    let-userCaption=\"userCaption\"\r\n    let-dateCaption=\"dateCaption\"\r\n    let-overflowButtons=\"overflowButtons\"\r\n    let-uiActions=\"uiActions\"\r\n    let-hideShowButton=\"hideShowButton\"\r\n    let-hideDeleteButton=\"hideDeleteButton\"\r\n    let-mo=\"mo\"\r\n    let-tag=\"tag\"\r\n>\r\n    <fd-notification-body>\r\n        @if (choiceDefStatus?.error) {\r\n        <fd-message-strip type=\"error\" style=\"margin: 0.5rem\">\r\n            {{ choiceDefStatus.error.Text }}\r\n        </fd-message-strip>\r\n        } @if (loading || isNew || choiceDefStatus?.loading) {\r\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\r\n        }\r\n        <fd-avatar\r\n            [transparent]=\"true\"\r\n            [circle]=\"true\"\r\n            size=\"xs\"\r\n            [glyph]=\"!icon ? 'bell' : null\"\r\n            [image]=\"icon ? icon : null\"\r\n        ></fd-avatar>\r\n        <fd-notification-content style=\"overflow: hidden\">\r\n            <fd-notification-header>\r\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\r\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\r\n            </fd-notification-header>\r\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\r\n            <fd-notification-footer>\r\n                <span fd-notification-footer-content>{{ userCaption }}</span>\r\n                <span fd-notification-separator></span>\r\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\r\n            </fd-notification-footer>\r\n        </fd-notification-content>\r\n        <fd-notification-actions>\r\n            @if (overflowButtons) {\r\n            <fd-action-sheet #sheet>\r\n                <fd-action-sheet-control>\r\n                    @if (uiActions?.length) {\r\n                    <button\r\n                        role=\"menu\"\r\n                        [ariaLabel]=\"'More' | bbbTranslate\"\r\n                        [title]=\"'More' | bbbTranslate\"\r\n                        fd-button\r\n                        fdType=\"transparent\"\r\n                        glyph=\"overflow\"\r\n                    ></button>\r\n                    }\r\n                </fd-action-sheet-control>\r\n                <fd-action-sheet-body>\r\n                    @for (btn of uiActions; track btn) {\r\n                    <li\r\n                        fd-action-sheet-item\r\n                        [glyph]=\"btn.Icon\"\r\n                        [label]=\"btn.Title | bbbTranslate\"\r\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: btn }); closeEvent.emit()\"\r\n                    ></li>\r\n                    }\r\n                </fd-action-sheet-body>\r\n            </fd-action-sheet>\r\n            } @else { @for (btn of uiActions; track btn) {\r\n            <button\r\n                fd-button\r\n                [glyph]=\"btn.Icon\"\r\n                [fdType]=\"btn.Status\"\r\n                [label]=\"btn.Title | bbbTranslate\"\r\n                [title]=\"btn.Title | bbbTranslate\"\r\n                fdCompact\r\n                (click)=\"actionClick.emit({ item: mo, btn: btn }); closeEvent.emit()\"\r\n            ></button>\r\n            } } @if (hideShowButton === false && mo.RelatedMo) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Show' | bbbTranslate\"\r\n                [title]=\"'Show' | bbbTranslate\"\r\n                glyph=\"show\"\r\n                (click)=\"showEvent.emit({tag,  mo: mo.RelatedMo, nama: mo.RelatedMoNama });closeEvent.emit()\"\r\n            ></button>\r\n            } @if (hideDeleteButton === false) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n                [title]=\"'Delete' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"remove.emit({ items: [mo], silent: false }); closeEvent.emit()\"\r\n            ></button>\r\n            } @if (showCloseButton) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'close' | bbbTranslate\"\r\n                [title]=\"'close' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"closeEvent.emit()\"\r\n            ></button>\r\n            }\r\n        </fd-notification-actions>\r\n    </fd-notification-body>\r\n</ng-template>\r\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}:host.s fd-notification-content{min-width:auto!important}fd-notification-actions{max-width:200px}\n"] }]
+            args: [{ selector: 'bsu-notification-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\r\n\r\n<ng-template #optionTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            bodyTemplate;\r\n            context: {\r\n                choiceDefStatus: null,\r\n                isNew: false,\r\n                loading: false,\r\n                icon: option.icon,\r\n                statusCaption: '',\r\n                unread: true,\r\n                title: option.title,\r\n                content: option.msg,\r\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\r\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\r\n                overflowButtons: true,\r\n                uiActions: option.NotificationItem?.UiActions,\r\n                hideShowButton: option.NotificationItem?.HideShowButton,\r\n                tag: option.NotificationItem?.Tag,\r\n                hideDeleteButton: true,\r\n                mo: option.mo\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #notificationItemTemplate>\r\n    <fd-notification>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                bodyTemplate;\r\n                context: {\r\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\r\n                    isNew: notificationItem.$NewNotification,\r\n                    loading: notificationItem.$NotificatoinLoading,\r\n                    icon: notificationItem.Icon,\r\n                    statusCaption: notificationItem.Status$Caption,\r\n                    unread: notificationItem.Unread,\r\n                    title: notificationItem.Title,\r\n                    content: notificationItem.$SafeContent,\r\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\r\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\r\n                    overflowButtons: true,\r\n                    uiActions: notificationItem.UiActions,\r\n                    tag: notificationItem.Tag,\r\n                    hideShowButton: notificationItem.HideShowButton,\r\n                    hideDeleteButton: notificationItem.HideDeleteButton,\r\n                    mo: notificationItem\r\n                }\r\n            \"\r\n        ></ng-container>\r\n    </fd-notification>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #bodyTemplate\r\n    let-choiceDefStatus=\"choiceDefStatus\"\r\n    let-isNew=\"isNew\"\r\n    let-loading=\"loading\"\r\n    let-icon=\"icon\"\r\n    let-statusCaption=\"statusCaption\"\r\n    let-unread=\"unread\"\r\n    let-title=\"title\"\r\n    let-content=\"content\"\r\n    let-userCaption=\"userCaption\"\r\n    let-dateCaption=\"dateCaption\"\r\n    let-overflowButtons=\"overflowButtons\"\r\n    let-uiActions=\"uiActions\"\r\n    let-hideShowButton=\"hideShowButton\"\r\n    let-hideDeleteButton=\"hideDeleteButton\"\r\n    let-mo=\"mo\"\r\n    let-tag=\"tag\"\r\n>\r\n    <fd-notification-body>\r\n        @if (choiceDefStatus?.error) {\r\n        <fd-message-strip type=\"error\" style=\"margin: 0.5rem\">\r\n            {{ choiceDefStatus.error.Text }}\r\n        </fd-message-strip>\r\n        } @if (loading || isNew || choiceDefStatus?.loading) {\r\n        <bsu-mask [top]=\"'10px'\"></bsu-mask>\r\n        }\r\n        <fd-avatar\r\n            [transparent]=\"true\"\r\n            [circle]=\"true\"\r\n            size=\"xs\"\r\n            [glyph]=\"!icon ? 'bell' : null\"\r\n            [image]=\"icon ? icon : null\"\r\n        ></fd-avatar>\r\n        <fd-notification-content style=\"overflow: hidden\">\r\n            <fd-notification-header>\r\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\r\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\r\n            </fd-notification-header>\r\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\r\n            <fd-notification-footer>\r\n                <span fd-notification-footer-content>{{ userCaption }}</span>\r\n                <span fd-notification-separator></span>\r\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\r\n            </fd-notification-footer>\r\n        </fd-notification-content>\r\n        <fd-notification-actions>\r\n            @if (overflowButtons) {\r\n            <fd-action-sheet #sheet>\r\n                <fd-action-sheet-control>\r\n                    @if (uiActions?.length) {\r\n                    <button\r\n                        role=\"menu\"\r\n                        [ariaLabel]=\"'More' | bbbTranslate\"\r\n                        [title]=\"'More' | bbbTranslate\"\r\n                        fd-button\r\n                        fdType=\"transparent\"\r\n                        glyph=\"overflow\"\r\n                    ></button>\r\n                    }\r\n                </fd-action-sheet-control>\r\n                <fd-action-sheet-body>\r\n                    @for (btn of uiActions; track btn) {\r\n                    <li\r\n                        fd-action-sheet-item\r\n                        [glyph]=\"btn.Icon\"\r\n                        [label]=\"btn.Title | bbbTranslate\"\r\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: btn }); closeEvent.emit()\"\r\n                    ></li>\r\n                    }\r\n                </fd-action-sheet-body>\r\n            </fd-action-sheet>\r\n            } @else { @for (btn of uiActions; track btn) {\r\n            <button\r\n                fd-button\r\n                [glyph]=\"btn.Icon\"\r\n                [fdType]=\"btn.Status\"\r\n                [label]=\"btn.Title | bbbTranslate\"\r\n                [title]=\"btn.Title | bbbTranslate\"\r\n                fdCompact\r\n                (click)=\"actionClick.emit({ item: mo, btn: btn }); closeEvent.emit()\"\r\n            ></button>\r\n            } } @if (hideShowButton === false && mo.RelatedMo) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Show' | bbbTranslate\"\r\n                [title]=\"'Show' | bbbTranslate\"\r\n                glyph=\"show\"\r\n                (click)=\"showEvent.emit({tag,  mo: mo.RelatedMo, nama: mo.RelatedMoNama });closeEvent.emit()\"\r\n            ></button>\r\n            } @if (hideDeleteButton === false) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n                [title]=\"'Delete' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"remove.emit({ items: [mo], silent: false }); closeEvent.emit()\"\r\n            ></button>\r\n            } @if (showCloseButton) {\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'close' | bbbTranslate\"\r\n                [title]=\"'close' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"closeEvent.emit()\"\r\n            ></button>\r\n            }\r\n        </fd-notification-actions>\r\n    </fd-notification-body>\r\n</ng-template>\r\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}fd-notification-actions{max-width:200px}\n"] }]
         }], propDecorators: { option: [{
                 type: Input
             }], notificationItem: [{
                 type: Input
             }], showCloseButton: [{
                 type: Input
-            }], deviceSize: [{
-                type: Input
-            }], _deviceSize: [{
-                type: HostBinding,
-                args: ['class']
             }], viewed: [{
                 type: Output
             }], remove: [{
@@ -6571,7 +6558,7 @@ class UlNotifyPopupComponent extends BaseComponent {
         this._notificationService.ShowNotificationRelatedMo(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UlNotifyPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UlNotifyPopupComponent, isStandalone: false, selector: "bsu-ul-notify-popup", usesInheritance: true, ngImport: i0, template: "<bsu-notification-item\r\n    [showCloseButton]=\"true\"\r\n    (actionClick)=\"onActionClick($event)\"\r\n    [option]=\"notification.data\"\r\n    [bodyOnly]=\"true\"\r\n    (closeEvent)=\"onClose($event)\"\r\n    (showEvent)=\"onShow($event)\"\r\n>\r\n</bsu-notification-item>\r\n\r\n<!-- <fd-notification-body\r\n    [dir]=\"notification.data?.isRtl ? 'rtl' : 'ltr'\"\r\n    (click)=\"notification.close(); notification.data?.callback()\"\r\n>\r\n    <fd-avatar [circle]=\"true\" size=\"xs\" [image]=\"notification.data?.image\"></fd-avatar>\r\n    <fd-notification-content>\r\n        <fd-notification-header>\r\n            <div fd-notification-indicator type=\"success\"></div>\r\n            <h2 fd-notification-title [unread]=\"true\">\r\n                {{ notification.data?.title }}\r\n            </h2>\r\n        </fd-notification-header>\r\n\r\n        <p fd-notification-paragraph [innerHtml]=\"notification.data?.msg\"></p>\r\n    </fd-notification-content>\r\n\r\n    <fd-notification-actions>\r\n        <fd-action-sheet #sheet *ngIf=\"notification.data?.uiOptions?.OverflowButtons; else buttonsTpl\">\r\n            <fd-action-sheet-control>\r\n                <button\r\n                    role=\"menu\"\r\n                    [ariaLabel]=\"'More' | bbbTranslate\"\r\n                    [title]=\"'More' | bbbTranslate\"\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    glyph=\"overflow\"\r\n                ></button>\r\n            </fd-action-sheet-control>\r\n\r\n            <fd-action-sheet-body>\r\n                <li\r\n                    *ngFor=\"let btn of notification.data?.UiActions\"\r\n                    fd-action-sheet-item\r\n                    [glyph]=\"btn.Icon\"\r\n                    [label]=\"btn.Title | bbbTranslate\"\r\n                   \r\n                ></li>\r\n            </fd-action-sheet-body>\r\n        </fd-action-sheet>\r\n        <ng-template #buttonsTpl>\r\n            <button\r\n                *ngFor=\"let btn of notification.data?.UiActions\"\r\n                fd-button\r\n                [glyph]=\"btn.Icon\"\r\n                [fdType]=\"btn.Status\"\r\n                [label]=\"btn.Title | bbbTranslate\"\r\n                fdCompact\r\n                \r\n            ></button>\r\n        </ng-template>\r\n        <button\r\n            *ngIf=\"!notification.data?.uiOptions?.HideDeleteButton\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n            [title]=\"'Delete' | bbbTranslate\"\r\n            glyph=\"decline\"\r\n            \r\n            fdCompact\r\n        ></button>\r\n        <button\r\n            *ngIf=\"!notification.data?.uiOptions?.HideShowButton\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [ariaLabel]=\"'Show' | bbbTranslate\"\r\n            [title]=\"'Show' | bbbTranslate\"\r\n            glyph=\"show\"\r\n            \r\n            fdCompact\r\n        ></button>\r\n    </fd-notification-actions>\r\n</fd-notification-body> -->\r\n", styles: ["fd-notification-body{overflow-y:hidden}:host ::ng-deep .unset-positions{top:unset!important;left:unset!important;right:unset!important;bottom:unset!important}:host ::ng-deep .top-left{top:5rem!important;left:2rem!important}:host ::ng-deep .top-right{top:5rem!important;right:2rem!important}:host ::ng-deep .bottom-left{bottom:2rem!important;left:2rem!important}:host ::ng-deep .bottom-right{bottom:2rem!important;right:2rem!important}:host ::ng-deep .center-top{top:5rem!important;right:50%!important}:host ::ng-deep .center-bottom{bottom:2rem!important;right:50%!important}\n"], dependencies: [{ kind: "component", type: NotificationItemComponent, selector: "bsu-notification-item", inputs: ["option", "notificationItem", "showCloseButton", "deviceSize"], outputs: ["viewed", "remove", "actionClick", "showEvent", "closeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UlNotifyPopupComponent, isStandalone: false, selector: "bsu-ul-notify-popup", usesInheritance: true, ngImport: i0, template: "<bsu-notification-item\r\n    [showCloseButton]=\"true\"\r\n    (actionClick)=\"onActionClick($event)\"\r\n    [option]=\"notification.data\"\r\n    [bodyOnly]=\"true\"\r\n    (closeEvent)=\"onClose($event)\"\r\n    (showEvent)=\"onShow($event)\"\r\n>\r\n</bsu-notification-item>\r\n\r\n<!-- <fd-notification-body\r\n    [dir]=\"notification.data?.isRtl ? 'rtl' : 'ltr'\"\r\n    (click)=\"notification.close(); notification.data?.callback()\"\r\n>\r\n    <fd-avatar [circle]=\"true\" size=\"xs\" [image]=\"notification.data?.image\"></fd-avatar>\r\n    <fd-notification-content>\r\n        <fd-notification-header>\r\n            <div fd-notification-indicator type=\"success\"></div>\r\n            <h2 fd-notification-title [unread]=\"true\">\r\n                {{ notification.data?.title }}\r\n            </h2>\r\n        </fd-notification-header>\r\n\r\n        <p fd-notification-paragraph [innerHtml]=\"notification.data?.msg\"></p>\r\n    </fd-notification-content>\r\n\r\n    <fd-notification-actions>\r\n        <fd-action-sheet #sheet *ngIf=\"notification.data?.uiOptions?.OverflowButtons; else buttonsTpl\">\r\n            <fd-action-sheet-control>\r\n                <button\r\n                    role=\"menu\"\r\n                    [ariaLabel]=\"'More' | bbbTranslate\"\r\n                    [title]=\"'More' | bbbTranslate\"\r\n                    fd-button\r\n                    fdType=\"transparent\"\r\n                    glyph=\"overflow\"\r\n                ></button>\r\n            </fd-action-sheet-control>\r\n\r\n            <fd-action-sheet-body>\r\n                <li\r\n                    *ngFor=\"let btn of notification.data?.UiActions\"\r\n                    fd-action-sheet-item\r\n                    [glyph]=\"btn.Icon\"\r\n                    [label]=\"btn.Title | bbbTranslate\"\r\n                   \r\n                ></li>\r\n            </fd-action-sheet-body>\r\n        </fd-action-sheet>\r\n        <ng-template #buttonsTpl>\r\n            <button\r\n                *ngFor=\"let btn of notification.data?.UiActions\"\r\n                fd-button\r\n                [glyph]=\"btn.Icon\"\r\n                [fdType]=\"btn.Status\"\r\n                [label]=\"btn.Title | bbbTranslate\"\r\n                fdCompact\r\n                \r\n            ></button>\r\n        </ng-template>\r\n        <button\r\n            *ngIf=\"!notification.data?.uiOptions?.HideDeleteButton\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n            [title]=\"'Delete' | bbbTranslate\"\r\n            glyph=\"decline\"\r\n            \r\n            fdCompact\r\n        ></button>\r\n        <button\r\n            *ngIf=\"!notification.data?.uiOptions?.HideShowButton\"\r\n            fd-button\r\n            fdType=\"transparent\"\r\n            [ariaLabel]=\"'Show' | bbbTranslate\"\r\n            [title]=\"'Show' | bbbTranslate\"\r\n            glyph=\"show\"\r\n            \r\n            fdCompact\r\n        ></button>\r\n    </fd-notification-actions>\r\n</fd-notification-body> -->\r\n", styles: ["fd-notification-body{overflow-y:hidden}:host ::ng-deep .unset-positions{top:unset!important;left:unset!important;right:unset!important;bottom:unset!important}:host ::ng-deep .top-left{top:5rem!important;left:2rem!important}:host ::ng-deep .top-right{top:5rem!important;right:2rem!important}:host ::ng-deep .bottom-left{bottom:2rem!important;left:2rem!important}:host ::ng-deep .bottom-right{bottom:2rem!important;right:2rem!important}:host ::ng-deep .center-top{top:5rem!important;right:50%!important}:host ::ng-deep .center-bottom{bottom:2rem!important;right:50%!important}\n"], dependencies: [{ kind: "component", type: NotificationItemComponent, selector: "bsu-notification-item", inputs: ["option", "notificationItem", "showCloseButton"], outputs: ["viewed", "remove", "actionClick", "showEvent", "closeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UlNotifyPopupComponent, decorators: [{
             type: Component,
@@ -7279,7 +7266,7 @@ class BarsaUlvMainComponent extends BaseComponent {
         this.mainContentWidth = BarsaApi.Common.Util.TryGetValue(this.context, 'Setting.ClassNames.CustomUi.Parameters.MainContentWidth', false);
         this.isMobile = getDeviceIsMobile();
         this.mobileBottomBar = this.isMobile && !this.standalone;
-        this._router.events.subscribe((event) => {
+        this._router.events.pipe(takeUntil$1(this._onDestroy$)).subscribe((event) => {
             if (event instanceof NavigationEnd) {
                 this._dynamicPageComponent?.refreshSize();
             }
@@ -8666,11 +8653,11 @@ class UiPdfViewerComponent extends DeviceInfoFieldBaseComponent {
         BarsaApi.Ul.LoadingMask.Mask(this._el.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiPdfViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiPdfViewerComponent, isStandalone: false, selector: "bsu-ui-pdf-viewer", host: { properties: { "style.min-height": "this._minheight" } }, providers: [UploadService], viewQueries: [{ propertyName: "_pdfViewerOnDemand", first: true, predicate: ["pdfViewerOnDemand"], descendants: true }, { propertyName: "_dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    @switch (parameters?.ShowMode) { @case ('2') {\r\n    <div>\r\n        <ng-container *ngTemplateOutlet=\"toolbar; context: { dialogMode: true }\"></ng-container>\r\n    </div>\r\n    } @default {\r\n    <div>\r\n        <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\r\n    </div>\r\n    } }\r\n</ng-container>\r\n\r\n<ng-template #toolbar let-dialogMode=\"dialogMode\">\r\n    @if ((disableOrReadonly$ | async) !== true) {\r\n    <fd-toolbar [class.dialogMode]=\"dialogMode\" [transparent]=\"true\" [shouldOverflow]=\"true\">\r\n        <fd-file-uploader\r\n            #uploader\r\n            [style.display]=\"'none'\"\r\n            fd-toolbar-item\r\n            [id]=\"id\"\r\n            [name]=\"'pdf_' + id\"\r\n            [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [accept]=\"validExtension\"\r\n            [(ngModel)]=\"files\"\r\n            [multiple]=\"false\"\r\n            (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            [contentDensity]=\"(contentDensity$ | async)!!\"\r\n        ></fd-file-uploader>\r\n        @if (!parameters?.HideDelete) {\r\n        <button\r\n            [disabled]=\"!(canDelete && value)\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            class=\"delete\"\r\n            glyph=\"delete\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDelete()\"\r\n        ></button>\r\n        } @if (!parameters?.HideAttach) {\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [disabled]=\"!canUpload\"\r\n            (click)=\"uploader.open()\"\r\n        ></button>\r\n        } @if (canEdit) {\r\n        <button fd-toolbar-item fd-button glyph=\"edit\" [fdType]=\"'transparent'\" (click)=\"onEdit()\"></button>\r\n        } @if (useWordEditor) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'Edit' | bbbTranslate\"\r\n            (click)=\"onEditInWord()\"\r\n        ></button>\r\n        } @if (officeOnline) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'OfficeOnline' | bbbTranslate\"\r\n            (click)=\"onOfficeOnline($event)\"\r\n        ></button>\r\n        } @if (dialogMode) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [glyph]=\"'show'\"\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"!dialogMode ? '' : ('View' | bbbTranslate)\"\r\n            (click)=\"onOpenPreviewInDialog()\"\r\n            bodyClick\r\n        ></button>\r\n        } @if (canDownload && value) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            [glyph]=\"'download'\"\r\n            [label]=\"!dialogMode ? '' : ('Download' | bbbTranslate)\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDownload()\"\r\n            bodyClick\r\n        ></button>\r\n        } @if (!parameters?.HideRefresh && value) {\r\n        <button\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            [glyph]=\"dialogMode ? null : 'refresh'\"\r\n            [label]=\"!dialogMode ? '' : ('Refresh' | bbbTranslate)\"\r\n            [fdType]=\"'transparent'\"\r\n            bodyClick\r\n            (click)=\"onRefresh()\"\r\n        ></button>\r\n        }\r\n        <fd-busy-indicator\r\n            fd-toolbar-item\r\n            [loading]=\"(uploadingState$ | async)?.uploading === true\"\r\n        ></fd-busy-indicator>\r\n    </fd-toolbar>\r\n    }\r\n</ng-template>\r\n<ng-template #preview>\r\n    @if (isMobile) {\r\n    <div\r\n        [style.border]=\"!blobUrl ? '.0625rem solid var(--sapGroup_TitleBorderColor)' : null\"\r\n        style=\"height: calc(70vh - 40px); position: relative\"\r\n    >\r\n        @if(value){\r\n        <bsu-blob-viewer [file]=\"value\" [style.width]=\"width\" [decrement]=\"'25px'\"></bsu-blob-viewer>\r\n        }\r\n        <!-- <ng2-pdfjs-viewer\r\n            fillEmptySpace\r\n            [containerDom]=\"formContainer\"\r\n            [dontUseTopBound]=\"true\"\r\n            #pdfViewerOnDemand\r\n            [externalWindow]=\"false\"\r\n            [downloadFileName]=\"blobUrl\"\r\n            [openFile]=\"false\"\r\n            [viewBookmark]=\"false\"\r\n            [showSpinner]=\"true\"\r\n            [download]=\"true\"\r\n        ></ng2-pdfjs-viewer> -->\r\n    </div>\r\n    } @else { @if (hasPdf) {\r\n    <object\r\n        fillEmptySpace\r\n        [containerDom]=\"formContainer\"\r\n        [dontUseTopBound]=\"true\"\r\n        [disable]=\"inlineEdit\"\r\n        style=\"flex-grow: 1\"\r\n        [attr.data]=\"valueUrl\"\r\n        type=\"application/pdf\"\r\n        width=\"100%\"\r\n        [style.height]=\"inlineEdit ? 'auto' : formHeight - 30 > 0 ? formHeight - 30 + 'px' : '100vh'\"\r\n        [attr.html]=\"fallbackLink\"\r\n    ></object>\r\n    } @else { @if (singleControl && value && !value.IsDeleted) {\r\n    <div class=\"tw-flex tw-justify-center\">\r\n        @if (singleFileThumbnailUrl) {\r\n            <bsu-file-viewer-content\r\n            [attr.title]=\"value.FileName\"            \r\n            [file]=\"value\"\r\n            [imageOnly]=\"true\"\r\n            [fillWidth]=\"true\"\r\n            [isImageGallery]=\"false\"\r\n        ></bsu-file-viewer-content>\r\n        <!-- <img [src]=\"singleFileThumbnailUrl\" /> -->\r\n        }\r\n    </div>\r\n    } @else {\r\n    <div\r\n        fillEmptySpace\r\n        [containerDom]=\"formContainer\"\r\n        [dontUseTopBound]=\"true\"\r\n        class=\"hatchBackground\"\r\n        [disable]=\"inlineEdit\"\r\n        [class.tw-h-4]=\"inlineEdit\"\r\n    ></div>\r\n    } } }\r\n</ng-template>\r\n\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTpl>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" class=\"vertical\">\r\n        <fd-dialog-header>\r\n            <ng-template fdkTemplate=\"header\">\r\n                <div fd-bar-left>\r\n                    <fd-bar-element>\r\n                        <h3 fd-title>edit in word</h3>\r\n                    </fd-bar-element>\r\n                </div>\r\n                <div fd-bar-right>\r\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onDialogClose()\"></fd-button-bar>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column}:host fd-toolbar.dialogMode ::ng-deep .fd-toolbar{border-bottom:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}:host ::ng-deep .fd-file-uploader input{display:none}.single-control{height:50px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i5$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$5.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "isImageGallery", "cardMode", "showFooter", "showContent", "selected", "width", "deviceSize", "cardContentHeight", "file"], outputs: ["cantView", "imageLoaded"] }, { kind: "component", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: ["file"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: UiPdfViewerComponent, isStandalone: false, selector: "bsu-ui-pdf-viewer", host: { properties: { "style.min-height": "this._minheight" } }, providers: [UploadService], viewQueries: [{ propertyName: "_pdfViewerOnDemand", first: true, predicate: ["pdfViewerOnDemand"], descendants: true }, { propertyName: "_dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *untilInView=\"el\">\r\n    @switch (parameters?.ShowMode) { @case ('2') {\r\n    <div>\r\n        <ng-container *ngTemplateOutlet=\"toolbar; context: { dialogMode: true }\"></ng-container>\r\n    </div>\r\n    } @default {\r\n    <div>\r\n        <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\r\n    </div>\r\n    } }\r\n</ng-container>\r\n\r\n<ng-template #toolbar let-dialogMode=\"dialogMode\">\r\n    @if ((disableOrReadonly$ | async) !== true) {\r\n    <fd-toolbar [class.dialogMode]=\"dialogMode\" [transparent]=\"true\" [shouldOverflow]=\"true\">\r\n        <fd-file-uploader\r\n            #uploader\r\n            [style.display]=\"'none'\"\r\n            fd-toolbar-item\r\n            [id]=\"id\"\r\n            [name]=\"'pdf_' + id\"\r\n            [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [accept]=\"validExtension\"\r\n            [(ngModel)]=\"files\"\r\n            [multiple]=\"false\"\r\n            (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            [contentDensity]=\"(contentDensity$ | async)!!\"\r\n        ></fd-file-uploader>\r\n        @if (!parameters?.HideDelete) {\r\n        <button\r\n            [disabled]=\"!(canDelete && value)\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            class=\"delete\"\r\n            glyph=\"delete\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDelete()\"\r\n        ></button>\r\n        } @if (!parameters?.HideAttach) {\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [disabled]=\"!canUpload\"\r\n            (click)=\"uploader.open()\"\r\n        ></button>\r\n        } @if (canEdit) {\r\n        <button fd-toolbar-item fd-button glyph=\"edit\" [fdType]=\"'transparent'\" (click)=\"onEdit()\"></button>\r\n        } @if (useWordEditor) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'Edit' | bbbTranslate\"\r\n            (click)=\"onEditInWord()\"\r\n        ></button>\r\n        } @if (officeOnline) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'OfficeOnline' | bbbTranslate\"\r\n            (click)=\"onOfficeOnline($event)\"\r\n        ></button>\r\n        } @if (dialogMode) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [glyph]=\"'show'\"\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"!dialogMode ? '' : ('View' | bbbTranslate)\"\r\n            (click)=\"onOpenPreviewInDialog()\"\r\n            bodyClick\r\n        ></button>\r\n        } @if (canDownload && value) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            [glyph]=\"'download'\"\r\n            [label]=\"!dialogMode ? '' : ('Download' | bbbTranslate)\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDownload()\"\r\n            bodyClick\r\n        ></button>\r\n        } @if (!parameters?.HideRefresh && value) {\r\n        <button\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            [glyph]=\"dialogMode ? null : 'refresh'\"\r\n            [label]=\"!dialogMode ? '' : ('Refresh' | bbbTranslate)\"\r\n            [fdType]=\"'transparent'\"\r\n            bodyClick\r\n            (click)=\"onRefresh()\"\r\n        ></button>\r\n        }\r\n        <fd-busy-indicator\r\n            fd-toolbar-item\r\n            [loading]=\"(uploadingState$ | async)?.uploading === true\"\r\n        ></fd-busy-indicator>\r\n    </fd-toolbar>\r\n    }\r\n</ng-template>\r\n<ng-template #preview>\r\n    @if (isMobile) {\r\n    <div\r\n        [style.border]=\"!blobUrl ? '.0625rem solid var(--sapGroup_TitleBorderColor)' : null\"\r\n        style=\"height: calc(70vh - 40px); position: relative\"\r\n    >\r\n        @if(value && hasPdf){\r\n        <bsu-blob-viewer [file]=\"value\" [style.width]=\"width\" [decrement]=\"'25px'\"></bsu-blob-viewer>\r\n        }@else{\r\n        <ng-container *ngTemplateOutlet=\"previewOtherPdf\"></ng-container>\r\n\r\n        }\r\n        <!-- <ng2-pdfjs-viewer\r\n            fillEmptySpace\r\n            [containerDom]=\"formContainer\"\r\n            [dontUseTopBound]=\"true\"\r\n            #pdfViewerOnDemand\r\n            [externalWindow]=\"false\"\r\n            [downloadFileName]=\"blobUrl\"\r\n            [openFile]=\"false\"\r\n            [viewBookmark]=\"false\"\r\n            [showSpinner]=\"true\"\r\n            [download]=\"true\"\r\n        ></ng2-pdfjs-viewer> -->\r\n    </div>\r\n    } @else { @if (hasPdf) {\r\n    <object\r\n        fillEmptySpace\r\n        [containerDom]=\"formContainer\"\r\n        [dontUseTopBound]=\"true\"\r\n        [disable]=\"inlineEdit\"\r\n        style=\"flex-grow: 1\"\r\n        [attr.data]=\"valueUrl\"\r\n        type=\"application/pdf\"\r\n        width=\"100%\"\r\n        [style.height]=\"inlineEdit ? 'auto' : formHeight - 30 > 0 ? formHeight - 30 + 'px' : '100vh'\"\r\n        [attr.html]=\"fallbackLink\"\r\n    ></object>\r\n    } @else {\r\n    <ng-container *ngTemplateOutlet=\"previewOtherPdf\"></ng-container>\r\n    } }\r\n</ng-template>\r\n\r\n<ng-template #previewOtherPdf>\r\n    @if (singleControl && value && !value.IsDeleted) {\r\n    <div class=\"tw-flex tw-justify-center\">\r\n        @if (singleFileThumbnailUrl) {\r\n        <bsu-file-viewer-content\r\n            [attr.title]=\"value.FileName\"\r\n            [file]=\"value\"\r\n            [imageOnly]=\"true\"\r\n            [fillWidth]=\"true\"\r\n            [isImageGallery]=\"false\"\r\n        ></bsu-file-viewer-content>\r\n        <!-- <img [src]=\"singleFileThumbnailUrl\" /> -->\r\n        }\r\n    </div>\r\n    } @else {\r\n    <div\r\n        fillEmptySpace\r\n        [containerDom]=\"formContainer\"\r\n        [dontUseTopBound]=\"true\"\r\n        class=\"hatchBackground\"\r\n        [disable]=\"inlineEdit\"\r\n        [class.tw-h-4]=\"inlineEdit\"\r\n    ></div>\r\n    }\r\n</ng-template>\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTpl>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" class=\"vertical\">\r\n        <fd-dialog-header>\r\n            <ng-template fdkTemplate=\"header\">\r\n                <div fd-bar-left>\r\n                    <fd-bar-element>\r\n                        <h3 fd-title>edit in word</h3>\r\n                    </fd-bar-element>\r\n                </div>\r\n                <div fd-bar-right>\r\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onDialogClose()\"></fd-button-bar>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column}:host fd-toolbar.dialogMode ::ng-deep .fd-toolbar{border-bottom:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}:host ::ng-deep .fd-file-uploader input{display:none}.single-control{height:50px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i5$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive"] }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$5.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: FileViewerContentComponent, selector: "bsu-file-viewer-content", inputs: ["fillWidth", "imageOnly", "isImageGallery", "cardMode", "showFooter", "showContent", "selected", "width", "deviceSize", "cardContentHeight", "file"], outputs: ["cantView", "imageLoaded"] }, { kind: "component", type: BlobViewerComponent, selector: "bsu-blob-viewer", inputs: ["file"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UiPdfViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-pdf-viewer', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *untilInView=\"el\">\r\n    @switch (parameters?.ShowMode) { @case ('2') {\r\n    <div>\r\n        <ng-container *ngTemplateOutlet=\"toolbar; context: { dialogMode: true }\"></ng-container>\r\n    </div>\r\n    } @default {\r\n    <div>\r\n        <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\r\n    </div>\r\n    } }\r\n</ng-container>\r\n\r\n<ng-template #toolbar let-dialogMode=\"dialogMode\">\r\n    @if ((disableOrReadonly$ | async) !== true) {\r\n    <fd-toolbar [class.dialogMode]=\"dialogMode\" [transparent]=\"true\" [shouldOverflow]=\"true\">\r\n        <fd-file-uploader\r\n            #uploader\r\n            [style.display]=\"'none'\"\r\n            fd-toolbar-item\r\n            [id]=\"id\"\r\n            [name]=\"'pdf_' + id\"\r\n            [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [accept]=\"validExtension\"\r\n            [(ngModel)]=\"files\"\r\n            [multiple]=\"false\"\r\n            (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            [contentDensity]=\"(contentDensity$ | async)!!\"\r\n        ></fd-file-uploader>\r\n        @if (!parameters?.HideDelete) {\r\n        <button\r\n            [disabled]=\"!(canDelete && value)\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            class=\"delete\"\r\n            glyph=\"delete\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDelete()\"\r\n        ></button>\r\n        } @if (!parameters?.HideAttach) {\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [disabled]=\"!canUpload\"\r\n            (click)=\"uploader.open()\"\r\n        ></button>\r\n        } @if (canEdit) {\r\n        <button fd-toolbar-item fd-button glyph=\"edit\" [fdType]=\"'transparent'\" (click)=\"onEdit()\"></button>\r\n        } @if (useWordEditor) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'Edit' | bbbTranslate\"\r\n            (click)=\"onEditInWord()\"\r\n        ></button>\r\n        } @if (officeOnline) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'OfficeOnline' | bbbTranslate\"\r\n            (click)=\"onOfficeOnline($event)\"\r\n        ></button>\r\n        } @if (dialogMode) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [glyph]=\"'show'\"\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"!dialogMode ? '' : ('View' | bbbTranslate)\"\r\n            (click)=\"onOpenPreviewInDialog()\"\r\n            bodyClick\r\n        ></button>\r\n        } @if (canDownload && value) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            [glyph]=\"'download'\"\r\n            [label]=\"!dialogMode ? '' : ('Download' | bbbTranslate)\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDownload()\"\r\n            bodyClick\r\n        ></button>\r\n        } @if (!parameters?.HideRefresh && value) {\r\n        <button\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            [glyph]=\"dialogMode ? null : 'refresh'\"\r\n            [label]=\"!dialogMode ? '' : ('Refresh' | bbbTranslate)\"\r\n            [fdType]=\"'transparent'\"\r\n            bodyClick\r\n            (click)=\"onRefresh()\"\r\n        ></button>\r\n        }\r\n        <fd-busy-indicator\r\n            fd-toolbar-item\r\n            [loading]=\"(uploadingState$ | async)?.uploading === true\"\r\n        ></fd-busy-indicator>\r\n    </fd-toolbar>\r\n    }\r\n</ng-template>\r\n<ng-template #preview>\r\n    @if (isMobile) {\r\n    <div\r\n        [style.border]=\"!blobUrl ? '.0625rem solid var(--sapGroup_TitleBorderColor)' : null\"\r\n        style=\"height: calc(70vh - 40px); position: relative\"\r\n    >\r\n        @if(value){\r\n        <bsu-blob-viewer [file]=\"value\" [style.width]=\"width\" [decrement]=\"'25px'\"></bsu-blob-viewer>\r\n        }\r\n        <!-- <ng2-pdfjs-viewer\r\n            fillEmptySpace\r\n            [containerDom]=\"formContainer\"\r\n            [dontUseTopBound]=\"true\"\r\n            #pdfViewerOnDemand\r\n            [externalWindow]=\"false\"\r\n            [downloadFileName]=\"blobUrl\"\r\n            [openFile]=\"false\"\r\n            [viewBookmark]=\"false\"\r\n            [showSpinner]=\"true\"\r\n            [download]=\"true\"\r\n        ></ng2-pdfjs-viewer> -->\r\n    </div>\r\n    } @else { @if (hasPdf) {\r\n    <object\r\n        fillEmptySpace\r\n        [containerDom]=\"formContainer\"\r\n        [dontUseTopBound]=\"true\"\r\n        [disable]=\"inlineEdit\"\r\n        style=\"flex-grow: 1\"\r\n        [attr.data]=\"valueUrl\"\r\n        type=\"application/pdf\"\r\n        width=\"100%\"\r\n        [style.height]=\"inlineEdit ? 'auto' : formHeight - 30 > 0 ? formHeight - 30 + 'px' : '100vh'\"\r\n        [attr.html]=\"fallbackLink\"\r\n    ></object>\r\n    } @else { @if (singleControl && value && !value.IsDeleted) {\r\n    <div class=\"tw-flex tw-justify-center\">\r\n        @if (singleFileThumbnailUrl) {\r\n            <bsu-file-viewer-content\r\n            [attr.title]=\"value.FileName\"            \r\n            [file]=\"value\"\r\n            [imageOnly]=\"true\"\r\n            [fillWidth]=\"true\"\r\n            [isImageGallery]=\"false\"\r\n        ></bsu-file-viewer-content>\r\n        <!-- <img [src]=\"singleFileThumbnailUrl\" /> -->\r\n        }\r\n    </div>\r\n    } @else {\r\n    <div\r\n        fillEmptySpace\r\n        [containerDom]=\"formContainer\"\r\n        [dontUseTopBound]=\"true\"\r\n        class=\"hatchBackground\"\r\n        [disable]=\"inlineEdit\"\r\n        [class.tw-h-4]=\"inlineEdit\"\r\n    ></div>\r\n    } } }\r\n</ng-template>\r\n\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTpl>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" class=\"vertical\">\r\n        <fd-dialog-header>\r\n            <ng-template fdkTemplate=\"header\">\r\n                <div fd-bar-left>\r\n                    <fd-bar-element>\r\n                        <h3 fd-title>edit in word</h3>\r\n                    </fd-bar-element>\r\n                </div>\r\n                <div fd-bar-right>\r\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onDialogClose()\"></fd-button-bar>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column}:host fd-toolbar.dialogMode ::ng-deep .fd-toolbar{border-bottom:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}:host ::ng-deep .fd-file-uploader input{display:none}.single-control{height:50px}\n"] }]
+            args: [{ selector: 'bsu-ui-pdf-viewer', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *untilInView=\"el\">\r\n    @switch (parameters?.ShowMode) { @case ('2') {\r\n    <div>\r\n        <ng-container *ngTemplateOutlet=\"toolbar; context: { dialogMode: true }\"></ng-container>\r\n    </div>\r\n    } @default {\r\n    <div>\r\n        <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\r\n    </div>\r\n    } }\r\n</ng-container>\r\n\r\n<ng-template #toolbar let-dialogMode=\"dialogMode\">\r\n    @if ((disableOrReadonly$ | async) !== true) {\r\n    <fd-toolbar [class.dialogMode]=\"dialogMode\" [transparent]=\"true\" [shouldOverflow]=\"true\">\r\n        <fd-file-uploader\r\n            #uploader\r\n            [style.display]=\"'none'\"\r\n            fd-toolbar-item\r\n            [id]=\"id\"\r\n            [name]=\"'pdf_' + id\"\r\n            [placeholder]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [buttonAriaLabel]=\"'AttachFile' | bbbTranslate\"\r\n            [accept]=\"validExtension\"\r\n            [(ngModel)]=\"files\"\r\n            [multiple]=\"false\"\r\n            (selectedFilesChanged)=\"onFileSelection($event)\"\r\n            [contentDensity]=\"(contentDensity$ | async)!!\"\r\n        ></fd-file-uploader>\r\n        @if (!parameters?.HideDelete) {\r\n        <button\r\n            [disabled]=\"!(canDelete && value)\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            class=\"delete\"\r\n            glyph=\"delete\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDelete()\"\r\n        ></button>\r\n        } @if (!parameters?.HideAttach) {\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            glyph=\"attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [disabled]=\"!canUpload\"\r\n            (click)=\"uploader.open()\"\r\n        ></button>\r\n        } @if (canEdit) {\r\n        <button fd-toolbar-item fd-button glyph=\"edit\" [fdType]=\"'transparent'\" (click)=\"onEdit()\"></button>\r\n        } @if (useWordEditor) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'Edit' | bbbTranslate\"\r\n            (click)=\"onEditInWord()\"\r\n        ></button>\r\n        } @if (officeOnline) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            glyph=\"doc-attachment\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"'OfficeOnline' | bbbTranslate\"\r\n            (click)=\"onOfficeOnline($event)\"\r\n        ></button>\r\n        } @if (dialogMode) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [glyph]=\"'show'\"\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            [fdType]=\"'transparent'\"\r\n            [label]=\"!dialogMode ? '' : ('View' | bbbTranslate)\"\r\n            (click)=\"onOpenPreviewInDialog()\"\r\n            bodyClick\r\n        ></button>\r\n        } @if (canDownload && value) {\r\n        <button\r\n            fd-toolbar-item\r\n            fd-button\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            [glyph]=\"'download'\"\r\n            [label]=\"!dialogMode ? '' : ('Download' | bbbTranslate)\"\r\n            [fdType]=\"'transparent'\"\r\n            (click)=\"onDownload()\"\r\n            bodyClick\r\n        ></button>\r\n        } @if (!parameters?.HideRefresh && value) {\r\n        <button\r\n            [attr.fdOverflowPriority]=\"'low'\"\r\n            fd-toolbar-item\r\n            fd-button\r\n            [glyph]=\"dialogMode ? null : 'refresh'\"\r\n            [label]=\"!dialogMode ? '' : ('Refresh' | bbbTranslate)\"\r\n            [fdType]=\"'transparent'\"\r\n            bodyClick\r\n            (click)=\"onRefresh()\"\r\n        ></button>\r\n        }\r\n        <fd-busy-indicator\r\n            fd-toolbar-item\r\n            [loading]=\"(uploadingState$ | async)?.uploading === true\"\r\n        ></fd-busy-indicator>\r\n    </fd-toolbar>\r\n    }\r\n</ng-template>\r\n<ng-template #preview>\r\n    @if (isMobile) {\r\n    <div\r\n        [style.border]=\"!blobUrl ? '.0625rem solid var(--sapGroup_TitleBorderColor)' : null\"\r\n        style=\"height: calc(70vh - 40px); position: relative\"\r\n    >\r\n        @if(value && hasPdf){\r\n        <bsu-blob-viewer [file]=\"value\" [style.width]=\"width\" [decrement]=\"'25px'\"></bsu-blob-viewer>\r\n        }@else{\r\n        <ng-container *ngTemplateOutlet=\"previewOtherPdf\"></ng-container>\r\n\r\n        }\r\n        <!-- <ng2-pdfjs-viewer\r\n            fillEmptySpace\r\n            [containerDom]=\"formContainer\"\r\n            [dontUseTopBound]=\"true\"\r\n            #pdfViewerOnDemand\r\n            [externalWindow]=\"false\"\r\n            [downloadFileName]=\"blobUrl\"\r\n            [openFile]=\"false\"\r\n            [viewBookmark]=\"false\"\r\n            [showSpinner]=\"true\"\r\n            [download]=\"true\"\r\n        ></ng2-pdfjs-viewer> -->\r\n    </div>\r\n    } @else { @if (hasPdf) {\r\n    <object\r\n        fillEmptySpace\r\n        [containerDom]=\"formContainer\"\r\n        [dontUseTopBound]=\"true\"\r\n        [disable]=\"inlineEdit\"\r\n        style=\"flex-grow: 1\"\r\n        [attr.data]=\"valueUrl\"\r\n        type=\"application/pdf\"\r\n        width=\"100%\"\r\n        [style.height]=\"inlineEdit ? 'auto' : formHeight - 30 > 0 ? formHeight - 30 + 'px' : '100vh'\"\r\n        [attr.html]=\"fallbackLink\"\r\n    ></object>\r\n    } @else {\r\n    <ng-container *ngTemplateOutlet=\"previewOtherPdf\"></ng-container>\r\n    } }\r\n</ng-template>\r\n\r\n<ng-template #previewOtherPdf>\r\n    @if (singleControl && value && !value.IsDeleted) {\r\n    <div class=\"tw-flex tw-justify-center\">\r\n        @if (singleFileThumbnailUrl) {\r\n        <bsu-file-viewer-content\r\n            [attr.title]=\"value.FileName\"\r\n            [file]=\"value\"\r\n            [imageOnly]=\"true\"\r\n            [fillWidth]=\"true\"\r\n            [isImageGallery]=\"false\"\r\n        ></bsu-file-viewer-content>\r\n        <!-- <img [src]=\"singleFileThumbnailUrl\" /> -->\r\n        }\r\n    </div>\r\n    } @else {\r\n    <div\r\n        fillEmptySpace\r\n        [containerDom]=\"formContainer\"\r\n        [dontUseTopBound]=\"true\"\r\n        class=\"hatchBackground\"\r\n        [disable]=\"inlineEdit\"\r\n        [class.tw-h-4]=\"inlineEdit\"\r\n    ></div>\r\n    }\r\n</ng-template>\r\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTpl>\r\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" class=\"vertical\">\r\n        <fd-dialog-header>\r\n            <ng-template fdkTemplate=\"header\">\r\n                <div fd-bar-left>\r\n                    <fd-bar-element>\r\n                        <h3 fd-title>edit in word</h3>\r\n                    </fd-bar-element>\r\n                </div>\r\n                <div fd-bar-right>\r\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"onDialogClose()\"></fd-button-bar>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-header>\r\n        <fd-dialog-body>\r\n            <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\r\n        </fd-dialog-body>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column}:host fd-toolbar.dialogMode ::ng-deep .fd-toolbar{border-bottom:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}:host ::ng-deep .fd-file-uploader input{display:none}.single-control{height:50px}\n"] }]
         }], propDecorators: { _pdfViewerOnDemand: [{
                 type: ViewChild,
                 args: ['pdfViewerOnDemand']
@@ -9345,9 +9332,11 @@ class FundamentalDynamicFormComponent extends BaseComponent {
         const workflowUiSetting = this.workflowPanelUi?.Setting;
         this.workflowInfoText = workflowUiSetting?.Workflow?.InfoText;
         // const workflowButtons = this.workflowPanelUi?.buttonList ?? [];
-        this.workflowButtonsComboMode = this.isMobile;
         this.worfklowButtonsOnFooter =
-            this.parameters?.WorkflowButtonsOnFooter || workflowUiSetting?.Workflow.ShowInToolbar === false;
+            this.isMobile ||
+                (!this.hideFooter &&
+                    (this.parameters?.WorkflowButtonsOnFooter || workflowUiSetting?.Workflow.ShowInToolbar === false));
+        this.workflowButtonsComboMode = this.isMobile || this.worfklowButtonsOnFooter;
         // this.workflowButtons = workflowButtons;
         this.hasLayoutButtons =
             this.layoutActions.length > 0 ||
@@ -9403,11 +9392,11 @@ class FundamentalDynamicFormComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FundamentalDynamicFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FundamentalDynamicFormComponent, isStandalone: false, selector: "bsu-fundamental-dynamic-form", inputs: { breadCrumbs: "breadCrumbs", toolbarVisible: "toolbarVisible", toolbarItems: "toolbarItems", layoutActions: "layoutActions", layout94: "layout94", parameters: "parameters", workflowPanelUi: "workflowPanelUi", context: "context", title: "title", subtitle: "subtitle", description: "description", facetList: "facetList", infobars: "infobars", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", circleAvatar: "circleAvatar", hideBreadCrumb: "hideBreadCrumb", rtl: "rtl", hideFooter: "hideFooter", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", fullscreen: "fullscreen", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", modernTabContainerComponent: "modernTabContainerComponent", formVisibilityStatus: "formVisibilityStatus", layoutGridCol: "layoutGridCol", colLg: "colLg", colXl: "colXl", colMd: "colMd", footerDesign: "footerDesign", formContentMaxWidth: "formContentMaxWidth", workflowButtons: "workflowButtons" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close", fullscreenRequest: "fullscreenRequest", dismissInfobar: "dismissInfobar" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true, static: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "closeFormTemplate", first: true, predicate: ["closeForm"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (mask) {\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\r\n    <bsu-mask size=\"m\"></bsu-mask>\r\n</div>\r\n}\r\n\r\n<fd-dynamic-page\r\n    [size]=\"isMobile ? 'small' : 'large'\"\r\n    [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\r\n    [class.header-border]=\"!removeHeaderBorder\"\r\n    [attr.isMobile]=\"isMobile\"\r\n    [attr.contentIsPage]=\"contentIsPage\"\r\n    mobile\r\n    formClose\r\n    [isMobile]=\"isMobile\"\r\n>\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"!description\"\r\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\r\n        [class.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile || hideBreadCrumb\">\r\n            <fd-breadcrumb>\r\n                @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\r\n                breadCrumb.url; let i = $index; let last = $last) {\r\n                <fd-breadcrumb-item>\r\n                    <bsu-breadcrumb\r\n                        [index]=\"i\"\r\n                        [isLast]=\"last\"\r\n                        [breadCrumb]=\"breadCrumb\"\r\n                        [allBreadCrumb]=\"breadCrumbs\"\r\n                    ></bsu-breadcrumb>\r\n                </fd-breadcrumb-item>\r\n                } }\r\n            </fd-breadcrumb>\r\n        </fd-dynamic-page-breadcrumb>\r\n        <fd-dynamic-page-global-actions>\r\n            <!-- global actions -->\r\n\r\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\r\n            <!-- added this because in mobile landscape toolbar disapper -->\r\n            @if (toolbarVisible) {\r\n            <bsu-form-toolbar\r\n                [deviceSize]=\"deviceSize\"\r\n                [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\r\n                [dirValue]=\"dirValue\"\r\n                [isFirefox]=\"isFirefox\"\r\n                (toolbarClick)=\"toolbarClick.emit($event)\"\r\n                #formToolbar\r\n            ></bsu-form-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <!-- layout actions -->\r\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\r\n            @if (!hideClose) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                @if (deviceSize !== 's') {\r\n                <fd-toolbar-separator></fd-toolbar-separator>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    @if (description || facetList.length > 0 || workflowInfoText || avatar || infobars?.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars?.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars?.length)\"\r\n        [collapsible]=\"true\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars?.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\r\n        <fd-facet-group ariaLabel=\"Facet Group\">\r\n            @if (avatar) {\r\n            <fd-facet type=\"image\">\r\n                <fd-avatar\r\n                    title=\"avatar\"\r\n                    [glyph]=\"avatar\"\r\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\r\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\r\n                    [transparent]=\"true\"\r\n                    [circle]=\"circleAvatar\"\r\n                ></fd-avatar>\r\n                <!-- <div\r\n                  class=\"fd-avatar fd-avatar--circle\"\r\n                  [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\r\n                  >\r\n                  <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\r\n                </div> -->\r\n            </fd-facet>\r\n            } @for (facet of facetList; track facet) {\r\n            <fd-facet\r\n                [type]=\"facet.type\"\r\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\r\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\r\n            >\r\n                @for (item of facet.mo.ItemList?.MoDataList; track item) {\r\n                <fd-facet-content>\r\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" id=\"form-value-10\"></fd-text>\r\n                </fd-facet-content>\r\n                } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\r\n                <span\r\n                    fd-object-status\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [glyph]=\"facet.mo.Icon\"\r\n                >\r\n                </span>\r\n                } @else {\r\n                <bnrc-dynamic-component\r\n                    [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\r\n                    [class.fd-object-status--large]=\"facet.mo.IsLarge\"\r\n                    [component]=\"facet.mo.Component\"\r\n                    [value]=\"facet.mo.Text | bbbTranslate\"\r\n                ></bnrc-dynamic-component>\r\n                } @if (facet.mo.IsNumber && facet.type === 'key-value') {\r\n                <fd-object-number\r\n                    [number]=\"facet.mo.Text | facetValue\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [unit]=\"facet.mo.Unit | facetValue | bbbTranslate\"\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [decimal]=\"facet.mo.DecimalValue | facetValue\"\r\n                ></fd-object-number>\r\n                } @if (facet.type === 'plain-text') {\r\n                <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\r\n                    <fd-text [text]=\"facet.mo.Text | facetValue | bbbTranslate\" hyphenation=\"auto\"></fd-text>\r\n                </div>\r\n                } @if (facet.type === 'rating-indicator') {\r\n                <fd-facet-content>\r\n                    <fd-rating-indicator\r\n                        style=\"pointer-events: none\"\r\n                        size=\"md\"\r\n                        [dynamicTextIndicator]=\"facet.mo.Footer | bbbTranslate\"\r\n                        [displayMode]=\"true\"\r\n                        [value]=\"facet.mo | facetValue: facet.type\"\r\n                    ></fd-rating-indicator>\r\n                </fd-facet-content>\r\n                } @if (facet.type === 'progress') {\r\n                <div [style.width]=\"'10rem'\">\r\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\r\n                    <fd-progress-indicator\r\n                        class=\"facet-progress\"\r\n                        style=\"width: 10r em\"\r\n                        [state]=\"facet.mo.State\"\r\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647' | bbbTranslate\"\r\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\r\n                        [valueMax]=\"10\"\r\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\r\n                    ></fd-progress-indicator>\r\n                    <!-- <ui5-progress-indicator\r\n                    style=\"width: 10rem\"\r\n                    [valueState]=\"facet.mo.State\"\r\n                    [value]=\"getNumber(facet.mo.Value)\"\r\n                  ></ui5-progress-indicator> -->\r\n                </div>\r\n                } @if (facet.type === 'microcharts') {\r\n                <div>\r\n                    <label wrap>in progress ...</label>\r\n                </div>\r\n                }\r\n            </fd-facet>\r\n            }\r\n        </fd-facet-group>\r\n        @if (description) {\r\n        <span>{{ description | bbbTranslate }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if((!modernTabs.length && !contentIsPage) || (modernTabs.length && !contentIsPage && parameters?.LayoutComponent))\r\n    {\r\n    <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\" cdkScrollable>\r\n        <fd-layout-grid class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout1.colMd\"\r\n                    [colLg]=\"layout1.colLg\"\r\n                    [colXl]=\"layout1.colXl\"\r\n                ></div>\r\n                <div class=\"!tw-p-0\" [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\r\n                            context: {\r\n                                $implicit: parameters?.LayoutComponent,\r\n                                layout94: layout94\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout2.colMd\"\r\n                    [colLg]=\"layout2.colLg\"\r\n                    [colXl]=\"layout2.colXl\"\r\n                ></div>\r\n            </div>\r\n        </fd-layout-grid>\r\n    </fd-dynamic-page-content>\r\n    } @else if(modernTabs.length && !contentIsPage && !parameters?.LayoutComponent){\r\n    <fdp-icon-tab-bar\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"tab.id\"\r\n            [label]=\"tab.Title!! | bbbTranslate\"\r\n            [title]=\"tab.Title!! | bbbTranslate\"\r\n            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\r\n            [class.is-expanded]=\"selectedTab === tab.Title\"\r\n            #tablist\r\n        >\r\n            <fd-dynamic-page-content [id]=\"tab.id\" [class.limit-content-width]=\"formContentMaxWidth > 0\">\r\n                <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                    </div>\r\n                </fd-layout-grid>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n        }\r\n    </fdp-icon-tab-bar>\r\n    } @if(!hideFooter && hasLayoutButtons){\r\n    <fd-dynamic-page-footer>\r\n        <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    </fd-dynamic-page-footer>\r\n    }\r\n</fd-dynamic-page>\r\n@if (contentIsPage) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderLayoutComponent;\r\n        context: {\r\n            $implicit: parameters?.LayoutComponent,\r\n            layout94: layout94\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\r\n    <bsu-ly-layout-container-of-root\r\n        [config]=\"layout94\"\r\n        [isPanel]=\"false\"\r\n        [isRoot]=\"true\"\r\n    ></bsu-ly-layout-container-of-root>\r\n</ng-template>\r\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\r\n    <bnrc-dynamic-form-component\r\n        [component]=\"component\"\r\n        [layoutActionsTemplateRef]=\"layoutActionsTemplateRef\"\r\n        [removeContentPadding]=\"removeContentPadding\"\r\n        [breadCrumbs]=\"breadCrumbs\"\r\n        [description]=\"description\"\r\n        [title]=\"title\"\r\n        [subtitle]=\"subtitle\"\r\n        [toolbarItems]=\"toolbarItems\"\r\n        [layoutActions]=\"layoutActions\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [facetList]=\"facetList\"\r\n        [settings]=\"component.Settings\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowPanelUi]=\"workflowPanelUi\"\r\n        [isMobile]=\"isMobile\"\r\n        [mo]=\"mo\"\r\n        [layout94]=\"layout94\"\r\n        [context]=\"context\"\r\n        [rtl]=\"rtl\"\r\n        [fieldDict]=\"fieldDict\"\r\n        [mask]=\"mask\"\r\n        [dirValue]=\"dirValue\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [modernTabs]=\"modernTabs\"\r\n        [avatar]=\"avatar\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-dynamic-form-component>\r\n</ng-template>\r\n<ng-template #closeForm>\r\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\r\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n    </button>\r\n</ng-template>\r\n<ng-template #fullscreenForm>\r\n    @if (canFullscreen) {\r\n    <button\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        (click)=\"fullscreenRequest.emit()\"\r\n        [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\r\n    ></button>\r\n    }\r\n</ng-template>\r\n<ng-template #layoutActionsTemplateRef>\r\n    <bsu-layout-actions\r\n        [canSend]=\"canSend\"\r\n        [buttons]=\"layoutActions\"\r\n        [isMobile]=\"isMobile\"\r\n        [landscape]=\"landscape\"\r\n        [standalone]=\"standalone\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [rtl]=\"rtl\"\r\n        (toolClick)=\"toolbarClick.emit($event)\"\r\n        (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\r\n    >\r\n    </bsu-layout-actions>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto;width:100%}:host>fd-dynamic-page[contentispage=false]:not([ismobile=true]) ::ng-deep fd-dynamic-page-header .fd-dynamic-page__title{max-width:50svw}:host ::ng-deep .fd-facet .fd-title{font-family:B-Font Medium}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .facet-progress .fd-progress-indicator__container,:host ::ng-deep .facet-progress .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep>article{height:calc(100svh - var(--shellbar-height) - env(safe-area-inset-bottom) - constant(safe-area-inset-bottom))!important}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page ::ng-deep>article>.fd-scrollbar{height:inherit}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.hide-title.hide-breadcrumb{display:none}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container,.no-pin ::ng-deep .fd-dynamic-page__collapsible-header{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "layoutActionsTemplateRef", "workflowButtons", "layout94", "footerDesign", "settings", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "value"], outputs: ["events"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i2.MeasureFormTitleWidthDirective, selector: "[mWidthTitle]", inputs: ["mWidthTitle", "enableMobile"] }, { kind: "directive", type: i3$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$6.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$6.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i4$6.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i8$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i8$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i8$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i8$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i8$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i8$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i8$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i8$2.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "headingLevel", "id", "alignEnd"] }, { kind: "component", type: i8$2.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i8$2.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i4$4.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$4.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$4.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i5$6.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: i14.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["class", "name", "ariaLabel", "ariaLabelledBy", "disabled", "displayMode", "nonInteractive", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator"], outputs: ["ratingChanged"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i8.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i12$1.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: i18.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i18.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "component", type: BarsaInfobarsComponent, selector: "bsu-barsa-infobars", inputs: ["infobars"], outputs: ["dismiss"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.HeaderFacetValuePipe, name: "facetValue" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FundamentalDynamicFormComponent, isStandalone: false, selector: "bsu-fundamental-dynamic-form", inputs: { breadCrumbs: "breadCrumbs", toolbarVisible: "toolbarVisible", toolbarItems: "toolbarItems", layoutActions: "layoutActions", layout94: "layout94", parameters: "parameters", workflowPanelUi: "workflowPanelUi", context: "context", title: "title", subtitle: "subtitle", description: "description", facetList: "facetList", infobars: "infobars", fieldDict: "fieldDict", removeHeaderBorder: "removeHeaderBorder", removeContentPadding: "removeContentPadding", isMobile: "isMobile", mo: "mo", avatar: "avatar", circleAvatar: "circleAvatar", hideBreadCrumb: "hideBreadCrumb", rtl: "rtl", hideFooter: "hideFooter", hideTitle: "hideTitle", hideClose: "hideClose", hidePin: "hidePin", fullscreen: "fullscreen", mask: "mask", canSend: "canSend", contentIsPage: "contentIsPage", contentDensity: "contentDensity", deviceSize: "deviceSize", dirValue: "dirValue", landscape: "landscape", standalone: "standalone", modernTabs: "modernTabs", modernTabContainerComponent: "modernTabContainerComponent", formVisibilityStatus: "formVisibilityStatus", layoutGridCol: "layoutGridCol", colLg: "colLg", colXl: "colXl", colMd: "colMd", footerDesign: "footerDesign", formContentMaxWidth: "formContentMaxWidth", workflowButtons: "workflowButtons" }, outputs: { toolbarClick: "toolbarClick", workflowChoiceClick: "workflowChoiceClick", close: "close", fullscreenRequest: "fullscreenRequest", dismissInfobar: "dismissInfobar" }, viewQueries: [{ propertyName: "_dynamicPageComponent", first: true, predicate: DynamicPageComponent, descendants: true, static: true }, { propertyName: "_toolbarComponent", first: true, predicate: ["formToolbar"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true, read: ViewContainerRef }, { propertyName: "headerAvatarRef", first: true, predicate: ["headerAvatar"], descendants: true }, { propertyName: "closeFormTemplate", first: true, predicate: ["closeForm"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (mask) {\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\r\n    <bsu-mask size=\"m\"></bsu-mask>\r\n</div>\r\n}\r\n\r\n<fd-dynamic-page\r\n    [size]=\"isMobile ? 'small' : 'large'\"\r\n    [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\r\n    [class.header-border]=\"!removeHeaderBorder\"\r\n    [attr.isMobile]=\"isMobile\"\r\n    [attr.contentIsPage]=\"contentIsPage\"\r\n    mobile\r\n    formClose\r\n    [isMobile]=\"isMobile\"\r\n>\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"!description\"\r\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\r\n        [class.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile || hideBreadCrumb\">\r\n            <fd-breadcrumb>\r\n                @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\r\n                breadCrumb.url; let i = $index; let last = $last) {\r\n                <fd-breadcrumb-item>\r\n                    <bsu-breadcrumb\r\n                        [index]=\"i\"\r\n                        [isLast]=\"last\"\r\n                        [breadCrumb]=\"breadCrumb\"\r\n                        [allBreadCrumb]=\"breadCrumbs\"\r\n                    ></bsu-breadcrumb>\r\n                </fd-breadcrumb-item>\r\n                } }\r\n            </fd-breadcrumb>\r\n        </fd-dynamic-page-breadcrumb>\r\n        <fd-dynamic-page-global-actions>\r\n            <!-- global actions -->\r\n\r\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\r\n            <!-- added this because in mobile landscape toolbar disapper -->\r\n            @if (toolbarVisible) {\r\n            <bsu-form-toolbar\r\n                [deviceSize]=\"deviceSize\"\r\n                [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\r\n                [dirValue]=\"dirValue\"\r\n                [isFirefox]=\"isFirefox\"\r\n                (toolbarClick)=\"toolbarClick.emit($event)\"\r\n                #formToolbar\r\n            ></bsu-form-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <!-- layout actions -->\r\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\r\n            @if (!hideClose) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                @if (deviceSize !== 's') {\r\n                <fd-toolbar-separator></fd-toolbar-separator>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    @if (description || facetList.length > 0 || workflowInfoText || avatar || infobars?.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars?.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars?.length)\"\r\n        [collapsible]=\"true\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars?.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\r\n        <fd-facet-group ariaLabel=\"Facet Group\">\r\n            @if (avatar) {\r\n            <fd-facet type=\"image\">\r\n                <fd-avatar\r\n                    title=\"avatar\"\r\n                    [glyph]=\"avatar\"\r\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\r\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\r\n                    [transparent]=\"true\"\r\n                    [circle]=\"circleAvatar\"\r\n                ></fd-avatar>\r\n                <!-- <div\r\n                  class=\"fd-avatar fd-avatar--circle\"\r\n                  [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\r\n                  >\r\n                  <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\r\n                </div> -->\r\n            </fd-facet>\r\n            } @for (facet of facetList; track facet) {\r\n            <fd-facet\r\n                [type]=\"facet.type\"\r\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\r\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\r\n            >\r\n                @for (item of facet.mo.ItemList?.MoDataList; track item) {\r\n                <fd-facet-content>\r\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" id=\"form-value-10\"></fd-text>\r\n                </fd-facet-content>\r\n                } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\r\n                <span\r\n                    fd-object-status\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [glyph]=\"facet.mo.Icon\"\r\n                >\r\n                </span>\r\n                } @else {\r\n                <bnrc-dynamic-component\r\n                    [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\r\n                    [class.fd-object-status--large]=\"facet.mo.IsLarge\"\r\n                    [component]=\"facet.mo.Component\"\r\n                    [value]=\"facet.mo.Text | bbbTranslate\"\r\n                ></bnrc-dynamic-component>\r\n                } @if (facet.mo.IsNumber && facet.type === 'key-value') {\r\n                <fd-object-number\r\n                    [number]=\"facet.mo.Text | facetValue\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [unit]=\"facet.mo.Unit | facetValue | bbbTranslate\"\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [decimal]=\"facet.mo.DecimalValue | facetValue\"\r\n                ></fd-object-number>\r\n                } @if (facet.type === 'plain-text') {\r\n                <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\r\n                    <fd-text [text]=\"facet.mo.Text | facetValue | bbbTranslate\" hyphenation=\"auto\"></fd-text>\r\n                </div>\r\n                } @if (facet.type === 'rating-indicator') {\r\n                <fd-facet-content>\r\n                    <fd-rating-indicator\r\n                        style=\"pointer-events: none\"\r\n                        size=\"md\"\r\n                        [dynamicTextIndicator]=\"facet.mo.Footer | bbbTranslate\"\r\n                        [displayMode]=\"true\"\r\n                        [value]=\"facet.mo | facetValue: facet.type\"\r\n                    ></fd-rating-indicator>\r\n                </fd-facet-content>\r\n                } @if (facet.type === 'progress') {\r\n                <div [style.width]=\"'10rem'\">\r\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\r\n                    <fd-progress-indicator\r\n                        class=\"facet-progress\"\r\n                        style=\"width: 10r em\"\r\n                        [state]=\"facet.mo.State\"\r\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647' | bbbTranslate\"\r\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\r\n                        [valueMax]=\"10\"\r\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\r\n                    ></fd-progress-indicator>\r\n                    <!-- <ui5-progress-indicator\r\n                    style=\"width: 10rem\"\r\n                    [valueState]=\"facet.mo.State\"\r\n                    [value]=\"getNumber(facet.mo.Value)\"\r\n                  ></ui5-progress-indicator> -->\r\n                </div>\r\n                } @if (facet.type === 'microcharts') {\r\n                <div>\r\n                    <label wrap>in progress ...</label>\r\n                </div>\r\n                }\r\n            </fd-facet>\r\n            }\r\n        </fd-facet-group>\r\n        @if (description) {\r\n        <span>{{ description | bbbTranslate }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if((!modernTabs.length && !contentIsPage) || (modernTabs.length && !contentIsPage && parameters?.LayoutComponent))\r\n    {\r\n    <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\" cdkScrollable>\r\n        <fd-layout-grid class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout1.colMd\"\r\n                    [colLg]=\"layout1.colLg\"\r\n                    [colXl]=\"layout1.colXl\"\r\n                ></div>\r\n                <div class=\"!tw-p-0\" [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\r\n                            context: {\r\n                                $implicit: parameters?.LayoutComponent,\r\n                                layout94: layout94\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout2.colMd\"\r\n                    [colLg]=\"layout2.colLg\"\r\n                    [colXl]=\"layout2.colXl\"\r\n                ></div>\r\n            </div>\r\n        </fd-layout-grid>\r\n    </fd-dynamic-page-content>\r\n    } @else if(modernTabs.length && !contentIsPage && !parameters?.LayoutComponent){\r\n    <fdp-icon-tab-bar\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"tab.id\"\r\n            [label]=\"tab.Title!! | bbbTranslate\"\r\n            [title]=\"tab.Title!! | bbbTranslate\"\r\n            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\r\n            [class.is-expanded]=\"selectedTab === tab.Title\"\r\n            #tablist\r\n        >\r\n            <fd-dynamic-page-content [id]=\"tab.id\" [class.limit-content-width]=\"formContentMaxWidth > 0\">\r\n                <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                    </div>\r\n                </fd-layout-grid>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n        }\r\n    </fdp-icon-tab-bar>\r\n    } @if(!hideFooter && hasLayoutButtons || (workflowButtons.length && isMobile)){\r\n    <fd-dynamic-page-footer>\r\n        <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    </fd-dynamic-page-footer>\r\n    }\r\n</fd-dynamic-page>\r\n@if (contentIsPage) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderLayoutComponent;\r\n        context: {\r\n            $implicit: parameters?.LayoutComponent,\r\n            layout94: layout94\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\r\n    <bsu-ly-layout-container-of-root\r\n        [config]=\"layout94\"\r\n        [isPanel]=\"false\"\r\n        [isRoot]=\"true\"\r\n    ></bsu-ly-layout-container-of-root>\r\n</ng-template>\r\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\r\n    <bnrc-dynamic-form-component\r\n        [component]=\"component\"\r\n        [layoutActionsTemplateRef]=\"layoutActionsTemplateRef\"\r\n        [removeContentPadding]=\"removeContentPadding\"\r\n        [breadCrumbs]=\"breadCrumbs\"\r\n        [description]=\"description\"\r\n        [title]=\"title\"\r\n        [subtitle]=\"subtitle\"\r\n        [toolbarItems]=\"toolbarItems\"\r\n        [layoutActions]=\"layoutActions\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [facetList]=\"facetList\"\r\n        [settings]=\"component.Settings\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowPanelUi]=\"workflowPanelUi\"\r\n        [isMobile]=\"isMobile\"\r\n        [mo]=\"mo\"\r\n        [layout94]=\"layout94\"\r\n        [context]=\"context\"\r\n        [rtl]=\"rtl\"\r\n        [fieldDict]=\"fieldDict\"\r\n        [mask]=\"mask\"\r\n        [dirValue]=\"dirValue\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [modernTabs]=\"modernTabs\"\r\n        [avatar]=\"avatar\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-dynamic-form-component>\r\n</ng-template>\r\n<ng-template #closeForm>\r\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\r\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n    </button>\r\n</ng-template>\r\n<ng-template #fullscreenForm>\r\n    @if (canFullscreen) {\r\n    <button\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        (click)=\"fullscreenRequest.emit()\"\r\n        [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\r\n    ></button>\r\n    }\r\n</ng-template>\r\n<ng-template #layoutActionsTemplateRef>\r\n    <bsu-layout-actions\r\n        [canSend]=\"canSend\"\r\n        [buttons]=\"isMobile && hideFooter ? [] :layoutActions\"\r\n        [isMobile]=\"isMobile\"\r\n        [landscape]=\"landscape\"\r\n        [standalone]=\"standalone\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [rtl]=\"rtl\"\r\n        (toolClick)=\"toolbarClick.emit($event)\"\r\n        (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\r\n    >\r\n    </bsu-layout-actions>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto;width:100%}:host>fd-dynamic-page[contentispage=false]:not([ismobile=true]) ::ng-deep fd-dynamic-page-header .fd-dynamic-page__title{max-width:50svw}:host ::ng-deep .fd-facet .fd-title{font-family:B-Font Medium}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .facet-progress .fd-progress-indicator__container,:host ::ng-deep .facet-progress .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep>article{height:calc(100svh - var(--shellbar-height) - env(safe-area-inset-bottom) - constant(safe-area-inset-bottom))!important}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page ::ng-deep>article>.fd-scrollbar{height:inherit}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.hide-title.hide-breadcrumb{display:none}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container,.no-pin ::ng-deep .fd-dynamic-page__collapsible-header{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "bnrc-dynamic-form-component", inputs: ["breadCrumbs", "toolbarVisible", "toolbarItems", "layoutActions", "layoutActionsTemplateRef", "workflowButtons", "layout94", "footerDesign", "settings", "workflowPanelUi", "title", "subtitle", "description", "facetList", "removeHeaderBorder", "removeContentPadding", "isMobile", "avatar", "rtl", "mask", "mo", "contentDensity", "deviceSize", "dirValue", "fieldDict", "modernTabs"] }, { kind: "component", type: i2.BaseDynamicComponent, selector: "bnrc-dynamic-component", inputs: ["component", "value"], outputs: ["events"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i2.MeasureFormTitleWidthDirective, selector: "[mWidthTitle]", inputs: ["mWidthTitle", "enableMobile"] }, { kind: "directive", type: i3$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$6.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$6.BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i4$6.BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: i1$2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8$1.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "ariaRoledescription", "background", "autoResponsive", "size", "offset", "expandContent", "positionRelative"] }, { kind: "component", type: i8$1.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap", "headingLevel", "titleId"] }, { kind: "component", type: i8$1.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i8$1.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i8$1.DynamicPageSubheaderComponent, selector: "fd-dynamic-page-subheader", inputs: ["collapsible", "pinnable", "collapsed", "expandLabel", "collapseLabel", "id", "headerAriaLabel", "pinAriaLabel", "unpinAriaLabel"], outputs: ["collapsedChange"] }, { kind: "component", type: i8$1.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i8$1.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i8$1.DynamicPageBreadcrumbComponent, selector: "fd-dynamic-page-breadcrumb" }, { kind: "component", type: i8$2.FacetComponent, selector: "fd-facet", inputs: ["type", "facetTitle", "subtitle", "headingLevel", "id", "alignEnd"] }, { kind: "component", type: i8$2.FacetGroupComponent, selector: "fd-facet-group", inputs: ["ariaLabel"] }, { kind: "component", type: i8$2.FacetContentComponent, selector: "fd-facet-content" }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "allowWrap", "inlineHelpLabel", "id"] }, { kind: "component", type: i4$4.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$4.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$4.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i2$8.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "dismissBtnTitle", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "component", type: i5$6.ObjectNumberComponent, selector: "fd-object-number", inputs: ["number", "decimal", "unit", "emphasized", "large", "status", "class", "ariaLabelledBy", "ariaLabel"] }, { kind: "component", type: i10.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: i14.RatingIndicatorComponent, selector: "fd-rating-indicator", inputs: ["class", "name", "ariaLabel", "ariaLabelledBy", "disabled", "displayMode", "nonInteractive", "indicatorCapacity", "allowHalves", "value", "totalRatings", "ratingAverage", "ratings", "displayAllRatings", "ratedIcon", "unratedIcon", "size", "dynamicTextIndicator"], outputs: ["ratingChanged"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: i8.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i8.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i12$1.ProgressIndicatorComponent, selector: "fd-progress-indicator", inputs: ["valueText", "unit", "valueMin", "valueMax", "valueNow", "state", "animate"] }, { kind: "component", type: i18.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i18.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: BreadcrumbComponent, selector: "bsu-breadcrumb", inputs: ["breadCrumb", "allBreadCrumb", "isLast", "index"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "component", type: BarsaInfobarsComponent, selector: "bsu-barsa-infobars", inputs: ["infobars"], outputs: ["dismiss"] }, { kind: "directive", type: ContentDensityDirective, selector: "[contentDensity]" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.HeaderFacetValuePipe, name: "facetValue" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.SanitizeTextPipe, name: "sanitizeText" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FundamentalDynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-fundamental-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (mask) {\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\r\n    <bsu-mask size=\"m\"></bsu-mask>\r\n</div>\r\n}\r\n\r\n<fd-dynamic-page\r\n    [size]=\"isMobile ? 'small' : 'large'\"\r\n    [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\r\n    [class.header-border]=\"!removeHeaderBorder\"\r\n    [attr.isMobile]=\"isMobile\"\r\n    [attr.contentIsPage]=\"contentIsPage\"\r\n    mobile\r\n    formClose\r\n    [isMobile]=\"isMobile\"\r\n>\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"!description\"\r\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\r\n        [class.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile || hideBreadCrumb\">\r\n            <fd-breadcrumb>\r\n                @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\r\n                breadCrumb.url; let i = $index; let last = $last) {\r\n                <fd-breadcrumb-item>\r\n                    <bsu-breadcrumb\r\n                        [index]=\"i\"\r\n                        [isLast]=\"last\"\r\n                        [breadCrumb]=\"breadCrumb\"\r\n                        [allBreadCrumb]=\"breadCrumbs\"\r\n                    ></bsu-breadcrumb>\r\n                </fd-breadcrumb-item>\r\n                } }\r\n            </fd-breadcrumb>\r\n        </fd-dynamic-page-breadcrumb>\r\n        <fd-dynamic-page-global-actions>\r\n            <!-- global actions -->\r\n\r\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\r\n            <!-- added this because in mobile landscape toolbar disapper -->\r\n            @if (toolbarVisible) {\r\n            <bsu-form-toolbar\r\n                [deviceSize]=\"deviceSize\"\r\n                [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\r\n                [dirValue]=\"dirValue\"\r\n                [isFirefox]=\"isFirefox\"\r\n                (toolbarClick)=\"toolbarClick.emit($event)\"\r\n                #formToolbar\r\n            ></bsu-form-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <!-- layout actions -->\r\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\r\n            @if (!hideClose) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                @if (deviceSize !== 's') {\r\n                <fd-toolbar-separator></fd-toolbar-separator>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    @if (description || facetList.length > 0 || workflowInfoText || avatar || infobars?.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars?.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars?.length)\"\r\n        [collapsible]=\"true\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars?.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\r\n        <fd-facet-group ariaLabel=\"Facet Group\">\r\n            @if (avatar) {\r\n            <fd-facet type=\"image\">\r\n                <fd-avatar\r\n                    title=\"avatar\"\r\n                    [glyph]=\"avatar\"\r\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\r\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\r\n                    [transparent]=\"true\"\r\n                    [circle]=\"circleAvatar\"\r\n                ></fd-avatar>\r\n                <!-- <div\r\n                  class=\"fd-avatar fd-avatar--circle\"\r\n                  [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\r\n                  >\r\n                  <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\r\n                </div> -->\r\n            </fd-facet>\r\n            } @for (facet of facetList; track facet) {\r\n            <fd-facet\r\n                [type]=\"facet.type\"\r\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\r\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\r\n            >\r\n                @for (item of facet.mo.ItemList?.MoDataList; track item) {\r\n                <fd-facet-content>\r\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" id=\"form-value-10\"></fd-text>\r\n                </fd-facet-content>\r\n                } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\r\n                <span\r\n                    fd-object-status\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [glyph]=\"facet.mo.Icon\"\r\n                >\r\n                </span>\r\n                } @else {\r\n                <bnrc-dynamic-component\r\n                    [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\r\n                    [class.fd-object-status--large]=\"facet.mo.IsLarge\"\r\n                    [component]=\"facet.mo.Component\"\r\n                    [value]=\"facet.mo.Text | bbbTranslate\"\r\n                ></bnrc-dynamic-component>\r\n                } @if (facet.mo.IsNumber && facet.type === 'key-value') {\r\n                <fd-object-number\r\n                    [number]=\"facet.mo.Text | facetValue\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [unit]=\"facet.mo.Unit | facetValue | bbbTranslate\"\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [decimal]=\"facet.mo.DecimalValue | facetValue\"\r\n                ></fd-object-number>\r\n                } @if (facet.type === 'plain-text') {\r\n                <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\r\n                    <fd-text [text]=\"facet.mo.Text | facetValue | bbbTranslate\" hyphenation=\"auto\"></fd-text>\r\n                </div>\r\n                } @if (facet.type === 'rating-indicator') {\r\n                <fd-facet-content>\r\n                    <fd-rating-indicator\r\n                        style=\"pointer-events: none\"\r\n                        size=\"md\"\r\n                        [dynamicTextIndicator]=\"facet.mo.Footer | bbbTranslate\"\r\n                        [displayMode]=\"true\"\r\n                        [value]=\"facet.mo | facetValue: facet.type\"\r\n                    ></fd-rating-indicator>\r\n                </fd-facet-content>\r\n                } @if (facet.type === 'progress') {\r\n                <div [style.width]=\"'10rem'\">\r\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\r\n                    <fd-progress-indicator\r\n                        class=\"facet-progress\"\r\n                        style=\"width: 10r em\"\r\n                        [state]=\"facet.mo.State\"\r\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647' | bbbTranslate\"\r\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\r\n                        [valueMax]=\"10\"\r\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\r\n                    ></fd-progress-indicator>\r\n                    <!-- <ui5-progress-indicator\r\n                    style=\"width: 10rem\"\r\n                    [valueState]=\"facet.mo.State\"\r\n                    [value]=\"getNumber(facet.mo.Value)\"\r\n                  ></ui5-progress-indicator> -->\r\n                </div>\r\n                } @if (facet.type === 'microcharts') {\r\n                <div>\r\n                    <label wrap>in progress ...</label>\r\n                </div>\r\n                }\r\n            </fd-facet>\r\n            }\r\n        </fd-facet-group>\r\n        @if (description) {\r\n        <span>{{ description | bbbTranslate }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if((!modernTabs.length && !contentIsPage) || (modernTabs.length && !contentIsPage && parameters?.LayoutComponent))\r\n    {\r\n    <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\" cdkScrollable>\r\n        <fd-layout-grid class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout1.colMd\"\r\n                    [colLg]=\"layout1.colLg\"\r\n                    [colXl]=\"layout1.colXl\"\r\n                ></div>\r\n                <div class=\"!tw-p-0\" [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\r\n                            context: {\r\n                                $implicit: parameters?.LayoutComponent,\r\n                                layout94: layout94\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout2.colMd\"\r\n                    [colLg]=\"layout2.colLg\"\r\n                    [colXl]=\"layout2.colXl\"\r\n                ></div>\r\n            </div>\r\n        </fd-layout-grid>\r\n    </fd-dynamic-page-content>\r\n    } @else if(modernTabs.length && !contentIsPage && !parameters?.LayoutComponent){\r\n    <fdp-icon-tab-bar\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"tab.id\"\r\n            [label]=\"tab.Title!! | bbbTranslate\"\r\n            [title]=\"tab.Title!! | bbbTranslate\"\r\n            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\r\n            [class.is-expanded]=\"selectedTab === tab.Title\"\r\n            #tablist\r\n        >\r\n            <fd-dynamic-page-content [id]=\"tab.id\" [class.limit-content-width]=\"formContentMaxWidth > 0\">\r\n                <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                    </div>\r\n                </fd-layout-grid>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n        }\r\n    </fdp-icon-tab-bar>\r\n    } @if(!hideFooter && hasLayoutButtons){\r\n    <fd-dynamic-page-footer>\r\n        <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    </fd-dynamic-page-footer>\r\n    }\r\n</fd-dynamic-page>\r\n@if (contentIsPage) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderLayoutComponent;\r\n        context: {\r\n            $implicit: parameters?.LayoutComponent,\r\n            layout94: layout94\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\r\n    <bsu-ly-layout-container-of-root\r\n        [config]=\"layout94\"\r\n        [isPanel]=\"false\"\r\n        [isRoot]=\"true\"\r\n    ></bsu-ly-layout-container-of-root>\r\n</ng-template>\r\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\r\n    <bnrc-dynamic-form-component\r\n        [component]=\"component\"\r\n        [layoutActionsTemplateRef]=\"layoutActionsTemplateRef\"\r\n        [removeContentPadding]=\"removeContentPadding\"\r\n        [breadCrumbs]=\"breadCrumbs\"\r\n        [description]=\"description\"\r\n        [title]=\"title\"\r\n        [subtitle]=\"subtitle\"\r\n        [toolbarItems]=\"toolbarItems\"\r\n        [layoutActions]=\"layoutActions\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [facetList]=\"facetList\"\r\n        [settings]=\"component.Settings\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowPanelUi]=\"workflowPanelUi\"\r\n        [isMobile]=\"isMobile\"\r\n        [mo]=\"mo\"\r\n        [layout94]=\"layout94\"\r\n        [context]=\"context\"\r\n        [rtl]=\"rtl\"\r\n        [fieldDict]=\"fieldDict\"\r\n        [mask]=\"mask\"\r\n        [dirValue]=\"dirValue\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [modernTabs]=\"modernTabs\"\r\n        [avatar]=\"avatar\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-dynamic-form-component>\r\n</ng-template>\r\n<ng-template #closeForm>\r\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\r\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n    </button>\r\n</ng-template>\r\n<ng-template #fullscreenForm>\r\n    @if (canFullscreen) {\r\n    <button\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        (click)=\"fullscreenRequest.emit()\"\r\n        [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\r\n    ></button>\r\n    }\r\n</ng-template>\r\n<ng-template #layoutActionsTemplateRef>\r\n    <bsu-layout-actions\r\n        [canSend]=\"canSend\"\r\n        [buttons]=\"layoutActions\"\r\n        [isMobile]=\"isMobile\"\r\n        [landscape]=\"landscape\"\r\n        [standalone]=\"standalone\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [rtl]=\"rtl\"\r\n        (toolClick)=\"toolbarClick.emit($event)\"\r\n        (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\r\n    >\r\n    </bsu-layout-actions>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto;width:100%}:host>fd-dynamic-page[contentispage=false]:not([ismobile=true]) ::ng-deep fd-dynamic-page-header .fd-dynamic-page__title{max-width:50svw}:host ::ng-deep .fd-facet .fd-title{font-family:B-Font Medium}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .facet-progress .fd-progress-indicator__container,:host ::ng-deep .facet-progress .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep>article{height:calc(100svh - var(--shellbar-height) - env(safe-area-inset-bottom) - constant(safe-area-inset-bottom))!important}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page ::ng-deep>article>.fd-scrollbar{height:inherit}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.hide-title.hide-breadcrumb{display:none}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container,.no-pin ::ng-deep .fd-dynamic-page__collapsible-header{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"] }]
+            args: [{ selector: 'bsu-fundamental-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (mask) {\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%\">\r\n    <bsu-mask size=\"m\"></bsu-mask>\r\n</div>\r\n}\r\n\r\n<fd-dynamic-page\r\n    [size]=\"isMobile ? 'small' : 'large'\"\r\n    [ngClass]=\"{ 'floating-footer': footerDesign === 'floating-footer' }\"\r\n    [class.header-border]=\"!removeHeaderBorder\"\r\n    [attr.isMobile]=\"isMobile\"\r\n    [attr.contentIsPage]=\"contentIsPage\"\r\n    mobile\r\n    formClose\r\n    [isMobile]=\"isMobile\"\r\n>\r\n    <fd-dynamic-page-header\r\n        [class.simple-title]=\"!description\"\r\n        [title]=\"(hideTitle === true ? '' : title) | bbbTranslate\"\r\n        [class.notitle]=\"title.length < 2 || hideTitle\"\r\n        [class.p-b0]=\"removeContentPadding\"\r\n        [class.hide-title]=\"hideTitle === true && hideClose === true\"\r\n        [class.hide-breadcrumb]=\"hideBreadCrumb\"\r\n        [class.no-toolbar-items]=\"!(toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter)?.length\"\r\n        [mWidthTitle]=\"title\"\r\n        #titleRef\r\n    >\r\n        <fd-dynamic-page-breadcrumb [class.hide]=\"isMobile || hideBreadCrumb\">\r\n            <fd-breadcrumb>\r\n                @if (breadCrumbs && !isMobile) { @for (breadCrumb of breadCrumbs | slice: 0:breadCrumbs.length; track\r\n                breadCrumb.url; let i = $index; let last = $last) {\r\n                <fd-breadcrumb-item>\r\n                    <bsu-breadcrumb\r\n                        [index]=\"i\"\r\n                        [isLast]=\"last\"\r\n                        [breadCrumb]=\"breadCrumb\"\r\n                        [allBreadCrumb]=\"breadCrumbs\"\r\n                    ></bsu-breadcrumb>\r\n                </fd-breadcrumb-item>\r\n                } }\r\n            </fd-breadcrumb>\r\n        </fd-dynamic-page-breadcrumb>\r\n        <fd-dynamic-page-global-actions>\r\n            <!-- global actions -->\r\n\r\n            <fd-toolbar [shouldOverflow]=\"true\" Style=\"display:none\"> </fd-toolbar>\r\n            <!-- added this because in mobile landscape toolbar disapper -->\r\n            @if (toolbarVisible) {\r\n            <bsu-form-toolbar\r\n                [deviceSize]=\"deviceSize\"\r\n                [buttons]=\"toolbarItems | filterWorkflowInMobile: worfklowButtonsOnFooter\"\r\n                [dirValue]=\"dirValue\"\r\n                [isFirefox]=\"isFirefox\"\r\n                (toolbarClick)=\"toolbarClick.emit($event)\"\r\n                #formToolbar\r\n            ></bsu-form-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <!-- layout actions -->\r\n            <!-- <div [formActions]=\"this.toolbar\"></div> -->\r\n            @if (!hideClose) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                @if (deviceSize !== 's') {\r\n                <fd-toolbar-separator></fd-toolbar-separator>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"fullscreenForm\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"closeForm\"></ng-container>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    @if (description || facetList.length > 0 || workflowInfoText || avatar || infobars?.length) {}\r\n    <fd-dynamic-page-subheader\r\n        [class.header-no-description]=\"!(description || workflowInfoText || infobars?.length)\"\r\n        [class.no-pin]=\"hidePin || (!facetList?.length && !workflowInfoText && !infobars?.length)\"\r\n        [collapsible]=\"true\"\r\n        [pinnable]=\"false\"\r\n        [collapsed]=\"!facetList?.length && !workflowInfoText && !infobars?.length\"\r\n    >\r\n        @if (workflowInfoText) {\r\n        <fd-message-strip\r\n            [type]=\"'warning'\"\r\n            [dismissible]=\"false\"\r\n            [innerHtml]=\"workflowInfoText | bbbTranslate | sanitizeText\"\r\n        >\r\n        </fd-message-strip>\r\n        }\r\n        <bsu-barsa-infobars [infobars]=\"infobars\" (dismiss)=\"dismissInfobar.emit($event)\"></bsu-barsa-infobars>\r\n        <fd-facet-group ariaLabel=\"Facet Group\">\r\n            @if (avatar) {\r\n            <fd-facet type=\"image\">\r\n                <fd-avatar\r\n                    title=\"avatar\"\r\n                    [glyph]=\"avatar\"\r\n                    [image]=\"!avatar?.FileId ? null : (avatar?.FileId | picFieldSrc: 'ID':null)\"\r\n                    [size]=\"deviceSize === 'xl' ? 'l' : deviceSize\"\r\n                    [transparent]=\"true\"\r\n                    [circle]=\"circleAvatar\"\r\n                ></fd-avatar>\r\n                <!-- <div\r\n                  class=\"fd-avatar fd-avatar--circle\"\r\n                  [class]=\"'fd-avatar--' + (deviceSize === 'xl' ? 'l' : deviceSize)\"\r\n                  >\r\n                  <i *ngIf=\"avatar\" class=\"fd-avatar__icon\" [class]=\"avatar | sapFontClass\" role=\"presentation\"> </i>\r\n                </div> -->\r\n            </fd-facet>\r\n            } @for (facet of facetList; track facet) {\r\n            <fd-facet\r\n                [type]=\"facet.type\"\r\n                [facetTitle]=\"facet.mo.Title | bbbTranslate\"\r\n                [subtitle]=\"facet.mo.SubTitle | facetValue | bbbTranslate\"\r\n            >\r\n                @for (item of facet.mo.ItemList?.MoDataList; track item) {\r\n                <fd-facet-content>\r\n                    <label fd-form-label [colon]=\"true\" for=\"form-value-10\">{{ item.Title | bbbTranslate }}</label>\r\n                    <fd-text [text]=\"item.Value | facetValue | bbbTranslate\" id=\"form-value-10\"></fd-text>\r\n                </fd-facet-content>\r\n                } @if ( !facet.mo.IsNumber && facet.type === 'key-value' && !facet.mo.Component?.Selector) {\r\n                <span\r\n                    fd-object-status\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [label]=\"facet.mo.Component?.Selector ? '' : (facet.mo.Text | facetValue | bbbTranslate)\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [title]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [aria-label]=\"facet.mo.Text | facetValue | bbbTranslate\"\r\n                    [glyph]=\"facet.mo.Icon\"\r\n                >\r\n                </span>\r\n                } @else {\r\n                <bnrc-dynamic-component\r\n                    [class]=\"'fd-object-status fd-object-status--' + facet.mo.Status | facetValue\"\r\n                    [class.fd-object-status--large]=\"facet.mo.IsLarge\"\r\n                    [component]=\"facet.mo.Component\"\r\n                    [value]=\"facet.mo.Text | bbbTranslate\"\r\n                ></bnrc-dynamic-component>\r\n                } @if (facet.mo.IsNumber && facet.type === 'key-value') {\r\n                <fd-object-number\r\n                    [number]=\"facet.mo.Text | facetValue\"\r\n                    [large]=\"facet.mo.IsLarge\"\r\n                    [unit]=\"facet.mo.Unit | facetValue | bbbTranslate\"\r\n                    [status]=\"facet.mo.Status | facetValue\"\r\n                    [decimal]=\"facet.mo.DecimalValue | facetValue\"\r\n                ></fd-object-number>\r\n                } @if (facet.type === 'plain-text') {\r\n                <div [style.width.px]=\"facet.mo.Width\" style=\"white-space: normal\">\r\n                    <fd-text [text]=\"facet.mo.Text | facetValue | bbbTranslate\" hyphenation=\"auto\"></fd-text>\r\n                </div>\r\n                } @if (facet.type === 'rating-indicator') {\r\n                <fd-facet-content>\r\n                    <fd-rating-indicator\r\n                        style=\"pointer-events: none\"\r\n                        size=\"md\"\r\n                        [dynamicTextIndicator]=\"facet.mo.Footer | bbbTranslate\"\r\n                        [displayMode]=\"true\"\r\n                        [value]=\"facet.mo | facetValue: facet.type\"\r\n                    ></fd-rating-indicator>\r\n                </fd-facet-content>\r\n                } @if (facet.type === 'progress') {\r\n                <div [style.width]=\"'10rem'\">\r\n                    <!-- <span fd-form-label>{{ facet.mo.Subtitle | facetValue }}</span> -->\r\n                    <fd-progress-indicator\r\n                        class=\"facet-progress\"\r\n                        style=\"width: 10r em\"\r\n                        [state]=\"facet.mo.State\"\r\n                        [valueText]=\"(facet.mo | facetValue: facet.type) + ' \u0627\u0632 10 \u0645\u0631\u062D\u0644\u0647' | bbbTranslate\"\r\n                        [valueNow]=\"facet.mo | facetValue: facet.type\"\r\n                        [valueMax]=\"10\"\r\n                        [unit]=\"'\u0645\u0631\u062D\u0644\u0647'\"\r\n                    ></fd-progress-indicator>\r\n                    <!-- <ui5-progress-indicator\r\n                    style=\"width: 10rem\"\r\n                    [valueState]=\"facet.mo.State\"\r\n                    [value]=\"getNumber(facet.mo.Value)\"\r\n                  ></ui5-progress-indicator> -->\r\n                </div>\r\n                } @if (facet.type === 'microcharts') {\r\n                <div>\r\n                    <label wrap>in progress ...</label>\r\n                </div>\r\n                }\r\n            </fd-facet>\r\n            }\r\n        </fd-facet-group>\r\n        @if (description) {\r\n        <span>{{ description | bbbTranslate }}</span>\r\n        }\r\n    </fd-dynamic-page-subheader>\r\n    @if((!modernTabs.length && !contentIsPage) || (modernTabs.length && !contentIsPage && parameters?.LayoutComponent))\r\n    {\r\n    <fd-dynamic-page-content [class.limit-content-width]=\"formContentMaxWidth > 0\" cdkScrollable>\r\n        <fd-layout-grid class=\"!tw-p-0\" style=\"min-height: 100%\" [style.max-width.px]=\"formContentMaxWidth\">\r\n            <div fdLayoutGridRow class=\"!tw-p-0\">\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout1.colMd\"\r\n                    [colLg]=\"layout1.colLg\"\r\n                    [colXl]=\"layout1.colXl\"\r\n                ></div>\r\n                <div class=\"!tw-p-0\" [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            parameters?.LayoutComponent ? renderLayoutComponent : renderDefaultLayout;\r\n                            context: {\r\n                                $implicit: parameters?.LayoutComponent,\r\n                                layout94: layout94\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </div>\r\n                <div\r\n                    class=\"!tw-p-0\"\r\n                    [class.hide]=\"disableGrid\"\r\n                    [class.hide]=\"layout2.colXl === 0\"\r\n                    [fdLayoutGridCol]=\"0\"\r\n                    [colMd]=\"layout2.colMd\"\r\n                    [colLg]=\"layout2.colLg\"\r\n                    [colXl]=\"layout2.colXl\"\r\n                ></div>\r\n            </div>\r\n        </fd-layout-grid>\r\n    </fd-dynamic-page-content>\r\n    } @else if(modernTabs.length && !contentIsPage && !parameters?.LayoutComponent){\r\n    <fdp-icon-tab-bar\r\n        [stackContent]=\"false\"\r\n        [collapseOverflow]=\"true\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        [iconTabType]=\"modernTabContainerComponent?.Settings?.TabType.$Caption || 'text'\"\r\n        [layoutMode]=\"modernTabContainerComponent?.Settings?.LayoutMode$Caption\"\r\n    >\r\n        @for (tab of modernTabs; track tab.Title; let i = $index) {\r\n        <fdp-icon-tab-bar-tab\r\n            [id]=\"tab.id\"\r\n            [label]=\"tab.Title!! | bbbTranslate\"\r\n            [title]=\"tab.Title!! | bbbTranslate\"\r\n            [color]=\"tab.SemanticColor?.$Caption\"\r\n            [icon]=\"tab.FontIcon\"\r\n            [iconFont]=\"tab.IconFontName?.$Caption\"\r\n            [counter]=\"tab.CustomUi?.Settings?.CounterValue\"\r\n            [class.is-expanded]=\"selectedTab === tab.Title\"\r\n            #tablist\r\n        >\r\n            <fd-dynamic-page-content [id]=\"tab.id\" [class.limit-content-width]=\"formContentMaxWidth > 0\">\r\n                <fd-layout-grid [style.max-width.px]=\"formContentMaxWidth\" class=\"!tw-p-0\">\r\n                    <div fdLayoutGridRow>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout1.colMd\"\r\n                            [colLg]=\"layout1.colLg\"\r\n                            [colXl]=\"layout1.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                        <div [fdLayoutGridCol]=\"12\" [colMd]=\"colMd\" [colLg]=\"colLg\" [colXl]=\"colXl\" class=\"!tw-p-0\">\r\n                            <bsu-ly-tab-page [config]=\"tab\"></bsu-ly-tab-page>\r\n                        </div>\r\n                        <div\r\n                            class=\"!tw-p-0\"\r\n                            [fdLayoutGridCol]=\"0\"\r\n                            [colMd]=\"layout2.colMd\"\r\n                            [colLg]=\"layout2.colLg\"\r\n                            [colXl]=\"layout2.colXl\"\r\n                            [class.hide]=\"disableGrid\"\r\n                        ></div>\r\n                    </div>\r\n                </fd-layout-grid>\r\n            </fd-dynamic-page-content>\r\n        </fdp-icon-tab-bar-tab>\r\n        }\r\n    </fdp-icon-tab-bar>\r\n    } @if(!hideFooter && hasLayoutButtons || (workflowButtons.length && isMobile)){\r\n    <fd-dynamic-page-footer>\r\n        <ng-container *ngTemplateOutlet=\"layoutActionsTemplateRef\"></ng-container>\r\n    </fd-dynamic-page-footer>\r\n    }\r\n</fd-dynamic-page>\r\n@if (contentIsPage) {\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        renderLayoutComponent;\r\n        context: {\r\n            $implicit: parameters?.LayoutComponent,\r\n            layout94: layout94\r\n        }\r\n    \"\r\n></ng-container>\r\n}\r\n<ng-template #renderDefaultLayout let-layout94=\"layout94\">\r\n    <bsu-ly-layout-container-of-root\r\n        [config]=\"layout94\"\r\n        [isPanel]=\"false\"\r\n        [isRoot]=\"true\"\r\n    ></bsu-ly-layout-container-of-root>\r\n</ng-template>\r\n<ng-template #renderLayoutComponent let-component let-layout94=\"layout94\">\r\n    <bnrc-dynamic-form-component\r\n        [component]=\"component\"\r\n        [layoutActionsTemplateRef]=\"layoutActionsTemplateRef\"\r\n        [removeContentPadding]=\"removeContentPadding\"\r\n        [breadCrumbs]=\"breadCrumbs\"\r\n        [description]=\"description\"\r\n        [title]=\"title\"\r\n        [subtitle]=\"subtitle\"\r\n        [toolbarItems]=\"toolbarItems\"\r\n        [layoutActions]=\"layoutActions\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [facetList]=\"facetList\"\r\n        [settings]=\"component.Settings\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowPanelUi]=\"workflowPanelUi\"\r\n        [isMobile]=\"isMobile\"\r\n        [mo]=\"mo\"\r\n        [layout94]=\"layout94\"\r\n        [context]=\"context\"\r\n        [rtl]=\"rtl\"\r\n        [fieldDict]=\"fieldDict\"\r\n        [mask]=\"mask\"\r\n        [dirValue]=\"dirValue\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [contentDensity]=\"contentDensity\"\r\n        [modernTabs]=\"modernTabs\"\r\n        [avatar]=\"avatar\"\r\n        (events)=\"onDynamicComponentEvents($event)\"\r\n    ></bnrc-dynamic-form-component>\r\n</ng-template>\r\n<ng-template #closeForm>\r\n    <button fd-button fdType=\"transparent\" aria-label=\"Close\" (click)=\"close.emit()\" title=\"Close\">\r\n        <i [class]=\"'sap-icon--' + (isMobile ? (rtl ? 'arrow-right' : 'arrow-left') : 'decline')\"></i>\r\n    </button>\r\n</ng-template>\r\n<ng-template #fullscreenForm>\r\n    @if (canFullscreen) {\r\n    <button\r\n        fd-button\r\n        fdType=\"transparent\"\r\n        [attr.aria-label]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        (click)=\"fullscreenRequest.emit()\"\r\n        [title]=\"fullscreen ? 'exit fullscreen' : 'fullscreen'\"\r\n        [glyph]=\"fullscreen ? 'exitfullscreen' : 'resize'\"\r\n    ></button>\r\n    }\r\n</ng-template>\r\n<ng-template #layoutActionsTemplateRef>\r\n    <bsu-layout-actions\r\n        [canSend]=\"canSend\"\r\n        [buttons]=\"isMobile && hideFooter ? [] :layoutActions\"\r\n        [isMobile]=\"isMobile\"\r\n        [landscape]=\"landscape\"\r\n        [standalone]=\"standalone\"\r\n        [footerDesign]=\"footerDesign\"\r\n        [workflowButtons]=\"workflowButtons\"\r\n        [workflowButtonsComboMode]=\"workflowButtonsComboMode || worfklowButtonsOnFooter\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [rtl]=\"rtl\"\r\n        (toolClick)=\"toolbarClick.emit($event)\"\r\n        (workflowChoiceSelect)=\"onWfChoiceSelect($event)\"\r\n    >\r\n    </bsu-layout-actions>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto;width:100%}:host>fd-dynamic-page[contentispage=false]:not([ismobile=true]) ::ng-deep fd-dynamic-page-header .fd-dynamic-page__title{max-width:50svw}:host ::ng-deep .fd-facet .fd-title{font-family:B-Font Medium}:host ::ng-deep fd-dynamic-page[contentIsPage=true] .fd-dynamic-page{height:auto!important}:host ::ng-deep .facet-progress .fd-progress-indicator__container,:host ::ng-deep .facet-progress .fd-progress-indicator__progress-bar{height:1.5rem}:host ::ng-deep fd-facet .fd-object-status--large{font-size:1.1rem}.no-toolbar-items ::ng-deep .fd-dynamic-page__toolbar-container{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep .fd-dynamic-page__title{width:auto}fd-dynamic-page[ismobile=true] fd-dynamic-page-header.notitle ::ng-deep>article{height:calc(100svh - var(--shellbar-height) - env(safe-area-inset-bottom) - constant(safe-area-inset-bottom))!important}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded{min-height:100%;display:flex}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded>fd-dynamic-page-content{min-height:100%;overflow:hidden}fd-dynamic-page ::ng-deep>article>fd-tab-list>.fd-tabs__content fd-tab.is-expanded bsu-ly-layout-container-of-root{min-height:100%}fd-dynamic-page ::ng-deep>article>.fd-scrollbar{height:inherit}fd-dynamic-page fd-dynamic-page-content.limit-content-width{display:flex;justify-content:center}fd-facet{display:flex;flex-direction:column}.hide-title ::ng-deep .fd-dynamic-page__title-container{display:none!important}.hide-title.hide-breadcrumb{display:none}.no-pin ::ng-deep .fd-dynamic-page__collapsible-header-visibility-container,.no-pin ::ng-deep .fd-dynamic-page__collapsible-header{display:none!important}fd-toolbar.firefox ::ng-deep .fd-toolbar{flex-direction:row-reverse}fd-toolbar.firefox ::ng-deep .fd-toolbar>:first-child{margin-right:5px}\n"] }]
         }], propDecorators: { _dynamicPageComponent: [{
                 type: ViewChild,
                 args: [DynamicPageComponent, { static: true }]
@@ -11666,6 +11655,8 @@ class FormDialogComponent extends BaseComponent {
         this.canFullscreen = parameters?.CanFullscreen;
         this.fullscreenDefault = parameters?.FullscreenDefault;
         this.workflowButtonsOnFooter = parameters?.WorkflowButtonsOnFooter;
+        this.showWorkflowToolbar = BarsaApi.Common.Util.TryGetValue(formPanelCtrlr, 'Setting.WorkflowResolved.ShowToolbar', null);
+        this.hideFooter = parameters?.HideFooter;
         this.fullscreenMode = +parameters?.FullscreenMode;
         if (this.fullscreen) {
             this.fullscreenDefault = true;
@@ -11678,7 +11669,7 @@ class FormDialogComponent extends BaseComponent {
         this._setCaption(formPanelCtrlr);
         this.formPanelCtrlr = formPanelCtrlr;
         this.title = this._bbbtranslate.transform(this.title || this.caption);
-        this.title = "";
+        this.title = '';
         this.titleWidth = measureText2(this.title, '1rem');
     }
     get Adapter() {
@@ -11691,12 +11682,14 @@ class FormDialogComponent extends BaseComponent {
         this.showSaveButton = BarsaApi.Common.Util.TryGetValue(formPanelCtrlr, 'Setting.View.FormSettings.ShowSaveButton');
         this.showToolbar = BarsaApi.Common.Util.TryGetValue(formPanelCtrlr, 'Setting.View.FormSettings.ShowToolbar');
         this.isNonePersistance = formPanelCtrlr?.Setting?.View?.IsNonePersistance;
-        this.showFooter = this.isNonePersistance
-            ? this.showSaveButton !== false && this.showToolbar !== false
-            : this.showSaveButton;
-        if (typeof this.showFooter == typeof null) {
+        this.showFooter = this.showSaveButton !== false;
+        if (this.hideFooter) {
+            this.showFooter = false;
+        }
+        if (this.isWorkflowForm && !this.showWorkflowToolbar) {
             this.showFooter = true;
         }
+        this.showWorkflowButtonsOnFooter = this.isMobile || this.workflowButtonsOnFooter || !this.showWorkflowToolbar;
         this.openDialog();
     }
     onHeaderTitleVisibilityChange(e, barLeft) {
@@ -11826,11 +11819,11 @@ class FormDialogComponent extends BaseComponent {
         this.caption = typeDefName + ':' + moCaption;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FormDialogComponent, isStandalone: false, selector: "bsu-form-dialog", providers: [ContainerService], viewQueries: [{ propertyName: "dialogTemplateRef", first: true, predicate: ["dialog"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_dialogForm", first: true, predicate: ["dialogTplRef"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialog>\r\n    <fd-dialog\r\n        [dialogConfig]=\"dialogConfig\"\r\n        [dialogRef]=\"dialog\"\r\n        #dialogTplRef\r\n        class=\"form-dialog\"\r\n        intersectionObserver\r\n        [intersectionThreshold]=\"0.5\"\r\n        (visibilityChange)=\"onBarRightVisibilityChange($event, dialogBody, dialogTplRef)\"\r\n    >\r\n        <fd-dialog-header>\r\n            <ng-template fdkTemplate=\"header\">\r\n                @if(formUi()?.extendToolbarItems$ | async | tlbButtons: 'inFooter':false:true;as toolbarItems){\r\n                <div\r\n                    fd-bar-left\r\n                    #barLeft\r\n                    intersectionObserver\r\n                    [intersectionThreshold]=\"0.5\"\r\n                    (visibilityChange)=\"onHeaderTitleVisibilityChange($event, barLeft)\"\r\n                >\r\n                    <h1 fd-title>\r\n                        {{ title }}\r\n                    </h1>\r\n                </div>\r\n                <div fd-bar-center style=\"flex: 1; display: none\"></div>\r\n                <div fd-bar-right #barRight class=\"bar-right\" [attr.items]=\"toolbarItems.length\">\r\n                    <bsu-form-toolbar\r\n                        fd-bar-right\r\n                        class=\"toolbar-hide-spacer\"\r\n                        [width]=\"'100%'\"\r\n                        [shouldOverflow]=\"true\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [buttons]=\"toolbarItems | filterWorkflowInMobile: workflowButtonsOnFooter\"\r\n                        [dirValue]=\"(formUi()?.dirValue$ | async)!!\"\r\n                        [isFirefox]=\"isFirefox\"\r\n                        (toolbarClick)=\"onToolbarClick($event)\"\r\n                        #formToolbar\r\n                    ></bsu-form-toolbar>\r\n                    @if (dialogConfig.data.canFullscreen) {\r\n                    <fd-button-bar\r\n                        ariaLabel=\"fullscreen\"\r\n                        fullscreenDialog\r\n                        [glyph]=\"(dialog.fullScreen | async) === true ? 'exitfullscreen' : 'resize'\"\r\n                        (click)=\"onFullscreenToggle(dialog, dialogBody, dialogTplRef)\"\r\n                    ></fd-button-bar>\r\n                    }\r\n                    <fd-button-bar\r\n                        ariaLabel=\"close\"\r\n                        glyph=\"decline\"\r\n                        (click)=\"onCancel()\"\r\n                        [style.width]=\"\"\r\n                    ></fd-button-bar>\r\n                </div>\r\n                }\r\n            </ng-template>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body #dialogBody>\r\n            <bnrc-form\r\n                [formPanelCtrl]=\"formPanelCtrlr\"\r\n                [params]=\"params\"\r\n                (formClose)=\"onFormClose()\"\r\n                (uiComponent)=\"onFormUiComponentReady($event)\"\r\n            ></bnrc-form>\r\n        </fd-dialog-body>\r\n        <fd-dialog-footer [style.display]=\"!showFooter && !isWorkflowForm ? 'none' : null\">\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div fd-bar-right>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            layoutactions;\r\n                            context: {\r\n                                workflowButtons: (formUi()?.workflowButtons$ | async),\r\n                                extendToolbarItems:\r\n                                    (formUi()?.extendToolbarItems$ | async | tlbButtons: 'inFooter':true)\r\n                            }\r\n                        \"\r\n                    >\r\n                    </ng-container>\r\n                    <ng-template\r\n                        #layoutactions\r\n                        let-workflowButtons=\"workflowButtons\"\r\n                        let-extendToolbarItems=\"extendToolbarItems\"\r\n                    >\r\n                        @if(workflowButtons.length){\r\n                        <bsu-layout-actions\r\n                            [canSend]=\"false\"\r\n                            [buttons]=\"[]\"\r\n                            [isMobile]=\"isMobile\"\r\n                            [landscape]=\"(formUi()?.landscape$ | async) === true\"\r\n                            [standalone]=\"(formUi()?.standalone$ | async) === true\"\r\n                            [workflowButtons]=\"workflowButtons\"\r\n                            [workflowButtonsComboMode]=\"true\"\r\n                            [deviceSize]=\"deviceSize\"\r\n                            [rtl]=\"(formUi()?.rtl$ | async) === true\"\r\n                            (toolClick)=\"onToolbarClick($event)\"\r\n                            (workflowChoiceSelect)=\"onWorkflowChoiceClick($event)\"\r\n                        >\r\n                        </bsu-layout-actions>\r\n                        } @for (btn of extendToolbarItems ; track btn.Id) { @if (!(btn === '-' || btn.text === '-') ) {\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                            btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate;\r\n                            context: { $implicit: btn ,}\r\n                        \"\r\n                        ></ng-container>\r\n                        <ng-template #btnTemplate let-btn>\r\n                            <fd-dialog-footer-button>\r\n                                <fd-button-bar\r\n                                    [fdType]=\"\r\n                                        workflowButtons?.length && btn.design === 'emphasized' ? 'ghost' : btn.design\r\n                                    \"\r\n                                    [label]=\"btn.text | bbbTranslate\"\r\n                                    [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n                                    (click)=\"btn.handler(btn, formPanelCtrlr?.Adapter?.Control)\"\r\n                                ></fd-button-bar>\r\n                            </fd-dialog-footer-button>\r\n                        </ng-template>\r\n                        <ng-template #dynamicBtnTemplate let-btn>\r\n                            <fd-dialog-footer-button>\r\n                                <bnrc-dynamic-form-toolbaritem\r\n                                    fd-toolbar-item\r\n                                    [component]=\"btn.Data.CustomUi\"\r\n                                    [context]=\"btn\"\r\n                                    [isEnable]=\"btn.Command?._isEnable\"\r\n                                    (btnClick)=\"btn.handler(btn, formPanelCtrlr?.Adapter?.Control)\"\r\n                                ></bnrc-dynamic-form-toolbaritem>\r\n                            </fd-dialog-footer-button>\r\n                        </ng-template>\r\n                        } } @if (!isNonePersistance && showSaveButton !== false) {\r\n                        <fd-dialog-footer-button>\r\n                            <fd-button-bar\r\n                                fd-initial-focus\r\n                                fd-dialog-decisive-button\r\n                                [label]=\"'Cancel' | bbbTranslate\"\r\n                                (click)=\"onCancel()\"\r\n                            ></fd-button-bar>\r\n                        </fd-dialog-footer-button>\r\n                        }\r\n                    </ng-template>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto}fd-dialog-body{display:flex;flex-direction:column;height:100%;align-items:stretch;justify-content:stretch}fd-dialog-body>bnrc-form{flex-grow:1;display:flex;flex-direction:row;height:100%;justify-content:stretch;align-items:stretch}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "UlvMainCtrlr", "formPanelCtrlId", "saveOnChange", "inlineEditInReport"], outputs: ["titleChanged", "moChanged", "formClose", "uiComponent", "formRendered", "bruleAction", "beforeTransition", "afterTransition"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "directive", type: FullscreenDialogDirective, selector: "[fullscreenDialog]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TlbButtonsPipe, name: "tlbButtons" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FormDialogComponent, isStandalone: false, selector: "bsu-form-dialog", providers: [ContainerService], viewQueries: [{ propertyName: "dialogTemplateRef", first: true, predicate: ["dialog"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_dialogForm", first: true, predicate: ["dialogTplRef"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialog>\r\n    <fd-dialog\r\n        [dialogConfig]=\"dialogConfig\"\r\n        [dialogRef]=\"dialog\"\r\n        #dialogTplRef\r\n        class=\"form-dialog\"\r\n        intersectionObserver\r\n        [intersectionThreshold]=\"0.5\"\r\n        (visibilityChange)=\"onBarRightVisibilityChange($event, dialogBody, dialogTplRef)\"\r\n    >\r\n        <fd-dialog-header>\r\n            <ng-template fdkTemplate=\"header\">\r\n                @if(formUi()?.extendToolbarItems$ | async | tlbButtons: 'inFooter':false:true;as toolbarItems){\r\n                <div\r\n                    fd-bar-left\r\n                    #barLeft\r\n                    intersectionObserver\r\n                    [intersectionThreshold]=\"0.5\"\r\n                    (visibilityChange)=\"onHeaderTitleVisibilityChange($event, barLeft)\"\r\n                >\r\n                    <h1 fd-title>\r\n                        {{ title }}\r\n                    </h1>\r\n                </div>\r\n                <div fd-bar-center style=\"flex: 1; display: none\"></div>\r\n                <div fd-bar-right #barRight class=\"bar-right\" [attr.items]=\"toolbarItems.length\">\r\n                    <bsu-form-toolbar\r\n                        fd-bar-right\r\n                        class=\"toolbar-hide-spacer\"\r\n                        [width]=\"'100%'\"\r\n                        [shouldOverflow]=\"true\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [buttons]=\"toolbarItems | filterWorkflowInMobile: showWorkflowButtonsOnFooter\"\r\n                        [dirValue]=\"(formUi()?.dirValue$ | async)!!\"\r\n                        [isFirefox]=\"isFirefox\"\r\n                        (toolbarClick)=\"onToolbarClick($event)\"\r\n                        #formToolbar\r\n                    ></bsu-form-toolbar>\r\n                    @if (dialogConfig.data.canFullscreen) {\r\n                    <fd-button-bar\r\n                        ariaLabel=\"fullscreen\"\r\n                        fullscreenDialog\r\n                        [glyph]=\"(dialog.fullScreen | async) === true ? 'exitfullscreen' : 'resize'\"\r\n                        (click)=\"onFullscreenToggle(dialog, dialogBody, dialogTplRef)\"\r\n                    ></fd-button-bar>\r\n                    }\r\n                    <fd-button-bar\r\n                        ariaLabel=\"close\"\r\n                        glyph=\"decline\"\r\n                        (click)=\"onCancel()\"\r\n                        [style.width]=\"\"\r\n                    ></fd-button-bar>\r\n                </div>\r\n                }\r\n            </ng-template>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body #dialogBody>\r\n            <bnrc-form\r\n                [formPanelCtrl]=\"formPanelCtrlr\"\r\n                [params]=\"params\"\r\n                (formClose)=\"onFormClose()\"\r\n                (uiComponent)=\"onFormUiComponentReady($event)\"\r\n            ></bnrc-form>\r\n        </fd-dialog-body>\r\n        <fd-dialog-footer [style.display]=\"!showFooter ? 'none' : null\">\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div fd-bar-right>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            layoutactions;\r\n                            context: {\r\n                                workflowButtons: (formUi()?.workflowButtons$ | async),\r\n                                extendToolbarItems:\r\n                                    (formUi()?.extendToolbarItems$ | async | tlbButtons: 'inFooter':true)\r\n                            }\r\n                        \"\r\n                    >\r\n                    </ng-container>\r\n                    <ng-template\r\n                        #layoutactions\r\n                        let-workflowButtons=\"workflowButtons\"\r\n                        let-extendToolbarItems=\"extendToolbarItems\"\r\n                    >\r\n                        @if(workflowButtons.length && showWorkflowButtonsOnFooter ){\r\n                        <bsu-layout-actions\r\n                            [canSend]=\"false\"\r\n                            [buttons]=\"[]\"\r\n                            [isMobile]=\"isMobile\"\r\n                            [landscape]=\"(formUi()?.landscape$ | async) === true\"\r\n                            [standalone]=\"(formUi()?.standalone$ | async) === true\"\r\n                            [workflowButtons]=\"workflowButtons\"\r\n                            [workflowButtonsComboMode]=\"true\"\r\n                            [deviceSize]=\"deviceSize\"\r\n                            [rtl]=\"(formUi()?.rtl$ | async) === true\"\r\n                            (toolClick)=\"onToolbarClick($event)\"\r\n                            (workflowChoiceSelect)=\"onWorkflowChoiceClick($event)\"\r\n                        >\r\n                        </bsu-layout-actions>\r\n                        }@if(!hideFooter){ @for (btn of extendToolbarItems ; track btn.Id) { @if (!(btn === '-' ||\r\n                        btn.text === '-') ) {\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                            btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate;\r\n                            context: { $implicit: btn ,}\r\n                        \"\r\n                        ></ng-container>\r\n                        <ng-template #btnTemplate let-btn>\r\n                            <fd-dialog-footer-button>\r\n                                <fd-button-bar\r\n                                    [fdType]=\"\r\n                                        workflowButtons?.length && btn.design === 'emphasized' ? 'ghost' : btn.design\r\n                                    \"\r\n                                    [label]=\"btn.text | bbbTranslate\"\r\n                                    [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n                                    (click)=\"btn.handler(btn, formPanelCtrlr?.Adapter?.Control)\"\r\n                                ></fd-button-bar>\r\n                            </fd-dialog-footer-button>\r\n                        </ng-template>\r\n                        <ng-template #dynamicBtnTemplate let-btn>\r\n                            <fd-dialog-footer-button>\r\n                                <bnrc-dynamic-form-toolbaritem\r\n                                    fd-toolbar-item\r\n                                    [component]=\"btn.Data.CustomUi\"\r\n                                    [context]=\"btn\"\r\n                                    [isEnable]=\"btn.Command?._isEnable\"\r\n                                    (btnClick)=\"btn.handler(btn, formPanelCtrlr?.Adapter?.Control)\"\r\n                                ></bnrc-dynamic-form-toolbaritem>\r\n                            </fd-dialog-footer-button>\r\n                        </ng-template>\r\n                        } } @if (!isNonePersistance && showSaveButton !== false) {\r\n                        <fd-dialog-footer-button>\r\n                            <fd-button-bar\r\n                                fd-initial-focus\r\n                                fd-dialog-decisive-button\r\n                                [label]=\"'Cancel' | bbbTranslate\"\r\n                                (click)=\"onCancel()\"\r\n                            ></fd-button-bar>\r\n                        </fd-dialog-footer-button>\r\n                        } }\r\n                    </ng-template>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto}fd-dialog-body{display:flex;flex-direction:column;height:100%;align-items:stretch;justify-content:stretch}fd-dialog-body>bnrc-form{flex-grow:1;display:flex;flex-direction:row;height:100%;justify-content:stretch;align-items:stretch}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "UlvMainCtrlr", "formPanelCtrlId", "saveOnChange", "inlineEditInReport"], outputs: ["titleChanged", "moChanged", "formClose", "uiComponent", "formRendered", "bruleAction", "beforeTransition", "afterTransition"] }, { kind: "component", type: i2.DynamicFormToolbaritemComponent, selector: "bnrc-dynamic-form-toolbaritem", inputs: ["mo", "index", "deviceName", "deviceSize", "context", "btn", "isEnable", "showText", "allColumns", "conditionalFormats"], outputs: ["btnClick"] }, { kind: "directive", type: i2.IntersectionObserverDirective, selector: "[intersectionObserver]", inputs: ["intersectionDebounce", "intersectionRootMargin", "intersectionRoot", "intersectionThreshold"], outputs: ["visibilityChange"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$3.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i3$3.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i3$3.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i3$3.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i4$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i5.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "component", type: FormToolbarComponent, selector: "bsu-form-toolbar", outputs: ["toolbarClick"] }, { kind: "directive", type: FullscreenDialogDirective, selector: "[fullscreenDialog]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TlbButtonsPipe, name: "tlbButtons" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.FilterWorkflowInMobilePipe, name: "filterWorkflowInMobile" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-form-dialog', providers: [ContainerService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialog>\r\n    <fd-dialog\r\n        [dialogConfig]=\"dialogConfig\"\r\n        [dialogRef]=\"dialog\"\r\n        #dialogTplRef\r\n        class=\"form-dialog\"\r\n        intersectionObserver\r\n        [intersectionThreshold]=\"0.5\"\r\n        (visibilityChange)=\"onBarRightVisibilityChange($event, dialogBody, dialogTplRef)\"\r\n    >\r\n        <fd-dialog-header>\r\n            <ng-template fdkTemplate=\"header\">\r\n                @if(formUi()?.extendToolbarItems$ | async | tlbButtons: 'inFooter':false:true;as toolbarItems){\r\n                <div\r\n                    fd-bar-left\r\n                    #barLeft\r\n                    intersectionObserver\r\n                    [intersectionThreshold]=\"0.5\"\r\n                    (visibilityChange)=\"onHeaderTitleVisibilityChange($event, barLeft)\"\r\n                >\r\n                    <h1 fd-title>\r\n                        {{ title }}\r\n                    </h1>\r\n                </div>\r\n                <div fd-bar-center style=\"flex: 1; display: none\"></div>\r\n                <div fd-bar-right #barRight class=\"bar-right\" [attr.items]=\"toolbarItems.length\">\r\n                    <bsu-form-toolbar\r\n                        fd-bar-right\r\n                        class=\"toolbar-hide-spacer\"\r\n                        [width]=\"'100%'\"\r\n                        [shouldOverflow]=\"true\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [buttons]=\"toolbarItems | filterWorkflowInMobile: workflowButtonsOnFooter\"\r\n                        [dirValue]=\"(formUi()?.dirValue$ | async)!!\"\r\n                        [isFirefox]=\"isFirefox\"\r\n                        (toolbarClick)=\"onToolbarClick($event)\"\r\n                        #formToolbar\r\n                    ></bsu-form-toolbar>\r\n                    @if (dialogConfig.data.canFullscreen) {\r\n                    <fd-button-bar\r\n                        ariaLabel=\"fullscreen\"\r\n                        fullscreenDialog\r\n                        [glyph]=\"(dialog.fullScreen | async) === true ? 'exitfullscreen' : 'resize'\"\r\n                        (click)=\"onFullscreenToggle(dialog, dialogBody, dialogTplRef)\"\r\n                    ></fd-button-bar>\r\n                    }\r\n                    <fd-button-bar\r\n                        ariaLabel=\"close\"\r\n                        glyph=\"decline\"\r\n                        (click)=\"onCancel()\"\r\n                        [style.width]=\"\"\r\n                    ></fd-button-bar>\r\n                </div>\r\n                }\r\n            </ng-template>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body #dialogBody>\r\n            <bnrc-form\r\n                [formPanelCtrl]=\"formPanelCtrlr\"\r\n                [params]=\"params\"\r\n                (formClose)=\"onFormClose()\"\r\n                (uiComponent)=\"onFormUiComponentReady($event)\"\r\n            ></bnrc-form>\r\n        </fd-dialog-body>\r\n        <fd-dialog-footer [style.display]=\"!showFooter && !isWorkflowForm ? 'none' : null\">\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div fd-bar-right>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            layoutactions;\r\n                            context: {\r\n                                workflowButtons: (formUi()?.workflowButtons$ | async),\r\n                                extendToolbarItems:\r\n                                    (formUi()?.extendToolbarItems$ | async | tlbButtons: 'inFooter':true)\r\n                            }\r\n                        \"\r\n                    >\r\n                    </ng-container>\r\n                    <ng-template\r\n                        #layoutactions\r\n                        let-workflowButtons=\"workflowButtons\"\r\n                        let-extendToolbarItems=\"extendToolbarItems\"\r\n                    >\r\n                        @if(workflowButtons.length){\r\n                        <bsu-layout-actions\r\n                            [canSend]=\"false\"\r\n                            [buttons]=\"[]\"\r\n                            [isMobile]=\"isMobile\"\r\n                            [landscape]=\"(formUi()?.landscape$ | async) === true\"\r\n                            [standalone]=\"(formUi()?.standalone$ | async) === true\"\r\n                            [workflowButtons]=\"workflowButtons\"\r\n                            [workflowButtonsComboMode]=\"true\"\r\n                            [deviceSize]=\"deviceSize\"\r\n                            [rtl]=\"(formUi()?.rtl$ | async) === true\"\r\n                            (toolClick)=\"onToolbarClick($event)\"\r\n                            (workflowChoiceSelect)=\"onWorkflowChoiceClick($event)\"\r\n                        >\r\n                        </bsu-layout-actions>\r\n                        } @for (btn of extendToolbarItems ; track btn.Id) { @if (!(btn === '-' || btn.text === '-') ) {\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                            btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate;\r\n                            context: { $implicit: btn ,}\r\n                        \"\r\n                        ></ng-container>\r\n                        <ng-template #btnTemplate let-btn>\r\n                            <fd-dialog-footer-button>\r\n                                <fd-button-bar\r\n                                    [fdType]=\"\r\n                                        workflowButtons?.length && btn.design === 'emphasized' ? 'ghost' : btn.design\r\n                                    \"\r\n                                    [label]=\"btn.text | bbbTranslate\"\r\n                                    [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n                                    (click)=\"btn.handler(btn, formPanelCtrlr?.Adapter?.Control)\"\r\n                                ></fd-button-bar>\r\n                            </fd-dialog-footer-button>\r\n                        </ng-template>\r\n                        <ng-template #dynamicBtnTemplate let-btn>\r\n                            <fd-dialog-footer-button>\r\n                                <bnrc-dynamic-form-toolbaritem\r\n                                    fd-toolbar-item\r\n                                    [component]=\"btn.Data.CustomUi\"\r\n                                    [context]=\"btn\"\r\n                                    [isEnable]=\"btn.Command?._isEnable\"\r\n                                    (btnClick)=\"btn.handler(btn, formPanelCtrlr?.Adapter?.Control)\"\r\n                                ></bnrc-dynamic-form-toolbaritem>\r\n                            </fd-dialog-footer-button>\r\n                        </ng-template>\r\n                        } } @if (!isNonePersistance && showSaveButton !== false) {\r\n                        <fd-dialog-footer-button>\r\n                            <fd-button-bar\r\n                                fd-initial-focus\r\n                                fd-dialog-decisive-button\r\n                                [label]=\"'Cancel' | bbbTranslate\"\r\n                                (click)=\"onCancel()\"\r\n                            ></fd-button-bar>\r\n                        </fd-dialog-footer-button>\r\n                        }\r\n                    </ng-template>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto}fd-dialog-body{display:flex;flex-direction:column;height:100%;align-items:stretch;justify-content:stretch}fd-dialog-body>bnrc-form{flex-grow:1;display:flex;flex-direction:row;height:100%;justify-content:stretch;align-items:stretch}\n"] }]
+            args: [{ selector: 'bsu-form-dialog', providers: [ContainerService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialog>\r\n    <fd-dialog\r\n        [dialogConfig]=\"dialogConfig\"\r\n        [dialogRef]=\"dialog\"\r\n        #dialogTplRef\r\n        class=\"form-dialog\"\r\n        intersectionObserver\r\n        [intersectionThreshold]=\"0.5\"\r\n        (visibilityChange)=\"onBarRightVisibilityChange($event, dialogBody, dialogTplRef)\"\r\n    >\r\n        <fd-dialog-header>\r\n            <ng-template fdkTemplate=\"header\">\r\n                @if(formUi()?.extendToolbarItems$ | async | tlbButtons: 'inFooter':false:true;as toolbarItems){\r\n                <div\r\n                    fd-bar-left\r\n                    #barLeft\r\n                    intersectionObserver\r\n                    [intersectionThreshold]=\"0.5\"\r\n                    (visibilityChange)=\"onHeaderTitleVisibilityChange($event, barLeft)\"\r\n                >\r\n                    <h1 fd-title>\r\n                        {{ title }}\r\n                    </h1>\r\n                </div>\r\n                <div fd-bar-center style=\"flex: 1; display: none\"></div>\r\n                <div fd-bar-right #barRight class=\"bar-right\" [attr.items]=\"toolbarItems.length\">\r\n                    <bsu-form-toolbar\r\n                        fd-bar-right\r\n                        class=\"toolbar-hide-spacer\"\r\n                        [width]=\"'100%'\"\r\n                        [shouldOverflow]=\"true\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [buttons]=\"toolbarItems | filterWorkflowInMobile: showWorkflowButtonsOnFooter\"\r\n                        [dirValue]=\"(formUi()?.dirValue$ | async)!!\"\r\n                        [isFirefox]=\"isFirefox\"\r\n                        (toolbarClick)=\"onToolbarClick($event)\"\r\n                        #formToolbar\r\n                    ></bsu-form-toolbar>\r\n                    @if (dialogConfig.data.canFullscreen) {\r\n                    <fd-button-bar\r\n                        ariaLabel=\"fullscreen\"\r\n                        fullscreenDialog\r\n                        [glyph]=\"(dialog.fullScreen | async) === true ? 'exitfullscreen' : 'resize'\"\r\n                        (click)=\"onFullscreenToggle(dialog, dialogBody, dialogTplRef)\"\r\n                    ></fd-button-bar>\r\n                    }\r\n                    <fd-button-bar\r\n                        ariaLabel=\"close\"\r\n                        glyph=\"decline\"\r\n                        (click)=\"onCancel()\"\r\n                        [style.width]=\"\"\r\n                    ></fd-button-bar>\r\n                </div>\r\n                }\r\n            </ng-template>\r\n        </fd-dialog-header>\r\n\r\n        <fd-dialog-body #dialogBody>\r\n            <bnrc-form\r\n                [formPanelCtrl]=\"formPanelCtrlr\"\r\n                [params]=\"params\"\r\n                (formClose)=\"onFormClose()\"\r\n                (uiComponent)=\"onFormUiComponentReady($event)\"\r\n            ></bnrc-form>\r\n        </fd-dialog-body>\r\n        <fd-dialog-footer [style.display]=\"!showFooter ? 'none' : null\">\r\n            <ng-template fdkTemplate=\"footer\">\r\n                <div fd-bar-right>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            layoutactions;\r\n                            context: {\r\n                                workflowButtons: (formUi()?.workflowButtons$ | async),\r\n                                extendToolbarItems:\r\n                                    (formUi()?.extendToolbarItems$ | async | tlbButtons: 'inFooter':true)\r\n                            }\r\n                        \"\r\n                    >\r\n                    </ng-container>\r\n                    <ng-template\r\n                        #layoutactions\r\n                        let-workflowButtons=\"workflowButtons\"\r\n                        let-extendToolbarItems=\"extendToolbarItems\"\r\n                    >\r\n                        @if(workflowButtons.length && showWorkflowButtonsOnFooter ){\r\n                        <bsu-layout-actions\r\n                            [canSend]=\"false\"\r\n                            [buttons]=\"[]\"\r\n                            [isMobile]=\"isMobile\"\r\n                            [landscape]=\"(formUi()?.landscape$ | async) === true\"\r\n                            [standalone]=\"(formUi()?.standalone$ | async) === true\"\r\n                            [workflowButtons]=\"workflowButtons\"\r\n                            [workflowButtonsComboMode]=\"true\"\r\n                            [deviceSize]=\"deviceSize\"\r\n                            [rtl]=\"(formUi()?.rtl$ | async) === true\"\r\n                            (toolClick)=\"onToolbarClick($event)\"\r\n                            (workflowChoiceSelect)=\"onWorkflowChoiceClick($event)\"\r\n                        >\r\n                        </bsu-layout-actions>\r\n                        }@if(!hideFooter){ @for (btn of extendToolbarItems ; track btn.Id) { @if (!(btn === '-' ||\r\n                        btn.text === '-') ) {\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                            btn.Data?.CustomUi?.Selector ? dynamicBtnTemplate : btnTemplate;\r\n                            context: { $implicit: btn ,}\r\n                        \"\r\n                        ></ng-container>\r\n                        <ng-template #btnTemplate let-btn>\r\n                            <fd-dialog-footer-button>\r\n                                <fd-button-bar\r\n                                    [fdType]=\"\r\n                                        workflowButtons?.length && btn.design === 'emphasized' ? 'ghost' : btn.design\r\n                                    \"\r\n                                    [label]=\"btn.text | bbbTranslate\"\r\n                                    [glyph]=\"btn.newIcon ? btn.newIcon : null\"\r\n                                    (click)=\"btn.handler(btn, formPanelCtrlr?.Adapter?.Control)\"\r\n                                ></fd-button-bar>\r\n                            </fd-dialog-footer-button>\r\n                        </ng-template>\r\n                        <ng-template #dynamicBtnTemplate let-btn>\r\n                            <fd-dialog-footer-button>\r\n                                <bnrc-dynamic-form-toolbaritem\r\n                                    fd-toolbar-item\r\n                                    [component]=\"btn.Data.CustomUi\"\r\n                                    [context]=\"btn\"\r\n                                    [isEnable]=\"btn.Command?._isEnable\"\r\n                                    (btnClick)=\"btn.handler(btn, formPanelCtrlr?.Adapter?.Control)\"\r\n                                ></bnrc-dynamic-form-toolbaritem>\r\n                            </fd-dialog-footer-button>\r\n                        </ng-template>\r\n                        } } @if (!isNonePersistance && showSaveButton !== false) {\r\n                        <fd-dialog-footer-button>\r\n                            <fd-button-bar\r\n                                fd-initial-focus\r\n                                fd-dialog-decisive-button\r\n                                [label]=\"'Cancel' | bbbTranslate\"\r\n                                (click)=\"onCancel()\"\r\n                            ></fd-button-bar>\r\n                        </fd-dialog-footer-button>\r\n                        } }\r\n                    </ng-template>\r\n                </div>\r\n            </ng-template>\r\n        </fd-dialog-footer>\r\n    </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{display:block;height:auto}fd-dialog-body{display:flex;flex-direction:column;height:100%;align-items:stretch;justify-content:stretch}fd-dialog-body>bnrc-form{flex-grow:1;display:flex;flex-direction:row;height:100%;justify-content:stretch;align-items:stretch}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dialogTemplateRef: [{
                 type: ViewChild,
                 args: ['dialog', { read: TemplateRef, static: true }]