raise-common-lib 0.0.134 → 0.0.136

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/bundles/raise-common-lib.umd.js +129 -25
  2. package/bundles/raise-common-lib.umd.js.map +1 -1
  3. package/bundles/raise-common-lib.umd.min.js +1 -1
  4. package/bundles/raise-common-lib.umd.min.js.map +1 -1
  5. package/esm2015/lib/commentary/constants.js +10 -10
  6. package/esm2015/lib/commentary/index.component.js +36 -20
  7. package/esm2015/lib/common-grid/index.component.js +6 -2
  8. package/esm2015/lib/raise-common-lib.module.js +9 -5
  9. package/esm2015/lib/truncated-text-toggle/index.component.js +67 -0
  10. package/esm2015/public-api.js +2 -1
  11. package/esm2015/raise-common-lib.js +2 -2
  12. package/esm5/lib/commentary/constants.js +10 -10
  13. package/esm5/lib/commentary/index.component.js +43 -23
  14. package/esm5/lib/common-grid/index.component.js +6 -2
  15. package/esm5/lib/raise-common-lib.module.js +9 -5
  16. package/esm5/lib/truncated-text-toggle/index.component.js +78 -0
  17. package/esm5/public-api.js +2 -1
  18. package/esm5/raise-common-lib.js +2 -2
  19. package/fesm2015/raise-common-lib.js +113 -24
  20. package/fesm2015/raise-common-lib.js.map +1 -1
  21. package/fesm5/raise-common-lib.js +130 -27
  22. package/fesm5/raise-common-lib.js.map +1 -1
  23. package/lib/commentary/constants.d.ts +9 -9
  24. package/lib/commentary/index.component.d.ts +7 -0
  25. package/lib/common-grid/index.component.d.ts +1 -0
  26. package/lib/truncated-text-toggle/index.component.d.ts +12 -0
  27. package/package.json +1 -1
  28. package/public-api.d.ts +1 -0
  29. package/raise-common-lib.metadata.json +1 -1
  30. package/src/assets/img/click_show_more_icon.svg +3 -0
  31. package/src/assets/img/comment-cancel.svg +4 -4
  32. package/src/assets/img/comment-check.svg +5 -5
  33. package/src/assets/img/drawer-back.svg +4 -4
  34. package/src/assets/img/eye-close.svg +4 -4
  35. package/src/assets/img/eye-open.svg +4 -4
  36. package/src/assets/img/toolbar-action-add.svg +4 -4
  37. package/src/assets/img/toolbar-action-delete.svg +14 -14
  38. package/src/assets/img/toolbar-action-download.svg +5 -5
  39. package/src/assets/img/toolbar-action-duplicate.svg +6 -6
  40. package/src/assets/img/toolbar-action-export.svg +5 -5
  41. package/src/assets/img/toolbar-action-import.svg +5 -5
  42. package/src/assets/img/toolbar-action-refresh.svg +14 -14
  43. package/src/assets/img/toolbar-action-upload.svg +5 -5
  44. package/src/assets/style/reset/grid.scss +3 -1
@@ -248,6 +248,7 @@
248
248
  this.fields = [];
249
249
  this.dataSource = [];
250
250
  this.allowPaging = true;
251
+ this.allowRowDragAndDrop = false;
251
252
  this.clipMode = "EllipsisWithTooltip";
252
253
  this.checkBoxWidth = 32; // col 数量过少的时候,check宽度会拉伸,这时候设置null
253
254
  /**
@@ -953,7 +954,7 @@
953
954
  CommonGridComponent.decorators = [
954
955
  { type: core.Component, args: [{
955
956
  selector: "rs-common-grid",
956
- 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",
957
+ 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",
957
958
  styles: [""]
958
959
  }] }
959
960
  ];
@@ -979,6 +980,7 @@
979
980
  columnTemplate: [{ type: core.Input }],
980
981
  pageSettings: [{ type: core.Input }],
981
982
  allowPaging: [{ type: core.Input }],
983
+ allowRowDragAndDrop: [{ type: core.Input }],
982
984
  clipMode: [{ type: core.Input }],
983
985
  checkBoxWidth: [{ type: core.Input }],
984
986
  childGrid: [{ type: core.Input }],
@@ -1041,6 +1043,8 @@
1041
1043
  /** @type {?} */
