raise-common-lib 0.0.101 → 0.0.103

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 (32) hide show
  1. package/bundles/raise-common-lib.umd.js +101 -39
  2. package/bundles/raise-common-lib.umd.js.map +1 -1
  3. package/bundles/raise-common-lib.umd.min.js +2 -2
  4. package/bundles/raise-common-lib.umd.min.js.map +1 -1
  5. package/esm2015/lib/commentary/index.component.js +27 -35
  6. package/esm2015/lib/form/drawer-form/drawer-form.component.js +2 -2
  7. package/esm2015/lib/layout/nav-card-group/constants.js +36 -0
  8. package/esm2015/lib/layout/nav-card-group/index.component.js +65 -0
  9. package/esm2015/lib/layout/page-list/index.component.js +2 -2
  10. package/esm2015/lib/layout/rs-header/index.component.js +1 -1
  11. package/esm2015/lib/raise-common-lib.module.js +6 -3
  12. package/esm2015/public-api.js +2 -1
  13. package/esm2015/raise-common-lib.js +2 -2
  14. package/esm5/lib/commentary/index.component.js +27 -35
  15. package/esm5/lib/form/drawer-form/drawer-form.component.js +2 -2
  16. package/esm5/lib/layout/nav-card-group/constants.js +36 -0
  17. package/esm5/lib/layout/nav-card-group/index.component.js +71 -0
  18. package/esm5/lib/layout/page-list/index.component.js +2 -2
  19. package/esm5/lib/layout/rs-header/index.component.js +1 -1
  20. package/esm5/lib/raise-common-lib.module.js +6 -3
  21. package/esm5/public-api.js +2 -1
  22. package/esm5/raise-common-lib.js +2 -2
  23. package/fesm2015/raise-common-lib.js +96 -40
  24. package/fesm2015/raise-common-lib.js.map +1 -1
  25. package/fesm5/raise-common-lib.js +101 -40
  26. package/fesm5/raise-common-lib.js.map +1 -1
  27. package/lib/commentary/index.component.d.ts +3 -1
  28. package/lib/layout/nav-card-group/constants.d.ts +14 -0
  29. package/lib/layout/nav-card-group/index.component.d.ts +13 -0
  30. package/package.json +1 -1
  31. package/public-api.d.ts +1 -0
  32. package/raise-common-lib.metadata.json +1 -1
@@ -2326,16 +2326,14 @@
2326
2326
  * @return {?}
2327
2327
  */
2328
2328
  function (res) {
2329
- if (res) {
2330
- _this.commentData.unshift({
2331
- messageId: _this.cf.Guid(),
2332
- commentaries: [],
2333
- ownerName: _this.displayName,
2334
- lastModifiedOn: Date.now(),
2335
- messageBody: _this.commentVal,
2336
- });
2337
- _this.commentVal = "";
2338
- }
2329
+ _this.commentData.unshift({
2330
+ messageId: res.data.messageId,
2331
+ commentaries: [],
2332
+ ownerName: _this.displayName,
2333
+ lastModifiedOn: Date.now(),
2334
+ messageBody: _this.commentVal,
2335
+ });
2336
+ _this.commentVal = "";
2339
2337
  }),
2340
2338
  });
2341
2339
  };
@@ -2371,11 +2369,9 @@
2371
2369
  * @return {?}
2372
2370
  */
2373
2371
  function (res) {
2374
- if (res) {
2375
- item.messageBody = _this.editCommentVal;
2376
- item.showCommentEdit = false;
2377
- _this.ref.markForCheck();
2378
- }
2372
+ item.messageBody = _this.editCommentVal;
2373
+ item.showCommentEdit = false;
2374
+ _this.ref.markForCheck();
2379
2375
  }),
2380
2376
  });
2381
2377
  return [2 /*return*/];
@@ -2420,11 +2416,9 @@
2420
2416
  * @return {?}
2421
2417
  */
2422
2418
  function (res) {
2423
- if (res) {
2424
- _this.commentData.splice(idx, 1);
2425
- _this.ref.detectChanges();
2426
- _this.ref.markForCheck();
2427
- }
2419
+ _this.commentData.splice(idx, 1);
2420
+ _this.ref.detectChanges();
2421
+ _this.ref.markForCheck();
2428
2422
  }),
2429
2423
  });
2430
2424
  }));
@@ -2447,19 +2441,17 @@
2447
2441
  * @return {?}
2448
2442
  */
2449
2443
  function (res) {
2450
- if (res) {
2451
- item.commentaries.unshift({
2452
- messageId: _this.cf.Guid(),
2453
- commentaries: [],
2454
- ownerName: _this.displayName,
2455
- lastModifiedOn: Date.now(),
2456
- messageBody: _this.replyVal,
2457
- });
2458
- _this.replyVal = "";
2459
- item.showReplyInput = false;
2460
- _this.ref.detectChanges();
2461
- _this.ref.markForCheck();
2462
- }
2444
+ item.commentaries.unshift({
2445
+ messageId: res.data.messageId,
2446
+ commentaries: [],
2447
+ ownerName: _this.displayName,
2448
+ lastModifiedOn: Date.now(),
2449
+ messageBody: _this.replyVal,
2450
+ });
2451
+ _this.replyVal = "";
2452
+ item.showReplyInput = false;
2453
+ _this.ref.detectChanges();
2454
+ _this.ref.markForCheck();
2463
2455
  }),
