barsa-sap-ui 2.1.6 → 2.1.8

package/fesm2022/barsa-sap-ui.mjs

@@ -352,10 +352,10 @@ function GetFormLayoutGrid(ceil, colXl, colLg, colMd) {
 }
 const sort$1 = (a, b, key, isNumber) => {
     if (key) {
-        if (typeof a === 'object') {
+        if (typeof a === 'object' && !(a instanceof Date)) {
             a = getNestedValue(key, a);
         }
-        if (typeof b === 'object') {
+        if (typeof b === 'object' && !(b instanceof Date)) {
             b = getNestedValue(key, b);
         }
     }
@@ -365,6 +365,31 @@ const sort$1 = (a, b, key, isNumber) => {
     else if (typeof a === 'string' && typeof b === 'string') {
         return a.localeCompare(b);
     }
+    else if (a instanceof Date || b instanceof Date) {
+        if (!a && b) {
+            return -1;
+        }
+        if (!b && a) {
+            return 1;
+        }
+        if (a instanceof Date && b instanceof Date) {
+            const msDateA = Date.UTC(a.getFullYear(), a.getMonth() + 1, a.getDate());
+            const msDateB = Date.UTC(b.getFullYear(), b.getMonth() + 1, b.getDate());
+            if (msDateA < msDateB) {
+                return -1;
+            }
+            else if (msDateA === msDateB) {
+                return 0;
+            }
+            else if (msDateA > msDateB) {
+                return 1;
+            }
+            return a.getTime() > b?.getTime() ? 1 : a.getTime() === b.getTime() ? 0 : -1;
+        }
+        else {
+            return 0;
+        }
+    }
     return a > b ? 1 : a === b ? 0 : -1;
 };
 function _trimEnd(value) {
@@ -2509,7 +2534,7 @@ class UlvToolbarComponent extends BaseComponent {
     ngAfterViewInit() {
         super.ngAfterViewInit();
         this._portalService.windowResize$.pipe(takeUntil$1(this._onDestroy$)).subscribe(() => {
-            this._setWidth();
+            this.refreshResize();
         });
     }
     ngOnChanges(changes) {
@@ -2542,7 +2567,10 @@ class UlvToolbarComponent extends BaseComponent {
         if (!this.visibled || this.hideToolbar) {
             return;
         }
-        const x = Math.floor(this.el.nativeElement.getBoundingClientRect().width);
+        this.refreshResize();
+    }
+    refreshResize() {
+        const x = Math.floor(this.el.nativeElement.parentNode.getBoundingClientRect().width);
         this._renderer2.setStyle(this.el.nativeElement, 'width', x + 'px');
         setTimeout(() => {
             this._refreshToolbar();
@@ -4755,12 +4783,19 @@ class ColumnRendererComponent extends BaseComponent {
         this._isSmall = false;
     }
     ngOnInit() {
+        this.signalValue.set(this.value);
         super.ngOnInit();
         this.fieldTypeId = Number(this.column.FieldTypeId);
         if (this.deviceSize === 's') {
             this._isSmall = true;
         }
     }
+    ngOnChanges(changes) {
+        const { value } = changes;
+        if (value && !value.firstChange) {
+            this.signalValue.set(value.currentValue);
+        }
+    }
     ngAfterViewInit() {
         if (this.column.FieldTypeId.toString() === '31') {
             setTimeout(() => {
@@ -4776,7 +4811,7 @@ class ColumnRendererComponent extends BaseComponent {
         this._cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", allColumns: "allColumns", mo: "mo", index: "index", editMode: "editMode", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", disableEllapsis: "disableEllapsis", rtl: "rtl", isMobile: "isMobile", fdTextMode: "fdTextMode", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, ngImport: i0, template: "@if (column) {\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n}\n<ng-template #renderCellTemplate>\n    @switch (column.FieldTypeId) { @case (42) {\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n    } @case (33) {\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n    } @case (31) {\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n    } @case (11) {\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\n    } @case (5) {\n    <ng-container\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n    ></ng-container>\n    } @default {\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n    } }\n</ng-template>\n<ng-template #renderGeneral>\n    <div class=\"renderGeneral\" [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\" [style.width]=\"\">\n        @if (icon) {\n        <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\n        }\n        <!-- <fd-text\n    #fdText\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n    [maxLines]=\"1\"\n    [text]=\"value\"\n    [fd-inline-help]=\"value\"\n    [disabled]=\"!fdText._hasMore\"\n  ></fd-text> -->\n\n        <!-- <bsu-barsa-text-ellipsis\n  [style.width]=\"column.$Width\"\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n  [text]=\"value\"\n></bsu-barsa-text-ellipsis> -->\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\n{{ value }}\n</div> -->\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\n        <div\n            [ellapsisText]=\"value\"\n            [disableEllapsis]=\"editMode\"\n            [class.ellapsis]=\"!disableEllapsis\"\n            [attr.title]=\"value\"\n            (ellapsised)=\"onElapsised($event)\"\n        >\n            {{ value }}\n        </div>\n        } @else{\n        <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\n        } }\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    @if (controlUi) {\n    <bsu-layout-control\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n    }\n</ng-template>\n<ng-template #renderCellListTasavir>\n    @if (mo[column.Name] && mo[column.Name].Images) {\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\n        @for (pic of mo[column.Name].Images; track pic) {\n        <img\n            fullscreen\n            fullscreenFiles\n            [files]=\"mo[column.Name].Images\"\n            [isImageGallery]=\"true\"\n            [deviceSize]=\"deviceSize\"\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\n            style=\"width: 3rem; height: 3rem\"\n        />\n        }\n    </div>\n    }\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    @if (mo[column.Name]) {\n    <div class=\"file-viewer-attachments\">\n        @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\n        <bsu-file-viewer-popover\n            [style.max-width.px]=\"containerDom && containerDom.offsetWidth ? containerDom.offsetWidth : null\"\n            [file]=\"file\"\n            [files]=\"mo[column.Name].Files\"\n            [deviceSize]=\"deviceSize\"\n            [canDownload]=\"true\"\n            [disableRemove]=\"true\"\n            [fdType]=\"'transparent'\"\n        ></bsu-file-viewer-popover>\n        }\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\n        }\n    </div>\n    }\n</ng-template>\n<ng-template #renderCellFileInfo>\n    @if (mo[column.Name]) {\n    <fd-avatar\n        [transparent]=\"true\"\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n    }\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    @if (column.Extra?.TrueImage === '') {\n    {{ value }}\n    } @if (column.Extra?.TrueImage !== '') {\n    <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\n    }\n</ng-template>\n<ng-template #renderCellImage>\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\n    <fd-avatar\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n    }\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}fd-avatar{min-width:100%;width:100%;max-width:64px}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize", "disableEllapsis"], outputs: ["ellapsised"] }, { kind: "component", type: i3$6.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$4.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", allColumns: "allColumns", mo: "mo", index: "index", editMode: "editMode", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", disableEllapsis: "disableEllapsis", rtl: "rtl", isMobile: "isMobile", fdTextMode: "fdTextMode", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (column) {\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n}\n<ng-template #renderCellTemplate>\n    @switch (column.FieldTypeId) { @case (42) {\n    <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n    } @case (33) {\n    <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n    } @case (31) {\n    <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n    } @case (11) {\n    <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\n    } @case (5) {\n    <ng-container\n        *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n    ></ng-container>\n    } @default {\n    <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n    } }\n</ng-template>\n<ng-template #renderGeneral>\n    <div class=\"renderGeneral\" [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\" [style.width]=\"\">\n        @if (icon) {\n        <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\n        }\n        <!-- <fd-text\n    #fdText\n    *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n    [maxLines]=\"1\"\n    [text]=\"value\"\n    [fd-inline-help]=\"value\"\n    [disabled]=\"!fdText._hasMore\"\n  ></fd-text> -->\n\n        <!-- <bsu-barsa-text-ellipsis\n  [style.width]=\"column.$Width\"\n  *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n  [text]=\"value\"\n></bsu-barsa-text-ellipsis> -->\n        <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\n{{ value }}\n</div> -->\n        @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\n        <div\n            [ellapsisText]=\"value\"\n            [disableEllapsis]=\"editMode\"\n            [class.ellapsis]=\"!disableEllapsis\"\n            [attr.title]=\"value\"\n            (ellapsised)=\"onElapsised($event)\"\n        >\n            {{ value }}\n        </div>\n        } @else{\n        <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\n        } }\n    </div>\n</ng-template>\n<ng-template #formControlTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n                ? renderCellTemplate\n                : layoutControlTemplate\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n    @if (controlUi) {\n    <bsu-layout-control\n        [inlineEdit]=\"true\"\n        [caption]=\"column.Caption\"\n        [config]=\"controlUi\"\n        [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n        [showLabel]=\"formLayoutShowLabel\"\n    ></bsu-layout-control>\n    }\n</ng-template>\n<ng-template #renderCellListTasavir>\n    @if (mo[column.Name] && mo[column.Name].Images) {\n    <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\n        @for (pic of mo[column.Name].Images; track pic) {\n        <img\n            fullscreen\n            fullscreenFiles\n            [files]=\"mo[column.Name].Images\"\n            [isImageGallery]=\"true\"\n            [deviceSize]=\"deviceSize\"\n            [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\n            style=\"width: 3rem; height: 3rem\"\n        />\n        }\n    </div>\n    }\n</ng-template>\n<ng-template #renderCellFileListKhati>\n    @if (mo[column.Name]) {\n    <div class=\"file-viewer-attachments\">\n        @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\n        <bsu-file-viewer-popover\n            [style.max-width.px]=\"containerDom && containerDom.offsetWidth ? containerDom.offsetWidth : null\"\n            [file]=\"file\"\n            [files]=\"mo[column.Name].Files\"\n            [deviceSize]=\"deviceSize\"\n            [canDownload]=\"true\"\n            [disableRemove]=\"true\"\n            [fdType]=\"'transparent'\"\n        ></bsu-file-viewer-popover>\n        }\n        <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\n        }\n    </div>\n    }\n</ng-template>\n<ng-template #renderCellFileInfo>\n    @if (mo[column.Name]) {\n    <fd-avatar\n        [transparent]=\"true\"\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n    ></fd-avatar>\n    }\n</ng-template>\n<ng-template #renderCellChecbox>\n    <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n    @if (column.Extra?.TrueImage === '') {\n    {{ value }}\n    } @if (column.Extra?.TrueImage !== '') {\n    <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\n    }\n</ng-template>\n<ng-template #renderCellImage>\n    @if (mo[column.Name] && mo[column.Name]['Url']) {\n    <fd-avatar\n        [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n        [transparent]=\"true\"\n        [image]=\"mo[column.Name]['Url']\"\n    ></fd-avatar>\n    }\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}fd-avatar{min-width:100%;width:100%;max-width:64px}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize", "disableEllapsis"], outputs: ["ellapsised"] }, { kind: "component", type: i3$6.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$4.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnRendererComponent, decorators: [{
             type: Component,
@@ -5964,10 +5999,6 @@ class UiTableViewComponent extends ReportViewBaseComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        const x = Math.floor(this._el.nativeElement.parentNode.getBoundingClientRect().width);
-        if (x) {
-            this._renderer2.setStyle(this._el.nativeElement, 'width', `${x - 10}px`);
-        }
         this._portalService.windowResize$.pipe(takeUntil$1(this._onDestroy$)).subscribe(() => {
             const x = Math.floor(this._el.nativeElement.parentNode.getBoundingClientRect().width);
             this._renderer2.setStyle(this._tableRef.nativeElement, 'width', x + 'px');
@@ -5985,12 +6016,11 @@ class UiTableViewComponent extends ReportViewBaseComponent {
             : TableHeaderWidthMode.FitToContainer;
         this._calcContextMenuWidth(this.contextMenuItems);
     }
-    _calcContextMenuWidth(contextMenuItems) {
-        this.contextMenuWidth = calcContextMenuWidth(contextMenuItems, this.disableOverflowContextMenu);
-    }
-    onTableVisibilityChange(e, dom) {
-        if (e === 'Visible') {
-            this._setWidth(true);
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        const x = Math.floor(this._el.nativeElement.parentNode.getBoundingClientRect().width);
+        if (x) {
+            this._renderer2.setStyle(this._el.nativeElement, 'width', `${x}px`);
         }
     }
     ngOnChanges(changes) {
@@ -6010,6 +6040,14 @@ class UiTableViewComponent extends ReportViewBaseComponent {
         }
         super.ngOnChanges(changes);
     }
+    _calcContextMenuWidth(contextMenuItems) {
+        this.contextMenuWidth = calcContextMenuWidth(contextMenuItems, this.disableOverflowContextMenu);
+    }
+    onTableVisibilityChange(e, dom) {
+        if (e === 'Visible') {
+            setTimeout(() => this._setWidth(true), 100);
+        }
+    }
     onColumnResizing(e) {
         this._tableHeaderComponent.SetColumnWidthToThWidth();
         this._setParentWidth();
@@ -6113,9 +6151,13 @@ class UiTableViewComponent extends ReportViewBaseComponent {
             this._refreshThWidth();
         }
         this.oldWidth = widthOfDom;
-        const widthOfDom2 = Math.floor(this._el.nativeElement.parentNode.getBoundingClientRect().width);
-        this._renderer2.setStyle(this._tableRef.nativeElement, 'max-width', widthOfDom2 - 10 + 'px');
-        this._renderer2.setStyle(this._tableRef.nativeElement, 'width', widthOfDom2 - 10 + 'px');
+        const parentWidth = Math.floor(this._el.nativeElement.parentNode.getBoundingClientRect().width);
+        const elWidth = Math.floor(this._el.nativeElement.getBoundingClientRect().width);
+        if (parentWidth !== elWidth) {
+            this._renderer2.setStyle(this._el.nativeElement, 'width', parentWidth + 'px');
+        }
+        this._renderer2.setStyle(this._tableRef.nativeElement, 'max-width', parentWidth + 'px');
+        this._renderer2.setStyle(this._tableRef.nativeElement, 'width', parentWidth + 'px');
     }
     _calculateHeaderStickyTop(dom) {
         if (this.stickyEnable() && this.tableHeaderDom) {
@@ -9954,11 +9996,11 @@ class LyTabContainerComponent extends LayoutItemBaseComponent {
         this._tabsSource.next(visibleTabs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LyTabContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LyTabContainerComponent, selector: "bsu-ly-tab-container", host: { properties: { "style.flex": "this.flex" } }, viewQueries: [{ propertyName: "tabpages", predicate: TabPanelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fdp-icon-tab-bar [collapseOverflow]=\"true\" [expandOverflowText]=\"'More' | bbbTranslate\">\n    @for (tabPage of tabs$ | async; track tabPage; let tabindex = $index) {\n    <fdp-icon-tab-bar-tab\n        [label]=\"tabPage.Title || '' | bbbTranslate\"\n        [title]=\"tabPage.Title || '' | bbbTranslate\"\n        [disabled]=\"tabPage.disabled\"\n        [class.control-disabled]=\"tabPage.Enable === false\"\n        [class.readonly]=\"tabPage.Readonly\"\n    >\n        <bsu-ly-tab-page [config]=\"tabPage\"></bsu-ly-tab-page>\n    </fdp-icon-tab-bar-tab>\n    }\n</fdp-icon-tab-bar>\n", styles: [":host{width:100%;display:block}\n"], dependencies: [{ kind: "component", type: i18.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i18.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LyTabContainerComponent, selector: "bsu-ly-tab-container", host: { properties: { "style.flex": "this.flex" } }, viewQueries: [{ propertyName: "tabpages", predicate: TabPanelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fdp-icon-tab-bar [collapseOverflow]=\"true\" [expandOverflowText]=\"'More' | bbbTranslate\">\n    @for (tabPage of tabs$ | async; track tabPage; let tabindex = $index) {\n    <fdp-icon-tab-bar-tab\n        [label]=\"tabPage.Title || '' | bbbTranslate\"\n        [title]=\"tabPage.Title || '' | bbbTranslate\"\n        [disabled]=\"tabPage.disabled\"\n        [class.control-disabled]=\"tabPage.Enable === false\"\n        [class.readonly]=\"tabPage.Readonly\"\n    >\n        <bsu-ly-tab-page [config]=\"tabPage\"></bsu-ly-tab-page>\n    </fdp-icon-tab-bar-tab>\n    }\n</fdp-icon-tab-bar>\n", styles: [":host{width:100%;display:block}fdp-icon-tab-bar ::ng-deep>div{border:.0625rem solid var(--sapGroup_TitleBorderColor)}\n"], dependencies: [{ kind: "component", type: i18.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i18.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "component", type: LyTabPageComponent, selector: "bsu-ly-tab-page", inputs: ["renderItems", "tablist"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LyTabContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ly-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fdp-icon-tab-bar [collapseOverflow]=\"true\" [expandOverflowText]=\"'More' | bbbTranslate\">\n    @for (tabPage of tabs$ | async; track tabPage; let tabindex = $index) {\n    <fdp-icon-tab-bar-tab\n        [label]=\"tabPage.Title || '' | bbbTranslate\"\n        [title]=\"tabPage.Title || '' | bbbTranslate\"\n        [disabled]=\"tabPage.disabled\"\n        [class.control-disabled]=\"tabPage.Enable === false\"\n        [class.readonly]=\"tabPage.Readonly\"\n    >\n        <bsu-ly-tab-page [config]=\"tabPage\"></bsu-ly-tab-page>\n    </fdp-icon-tab-bar-tab>\n    }\n</fdp-icon-tab-bar>\n", styles: [":host{width:100%;display:block}\n"] }]
+            args: [{ selector: 'bsu-ly-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fdp-icon-tab-bar [collapseOverflow]=\"true\" [expandOverflowText]=\"'More' | bbbTranslate\">\n    @for (tabPage of tabs$ | async; track tabPage; let tabindex = $index) {\n    <fdp-icon-tab-bar-tab\n        [label]=\"tabPage.Title || '' | bbbTranslate\"\n        [title]=\"tabPage.Title || '' | bbbTranslate\"\n        [disabled]=\"tabPage.disabled\"\n        [class.control-disabled]=\"tabPage.Enable === false\"\n        [class.readonly]=\"tabPage.Readonly\"\n    >\n        <bsu-ly-tab-page [config]=\"tabPage\"></bsu-ly-tab-page>\n    </fdp-icon-tab-bar-tab>\n    }\n</fdp-icon-tab-bar>\n", styles: [":host{width:100%;display:block}fdp-icon-tab-bar ::ng-deep>div{border:.0625rem solid var(--sapGroup_TitleBorderColor)}\n"] }]
         }], propDecorators: { tabpages: [{
                 type: ViewChildren,
                 args: [TabPanelComponent]