barsa-sap-ui 2.1.7 → 2.1.8

package/fesm2022/barsa-sap-ui.mjs

@@ -4783,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(() => {
@@ -4804,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,
@@ -6144,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 + 'px');
-        this._renderer2.setStyle(this._tableRef.nativeElement, 'width', widthOfDom2 + '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) {