barsa-sap-ui 2.3.76 → 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();
-    }
-    refreshResize() {
-        const x = Math.floor(this.el.nativeElement.parentNode.getBoundingClientRect().width);
-        this._setWidthByElementWidth(x);
-        // setTimeout(() => {
-        this._refreshToolbar();
-        // });
+        this.ulvWidth.set(`${this._divTempWidth.nativeElement.offsetWidth}px`);
+        this.visibled.set(true);
+        this._refreshToolbar$.next();
     }
-    _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;
@@ -7272,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();
             }
@@ -8659,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']