1042
1044
  CommonGridComponent.prototype.allowPaging;
1043
1045
  /** @type {?} */
1046
+ CommonGridComponent.prototype.allowRowDragAndDrop;
1047
+ /** @type {?} */
1044
1048
  CommonGridComponent.prototype.clipMode;
1045
1049
  /** @type {?} */
1046
1050
  CommonGridComponent.prototype.checkBoxWidth;
@@ -2292,6 +2296,13 @@
2292
2296
  this.deletePermission = true; // delete权限
2293
2297
  // delete权限
2294
2298
  this.isReadOnly = false;
2299
+ this.filedsKey = {
2300
+ commentaries: "commentaries",
2301
+ messageId: "messageId",
2302
+ ownerName: "ownerName",
2303
+ lastModifiedOn: "lastModifiedOn",
2304
+ messageBody: "messageBody",
2305
+ };
2295
2306
  this.actionComplete = new core.EventEmitter();
2296
2307
  this.commentVal = "";
2297
2308
  this.replyVal = "";
@@ -2332,13 +2343,14 @@
2332
2343
  * @return {?}
2333
2344
  */
2334
2345
  function (res) {
2335
- _this.commentData.unshift({
2336
- messageId: res.messageId,
2337
- commentaries: [],
2338
- ownerName: _this.displayName,
2339
- lastModifiedOn: Date.now(),
2340
- messageBody: _this.commentVal,
2341
- });
2346
+ var _a;
2347
+ _this.commentData.unshift((_a = {},
2348
+ _a["" + _this.filedsKey["messageId"]] = res.messageId,
2349
+ _a["" + _this.filedsKey["commentaries"]] = [],
2350
+ _a["" + _this.filedsKey["ownerName"]] = _this.displayName,
2351
+ _a["" + _this.filedsKey["lastModifiedOn"]] = Date.now(),
2352
+ _a["" + _this.filedsKey["messageBody"]] = _this.commentVal,
2353
+ _a));
2342
2354
  _this.commentVal = "";
2343
2355
  }),
2344
2356
  });
@@ -2352,7 +2364,7 @@
2352
2364
  * @return {?}
2353
2365
  */
2354
2366
  function (item) {
2355
- this.editCommentVal = item.messageBody;
2367
+ this.editCommentVal = item[this.filedsKey["messageBody"]];
2356
2368
  item.showCommentEdit = true;
2357
2369
  };
2358
2370
  /**
@@ -2375,7 +2387,7 @@
2375
2387
  * @return {?}
2376
2388
  */
2377
2389
  function (res) {
2378
- item.messageBody = _this.editCommentVal;
2390
+ item[_this.filedsKey["messageBody"]] = _this.editCommentVal;
2379
2391
  item.showCommentEdit = false;
2380
2392
  _this.ref.markForCheck();
2381
2393
  }),
@@ -2413,7 +2425,9 @@
2413
2425
  * @param {?} ele
2414
2426
  * @return {?}
2415
2427
  */