2464
2456
  });
2465
2457
  };
@@ -2481,7 +2473,7 @@
2481
2473
  { type: core.Component, args: [{
2482
2474
  selector: "rs-commentary",
2483
2475
  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",
2484
- 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}.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}"]
2476
+ 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}"]
2485
2477
  }] }
2486
2478
  ];
2487
2479
  /** @nocollapse */
@@ -2627,7 +2619,7 @@
2627
2619
  RsPageListComponent.decorators = [
2628
2620
  { type: core.Component, args: [{
2629
2621
  selector: "rs-page-list",
2630
- template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n <ng-content select=\"[titleSlot]\"></ng-content>\r\n </ng-container>\r\n <ng-template #defaultTitle>\r\n <div class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</div>\r\n </ng-template>\r\n <div class=\"rs-sub-section\">\r\n <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-content-wrap\">\r\n <div class=\"rs-content-tab\">\r\n <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-toolbar-wrap\">\r\n <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n <ejs-textbox\r\n type=\"text\"\r\n class=\"e-input\"\r\n [(ngModel)]=\"searchValue\"\r\n (input)=\"onInput()\"\r\n placeholder=\"Search all fields\"\r\n [showClearButton]=\"true\"\r\n autocomplete=\"off\"\r\n ></ejs-textbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"rs-grid-wrap\">\r\n <ng-content select=\"[gridSlot]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n",
2622
+ template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n <ng-content select=\"[titleSlot]\"></ng-content>\r\n </ng-container>\r\n <ng-template #defaultTitle>\r\n <h1 class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</h1>\r\n </ng-template>\r\n <div class=\"rs-sub-section\">\r\n <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-content-wrap\">\r\n <div class=\"rs-content-tab\">\r\n <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-toolbar-wrap\">\r\n <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n <ejs-textbox\r\n type=\"text\"\r\n class=\"e-input\"\r\n [(ngModel)]=\"searchValue\"\r\n (input)=\"onInput()\"\r\n placeholder=\"Search all fields\"\r\n [showClearButton]=\"true\"\r\n autocomplete=\"off\"\r\n ></ejs-textbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"rs-grid-wrap\">\r\n <ng-content select=\"[gridSlot]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n",
2631
2623
  styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-sub-section{width:100%}.rs-page-list-wrap .rs-content-wrap{display:flex;flex-direction:column;flex:1;height:0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px;min-width:auto!important}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-grid-wrap{flex:1;height:0}.rs-page-list-wrap.is-not-inner .rs-content-wrap{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px 0 rgba(0,0,0,.1)}.rs-page-list-wrap .rs-search-input{width:240px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px 0 rgba(31,123,255,.4)!important;border-color:var(--rs-input-hover-border-color)!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group::before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}"]
2632
2624
  }] }
2633
2625
  ];
@@ -3971,6 +3963,73 @@
3971
3963
  DrawerComponent.prototype.service;
3972
3964
  }
3973
3965
 
