barsa-sap-ui 1.0.347 → 1.0.349

package/fesm2015/barsa-sap-ui.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input, ElementRef, ViewChild, HostBinding, EventEmitter, Output, ViewEncapsulation, ViewChildren, Inject, Optional, Self, TemplateRef, HostListener, Pipe, Directive, ViewContainerRef, SkipSelf, NgModule, Injectable, APP_INITIALIZER, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from 'barsa-novin-ray-core';
-import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, LayoutService, BaseUlvSettingComponent, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, GetAllColumnsSorted, measureText, getParentHeight, getControlSizeMode, getGridSettings, FieldBaseComponent, DateService, getDateService as getDateService$1, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, EllipsifyDirective, createGridEditorFormPanel, FormPanelService, BaseViewItemPropsComponent, isImage, getIcon, LayoutPanelBaseComponent, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, BaseColumnPropsComponent, ColumnService, DateRanges, LogService, UlvMainService, isFunction, FilesValidationHelper, getValidExtension, getImagePath, UploadService, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, PageWithFormHandlerBaseComponent, getHeaderValue, getFieldValue, ContainerComponent, FORM_DIALOG_COMPONENT, ContainerService, FormPropsBaseComponent, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, executeUlvCommandHandler, getDeviceIsPhone, getDeviceIsTablet, PortalService, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, BarsaNovinRayCoreModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
+import { BaseComponent, ReportViewBaseComponent, getUniqueId, BarsaApi, LayoutItemBaseComponent, getDeviceIsMobile, LayoutService, BaseUlvSettingComponent, FormComponent, createFormPanelMetaConditions, ReportBaseComponent, GetAllColumnsSorted, measureText, getParentHeight, getControlSizeMode, getGridSettings, FieldBaseComponent, DateService, getDateService as getDateService$1, DateMiladiService, DateHijriService, DateShamsiService, BaseDirective, EllipsifyDirective, createGridEditorFormPanel, FormPanelService, BaseViewItemPropsComponent, isImage, getIcon, LayoutPanelBaseComponent, BaseViewContentPropsComponent, enumValueToStringSize, PreventDefaulEvent, BaseColumnPropsComponent, ColumnService, DateRanges, LogService, UlvMainService, isFunction, UploadService, FilesValidationHelper, getValidExtension, getImagePath, LinearListHelper, FormToolbarBaseComponent, isFirefox, FormBaseComponent, PageWithFormHandlerBaseComponent, getHeaderValue, getFieldValue, ContainerComponent, FORM_DIALOG_COMPONENT, ContainerService, FormPropsBaseComponent, NumberBaseComponent, ImageMimeType, BaseFormToolbaritemPropsComponent, executeUlvCommandHandler, getDeviceIsPhone, getDeviceIsTablet, PortalService, NOTIFICATAION_POPUP_SERVER, TOAST_SERVICE, BaseModule, BarsaNovinRayCoreModule, DIALOG_SERVICE } from 'barsa-novin-ray-core';
 import moment from 'moment';
 import jmoment from 'moment-jalaali';
-import { merge, of, BehaviorSubject, Subject, combineLatest, takeUntil as takeUntil$1, fromEvent, filter as filter$1 } from 'rxjs';
-import { tap, filter, map, debounceTime, distinctUntilChanged, withLatestFrom, takeUntil, exhaustMap, finalize, switchMap, delay, concatMap, catchError } from 'rxjs/operators';
+import { merge, of, BehaviorSubject, Subject, combineLatest, takeUntil as takeUntil$1, concatMap, tap as tap$1, fromEvent, filter as filter$1 } from 'rxjs';
+import { tap, filter, map, debounceTime, distinctUntilChanged, withLatestFrom, takeUntil, exhaustMap, finalize, switchMap, delay, concatMap as concatMap$1, catchError } from 'rxjs/operators';
 import * as i1$1 from '@fundamental-ngx/core';
 import { TableComponent, ToolbarComponent, RadioButtonComponent, DynamicPageComponent, FileUploaderComponent, MultiInputComponent, TabPanelComponent, WizardComponent, WizardStepComponent, ComboboxComponent, InlineHelpDirective, ContentDensityMode, GlobalContentDensityService, ThemesService, NotificationRef, RtlService, MessageToastService, FundamentalNgxCoreModule, FacetModule, WizardModule, PipeModule, DialogService, ContentDensityModule } from '@fundamental-ngx/core';
 import { SortDirection, TableDataProvider, SelectionMode, FundamentalNgxPlatformModule, PlatformDynamicPageModule, PlatformTextAreaModule, PlatformSearchFieldModule } from '@fundamental-ngx/platform';