2416
- function (ele) { return ele.messageId === item.messageId; }));
2428
+ function (ele) {
2429
+ return ele[_this.filedsKey.messageId] === item[_this.filedsKey.messageId];
2430
+ }));
2417
2431
  _this.actionComplete.emit({
2418
2432
  action: "deleteComment",
2419
2433
  data: item,
@@ -2447,13 +2461,14 @@
2447
2461
  * @return {?}
2448
2462
  */
2449
2463
  function (res) {
2450
- item.commentaries.unshift({
2451
- messageId: res.messageId,
2452
- commentaries: [],
2453
- ownerName: _this.displayName,
2454
- lastModifiedOn: Date.now(),
2455
- messageBody: _this.replyVal,
2456
- });
2464
+ var _a;
2465
+ item[_this.filedsKey["commentaries"]].unshift((_a = {},
2466
+ _a["" + _this.filedsKey["messageId"]] = res[_this.filedsKey["messageId"]],
2467
+ _a["" + _this.filedsKey["commentaries"]] = [],
2468
+ _a["" + _this.filedsKey["ownerName"]] = _this.displayName,
2469
+ _a["" + _this.filedsKey["lastModifiedOn"]] = Date.now(),
2470
+ _a["" + _this.filedsKey["messageBody"]] = _this.replyVal,
2471
+ _a));
2457
2472
  _this.replyVal = "";
2458
2473
  item.showReplyInput = false;
2459
2474
  _this.ref.detectChanges();
@@ -2472,14 +2487,20 @@
2472
2487
  function (e) {
2473
2488
  /** @type {?} */
2474
2489
  var textarea = e.target;
2475
- textarea.style.height = "auto";
2476
- textarea.style.height = textarea.scrollHeight + "px";
2490
+ if (e.type === "focus" && textarea.value) {
2491
+ textarea.style.height = "auto";
2492
+ textarea.style.height = textarea.scrollHeight + "px";
2493
+ }
2494
+ else if (e.type === "input") {
2495
+ textarea.style.height = "auto";
2496
+ textarea.style.height = textarea.scrollHeight + "px";
2497
+ }
2477
2498
  };
2478
2499
  RsCommentaryComponent.decorators = [
2479
2500
  { type: core.Component, args: [{
2480
2501
  selector: "rs-commentary",
2481
- 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",
2482
- 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}"]
2502
+ 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",
2503
+ 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}"]
2483
2504
  }] }
2484
2505
  ];
2485
2506
  /** @nocollapse */
@@ -2494,6 +2515,7 @@
2494
2515
  editPermission: [{ type: core.Input }],
2495
2516
  deletePermission: [{ type: core.Input }],
2496
2517
  isReadOnly: [{ type: core.Input }],
2518
+ filedsKey: [{ type: core.Input }],
2497
2519
  actionComplete: [{ type: core.Output }]
2498
2520
  };
2499
2521
  __decorate([
@@ -2515,7 +2537,7 @@
2515
2537
  __metadata("design:returntype", void 0)
2516
2538
  ], RsCommentaryComponent.prototype, "addReply", null);