3966
+ /**
3967
+ * @fileoverview added by tsickle
3968
+ * Generated from: lib/layout/nav-card-group/index.component.ts
3969
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
3970
+ */
3971
+ var RSNavCardGroupComponent = /** @class */ (function () {
3972
+ function RSNavCardGroupComponent(router) {
3973
+ this.router = router;
3974
+ this.navClick = new core.EventEmitter();
3975
+ this.navList = [];
3976
+ this.customNavClick = false; // 接收输入属性
3977
+ // 接收输入属性
3978
+ this.title = "";
3979
+ }
3980
+ /**
3981
+ * @return {?}
3982
+ */
3983
+ RSNavCardGroupComponent.prototype.ngOnInit = /**
3984
+ * @return {?}
3985
+ */
3986
+ function () { };
3987
+ /**
3988
+ * @param {?} item
3989
+ * @return {?}
3990
+ */
3991
+ RSNavCardGroupComponent.prototype.onNavClick = /**
3992
+ * @param {?} item
3993
+ * @return {?}
3994
+ */
3995
+ function (item) {
3996
+ if (!this.customNavClick) {
3997
+ this.router.navigate([item.url], { state: { title: item.title } });
3998
+ }
3999
+ this.navClick.emit(item);
4000
+ };
4001
+ RSNavCardGroupComponent.decorators = [
4002
+ { type: core.Component, args: [{
4003
+ selector: "nav-card-group",
4004
+ template: "<div class=\"rs-setting\">\r\n <h1 class=\"rs-page-title\">{{ title }}</h1>\r\n <div class=\"setting-content\">\r\n <div\r\n class=\"setting-group-card\"\r\n *ngFor=\"let group of navList\"\r\n [ngClass]=\"{ pointer: !group.subList || !group.subList.length }\"\r\n (click)=\"onNavClick(group)\"\r\n >\r\n <header class=\"setting-card-header\">\r\n <div class=\"setting-card-logo\">\r\n <img [src]=\"group.img\" alt=\"\" />\r\n </div>\r\n <h4 class=\"setting-card-title\">{{ group.title }}</h4>\r\n <div\r\n class=\"setting-card-sub-title\"\r\n *ngIf=\"!group.subList || !group.subList.length\"\r\n >\r\n {{ group.subTitle }}\r\n </div>\r\n </header>\r\n <div\r\n class=\"setting-card-desc\"\r\n *ngIf=\"!group.subList || !group.subList.length\"\r\n >\r\n {{ group.desc }}\r\n </div>\r\n <div\r\n class=\"setting-item\"\r\n *ngFor=\"let item of group.subList\"\r\n (click)=\"onNavClick(item)\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
4005
+ styles: [".rs-setting{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-setting .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-setting .setting-content{flex:1;height:0;overflow:auto;display:flex;flex-flow:row wrap;gap:20px;margin:auto;max-width:1886px;padding:4px 20px 40px}.rs-setting .setting-content .setting-group-card{width:100%;min-width:320px;padding:0 12px 16px;border-radius:10px;border:1px solid #eaedf0;background-color:#fff;display:flex;flex-flow:column nowrap}.rs-setting .setting-content .setting-group-card.pointer{cursor:pointer}.rs-setting .setting-content .setting-group-card .setting-card-header{padding:12px 8px;display:flex;flex-flow:column nowrap}.rs-setting .setting-content .setting-group-card .setting-card-header .setting-card-logo{display:flex;flex-flow:column nowrap;gap:4px}.rs-setting .setting-content .setting-group-card .setting-card-header .setting-card-logo img{width:24px;height:24px}.rs-setting .setting-content .setting-group-card .setting-card-header .setting-card-logo::after{content:\" \";width:24px;height:3px;background-color:#ff9618;border-radius:2px}.rs-setting .setting-content .setting-group-card .setting-card-header .setting-card-title{padding:0;margin:12px 0 0;color:#1f3f5c;font-family:Arial;font-size:15px;font-style:normal;font-weight:700;line-height:18px}.rs-setting .setting-content .setting-group-card .setting-card-header .setting-card-sub-title{color:#6c7c90;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;margin-top:6px}.rs-setting .setting-content .setting-group-card .setting-card-desc{padding:6px 8px;color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.rs-setting .setting-content .setting-group-card .setting-item{padding:6px 8px;border-radius:4px;cursor:pointer;color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.rs-setting .setting-content .setting-group-card .setting-item:hover{background-color:#1364b30d}@media screen and (min-width:741px){.rs-setting .setting-content .setting-group-card{width:calc((100% - 20px)/ 2)}}@media screen and (min-width:1297px){.rs-setting .setting-content .setting-group-card{width:calc((100% - 20px * 2)/ 3)}}@media screen and (min-width:1632px){.rs-setting .setting-content .setting-group-card{width:calc((100% - 20px * 3)/ 4)}}@media screen and (min-width:1972px){.rs-setting .setting-content .setting-group-card{width:calc((100% - 20px * 4)/ 5)}}"]
4006
+ }] }
4007
+ ];
4008
+ /** @nocollapse */
4009
+ RSNavCardGroupComponent.ctorParameters = function () { return [
4010
+ { type: router.Router }
4011
+ ]; };
4012
+ RSNavCardGroupComponent.propDecorators = {
4013
+ navClick: [{ type: core.Output }],
4014
+ navList: [{ type: core.Input }],
4015
+ customNavClick: [{ type: core.Input }],
4016
+ title: [{ type: core.Input }]
4017
+ };
4018
+ return RSNavCardGroupComponent;
4019
+ }());
4020
+ if (false) {
4021
+ /** @type {?} */
4022
+ RSNavCardGroupComponent.prototype.navClick;
4023
+ /** @type {?} */
4024
+ RSNavCardGroupComponent.prototype.navList;
4025
+ /** @type {?} */
4026
+ RSNavCardGroupComponent.prototype.customNavClick;
4027
+ /** @type {?} */
4028
+ RSNavCardGroupComponent.prototype.title;
4029
+ /** @type {?} */
4030
+ RSNavCardGroupComponent.prototype.router;
4031
+ }
4032
+
3974
4033
  /**
3975
4034
  * @fileoverview added by tsickle
3976
4035
  * Generated from: assets/language/ja.ts
@@ -20734,7 +20793,7 @@
20734
20793
  { type: core.Component, args: [{
20735
20794
  selector: "rs-header",
20736
20795
  template: "<div class=\"rs-header\">\r\n <div class=\"logo-wrap\">\r\n <div class=\"toggle-menu-wrap\">\r\n <img\r\n class=\"toggle-menu\"\r\n src=\"../../../assets/img/toggle-menu-icon.svg\"\r\n (click)=\"onToggleMenu()\"\r\n />\r\n </div>\r\n <img\r\n class=\"logo\"\r\n src=\"../../../assets/img/raise_logo_main.svg\"\r\n alt=\"logo\"\r\n />\r\n </div>\r\n <div class=\"content-header-wrap\">\r\n <div class=\"bread-crumbs-wrap\">\r\n <ng-content select=\"[breadCrumbs]\"></ng-content>\r\n </div>\r\n <div class=\"rs-header-toolbar-wrap\">\r\n <div class=\"quick-icon-group\">\r\n <ng-content select=\"[toolbar]\"></ng-content>\r\n </div>\r\n <div class=\"line\"></div>\r\n <div class=\"langulage-wrap\">\r\n <button\r\n class=\"e-btn text\"\r\n ejs-dropdownbutton\r\n [items]=\"langOptions\"\r\n (select)=\"selectLanguage($event)\"\r\n >\r\n {{ currentLang.text }}\r\n </button>\r\n </div>\r\n <!-- <div class=\"line\"></div>\r\n <div class=\"last-login-wrap\">\r\n {{ translation?.LAST_LOGIN || \"Last Login\" }}:\r\n {{ lastLoginTime | date : \"dd MMM yy h:mm a\" }}\r\n </div> -->\r\n <div class=\"line\"></div>\r\n <div class=\"user-info-wrap\">\r\n <ng-content select=\"[userInfo]\"></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
20737
- styles: [".rs-header{height:50px;background-color:var(--rs-container-bg);display:flex;justify-content:space-between}.rs-header .logo-wrap{width:240px;display:flex;padding:12px 0 0 20px}.rs-header .logo-wrap .toggle-menu-wrap{cursor:pointer;margin-right:8px;margin-top:2px;width:24px;height:24px}.rs-header .logo-wrap .toggle-menu-wrap:hover{background:#1364b30d;border-radius:6px}.rs-header .logo-wrap .logo{width:77px;height:32px}@media (max-width:1200px){.rs-header .logo-wrap{width:auto}}.rs-header .content-header-wrap{display:flex;justify-content:space-between;align-items:center;flex:1}.rs-header .bread-crumbs-wrap{padding-left:16px}.rs-header .rs-header-toolbar-wrap,.rs-header .rs-header-toolbar-wrap .quick-icon-group{display:flex;align-items:center}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon{width:24px;height:24px;display:flex;justify-content:center;align-items:center;margin-right:24px;cursor:pointer}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon svg{width:16px;height:16px;color:#6c7c90;stroke:#6c7c90}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover{border-radius:4px;background:rgba(31,123,255,.04)}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover svg{color:#1f7bff;stroke:#1f7bff}.rs-header .rs-header-toolbar-wrap .line{width:1px;height:24px;background-color:var(--rs-border-color)}.rs-header .rs-header-toolbar-wrap .langulage-wrap{padding:0 16px}.rs-header .rs-header-toolbar-wrap .last-login-wrap{padding:0 16px;color:var(--rs-labels-color);font-size:11px;font-weight:400;line-height:1}.rs-header .rs-header-toolbar-wrap .user-info-wrap{padding:0 20px 0 16px}"]
20796
+ styles: [".rs-header{height:50px;background-color:var(--rs-container-bg);display:flex;justify-content:space-between}.rs-header .logo-wrap{width:240px;display:flex;padding:12px 0 0 20px}.rs-header .logo-wrap .toggle-menu-wrap{cursor:pointer;margin-right:8px;margin-top:2px;width:24px;height:24px}.rs-header .logo-wrap .toggle-menu-wrap:hover{background:#1364b30d;border-radius:6px}.rs-header .logo-wrap .logo{width:77px;height:32px}@media (max-width:1200px){.rs-header .logo-wrap{width:auto}}.rs-header .content-header-wrap{display:flex;justify-content:space-between;align-items:center;flex:1}.rs-header .bread-crumbs-wrap{padding-left:16px}.rs-header .rs-header-toolbar-wrap,.rs-header .rs-header-toolbar-wrap .quick-icon-group{display:flex;align-items:center}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon{width:32px;height:32px;display:flex;justify-content:center;align-items:center;margin-right:8px;cursor:pointer}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:last-child{margin-right:16px}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon svg{width:24px;height:24px;color:#6c7c90;stroke:#6c7c90}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover{border-radius:4px;background:rgba(31,123,255,.04)}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover svg{color:#1f7bff;stroke:#1f7bff}.rs-header .rs-header-toolbar-wrap .line{width:1px;height:24px;background-color:var(--rs-border-color)}.rs-header .rs-header-toolbar-wrap .langulage-wrap{padding:0 16px}.rs-header .rs-header-toolbar-wrap .last-login-wrap{padding:0 16px;color:var(--rs-labels-color);font-size:11px;font-weight:400;line-height:1}.rs-header .rs-header-toolbar-wrap .user-info-wrap{padding:0 20px 0 16px}"]
20738
20797
  }] }
20739
20798
  ];
20740
20799
  /** @nocollapse */