@@ -345,7 +345,9 @@ class LayoutControlComponent extends LayoutItemBaseComponent {
         /* eslint-disable */
         this.SetVisible = (visible, refresh) => {
             this._ngZone.run(() => {
+                this.config.FieldUi.Setting.IsVisible = visible;
                 this._setHide(!visible);
+                // this.config.FieldUi.Setting.$BRuleHide = !visible;
                 this._cdr.detectChanges();
             });
         };
@@ -6591,8 +6593,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
         }] });
 
 class BarsaTinyemceComponent extends BaseComponent {
-    constructor(_el) {
+    constructor(_uploadService, _el) {
         super();
+        this._uploadService = _uploadService;
         this._el = _el;
         this.valueChange = new EventEmitter();
         this.tinyInit = new EventEmitter();
@@ -6629,6 +6632,9 @@ class BarsaTinyemceComponent extends BaseComponent {
         super.ngOnDestroy();
         this.destroyTinymce();
     }
+    onFileSelection(files) {
+        this.uploadFile(files).pipe(takeUntil$1(this._onDestroy$)).subscribe();
+    }
     loadTinyMce() {
         if (!this.Setting.IsHtmlViewer) {
             head.load(['Lib/tinymce/tinymce.min.js'], () => {
@@ -6821,7 +6827,9 @@ class BarsaTinyemceComponent extends BaseComponent {
             }
         };
     }
-    ShowUploadWindow() { }
+    ShowUploadWindow() {
+        this._uploader.open();
+    }
     ShowOpenFileDialog(doReturn) {
         const input = document.createElement('input');
         input.setAttribute('type', 'file');
@@ -6910,6 +6918,24 @@ class BarsaTinyemceComponent extends BaseComponent {
             ed.destroy(false);
         }
     }
+    uploadFile(files) {
+        return this._uploadService.compressFiles$(files).pipe(concatMap((formData) => this._uploadService.upload(formData, this.Setting.StorageFileFieldId).pipe(tap$1((res) => {
+            if (Array.isArray(res)) {
+                const picture = res[0];
+                if (picture.ErrorMsg) {
+                    BarsaApi.Bw.Msg.Error(picture.ErrorMsg);
+                    return;
+                }
+                const value = Object.assign(Object.assign({}, picture), { FileId: picture.FileId });
+                this._addImages(value);
+            }
+        }))));
+    }
+    _addImages(file) {
+        const url = '/IH.ashx?ty=StorageFile&key=' + file.FileId;
+        const html = '<img src=' + url + ' />';
+        this.editor.execCommand('mceInsertContent', false, html);
+    }
     prepare() {
         this.initilize();
         tinymce.init(this.tinyMCEConfig);
@@ -6931,12 +6957,15 @@ class BarsaTinyemceComponent extends BaseComponent {
         }
     }
 }
-BarsaTinyemceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTinyemceComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BarsaTinyemceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTinyemceComponent, selector: "bsu-barsa-tinyemce", inputs: { Setting: "Setting", isReadonly: "isReadonly", value: "value", defaultVerbs: "defaultVerbs" }, outputs: { valueChange: "valueChange", tinyInit: "tinyInit" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-input tinywrapper\" [style.min-height.px]=\"height\" [id]=\"tinyHostId\"></div>\r\n\r\n<!-- <textarea [id]=\"tinyHostId\" style=\"height: 100%; visibility: hidden\"></textarea> -->\r\n", styles: [":host{display:block;width:100%;height:100%}.tinywrapper{overflow:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaTinyemceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTinyemceComponent, deps: [{ token: i2.UploadService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BarsaTinyemceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaTinyemceComponent, selector: "bsu-barsa-tinyemce", inputs: { Setting: "Setting", isReadonly: "isReadonly", value: "value", defaultVerbs: "defaultVerbs" }, outputs: { valueChange: "valueChange", tinyInit: "tinyInit" }, providers: [UploadService], viewQueries: [{ propertyName: "_uploader", first: true, predicate: ["uploader"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-input tinywrapper\" [style.min-height.px]=\"height\" [id]=\"tinyHostId\"></div>\n<fd-file-uploader\n    #uploader\n    [style.display]=\"'none'\"\n    [accept]=\"''\"\n    [multiple]=\"false\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n<!-- <textarea [id]=\"tinyHostId\" style=\"height: 100%; visibility: hidden\"></textarea> -->\n", styles: [":host{display:block;width:100%;height:100%}.tinywrapper{overflow:auto}\n"], dependencies: [{ kind: "component", type: i6$4.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaTinyemceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-tinyemce', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fd-input tinywrapper\" [style.min-height.px]=\"height\" [id]=\"tinyHostId\"></div>\r\n\r\n<!-- <textarea [id]=\"tinyHostId\" style=\"height: 100%; visibility: hidden\"></textarea> -->\r\n", styles: [":host{display:block;width:100%;height:100%}.tinywrapper{overflow:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { Setting: [{
+            args: [{ selector: 'bsu-barsa-tinyemce', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UploadService], template: "<div class=\"fd-input tinywrapper\" [style.min-height.px]=\"height\" [id]=\"tinyHostId\"></div>\n<fd-file-uploader\n    #uploader\n    [style.display]=\"'none'\"\n    [accept]=\"''\"\n    [multiple]=\"false\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n<!-- <textarea [id]=\"tinyHostId\" style=\"height: 100%; visibility: hidden\"></textarea> -->\n", styles: [":host{display:block;width:100%;height:100%}.tinywrapper{overflow:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.UploadService }, { type: i0.ElementRef }]; }, propDecorators: { _uploader: [{
+                type: ViewChild,
+                args: ['uploader']
+            }], Setting: [{
                 type: Input
             }], isReadonly: [{
                 type: Input
@@ -9109,7 +9138,7 @@ class UiPicturesInfoComponent extends DeviceInfoFieldBaseComponent {
         this.mediaDataSource.next(data);
     }
     uploadToServer(files) {
-        return this._uploadService.compressFiles$(files).pipe(concatMap((formData) => this._uploadService.upload(formData, this.Setting.ControlFieldDefId).pipe(tap((res) => {
+        return this._uploadService.compressFiles$(files).pipe(concatMap$1((formData) => this._uploadService.upload(formData, this.Setting.ControlFieldDefId).pipe(tap((res) => {
             if (Array.isArray(res)) {
                 this.updateValue(res);
             }
@@ -10982,7 +11011,7 @@ class UiPictureFileComponent extends FieldBaseComponent {
             .subscribe();
     }
     uploadFile(files) {
-        return this._uploadService.compressFiles$(files).pipe(concatMap((formData) => this._uploadService.upload(formData, this.Setting.ControlFieldDefId).pipe(tap((res) => {
+        return this._uploadService.compressFiles$(files).pipe(concatMap$1((formData) => this._uploadService.upload(formData, this.Setting.ControlFieldDefId).pipe(tap((res) => {
             if (Array.isArray(res)) {
                 const picture = res[0];
                 if (picture.ErrorMsg) {
@@ -11835,7 +11864,7 @@ BarsaPishnamayeshPayamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             useFactory: getDateService$1,
             deps: [LogService]
         }
-    ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            showPayamClass;\n            context: {\n                $implicit: data,\n                primary: !data?.$details?.length,\n                isFirst: true\n            }\n        \"\n    >\n    </ng-container>\n</ng-container>\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            namayeshPayam;\n            context: {\n                $implicit: data.payam.Subject,\n                fromText: data.payam.FromText,\n                toText: data.$toText,\n                importance: data.$importance,\n                readDate: data.$readDate,\n                sendDate: data.$sendDate,\n                ccText: data.$ccText,\n                bccText: data.$bccText,\n                accessLevel: data.$accessLevel,\n                content: data.$content,\n                fromPhoto: data.$fromPhoto,\n                details: data.$details,\n                attachments: data.$attachments,\n                todo: data.$todo,\n                customText: data.payam.CustomText,\n                primary: primary,\n                isFirst: isFirst\n            }\n        \"\n    >\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #namayeshPayam\n    let-subject\n    let-content=\"content\"\n    let-fromText=\"fromText\"\n    let-toText=\"toText\"\n    let-importance=\"importance\"\n    let-readDate=\"readDate\"\n    let-sendDate=\"sendDate\"\n    let-ccText=\"ccText\"\n    let-bccText=\"bccText\"\n    let-fromPhoto=\"fromPhoto\"\n    let-details=\"details\"\n    let-accessLevel=\"accessLevel\"\n    let-primary=\"primary\"\n    let-isFirst=\"isFirst\"\n    let-attachments=\"attachments\"\n    let-todo=\"todo\"\n    let-customText=\"customText\"\n>\n    <fd-card cardType=\"object\">\n        <fd-card-header>\n            <fd-avatar\n                [image]=\"fromPhoto\"\n                [circle]=\"true\"\n                size=\"s\"\n                [ariaLabel]=\"fromText\"\n                [label]=\"fromText\"\n                [title]=\"fromText\"\n            ></fd-avatar>\n            <div fd-card-title class=\"header-fields\">\n                <h5 fd-title>\n                    <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\n                </h5>\n                <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\n            </div>\n            <div fd-card-subtitle>\n                <h5 fd-title>{{ subject }}</h5>\n                <fd-popover>\n                    <fd-popover-control>\n                        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">{{ 'Recievers' | bbbTranslate }}</button>\n                    </fd-popover-control>\n                    <fd-popover-body>\n                        <ul fd-list>\n                            <li fd-list-item *ngFor=\"let rec of toText\">\n                                <a fd-list-link>{{ rec }}</a>\n                            </li>\n                        </ul>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </fd-card-header>\n        <fd-card-content>\n            <fd-panel [expanded]=\"isFirst\">\n                <div fd-panel-title id=\"panel-expandable-title-1\">\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\n                    <div class=\"payamIcons\">\n                        <fd-popover *ngIf=\"importance.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ importance.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-popover *ngIf=\"accessLevel.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-info-label\n                            *ngIf=\"todo\"\n                            [label]=\"todo.text\"\n                            [color]=\"todo.color\"\n                            [title]=\"todo.text\"\n                        ></fd-info-label>\n                    </div>\n                </div>\n                <div fd-panel-content>\n                    <div *ngIf=\"customText\">\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\n                            {{ customText }}\n                        </fd-message-strip>\n                    </div>\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\n\n                    <div *ngIf=\"attachments?.length\" class=\"file-viewer-attachments\">\n                        <ng-container *ngFor=\"let file of attachments\">\n                            <bsu-file-viewer-popover\n                                *ngIf=\"!file.IsDeleted\"\n                                [file]=\"file\"\n                                [files]=\"attachments\"\n                                [deviceSize]=\"(deviceSize$ | async)!!\"\n                                [canDownload]=\"true\"\n                                [disableRemove]=\"true\"\n                            ></bsu-file-viewer-popover>\n                        </ng-container>\n                        <ng-container *ngIf=\"attachments.length > 1\">\n                            <button\n                                fd-button\n                                [title]=\"'Download' | bbbTranslate\"\n                                [glyph]=\"'download'\"\n                                downloadFiles\n                                [files]=\"attachments\"\n                            ></button>\n                        </ng-container>\n                    </div>\n                    <div class=\"readAt\">\n                        <fd-object-identifier\n                            *ngIf=\"readDate\"\n                            [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\"\n                        >\n                        </fd-object-identifier>\n                    </div>\n                </div>\n            </fd-panel>\n        </fd-card-content>\n        <!-- <fd-card-footer>\n                <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\n            </fd-card-footer> -->\n    </fd-card>\n    <ng-contianer *ngFor=\"let detail of details\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                showPayamClass;\n                context: {\n                    $implicit: detail\n                }\n            \"\n        >\n        </ng-container>\n    </ng-contianer>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media (max-width: 410px){h5{max-width:210px}}@media (max-width: 1040px){.h5{max-width:600px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$6.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "directive", type: i5$1.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i6$5.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i7$8.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["description", "bold", "medium"] }, { kind: "component", type: i3$9.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$9.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$9.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType"], outputs: ["remove"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            showPayamClass;\n            context: {\n                $implicit: data,\n                primary: !data?.$details?.length,\n                isFirst: true\n            }\n        \"\n    >\n    </ng-container>\n</ng-container>\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            namayeshPayam;\n            context: {\n                $implicit: data.payam.Subject,\n                fromText: data.payam.FromText,\n                toText: data.$toText,\n                importance: data.$importance,\n                readDate: data.$readDate,\n                sendDate: data.$sendDate,\n                ccText: data.$ccText,\n                bccText: data.$bccText,\n                accessLevel: data.$accessLevel,\n                content: data.$content,\n                fromPhoto: data.$fromPhoto,\n                details: data.$details,\n                attachments: data.$attachments,\n                todo: data.$todo,\n                customText: data.payam.CustomText,\n                primary: primary,\n                isFirst: isFirst\n            }\n        \"\n    >\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #namayeshPayam\n    let-subject\n    let-content=\"content\"\n    let-fromText=\"fromText\"\n    let-toText=\"toText\"\n    let-importance=\"importance\"\n    let-readDate=\"readDate\"\n    let-sendDate=\"sendDate\"\n    let-ccText=\"ccText\"\n    let-bccText=\"bccText\"\n    let-fromPhoto=\"fromPhoto\"\n    let-details=\"details\"\n    let-accessLevel=\"accessLevel\"\n    let-primary=\"primary\"\n    let-isFirst=\"isFirst\"\n    let-attachments=\"attachments\"\n    let-todo=\"todo\"\n    let-customText=\"customText\"\n>\n    <fd-card cardType=\"object\">\n        <fd-card-header>\n            <fd-avatar\n                [image]=\"fromPhoto\"\n                [circle]=\"true\"\n                size=\"s\"\n                [ariaLabel]=\"fromText\"\n                [label]=\"fromText\"\n                [title]=\"fromText\"\n            ></fd-avatar>\n            <div fd-card-title class=\"header-fields\">\n                <h5 fd-title>\n                    <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\n                </h5>\n                <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\n            </div>\n            <div fd-card-subtitle>\n                <h5 fd-title>{{ subject }}</h5>\n                <fd-popover>\n                    <fd-popover-control>\n                        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">{{ 'Recievers' | bbbTranslate }}</button>\n                    </fd-popover-control>\n                    <fd-popover-body>\n                        <ul fd-list>\n                            <li fd-list-item *ngFor=\"let rec of toText\">\n                                <a fd-list-link>{{ rec }}</a>\n                            </li>\n                        </ul>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </fd-card-header>\n        <fd-card-content>\n            <fd-panel [expanded]=\"isFirst\">\n                <div fd-panel-title id=\"panel-expandable-title-1\">\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\n                    <div class=\"payamIcons\">\n                        <fd-popover *ngIf=\"importance.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ importance.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-popover *ngIf=\"accessLevel.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-info-label\n                            *ngIf=\"todo\"\n                            [label]=\"todo.text\"\n                            [color]=\"todo.color\"\n                            [title]=\"todo.text\"\n                        ></fd-info-label>\n                    </div>\n                </div>\n                <div fd-panel-content>\n                    <div *ngIf=\"customText\">\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\n                            {{ customText }}\n                        </fd-message-strip>\n                    </div>\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\n\n                    <div *ngIf=\"attachments?.length\" class=\"file-viewer-attachments\">\n                        <ng-container *ngFor=\"let file of attachments\">\n                            <bsu-file-viewer-popover\n                                *ngIf=\"!file.IsDeleted\"\n                                [file]=\"file\"\n                                [files]=\"attachments\"\n                                [deviceSize]=\"(deviceSize$ | async)!!\"\n                                [canDownload]=\"true\"\n                                [disableRemove]=\"true\"\n                            ></bsu-file-viewer-popover>\n                        </ng-container>\n                        <ng-container *ngIf=\"attachments.length > 1\">\n                            <button\n                                fd-button\n                                [title]=\"'Download' | bbbTranslate\"\n                                [glyph]=\"'download'\"\n                                downloadFiles\n                                [files]=\"attachments\"\n                            ></button>\n                        </ng-container>\n                    </div>\n                    <div class=\"readAt\">\n                        <fd-object-identifier\n                            *ngIf=\"readDate\"\n                            [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\"\n                        >\n                        </fd-object-identifier>\n                    </div>\n                </div>\n            </fd-panel>\n        </fd-card-content>\n        <!-- <fd-card-footer>\n                <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\n            </fd-card-footer> -->\n    </fd-card>\n    <ng-contianer *ngFor=\"let detail of details\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                showPayamClass;\n                context: {\n                    $implicit: detail\n                }\n            \"\n        >\n        </ng-container>\n    </ng-contianer>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start;height:auto;max-height:initial}:host ::ng-deep .fd-card__subtitle h5{white-space:initial!important}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media (max-width: 410px){h5{max-width:210px}}@media (max-width: 1040px){.h5{max-width:600px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$6.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i5$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i5$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "directive", type: i5$1.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i6$5.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i7$8.ObjectIdentifierComponent, selector: "fd-object-identifier", inputs: ["description", "bold", "medium"] }, { kind: "component", type: i3$9.PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i3$9.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "directive", type: i3$9.PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType"], outputs: ["remove"] }, { kind: "directive", type: DownloadFilesDirective, selector: "[downloadFiles]", inputs: ["files"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaPishnamayeshPayamComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-barsa-pishnamayesh-payam', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -11844,7 +11873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                             useFactory: getDateService$1,
                             deps: [LogService]
                         }
-                    ], template: "<ng-container *ngIf=\"data\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            showPayamClass;\n            context: {\n                $implicit: data,\n                primary: !data?.$details?.length,\n                isFirst: true\n            }\n        \"\n    >\n    </ng-container>\n</ng-container>\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            namayeshPayam;\n            context: {\n                $implicit: data.payam.Subject,\n                fromText: data.payam.FromText,\n                toText: data.$toText,\n                importance: data.$importance,\n                readDate: data.$readDate,\n                sendDate: data.$sendDate,\n                ccText: data.$ccText,\n                bccText: data.$bccText,\n                accessLevel: data.$accessLevel,\n                content: data.$content,\n                fromPhoto: data.$fromPhoto,\n                details: data.$details,\n                attachments: data.$attachments,\n                todo: data.$todo,\n                customText: data.payam.CustomText,\n                primary: primary,\n                isFirst: isFirst\n            }\n        \"\n    >\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #namayeshPayam\n    let-subject\n    let-content=\"content\"\n    let-fromText=\"fromText\"\n    let-toText=\"toText\"\n    let-importance=\"importance\"\n    let-readDate=\"readDate\"\n    let-sendDate=\"sendDate\"\n    let-ccText=\"ccText\"\n    let-bccText=\"bccText\"\n    let-fromPhoto=\"fromPhoto\"\n    let-details=\"details\"\n    let-accessLevel=\"accessLevel\"\n    let-primary=\"primary\"\n    let-isFirst=\"isFirst\"\n    let-attachments=\"attachments\"\n    let-todo=\"todo\"\n    let-customText=\"customText\"\n>\n    <fd-card cardType=\"object\">\n        <fd-card-header>\n            <fd-avatar\n                [image]=\"fromPhoto\"\n                [circle]=\"true\"\n                size=\"s\"\n                [ariaLabel]=\"fromText\"\n                [label]=\"fromText\"\n                [title]=\"fromText\"\n            ></fd-avatar>\n            <div fd-card-title class=\"header-fields\">\n                <h5 fd-title>\n                    <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\n                </h5>\n                <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\n            </div>\n            <div fd-card-subtitle>\n                <h5 fd-title>{{ subject }}</h5>\n                <fd-popover>\n                    <fd-popover-control>\n                        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">{{ 'Recievers' | bbbTranslate }}</button>\n                    </fd-popover-control>\n                    <fd-popover-body>\n                        <ul fd-list>\n                            <li fd-list-item *ngFor=\"let rec of toText\">\n                                <a fd-list-link>{{ rec }}</a>\n                            </li>\n                        </ul>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </fd-card-header>\n        <fd-card-content>\n            <fd-panel [expanded]=\"isFirst\">\n                <div fd-panel-title id=\"panel-expandable-title-1\">\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\n                    <div class=\"payamIcons\">\n                        <fd-popover *ngIf=\"importance.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ importance.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-popover *ngIf=\"accessLevel.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-info-label\n                            *ngIf=\"todo\"\n                            [label]=\"todo.text\"\n                            [color]=\"todo.color\"\n                            [title]=\"todo.text\"\n                        ></fd-info-label>\n                    </div>\n                </div>\n                <div fd-panel-content>\n                    <div *ngIf=\"customText\">\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\n                            {{ customText }}\n                        </fd-message-strip>\n                    </div>\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\n\n                    <div *ngIf=\"attachments?.length\" class=\"file-viewer-attachments\">\n                        <ng-container *ngFor=\"let file of attachments\">\n                            <bsu-file-viewer-popover\n                                *ngIf=\"!file.IsDeleted\"\n                                [file]=\"file\"\n                                [files]=\"attachments\"\n                                [deviceSize]=\"(deviceSize$ | async)!!\"\n                                [canDownload]=\"true\"\n                                [disableRemove]=\"true\"\n                            ></bsu-file-viewer-popover>\n                        </ng-container>\n                        <ng-container *ngIf=\"attachments.length > 1\">\n                            <button\n                                fd-button\n                                [title]=\"'Download' | bbbTranslate\"\n                                [glyph]=\"'download'\"\n                                downloadFiles\n                                [files]=\"attachments\"\n                            ></button>\n                        </ng-container>\n                    </div>\n                    <div class=\"readAt\">\n                        <fd-object-identifier\n                            *ngIf=\"readDate\"\n                            [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\"\n                        >\n                        </fd-object-identifier>\n                    </div>\n                </div>\n            </fd-panel>\n        </fd-card-content>\n        <!-- <fd-card-footer>\n                <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\n            </fd-card-footer> -->\n    </fd-card>\n    <ng-contianer *ngFor=\"let detail of details\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                showPayamClass;\n                context: {\n                    $implicit: detail\n                }\n            \"\n        >\n        </ng-container>\n    </ng-contianer>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media (max-width: 410px){h5{max-width:210px}}@media (max-width: 1040px){.h5{max-width:600px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"data\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            showPayamClass;\n            context: {\n                $implicit: data,\n                primary: !data?.$details?.length,\n                isFirst: true\n            }\n        \"\n    >\n    </ng-container>\n</ng-container>\n<ng-template #showPayamClass let-data let-primary=\"primary\" let-isFirst=\"isFirst\">\n    <ng-container\n        *ngTemplateOutlet=\"\n            namayeshPayam;\n            context: {\n                $implicit: data.payam.Subject,\n                fromText: data.payam.FromText,\n                toText: data.$toText,\n                importance: data.$importance,\n                readDate: data.$readDate,\n                sendDate: data.$sendDate,\n                ccText: data.$ccText,\n                bccText: data.$bccText,\n                accessLevel: data.$accessLevel,\n                content: data.$content,\n                fromPhoto: data.$fromPhoto,\n                details: data.$details,\n                attachments: data.$attachments,\n                todo: data.$todo,\n                customText: data.payam.CustomText,\n                primary: primary,\n                isFirst: isFirst\n            }\n        \"\n    >\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #namayeshPayam\n    let-subject\n    let-content=\"content\"\n    let-fromText=\"fromText\"\n    let-toText=\"toText\"\n    let-importance=\"importance\"\n    let-readDate=\"readDate\"\n    let-sendDate=\"sendDate\"\n    let-ccText=\"ccText\"\n    let-bccText=\"bccText\"\n    let-fromPhoto=\"fromPhoto\"\n    let-details=\"details\"\n    let-accessLevel=\"accessLevel\"\n    let-primary=\"primary\"\n    let-isFirst=\"isFirst\"\n    let-attachments=\"attachments\"\n    let-todo=\"todo\"\n    let-customText=\"customText\"\n>\n    <fd-card cardType=\"object\">\n        <fd-card-header>\n            <fd-avatar\n                [image]=\"fromPhoto\"\n                [circle]=\"true\"\n                size=\"s\"\n                [ariaLabel]=\"fromText\"\n                [label]=\"fromText\"\n                [title]=\"fromText\"\n            ></fd-avatar>\n            <div fd-card-title class=\"header-fields\">\n                <h5 fd-title>\n                    <a fd-link [emphasized]=\"true\" aria-label=\"Sender\"> {{ fromText }}</a>\n                </h5>\n                <fd-object-identifier [description]=\"'(' + sendDate + ')'\"> </fd-object-identifier>\n            </div>\n            <div fd-card-subtitle>\n                <h5 fd-title>{{ subject }}</h5>\n                <fd-popover>\n                    <fd-popover-control>\n                        <button fd-button fdType=\"transparent\" [fdMenu]=\"true\">{{ 'Recievers' | bbbTranslate }}</button>\n                    </fd-popover-control>\n                    <fd-popover-body>\n                        <ul fd-list>\n                            <li fd-list-item *ngFor=\"let rec of toText\">\n                                <a fd-list-link>{{ rec }}</a>\n                            </li>\n                        </ul>\n                    </fd-popover-body>\n                </fd-popover>\n            </div>\n        </fd-card-header>\n        <fd-card-content>\n            <fd-panel [expanded]=\"isFirst\">\n                <div fd-panel-title id=\"panel-expandable-title-1\">\n                    <h5 fd-title>{{ '\u0645\u062D\u062A\u0648\u0627\u06CC \u067E\u06CC\u0627\u0645' | bbbTranslate }}</h5>\n                    <div class=\"payamIcons\">\n                        <fd-popover *ngIf=\"importance.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + importance.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ importance.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-popover *ngIf=\"accessLevel.icon\">\n                            <fd-popover-control>\n                                <img [src]=\"'/Customization/Mail/' + accessLevel.icon\" />\n                            </fd-popover-control>\n                            <fd-popover-body>\n                                <ul fd-list>\n                                    <li fd-list-item>{{ accessLevel.text }}</li>\n                                </ul>\n                            </fd-popover-body>\n                        </fd-popover>\n                        <fd-info-label\n                            *ngIf=\"todo\"\n                            [label]=\"todo.text\"\n                            [color]=\"todo.color\"\n                            [title]=\"todo.text\"\n                        ></fd-info-label>\n                    </div>\n                </div>\n                <div fd-panel-content>\n                    <div *ngIf=\"customText\">\n                        <fd-message-strip type=\"information\" [noIcon]=\"true\" [dismissible]=\"false\">\n                            {{ customText }}\n                        </fd-message-strip>\n                    </div>\n                    <div [innerHtml]=\"content\" [disable]=\"!primary || attachments?.length\"></div>\n\n                    <div *ngIf=\"attachments?.length\" class=\"file-viewer-attachments\">\n                        <ng-container *ngFor=\"let file of attachments\">\n                            <bsu-file-viewer-popover\n                                *ngIf=\"!file.IsDeleted\"\n                                [file]=\"file\"\n                                [files]=\"attachments\"\n                                [deviceSize]=\"(deviceSize$ | async)!!\"\n                                [canDownload]=\"true\"\n                                [disableRemove]=\"true\"\n                            ></bsu-file-viewer-popover>\n                        </ng-container>\n                        <ng-container *ngIf=\"attachments.length > 1\">\n                            <button\n                                fd-button\n                                [title]=\"'Download' | bbbTranslate\"\n                                [glyph]=\"'download'\"\n                                downloadFiles\n                                [files]=\"attachments\"\n                            ></button>\n                        </ng-container>\n                    </div>\n                    <div class=\"readAt\">\n                        <fd-object-identifier\n                            *ngIf=\"readDate\"\n                            [description]=\"('ReadAt' | bbbTranslate) + ': (' + readDate + ')'\"\n                        >\n                        </fd-object-identifier>\n                    </div>\n                </div>\n            </fd-panel>\n        </fd-card-content>\n        <!-- <fd-card-footer>\n                <button *fdCardFooterActionItem fd-button fdCompact>Assign to Project</button>\n            </fd-card-footer> -->\n    </fd-card>\n    <ng-contianer *ngFor=\"let detail of details\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                showPayamClass;\n                context: {\n                    $implicit: detail\n                }\n            \"\n        >\n        </ng-container>\n    </ng-contianer>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%;height:100%}:host ::ng-deep .fd-panel__content{border-bottom:none;padding-bottom:5px}:host ::ng-deep .fd-card__subtitle{display:flex;align-items:center;column-gap:5px;justify-content:start;height:auto;max-height:initial}:host ::ng-deep .fd-card__subtitle h5{white-space:initial!important}:host ::ng-deep .fd-object-identifier__text{margin-top:0}:host ::ng-deep .fd-panel__header{border-bottom:none}fd-card-header{cursor:default;border-bottom:none!important}fd-card-header:before{position:relative!important;display:none!important}fd-card-header:hover{background:var(--fdCard_Background_Color)!important}.readAt{padding-top:2rem}.readAt ::ng-deep p{color:var(--sapButton_BorderColor)!important}.payamIcons{display:flex;column-gap:5px}.payamIcons img{width:16px}@media (max-width: 410px){h5{max-width:210px}}@media (max-width: 1040px){.h5{max-width:600px}}\n"] }]
         }] });
 class PayamClassType {
     constructor(payam, _domSanitizer, _dateService) {