raise-common-lib 0.0.134 → 0.0.136

package/fesm5/raise-common-lib.js

@@ -1,6 +1,6 @@
 import { __assign, __awaiter, __generator, __decorate, __metadata, __read, __values, __spread } from 'tslib';
 import { EventEmitter, Component, ChangeDetectorRef, ViewChild, Input, Output, HostBinding, Injectable, ɵɵdefineInjectable, Inject, ɵɵinject, ContentChild, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChildren, ElementRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { GridComponent, GridModule, PagerModule, GridAllModule, PageService, SortService, FilterService, ExcelExportService, EditService, ResizeService, ToolbarService, ColumnChooserService, AggregateService, ColumnMenuService, DetailRowService, SelectionService, GroupService } from '@syncfusion/ej2-angular-grids';
+import { GridComponent, GridModule, PagerModule, GridAllModule, PageService, RowDDService, SortService, FilterService, ExcelExportService, EditService, ResizeService, ToolbarService, ColumnChooserService, AggregateService, ColumnMenuService, DetailRowService, SelectionService, GroupService } from '@syncfusion/ej2-angular-grids';
 import { times, debounce } from 'lodash';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { MAT_SNACK_BAR_DATA, MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
@@ -55,6 +55,7 @@ var CommonGridComponent = /** @class */ (function () {
         this.fields = [];
         this.dataSource = [];
         this.allowPaging = true;
+        this.allowRowDragAndDrop = false;
         this.clipMode = "EllipsisWithTooltip";
         this.checkBoxWidth = 32; // col 数量过少的时候，check宽度会拉伸，这时候设置null
         /**
@@ -760,7 +761,7 @@ var CommonGridComponent = /** @class */ (function () {
     CommonGridComponent.decorators = [
         { type: Component, args: [{
                     selector: "rs-common-grid",
-                    template: "<ejs-grid\r\n\t#grid\r\n\t[id]=\"gridId\"\r\n\t[ngClass]=\"{\r\n\t\t'hide-Check-box': !alwaysShowCheckbox,\r\n\t\t'grid-loading': className === 'grid-loading'\r\n\t}\"\r\n\t[dataSource]=\"dataSource\"\r\n\t[allowPaging]=\"allowPaging && pageSettings\"\r\n\t[allowResizing]=\"true\"\r\n\t[pageSettings]=\"pageSettings\"\r\n\t[showColumnMenu]=\"true\"\r\n\t[allowSorting]=\"true\"\r\n\t[allowFiltering]=\"true\"\r\n\t[allowExcelExport]=\"true\"\r\n\t[filterSettings]=\"filterSettings\"\r\n\t[resizeSettings]=\"resizeSettings\"\r\n\t[allowSelection]=\"true\"\r\n\t[editSettings]=\"editSettings\"\r\n\t[childGrid]=\"childGrid\"\r\n\t[contextMenuItems]=\"\r\n\t\tdataSource && dataSource.length ? contextMenuItems : null\r\n\t\"\r\n\t[selectionSettings]=\"selectionSettings\"\r\n\t(recordClick)=\"_recordClick($event)\"\r\n\t(recordDoubleClick)=\"_recordDoubleClick($event)\"\r\n\t(actionBegin)=\"_actionBegin($event)\"\r\n\t(actionComplete)=\"_actionHandler($event)\"\r\n\t(rowSelected)=\"_rowSelected($event)\"\r\n\t(rowDeselected)=\"_rowDeselected($event)\"\r\n\tstyle=\"border: none\"\r\n\t(contextMenuClick)=\"_onContextMenu($event)\"\r\n\t(contextMenuOpen)=\"contextMenuOpen($event)\"\r\n\t(queryCellInfo)=\"customiseCell($event)\"\r\n\t(dataBound)=\"_dataBound($event)\"\r\n\t(rowDataBound)=\"_rowDataBound($event)\"\r\n\t(rowSelecting)=\"_rowSelecting($event)\"\r\n\t(excelQueryCellInfo)=\"_exportQueryCellInfo($event)\"\r\n\t(load)=\"_load()\"\r\n\t[frozenColumns]=\"frozenColumns\"\r\n\t[columnChooserSettings]=\"columnChooserSettings\"\r\n\r\n>\r\n\t<e-columns>\r\n\t\t<e-column\r\n\t\t\t*ngIf=\"showCheckBox\"\r\n\t\t\ttype=\"checkbox\"\r\n\t\t\t[width]=\"checkBoxWidth\"\r\n\t\t\t[showColumnMenu]=\"false\"\r\n\t\t\t[allowResizing]=\"false\"\r\n\t\t></e-column>\r\n\t\t<e-column\r\n\t\t\t*ngFor=\"let item of fields; trackBy: trackByFn; let last = last\"\r\n\t\t\t[field]=\"item.columnName\"\r\n\t\t\t[filter]=\"item.filter ? item.filter : { type: 'CheckBox' }\"\r\n\t\t\t[customAttributes]=\"\r\n\t\t\t\titem.colName === 'entityUserList' ||\r\n\t\t\t\titem.colName === 'kycProgress'\r\n\t\t\t\t\t? { class: 'hideColumnFilterClass' }\r\n\t\t\t\t\t: {}\r\n\t\t\t\"\r\n\t\t\t[headerText]=\"item.columnDisplayName\"\r\n\t\t\t[textAlign]=\"item.textAlign\"\r\n\t\t\t[showColumnMenu]=\"item.showColumnMenu === undefined ? true : false\"\r\n\t\t\t[allowFiltering]=\"item.allowFiltering === undefined ? true : false\"\r\n\t\t\t[allowSorting]=\"item.allowSorting === undefined ? true : false\"\r\n\t\t\t[editType]=\"item.editType\"\r\n\t\t\t[validationRules]=\"item.validationRules\"\r\n\t\t\t[type]=\"item.dataType || 'string'\"\r\n\t\t\t[width]=\"item.width\"\r\n\t\t\t[minWidth]=\"item.minWidth\"\r\n\t\t\t[format]=\"item.format\"\r\n\t\t\t[visible]=\"item.visible\"\r\n\t\t\t[template]=\"item.showTemplate ? columnTemplate : undefined\"\r\n\t\t\t[clipMode]=\"\r\n\t\t\t\titem.clipMode\r\n\t\t\t\t\t? item.clipMode\r\n\t\t\t\t\t: clipMode || 'EllipsisWithTooltip'\r\n\t\t\t\"\r\n\t\t\t[sortComparer]=\"item.dateComparer\"\r\n\t\t\t[allowResizing]=\"!last\"\r\n\t\t>\r\n\t\t</e-column>\r\n\t</e-columns>\r\n</ejs-grid>\r\n",
+                    template: "<ejs-grid\r\n  #grid\r\n  [id]=\"gridId\"\r\n  [ngClass]=\"{\r\n    'hide-Check-box': !alwaysShowCheckbox,\r\n    'grid-loading': className === 'grid-loading'\r\n  }\"\r\n  [dataSource]=\"dataSource\"\r\n  [allowPaging]=\"allowPaging && pageSettings\"\r\n  [allowResizing]=\"true\"\r\n  [pageSettings]=\"pageSettings\"\r\n  [showColumnMenu]=\"true\"\r\n  [allowSorting]=\"true\"\r\n  [allowFiltering]=\"true\"\r\n  [allowExcelExport]=\"true\"\r\n  [allowRowDragAndDrop]=\"allowRowDragAndDrop\"\r\n  [filterSettings]=\"filterSettings\"\r\n  [resizeSettings]=\"resizeSettings\"\r\n  [allowSelection]=\"true\"\r\n  [editSettings]=\"editSettings\"\r\n  [childGrid]=\"childGrid\"\r\n  [contextMenuItems]=\"dataSource && dataSource.length ? contextMenuItems : null\"\r\n  [selectionSettings]=\"selectionSettings\"\r\n  (recordClick)=\"_recordClick($event)\"\r\n  (recordDoubleClick)=\"_recordDoubleClick($event)\"\r\n  (actionBegin)=\"_actionBegin($event)\"\r\n  (actionComplete)=\"_actionHandler($event)\"\r\n  (rowSelected)=\"_rowSelected($event)\"\r\n  (rowDeselected)=\"_rowDeselected($event)\"\r\n  style=\"border: none\"\r\n  (contextMenuClick)=\"_onContextMenu($event)\"\r\n  (contextMenuOpen)=\"contextMenuOpen($event)\"\r\n  (queryCellInfo)=\"customiseCell($event)\"\r\n  (dataBound)=\"_dataBound($event)\"\r\n  (rowDataBound)=\"_rowDataBound($event)\"\r\n  (rowSelecting)=\"_rowSelecting($event)\"\r\n  (excelQueryCellInfo)=\"_exportQueryCellInfo($event)\"\r\n  (load)=\"_load()\"\r\n  [frozenColumns]=\"frozenColumns\"\r\n  [columnChooserSettings]=\"columnChooserSettings\"\r\n>\r\n  <e-columns>\r\n    <e-column\r\n      *ngIf=\"showCheckBox\"\r\n      type=\"checkbox\"\r\n      [width]=\"checkBoxWidth\"\r\n      [showColumnMenu]=\"false\"\r\n      [allowResizing]=\"false\"\r\n    ></e-column>\r\n    <e-column\r\n      *ngFor=\"let item of fields; trackBy: trackByFn; let last = last\"\r\n      [field]=\"item.columnName\"\r\n      [filter]=\"item.filter ? item.filter : { type: 'CheckBox' }\"\r\n      [customAttributes]=\"\r\n        item.colName === 'entityUserList' || item.colName === 'kycProgress'\r\n          ? { class: 'hideColumnFilterClass' }\r\n          : {}\r\n      \"\r\n      [headerText]=\"item.columnDisplayName\"\r\n      [textAlign]=\"item.textAlign\"\r\n      [showColumnMenu]=\"item.showColumnMenu === undefined ? true : false\"\r\n      [allowFiltering]=\"item.allowFiltering === undefined ? true : false\"\r\n      [allowSorting]=\"item.allowSorting === undefined ? true : false\"\r\n      [editType]=\"item.editType\"\r\n      [validationRules]=\"item.validationRules\"\r\n      [type]=\"item.dataType || 'string'\"\r\n      [width]=\"item.width\"\r\n      [minWidth]=\"item.minWidth\"\r\n      [format]=\"item.format\"\r\n      [visible]=\"item.visible\"\r\n      [template]=\"item.showTemplate ? columnTemplate : undefined\"\r\n      [clipMode]=\"\r\n        item.clipMode ? item.clipMode : clipMode || 'EllipsisWithTooltip'\r\n      \"\r\n      [sortComparer]=\"item.dateComparer\"\r\n      [allowResizing]=\"!last\"\r\n    >\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n",
                     styles: [""]
                 }] }
     ];
@@ -786,6 +787,7 @@ var CommonGridComponent = /** @class */ (function () {
         columnTemplate: [{ type: Input }],
         pageSettings: [{ type: Input }],
         allowPaging: [{ type: Input }],
+        allowRowDragAndDrop: [{ type: Input }],
         clipMode: [{ type: Input }],
         checkBoxWidth: [{ type: Input }],
         childGrid: [{ type: Input }],
@@ -848,6 +850,8 @@ if (false) {
     /** @type {?} */
     CommonGridComponent.prototype.allowPaging;
     /** @type {?} */
+    CommonGridComponent.prototype.allowRowDragAndDrop;
+    /** @type {?} */
     CommonGridComponent.prototype.clipMode;
     /** @type {?} */
     CommonGridComponent.prototype.checkBoxWidth;
@@ -2099,6 +2103,13 @@ var RsCommentaryComponent = /** @class */ (function () {
         this.deletePermission = true; // delete权限
         // delete权限
         this.isReadOnly = false;
+        this.filedsKey = {
+            commentaries: "commentaries",
+            messageId: "messageId",
+            ownerName: "ownerName",
+            lastModifiedOn: "lastModifiedOn",
+            messageBody: "messageBody",
+        };
         this.actionComplete = new EventEmitter();
         this.commentVal = "";
         this.replyVal = "";
@@ -2139,13 +2150,14 @@ var RsCommentaryComponent = /** @class */ (function () {
              * @return {?}
              */
             function (res) {
-                _this.commentData.unshift({
-                    messageId: res.messageId,
-                    commentaries: [],
-                    ownerName: _this.displayName,
-                    lastModifiedOn: Date.now(),
-                    messageBody: _this.commentVal,
-                });
+                var _a;
+                _this.commentData.unshift((_a = {},
+                    _a["" + _this.filedsKey["messageId"]] = res.messageId,
+                    _a["" + _this.filedsKey["commentaries"]] = [],
+                    _a["" + _this.filedsKey["ownerName"]] = _this.displayName,
+                    _a["" + _this.filedsKey["lastModifiedOn"]] = Date.now(),
+                    _a["" + _this.filedsKey["messageBody"]] = _this.commentVal,
+                    _a));
                 _this.commentVal = "";
             }),
         });
@@ -2159,7 +2171,7 @@ var RsCommentaryComponent = /** @class */ (function () {
      * @return {?}
      */
     function (item) {
-        this.editCommentVal = item.messageBody;
+        this.editCommentVal = item[this.filedsKey["messageBody"]];
         item.showCommentEdit = true;
     };
     /**
@@ -2182,7 +2194,7 @@ var RsCommentaryComponent = /** @class */ (function () {
                      * @return {?}
                      */
                     function (res) {
-                        item.messageBody = _this.editCommentVal;
+                        item[_this.filedsKey["messageBody"]] = _this.editCommentVal;
                         item.showCommentEdit = false;
                         _this.ref.markForCheck();
                     }),
@@ -2220,7 +2232,9 @@ var RsCommentaryComponent = /** @class */ (function () {
              * @param {?} ele
              * @return {?}
              */
-            function (ele) { return ele.messageId === item.messageId; }));
+            function (ele) {
+                return ele[_this.filedsKey.messageId] === item[_this.filedsKey.messageId];
+            }));
             _this.actionComplete.emit({
                 action: "deleteComment",
                 data: item,
@@ -2254,13 +2268,14 @@ var RsCommentaryComponent = /** @class */ (function () {
              * @return {?}
              */
             function (res) {
-                item.commentaries.unshift({
-                    messageId: res.messageId,
-                    commentaries: [],
-                    ownerName: _this.displayName,
-                    lastModifiedOn: Date.now(),
-                    messageBody: _this.replyVal,
-                });
+                var _a;
+                item[_this.filedsKey["commentaries"]].unshift((_a = {},
+                    _a["" + _this.filedsKey["messageId"]] = res[_this.filedsKey["messageId"]],
+                    _a["" + _this.filedsKey["commentaries"]] = [],
+                    _a["" + _this.filedsKey["ownerName"]] = _this.displayName,
+                    _a["" + _this.filedsKey["lastModifiedOn"]] = Date.now(),
+                    _a["" + _this.filedsKey["messageBody"]] = _this.replyVal,
+                    _a));
                 _this.replyVal = "";
                 item.showReplyInput = false;
                 _this.ref.detectChanges();
@@ -2279,14 +2294,20 @@ var RsCommentaryComponent = /** @class */ (function () {
     function (e) {
         /** @type {?} */
         var textarea = e.target;
-        textarea.style.height = "auto";
-        textarea.style.height = textarea.scrollHeight + "px";
+        if (e.type === "focus" && textarea.value) {
+            textarea.style.height = "auto";
+            textarea.style.height = textarea.scrollHeight + "px";
+        }
+        else if (e.type === "input") {
+            textarea.style.height = "auto";
+            textarea.style.height = textarea.scrollHeight + "px";
+        }
     };
     RsCommentaryComponent.decorators = [
         { type: Component, args: [{
                     selector: "rs-commentary",
-                    template: "<div class=\"rs-commentary-wrap\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n    [ngTemplateOutletContext]=\"{ type: 'comment' }\"\r\n  ></ng-container>\r\n  <div class=\"reply-box\">\r\n    <div *ngFor=\"let item of commentData\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"replyItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'comment', item: item }\"\r\n      ></ng-container>\r\n      <div class=\"sub-reply-list\">\r\n        <ng-container\r\n          *ngFor=\"\r\n            let sub of item.isExpanded\r\n              ? item.commentaries\r\n              : item.commentaries.slice(0, 3)\r\n          \"\r\n          [ngTemplateOutlet]=\"replyItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'sub', item: sub }\"\r\n        ></ng-container>\r\n      </div>\r\n      <button\r\n        class=\"e-btn text\"\r\n        *ngIf=\"item.commentaries.length > 3\"\r\n        (click)=\"item.isExpanded = !item.isExpanded\"\r\n        style=\"margin-bottom: 8px;\"\r\n      >\r\n        {{\r\n          item.isExpanded\r\n            ? \"Collapse\"\r\n            : \"View All \" + item.commentaries.length + \" Replies\"\r\n        }}\r\n        <img\r\n          class=\"arrow\"\r\n          [ngClass]=\"{ collapse: item.isExpanded }\"\r\n          src=\"../../assets/img/dropdown-arrow.svg\"\r\n          alt=\"\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #commentBoxTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"comment-box\">\r\n    <div class=\"comment-input-wrap\">\r\n      <div class=\"avatar\" *ngIf=\"type !== 'editComment'\">\r\n        {{ cf.rtn(displayName) }}\r\n      </div>\r\n      <textarea\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-input\"\r\n        rows=\"2\"\r\n        [(ngModel)]=\"commentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'reply'\"\r\n        class=\"e-input\"\r\n        rows=\"2\"\r\n        [(ngModel)]=\"replyVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'editComment'\"\r\n        class=\"e-input\"\r\n        rows=\"2\"\r\n        [(ngModel)]=\"editCommentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n    </div>\r\n    <div class=\"btn-wrap\">\r\n      <button\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-btn e-primary small\"\r\n        [disabled]=\"commentVal === ''|| isReadOnly || !editPermission\"\r\n        (click)=\"addComment()\"\r\n      >\r\n        {{ translation.COMMENT || \".COMMENT\" }}\r\n      </button>\r\n      <ng-container *ngIf=\"type === 'reply'\">\r\n        <button\r\n          class=\"e-btn small\"\r\n          (click)=\"item.showReplyInput = false; replyVal = ''\"\r\n        >\r\n          {{ translation.CANCEL || \".CANCEL\" }}\r\n        </button>\r\n        <button\r\n          class=\"e-btn e-primary small\"\r\n          [disabled]=\"replyVal === ''\"\r\n          (click)=\"addReply(item)\"\r\n        >\r\n          {{ translation.REPLY || \".REPLY\" }}\r\n        </button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"type === 'editComment'\">\r\n        <button class=\"e-btn text\" (click)=\"item.showCommentEdit = false\">\r\n          <img src=\"../../assets/img/comment-cancel.svg\" alt=\"\" />\r\n        </button>\r\n        <button\r\n          class=\"e-btn text\"\r\n          [disabled]=\"editCommentVal === ''\"\r\n          (click)=\"updateComment(item)\"\r\n        >\r\n          <img src=\"../../assets/img/comment-check.svg\" alt=\"\" />\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #replyItemTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"reply-item\" [ngClass]=\"{ comment: type === 'comment' }\">\r\n    <div class=\"avatar\">\r\n      {{ cf.rtn(item.ownerName) }}\r\n    </div>\r\n    <div class=\"owner-wrap\">\r\n      <div class=\"owner-info\">\r\n        <div class=\"name\">\r\n          {{ item.ownerName }}\r\n        </div>\r\n        <div class=\"time\">\r\n          {{ item.lastModifiedOn | date : dateTimePipeFormat }}\r\n        </div>\r\n      </div>\r\n      <div class=\"message-wrap\">\r\n        <div class=\"message\" *ngIf=\"!item.showCommentEdit\">\r\n          {{ item.messageBody }}\r\n        </div>\r\n        <ng-container\r\n          *ngIf=\"item.showCommentEdit\"\r\n          [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'editComment', item: item }\"\r\n        ></ng-container>\r\n      </div>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          type === 'comment' && !item.showReplyInput && !item.showCommentEdit\r\n        \"\r\n        class=\"e-btn text\"\r\n        (click)=\"item.showReplyInput = true\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n      >\r\n        {{ translation.REPLY || \".REPLY\" }}\r\n      </button>\r\n      <ng-container\r\n        *ngIf=\"item.showReplyInput\"\r\n        [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'reply', item: item }\"\r\n      ></ng-container>\r\n\r\n      <rs-grid-action *ngIf=\"type === 'comment'\">\r\n        <rs-grid-action-item\r\n          image=\"Edit\"\r\n          [text]=\"translation.EDIT\"\r\n          [disabled]=\"isReadOnly || !editPermission\"\r\n          (click)=\"editComment(item)\"\r\n        ></rs-grid-action-item>\r\n        <rs-grid-action-item\r\n          image=\"Delete\"\r\n          [text]=\"translation.DELETE\"\r\n          [disabled]=\"isReadOnly || !deletePermission\"\r\n          (click)=\"deleteComment(item)\"\r\n        ></rs-grid-action-item>\r\n      </rs-grid-action>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
-                    styles: [".rs-commentary-wrap{width:100%;height:100%;padding:32px;display:flex;flex-direction:column}.rs-commentary-wrap .comment-box{width:100%}.rs-commentary-wrap .comment-box .comment-input-wrap{margin-bottom:12px;display:flex;gap:12px}.rs-commentary-wrap .comment-box .comment-input-wrap .e-input{flex:1;width:0;height:44px}.rs-commentary-wrap .comment-box .btn-wrap{display:flex;justify-content:flex-end;gap:12px}.rs-commentary-wrap .comment-box .btn-wrap .e-btn.text{padding:4px}.rs-commentary-wrap .reply-box{height:0;flex:1;overflow:auto;margin-top:16px;margin-right:-32px;padding-right:32px}.rs-commentary-wrap .reply-box .sub-reply-list{padding-left:40px}.rs-commentary-wrap .reply-box .e-btn.text{padding:0!important;min-width:auto;height:auto;color:#6c7c90!important}.rs-commentary-wrap .reply-box .e-btn.text:hover{background:0 0!important;color:#1364b3!important}.rs-commentary-wrap .reply-box .e-btn.text:focus{background:0 0!important;color:#6c7c90!important}.rs-commentary-wrap .reply-box .arrow.collapse{transform:rotate(180deg)}.rs-commentary-wrap .reply-box .reply-item{display:flex;gap:12px;padding:12px 0}.rs-commentary-wrap .reply-box .reply-item.comment{border-top:1px solid #eaedf0}.rs-commentary-wrap .reply-box .reply-item.comment:hover{background-color:#f6faff}.rs-commentary-wrap .reply-box .reply-item.comment:hover rs-grid-action{display:block}.rs-commentary-wrap .reply-box .reply-item rs-grid-action{display:none;position:absolute;cursor:pointer;top:-4px;right:8px}.rs-commentary-wrap .reply-box .owner-wrap{flex:1;width:0;position:relative}.rs-commentary-wrap .reply-box .owner-wrap .owner-info{display:flex;align-items:center;gap:12px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .name{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:700;line-height:14px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .time{color:#6c7c90;font-family:Arial;font-size:10px;font-style:normal;font-weight:400;line-height:12px}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap{padding:8px 0}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap .message{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.rs-commentary-wrap .avatar{width:32px;height:32px;border-radius:100%;border:1px solid rgba(108,124,144,.4);color:#44566c;display:flex;align-items:center;justify-content:center;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px}"]
+                    template: "<div class=\"rs-commentary-wrap\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n    [ngTemplateOutletContext]=\"{ type: 'comment' }\"\r\n  ></ng-container>\r\n  <div class=\"reply-box\">\r\n    <div *ngFor=\"let item of commentData\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"replyItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'comment', item: item }\"\r\n      ></ng-container>\r\n      <div class=\"sub-reply-list\">\r\n        <ng-container\r\n          *ngFor=\"\r\n            let sub of item.isExpanded\r\n              ? item[filedsKey.commentaries]\r\n              : item[filedsKey.commentaries].slice(0, 3)\r\n          \"\r\n          [ngTemplateOutlet]=\"replyItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'sub', item: sub }\"\r\n        ></ng-container>\r\n      </div>\r\n      <button\r\n        class=\"e-btn text\"\r\n        *ngIf=\"item[filedsKey.commentaries].length > 3\"\r\n        (click)=\"item.isExpanded = !item.isExpanded\"\r\n        style=\"margin-bottom: 8px\"\r\n      >\r\n        {{\r\n          item.isExpanded\r\n            ? \"Collapse\"\r\n            : \"View All \" + item[filedsKey.commentaries].length + \" Replies\"\r\n        }}\r\n        <img\r\n          class=\"arrow\"\r\n          [ngClass]=\"{ collapse: item.isExpanded }\"\r\n          src=\"../../assets/img/dropdown-arrow.svg\"\r\n          alt=\"\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #commentBoxTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"comment-box\">\r\n    <div class=\"comment-input-wrap\">\r\n      <div class=\"avatar\" *ngIf=\"type !== 'editComment'\">\r\n        {{ cf.rtn(displayName) }}\r\n      </div>\r\n      <textarea\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"commentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'reply'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"replyVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'editComment'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"editCommentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n    </div>\r\n    <div class=\"btn-wrap\">\r\n      <button\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-btn e-primary small\"\r\n        [disabled]=\"commentVal === '' || isReadOnly || !editPermission\"\r\n        (click)=\"addComment()\"\r\n      >\r\n        {{ translation.COMMENT || \".COMMENT\" }}\r\n      </button>\r\n      <ng-container *ngIf=\"type === 'reply'\">\r\n        <button\r\n          class=\"e-btn small\"\r\n          (click)=\"item.showReplyInput = false; replyVal = ''\"\r\n        >\r\n          {{ translation.CANCEL || \".CANCEL\" }}\r\n        </button>\r\n        <button\r\n          class=\"e-btn e-primary small\"\r\n          [disabled]=\"replyVal === ''\"\r\n          (click)=\"addReply(item)\"\r\n        >\r\n          {{ translation.REPLY || \".REPLY\" }}\r\n        </button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"type === 'editComment'\">\r\n        <button class=\"e-btn text\" (click)=\"item.showCommentEdit = false\">\r\n          <img src=\"../../assets/img/comment-cancel.svg\" alt=\"\" />\r\n        </button>\r\n        <button\r\n          class=\"e-btn text\"\r\n          [disabled]=\"editCommentVal === ''\"\r\n          (click)=\"updateComment(item)\"\r\n        >\r\n          <img src=\"../../assets/img/comment-check.svg\" alt=\"\" />\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #replyItemTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"reply-item\" [ngClass]=\"{ comment: type === 'comment' }\">\r\n    <div class=\"avatar\">\r\n      {{ cf.rtn(item[filedsKey.ownerName]) }}\r\n    </div>\r\n    <div class=\"owner-wrap\">\r\n      <div class=\"owner-info\">\r\n        <div class=\"name\">\r\n          {{ item[filedsKey.ownerName] }}\r\n        </div>\r\n        <div class=\"time\">\r\n          {{ item[filedsKey.lastModifiedOn] | date : dateTimePipeFormat }}\r\n        </div>\r\n      </div>\r\n      <div class=\"message-wrap\">\r\n        <div class=\"message\" *ngIf=\"!item.showCommentEdit\">\r\n          <!-- {{ item[filedsKey.messageBody] }} -->\r\n          <truncated-text-toggle\r\n            [maximum]=\"1050\"\r\n            [data]=\"item[filedsKey.messageBody]\"\r\n          >\r\n          </truncated-text-toggle>\r\n        </div>\r\n        <ng-container\r\n          *ngIf=\"item.showCommentEdit\"\r\n          [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'editComment', item: item }\"\r\n        ></ng-container>\r\n      </div>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          type === 'comment' && !item.showReplyInput && !item.showCommentEdit\r\n        \"\r\n        class=\"e-btn text\"\r\n        (click)=\"item.showReplyInput = true\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n      >\r\n        {{ translation.REPLY || \".REPLY\" }}\r\n      </button>\r\n      <ng-container\r\n        *ngIf=\"item.showReplyInput\"\r\n        [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'reply', item: item }\"\r\n      ></ng-container>\r\n\r\n      <rs-grid-action *ngIf=\"type === 'comment'\">\r\n        <rs-grid-action-item\r\n          image=\"Edit\"\r\n          [text]=\"translation.EDIT\"\r\n          [disabled]=\"isReadOnly || !editPermission\"\r\n          (click)=\"editComment(item)\"\r\n        ></rs-grid-action-item>\r\n        <rs-grid-action-item\r\n          image=\"Delete\"\r\n          [text]=\"translation.DELETE\"\r\n          [disabled]=\"isReadOnly || !deletePermission\"\r\n          (click)=\"deleteComment(item)\"\r\n        ></rs-grid-action-item>\r\n      </rs-grid-action>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
+                    styles: [".rs-commentary-wrap{width:100%;height:100%;padding:32px;display:flex;flex-direction:column}.rs-commentary-wrap .comment-box{width:100%}.rs-commentary-wrap .comment-box .comment-input-wrap{margin-bottom:12px;display:flex;gap:12px}.rs-commentary-wrap .comment-box .comment-input-wrap .e-input{flex:1;width:0;height:62px}.rs-commentary-wrap .comment-box .btn-wrap{display:flex;justify-content:flex-end;gap:12px}.rs-commentary-wrap .comment-box .btn-wrap .e-btn.text{padding:4px}.rs-commentary-wrap .reply-box{height:0;flex:1;overflow:auto;margin-top:16px;margin-right:-32px;padding-right:32px}.rs-commentary-wrap .reply-box .sub-reply-list{padding-left:40px}.rs-commentary-wrap .reply-box .e-btn.text{padding:0!important;min-width:auto;height:auto;color:#6c7c90!important}.rs-commentary-wrap .reply-box .e-btn.text:hover{background:0 0!important;color:#1364b3!important}.rs-commentary-wrap .reply-box .e-btn.text:focus{background:0 0!important;color:#6c7c90!important}.rs-commentary-wrap .reply-box .arrow.collapse{transform:rotate(180deg)}.rs-commentary-wrap .reply-box .reply-item{display:flex;gap:12px;padding:12px 0}.rs-commentary-wrap .reply-box .reply-item.comment{border-top:1px solid #eaedf0}.rs-commentary-wrap .reply-box .reply-item.comment:hover{background-color:#f6faff}.rs-commentary-wrap .reply-box .reply-item.comment:hover rs-grid-action{display:block}.rs-commentary-wrap .reply-box .reply-item rs-grid-action{display:none;position:absolute;cursor:pointer;top:-4px;right:8px}.rs-commentary-wrap .reply-box .owner-wrap{flex:1;width:0;position:relative}.rs-commentary-wrap .reply-box .owner-wrap .owner-info{display:flex;align-items:center;gap:8px;height:28px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .name{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:700;line-height:14px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .time{color:#6c7c90;font-family:Arial;font-size:10px;font-style:normal;font-weight:400;line-height:12px}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap{padding:12px 0}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap .message{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px;padding-right:8px;white-space:pre-wrap}.rs-commentary-wrap .avatar{width:32px;height:32px;border-radius:100%;border:1px solid rgba(108,124,144,.4);color:#44566c;display:flex;align-items:center;justify-content:center;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px}"]
                 }] }
     ];
     /** @nocollapse */
@@ -2301,6 +2322,7 @@ var RsCommentaryComponent = /** @class */ (function () {
         editPermission: [{ type: Input }],
         deletePermission: [{ type: Input }],
         isReadOnly: [{ type: Input }],
+        filedsKey: [{ type: Input }],
         actionComplete: [{ type: Output }]
     };
     __decorate([
@@ -2322,7 +2344,7 @@ var RsCommentaryComponent = /** @class */ (function () {
         __metadata("design:returntype", void 0)
     ], RsCommentaryComponent.prototype, "addReply", null);
     __decorate([
-        Debounce(300),
+        Debounce(100),
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
@@ -2341,6 +2363,8 @@ if (false) {
     /** @type {?} */
     RsCommentaryComponent.prototype.isReadOnly;
     /** @type {?} */
+    RsCommentaryComponent.prototype.filedsKey;
+    /** @type {?} */
     RsCommentaryComponent.prototype.actionComplete;
     /** @type {?} */
     RsCommentaryComponent.prototype.commentVal;
@@ -2366,6 +2390,82 @@ if (false) {
     RsCommentaryComponent.prototype.ref;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/truncated-text-toggle/index.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var TruncatedTextToggleComponent = /** @class */ (function () {
+    function TruncatedTextToggleComponent() {
+        this.showData = "";
+        this.showExpandMoreBtn = false;
+        this.showCollapseBtn = false;
+    }
+    /**
+     * @return {?}
+     */
+    TruncatedTextToggleComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        if (this.data.length > this.maximum) {
+            this.showExpandMoreBtn = true;
+            this.showData = this.data.substring(0, this.maximum) + "...";
+        }
+        else {
+            this.showData = this.data;
+        }
+    };
+    /**
+     * @return {?}
+     */
+    TruncatedTextToggleComponent.prototype.showAll = /**
+     * @return {?}
+     */
+    function () {
+        this.showExpandMoreBtn = false;
+        this.showCollapseBtn = true;
+        this.showData = this.data;
+    };
+    /**
+     * @return {?}
+     */
+    TruncatedTextToggleComponent.prototype.collapse = /**
+     * @return {?}
+     */
+    function () {
+        this.showExpandMoreBtn = true;
+        this.showCollapseBtn = false;
+        this.showData = this.data.substring(0, this.maximum) + "...";
+    };
+    TruncatedTextToggleComponent.decorators = [
+        { type: Component, args: [{
+                    selector: "truncated-text-toggle",
+                    template: "<div class=\"click-show-more-content\">\r\n  <span>{{ showData }}</span>\r\n  <span *ngIf=\"showExpandMoreBtn\" class=\"show-more\" (click)=\"showAll()\">\r\n    Read More\r\n    <img src=\"./assets/img/click_show_more_icon.svg\" alt=\"\" />\r\n  </span>\r\n  <div\r\n    class=\"show-more collapse-btn\"\r\n    (click)=\"collapse()\"\r\n    *ngIf=\"showCollapseBtn\"\r\n  >\r\n    Collapse\r\n    <img src=\"./assets/img/click_show_more_icon.svg\" alt=\"\" />\r\n  </div>\r\n</div>\r\n",
+                    styles: [".click-show-more-content{word-wrap:break-word}.click-show-more-content .show-more{cursor:pointer;color:#1364b3;font-size:11px;margin-left:4px;vertical-align:middle}.click-show-more-content .show-more img{margin-left:2px;vertical-align:middle}.click-show-more-content .collapse-btn{display:flex;align-items:center;justify-content:flex-end}.click-show-more-content .collapse-btn img{transform:rotate(-180deg)}"]
+                }] }
+    ];
+    /** @nocollapse */
+    TruncatedTextToggleComponent.ctorParameters = function () { return []; };
+    TruncatedTextToggleComponent.propDecorators = {
+        data: [{ type: Input }],
+        maximum: [{ type: Input }]
+    };
+    return TruncatedTextToggleComponent;
+}());
+if (false) {
+    /** @type {?} */
+    TruncatedTextToggleComponent.prototype.data;
+    /** @type {?} */
+    TruncatedTextToggleComponent.prototype.maximum;
+    /** @type {?} */
+    TruncatedTextToggleComponent.prototype.showData;
+    /** @type {?} */
+    TruncatedTextToggleComponent.prototype.showExpandMoreBtn;
+    /** @type {?} */
+    TruncatedTextToggleComponent.prototype.showCollapseBtn;
+}
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/layout/page-list/index.component.ts
@@ -22831,7 +22931,8 @@ var RaiseCommonLibModule = /** @class */ (function () {
                         ToolbarItemComponent,
                         RsCommentaryComponent,
                         RSNavCardGroupComponent,
-                        RSToolbarComponent
+                        RSToolbarComponent,
+                        TruncatedTextToggleComponent
                     ],
                     imports: [
                         CommonModule,
@@ -22882,6 +22983,7 @@ var RaiseCommonLibModule = /** @class */ (function () {
                     ],
                     providers: [
                         PageService,
+                        RowDDService,
                         SortService,
                         FilterService,
                         ExcelExportService,
@@ -22982,7 +23084,8 @@ var RaiseCommonLibModule = /** @class */ (function () {
                         ToolbarItemComponent,
                         RsCommentaryComponent,
                         RSNavCardGroupComponent,
-                        RSToolbarComponent
+                        RSToolbarComponent,
+                        TruncatedTextToggleComponent
                     ],
                     entryComponents: [
                         NewActionNotificationComponent,
@@ -23007,5 +23110,5 @@ var RaiseCommonLibModule = /** @class */ (function () {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { CheckboxGroupComponent, CommonFunctionService, CommonGridComponent, DefaultDrawerConfig, DialogService, DrawerComponent, DrawerFormComponent, DrawerService, EmailPattern, EncryptedInputComponent, FloatBoxComponent, GridActionComponent, GridActionItemComponent, GridBoxComponent, IconLoaderService, KeepAliveService, MainContainerComponent, MessageType, MultiTabComponent, RSAsideComponent, RSFooterComponent, RSHeaderComponent, RSNavCardGroupComponent, RSToolbarComponent, RadioGroupComponent, RaiseCommonLibModule, RsCommentaryComponent, RsPageListComponent, RsPageTabComponent, SwitchInputComponent, TagInputComponent, ToolbarItemComponent, TranslationService, filterShowSection, Debounce as ɵa, NewActionNotificationComponent as ɵb, CommonDialogComponent as ɵc, CommonDeleteComponent as ɵd };
+export { CheckboxGroupComponent, CommonFunctionService, CommonGridComponent, DefaultDrawerConfig, DialogService, DrawerComponent, DrawerFormComponent, DrawerService, EmailPattern, EncryptedInputComponent, FloatBoxComponent, GridActionComponent, GridActionItemComponent, GridBoxComponent, IconLoaderService, KeepAliveService, MainContainerComponent, MessageType, MultiTabComponent, RSAsideComponent, RSFooterComponent, RSHeaderComponent, RSNavCardGroupComponent, RSToolbarComponent, RadioGroupComponent, RaiseCommonLibModule, RsCommentaryComponent, RsPageListComponent, RsPageTabComponent, SwitchInputComponent, TagInputComponent, ToolbarItemComponent, TranslationService, TruncatedTextToggleComponent, filterShowSection, Debounce as ɵa, NewActionNotificationComponent as ɵb, CommonDialogComponent as ɵc, CommonDeleteComponent as ɵd };
 //# sourceMappingURL=raise-common-lib.js.map