@@ -22119,7 +22178,7 @@
22119
22178
  DrawerFormComponent.decorators = [
22120
22179
  { type: core.Component, args: [{
22121
22180
  selector: "rs-drawer-form",
22122
- template: "<div #drawerFormEl class=\"rs-drawer-form-container\">\r\n <div class=\"section-container\">\r\n <div #sectionEl class=\"section-item\" *ngFor=\"let section of sections\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"section-expand-checkbox\"\r\n *ngIf=\"section.title\"\r\n />\r\n <div class=\"section-title\" *ngIf=\"section.title\">\r\n <span>{{ section.title }}</span>\r\n </div>\r\n <div class=\"section-form\" *ngIf=\"!section.customKey\">\r\n <div\r\n class=\"form-item\"\r\n *ngFor=\"let field of section.fields\"\r\n [attr.data-required]=\"field.required ? 'yes' : 'no'\"\r\n [attr.data-disabled]=\"field.disabled || formDisabled ? 'yes' : 'no'\"\r\n [attr.data-error]=\"\r\n fieldValidMap[field.formKey] === false ? 'yes' : 'no'\r\n \"\r\n >\r\n <div class=\"form-label\">\r\n <span>{{ field.label }}</span>\r\n <ejs-tooltip\r\n class=\"form-tooltip\"\r\n cssClass=\"rs-drawer-tooltip\"\r\n *ngIf=\"field.tooltip\"\r\n position=\"RightCenter\"\r\n [content]=\"field.tooltip\"\r\n >\r\n <span class=\"tooltip-icon\"></span>\r\n </ejs-tooltip>\r\n </div>\r\n <div class=\"form-content\">\r\n <!-- Radio -->\r\n <rs-radio-group\r\n *ngIf=\"field.fieldFormType === 'Radio'\"\r\n [value]=\"form[field.formKey]\"\r\n [dataSource]=\"optionsMap[field.optionKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [disabled]=\"getDisabled(field)\"\r\n [error]=\"fieldValidMap[field.formKey] === false\"\r\n (valueChange)=\"onChange($event, field)\"\r\n ></rs-radio-group>\r\n <!-- Checkbox -->\r\n <rs-checkbox-group\r\n *ngIf=\"field.fieldFormType === 'Checkbox'\"\r\n [value]=\"form[field.formKey]\"\r\n [dataSource]=\"optionsMap[field.optionKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [disabled]=\"getDisabled(field)\"\r\n [error]=\"fieldValidMap[field.formKey] === false\"\r\n (valueChange)=\"onChange($event, field)\"\r\n ></rs-checkbox-group>\r\n <!-- Switch -->\r\n <rs-switch-input\r\n *ngIf=\"field.fieldFormType === 'Switch'\"\r\n [value]=\"form[field.formKey]\"\r\n [disabled]=\"getDisabled(field)\"\r\n (valueChange)=\"onChange($event, field)\"\r\n ></rs-switch-input>\r\n <!-- Input -->\r\n <input\r\n class=\"e-input\"\r\n *ngIf=\"\r\n field.fieldFormType === 'Text' ||\r\n field.fieldFormType === 'Email'\r\n \"\r\n [value]=\"form[field.formKey]\"\r\n [disabled]=\"getDisabled(field)\"\r\n [required]=\"field.required\"\r\n [attr.maxlength]=\"field.maxlength\"\r\n [attr.minlength]=\"field.minlength\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (input)=\"onInput($event.target.value, field)\"\r\n (change)=\"onChange($event.target.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n autocomplete=\"off\"\r\n />\r\n <!-- Textarea -->\r\n <textarea\r\n class=\"e-input\"\r\n *ngIf=\"field.fieldFormType === 'Textarea'\"\r\n [value]=\"form[field.formKey]\"\r\n [disabled]=\"getDisabled(field)\"\r\n [required]=\"field.required\"\r\n [attr.maxlength]=\"field.maxlength\"\r\n [attr.minlength]=\"field.minlength\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (input)=\"onInput($event.target.value, field)\"\r\n (change)=\"onChange($event.target.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n autocomplete=\"off\"\r\n rows=\"3\"\r\n ></textarea>\r\n <!-- Number Input -->\r\n <ejs-numerictextbox\r\n *ngIf=\"field.fieldFormType === 'Number'\"\r\n [value]=\"form[field.formKey]\"\r\n [max]=\"field.max\"\r\n [min]=\"field.min\"\r\n [format]=\"field.format\"\r\n [enabled]=\"!getDisabled(field)\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n ></ejs-numerictextbox>\r\n <!-- Tags Input -->\r\n <rs-tag-input\r\n *ngIf=\"field.fieldFormType === 'Tags'\"\r\n [value]=\"form[field.formKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [inputMaxlength]=\"field.maxlength\"\r\n [inputMinlength]=\"field.minlength\"\r\n [disabled]=\"getDisabled(field)\"\r\n [error]=\"fieldValidMap[field.formKey] === false\"\r\n (valueChange)=\"onChange($event, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n ></rs-tag-input>\r\n <!-- AutoComplete -->\r\n <ejs-autocomplete\r\n *ngIf=\"field.fieldFormType === 'AutoComplete'\"\r\n [value]=\"form[field.formKey]\"\r\n [dataSource]=\"optionsMap[field.optionKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [enabled]=\"!getDisabled(field)\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (filtering)=\"onFiltering($event, field)\"\r\n (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n ></ejs-autocomplete>\r\n <!-- Dropdown -->\r\n <ejs-dropdownlist\r\n *ngIf=\"field.fieldFormType === 'Dropdown'\"\r\n [value]=\"form[field.formKey]\"\r\n [dataSource]=\"optionsMap[field.optionKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [allowFiltering]=\"\r\n optionsMap[field.optionKey]?.length >= showFilterNumber\r\n \"\r\n [showClearButton]=\"true\"\r\n [enabled]=\"!getDisabled(field)\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (filtering)=\"onFiltering($event, field)\"\r\n (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n ></ejs-dropdownlist>\r\n <!-- MultiSelect -->\r\n <ejs-multiselect\r\n *ngIf=\"field.fieldFormType === 'MultiSelect'\"\r\n mode=\"CheckBox\"\r\n [value]=\"form[field.formKey]\"\r\n [dataSource]=\"optionsMap[field.optionKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [allowFiltering]=\"\r\n optionsMap[field.optionKey]?.length >= showFilterNumber\r\n \"\r\n [showDropDownIcon]=\"true\"\r\n [enabled]=\"!getDisabled(field)\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (filtering)=\"onFiltering($event, field)\"\r\n (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n >\r\n </ejs-multiselect>\r\n <!-- Datepicker -->\r\n <ejs-datepicker\r\n *ngIf=\"field.fieldFormType === 'Datepicker'\"\r\n [value]=\"form[field.formKey]\"\r\n [format]=\"field.format || 'dd-MMM-yyyy'\"\r\n [enabled]=\"!getDisabled(field)\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n ></ejs-datepicker>\r\n <ng-template\r\n #customTemplateContainer\r\n *ngIf=\"field.fieldFormType === 'Custom'\"\r\n ></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"section-form\" *ngIf=\"section.customKey\">\r\n <ng-template #customSectionContainer></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"sections.length > 1 && showAnchor\" class=\"anchor-container\">\r\n <div\r\n class=\"anchor-item\"\r\n *ngFor=\"let section of sections; let index = index\"\r\n [style.display]=\"section.title ? 'block' : 'none'\"\r\n [attr.data-active]=\"scrollIndex === index ? 'yes' : 'no'\"\r\n [attr.data-content]=\"section.title\"\r\n (click)=\"onClickAnchor(index)\"\r\n ></div>\r\n </div>\r\n</div>\r\n",
22181
+ template: "<div #drawerFormEl class=\"rs-drawer-form-container\">\r\n <div class=\"section-container\">\r\n <div #sectionEl class=\"section-item\" *ngFor=\"let section of sections\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"section-expand-checkbox\"\r\n *ngIf=\"section.title\"\r\n />\r\n <div class=\"section-title\" *ngIf=\"section.title\">\r\n <span>{{ section.title }}</span>\r\n </div>\r\n <div class=\"section-form\" *ngIf=\"!section.customKey\">\r\n <div\r\n class=\"form-item\"\r\n *ngFor=\"let field of section.fields\"\r\n [attr.data-required]=\"field.required ? 'yes' : 'no'\"\r\n [attr.data-disabled]=\"field.disabled || formDisabled ? 'yes' : 'no'\"\r\n [attr.data-error]=\"\r\n fieldValidMap[field.formKey] === false ? 'yes' : 'no'\r\n \"\r\n >\r\n <div class=\"form-label\">\r\n <span>{{ field.label }}</span>\r\n <ejs-tooltip\r\n class=\"form-tooltip\"\r\n cssClass=\"rs-drawer-tooltip\"\r\n *ngIf=\"field.tooltip\"\r\n position=\"RightCenter\"\r\n [content]=\"field.tooltip\"\r\n >\r\n <span class=\"tooltip-icon\"></span>\r\n </ejs-tooltip>\r\n </div>\r\n <div class=\"form-content\">\r\n <!-- Radio -->\r\n <rs-radio-group\r\n *ngIf=\"field.fieldFormType === 'Radio'\"\r\n [value]=\"form[field.formKey]\"\r\n [dataSource]=\"optionsMap[field.optionKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [disabled]=\"getDisabled(field)\"\r\n [error]=\"fieldValidMap[field.formKey] === false\"\r\n (valueChange)=\"onChange($event, field)\"\r\n ></rs-radio-group>\r\n <!-- Checkbox -->\r\n <rs-checkbox-group\r\n *ngIf=\"field.fieldFormType === 'Checkbox'\"\r\n [value]=\"form[field.formKey]\"\r\n [dataSource]=\"optionsMap[field.optionKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [disabled]=\"getDisabled(field)\"\r\n [error]=\"fieldValidMap[field.formKey] === false\"\r\n (valueChange)=\"onChange($event, field)\"\r\n ></rs-checkbox-group>\r\n <!-- Switch -->\r\n <rs-switch-input\r\n *ngIf=\"field.fieldFormType === 'Switch'\"\r\n [value]=\"form[field.formKey]\"\r\n [disabled]=\"getDisabled(field)\"\r\n (valueChange)=\"onChange($event, field)\"\r\n ></rs-switch-input>\r\n <!-- Input -->\r\n <input\r\n class=\"e-input\"\r\n *ngIf=\"\r\n field.fieldFormType === 'Text' ||\r\n field.fieldFormType === 'Email'\r\n \"\r\n [value]=\"form[field.formKey]\"\r\n [disabled]=\"getDisabled(field)\"\r\n [required]=\"field.required\"\r\n [attr.maxlength]=\"field.maxlength\"\r\n [attr.minlength]=\"field.minlength\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (input)=\"onInput($event.target.value, field)\"\r\n (change)=\"onChange($event.target.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n autocomplete=\"off\"\r\n />\r\n <!-- Textarea -->\r\n <textarea\r\n class=\"e-input\"\r\n *ngIf=\"field.fieldFormType === 'Textarea'\"\r\n [value]=\"form[field.formKey]\"\r\n [disabled]=\"getDisabled(field)\"\r\n [required]=\"field.required\"\r\n [attr.maxlength]=\"field.maxlength\"\r\n [attr.minlength]=\"field.minlength\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (input)=\"onInput($event.target.value, field)\"\r\n (change)=\"onChange($event.target.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n autocomplete=\"off\"\r\n rows=\"3\"\r\n ></textarea>\r\n <!-- Number Input -->\r\n <ejs-numerictextbox\r\n *ngIf=\"field.fieldFormType === 'Number'\"\r\n [value]=\"form[field.formKey]\"\r\n [max]=\"field.max\"\r\n [min]=\"field.min\"\r\n [format]=\"field.format\"\r\n [enabled]=\"!getDisabled(field)\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n ></ejs-numerictextbox>\r\n <!-- Tags Input -->\r\n <rs-tag-input\r\n *ngIf=\"field.fieldFormType === 'Tags'\"\r\n [value]=\"form[field.formKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [inputMaxlength]=\"field.maxlength\"\r\n [inputMinlength]=\"field.minlength\"\r\n [disabled]=\"getDisabled(field)\"\r\n [error]=\"fieldValidMap[field.formKey] === false\"\r\n (valueChange)=\"onChange($event, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n ></rs-tag-input>\r\n <!-- AutoComplete -->\r\n <ejs-autocomplete\r\n *ngIf=\"field.fieldFormType === 'AutoComplete'\"\r\n [value]=\"form[field.formKey]\"\r\n [dataSource]=\"optionsMap[field.optionKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [enabled]=\"!getDisabled(field)\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (filtering)=\"onFiltering($event, field)\"\r\n (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n ></ejs-autocomplete>\r\n <!-- Dropdown -->\r\n <ejs-dropdownlist\r\n *ngIf=\"field.fieldFormType === 'Dropdown'\"\r\n [value]=\"form[field.formKey]\"\r\n [dataSource]=\"optionsMap[field.optionKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [allowFiltering]=\"true\"\r\n [showClearButton]=\"true\"\r\n [enabled]=\"!getDisabled(field)\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (filtering)=\"onFiltering($event, field)\"\r\n (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n ></ejs-dropdownlist>\r\n <!-- MultiSelect -->\r\n <ejs-multiselect\r\n *ngIf=\"field.fieldFormType === 'MultiSelect'\"\r\n mode=\"CheckBox\"\r\n [value]=\"form[field.formKey]\"\r\n [dataSource]=\"optionsMap[field.optionKey]\"\r\n [fields]=\"getOptionFields(field)\"\r\n [allowFiltering]=\"true\"\r\n [showDropDownIcon]=\"true\"\r\n [enabled]=\"!getDisabled(field)\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (filtering)=\"onFiltering($event, field)\"\r\n (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n >\r\n </ejs-multiselect>\r\n <!-- Datepicker -->\r\n <ejs-datepicker\r\n *ngIf=\"field.fieldFormType === 'Datepicker'\"\r\n [value]=\"form[field.formKey]\"\r\n [format]=\"field.format || 'dd-MMM-yyyy'\"\r\n [enabled]=\"!getDisabled(field)\"\r\n [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n (focus)=\"onFocus(field)\"\r\n (blur)=\"onBlur(field)\"\r\n ></ejs-datepicker>\r\n <ng-template\r\n #customTemplateContainer\r\n *ngIf=\"field.fieldFormType === 'Custom'\"\r\n ></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"section-form\" *ngIf=\"section.customKey\">\r\n <ng-template #customSectionContainer></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"sections.length > 1 && showAnchor\" class=\"anchor-container\">\r\n <div\r\n class=\"anchor-item\"\r\n *ngFor=\"let section of sections; let index = index\"\r\n [style.display]=\"section.title ? 'block' : 'none'\"\r\n [attr.data-active]=\"scrollIndex === index ? 'yes' : 'no'\"\r\n [attr.data-content]=\"section.title\"\r\n (click)=\"onClickAnchor(index)\"\r\n ></div>\r\n </div>\r\n</div>\r\n",
22123
22182
  providers: [common.DatePipe],
22124
22183
  styles: [":host{display:block;margin-top:16px}.rs-drawer-form-container{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:32px}.rs-drawer-form-container .section-container{flex:auto;display:flex;flex-flow:column nowrap;max-width:1576px}.rs-drawer-form-container .section-item{position:relative}.rs-drawer-form-container .section-item:not(:first-child){border-top:1px solid #eaedf0}.rs-drawer-form-container .section-expand-checkbox{display:block;width:100%;height:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;position:absolute;top:0;left:0}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title::before{transform:rotate(-90deg)}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title+.section-form{max-height:0;overflow:hidden}.rs-drawer-form-container .section-title{padding:6px 0;margin-bottom:12px;color:#44566c;font-family:Arial;font-size:13px;font-style:normal;font-weight:700;line-height:16px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:none}.rs-drawer-form-container .section-title::before{content:url(../../assets/img/down-arrow.svg);display:block;height:16px;width:16px;margin-right:8px}.rs-drawer-form-container .section-form{display:flex;flex-flow:row wrap;justify-content:space-between;gap:12px 56px;max-width:1576px;padding:0 24px;margin-bottom:20px}.rs-drawer-form-container .section-form .form-item{min-height:28px;min-width:400px;max-width:700px;width:calc((100% - 56px)/ 2);display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:flex-start}.rs-drawer-form-container .section-form .form-item[data-required=yes] .form-label>span:first-child::after{content:\"*\";color:var(--rs-input-require-label-color)}.rs-drawer-form-container .section-form .form-item .form-label{flex:none;width:144px;height:28px;margin-right:16px;color:#43566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;display:flex;flex-flow:row nowrap;align-items:center}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip{margin-left:4px}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip .tooltip-icon::before{content:\" \";display:block;width:14px;height:14px;background-image:url(../../assets/img/tooltip-icon.svg);background-size:contain;cursor:pointer}.rs-drawer-form-container .section-form .form-item .form-content{flex:auto}@media (max-width:1420px){.rs-drawer-form-container .section-form .form-item{width:100%}}.rs-drawer-form-container .anchor-container{flex:none;display:flex;flex-flow:column nowrap;gap:4px;min-width:120px;height:auto;position:-webkit-sticky;position:sticky;top:56px}.rs-drawer-form-container .anchor-item{min-width:120px;padding:4px 12px;border-left:1px solid #eaedf0;cursor:pointer;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:16px;position:relative}.rs-drawer-form-container .anchor-item::before{content:attr(data-content);color:#44566c;font-weight:400;position:absolute;left:12px}.rs-drawer-form-container .anchor-item::after{content:attr(data-content);visibility:hidden;color:#1364b3;font-weight:700}.rs-drawer-form-container .anchor-item[data-active=yes]{border-color:#1f7bff}.rs-drawer-form-container .anchor-item[data-active=yes]::before{visibility:hidden}.rs-drawer-form-container .anchor-item[data-active=yes]::after{visibility:visible}.rs-drawer-tooltip.e-tooltip-wrap{border:none;background-color:#44566c}.rs-drawer-tooltip.e-tooltip-wrap .e-arrow-tip{height:4px;visibility:hidden}"]
22125
22184
  }] }
@@ -22669,7 +22728,8 @@
22669
22728
  DrawerComponent,
22670
22729
  DrawerFormComponent,
22671
22730
  ToolbarItemComponent,
22672
- RsCommentaryComponent
22731
+ RsCommentaryComponent,
22732
+ RSNavCardGroupComponent
22673
22733
  ],
22674
22734
  imports: [
22675
22735
  common.CommonModule,
@@ -22818,7 +22878,8 @@
22818
22878
  DrawerComponent,
22819
22879
  DrawerFormComponent,
22820
22880
  ToolbarItemComponent,
22821
- RsCommentaryComponent
22881
+ RsCommentaryComponent,
22882
+ RSNavCardGroupComponent
22822
22883
  ],
22823
22884
  entryComponents: [
22824
22885
  NewActionNotificationComponent,
@@ -22853,6 +22914,7 @@
22853
22914
  exports.RSAsideComponent = RSAsideComponent;
22854
22915
  exports.RSFooterComponent = RSFooterComponent;
22855
22916
  exports.RSHeaderComponent = RSHeaderComponent;
22917
+ exports.RSNavCardGroupComponent = RSNavCardGroupComponent;
22856
22918
  exports.RadioGroupComponent = RadioGroupComponent;
22857
22919
  exports.RaiseCommonLibModule = RaiseCommonLibModule;
22858
22920
  exports.RsCommentaryComponent = RsCommentaryComponent;