2517
2539
  __decorate([
2518
- Debounce(300),
2540
+ Debounce(100),
2519
2541
  __metadata("design:type", Function),
2520
2542
  __metadata("design:paramtypes", [Object]),
2521
2543
  __metadata("design:returntype", void 0)
@@ -2534,6 +2556,8 @@
2534
2556
  /** @type {?} */
2535
2557
  RsCommentaryComponent.prototype.isReadOnly;
2536
2558
  /** @type {?} */
2559
+ RsCommentaryComponent.prototype.filedsKey;
2560
+ /** @type {?} */
2537
2561
  RsCommentaryComponent.prototype.actionComplete;
2538
2562
  /** @type {?} */
2539
2563
  RsCommentaryComponent.prototype.commentVal;
@@ -2559,6 +2583,82 @@
2559
2583
  RsCommentaryComponent.prototype.ref;
2560
2584
  }
2561
2585
 
2586
+ /**
2587
+ * @fileoverview added by tsickle
2588
+ * Generated from: lib/truncated-text-toggle/index.component.ts
2589
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
2590
+ */
2591
+ var TruncatedTextToggleComponent = /** @class */ (function () {
2592
+ function TruncatedTextToggleComponent() {
2593
+ this.showData = "";
2594
+ this.showExpandMoreBtn = false;
2595
+ this.showCollapseBtn = false;
2596
+ }
2597
+ /**
2598
+ * @return {?}
2599
+ */
2600
+ TruncatedTextToggleComponent.prototype.ngOnInit = /**
2601
+ * @return {?}
2602
+ */
2603
+ function () {
2604
+ if (this.data.length > this.maximum) {
2605
+ this.showExpandMoreBtn = true;
2606
+ this.showData = this.data.substring(0, this.maximum) + "...";
2607
+ }
2608
+ else {
2609
+ this.showData = this.data;
2610
+ }
2611
+ };
2612
+ /**
2613
+ * @return {?}
2614
+ */
2615
+ TruncatedTextToggleComponent.prototype.showAll = /**
2616
+ * @return {?}
2617
+ */
2618
+ function () {
2619
+ this.showExpandMoreBtn = false;
2620
+ this.showCollapseBtn = true;
2621
+ this.showData = this.data;
2622
+ };
2623
+ /**
2624
+ * @return {?}
2625
+ */
2626
+ TruncatedTextToggleComponent.prototype.collapse = /**
2627
+ * @return {?}
2628
+ */
2629
+ function () {
2630
+ this.showExpandMoreBtn = true;
2631
+ this.showCollapseBtn = false;
2632
+ this.showData = this.data.substring(0, this.maximum) + "...";
2633
+ };
2634
+ TruncatedTextToggleComponent.decorators = [
2635
+ { type: core.Component, args: [{
2636
+ selector: "truncated-text-toggle",
2637
+ 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",
2638
+ 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)}"]
2639
+ }] }
2640
+ ];
2641
+ /** @nocollapse */
2642
+ TruncatedTextToggleComponent.ctorParameters = function () { return []; };
2643
+ TruncatedTextToggleComponent.propDecorators = {
2644
+ data: [{ type: core.Input }],
2645
+ maximum: [{ type: core.Input }]
2646
+ };
2647
+ return TruncatedTextToggleComponent;
2648
+ }());
2649
+ if (false) {
2650
+ /** @type {?} */
2651
+ TruncatedTextToggleComponent.prototype.data;
2652
+ /** @type {?} */
2653
+ TruncatedTextToggleComponent.prototype.maximum;
2654
+ /** @type {?} */
2655
+ TruncatedTextToggleComponent.prototype.showData;
2656
+ /** @type {?} */
2657
+ TruncatedTextToggleComponent.prototype.showExpandMoreBtn;
2658
+ /** @type {?} */
2659
+ TruncatedTextToggleComponent.prototype.showCollapseBtn;
2660
+ }
2661
+
2562
2662
  /**
2563
2663
  * @fileoverview added by tsickle
2564
2664
  * Generated from: lib/layout/page-list/index.component.ts
@@ -23024,7 +23124,8 @@
23024
23124
  ToolbarItemComponent,
23025
23125
  RsCommentaryComponent,
23026
23126
  RSNavCardGroupComponent,
23027
- RSToolbarComponent
23127
+ RSToolbarComponent,
23128
+ TruncatedTextToggleComponent
23028
23129
  ],
23029
23130
  imports: [
23030
23131
  common.CommonModule,
@@ -23075,6 +23176,7 @@
23075
23176
  ],
23076
23177
  providers: [
23077
23178
  ej2AngularGrids.PageService,
23179
+ ej2AngularGrids.RowDDService,
23078
23180
  ej2AngularGrids.SortService,
23079
23181
  ej2AngularGrids.FilterService,
23080
23182
  ej2AngularGrids.ExcelExportService,
@@ -23175,7 +23277,8 @@
23175
23277
  ToolbarItemComponent,
23176
23278
  RsCommentaryComponent,
23177
23279
  RSNavCardGroupComponent,
23178
- RSToolbarComponent
23280
+ RSToolbarComponent,
23281
+ TruncatedTextToggleComponent
23179
23282
  ],
23180
23283
  entryComponents: [
23181
23284
  NewActionNotificationComponent,
@@ -23221,6 +23324,7 @@
23221
23324
  exports.TagInputComponent = TagInputComponent;
23222
23325
  exports.ToolbarItemComponent = ToolbarItemComponent;
23223
23326
  exports.TranslationService = TranslationService;
23327
+ exports.TruncatedTextToggleComponent = TruncatedTextToggleComponent;
23224
23328
  exports.filterShowSection = filterShowSection;
23225
23329
  exports.ɵa = Debounce;
23226
23330
  exports.ɵb = NewActionNotificationComponent;