raise-common-lib 0.0.213 → 0.0.215

package/fesm2015/raise-common-lib.js

@@ -1076,10 +1076,57 @@ class FloatBoxComponent {
      * @return {?}
      */
     setFixedContentPosition() {
+        const { top: y, left: x, width, height, } = this.rootElement.nativeElement.getBoundingClientRect();
+        // 临时显示内容以获取尺寸
+        /** @type {?} */
+        const wasVisible = this.contentElement.nativeElement.style.display !== "none";
+        this.contentElement.nativeElement.style.visibility = "hidden";
+        this.contentElement.nativeElement.style.display = "block";
+        /** @type {?} */
+        const contentRect = this.contentElement.nativeElement.getBoundingClientRect();
+        /** @type {?} */
+        const contentWidth = contentRect.width;
+        /** @type {?} */
+        const contentHeight = contentRect.height;
+        // 获取视口尺寸
+        /** @type {?} */
+        const viewportWidth = window.innerWidth;
+        /** @type {?} */
+        const viewportHeight = window.innerHeight;
+        /** @type {?} */
+        const SAFE_MARGIN = 12;
+        // 边界检测：计算最佳 placement
+        /** @type {?} */
+        let finalPlacement = this.placement;
+        if (this.placement === "top" && y < contentHeight + SAFE_MARGIN) {
+            if (viewportHeight - (y + height) >= contentHeight + SAFE_MARGIN) {
+                finalPlacement = "bottom";
+            }
+        }
+        else if (this.placement === "bottom" && viewportHeight - (y + height) < contentHeight + SAFE_MARGIN) {
+            if (y >= contentHeight + SAFE_MARGIN) {
+                finalPlacement = "top";
+            }
+        }
+        else if (this.placement === "left" && x < contentWidth + SAFE_MARGIN) {
+            if (viewportWidth - (x + width) >= contentWidth + SAFE_MARGIN) {
+                finalPlacement = "right";
+            }
+        }
+        else if (this.placement === "right" && viewportWidth - (x + width) < contentWidth + SAFE_MARGIN) {
+            if (x >= contentWidth + SAFE_MARGIN) {
+                finalPlacement = "left";
+            }
+        }
+        // 保存调整后的 placement
+        this.actualPlacement = finalPlacement;
+        // 对于 fixed="no" 的情况，只更新 data-placement，让 CSS 处理
         if (this.fixed === "no") {
+            this.contentElement.nativeElement.style.visibility = "";
+            this.contentElement.nativeElement.style.display = wasVisible ? "" : "none";
             return;
         }
-        const { top: y, left: x, width, height, } = this.rootElement.nativeElement.getBoundingClientRect();
+        // 对于 fixed="yes" 的情况，计算具体位置
         /** @type {?} */
         let top = "0";
         /** @type {?} */
@@ -1088,7 +1135,7 @@ class FloatBoxComponent {
         let translateX = "0";
         /** @type {?} */
         let translateY = "0";
-        switch (this.placement + "_" + this.position) {
+        switch (finalPlacement + "_" + this.position) {
             case "top_start":
                 top = y + "px";
                 left = x - 8 + "px";
@@ -1152,9 +1199,49 @@ class FloatBoxComponent {
                 translateX = "-100%";
                 break;
         }
+        // 计算实际渲染位置（考虑 transform）进行边界调整
+        /** @type {?} */
+        let actualLeft = parseFloat(left) || 0;
+        /** @type {?} */
+        let actualTop = parseFloat(top) || 0;
+        if (translateX === "-50%") {
+            actualLeft = actualLeft - contentWidth / 2;
+        }
+        else if (translateX === "-100%") {
+            actualLeft = actualLeft - contentWidth;
+        }
+        if (translateY === "-50%") {
+            actualTop = actualTop - contentHeight / 2;
+        }
+        else if (translateY === "-100%") {
+            actualTop = actualTop - contentHeight;
+        }
+        // 水平边界调整
+        if (finalPlacement === "top" || finalPlacement === "bottom") {
+            if (actualLeft < SAFE_MARGIN) {
+                left = (x + SAFE_MARGIN) + "px";
+                translateX = "0";
+            }
+            else if (actualLeft + contentWidth > viewportWidth - SAFE_MARGIN) {
+                left = (viewportWidth - contentWidth - SAFE_MARGIN) + "px";
+                translateX = "0";
+            }
+        }
+        // 垂直边界调整
+        else {
+            if (actualTop < SAFE_MARGIN) {
+                top = (y + SAFE_MARGIN) + "px";
+                translateY = "0";
+            }
+            else if (actualTop + contentHeight > viewportHeight - SAFE_MARGIN) {
+                top = (viewportHeight - contentHeight - SAFE_MARGIN) + "px";
+                translateY = "0";
+            }
+        }
         this.contentElement.nativeElement.style.top = top;
         this.contentElement.nativeElement.style.left = left;
         this.contentElement.nativeElement.style.transform = `translate(${translateX}, ${translateY})`;
+        this.contentElement.nativeElement.style.visibility = "visible";
     }
     /**
      * @return {?}
@@ -1172,13 +1259,15 @@ class FloatBoxComponent {
      * @return {?}
      */
     onMouseEnter() {
-        if (this.fixed === "no" || this.trigger !== "hover") {
+        if (this.trigger !== "hover") {
             return;
         }
         this.opened = "yes";
         this.openChange.emit(true);
         this.setFixedContentPosition();
-        window.addEventListener("mousemove", this.onMoveOutside);
+        if (this.fixed === "yes") {
+            window.addEventListener("mousemove", this.onMoveOutside);
+        }
     }
     /**
      * @return {?}
@@ -1198,7 +1287,7 @@ class FloatBoxComponent {
 FloatBoxComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-float-box",
-                template: "<div\r\n  #element\r\n  class=\"float-box-container\"\r\n  [attr.data-trigger]=\"trigger\"\r\n  (click)=\"onClickContainer()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n>\r\n  <ng-content></ng-content>\r\n  <div\r\n    #content\r\n    class=\"float-box-content\"\r\n    [attr.data-placement]=\"placement\"\r\n    [attr.data-position]=\"position\"\r\n    [attr.data-animation]=\"animation\"\r\n    [attr.data-fixed]=\"fixed\"\r\n    [attr.data-opened]=\"opened\"\r\n  >\r\n    <div class=\"float-box-show-content\">\r\n      <ng-content select=\"[float-content]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n  #element\r\n  class=\"float-box-container\"\r\n  [attr.data-trigger]=\"trigger\"\r\n  (click)=\"onClickContainer()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n>\r\n  <ng-content></ng-content>\r\n  <div\r\n    #content\r\n    class=\"float-box-content\"\r\n    [attr.data-placement]=\"actualPlacement || placement\"\r\n    [attr.data-position]=\"position\"\r\n    [attr.data-animation]=\"animation\"\r\n    [attr.data-fixed]=\"fixed\"\r\n    [attr.data-opened]=\"opened\"\r\n  >\r\n    <div class=\"float-box-show-content\">\r\n      <ng-content select=\"[float-content]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 styles: [".float-box-container{position:relative}.float-box-container[data-trigger=click]>.float-box-content[data-opened=no],.float-box-container[data-trigger=hover]:not(:hover)>.float-box-content{display:none}.float-box-container>.float-box-content[data-fixed=no]{padding:8px;--top:0;--left:0;--translate-x:0;--translate-y:0;position:absolute;top:var(--top);left:var(--left);transform:translate(var(--translate-x),var(--translate-y));z-index:10}.float-box-container>.float-box-content[data-fixed=no][data-animation=yes]{-webkit-animation:.25s ease-in-out;animation:.25s ease-in-out}.float-box-container>.float-box-content[data-fixed=no][data-placement=top]{--translate-y:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-animation=true]{-webkit-animation-name:open-from-top;animation-name:open-from-top}.float-box-container>.float-box-content[data-fixed=no][data-placement=left]{--translate-x:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=right]{--left:100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom]{--top:100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=start],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=start]{--left:-8px}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=center],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=center]{--left:50%;--translate-x:-50%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=end],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=end]{--left:calc(100% + 8px);--translate-x:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=start],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=start]{--top:-8px}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=start][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=start][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=center],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=center]{--top:50%;--translate-y:-50%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=center][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=center][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=end],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=end]{--top:calc(100% + 8px);--translate-y:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=end][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=end][data-animation=yes]{-webkit-animation-name:open-from-top;animation-name:open-from-top}@-webkit-keyframes open-from-top{from{margin-top:-8px;opacity:.4}to{margin:0;opacity:1}}@keyframes open-from-top{from{margin-top:-8px;opacity:.4}to{margin:0;opacity:1}}@-webkit-keyframes open-from-bottom{from{margin-top:8px;opacity:.4}to{margin:0;opacity:1}}@keyframes open-from-bottom{from{margin-top:8px;opacity:.4}to{margin:0;opacity:1}}::ng-deep #kt-float-box-fixed-container{width:0;height:0;z-index:100000}::ng-deep #kt-float-box-fixed-container .float-box-content[data-fixed=yes]{padding:8px;position:fixed;z-index:10}::ng-deep #kt-float-box-fixed-container .float-box-content[data-fixed=yes][data-opened=no]{display:none}.float-box-show-content{padding:8px 8px 12px;border-radius:8px;background:#fff;box-shadow:0 0 8px 0 rgba(0,0,0,.25)}"]
             }] }
 ];
@@ -1228,6 +1317,8 @@ if (false) {
     /** @type {?} */
     FloatBoxComponent.prototype._fixed;
     /** @type {?} */
+    FloatBoxComponent.prototype.actualPlacement;
+    /** @type {?} */
     FloatBoxComponent.prototype.openChange;
     /** @type {?} */
     FloatBoxComponent.prototype.rootElement;
@@ -1535,7 +1626,7 @@ NewActionNotificationComponent.decorators = [
     { type: Component, args: [{
                 selector: "kt-new-action-notification",
                 template: "<div class=\"new-action-notification-container\" [attr.data-collapse]=\"collapsed\">\r\n\t<span\r\n\t\tclass=\"notification-icon\"\r\n\t\t[attr.data-type]=\"config.type === 'Loading' ? 'loading' : 'default'\"\r\n\t\t[attr.data-status]=\"config.status?.toLowerCase()\"\r\n\t\t(click)=\"expandNotification()\"\r\n\t></span>\r\n\t<span\r\n\t\tclass=\"notification-icon notification-loading\"\r\n\t\t*ngIf=\"config.type === 'Progress'\"\r\n\t></span>\r\n\t<div class=\"notification-content\">\r\n\t\t<span *ngIf=\"config.type === 'Detail'\" class=\"notification-title\">\r\n\t\t\t{{ config.title }}\r\n\t\t</span>\r\n\t\t<span class=\"notification-text\">{{ config.message }}</span>\r\n\t\t<a *ngIf=\"config.type === 'Detail'\" class=\"notification-link\">View</a>\r\n\t</div>\r\n\t<button\r\n\t\ttype=\"button\"\r\n\t\tclass=\"notification-close\"\r\n\t\t[attr.data-type]=\"config.type === 'Loading' ? 'loading' : 'default'\"\r\n\t\t(click)=\"closeNotification()\"\r\n\t></button>\r\n</div>\r\n",
-                styles: ["::ng-deep .new-action-notification{margin:0;padding:64px 12px;background-color:transparent!important;background-image:none!important;box-shadow:none}::ng-deep .mat-mdc-snack-bar-container .mdc-snackbar__surface{box-shadow:none;background-color:transparent}.new-action-notification-container{min-width:320px;max-width:400px;padding:12px;border-radius:10px;background-color:#fff;box-shadow:0 0 8px 0 #00000033;display:flex;flex-flow:row nowrap;align-items:flex-start;justify-content:flex-end}.new-action-notification-container .notification-icon{flex:none;width:24px;height:24px;margin-right:8px}.new-action-notification-container .notification-icon[data-type=default][data-status=success]::before{content:url(../../../assets/img/notification-status-success.svg)}.new-action-notification-container .notification-icon[data-type=default][data-status=warning]::before{content:url(../../../assets/img/notification-status-warning.svg)}.new-action-notification-container .notification-icon[data-type=default][data-status=error]::before{content:url(../../../assets/img/notification-status-error.svg)}.new-action-notification-container .notification-icon[data-type=loading]{-webkit-animation:2s linear infinite rotate;animation:2s linear infinite rotate}@-webkit-keyframes rotate{from{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes rotate{from{transform:rotate(360deg)}to{transform:rotate(0)}}.new-action-notification-container .notification-icon[data-type=loading]::before{content:url(../../../assets/img/notification-status-loading.svg)}.new-action-notification-container .notification-close{flex:none;height:24px;margin-left:24px;padding:0;border:none;background-color:transparent}.new-action-notification-container .notification-close[data-type=default]::before{content:url(../../../assets/img/notification-close.svg)}.new-action-notification-container .notification-close[data-type=loading]::before{content:url(../../../assets/img/notification-collapse.svg)}.new-action-notification-container .notification-content{flex:auto;min-height:24px;padding-top:4px;display:flex;flex-flow:column nowrap}.new-action-notification-container .notification-content .notification-title{margin-bottom:8px;color:#44566c;font-family:Arial;font-size:13px;font-style:normal;font-weight:700;line-height:19px}.new-action-notification-container .notification-content .notification-text{color:#1f3f5c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.new-action-notification-container .notification-content .notification-link{margin-top:6px;cursor:pointer;color:#1364b3;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px}.new-action-notification-container[data-collapse=true]{padding:0;background-color:transparent;box-shadow:none}.new-action-notification-container[data-collapse=true] .notification-icon{cursor:pointer}.new-action-notification-container[data-collapse=true] .notification-close,.new-action-notification-container[data-collapse=true] .notification-content{display:none}"]
+                styles: ["::ng-deep .new-action-notification{margin:0;padding:64px 12px;background-color:transparent!important;background-image:none!important;box-shadow:none}::ng-deep .mat-mdc-snack-bar-container .mdc-snackbar__surface{box-shadow:none;background-color:transparent}.new-action-notification-container{min-width:320px;max-width:400px;padding:12px;border-radius:10px;background-color:#fff;box-shadow:0 0 8px 0 #00000033;display:flex;flex-flow:row nowrap;align-items:flex-start;justify-content:flex-end}.new-action-notification-container .notification-icon{flex:none;width:24px;height:24px;margin-right:8px}.new-action-notification-container .notification-icon[data-type=default][data-status=success]::before{content:url(../../assets/img/notification-status-success.svg)}.new-action-notification-container .notification-icon[data-type=default][data-status=warning]::before{content:url(../../assets/img/notification-status-warning.svg)}.new-action-notification-container .notification-icon[data-type=default][data-status=error]::before{content:url(../../assets/img/notification-status-error.svg)}.new-action-notification-container .notification-icon[data-type=loading]{-webkit-animation:2s linear infinite rotate;animation:2s linear infinite rotate}@-webkit-keyframes rotate{from{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes rotate{from{transform:rotate(360deg)}to{transform:rotate(0)}}.new-action-notification-container .notification-icon[data-type=loading]::before{content:url(../../assets/img/notification-status-loading.svg)}.new-action-notification-container .notification-close{flex:none;height:24px;margin-left:24px;padding:0;border:none;background-color:transparent}.new-action-notification-container .notification-close[data-type=default]::before{content:url(../../assets/img/notification-close.svg)}.new-action-notification-container .notification-close[data-type=loading]::before{content:url(../../assets/img/notification-collapse.svg)}.new-action-notification-container .notification-content{flex:auto;min-height:24px;padding-top:4px;display:flex;flex-flow:column nowrap}.new-action-notification-container .notification-content .notification-title{margin-bottom:8px;color:#44566c;font-family:Arial;font-size:13px;font-style:normal;font-weight:700;line-height:19px}.new-action-notification-container .notification-content .notification-text{color:#1f3f5c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.new-action-notification-container .notification-content .notification-link{margin-top:6px;cursor:pointer;color:#1364b3;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px}.new-action-notification-container[data-collapse=true]{padding:0;background-color:transparent;box-shadow:none}.new-action-notification-container[data-collapse=true] .notification-icon{cursor:pointer}.new-action-notification-container[data-collapse=true] .notification-close,.new-action-notification-container[data-collapse=true] .notification-content{display:none}"]
             }] }
 ];
 /** @nocollapse */
@@ -2481,7 +2572,7 @@ RsPageTabComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-page-tab",
                 template: "<div class=\"rs-page-list-wrap\">\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  <ejs-tab\r\n    class=\"rs-tab\"\r\n    #tabObj\r\n    (selected)=\"onTabClick($event)\"\r\n    [animation]=\"animation\"\r\n\t  overflowMode=\"Popup\"\r\n    heightAdjustMode=\"None\"\r\n    [selectedItem]=\"selectedItemIndex\"\r\n  >\r\n    <e-tabitems>\r\n      <e-tabitem *ngFor=\"let item of tabList\">\r\n        <ng-template #headerText>\r\n          <div>{{ item.title }}</div>\r\n        </ng-template>\r\n      </e-tabitem>\r\n    </e-tabitems>\r\n  </ejs-tab>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[tabContentSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n",
-                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-tab{padding:0 20px}.rs-page-list-wrap .rs-tab .e-tab-header::before{display:none}.rs-page-list-wrap .rs-tab .e-toolbar-items{gap:32px;min-height:36px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item{border:0}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-wrap{padding:0;border:0;position:relative;height:36px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-wrap::before{content:\" \";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:transparent}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-text{color:#5f6f81;font-family:Arial;font-size:13px;font-style:normal;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap::before{background-color:#1f7bff}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item.e-active .e-tab-text{color:#44566c}.rs-page-list-wrap .rs-tab .e-hor-nav{width:24px;height:24px;min-height:24px;top:3px;border-radius:4px;background-color:transparent!important;border:1px solid #eaedf0!important}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons{box-shadow:none;background-color:transparent!important;border-color:transparent!important;background-image:url(../../../assets/img/icon-more.svg);background-size:14px 3px;background-repeat:no-repeat;background-position:4px 14px}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons::before{display:none}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons:hover{background-color:#eff5fb!important;border-color:#b1d0fc!important;background-image:url(../../../assets/img/icon-more-active.svg)}.rs-page-list-wrap .rs-tab .e-toolbar-pop{min-width:160px;border-radius:10px;background:#fff;box-shadow:0 0 8px 0 rgba(0,0,0,.25);padding:8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap{padding:0 8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-tab-text{color:#44566c;font-family:Arial;font-size:13px;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover{border-radius:6px;background:rgba(31,123,255,.05)}.rs-page-list-wrap .rs-grid-wrap{flex:1;height:0}"]
+                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-tab{padding:0 20px}.rs-page-list-wrap .rs-tab .e-tab-header::before{display:none}.rs-page-list-wrap .rs-tab .e-toolbar-items{gap:32px;min-height:36px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item{border:0}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-wrap{padding:0;border:0;position:relative;height:36px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-wrap::before{content:\" \";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:transparent}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-text{color:#5f6f81;font-family:Arial;font-size:13px;font-style:normal;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap::before{background-color:#1f7bff}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item.e-active .e-tab-text{color:#44566c}.rs-page-list-wrap .rs-tab .e-hor-nav{width:24px;height:24px;min-height:24px;top:3px;border-radius:4px;background-color:transparent!important;border:1px solid #eaedf0!important}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons{box-shadow:none;background-color:transparent!important;border-color:transparent!important;background-image:url(../../assets/img/icon-more.svg);background-size:14px 3px;background-repeat:no-repeat;background-position:4px 14px}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons::before{display:none}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons:hover{background-color:#eff5fb!important;border-color:#b1d0fc!important;background-image:url(../../assets/img/icon-more-active.svg)}.rs-page-list-wrap .rs-tab .e-toolbar-pop{min-width:160px;border-radius:10px;background:#fff;box-shadow:0 0 8px 0 rgba(0,0,0,.25);padding:8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap{padding:0 8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-tab-text{color:#44566c;font-family:Arial;font-size:13px;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover{border-radius:6px;background:rgba(31,123,255,.05)}.rs-page-list-wrap .rs-grid-wrap{flex:1;height:0}"]
             }] }
 ];
 RsPageTabComponent.propDecorators = {
@@ -3613,7 +3704,7 @@ DrawerComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-drawer",
                 template: "<div #element id=\"rs-drawer-container\" class=\"rs-drawer-container\">\r\n  <div class=\"rs-drawer-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div\r\n    #drawer\r\n    class=\"rs-drawer\"\r\n    [attr.data-mode]=\"config.mode\"\r\n    [attr.data-opened]=\"isOpened ? 'yes' : 'no'\"\r\n    [attr.data-animation]=\"useAnimation\"\r\n    [hidden]=\"hiddenDrawer\"\r\n    (animationend)=\"onAnimationEnd()\"\r\n  >\r\n    <div class=\"drawer-header\" #header>\r\n      <button class=\"drawer-return-button\" (click)=\"hide()\">\r\n        <span class=\"drawer-sub-title\" *ngIf=\"config.subTitle\">\r\n          {{ config.subTitle }}\r\n        </span>\r\n      </button>\r\n      <div class=\"drawer-title\">{{ config.title }}</div>\r\n      <div class=\"drawer-header-slot\" #headerSlot></div>\r\n    </div>\r\n    <div class=\"drawer-top-slot\" #topSlot></div>\r\n    <div class=\"drawer-content-box\">\r\n      <div class=\"drawer-content\" #content>\r\n        <div class=\"drawer-content-container\">\r\n          <ng-template #dynamicComponentContainer></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"drawer-toolbar-slot\" #toolbarSlot></div>\r\n  </div>\r\n</div>\r\n",
-                styles: [":host{display:block;height:100%}#rs-drawer-container{height:100%}.rs-drawer-container{height:100%;background-color:transparent;overflow:hidden;position:relative}.rs-drawer-container .rs-drawer-content{width:100%;height:100%;overflow:auto;margin-right:0!important}.rs-drawer-container .rs-drawer-content::-webkit-scrollbar{width:5px;height:5px;background:#fff;position:static;z-index:999;border-radius:10px}.rs-drawer-container .rs-drawer-content::-webkit-scrollbar-thumb{background:#eaedf0}.rs-drawer-container .rs-drawer{width:100%;height:100%;border-left:none;background-color:transparent;overflow:visible;pointer-events:none;opacity:0;display:flex;flex-flow:column nowrap;position:absolute;z-index:2;top:0;left:100%}.rs-drawer-container .rs-drawer[data-opened=yes]{left:0;opacity:1}.rs-drawer-container .rs-drawer[data-animation=yes][data-opened=yes]{-webkit-animation:.5s ease-in-out drawer-open;animation:.5s ease-in-out drawer-open}@-webkit-keyframes drawer-open{from{left:100%;opacity:0}to{left:0;opacity:1}}@keyframes drawer-open{from{left:100%;opacity:0}to{left:0;opacity:1}}.rs-drawer-container .rs-drawer[data-animation=yes][data-opened=no]{-webkit-animation:.5s ease-in-out drawer-close;animation:.5s ease-in-out drawer-close}@-webkit-keyframes drawer-close{from{left:0;opacity:1}to{left:100%;opacity:0}}@keyframes drawer-close{from{left:0;opacity:1}to{left:100%;opacity:0}}.rs-drawer-container .rs-drawer[hidden]{display:none}.rs-drawer-container .rs-drawer .drawer-header{flex:none;display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;box-sizing:content-box;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button{flex:none;display:flex;flex-flow:row nowrap;align-items:center;padding:0;border:none;background-color:transparent;cursor:pointer}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button::before{content:url(../../../assets/img/drawer-back.svg);width:24px;height:24px;margin-right:8px;transition:transform 125ms ease-in-out}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button:hover::before{transform:translateX(-2px)}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button .drawer-sub-title{margin-right:12px;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title{flex:none;min-height:14px;padding:0 12px;border-left:1px solid #bdc4ca;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title:empty{padding:0}.rs-drawer-container .rs-drawer .drawer-content-box{flex:auto;height:0;background-color:#f7fafb;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-content{height:100%;padding:0 20px;border:1px solid #ebedf0;border-radius:15px;background-color:#fff;display:flex;flex-flow:column nowrap}.rs-drawer-container .rs-drawer .drawer-content .drawer-content-container{flex:auto;overflow:hidden auto}.rs-drawer-container .rs-drawer .drawer-toolbar-slot{flex:none;height:32px;margin-left:auto;display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-toolbar-slot:empty{display:none}.rs-drawer-container .rs-drawer .drawer-top-slot{flex:none;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-top-slot:empty{height:var(--drawer-top,0);pointer-events:none}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-header{height:46px;padding:0 12px 0 8px;background-color:#f7fafb}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-header .drawer-sub-title,.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-header .drawer-title{color:#1f3f5c;font-size:15px;font-weight:700;line-height:18px}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-content{padding-bottom:20px}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-content .drawer-content-container{margin-right:-20px;padding-right:20px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-top-slot:empty+.drawer-content-box{padding-top:calc((var(--drawer-top,0) + 1) * 16px)}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header{height:24px;padding:6px 0;border-bottom:1px solid #eaedf0}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header .drawer-sub-title,.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header .drawer-title{color:#44566c;font-size:12px;line-height:14px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header .drawer-title{font-weight:700}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-content .drawer-content-container{margin-right:-20px;padding-right:20px;padding-left:8px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar-slot{width:100%;padding:16px 0;box-sizing:content-box;border-top:1px solid #eaedf0}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar]{display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center;gap:12px}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button{display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;gap:6px;min-width:80px;height:32px;padding:0 12px;border:1px solid #adb5bd;border-radius:4px;background-color:#fff;cursor:pointer;color:#44566c;font-size:13px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button:hover{border-color:#6c7c90}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button:disabled{opacity:1!important;border-color:#6c7c9066;color:#44566c66;cursor:unset}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary{border:none;background-color:#1364b3;color:#fff}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary:hover{background-color:#176bca}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary:disabled{background-color:#1364b366}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button img{width:16px;height:16px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=outer] .drawer-toolbar-slot [drawer-toolbar] button{height:26px;font-size:12px;line-height:14px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar-slot [drawer-toolbar] button img{display:none}"]
+                styles: [":host{display:block;height:100%}#rs-drawer-container{height:100%}.rs-drawer-container{height:100%;background-color:transparent;overflow:hidden;position:relative}.rs-drawer-container .rs-drawer-content{width:100%;height:100%;overflow:auto;margin-right:0!important}.rs-drawer-container .rs-drawer-content::-webkit-scrollbar{width:5px;height:5px;background:#fff;position:static;z-index:999;border-radius:10px}.rs-drawer-container .rs-drawer-content::-webkit-scrollbar-thumb{background:#eaedf0}.rs-drawer-container .rs-drawer{width:100%;height:100%;border-left:none;background-color:transparent;overflow:visible;pointer-events:none;opacity:0;display:flex;flex-flow:column nowrap;position:absolute;z-index:2;top:0;left:100%}.rs-drawer-container .rs-drawer[data-opened=yes]{left:0;opacity:1}.rs-drawer-container .rs-drawer[data-animation=yes][data-opened=yes]{-webkit-animation:.5s ease-in-out drawer-open;animation:.5s ease-in-out drawer-open}@-webkit-keyframes drawer-open{from{left:100%;opacity:0}to{left:0;opacity:1}}@keyframes drawer-open{from{left:100%;opacity:0}to{left:0;opacity:1}}.rs-drawer-container .rs-drawer[data-animation=yes][data-opened=no]{-webkit-animation:.5s ease-in-out drawer-close;animation:.5s ease-in-out drawer-close}@-webkit-keyframes drawer-close{from{left:0;opacity:1}to{left:100%;opacity:0}}@keyframes drawer-close{from{left:0;opacity:1}to{left:100%;opacity:0}}.rs-drawer-container .rs-drawer[hidden]{display:none}.rs-drawer-container .rs-drawer .drawer-header{flex:none;display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;box-sizing:content-box;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button{flex:none;display:flex;flex-flow:row nowrap;align-items:center;padding:0;border:none;background-color:transparent;cursor:pointer}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button::before{content:url(../../assets/img/drawer-back.svg);width:24px;height:24px;margin-right:8px;transition:transform 125ms ease-in-out}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button:hover::before{transform:translateX(-2px)}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button .drawer-sub-title{margin-right:12px;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title{flex:none;min-height:14px;padding:0 12px;border-left:1px solid #bdc4ca;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title:empty{padding:0}.rs-drawer-container .rs-drawer .drawer-content-box{flex:auto;height:0;background-color:#f7fafb;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-content{height:100%;padding:0 20px;border:1px solid #ebedf0;border-radius:15px;background-color:#fff;display:flex;flex-flow:column nowrap}.rs-drawer-container .rs-drawer .drawer-content .drawer-content-container{flex:auto;overflow:hidden auto}.rs-drawer-container .rs-drawer .drawer-toolbar-slot{flex:none;height:32px;margin-left:auto;display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-toolbar-slot:empty{display:none}.rs-drawer-container .rs-drawer .drawer-top-slot{flex:none;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-top-slot:empty{height:var(--drawer-top,0);pointer-events:none}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-header{height:46px;padding:0 12px 0 8px;background-color:#f7fafb}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-header .drawer-sub-title,.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-header .drawer-title{color:#1f3f5c;font-size:15px;font-weight:700;line-height:18px}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-content{padding-bottom:20px}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-content .drawer-content-container{margin-right:-20px;padding-right:20px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-top-slot:empty+.drawer-content-box{padding-top:calc((var(--drawer-top,0) + 1) * 16px)}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header{height:24px;padding:6px 0;border-bottom:1px solid #eaedf0}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header .drawer-sub-title,.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header .drawer-title{color:#44566c;font-size:12px;line-height:14px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header .drawer-title{font-weight:700}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-content .drawer-content-container{margin-right:-20px;padding-right:20px;padding-left:8px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar-slot{width:100%;padding:16px 0;box-sizing:content-box;border-top:1px solid #eaedf0}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar]{display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center;gap:12px}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button{display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;gap:6px;min-width:80px;height:32px;padding:0 12px;border:1px solid #adb5bd;border-radius:4px;background-color:#fff;cursor:pointer;color:#44566c;font-size:13px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button:hover{border-color:#6c7c90}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button:disabled{opacity:1!important;border-color:#6c7c9066;color:#44566c66;cursor:unset}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary{border:none;background-color:#1364b3;color:#fff}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary:hover{background-color:#176bca}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary:disabled{background-color:#1364b366}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button img{width:16px;height:16px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=outer] .drawer-toolbar-slot [drawer-toolbar] button{height:26px;font-size:12px;line-height:14px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar-slot [drawer-toolbar] button img{display:none}"]
             }] }
 ];
 /** @nocollapse */
@@ -22435,7 +22526,7 @@ DrawerFormComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-drawer-form",
                 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]=\"getOptions(field)\"\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]=\"getOptions(field)\"\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              [step]=\"field.step\"\r\n              [decimals]=\"field.decimals\"\r\n              [format]=\"field.format || numberFormat\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"onComponentChange($event, 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]=\"getOptions(field)\"\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)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-autocomplete>\r\n            <!-- Dropdown -->\r\n            <ejs-dropdownlist\r\n              #dropdown\r\n              *ngIf=\"field.fieldFormType === 'Dropdown'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"getOptions(field)\"\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              (dataBound)=\"onDropdownDataBound($event, field)\"\r\n              (change)=\"onComponentChange($event, 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              [ngModel]=\"form[field.formKey]\"\r\n              [dataSource]=\"getOptions(field)\"\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)=\"onComponentChange($event, 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)]=\"dateForm[field.formKey]\"\r\n              [format]=\"field.format || dateFormat\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"\r\n                fieldValidMap[field.formKey] === false ||\r\n                dateValidMap[field.formKey] === false\r\n              \"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onDatePickerBlur($event, 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",
-                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{display:flex;flex-flow:column nowrap;max-width:1576px;flex:1;width:0}.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}"]
+                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{display:flex;flex-flow:column nowrap;max-width:1576px;flex:1;width:0}.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}"]
             }] }
 ];
 /** @nocollapse */
@@ -27411,9 +27502,9 @@ class FieldFormatComponent {
 }
 FieldFormatComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-field-format",
+                selector: "rs-field-format",
                 template: "<div class=\"container dashboard-format-container\">\r\n\t<div class=\"header\">\r\n\t\t<mat-icon\r\n\t\t\tclass=\"icon-previous\"\r\n\t\t\t*ngIf=\"!Conditional\"\r\n\t\t\t(click)=\"Conditional = true\"\r\n\t\t>\r\n\t\t\tkeyboard_arrow_left</mat-icon\r\n\t\t>\r\n\t\t<p class=\"format-title\">\r\n\t\t\t{{\r\n\t\t\t\tConditional\r\n\t\t\t\t\t? translation.CONDITIONAL_SETTING || \"Conditional Setting\"\r\n\t\t\t\t\t: translation.FORMATTING_AND_HIDE_SUBTOTAL ||\r\n\t\t\t\t\t  \"Formatting and hide sub total\"\r\n\t\t\t}}\r\n\t\t</p>\r\n\t\t<mat-icon class=\"close\" (click)=\"close()\">close</mat-icon>\r\n\t</div>\r\n\t<div class=\"content\">\r\n\t\t<!--Conditional Setting start    \u7B2C\u4E00\u9875\uFF1Afield list-->\r\n\t\t<div *ngIf=\"Conditional\">\r\n\t\t\t<div class=\"notice\">\r\n\t\t\t\t{{\r\n\t\t\t\t\ttranslation.CONDITIONAL_SETTING_TIPS ||\r\n\t\t\t\t\t\t\"The fields you have selected are shown below, you can apply formatting,sub totals or grand totals. Sub totals are only available for pivot tables.\"\r\n\t\t\t\t}}\r\n\t\t\t</div>\r\n\t\t\t<div class=\"all-fields\">\r\n\t\t\t\t<div class=\"fields-group\" *ngFor=\"let field of fieldslist\">\r\n\t\t\t\t\t<p class=\"fl\">{{ field.langValue }}</p>\r\n\t\t\t\t\t<img\r\n\t\t\t\t\t\tclass=\"fr\"\r\n\t\t\t\t\t\t[ngClass]=\"{\r\n\t\t\t\t\t\t\topacity: field.showGrandTotals\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\tsrc=\"../../../../../assets/img/dashboard_icon/gadget-basic-total{{\r\n\t\t\t\t\t\t\tfield.showGrandTotals ? '' : '-1'\r\n\t\t\t\t\t\t}}.svg\"\r\n\t\t\t\t\t\t(click)=\"openFormat(field)\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<img\r\n\t\t\t\t\t\tclass=\"fr format-icon\"\r\n\t\t\t\t\t\tsrc=\"../../../../../assets/img/dashboard_icon/gadget-sub-total{{\r\n\t\t\t\t\t\t\tfield.showSubTotals ? '-0' : '-1'\r\n\t\t\t\t\t\t}}.svg\"\r\n\t\t\t\t\t\t(click)=\"openFormat(field)\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<img\r\n\t\t\t\t\t\tclass=\"fr format-icon\"\r\n\t\t\t\t\t\tsrc=\"../../../../../assets/img/dashboard_icon/gadget-format{{\r\n\t\t\t\t\t\t\tfield.format && field.format.length ? '-1' : '-0'\r\n\t\t\t\t\t\t}}.svg\"\r\n\t\t\t\t\t\t(click)=\"openFormat(field)\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<!--Conditional Setting end    \u7B2C\u4E00\u9875\uFF1Afield list-->\r\n\r\n\t\t<!--Formatting and hide sub total start    \u7B2C\u4E8C\u9875\uFF1Aformat setting-->\r\n\t\t<div *ngIf=\"!Conditional\">\r\n\t\t\t<div class=\"format-group format-field\">\r\n\t\t\t\t<div class=\"field-name\">\r\n\t\t\t\t\t<label>{{ translation.FIELD || \".FIELD\" }}</label>\r\n\t\t\t\t\t<p>{{ currentField?.langValue }}</p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"format-checkbox\">\r\n\t\t\t\t<mat-checkbox\r\n\t\t\t\t\tclass=\"example-margin\"\r\n\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t[(ngModel)]=\"currentFieldFormatInfo.formatChecked\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ translation.FORMAT || \"Format\" }}</mat-checkbox\r\n\t\t\t\t>\r\n\t\t\t</div>\r\n\r\n\t\t\t<!-- Format part start -->\r\n\t\t\t<div class=\"format-group format-box\">\r\n\t\t\t\t<!-- compare \u90E8\u5206 start -->\r\n\t\t\t\t<div class=\"group-style\">\r\n\t\t\t\t\t<ng-container\r\n\t\t\t\t\t\t*ngIf=\"\r\n\t\t\t\t\t\t\tcurrentField.dataType !== 'string' &&\r\n\t\t\t\t\t\t\tcurrentField.dataType !== 'date'\r\n\t\t\t\t\t\t\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<div class=\"marging-right-style\" style=\"width: 50%\">\r\n\t\t\t\t\t\t\t<mat-form-field>\r\n\t\t\t\t\t\t\t\t<mat-select\r\n\t\t\t\t\t\t\t\t\tclass=\"marging-top-style\"\r\n\t\t\t\t\t\t\t\t\t(selectionChange)=\"\r\n\t\t\t\t\t\t\t\t\t\tselectOption($event.value, 'compare')\r\n\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"\r\n\t\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.compareSelect\r\n\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<mat-option\r\n\t\t\t\t\t\t\t\t\t\t*ngFor=\"let item of compareList\"\r\n\t\t\t\t\t\t\t\t\t\t[value]=\"item.code\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t{{ item.value }}\r\n\t\t\t\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t\t\t\t</mat-select>\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t[ngStyle]=\"{\r\n\t\t\t\t\t\t\t\twidth:\r\n\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.compareSelect ===\r\n\t\t\t\t\t\t\t\t\t\t'Between' ||\r\n\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.compareSelect ===\r\n\t\t\t\t\t\t\t\t\t\t'NotBetween'\r\n\t\t\t\t\t\t\t\t\t\t? '15%'\r\n\t\t\t\t\t\t\t\t\t\t: '36%'\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<mat-form-field class=\"marging-top-style\">\r\n\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\tmatInput\r\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"\r\n\t\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.compareValue1\r\n\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t*ngIf=\"\r\n\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.compareSelect ===\r\n\t\t\t\t\t\t\t\t\t'Between' ||\r\n\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.compareSelect ===\r\n\t\t\t\t\t\t\t\t\t'NotBetween'\r\n\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\tstyle=\"width: 15%; display: flex\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tstyle=\"\r\n\t\t\t\t\t\t\t\t\tline-height: 60px;\r\n\t\t\t\t\t\t\t\t\ttransform: translateX(8px);\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t-\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<mat-form-field\r\n\t\t\t\t\t\t\t\tclass=\"marging-top-style\"\r\n\t\t\t\t\t\t\t\tstyle=\"margin-left: 15px\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\tmatInput\r\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"\r\n\t\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.compareValue2\r\n\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t\t<!-- compare \u90E8\u5206 end -->\r\n\r\n\t\t\t\t<!-- Field Title & align start -->\r\n\t\t\t\t<div class=\"group-style marging-top-style\">\r\n\t\t\t\t\t<div class=\"marging-right-style\" style=\"width: 40%\">\r\n\t\t\t\t\t\t<mat-form-field class=\"marging-top-style\">\r\n\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\tmatInput\r\n\t\t\t\t\t\t\t\tplaceholder=\"{{\r\n\t\t\t\t\t\t\t\t\ttranslation.EDIT_FIELD_TITLE ||\r\n\t\t\t\t\t\t\t\t\t\t'.EDIT_FIELD_TITLE'\r\n\t\t\t\t\t\t\t\t}}\"\r\n\t\t\t\t\t\t\t\t[(ngModel)]=\"currentFieldFormatInfo.displayName\"\r\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t\t\t(ngModelChange)=\"\r\n\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.formatChecked = true\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div style=\"transform: translateY(-9px)\">\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"box-content\"\r\n\t\t\t\t\t\t\t*ngIf=\"config.portletType == 'table'\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<div class=\"content-title\">\r\n\t\t\t\t\t\t\t\t{{ translation.ALIGNMENT || \".ALIGNMENT\" }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"icon-list\">\r\n\t\t\t\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t\t\t\t*ngFor=\"let item of alignList\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"{\r\n\t\t\t\t\t\t\t\t\t\tselected:\r\n\t\t\t\t\t\t\t\t\t\t\titem.code ==\r\n\t\t\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.align\r\n\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t(click)=\"changeAligh(item.code)\"\r\n\t\t\t\t\t\t\t\t\t>{{ item.name }}</mat-icon\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<!-- Field Title & align end -->\r\n\r\n\t\t\t\t<!-- Number/percent format start -->\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"group-style marging-top-style\"\r\n\t\t\t\t\t*ngIf=\"\r\n\t\t\t\t\t\tcurrentField.dataType !== 'string' &&\r\n\t\t\t\t\t\tcurrentField.dataType !== 'date'\r\n\t\t\t\t\t\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div style=\"width: 96%\">\r\n\t\t\t\t\t\t<mat-form-field>\r\n\t\t\t\t\t\t\t<mat-select\r\n\t\t\t\t\t\t\t\tclass=\"marging-top-style format-font\"\r\n\t\t\t\t\t\t\t\tplaceholder=\"{{\r\n\t\t\t\t\t\t\t\t\ttranslation.NUMBER_FORMAT ||\r\n\t\t\t\t\t\t\t\t\t\t'.NUMBER_FORMAT'\r\n\t\t\t\t\t\t\t\t}}\"\r\n\t\t\t\t\t\t\t\t[(ngModel)]=\"\r\n\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.selectedFormatDisplay\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t(selectionChange)=\"\r\n\t\t\t\t\t\t\t\t\tselectOption($event.value, 'number')\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<mat-option\r\n\t\t\t\t\t\t\t\t\t*ngFor=\"\r\n\t\t\t\t\t\t\t\t\t\tlet format of currentFieldFormatInfo.formatList\r\n\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t\t[value]=\"format.key\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\tclass=\"format-select-checkbox\"\r\n\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\r\n\t\t\t\t\t\t\t\t\t\t[id]=\"format.val\"\r\n\t\t\t\t\t\t\t\t\t\t[name]=\"format.key\"\r\n\t\t\t\t\t\t\t\t\t\t[value]=\"format.isChecked\"\r\n\t\t\t\t\t\t\t\t\t\t[(ngModel)]=\"format.isChecked\"\r\n\t\t\t\t\t\t\t\t\t/>{{ format.key }}\r\n\t\t\t\t\t\t\t\t\t<!-- <mat-checkbox\r\n\t\t\t\t\t\t\t\t\t\tstyle=\"margin-left: 15px\"\r\n\t\t\t\t\t\t\t\t\t\t[value]=\"format.isChecked\"\r\n\t\t\t\t\t\t\t\t\t\t[(ngModel)]=\"format.isChecked\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t{{ format.key }}\r\n\t\t\t\t\t\t\t\t\t</mat-checkbox> -->\r\n\t\t\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t\t\t</mat-select>\r\n\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<!-- Number/percent format end -->\r\n\r\n\t\t\t\t<!-- date format start -->\r\n\t\t\t\t<div *ngIf=\"currentField.dataType === 'date'\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"marging-right-style\"\r\n\t\t\t\t\t\tstyle=\"display: inline-block; width: 26%\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<mat-form-field>\r\n\t\t\t\t\t\t\t<mat-select\r\n\t\t\t\t\t\t\t\tclass=\"marging-top-style\"\r\n\t\t\t\t\t\t\t\t[(ngModel)]=\"currentFieldFormatInfo.dateType\"\r\n\t\t\t\t\t\t\t\t(selectionChange)=\"\r\n\t\t\t\t\t\t\t\t\tselectOption(\r\n\t\t\t\t\t\t\t\t\t\t$event.value,\r\n\t\t\t\t\t\t\t\t\t\t'selectdDateType'\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<mat-option value=\"Quarter\">Quarter</mat-option>\r\n\t\t\t\t\t\t\t\t<mat-option value=\"Date\">Date</mat-option>\r\n\t\t\t\t\t\t\t</mat-select>\r\n\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div style=\"display: inline-block; width: 60%\">\r\n\t\t\t\t\t\t<mat-form-field>\r\n\t\t\t\t\t\t\t<mat-select\r\n\t\t\t\t\t\t\t\tclass=\"marging-top-style\"\r\n\t\t\t\t\t\t\t\t(selectionChange)=\"\r\n\t\t\t\t\t\t\t\t\tselectOption(\r\n\t\t\t\t\t\t\t\t\t\t$event.value,\r\n\t\t\t\t\t\t\t\t\t\t'selectdDateformat'\r\n\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t[(ngModel)]=\"\r\n\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.selectedFormatDisplay\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<mat-option\r\n\t\t\t\t\t\t\t\t\t*ngFor=\"\r\n\t\t\t\t\t\t\t\t\t\tlet date of currentFieldFormatInfo.formatList\r\n\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t\t[value]=\"date.key\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\tclass=\"format-select-checkbox\"\r\n\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\r\n\t\t\t\t\t\t\t\t\t\t[id]=\"date.val\"\r\n\t\t\t\t\t\t\t\t\t\t[name]=\"date.key\"\r\n\t\t\t\t\t\t\t\t\t\t[value]=\"date.isChecked\"\r\n\t\t\t\t\t\t\t\t\t\t[(ngModel)]=\"date.isChecked\"\r\n\t\t\t\t\t\t\t\t\t/>{{ date.key }}\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- <mat-checkbox\r\n\t\t\t\t\t\t\t\t\t\tstyle=\"\r\n\t\t\t\t\t\t\t\t\t\t\tdisplay: inline-block;\r\n\t\t\t\t\t\t\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\t\t\t\t\t\t\tmargin-left: 15px;\r\n\t\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t\t\t[checked]=\"date.isChecked\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t{{ date.key }}\r\n\t\t\t\t\t\t\t\t\t</mat-checkbox> -->\r\n\t\t\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t\t\t</mat-select>\r\n\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<!-- date format end -->\r\n\t\t\t</div>\r\n\t\t\t<!-- Format part end -->\r\n\r\n\t\t\t<!-- font setting start -->\r\n\t\t\t<div\r\n\t\t\t\tclass=\"format-checkbox\"\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\t!['string', 'nvarchar', 'date', 'datetime'].includes(\r\n\t\t\t\t\t\tcurrentField.dataType\r\n\t\t\t\t\t)\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox\r\n\t\t\t\t\tclass=\"example-margin\"\r\n\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t[(ngModel)]=\"currentFieldFormatInfo.fontSettingChecked\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{\r\n\t\t\t\t\t\ttranslation.FONT_SETTINGS || \".FONT_SETTINGS\"\r\n\t\t\t\t\t}}</mat-checkbox\r\n\t\t\t\t>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"format-group format-box\"\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\t!['string', 'nvarchar', 'date', 'datetime'].includes(\r\n\t\t\t\t\t\tcurrentField.dataType\r\n\t\t\t\t\t)\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t\t<!-- Number Format \u5B57\u4F53\u5927\u5C0F\u3001\u5B57\u4F53\u989C\u8272\u3001\u5355\u5143\u683C\u80CC\u666F\u8272 start -->\r\n\t\t\t\t<span class=\"format-number\">\r\n\t\t\t\t\t{{\r\n\t\t\t\t\t\ttranslation.POSITIVE_NUMBER_FORMAT ||\r\n\t\t\t\t\t\t\t\"Positive Number Format\"\r\n\t\t\t\t\t}}\r\n\t\t\t\t</span>\r\n\t\t\t\t<div class=\"group-style marging-top-style\">\r\n\t\t\t\t\t<div class=\"marging-right-style\" style=\"width: 35%\">\r\n\t\t\t\t\t\t<mat-form-field>\r\n\t\t\t\t\t\t\t<mat-select\r\n\t\t\t\t\t\t\t\tclass=\"marging-top-style\"\r\n\t\t\t\t\t\t\t\t(selectionChange)=\"\r\n\t\t\t\t\t\t\t\t\tselectOption($event.value, 'fontFamily')\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t[(ngModel)]=\"\r\n\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.fontFamilyValue\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<mat-option\r\n\t\t\t\t\t\t\t\t\t*ngFor=\"let item of fontFamilyList\"\r\n\t\t\t\t\t\t\t\t\t[value]=\"item.value\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{{ item.value }}\r\n\t\t\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t\t\t</mat-select>\r\n\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"marging-right-style\" style=\"width: 15%\">\r\n\t\t\t\t\t\t<mat-form-field>\r\n\t\t\t\t\t\t\t<mat-select\r\n\t\t\t\t\t\t\t\tclass=\"marging-top-style\"\r\n\t\t\t\t\t\t\t\t(selectionChange)=\"\r\n\t\t\t\t\t\t\t\t\tselectOption($event.value, 'fontSize')\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t[(ngModel)]=\"\r\n\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.fontSizeValue\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<mat-option\r\n\t\t\t\t\t\t\t\t\t*ngFor=\"let item of fontSizeList\"\r\n\t\t\t\t\t\t\t\t\t[value]=\"item.value\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{{ item.value }}\r\n\t\t\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t\t\t</mat-select>\r\n\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div style=\"display: flex; line-height: 54px\">\r\n\t\t\t\t\t\t<div class=\"wrap\">\r\n\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\tejs-colorpicker\r\n\t\t\t\t\t\t\t\t#colorpickerFont\r\n\t\t\t\t\t\t\t\t[modeSwitcher]=\"false\"\r\n\t\t\t\t\t\t\t\tid=\"pickerFontElement\"\r\n\t\t\t\t\t\t\t\t(change)=\"colorOnChange($event, 'font')\"\r\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"wrap\">\r\n\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\tejs-colorpicker\r\n\t\t\t\t\t\t\t\t#colorpicker\r\n\t\t\t\t\t\t\t\t[modeSwitcher]=\"false\"\r\n\t\t\t\t\t\t\t\tid=\"pickerElement\"\r\n\t\t\t\t\t\t\t\t(change)=\"colorOnChange($event)\"\r\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div #previewColor>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclass=\"preview\"\r\n\t\t\t\t\t\t\t\tstyle=\"\r\n\t\t\t\t\t\t\t\t\twidth: 62px;\r\n\t\t\t\t\t\t\t\t\theight: 30px;\r\n\t\t\t\t\t\t\t\t\ttransform: translateY(12px);\r\n\t\t\t\t\t\t\t\t\tborder-radius: 5px;\r\n\t\t\t\t\t\t\t\t\tline-height: 35px;\r\n\t\t\t\t\t\t\t\t\ttext-align: center;\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t123.45\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<span class=\"format-number\">{{\r\n\t\t\t\t\ttranslation.NEGATIVE_NUMBER_FORMAT ||\r\n\t\t\t\t\t\t\"Negative Number Format\"\r\n\t\t\t\t}}</span>\r\n\t\t\t\t<div class=\"group-style marging-top-style\">\r\n\t\t\t\t\t<div class=\"marging-right-style\" style=\"width: 35%\">\r\n\t\t\t\t\t\t<mat-form-field>\r\n\t\t\t\t\t\t\t<mat-select\r\n\t\t\t\t\t\t\t\tclass=\"marging-top-style\"\r\n\t\t\t\t\t\t\t\t(selectionChange)=\"\r\n\t\t\t\t\t\t\t\t\tselectOption($event.value, 'negaFontFamily')\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t[(ngModel)]=\"\r\n\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.negaFontFamilyValue\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<mat-option\r\n\t\t\t\t\t\t\t\t\t*ngFor=\"let item of fontFamilyList\"\r\n\t\t\t\t\t\t\t\t\t[value]=\"item.value\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{{ item.value }}\r\n\t\t\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t\t\t</mat-select>\r\n\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"marging-right-style\" style=\"width: 15%\">\r\n\t\t\t\t\t\t<mat-form-field>\r\n\t\t\t\t\t\t\t<mat-select\r\n\t\t\t\t\t\t\t\tclass=\"marging-top-style\"\r\n\t\t\t\t\t\t\t\t(selectionChange)=\"\r\n\t\t\t\t\t\t\t\t\tselectOption($event.value, 'negaFontSize')\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t[(ngModel)]=\"\r\n\t\t\t\t\t\t\t\t\tcurrentFieldFormatInfo.negaFontSizeValue\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<mat-option\r\n\t\t\t\t\t\t\t\t\t*ngFor=\"let item of fontSizeList\"\r\n\t\t\t\t\t\t\t\t\t[value]=\"item.value\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{{ item.value }}\r\n\t\t\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t\t\t</mat-select>\r\n\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div style=\"display: flex; line-height: 54px\">\r\n\t\t\t\t\t\t<div class=\"wrap\">\r\n\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\tejs-colorpicker\r\n\t\t\t\t\t\t\t\t#colorpickerFontBurden\r\n\t\t\t\t\t\t\t\t[modeSwitcher]=\"false\"\r\n\t\t\t\t\t\t\t\tid=\"pickerFontElement\"\r\n\t\t\t\t\t\t\t\t(change)=\"colorOnChange($event, 'ngeaFont')\"\r\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"wrap\">\r\n\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\tejs-colorpicker\r\n\t\t\t\t\t\t\t\t#colorpickerBurden\r\n\t\t\t\t\t\t\t\t[modeSwitcher]=\"false\"\r\n\t\t\t\t\t\t\t\tid=\"pickerElement\"\r\n\t\t\t\t\t\t\t\t(change)=\"colorOnChange($event, 'ngeaBgColor')\"\r\n\t\t\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div #previewColorBurden>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclass=\"preview\"\r\n\t\t\t\t\t\t\t\tstyle=\"\r\n\t\t\t\t\t\t\t\t\twidth: 62px;\r\n\t\t\t\t\t\t\t\t\theight: 30px;\r\n\t\t\t\t\t\t\t\t\ttransform: translateY(12px);\r\n\t\t\t\t\t\t\t\t\tborder-radius: 5px;\r\n\t\t\t\t\t\t\t\t\tline-height: 35px;\r\n\t\t\t\t\t\t\t\t\ttext-align: center;\r\n\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t123.45\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<!-- Number Format \u5B57\u4F53\u5927\u5C0F\u3001\u5B57\u4F53\u989C\u8272\u3001\u5355\u5143\u683C\u80CC\u666F\u8272 end -->\r\n\t\t\t</div>\r\n\t\t\t<!-- font setting end -->\r\n\r\n\t\t\t<!-- hide subtotal start -->\r\n\t\t\t<div\r\n\t\t\t\tclass=\"subtotal-checkbox\"\r\n\t\t\t\t[ngClass]=\"{\r\n\t\t\t\t\topacity:\r\n\t\t\t\t\t\tconfig.portletType !== 'pivot' || !currentField?.isValue\r\n\t\t\t\t}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox\r\n\t\t\t\t\tclass=\"example-margin\"\r\n\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t[(ngModel)]=\"!currentField.showSubTotals\"\r\n\t\t\t\t\t(ngModelChange)=\"changeHideStatus('showSubTotals')\"\r\n\t\t\t\t\t[disabled]=\"\r\n\t\t\t\t\t\tconfig.portletType !== 'pivot' || !currentField?.isValue\r\n\t\t\t\t\t\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{\r\n\t\t\t\t\t\ttranslation.HIDE_SUB_TOTAL || \"Hide Sub total\"\r\n\t\t\t\t\t}}</mat-checkbox\r\n\t\t\t\t>\r\n\t\t\t</div>\r\n\t\t\t<!-- hide subtotal end -->\r\n\r\n\t\t\t<!-- hide grandtotal start -->\r\n\t\t\t<div\r\n\t\t\t\tclass=\"subtotal-checkbox\"\r\n\t\t\t\t[ngClass]=\"{ opacity: disabledGrandTotal() }\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox\r\n\t\t\t\t\tclass=\"example-margin\"\r\n\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t[(ngModel)]=\"!currentField.showGrandTotals\"\r\n\t\t\t\t\t(ngModelChange)=\"changeHideStatus('showGrandTotals')\"\r\n\t\t\t\t\t[disabled]=\"disabledGrandTotal()\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{\r\n\t\t\t\t\t\ttranslation.HIDE_GRAND_TOTAL || \"Hide Grand total\"\r\n\t\t\t\t\t}}</mat-checkbox\r\n\t\t\t\t>\r\n\t\t\t</div>\r\n\t\t\t<!-- hide grandtotal end -->\r\n\t\t</div>\r\n\t\t<!--Formatting and hide sub total end    \u7B2C\u4E8C\u9875\uFF1Aformat setting-->\r\n\t</div>\r\n\t<div class=\"button-group\" *ngIf=\"!Conditional\">\r\n\t\t<button (click)=\"clearFormat_Current()\" class=\"btn clear-button\">\r\n\t\t\t{{ translation.CLEAR || \".CLEAR\" }}\r\n\t\t</button>\r\n\t\t<button (click)=\"saveFormat()\" class=\"btn save-button\">\r\n\t\t\t{{ translation.SAVE || \".SAVE\" }}\r\n\t\t</button>\r\n\t</div>\r\n\t<div class=\"button-group\" *ngIf=\"Conditional\">\r\n\t\t<button (click)=\"clearFormat_All()\" class=\"btn clear-button\">\r\n\t\t\t{{ translation.CLEAR || \".CLEAR\" }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n",
-                styles: ["@charset \"UTF-8\";.container{font-size:13px;font-weight:400}.container.dashboard-format-container .e-split-btn-wrapper .e-btn+.e-icon-btn,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):active+.e-icon-btn,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):focus+.e-icon-btn,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):hover+.e-icon-btn{--rs-primary-btn-hover-bg:#f8fafb!important;--rs-primary-btn-bg:#f8fafb!important;max-width:18px!important;min-width:unset!important;width:18px!important}.container.dashboard-format-container .e-split-btn-wrapper .e-btn+.e-icon-btn .e-btn-icon,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):active+.e-icon-btn .e-btn-icon,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):focus+.e-icon-btn .e-btn-icon,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):hover+.e-icon-btn .e-btn-icon{font-size:8px!important}.container.dashboard-format-container .e-split-btn-wrapper .e-split-btn .e-btn-icon{font-size:14px!important}.container.dashboard-format-container .e-split-btn-wrapper .e-btn.e-icon-btn .e-btn-icon::before{width:8px!important;height:8px!important;content:\"\uE744\"!important;color:#495057!important}.container.dashboard-format-container .e-split-btn-wrapper .e-btn{--rs-primary-btn-hover:#f8fafb!important;--rs-primary-btn:#f8fafb!important}.container .header{width:109%;display:flex;border-bottom:1px solid #e9ecef;transform:translateX(-25px);height:41px}.container .header .icon-previous{transform:translate(20px,5px);cursor:pointer}.container .header .close{margin-right:30px;padding-left:3px;padding-top:3px;border-radius:18px;transform:scale(1.1);cursor:pointer;background-color:#eaedf0;float:right;font-size:18px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.container .header .format-title{width:91%;font-family:HelveticaNeue;font-size:20px;font-weight:700;font-stretch:normal;font-style:normal;line-height:1.2;letter-spacing:normal;color:#212529;margin-left:28px}.container .content .all-fields{height:543px;overflow:auto}.container .content .all-fields::-webkit-scrollbar{width:5px;height:8px;background:#fff;position:static;z-index:999}.container .content .all-fields::-webkit-scrollbar-thumb{background:#eaedf0}.container .content .all-fields .fields-group{width:calc(100% - 9px);height:30px;border-radius:4px;border:1px solid #efeff3;padding:4px 9px 0 11px;margin:0 0 11px 4px}.container .content .all-fields .fields-group p{color:#44566c}.container .content .all-fields .fields-group img:hover{cursor:pointer}.container .content .all-fields .fields-group .format-icon{margin-right:10px}.container .content .format-group{width:535px;border-radius:5px;border:1px solid #b3c0ce;padding:15px 0 0 10px;margin:0 0 20px 4px}.container .content .format-group .group-style{display:flex;width:100%}.container .content .format-group .group-style .format-font{color:#4a4a4a!important;font-weight:400!important}.container .content .format-group .marging-right-style{margin-right:16px}.container .content .format-group .marging-top-style{margin-top:10px}.container .content .format-field{margin-top:36px}.container .content .format-field .field-name label{font-family:Arial;font-size:10px;font-weight:700;color:#a2a3b5}.container .content .format-field .field-name p{font-family:Arial;font-size:15px;color:#4a4a4a;margin-bottom:12px}.container .content .format-checkbox,.container .content .subtotal-checkbox{font-family:Arial;font-size:15px;font-weight:700;color:#4a4a4a;margin-bottom:10px;margin-left:4px}.container .content .format-box{width:512px;margin-left:25px}.container .button-group{text-align:right;position:absolute;right:0;bottom:0;margin:0 20px 20px 0}.container .button-group .btn{width:117px;height:36px;border:none;border-radius:5px;font-family:Arial;font-size:14px;font-weight:700}.container .button-group .clear-button{color:#979cb4;background-color:#f2f3f7;margin-right:20px}.container .button-group .save-button{color:#0081ff;background-color:#d9edff}.container .fl{float:left}.container .fr{float:right}.add-format-button{width:36px;height:39px;background:0 0;border:none}.add-format-button img{width:36px;height:39px;transform:translateX(-10px)}.add-format-font{font-family:Arial;font-size:15px;font-weight:700;color:#09b66d;transform:translateY(5px)}.icon-list mat-icon.mat-icon{width:30px;height:30px;line-height:30px;background:#eff1fe;margin-right:12px;color:#44566c;text-align:center;border-radius:5px;cursor:pointer;margin-top:6px}.icon-list mat-icon.mat-icon.selected{color:#fff;background-color:#606ede}.wrap{margin-right:10px}#pickerElement+.e-split-btn-wrapper .e-split-btn .e-selected-color,.e-colorpicker-wrapper #pickerFontElement+.e-split-btn-wrapper .e-split-btn .e-selected-color{background:0 0;border-bottom-style:solid;border-bottom-width:5px;width:25px;height:20px;border-radius:unset}#pickerElement+.e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview,.e-colorpicker-wrapper #pickerFontElement+.e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview{display:none}.e-colorpicker-wrapper #pickerFontElement+.e-split-btn-wrapper .e-split-btn .e-selected-color::before{content:\"\"!important;background-image:url(../../../../assets/img/dashboard_icon/print-A2.svg)!important;height:16px!important;width:16px!important;display:block;background-position:center center;color:#495057!important;margin:0 auto}.e-colorpicker-wrapper #pickerElement+.e-split-btn-wrapper .e-split-btn .e-selected-color::before{content:\"\"!important;background-image:url(../../../../assets/img/dashboard_icon/paint-bucket.svg)!important;height:16px!important;width:16px!important;display:block;background-position:center center;color:#495057!important;margin:0 auto}.e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker+.e-dropdown-btn,.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker+.e-dropdown-btn{padding:5px;background-color:#f8fafb;border:none!important}.e-dropdown-btn .e-caret,.e-dropdown-btn.e-btn .e-caret{transform:translateX(-2px)}.e-colorpicker-container .e-icon-btn,.e-colorpicker-wrapper .e-icon-btnr{background-color:#f8fafb!important;color:unset!important}.e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn{padding:0 10px!important;background-color:#f8fafb!important;border:none!important}.e-btn.e-active,.e-css.e-btn.e-active{box-shadow:unset!important}::ng-deep .mat-checkbox-frame{background-color:#fff!important;border:1px solid #d6d6d6!important}.select-chip{transform:translateY(20px);height:24px;border-radius:5px;min-height:24px}.delete-group{margin-left:468px;cursor:pointer;transform:translateY(-10px);padding-left:3px;padding-top:3px}.format-number{font-family:Arial;font-size:10px;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#a2a3b5}.notice{margin:15px 0 20px;width:529px;font-family:Arial;font-size:13px;color:#212529}.opacity{opacity:30%}input[type=checkbox].format-select-checkbox{transform:translateY(1px);margin-right:12px;width:14px;height:14px;border:1px solid #d6d6d6!important;background-color:#fff;line-height:14px;border-radius:4px;text-align:center;cursor:pointer}::ng-deep .e-colorpicker-popup{padding:0!important;border-radius:unset!important}::ng-deep .e-colorpicker-popup .e-switch-ctrl-btn{padding:14px!important}::ng-deep .e-colorpicker-popup .e-ctrl-btn{display:flex;justify-content:right}::ng-deep .e-colorpicker-popup .e-selected-value .e-value-switch-btn{border:unset!important;width:28px!important;max-width:28px!important}"]
+                styles: ["@charset \"UTF-8\";.container{font-size:13px;font-weight:400}.container.dashboard-format-container .e-split-btn-wrapper .e-btn+.e-icon-btn,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):active+.e-icon-btn,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):focus+.e-icon-btn,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):hover+.e-icon-btn{--rs-primary-btn-hover-bg:#f8fafb!important;--rs-primary-btn-bg:#f8fafb!important;max-width:18px!important;min-width:unset!important;width:18px!important}.container.dashboard-format-container .e-split-btn-wrapper .e-btn+.e-icon-btn .e-btn-icon,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):active+.e-icon-btn .e-btn-icon,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):focus+.e-icon-btn .e-btn-icon,.container.dashboard-format-container .e-split-btn-wrapper .e-btn:not([disabled]):hover+.e-icon-btn .e-btn-icon{font-size:8px!important}.container.dashboard-format-container .e-split-btn-wrapper .e-split-btn .e-btn-icon{font-size:14px!important}.container.dashboard-format-container .e-split-btn-wrapper .e-btn.e-icon-btn .e-btn-icon::before{width:8px!important;height:8px!important;content:\"\uE744\"!important;color:#495057!important}.container.dashboard-format-container .e-split-btn-wrapper .e-btn{--rs-primary-btn-hover:#f8fafb!important;--rs-primary-btn:#f8fafb!important}.container .header{width:109%;display:flex;border-bottom:1px solid #e9ecef;transform:translateX(-25px);height:41px}.container .header .icon-previous{transform:translate(20px,5px);cursor:pointer}.container .header .close{margin-right:30px;padding-left:3px;padding-top:3px;border-radius:18px;transform:scale(1.1);cursor:pointer;background-color:#eaedf0;float:right;font-size:18px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.container .header .format-title{width:91%;font-family:HelveticaNeue;font-size:20px;font-weight:700;font-stretch:normal;font-style:normal;line-height:1.2;letter-spacing:normal;color:#212529;margin-left:28px}.container .content .all-fields{height:543px;overflow:auto}.container .content .all-fields::-webkit-scrollbar{width:5px;height:8px;background:#fff;position:static;z-index:999}.container .content .all-fields::-webkit-scrollbar-thumb{background:#eaedf0}.container .content .all-fields .fields-group{width:calc(100% - 9px);height:30px;border-radius:4px;border:1px solid #efeff3;padding:4px 9px 0 11px;margin:0 0 11px 4px}.container .content .all-fields .fields-group p{color:#44566c}.container .content .all-fields .fields-group img:hover{cursor:pointer}.container .content .all-fields .fields-group .format-icon{margin-right:10px}.container .content .format-group{width:535px;border-radius:5px;border:1px solid #b3c0ce;padding:15px 0 0 10px;margin:0 0 20px 4px}.container .content .format-group .group-style{display:flex;width:100%}.container .content .format-group .group-style .format-font{color:#4a4a4a!important;font-weight:400!important}.container .content .format-group .marging-right-style{margin-right:16px}.container .content .format-group .marging-top-style{margin-top:10px}.container .content .format-field{margin-top:36px}.container .content .format-field .field-name label{font-family:Arial;font-size:10px;font-weight:700;color:#a2a3b5}.container .content .format-field .field-name p{font-family:Arial;font-size:15px;color:#4a4a4a;margin-bottom:12px}.container .content .format-checkbox,.container .content .subtotal-checkbox{font-family:Arial;font-size:15px;font-weight:700;color:#4a4a4a;margin-bottom:10px;margin-left:4px}.container .content .format-box{width:512px;margin-left:25px}.container .button-group{text-align:right;position:absolute;right:0;bottom:0;margin:0 20px 20px 0}.container .button-group .btn{width:117px;height:36px;border:none;border-radius:5px;font-family:Arial;font-size:14px;font-weight:700}.container .button-group .clear-button{color:#979cb4;background-color:#f2f3f7;margin-right:20px}.container .button-group .save-button{color:#0081ff;background-color:#d9edff}.container .fl{float:left}.container .fr{float:right}.add-format-button{width:36px;height:39px;background:0 0;border:none}.add-format-button img{width:36px;height:39px;transform:translateX(-10px)}.add-format-font{font-family:Arial;font-size:15px;font-weight:700;color:#09b66d;transform:translateY(5px)}.icon-list mat-icon.mat-icon{width:30px;height:30px;line-height:30px;background:#eff1fe;margin-right:12px;color:#44566c;text-align:center;border-radius:5px;cursor:pointer;margin-top:6px}.icon-list mat-icon.mat-icon.selected{color:#fff;background-color:#606ede}.wrap{margin-right:10px}#pickerElement+.e-split-btn-wrapper .e-split-btn .e-selected-color,.e-colorpicker-wrapper #pickerFontElement+.e-split-btn-wrapper .e-split-btn .e-selected-color{background:0 0;border-bottom-style:solid;border-bottom-width:5px;width:25px;height:20px;border-radius:unset}#pickerElement+.e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview,.e-colorpicker-wrapper #pickerFontElement+.e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview{display:none}.e-colorpicker-wrapper #pickerFontElement+.e-split-btn-wrapper .e-split-btn .e-selected-color::before{content:\"\"!important;background-image:url(../../assets/img/dashboard_icon/print-A2.svg)!important;height:16px!important;width:16px!important;display:block;background-position:center center;color:#495057!important;margin:0 auto}.e-colorpicker-wrapper #pickerElement+.e-split-btn-wrapper .e-split-btn .e-selected-color::before{content:\"\"!important;background-image:url(../../assets/img/dashboard_icon/paint-bucket.svg)!important;height:16px!important;width:16px!important;display:block;background-position:center center;color:#495057!important;margin:0 auto}.e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker+.e-dropdown-btn,.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker+.e-dropdown-btn{padding:5px;background-color:#f8fafb;border:none!important}.e-dropdown-btn .e-caret,.e-dropdown-btn.e-btn .e-caret{transform:translateX(-2px)}.e-colorpicker-container .e-icon-btn,.e-colorpicker-wrapper .e-icon-btnr{background-color:#f8fafb!important;color:unset!important}.e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn{padding:0 10px!important;background-color:#f8fafb!important;border:none!important}.e-btn.e-active,.e-css.e-btn.e-active{box-shadow:unset!important}::ng-deep .mat-checkbox-frame{background-color:#fff!important;border:1px solid #d6d6d6!important}.select-chip{transform:translateY(20px);height:24px;border-radius:5px;min-height:24px}.delete-group{margin-left:468px;cursor:pointer;transform:translateY(-10px);padding-left:3px;padding-top:3px}.format-number{font-family:Arial;font-size:10px;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#a2a3b5}.notice{margin:15px 0 20px;width:529px;font-family:Arial;font-size:13px;color:#212529}.opacity{opacity:30%}input[type=checkbox].format-select-checkbox{transform:translateY(1px);margin-right:12px;width:14px;height:14px;border:1px solid #d6d6d6!important;background-color:#fff;line-height:14px;border-radius:4px;text-align:center;cursor:pointer}::ng-deep .e-colorpicker-popup{padding:0!important;border-radius:unset!important}::ng-deep .e-colorpicker-popup .e-switch-ctrl-btn{padding:14px!important}::ng-deep .e-colorpicker-popup .e-ctrl-btn{display:flex;justify-content:right}::ng-deep .e-colorpicker-popup .e-selected-value .e-value-switch-btn{border:unset!important;width:28px!important;max-width:28px!important}"]
             }] }
 ];
 /** @nocollapse */
@@ -28110,9 +28201,9 @@ class DataMartNewComponent {
 }
 DataMartNewComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-data-mart-new",
+                selector: "rs-data-mart-new",
                 template: "<div class=\"new_mart_data_popup\">\r\n\t<div class=\"close_box\" (click)=\"closePopup()\">\r\n\t\t<img src=\"../../../../assets/img/dialog-close.svg\" class=\"deleteIcon\" />\r\n\t</div>\r\n\t<div class=\"popup_header\">\r\n\t\t<p class=\"popup_title\">{{ translation.DATA_MART || \".DATA_MART\" }}</p>\r\n\t\t<p class=\"popup_sub_title\">\r\n\t\t\t{{\r\n\t\t\t\ttranslation.PLS_SELECT_DATA_TABLES ||\r\n\t\t\t\t\t\".Please select data tables for this dashboard\"\r\n\t\t\t}}\r\n\t\t</p>\r\n\t</div>\r\n\t<div class=\"popup_main_container\">\r\n\t\t<div class=\"left_menu_container\" id=\"info-step-2\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"menu_item\"\r\n\t\t\t\t*ngFor=\"let item of fatherList\"\r\n\t\t\t\t[ngClass]=\"{ selectItem: fatherId === item.id }\"\r\n\t\t\t\t(click)=\"getdataMart(item, true)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"activeLine\" *ngIf=\"fatherId === item.id\"></span>\r\n\t\t\t\t{{\r\n\t\t\t\t\titem.FromQB\r\n\t\t\t\t\t\t? item.langCode\r\n\t\t\t\t\t\t: translation[item.langCode] || \".\" + item.langCode\r\n\t\t\t\t}}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"table_container\" id=\"info-step-3\" (click)=\"nextStep()\">\r\n\t\t\t<div class=\"table_content\">\r\n\t\t\t\t<div class=\"group_data\">\r\n\t\t\t\t\t<div class=\"table_header\">\r\n\t\t\t\t\t\t<div class=\"div_group\">\r\n\t\t\t\t\t\t\t<mat-checkbox\r\n\t\t\t\t\t\t\t\t[disabled]=\"isSelectAllDisabled\"\r\n\t\t\t\t\t\t\t\t[color]=\"'primary'\"\r\n\t\t\t\t\t\t\t\t[(ngModel)]=\"selectedAll\"\r\n\t\t\t\t\t\t\t\t(ngModelChange)=\"selectAll($event)\"\r\n\t\t\t\t\t\t\t\t>{{\r\n\t\t\t\t\t\t\t\t\ttranslation[\"GROUP\"] || \".group\"\r\n\t\t\t\t\t\t\t\t}}</mat-checkbox\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"group_item__box\" *ngFor=\"let item of sonList\">\r\n\t\t\t\t\t\t<mat-checkbox\r\n\t\t\t\t\t\t\t[disabled]=\"item.disabled\"\r\n\t\t\t\t\t\t\t[color]=\"'primary'\"\r\n\t\t\t\t\t\t\t[(ngModel)]=\"item.checked\"\r\n\t\t\t\t\t\t\t(ngModelChange)=\"handleItemChange(item, $event)\"\r\n\t\t\t\t\t\t\t>{{\r\n\t\t\t\t\t\t\t\titem.FromQB\r\n\t\t\t\t\t\t\t\t\t? item.langCode\r\n\t\t\t\t\t\t\t\t\t: translation[item.langCode] ||\r\n\t\t\t\t\t\t\t\t\t  \".\" + item.langCode\r\n\t\t\t\t\t\t\t}}</mat-checkbox\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t<ejs-tooltip\r\n\t\t\t\t\t\t\t*ngIf=\"item.langCode === 'FINANCIAL_FIGURES'\"\r\n\t\t\t\t\t\t\tid=\"tooltip\"\r\n\t\t\t\t\t\t\tcssClass=\"figures-tooltip\"\r\n\t\t\t\t\t\t\t[content]=\"\r\n\t\t\t\t\t\t\t\ttranslation.DASHBOARD_FINANCIAL_FIGURES_TOOLTIPS ||\r\n\t\t\t\t\t\t\t\t'Financial Figures can\u2019t be selected together with other groups.'\r\n\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span></span>\r\n\t\t\t\t\t\t</ejs-tooltip>\r\n\t\t\t\t\t\t<!-- <ejs-tooltip\r\n\t\t\t\t\t\t\t*ngIf=\"\r\n\t\t\t\t\t\t\t\tDashboardPorletsService.checkIsQ2Q(item.tables)\r\n\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\tcssClass=\"figures-tooltip\"\r\n\t\t\t\t\t\t\tcontent=\"Q2Q\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span></span>\r\n\t\t\t\t\t\t</ejs-tooltip> -->\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"table_data\">\r\n\t\t\t\t\t<div class=\"table_header\">\r\n\t\t\t\t\t\t<div class=\"data_table_box\">\r\n\t\t\t\t\t\t\t<div class=\"table_title\">\r\n\t\t\t\t\t\t\t\t{{ translation[\"DATA_TABLE\"] || \".Data Table\" }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"search_container\">\r\n\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t\t\tmatInput\r\n\t\t\t\t\t\t\t\t\t[placeholder]=\"translation['SEARCH']\"\r\n\t\t\t\t\t\t\t\t\tclass=\"search_input\"\r\n\t\t\t\t\t\t\t\t\t(keyup)=\"doFilter($event.target.value)\"\r\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t\t\t\t(keydown)=\"\r\n\t\t\t\t\t\t\t\t\t\tpbf.disabledInputEnterEvent($event)\r\n\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"table_main_content\" style=\"overflow: auto\">\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t*ngFor=\"let item of grandsonList\"\r\n\t\t\t\t\t\t\t[ngClass]=\"{ maxBox: grandsonList.length >= 11 }\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<div *ngIf=\"!item.isHide\" class=\"table_data_item\">\r\n\t\t\t\t\t\t\t\t{{\r\n\t\t\t\t\t\t\t\t\titem.FromQB\r\n\t\t\t\t\t\t\t\t\t\t? item.langCode\r\n\t\t\t\t\t\t\t\t\t\t: translation[item.langCode] ||\r\n\t\t\t\t\t\t\t\t\t\t  \".\" + item.langCode\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"popup_footer\">\r\n\t\t<button class=\"cancle_btn popup_btn\" (click)=\"closePopup()\">\r\n\t\t\t{{ translation[\"CANCEL\"] || \".CANCEL\" }}\r\n\t\t</button>\r\n\t\t<button\r\n\t\t\tclass=\"sure_btn popup_btn\"\r\n\t\t\tid=\"info-step-5\"\r\n\t\t\t(click)=\"saveData()\"\r\n\t\t\t[disabled]=\"disabled || !entityType || grandsonList.length == 0\"\r\n\t\t>\r\n\t\t\t{{ translation[\"SAVE\"] || \".SAVE\" }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n",
-                styles: [".new_mart_data_popup{width:100%;position:relative;height:100%;padding:60px 74px;font-family:Arial;display:flex;flex-direction:column;overflow:hidden}.new_mart_data_popup .close_box{position:absolute;right:12px;top:12px;padding:10px;cursor:pointer}.new_mart_data_popup .close_box .deleteIcon{width:24px;height:24px}.new_mart_data_popup .popup_header{margin-bottom:32px}.new_mart_data_popup .popup_header .popup_title{font-size:24px;font-weight:700;text-align:center;color:#44566c;line-height:28px;margin-bottom:12px}.new_mart_data_popup .popup_header .popup_sub_title{font-size:13px;line-height:15px;color:#44566c;text-align:center}.new_mart_data_popup .popup_main_container{flex:1;width:100%;margin-bottom:40px;display:flex;overflow:hidden}.new_mart_data_popup .popup_main_container .left_menu_container{margin-right:30px;text-align:left}.new_mart_data_popup .popup_main_container .left_menu_container .menu_item{line-height:16px;margin-bottom:22px;color:#002c4f;font-size:13px;position:relative;max-width:160px;word-wrap:break-word;cursor:pointer;padding-left:15px}.new_mart_data_popup .popup_main_container .left_menu_container .menu_item.selectItem{font-weight:700}.new_mart_data_popup .popup_main_container .left_menu_container .menu_item .activeLine{display:block;position:absolute;left:0;top:0;width:2px;height:17px;background-color:#0081ff}.new_mart_data_popup .popup_main_container .table_container{flex:1;height:100%;overflow:hidden;border:1px solid #eaedf0;display:flex;flex-direction:column}.new_mart_data_popup .popup_main_container .table_container .table_header{height:40px;background-color:#f8fafb;display:flex;align-items:center}.new_mart_data_popup .popup_main_container .table_container .table_header::ng-deep .mat-checkbox .mat-checkbox-layout{color:#44566c;font-size:13px;font-weight:700}.new_mart_data_popup .popup_main_container .table_container .table_header .div_group{min-width:200px;padding-left:20px}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box{flex:1;display:flex;align-items:center;justify-content:space-between;padding-left:20px;padding-right:5px}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .table_title{font-size:13px;font-weight:700;color:#44566c}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container{width:190px;height:30px;position:relative}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input{background-image:url(../../../../assets/img/search.svg);background-size:16px;background-repeat:no-repeat;background-position-y:center;background-position-x:10px;width:190px;height:30px;padding:7px 7px 6px 38px;border-radius:5px;background-color:#fff;transform:translateY(0);outline:0;border:none;font-weight:400!important;color:#44566c;font-size:12px!important}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input::-webkit-input-placeholder{color:#adb5bd}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input::-moz-placeholder{color:#adb5bd}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input:-ms-input-placeholder{color:#adb5bd}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input::-ms-input-placeholder{color:#adb5bd}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input::placeholder{color:#adb5bd}.new_mart_data_popup .popup_main_container .table_container .table_content{display:flex;flex:1;overflow:hidden}.new_mart_data_popup .popup_main_container .table_container .table_content::ng-deep .mat-checkbox .mat-checkbox-layout{color:#44566c;font-size:13px;font-weight:400}.new_mart_data_popup .popup_main_container .table_container .table_content .group_data{height:100%;border-right:1px solid #eaedf0}.new_mart_data_popup .popup_main_container .table_container .table_content .group_data .group_item__box{display:flex;align-items:center;padding-left:20px;height:40px;border-bottom:1px solid #eaedf0;padding-right:10px}.new_mart_data_popup .popup_main_container .table_container .table_content .group_data .group_item__box .e-tooltip{margin-left:5px}.new_mart_data_popup .popup_main_container .table_container .table_content .group_data .group_item__box .e-tooltip span{display:inline-block;width:14px;height:14px;background-image:url(../../../../assets/img/dashboard_icon/information-grey.svg);background-size:contain;margin-top:5px;cursor:pointer}.new_mart_data_popup .popup_main_container .table_container .table_content .table_data{flex:1;display:flex;height:100%;flex-direction:column;overflow:hidden}.new_mart_data_popup .popup_main_container .table_container .table_content .table_data .table_main_content{flex:1;overflow:auto}.new_mart_data_popup .popup_main_container .table_container .table_content .table_data .maxBox:last-child .table_data_item{border-bottom:none}.new_mart_data_popup .popup_main_container .table_container .table_content .table_data .table_data_item{padding-right:5px;padding-left:20px;height:40px;line-height:40px;font-size:13px;color:#44566c;border-bottom:1px solid #eaedf0}.new_mart_data_popup .popup_main_container::ng-deep .mat-checkbox .mat-checkbox-background{border:1px solid #d1d1d1}.new_mart_data_popup .popup_main_container::ng-deep .mat-checkbox.mat-checkbox-checked .mat-checkbox-background{border:none}.new_mart_data_popup .disabled-button{pointer-events:none;opacity:.5}.new_mart_data_popup .popup_footer{height:40px;display:flex;align-items:center;justify-content:center}.new_mart_data_popup .popup_footer .popup_btn{width:200px;height:40px;line-height:40px;border:none;border-radius:5px;text-align:center;font-size:13px;font-weight:700}.new_mart_data_popup .popup_footer .popup_btn.cancle_btn{background-color:#eaedf0;color:#979797;margin-right:20px}.new_mart_data_popup .popup_footer .popup_btn.sure_btn{color:#fff;background-color:#1364b3}"]
+                styles: [".new_mart_data_popup{width:100%;position:relative;height:100%;padding:60px 74px;font-family:Arial;display:flex;flex-direction:column;overflow:hidden}.new_mart_data_popup .close_box{position:absolute;right:12px;top:12px;padding:10px;cursor:pointer}.new_mart_data_popup .close_box .deleteIcon{width:24px;height:24px}.new_mart_data_popup .popup_header{margin-bottom:32px}.new_mart_data_popup .popup_header .popup_title{font-size:24px;font-weight:700;text-align:center;color:#44566c;line-height:28px;margin-bottom:12px}.new_mart_data_popup .popup_header .popup_sub_title{font-size:13px;line-height:15px;color:#44566c;text-align:center}.new_mart_data_popup .popup_main_container{flex:1;width:100%;margin-bottom:40px;display:flex;overflow:hidden}.new_mart_data_popup .popup_main_container .left_menu_container{margin-right:30px;text-align:left}.new_mart_data_popup .popup_main_container .left_menu_container .menu_item{line-height:16px;margin-bottom:22px;color:#002c4f;font-size:13px;position:relative;max-width:160px;word-wrap:break-word;cursor:pointer;padding-left:15px}.new_mart_data_popup .popup_main_container .left_menu_container .menu_item.selectItem{font-weight:700}.new_mart_data_popup .popup_main_container .left_menu_container .menu_item .activeLine{display:block;position:absolute;left:0;top:0;width:2px;height:17px;background-color:#0081ff}.new_mart_data_popup .popup_main_container .table_container{flex:1;height:100%;overflow:hidden;border:1px solid #eaedf0;display:flex;flex-direction:column}.new_mart_data_popup .popup_main_container .table_container .table_header{height:40px;background-color:#f8fafb;display:flex;align-items:center}.new_mart_data_popup .popup_main_container .table_container .table_header::ng-deep .mat-checkbox .mat-checkbox-layout{color:#44566c;font-size:13px;font-weight:700}.new_mart_data_popup .popup_main_container .table_container .table_header .div_group{min-width:200px;padding-left:20px}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box{flex:1;display:flex;align-items:center;justify-content:space-between;padding-left:20px;padding-right:5px}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .table_title{font-size:13px;font-weight:700;color:#44566c}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container{width:190px;height:30px;position:relative}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input{background-image:url(../../assets/img/search.svg);background-size:16px;background-repeat:no-repeat;background-position-y:center;background-position-x:10px;width:190px;height:30px;padding:7px 7px 6px 38px;border-radius:5px;background-color:#fff;transform:translateY(0);outline:0;border:none;font-weight:400!important;color:#44566c;font-size:12px!important}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input::-webkit-input-placeholder{color:#adb5bd}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input::-moz-placeholder{color:#adb5bd}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input:-ms-input-placeholder{color:#adb5bd}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input::-ms-input-placeholder{color:#adb5bd}.new_mart_data_popup .popup_main_container .table_container .table_header .data_table_box .search_container .search_input::placeholder{color:#adb5bd}.new_mart_data_popup .popup_main_container .table_container .table_content{display:flex;flex:1;overflow:hidden}.new_mart_data_popup .popup_main_container .table_container .table_content::ng-deep .mat-checkbox .mat-checkbox-layout{color:#44566c;font-size:13px;font-weight:400}.new_mart_data_popup .popup_main_container .table_container .table_content .group_data{height:100%;border-right:1px solid #eaedf0}.new_mart_data_popup .popup_main_container .table_container .table_content .group_data .group_item__box{display:flex;align-items:center;padding-left:20px;height:40px;border-bottom:1px solid #eaedf0;padding-right:10px}.new_mart_data_popup .popup_main_container .table_container .table_content .group_data .group_item__box .e-tooltip{margin-left:5px}.new_mart_data_popup .popup_main_container .table_container .table_content .group_data .group_item__box .e-tooltip span{display:inline-block;width:14px;height:14px;background-image:url(../../assets/img/dashboard_icon/information-grey.svg);background-size:contain;margin-top:5px;cursor:pointer}.new_mart_data_popup .popup_main_container .table_container .table_content .table_data{flex:1;display:flex;height:100%;flex-direction:column;overflow:hidden}.new_mart_data_popup .popup_main_container .table_container .table_content .table_data .table_main_content{flex:1;overflow:auto}.new_mart_data_popup .popup_main_container .table_container .table_content .table_data .maxBox:last-child .table_data_item{border-bottom:none}.new_mart_data_popup .popup_main_container .table_container .table_content .table_data .table_data_item{padding-right:5px;padding-left:20px;height:40px;line-height:40px;font-size:13px;color:#44566c;border-bottom:1px solid #eaedf0}.new_mart_data_popup .popup_main_container::ng-deep .mat-checkbox .mat-checkbox-background{border:1px solid #d1d1d1}.new_mart_data_popup .popup_main_container::ng-deep .mat-checkbox.mat-checkbox-checked .mat-checkbox-background{border:none}.new_mart_data_popup .disabled-button{pointer-events:none;opacity:.5}.new_mart_data_popup .popup_footer{height:40px;display:flex;align-items:center;justify-content:center}.new_mart_data_popup .popup_footer .popup_btn{width:200px;height:40px;line-height:40px;border:none;border-radius:5px;text-align:center;font-size:13px;font-weight:700}.new_mart_data_popup .popup_footer .popup_btn.cancle_btn{background-color:#eaedf0;color:#979797;margin-right:20px}.new_mart_data_popup .popup_footer .popup_btn.sure_btn{color:#fff;background-color:#1364b3}"]
             }] }
 ];
 /** @nocollapse */
@@ -28530,8 +28621,8 @@ class PaneDownloadComponent {
 }
 PaneDownloadComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-pane-download",
-                template: "<div class=\"container dashboard-download-container\">\r\n\t<div class=\"header\">\r\n\t\t<div class=\"header-label\">\r\n\t\t\t{{ translation.DOWNLOAD_PREVIEW || \".DOWNLOAD_PREVIEW\" }}\r\n\t\t</div>\r\n\t\t<mat-icon class=\"close\" (click)=\"close()\">close</mat-icon>\r\n\t</div>\r\n\t<div class=\"body\">\r\n\t\t<div class=\"portlet\" *ngFor=\"let item of portlets\">\r\n\t\t\t<kt-gadget-table\r\n\t\t\t\t#dtable\r\n\t\t\t\t*ngIf=\"getPortletType(item) == 'table'\"\r\n\t\t\t\t[portlets]=\"portlets\"\r\n\t\t\t\t[dashboard]=\"data.dashboard\"\r\n\t\t\t\t[portlet]=\"item\"\r\n\t\t\t>\r\n\t\t\t</kt-gadget-table>\r\n\t\t\t<kt-gadget-pivot\r\n\t\t\t\t#dpivot\r\n\t\t\t\t*ngIf=\"getPortletType(item) == 'pivot'\"\r\n\t\t\t\t[portlet]=\"item\"\r\n\t\t\t\t[dashboard]=\"data.dashboard\"\r\n\t\t\t\t[portlets]=\"portlets\"\r\n\t\t\t\t[themeColor]=\"item.themeColor\"\r\n\t\t\t>\r\n\t\t\t</kt-gadget-pivot>\r\n\t\t\t<kt-gadget-pivot-chart\r\n\t\t\t\t#dpivot\r\n\t\t\t\t*ngIf=\"getPortletType(item) == 'newchart'\"\r\n\t\t\t\t[portlet]=\"item\"\r\n\t\t\t\t[dashboard]=\"data.dashboard\"\r\n\t\t\t\t[portlets]=\"portlets\"\r\n\t\t\t\t[themeColor]=\"item.themeColor\"\r\n\t\t\t\t(updatePorletConfig)=\"updatePorletConfig($event)\"\r\n\t\t\t>\r\n\t\t\t</kt-gadget-pivot-chart>\r\n\t\t\t<kt-gadget-transpose\r\n\t\t\t\t#dtranspose\r\n\t\t\t\t*ngIf=\"getPortletType(item) == 'transpose'\"\r\n\t\t\t\t[portlets]=\"portlets\"\r\n\t\t\t\t[dashboard]=\"data.dashboard\"\r\n\t\t\t\t[portlet]=\"item\"\r\n\t\t\t>\r\n\t\t\t</kt-gadget-transpose>\r\n\t\t\t<kt-bar-charts\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\t['newcolumn', 'newline', 'newcolumnline'].includes(\r\n\t\t\t\t\t\tgetPortletType(item)\r\n\t\t\t\t\t)\r\n\t\t\t\t\"\r\n\t\t\t\t#dnewChart\r\n\t\t\t\t[dashboard]=\"data.dashboard\"\r\n\t\t\t\t[dataColumn]=\"item.dataColumn\"\r\n\t\t\t\t[dataLine]=\"item.dataLine\"\r\n\t\t\t\t[columnType]=\"item.columnType\"\r\n\t\t\t\t[lineType]=\"item.lineType\"\r\n\t\t\t\t[themeColor]=\"item.themeColor\"\r\n\t\t\t\t[portlet]=\"item\"\r\n\t\t\t></kt-bar-charts>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"footer\">\r\n\t\t<div class=\"btn btn-cancle\" (click)=\"close()\">\r\n\t\t\t{{ translation.CLOSE || \".CLOSE\" }}\r\n\t\t</div>\r\n\t\t<div class=\"btn btn-primary\" (click)=\"downloadAll()\">\r\n\t\t\t{{ translation.DOWNLOAD || \".DOWNLOAD\" }}\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n",
+                selector: "rs-pane-download",
+                template: "<div class=\"container dashboard-download-container\">\r\n\t<div class=\"header\">\r\n\t\t<div class=\"header-label\">\r\n\t\t\t{{ translation.DOWNLOAD_PREVIEW || \".DOWNLOAD_PREVIEW\" }}\r\n\t\t</div>\r\n\t\t<mat-icon class=\"close\" (click)=\"close()\">close</mat-icon>\r\n\t</div>\r\n\t<div class=\"body\">\r\n\t\t<div class=\"portlet\" *ngFor=\"let item of portlets\">\r\n\t\t\t<rs-gadget-table\r\n\t\t\t\t#dtable\r\n\t\t\t\t*ngIf=\"getPortletType(item) == 'table'\"\r\n\t\t\t\t[portlets]=\"portlets\"\r\n\t\t\t\t[dashboard]=\"data.dashboard\"\r\n\t\t\t\t[portlet]=\"item\"\r\n\t\t\t>\r\n\t\t\t</rs-gadget-table>\r\n\t\t\t<rs-gadget-pivot\r\n\t\t\t\t#dpivot\r\n\t\t\t\t*ngIf=\"getPortletType(item) == 'pivot'\"\r\n\t\t\t\t[portlet]=\"item\"\r\n\t\t\t\t[dashboard]=\"data.dashboard\"\r\n\t\t\t\t[portlets]=\"portlets\"\r\n\t\t\t\t[themeColor]=\"item.themeColor\"\r\n\t\t\t>\r\n\t\t\t</rs-gadget-pivot>\r\n\t\t\t<rs-gadget-pivot-chart\r\n\t\t\t\t#dpivot\r\n\t\t\t\t*ngIf=\"getPortletType(item) == 'newchart'\"\r\n\t\t\t\t[portlet]=\"item\"\r\n\t\t\t\t[dashboard]=\"data.dashboard\"\r\n\t\t\t\t[portlets]=\"portlets\"\r\n\t\t\t\t[themeColor]=\"item.themeColor\"\r\n\t\t\t\t(updatePorletConfig)=\"updatePorletConfig($event)\"\r\n\t\t\t>\r\n\t\t\t</rs-gadget-pivot-chart>\r\n\t\t\t<rs-gadget-transpose\r\n\t\t\t\t#dtranspose\r\n\t\t\t\t*ngIf=\"getPortletType(item) == 'transpose'\"\r\n\t\t\t\t[portlets]=\"portlets\"\r\n\t\t\t\t[dashboard]=\"data.dashboard\"\r\n\t\t\t\t[portlet]=\"item\"\r\n\t\t\t>\r\n\t\t\t</rs-gadget-transpose>\r\n\t\t\t<rs-bar-charts\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\t['newcolumn', 'newline', 'newcolumnline'].includes(\r\n\t\t\t\t\t\tgetPortletType(item)\r\n\t\t\t\t\t)\r\n\t\t\t\t\"\r\n\t\t\t\t#dnewChart\r\n\t\t\t\t[dashboard]=\"data.dashboard\"\r\n\t\t\t\t[dataColumn]=\"item.dataColumn\"\r\n\t\t\t\t[dataLine]=\"item.dataLine\"\r\n\t\t\t\t[columnType]=\"item.columnType\"\r\n\t\t\t\t[lineType]=\"item.lineType\"\r\n\t\t\t\t[themeColor]=\"item.themeColor\"\r\n\t\t\t\t[portlet]=\"item\"\r\n\t\t\t></rs-bar-charts>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"footer\">\r\n\t\t<div class=\"btn btn-cancle\" (click)=\"close()\">\r\n\t\t\t{{ translation.CLOSE || \".CLOSE\" }}\r\n\t\t</div>\r\n\t\t<div class=\"btn btn-primary\" (click)=\"downloadAll()\">\r\n\t\t\t{{ translation.DOWNLOAD || \".DOWNLOAD\" }}\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n",
                 styles: [".dashboard-download-container.container{width:100%;height:100%;display:flex;flex-direction:column;gap:20px}.dashboard-download-container .header{display:flex;justify-content:space-between;align-items:center;height:24px}.dashboard-download-container .header .header-label{font-size:18px;font-weight:600;color:#44566c}.dashboard-download-container .body{flex:1;display:flex;overflow:auto;flex-direction:column;gap:20px;padding-right:12px}.dashboard-download-container .body .portlet{height:300px;min-height:300px}.dashboard-download-container .footer{width:100%;height:40px;display:flex;justify-content:center;gap:20px}.dashboard-download-container .footer .btn{width:calc((100% - 20px)/ 2);height:40px;border-radius:5px;font-size:13px;font-weight:700;text-align:center;cursor:pointer}.dashboard-download-container .footer .btn-cancle{background:#f2f3f7;color:#979797}.dashboard-download-container .footer .btn-primary{background:#1364b3;color:#fff}"]
             }] }
 ];
@@ -31247,7 +31338,7 @@ class PaneGroupNewComponent {
 PaneGroupNewComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-dashboard",
-                template: "<div id=\"kt-dashboard-container\" class=\"content-portlets\">\r\n  <div\r\n    *ngIf=\"\r\n      dashboard &&\r\n      (dashboard.title || dashboard.description) &&\r\n      !haveFullScreen.length\r\n    \"\r\n    class=\"portlets-description\"\r\n  >\r\n    <h4 *ngIf=\"dashboard && dashboard.title && !haveFullScreen.length\">\r\n      {{ dashboard ? dashboard.title : \"\" }}\r\n    </h4>\r\n    <p *ngIf=\"dashboard && dashboard.description && !haveFullScreen.length\">\r\n      {{ dashboard ? dashboard.description : \"\" }}\r\n    </p>\r\n  </div>\r\n  <div class=\"panes-list\" id=\"kt-dashboard-layout\" #panesList>\r\n    <div style=\"width: 100%\">\r\n      <ejs-dashboardlayout\r\n        id=\"defaultLayout\"\r\n        #defaultLayout\r\n        [columns]=\"4\"\r\n        [cellSpacing]=\"cellSpacing\"\r\n        [cellAspectRatio]=\"cellAspectRatio\"\r\n        [allowDragging]=\"customized\"\r\n        [allowResizing]=\"customized\"\r\n        [resizableHandles]=\"resizableHandles\"\r\n        [draggableHandle]=\"draggableHandle\"\r\n        [mediaQuery]=\"mediaQuery\"\r\n        (resizeStop)=\"resizeStop($event)\"\r\n        (dragStop)=\"dragStop($event)\"\r\n      >\r\n        <e-panels\r\n          *ngIf=\"ActiveDashboardPortlets && ActiveDashboardPortlets.length\"\r\n        >\r\n          <e-panel\r\n            *ngFor=\"let item of ActiveDashboardPortlets; let i = index\"\r\n            [sizeX]=\"item.sizeX\"\r\n            [id]=\"item.newId\"\r\n            [sizeY]=\"item.sizeY\"\r\n            [row]=\"item.row\"\r\n            [col]=\"item.col\"\r\n          >\r\n            <ng-template #header>\r\n              <div class=\"gadget-title\">\r\n                {{ GetgadgetTitle(item.config) }}\r\n              </div>\r\n              <div class=\"gadgetBar pane-group-gadget\">\r\n                <ul class=\"pane-gadget-container\">\r\n                  <li\r\n                    *ngIf=\"customized\"\r\n                    [matTooltip]=\"\r\n                      translation.DUPLICATE\r\n                        ? translation.DUPLICATE\r\n                        : '.DUPLICATE'\r\n                    \"\r\n                    (click)=\"copyPortlet(item)\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/menu-duplicate.svg\"\r\n                    />\r\n                  </li>\r\n                  <li\r\n                    *ngIf=\"customized && rs.hasPermission('DELETE')\"\r\n                    [matTooltip]=\"\r\n                      translation.DELETE ? translation.DELETE : '.DELETE'\r\n                    \"\r\n                    (click)=\"delete(item)\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-delete.svg\"\r\n                    />\r\n                  </li>\r\n                  <li\r\n                    *ngIf=\"getPortletType(item) !== 'transpose'\"\r\n                    [matTooltip]=\"\r\n                      translation.DOWNLOAD ? translation.DOWNLOAD : '.DOWNLOAD'\r\n                    \"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/menu-download.svg\"\r\n                      (click)=\"download(item)\"\r\n                    />\r\n                  </li>\r\n                  <li\r\n                    *ngIf=\"\r\n                      customized &&\r\n                      !['newcolumn', 'newline', 'newcolumnline'].includes(\r\n                        getPortletType(item)\r\n                      )\r\n                    \"\r\n                    [matTooltip]=\"\r\n                      translation.FILTER ? translation.FILTER : '.FILTER'\r\n                    \"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-filters.svg\"\r\n                      (click)=\"openFilter(item)\"\r\n                    />\r\n                  </li>\r\n\r\n                  <li\r\n                    #unclick\r\n                    *ngIf=\"customized && getPortletType(item) === 'pivot'\"\r\n                    style=\"margin-right: 18px\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-basic-sub-total.svg\"\r\n                      (click)=\"openSubtotal(item)\"\r\n                    />\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-basic-arrow-down.svg\"\r\n                      (click)=\"openSubtotal(item)\"\r\n                    />\r\n                  </li>\r\n                  <div\r\n                    #unclick\r\n                    class=\"pivotTable-sub-grand-group\"\r\n                    *ngIf=\"\r\n                      showSubTotalGroup &&\r\n                      getPortletType(item) === 'pivot' &&\r\n                      Current_PortletId === item.newId\r\n                    \"\r\n                  >\r\n                    <ul>\r\n                      <li\r\n                        class=\"sub-grand-group\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': subtotal.selected\r\n                            ? '#f8fafb'\r\n                            : '#fff'\r\n                        }\"\r\n                        *ngFor=\"\r\n                          let subtotal of pivotTableSubTotalList;\r\n                          let idx = index\r\n                        \"\r\n                        (click)=\"selectTotalGroup(idx, 'sub', item)\"\r\n                      >\r\n                        <div style=\"display: flex\">\r\n                          <div\r\n                            style=\"\r\n                              height: 33px;\r\n                              width: 34px;\r\n                              text-align: center;\r\n                            \"\r\n                          >\r\n                            <img\r\n                              *ngIf=\"subtotal.selected\"\r\n                              src=\"../../assets/img/dashboard_icon/forms-checkbox-square-tick.svg\"\r\n                            />\r\n                          </div>\r\n                          <span>{{ subtotal.value }}</span>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                  <li\r\n                    #unclickGrand\r\n                    *ngIf=\"\r\n                      customized &&\r\n                      (getPortletType(item) === 'pivot' ||\r\n                        getPortletType(item) === 'table')\r\n                    \"\r\n                    style=\"margin-right: 18px\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-basic-total.svg\"\r\n                      (click)=\"openGrandtotal(item)\"\r\n                    />\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-basic-arrow-down.svg\"\r\n                      (click)=\"openGrandtotal(item)\"\r\n                    />\r\n                  </li>\r\n                  <div\r\n                    #unclickGrand\r\n                    class=\"pivotTable-sub-grand-group\"\r\n                    style=\"left: 230px\"\r\n                    *ngIf=\"\r\n                      showgrandTotalGroup &&\r\n                      getPortletType(item) === 'pivot' &&\r\n                      Current_PortletId === item.newId\r\n                    \"\r\n                  >\r\n                    <ul>\r\n                      <li\r\n                        class=\"sub-grand-group\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': grandtotal.selected\r\n                            ? '#f8fafb'\r\n                            : '#fff'\r\n                        }\"\r\n                        *ngFor=\"\r\n                          let grandtotal of pivotTableGrandTotalList;\r\n                          let idx = index\r\n                        \"\r\n                        (click)=\"selectTotalGroup(idx, 'grand', item)\"\r\n                      >\r\n                        <div style=\"display: flex\">\r\n                          <div\r\n                            style=\"\r\n                              height: 33px;\r\n                              width: 34px;\r\n                              text-align: center;\r\n                            \"\r\n                          >\r\n                            <img\r\n                              *ngIf=\"grandtotal.selected\"\r\n                              src=\"../../assets/img/dashboard_icon/forms-checkbox-square-tick.svg\"\r\n                            />\r\n                          </div>\r\n                          <span>{{ grandtotal.value }}</span>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                  <div\r\n                    #unclickGrand\r\n                    class=\"pivotTable-sub-grand-group\"\r\n                    style=\"left: 210px; height: 76px\"\r\n                    *ngIf=\"\r\n                      showTableGrandTotalGroup &&\r\n                      getPortletType(item) === 'table' &&\r\n                      Current_PortletId === item.newId\r\n                    \"\r\n                  >\r\n                    <ul>\r\n                      <li\r\n                        class=\"sub-grand-group\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': grandtotal.selected\r\n                            ? '#f8fafb'\r\n                            : '#fff'\r\n                        }\"\r\n                        *ngFor=\"\r\n                          let grandtotal of tableGrandTotalList;\r\n                          let idx = index\r\n                        \"\r\n                        (click)=\"selectTotalGroup(idx, 'tableGrand', item)\"\r\n                      >\r\n                        <div style=\"display: flex\">\r\n                          <div\r\n                            style=\"\r\n                              height: 33px;\r\n                              width: 34px;\r\n                              text-align: center;\r\n                            \"\r\n                          >\r\n                            <img\r\n                              *ngIf=\"grandtotal.selected\"\r\n                              src=\"../../assets/img/dashboard_icon/forms-checkbox-square-tick.svg\"\r\n                            />\r\n                          </div>\r\n                          <span>{{ grandtotal.value }}</span>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                  <li\r\n                    *ngIf=\"\r\n                      customized &&\r\n                      !['newcolumn', 'newline', 'newcolumnline'].includes(\r\n                        getPortletType(item)\r\n                      )\r\n                    \"\r\n                    [matTooltip]=\"\r\n                      translation.FORMAT ? translation.FORMAT : '.FORMAT'\r\n                    \"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-basic-format.svg\"\r\n                      (click)=\"fieldFormat(item)\"\r\n                    />\r\n                  </li>\r\n                  <li\r\n                    *ngIf=\"\r\n                      (customized || url_type === 'sharedbeta') &&\r\n                      !['newcolumn', 'newline', 'newcolumnline'].includes(\r\n                        getPortletType(item)\r\n                      )\r\n                    \"\r\n                    [matTooltip]=\"\r\n                      translation.CONFIGURATIONS || '.CONFIGURATIONS'\r\n                    \"\r\n                    (click)=\"configurations(item, $event)\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-settings.svg\"\r\n                    />\r\n                  </li>\r\n                  <li\r\n                    *ngIf=\"customized\"\r\n                    [matTooltip]=\"translation.EDIT ? translation.EDIT : '.EDIT'\"\r\n                    (click)=\"edit(item)\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-edit.svg\"\r\n                    />\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </ng-template>\r\n            <ng-template #content>\r\n              <kt-gadget-table\r\n                #table\r\n                *ngIf=\"getPortletType(item) == 'table'\"\r\n                [portlets]=\"portlets\"\r\n                [dashboard]=\"dashboard\"\r\n                [portlet]=\"item\"\r\n              >\r\n              </kt-gadget-table>\r\n              <kt-gadget-pivot\r\n                #pivot\r\n                *ngIf=\"getPortletType(item) == 'pivot'\"\r\n                [portlet]=\"item\"\r\n                [dashboard]=\"dashboard\"\r\n                [portlets]=\"portlets\"\r\n                [themeColor]=\"item.themeColor\"\r\n              >\r\n              </kt-gadget-pivot>\r\n              <kt-gadget-pivot-chart\r\n                #pivot\r\n                *ngIf=\"getPortletType(item) == 'newchart'\"\r\n                [portlet]=\"item\"\r\n                [dashboard]=\"dashboard\"\r\n                (updatePorletConfig)=\"updatePorletConfig($event)\"\r\n                [portlets]=\"portlets\"\r\n                [themeColor]=\"item.themeColor\"\r\n              >\r\n              </kt-gadget-pivot-chart>\r\n              <kt-gadget-transpose\r\n                #transpose\r\n                *ngIf=\"getPortletType(item) == 'transpose'\"\r\n                [portlets]=\"portlets\"\r\n                [dashboard]=\"dashboard\"\r\n                [portlet]=\"item\"\r\n              >\r\n              </kt-gadget-transpose>\r\n              <kt-bar-charts\r\n                *ngIf=\"\r\n                  ['newcolumn', 'newline', 'newcolumnline'].includes(\r\n                    getPortletType(item)\r\n                  )\r\n                \"\r\n                #newChart\r\n                [dashboard]=\"dashboard\"\r\n                [dataColumn]=\"item.dataColumn\"\r\n                [dataLine]=\"item.dataLine\"\r\n                [columnType]=\"item.columnType\"\r\n                [lineType]=\"item.lineType\"\r\n                [themeColor]=\"item.themeColor\"\r\n                [portlet]=\"item\"\r\n              ></kt-bar-charts>\r\n            </ng-template>\r\n          </e-panel>\r\n        </e-panels>\r\n      </ejs-dashboardlayout>\r\n    </div>\r\n  </div>\r\n  <kt-empty-icon-prompt\r\n    [displayCode]=\"'customize'\"\r\n    [dashboard]=\"dashboard\"\r\n    hidden\r\n  >\r\n  </kt-empty-icon-prompt>\r\n  <div\r\n    id=\"kt-dashboard-tabs\"\r\n    class=\"dashboard-tab-list\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n  >\r\n    <div\r\n      class=\"tab-item\"\r\n      *ngFor=\"let item of tabList; let i = index\"\r\n      [ngClass]=\"{\r\n        active: item.id === activeTab,\r\n        prev: prevId === item.id && i !== tabList.length - 1\r\n      }\"\r\n      (click)=\"onActiveTab(item, i)\"\r\n      (dblclick)=\"onStartEdit(item.id)\"\r\n      cdkDrag\r\n    >\r\n      <div\r\n        *ngIf=\"!startEdit || item.id !== activeTab\"\r\n        [matTooltip]=\"\r\n          item.label === item.displayLabel ? null : item.displayLabel\r\n        \"\r\n      >\r\n        {{ item.displayLabel }}\r\n        <img\r\n          *ngIf=\"tabList.length > 1\"\r\n          src=\"../../assets/img/dashboard_icon/dashboard-tab-delete.svg\"\r\n          alt=\"\"\r\n          (click)=\"onDeleteTab(item)\"\r\n        />\r\n      </div>\r\n      <input\r\n        *ngIf=\"startEdit && item.id === activeTab\"\r\n        type=\"text\"\r\n        [(ngModel)]=\"item.label\"\r\n        (input)=\"setTabInput($event)\"\r\n        (blur)=\"saveTabInput(item)\"\r\n      />\r\n    </div>\r\n    <img\r\n      class=\"add-tab-icon\"\r\n      src=\"../../assets/img/dashboard_icon/add-tab.svg\"\r\n      (click)=\"onAddTab()\"\r\n    />\r\n  </div>\r\n</div>\r\n\r\n<div class=\"sidebar\" [ngClass]=\"{ gone: !push_btn }\" *ngIf=\"dashboard_sidebar\">\r\n  <span class=\"push-btn\" (click)=\"pushSlider()\" [class.left-place]=\"!push_btn\">\r\n    <span\r\n      class=\"sidebar-btn\"\r\n      *ngIf=\"push_btn\"\r\n      [inlineSVG]=\"'../../assets/img/dashboard_icon/Angle-double-right.svg'\"\r\n    ></span>\r\n    <span\r\n      class=\"sidebar-btn\"\r\n      *ngIf=\"!push_btn\"\r\n      [inlineSVG]=\"'../../assets/img/dashboard_icon/Angle-double-left.svg'\"\r\n    ></span>\r\n  </span>\r\n  <kt-sidebar-iconlist-new\r\n    #sidebar\r\n    *ngIf=\"push_btn\"\r\n    [dashboard_sidebar]=\"dashboard_sidebar\"\r\n    [dashboard]=\"dashboard\"\r\n    [dashboardId]=\"url_id\"\r\n    [portlet]=\"portlet\"\r\n    [portlets]=\"portlets\"\r\n    [activeTabId]=\"activeTabId\"\r\n    [activeTabLabel]=\"activeTabLabel\"\r\n    [figureCode]=\"figureCode\"\r\n    [tabactive]=\"tabactive\"\r\n    [_selectedY]=\"selectedY\"\r\n    [_selectedSecondY]=\"selectedSecondY\"\r\n    [_selectedX]=\"selectedX\"\r\n    [_selectedMultiples]=\"selectedMultiples\"\r\n    [_selectTheme]=\"selectTheme\"\r\n    [appCode]=\"appCode\"\r\n    (updatePorlet)=\"updatePorlet($event)\"\r\n    (chartUpdate)=\"chartUpdate($event)\"\r\n    (closeSidebar)=\"closeSidebar($event)\"\r\n    (updatePushBtn)=\"updatePushBtn($event)\"\r\n    (updateTheme)=\"updateTheme($event)\"\r\n    (updatePorletConfig)=\"updatePorletConfig($event)\"\r\n    (onToggleTabactive)=\"onToggleTabactive($event)\"\r\n  >\r\n  </kt-sidebar-iconlist-new>\r\n</div>\r\n<button\r\n  class=\"addPorlet\"\r\n  *ngIf=\"customized && !push_btn\"\r\n  mat-mini-fab\r\n  color=\"primary\"\r\n  (click)=\"addPorlet()\"\r\n>\r\n  +\r\n</button>\r\n",
+                template: "<div id=\"kt-dashboard-container\" class=\"content-portlets\">\r\n  <div\r\n    *ngIf=\"\r\n      dashboard &&\r\n      (dashboard.title || dashboard.description) &&\r\n      !haveFullScreen.length\r\n    \"\r\n    class=\"portlets-description\"\r\n  >\r\n    <h4 *ngIf=\"dashboard && dashboard.title && !haveFullScreen.length\">\r\n      {{ dashboard ? dashboard.title : \"\" }}\r\n    </h4>\r\n    <p *ngIf=\"dashboard && dashboard.description && !haveFullScreen.length\">\r\n      {{ dashboard ? dashboard.description : \"\" }}\r\n    </p>\r\n  </div>\r\n  <div class=\"panes-list\" id=\"kt-dashboard-layout\" #panesList>\r\n    <div style=\"width: 100%\">\r\n      <ejs-dashboardlayout\r\n        id=\"defaultLayout\"\r\n        #defaultLayout\r\n        [columns]=\"4\"\r\n        [cellSpacing]=\"cellSpacing\"\r\n        [cellAspectRatio]=\"cellAspectRatio\"\r\n        [allowDragging]=\"customized\"\r\n        [allowResizing]=\"customized\"\r\n        [resizableHandles]=\"resizableHandles\"\r\n        [draggableHandle]=\"draggableHandle\"\r\n        [mediaQuery]=\"mediaQuery\"\r\n        (resizeStop)=\"resizeStop($event)\"\r\n        (dragStop)=\"dragStop($event)\"\r\n      >\r\n        <e-panels\r\n          *ngIf=\"ActiveDashboardPortlets && ActiveDashboardPortlets.length\"\r\n        >\r\n          <e-panel\r\n            *ngFor=\"let item of ActiveDashboardPortlets; let i = index\"\r\n            [sizeX]=\"item.sizeX\"\r\n            [id]=\"item.newId\"\r\n            [sizeY]=\"item.sizeY\"\r\n            [row]=\"item.row\"\r\n            [col]=\"item.col\"\r\n          >\r\n            <ng-template #header>\r\n              <div class=\"gadget-title\">\r\n                {{ GetgadgetTitle(item.config) }}\r\n              </div>\r\n              <div class=\"gadgetBar pane-group-gadget\">\r\n                <ul class=\"pane-gadget-container\">\r\n                  <li\r\n                    *ngIf=\"customized\"\r\n                    [matTooltip]=\"\r\n                      translation.DUPLICATE\r\n                        ? translation.DUPLICATE\r\n                        : '.DUPLICATE'\r\n                    \"\r\n                    (click)=\"copyPortlet(item)\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/menu-duplicate.svg\"\r\n                    />\r\n                  </li>\r\n                  <li\r\n                    *ngIf=\"customized && rs.hasPermission('DELETE')\"\r\n                    [matTooltip]=\"\r\n                      translation.DELETE ? translation.DELETE : '.DELETE'\r\n                    \"\r\n                    (click)=\"delete(item)\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-delete.svg\"\r\n                    />\r\n                  </li>\r\n                  <li\r\n                    *ngIf=\"getPortletType(item) !== 'transpose'\"\r\n                    [matTooltip]=\"\r\n                      translation.DOWNLOAD ? translation.DOWNLOAD : '.DOWNLOAD'\r\n                    \"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/menu-download.svg\"\r\n                      (click)=\"download(item)\"\r\n                    />\r\n                  </li>\r\n                  <li\r\n                    *ngIf=\"\r\n                      customized &&\r\n                      !['newcolumn', 'newline', 'newcolumnline'].includes(\r\n                        getPortletType(item)\r\n                      )\r\n                    \"\r\n                    [matTooltip]=\"\r\n                      translation.FILTER ? translation.FILTER : '.FILTER'\r\n                    \"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-filters.svg\"\r\n                      (click)=\"openFilter(item)\"\r\n                    />\r\n                  </li>\r\n\r\n                  <li\r\n                    #unclick\r\n                    *ngIf=\"customized && getPortletType(item) === 'pivot'\"\r\n                    style=\"margin-right: 18px\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-basic-sub-total.svg\"\r\n                      (click)=\"openSubtotal(item)\"\r\n                    />\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-basic-arrow-down.svg\"\r\n                      (click)=\"openSubtotal(item)\"\r\n                    />\r\n                  </li>\r\n                  <div\r\n                    #unclick\r\n                    class=\"pivotTable-sub-grand-group\"\r\n                    *ngIf=\"\r\n                      showSubTotalGroup &&\r\n                      getPortletType(item) === 'pivot' &&\r\n                      Current_PortletId === item.newId\r\n                    \"\r\n                  >\r\n                    <ul>\r\n                      <li\r\n                        class=\"sub-grand-group\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': subtotal.selected\r\n                            ? '#f8fafb'\r\n                            : '#fff'\r\n                        }\"\r\n                        *ngFor=\"\r\n                          let subtotal of pivotTableSubTotalList;\r\n                          let idx = index\r\n                        \"\r\n                        (click)=\"selectTotalGroup(idx, 'sub', item)\"\r\n                      >\r\n                        <div style=\"display: flex\">\r\n                          <div\r\n                            style=\"\r\n                              height: 33px;\r\n                              width: 34px;\r\n                              text-align: center;\r\n                            \"\r\n                          >\r\n                            <img\r\n                              *ngIf=\"subtotal.selected\"\r\n                              src=\"../../assets/img/dashboard_icon/forms-checkbox-square-tick.svg\"\r\n                            />\r\n                          </div>\r\n                          <span>{{ subtotal.value }}</span>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                  <li\r\n                    #unclickGrand\r\n                    *ngIf=\"\r\n                      customized &&\r\n                      (getPortletType(item) === 'pivot' ||\r\n                        getPortletType(item) === 'table')\r\n                    \"\r\n                    style=\"margin-right: 18px\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-basic-total.svg\"\r\n                      (click)=\"openGrandtotal(item)\"\r\n                    />\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-basic-arrow-down.svg\"\r\n                      (click)=\"openGrandtotal(item)\"\r\n                    />\r\n                  </li>\r\n                  <div\r\n                    #unclickGrand\r\n                    class=\"pivotTable-sub-grand-group\"\r\n                    style=\"left: 230px\"\r\n                    *ngIf=\"\r\n                      showgrandTotalGroup &&\r\n                      getPortletType(item) === 'pivot' &&\r\n                      Current_PortletId === item.newId\r\n                    \"\r\n                  >\r\n                    <ul>\r\n                      <li\r\n                        class=\"sub-grand-group\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': grandtotal.selected\r\n                            ? '#f8fafb'\r\n                            : '#fff'\r\n                        }\"\r\n                        *ngFor=\"\r\n                          let grandtotal of pivotTableGrandTotalList;\r\n                          let idx = index\r\n                        \"\r\n                        (click)=\"selectTotalGroup(idx, 'grand', item)\"\r\n                      >\r\n                        <div style=\"display: flex\">\r\n                          <div\r\n                            style=\"\r\n                              height: 33px;\r\n                              width: 34px;\r\n                              text-align: center;\r\n                            \"\r\n                          >\r\n                            <img\r\n                              *ngIf=\"grandtotal.selected\"\r\n                              src=\"../../assets/img/dashboard_icon/forms-checkbox-square-tick.svg\"\r\n                            />\r\n                          </div>\r\n                          <span>{{ grandtotal.value }}</span>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                  <div\r\n                    #unclickGrand\r\n                    class=\"pivotTable-sub-grand-group\"\r\n                    style=\"left: 210px; height: 76px\"\r\n                    *ngIf=\"\r\n                      showTableGrandTotalGroup &&\r\n                      getPortletType(item) === 'table' &&\r\n                      Current_PortletId === item.newId\r\n                    \"\r\n                  >\r\n                    <ul>\r\n                      <li\r\n                        class=\"sub-grand-group\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': grandtotal.selected\r\n                            ? '#f8fafb'\r\n                            : '#fff'\r\n                        }\"\r\n                        *ngFor=\"\r\n                          let grandtotal of tableGrandTotalList;\r\n                          let idx = index\r\n                        \"\r\n                        (click)=\"selectTotalGroup(idx, 'tableGrand', item)\"\r\n                      >\r\n                        <div style=\"display: flex\">\r\n                          <div\r\n                            style=\"\r\n                              height: 33px;\r\n                              width: 34px;\r\n                              text-align: center;\r\n                            \"\r\n                          >\r\n                            <img\r\n                              *ngIf=\"grandtotal.selected\"\r\n                              src=\"../../assets/img/dashboard_icon/forms-checkbox-square-tick.svg\"\r\n                            />\r\n                          </div>\r\n                          <span>{{ grandtotal.value }}</span>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                  <li\r\n                    *ngIf=\"\r\n                      customized &&\r\n                      !['newcolumn', 'newline', 'newcolumnline'].includes(\r\n                        getPortletType(item)\r\n                      )\r\n                    \"\r\n                    [matTooltip]=\"\r\n                      translation.FORMAT ? translation.FORMAT : '.FORMAT'\r\n                    \"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-basic-format.svg\"\r\n                      (click)=\"fieldFormat(item)\"\r\n                    />\r\n                  </li>\r\n                  <li\r\n                    *ngIf=\"\r\n                      (customized || url_type === 'sharedbeta') &&\r\n                      !['newcolumn', 'newline', 'newcolumnline'].includes(\r\n                        getPortletType(item)\r\n                      )\r\n                    \"\r\n                    [matTooltip]=\"\r\n                      translation.CONFIGURATIONS || '.CONFIGURATIONS'\r\n                    \"\r\n                    (click)=\"configurations(item, $event)\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-settings.svg\"\r\n                    />\r\n                  </li>\r\n                  <li\r\n                    *ngIf=\"customized\"\r\n                    [matTooltip]=\"translation.EDIT ? translation.EDIT : '.EDIT'\"\r\n                    (click)=\"edit(item)\"\r\n                  >\r\n                    <img\r\n                      src=\"../../assets/img/dashboard_icon/gadget-edit.svg\"\r\n                    />\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </ng-template>\r\n            <ng-template #content>\r\n              <rs-gadget-table\r\n                #table\r\n                *ngIf=\"getPortletType(item) == 'table'\"\r\n                [portlets]=\"portlets\"\r\n                [dashboard]=\"dashboard\"\r\n                [portlet]=\"item\"\r\n              >\r\n              </rs-gadget-table>\r\n              <rs-gadget-pivot\r\n                #pivot\r\n                *ngIf=\"getPortletType(item) == 'pivot'\"\r\n                [portlet]=\"item\"\r\n                [dashboard]=\"dashboard\"\r\n                [portlets]=\"portlets\"\r\n                [themeColor]=\"item.themeColor\"\r\n              >\r\n              </rs-gadget-pivot>\r\n              <rs-gadget-pivot-chart\r\n                #pivot\r\n                *ngIf=\"getPortletType(item) == 'newchart'\"\r\n                [portlet]=\"item\"\r\n                [dashboard]=\"dashboard\"\r\n                (updatePorletConfig)=\"updatePorletConfig($event)\"\r\n                [portlets]=\"portlets\"\r\n                [themeColor]=\"item.themeColor\"\r\n              >\r\n              </rs-gadget-pivot-chart>\r\n              <rs-gadget-transpose\r\n                #transpose\r\n                *ngIf=\"getPortletType(item) == 'transpose'\"\r\n                [portlets]=\"portlets\"\r\n                [dashboard]=\"dashboard\"\r\n                [portlet]=\"item\"\r\n              >\r\n              </rs-gadget-transpose>\r\n              <rs-bar-charts\r\n                *ngIf=\"\r\n                  ['newcolumn', 'newline', 'newcolumnline'].includes(\r\n                    getPortletType(item)\r\n                  )\r\n                \"\r\n                #newChart\r\n                [dashboard]=\"dashboard\"\r\n                [dataColumn]=\"item.dataColumn\"\r\n                [dataLine]=\"item.dataLine\"\r\n                [columnType]=\"item.columnType\"\r\n                [lineType]=\"item.lineType\"\r\n                [themeColor]=\"item.themeColor\"\r\n                [portlet]=\"item\"\r\n              ></rs-bar-charts>\r\n            </ng-template>\r\n          </e-panel>\r\n        </e-panels>\r\n      </ejs-dashboardlayout>\r\n    </div>\r\n  </div>\r\n  <rs-empty-icon-prompt\r\n    [displayCode]=\"'customize'\"\r\n    [dashboard]=\"dashboard\"\r\n    hidden\r\n  >\r\n  </rs-empty-icon-prompt>\r\n  <div\r\n    id=\"kt-dashboard-tabs\"\r\n    class=\"dashboard-tab-list\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n  >\r\n    <div\r\n      class=\"tab-item\"\r\n      *ngFor=\"let item of tabList; let i = index\"\r\n      [ngClass]=\"{\r\n        active: item.id === activeTab,\r\n        prev: prevId === item.id && i !== tabList.length - 1\r\n      }\"\r\n      (click)=\"onActiveTab(item, i)\"\r\n      (dblclick)=\"onStartEdit(item.id)\"\r\n      cdkDrag\r\n    >\r\n      <div\r\n        *ngIf=\"!startEdit || item.id !== activeTab\"\r\n        [matTooltip]=\"\r\n          item.label === item.displayLabel ? null : item.displayLabel\r\n        \"\r\n      >\r\n        {{ item.displayLabel }}\r\n        <img\r\n          *ngIf=\"tabList.length > 1\"\r\n          src=\"../../assets/img/dashboard_icon/dashboard-tab-delete.svg\"\r\n          alt=\"\"\r\n          (click)=\"onDeleteTab(item)\"\r\n        />\r\n      </div>\r\n      <input\r\n        *ngIf=\"startEdit && item.id === activeTab\"\r\n        type=\"text\"\r\n        [(ngModel)]=\"item.label\"\r\n        (input)=\"setTabInput($event)\"\r\n        (blur)=\"saveTabInput(item)\"\r\n      />\r\n    </div>\r\n    <img\r\n      class=\"add-tab-icon\"\r\n      src=\"../../assets/img/dashboard_icon/add-tab.svg\"\r\n      (click)=\"onAddTab()\"\r\n    />\r\n  </div>\r\n</div>\r\n\r\n<div class=\"sidebar\" [ngClass]=\"{ gone: !push_btn }\" *ngIf=\"dashboard_sidebar\">\r\n  <span class=\"push-btn\" (click)=\"pushSlider()\" [class.left-place]=\"!push_btn\">\r\n    <span\r\n      class=\"sidebar-btn\"\r\n      *ngIf=\"push_btn\"\r\n      [inlineSVG]=\"'../../assets/img/dashboard_icon/Angle-double-right.svg'\"\r\n    ></span>\r\n    <span\r\n      class=\"sidebar-btn\"\r\n      *ngIf=\"!push_btn\"\r\n      [inlineSVG]=\"'../../assets/img/dashboard_icon/Angle-double-left.svg'\"\r\n    ></span>\r\n  </span>\r\n  <rs-sidebar-iconlist-new\r\n    #sidebar\r\n    *ngIf=\"push_btn\"\r\n    [dashboard_sidebar]=\"dashboard_sidebar\"\r\n    [dashboard]=\"dashboard\"\r\n    [dashboardId]=\"url_id\"\r\n    [portlet]=\"portlet\"\r\n    [portlets]=\"portlets\"\r\n    [activeTabId]=\"activeTabId\"\r\n    [activeTabLabel]=\"activeTabLabel\"\r\n    [figureCode]=\"figureCode\"\r\n    [tabactive]=\"tabactive\"\r\n    [_selectedY]=\"selectedY\"\r\n    [_selectedSecondY]=\"selectedSecondY\"\r\n    [_selectedX]=\"selectedX\"\r\n    [_selectedMultiples]=\"selectedMultiples\"\r\n    [_selectTheme]=\"selectTheme\"\r\n    [appCode]=\"appCode\"\r\n    (updatePorlet)=\"updatePorlet($event)\"\r\n    (chartUpdate)=\"chartUpdate($event)\"\r\n    (closeSidebar)=\"closeSidebar($event)\"\r\n    (updatePushBtn)=\"updatePushBtn($event)\"\r\n    (updateTheme)=\"updateTheme($event)\"\r\n    (updatePorletConfig)=\"updatePorletConfig($event)\"\r\n    (onToggleTabactive)=\"onToggleTabactive($event)\"\r\n  >\r\n  </rs-sidebar-iconlist-new>\r\n</div>\r\n<button\r\n  class=\"addPorlet\"\r\n  *ngIf=\"customized && !push_btn\"\r\n  mat-mini-fab\r\n  color=\"primary\"\r\n  (click)=\"addPorlet()\"\r\n>\r\n  +\r\n</button>\r\n",
                 // changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [DatePipe, { provide: MAT_DATE_FORMATS, useValue: ɵ0 }],
                 styles: ["@charset \"UTF-8\";.kt-portlet.kt-portlet--mobile.kt-portlet--sortable{position:relative;overflow-x:auto;overflow-y:hidden;height:100%!important}.kt-portlet.kt-portlet--mobile.kt-portlet--sortable::-webkit-scrollbar{width:5px;height:8px;background:#fff}.kt-portlet.kt-portlet--mobile.kt-portlet--sortable::-webkit-scrollbar-thumb{background:#eaedf0}.kt-portlet .kt-portlet__body{height:100%;overflow:hidden;padding:0 0 30px!important}.pane{margin-bottom:30px}i.la.la-compress{font-size:20px!important}.dropdown-menu.dropdown-menu-right.dropdown-menu-md.dropdown-menu-fit{z-index:102}h3.kt-portlet__head-title{font-size:18px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .date-portlet .mat-form-field-wrapper{width:100px;margin-left:15px}.table-none-padding{padding:0}.kt-portlet__head-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-bordered{height:30px;width:40px;border-radius:5px;border:1px solid #6c757d;color:#44566c;padding:0}.btn-bordered.date{padding-top:4px;padding-left:8px;width:160px;font-size:15px}.btn-bordered .mat-datepicker-toggle{color:rgba(0,0,0,.5)}.btn-bordered svg.mat-datepicker-toggle-default-icon.ng-star-inserted{width:20px!important}:host::ng-deep button.mat-icon-button.mat-button-base{transform:translateY(-10px)!important}gridster.scrollVertical{width:auto!important;background:#f2f2f8!important;padding-left:2px!important}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{padding-right:15px!important;padding-left:15px!important}.kt-portlet__head-group.show{position:relative!important}.dropdown-menu.dropdown-menu-right.dropdown-menu-md.dropdown-menu-fit.show{top:48px!important;left:-230px!important;transform:none!important}span.top-date{font-family:Arial;font-size:15px;color:#6c757d}svg.bi.bi-arrows-angle-contract{color:#a2a5b9;margin-right:10px}li.full-svg:hover svg.bi.bi-arrows-angle-contract{color:#0081ff}.pdf-size{width:666px;height:999px}.portlets-description{padding:12px 8px 12px 20px;display:flex;flex-flow:column;gap:12px}.portlets-description h4,.portlets-description p{margin:0;color:#44566c;font-family:Arial;font-size:11px!important;font-style:normal;font-weight:400;line-height:14px}.edit-portlet{border:2px solid #0181ff;border-radius:10px}.kt-form__path{margin-bottom:23px;font-size:13px}.kt-form__path .fa-angle-right,.kt-form__path .lastspan{color:#8697a8}::ng-deep rs-dashboard{height:100%;display:flex;flex-direction:column;position:relative}::ng-deep rs-dashboard .panes-list{width:100%!important;margin-bottom:70px!important}::ng-deep rs-dashboard .panes-list .kt-portlet{border-radius:5px;border-top:10px solid #fff}::ng-deep rs-dashboard button.addPorlet{font-size:32px;position:fixed;bottom:100px;right:20px;z-index:1003;background-color:#0081ff!important}::ng-deep rs-dashboard .sidebar{right:0;top:0;bottom:0;position:absolute;z-index:1000;width:400px;background:#fff!important;transition:width .3s}::ng-deep rs-dashboard .sidebar .push-btn{position:absolute;left:0;top:0;z-index:1}::ng-deep rs-dashboard .sidebar.gone{width:0}::ng-deep rs-dashboard .sidebar .sidebar-btn svg g polygon{fill-opacity:0}::ng-deep rs-dashboard .sidebar .sidebar-btn:hover svg g path{fill:#0081ff;transition:fill .3s}.panes-list{height:100%;width:100%;margin:0!important;overflow:auto;padding-bottom:50px;background:#f2f2f8}.panes-list ::ng-deep .e-panel{border-radius:10px;overflow:auto}.panes-list ::ng-deep .e-panel .e-panel-container{min-width:340px;min-height:340px}.panes-list-dashboard{top:-20px!important}.panes-list-desktop{left:-25px!important;top:-36px!important}:host ::ng-deep .e-panel-header{padding:0!important;height:auto!important;border:0!important}.gadgetBar{height:24px;background-color:#fff!important}.gadgetBar .pane-gadget-container{padding:0 12px}.gadgetBar .pivotTable-sub-grand-group ul{width:100%;display:block}.gadgetBar .pivotTable-sub-grand-group ul li{width:24px;height:24px;display:flex;align-items:center;cursor:pointer;padding:4px}.gadgetBar ul{margin:0;padding:0;list-style:none;display:flex;width:100%;gap:12px}.gadgetBar ul li{width:24px;height:24px;display:flex;align-items:center;cursor:pointer;padding:4px}.gadget-title{height:36px;padding:10px 12px 8px;color:#43566c;font-family:Arial;font-size:15px;font-weight:700;line-height:18px}.pivotTable-sub-grand-group{width:241px;height:142px;z-index:999;position:absolute;left:180px;top:80px;border-radius:10px;border:1px solid #eaedf0;background-color:#fff}.sub-grand-group{width:100%!important;display:block!important;height:33px!important;margin:0!important;line-height:33px!important;text-align:left!important}.sub-grand-group span{font-family:Arial;font-size:14px;color:#44566c;font-weight:400}.sub-grand-group:hover{background-color:#f8fafb!important}::ng-deep .e-pivotfieldlist-container .e-field-list-container .e-field-table .e-field-list-tree-outer-div{height:278px!important}.content-portlets{height:100%;position:relative;overflow:hidden}.content-portlets .dashboard-tab-list{position:absolute;bottom:0;left:0;z-index:1000;width:100%;border-top:1px solid #dbe1e7;border-bottom:1px solid #dbe1e7;background:#f8fafb;box-shadow:0 -1px 4px 0 rgba(0,0,0,.05);display:flex;align-items:center;height:28px}.content-portlets .dashboard-tab-list img{margin-left:10px;cursor:pointer}.content-portlets .dashboard-tab-list .tab-item{cursor:pointer;padding-bottom:4px;border-left:0;color:#43566c}.content-portlets .dashboard-tab-list .tab-item:hover img{display:block!important}.content-portlets .dashboard-tab-list .tab-item div{border-right:1px solid #d0d6dd;border-left:1px solid transparent;border-bottom:1px solid transparent;font-size:11px;line-height:16px;min-height:16px;padding:5px 12px 2px;display:flex;width:114px;align-items:center;justify-content:space-between;gap:6px}.content-portlets .dashboard-tab-list .tab-item div img{display:none;cursor:pointer;margin-left:0}.content-portlets .dashboard-tab-list .tab-item:first-child div{border-left:1px solid #d0d6dd}.content-portlets .dashboard-tab-list .tab-item:first-child.active div{border-right:1px solid #d6dce2}.content-portlets .dashboard-tab-list .tab-item.active div{background-color:#fff;border-bottom-color:#d6dce2;font-weight:700;border-radius:0 0 6px 6px;border-left-color:#d6dce2}.content-portlets .dashboard-tab-list .tab-item.prev div{border-right-color:transparent}.content-portlets .dashboard-tab-list .tab-item input{border:none;text-shadow:none;border-bottom:1px solid #43566c;outline:0;height:16px;width:150px;font-size:11px!important}::ng-deep .mat-menu-content .options{padding:4px 0}::ng-deep .mat-menu-content .options .option-item{padding:4px 8px;font-size:13px;cursor:pointer}::ng-deep .mat-menu-content .options .option-item:hover{background:rgba(0,0,0,.05)}::ng-deep .mat-menu-content .options .option-checkbox{padding:8px}::ng-deep .mat-menu-content .options .option-checkbox.first{border-top:1px solid rgba(0,0,0,.1)}::ng-deep .mat-menu-content .options .option-checkbox .e-icons{height:18px;width:18px}::ng-deep .mat-menu-content .options .option-checkbox .e-icons:before{font-size:12px}::ng-deep #vegetables_popup{width:400px!important}#kt-dashboard-container{display:flex;flex-flow:column nowrap}#kt-dashboard-tabs{flex:none;position:static;height:30px;padding:0 20px;display:flex;flex-flow:row nowrap;align-items:flex-start}#kt-dashboard-tabs .tab-item.active>div{padding-bottom:4px}#kt-dashboard-tabs .tab-item>div{color:#1f3f5c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:14px}#kt-dashboard-tabs .add-tab-icon{width:16px;height:16px;margin:5px 12px auto}#kt-dashboard-layout{flex:auto;height:0;padding:20px;background-color:rgba(68,86,108,.1)}.left-place{left:-24px!important}"]
@@ -32797,7 +32888,7 @@ RichtexteditorComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-richtext-editor",
                 template: "<div class=\"editor_box\" id=\"container\">\r\n  <ejs-richtexteditor\r\n    #editor\r\n    id=\"editor\"\r\n    [height]=\"height\"\r\n    [saveInterval]=\"0\"\r\n    [autoSaveOnIdle]=\"autoSaveOnIdle\"\r\n    [toolbarSettings]=\"tools\"\r\n    [fontFamily]=\"family\"\r\n    [insertImageSettings]=\"insertImageSettings\"\r\n    [(value)]=\"value\"\r\n    (change)=\"onContentChange($event)\"\r\n    (created)=\"onCreate()\"\r\n    (toolbarClick)=\"_toolbarClick($event)\"\r\n  >\r\n  </ejs-richtexteditor>\r\n  <ejs-dialog\r\n    #AIdialog\r\n    id=\"AIdialog\"\r\n    [ngClass]=\"size\"\r\n    [visible]=\"false\"\r\n    [target]=\"target\"\r\n    [isModal]=\"true\"\r\n    [height]=\"dialogHeight\"\r\n    [width]=\"dialogWidth\"\r\n    maxHeight=\"80%\"\r\n    cssClass=\"e-rte-elements custom-dialog-rte\"\r\n    zIndex=\"1000\"\r\n    (close)=\"closeDialog()\"\r\n    (overlayClick)=\"onOverlayClick()\"\r\n    (open)=\"dialogShow()\"\r\n  >\r\n    <ng-template #header>\r\n      <div class=\"header-title\">AI Assist</div>\r\n      <div class=\"header-buttons\">\r\n        <div *ngIf=\"showZoomBtn\" class=\"header-zoom\" (click)=\"onZoom()\">\r\n          <img\r\n            class=\"header-icon\"\r\n            *ngIf=\"size === 'largest'\"\r\n            src=\"../../../assets/img/dialog-shrink.svg\"\r\n          />\r\n          <img\r\n            class=\"header-icon\"\r\n            *ngIf=\"size !== 'largest'\"\r\n            src=\"../../../assets/img/dialog-grow.svg\"\r\n          />\r\n        </div>\r\n        <div class=\"header-btn\" (click)=\"closeDialog()\">\r\n          <img class=\"header-icon\" src=\"../../../assets/img/dialog-close.svg\" />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #footerTemplate>\r\n      <div id=\"dialog-footer-content\">\r\n        <div class=\"custom-row-0\">\r\n          <div\r\n            class=\"cuscol-0\"\r\n            style=\"width: 100%; align-items: center; justify-content: left\"\r\n          ></div>\r\n          <div\r\n            class=\"cuscol-1\"\r\n            style=\"\r\n              display: flex;\r\n              flex-direction: column;\r\n              justify-content: center;\r\n              align-items: center;\r\n              width: 100%;\r\n            \"\r\n          >\r\n            <div style=\"text-align: right; width: 100%\">\r\n              <button\r\n                ejs-button\r\n                #sentimentButton\r\n                content=\"\uD83D\uDE0A Neutral\"\r\n                disabled=\"false\"\r\n                cssClass=\"sentiment\"\r\n              ></button>\r\n              <button\r\n                ejs-button\r\n                #copyButton\r\n                content=\"Copy\"\r\n                disabled=\"false\"\r\n                class=\"copy-btn\"\r\n              ></button>\r\n              <button\r\n                ejs-button\r\n                #replaceButton\r\n                content=\"Replace\"\r\n                isPrimary=\"true\"\r\n                disabled=\"false\"\r\n              ></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #content>\r\n      <div class=\"dialog-content\" style=\"height: 100%\">\r\n        <div class=\"custom-row-0\">\r\n          <div class=\"cuscol-0\" style=\"width: 100%\">\r\n            <ejs-dropdownlist\r\n              #queryCategory\r\n              style=\"width: 200px\"\r\n              id=\"queryCategory\"\r\n              [dataSource]=\"queryList\"\r\n              index=\"0\"\r\n              [fields]=\"{ text: 'text', value: 'id' }\"\r\n              (select)=\"onQuerySelect($event)\"\r\n            >\r\n              Rephrase\r\n            </ejs-dropdownlist>\r\n            <ejs-dropdownlist\r\n              *ngIf=\"selectedQuery == 'Rephrase'\"\r\n              id=\"chips-container\"\r\n              #chipList\r\n              style=\"width: 160px\"\r\n              [(ngModel)]=\"chipValue\"\r\n              [dataSource]=\"rephraseTyleList\"\r\n              [fields]=\"{ text: 'text', value: 'id' }\"\r\n              (select)=\"onChipClick($event)\"\r\n            >\r\n            </ejs-dropdownlist>\r\n            <ejs-dropdownlist\r\n              *ngIf=\"selectedQuery == 'Translate'\"\r\n              #languageCategory\r\n              index=\"0\"\r\n              id=\"language-Category\"\r\n              [dataSource]=\"languageList\"\r\n              [fields]=\"{ text: 'text', value: 'id' }\"\r\n              (select)=\"onLanguageSelect($event)\"\r\n            >\r\n            </ejs-dropdownlist>\r\n          </div>\r\n          <div\r\n            class=\"cuscol-1\"\r\n            style=\"\r\n              justify-content: space-between;\r\n              align-items: center;\r\n              width: 100%;\r\n            \"\r\n          >\r\n            <!-- <ejs-chiplist\r\n              id=\"chips-container\"\r\n              #chipList\r\n              [chips]=\"['Standard', 'Fluent', 'Professional']\"\r\n              selection=\"Single\"\r\n              cssClass=\"e-outline\"\r\n              [selectedChips]=\"[0]\"\r\n              (click)=\"onChipClick($event)\"\r\n            >\r\n            </ejs-chiplist> -->\r\n            <button\r\n              ejs-button\r\n              #regenerateButton\r\n              content=\"Regenerate\"\r\n              isPrimary=\"true\"\r\n              disabled=\"false\"\r\n            ></button>\r\n          </div>\r\n        </div>\r\n        <div class=\"custom-row-1\" style=\"height: calc(100% - 40px)\">\r\n          <div\r\n            class=\"cuscol-0\"\r\n            style=\"\r\n              width: 100%;\r\n              height: 100%;\r\n              align-items: center;\r\n              justify-content: left;\r\n            \"\r\n          >\r\n            <div style=\"text-align: left; height: 100%\">\r\n              <ejs-richtexteditor\r\n                #leftRte\r\n                id=\"leftRte\"\r\n                height=\"100%\"\r\n                [toolbarSettings]=\"{ enable: false }\"\r\n                placeholder=\"Analysis of AI Support\"\r\n                cssClass=\"e-outline\"\r\n              >\r\n              </ejs-richtexteditor>\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"cuscol-1\"\r\n            style=\"\r\n              display: flex;\r\n              justify-content: space-between;\r\n              width: 100%;\r\n              height: 100%;\r\n            \"\r\n          >\r\n            <div style=\"text-align: left; width: 100%; height: 100%\">\r\n              <ejs-richtexteditor\r\n                #rightRte\r\n                id=\"rightRte\"\r\n                height=\"100%\"\r\n                [toolbarSettings]=\"{ enable: false }\"\r\n                placeholder=\"Analysis of AI Support\"\r\n                cssClass=\"e-outline\"\r\n              >\r\n                <!-- style=\"display: none\" -->\r\n              </ejs-richtexteditor>\r\n              <div\r\n                class=\"no-results-found\"\r\n                id=\"no-results-found\"\r\n                style=\"display: none; height: 244px; align-content: center\"\r\n              >\r\n                <img\r\n                  height=\"50\"\r\n                  width=\"50\"\r\n                  src=\"https://storage.googleapis.com/cdn-bolddesk/agent-angular-app/images/light/no-records-warning.svg\"\r\n                />\r\n                <div>No results found</div>\r\n              </div>\r\n              <div id=\"skeletonId\" style=\"display: none\">\r\n                <ejs-skeleton\r\n                  #skeletonId1\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"100%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId2\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"90%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId3\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"70%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId4\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"50%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId5\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"30%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId6\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"10%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </ejs-dialog>\r\n  <div class=\"toast\" *ngIf=\"showMsg\">\r\n    <span class=\"toast_text\">First, Select some text</span\r\n    ><span class=\"close_icon\" (click)=\"hideToast()\"></span>\r\n  </div>\r\n</div>\r\n",
-                styles: [".editor_box{position:relative;width:100%;height:100%}.editor_box .toast{position:absolute;left:35%;top:110px;z-index:1;width:400px;border-radius:4px;border:1px solid #e8f2ff;background:#f4f8ff;padding:4px 12px;color:#1f3f5c;font-size:12px;font-style:normal;font-weight:400;height:32px;font-family:Arial;display:flex;align-items:center;justify-content:space-between}.editor_box .toast .toast_text::before{content:url(../../../assets/img/info.svg);display:inline-block;width:16px;height:16px;vertical-align:bottom;margin-right:8px}.editor_box .toast .close_icon{background-image:url(../../../assets/img/notification-close.svg);cursor:pointer;display:inline-block;width:16px;height:16px}.custom-dialog-rte{padding:0 20px;border-radius:10px}.custom-row-0,.custom-row-1,.custom-row-2{display:flex;align-items:center;padding:12px 24px}.e-rte-dropdown-btn-text{padding-left:4px}.no-results-found{text-align:center}.no-results-found img{display:block;margin:0 auto}.e-custom{margin-right:.5rem;border-radius:25px!important}.custom-dialog-rte .skeleton-rectangle{border-radius:4px}@media (max-width:767px){.cuscol-0,.cuscol-1,.cuscol-2{justify-content:center!important}.custom-row-0,.custom-row-1,.custom-row-2{flex-direction:column!important}.cuscol-1{border-right:none!important}.cuscol-0{width:100%;align-items:center}::ng-deep:host .e-dialog{max-height:80%!important}.custom-dialog-rte .e-dialog .e-dlg-content{overflow-y:auto!important}.custom-dialog-rte .e-dialog .e-dlg-content .e-richtexteditor{height:100px!important}.cuscol-noresult{padding-bottom:20px!important}.e-chip-list{padding:5px!important}.cuscol{padding-right:.2rem!important;width:auto!important}.custom-row-1{height:auto!important}}.cuscol-1{display:flex;flex-direction:row!important}.cuscol-2{display:flex;flex-direction:column!important}.sentiment{color:#000!important}.custom-dialog-rte .e-dialog .e-dlg-content{padding:0!important;overflow-y:hidden}.custom-dialog-rte .e-dialog .e-dlg-header-content{padding:20px 0!important;border:0!important}.custom-dialog-rte .e-dialog .e-dlg-header-content .e-dlg-header{display:flex;align-items:center;line-height:18px;justify-content:space-between}.custom-dialog-rte .e-dialog .e-dlg-header-content .e-dlg-header .header-title{font-family:Arial;font-size:15px;font-weight:700;font-style:normal}.custom-dialog-rte .e-dialog .e-dlg-header-content .header-buttons{display:flex}.custom-dialog-rte .e-dialog .e-dlg-header-content .header-buttons img{width:16px;height:16px;cursor:pointer;padding:2px;margin-left:12px}.custom-dialog-rte .e-dialog .e-footer-content{padding:0!important}.custom-dialog-rte .e-dialog .e-dlg-content .e-richtexteditor.e-rte-tb-expand .e-rte-content,.e-richtexteditor.e-rte-tb-expand .e-source-content{border:0;border-bottom:1px solid #dee2e6;border-top:0 solid #dee2e6!important}.custom-dialog-rte .dialog-content .custom-row-0{border-top:0 solid #ddd!important;padding:0;margin-bottom:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-0{justify-content:left;border-right:none!important;padding:0;display:flex;gap:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-1{padding:0;margin-left:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-1 .e-primary{color:#44566c;border-radius:4px;border:1px solid #dbe1e7;background:#fff;width:87px;margin:0;padding:2px 12px;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;height:28px}.custom-dialog-rte .dialog-content .custom-row-1{padding:0;height:calc(100% - 40px);gap:12px}.custom-dialog-rte .e-footer-content{border:0}.custom-dialog-rte .e-footer-content .custom-row-0{padding:20px 0}.custom-dialog-rte .e-footer-content .e-control.e-btn{font-family:Arial;font-size:12px;line-height:14px;padding:2px 12px;height:28px;background:#fff;color:#44566c}.custom-dialog-rte .e-footer-content .e-control.e-btn.copy-btn{border-color:#dbe1e7}.custom-dialog-rte .e-footer-content .e-control.e-btn.copy-btn::before{content:url(../../../assets/img/editor-copy.svg);vertical-align:middle;margin-right:6px}.custom-dialog-rte .e-footer-content .e-control.e-btn.e-primary{color:#fff;background:#1364b3}.editor_box .e-dialog.largest{width:96vw!important;height:88vh!important;max-height:88vh;max-width:2100px}"]
+                styles: [".editor_box{position:relative;width:100%;height:100%}.editor_box .toast{position:absolute;left:35%;top:110px;z-index:1;width:400px;border-radius:4px;border:1px solid #e8f2ff;background:#f4f8ff;padding:4px 12px;color:#1f3f5c;font-size:12px;font-style:normal;font-weight:400;height:32px;font-family:Arial;display:flex;align-items:center;justify-content:space-between}.editor_box .toast .toast_text::before{content:url(../../assets/img/info.svg);display:inline-block;width:16px;height:16px;vertical-align:bottom;margin-right:8px}.editor_box .toast .close_icon{background-image:url(../../assets/img/notification-close.svg);cursor:pointer;display:inline-block;width:16px;height:16px}.custom-dialog-rte{padding:0 20px;border-radius:10px}.custom-row-0,.custom-row-1,.custom-row-2{display:flex;align-items:center;padding:12px 24px}.e-rte-dropdown-btn-text{padding-left:4px}.no-results-found{text-align:center}.no-results-found img{display:block;margin:0 auto}.e-custom{margin-right:.5rem;border-radius:25px!important}.custom-dialog-rte .skeleton-rectangle{border-radius:4px}@media (max-width:767px){.cuscol-0,.cuscol-1,.cuscol-2{justify-content:center!important}.custom-row-0,.custom-row-1,.custom-row-2{flex-direction:column!important}.cuscol-1{border-right:none!important}.cuscol-0{width:100%;align-items:center}::ng-deep:host .e-dialog{max-height:80%!important}.custom-dialog-rte .e-dialog .e-dlg-content{overflow-y:auto!important}.custom-dialog-rte .e-dialog .e-dlg-content .e-richtexteditor{height:100px!important}.cuscol-noresult{padding-bottom:20px!important}.e-chip-list{padding:5px!important}.cuscol{padding-right:.2rem!important;width:auto!important}.custom-row-1{height:auto!important}}.cuscol-1{display:flex;flex-direction:row!important}.cuscol-2{display:flex;flex-direction:column!important}.sentiment{color:#000!important}.custom-dialog-rte .e-dialog .e-dlg-content{padding:0!important;overflow-y:hidden}.custom-dialog-rte .e-dialog .e-dlg-header-content{padding:20px 0!important;border:0!important}.custom-dialog-rte .e-dialog .e-dlg-header-content .e-dlg-header{display:flex;align-items:center;line-height:18px;justify-content:space-between}.custom-dialog-rte .e-dialog .e-dlg-header-content .e-dlg-header .header-title{font-family:Arial;font-size:15px;font-weight:700;font-style:normal}.custom-dialog-rte .e-dialog .e-dlg-header-content .header-buttons{display:flex}.custom-dialog-rte .e-dialog .e-dlg-header-content .header-buttons img{width:16px;height:16px;cursor:pointer;padding:2px;margin-left:12px}.custom-dialog-rte .e-dialog .e-footer-content{padding:0!important}.custom-dialog-rte .e-dialog .e-dlg-content .e-richtexteditor.e-rte-tb-expand .e-rte-content,.e-richtexteditor.e-rte-tb-expand .e-source-content{border:0;border-bottom:1px solid #dee2e6;border-top:0 solid #dee2e6!important}.custom-dialog-rte .dialog-content .custom-row-0{border-top:0 solid #ddd!important;padding:0;margin-bottom:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-0{justify-content:left;border-right:none!important;padding:0;display:flex;gap:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-1{padding:0;margin-left:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-1 .e-primary{color:#44566c;border-radius:4px;border:1px solid #dbe1e7;background:#fff;width:87px;margin:0;padding:2px 12px;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;height:28px}.custom-dialog-rte .dialog-content .custom-row-1{padding:0;height:calc(100% - 40px);gap:12px}.custom-dialog-rte .e-footer-content{border:0}.custom-dialog-rte .e-footer-content .custom-row-0{padding:20px 0}.custom-dialog-rte .e-footer-content .e-control.e-btn{font-family:Arial;font-size:12px;line-height:14px;padding:2px 12px;height:28px;background:#fff;color:#44566c}.custom-dialog-rte .e-footer-content .e-control.e-btn.copy-btn{border-color:#dbe1e7}.custom-dialog-rte .e-footer-content .e-control.e-btn.copy-btn::before{content:url(../../assets/img/editor-copy.svg);vertical-align:middle;margin-right:6px}.custom-dialog-rte .e-footer-content .e-control.e-btn.e-primary{color:#fff;background:#1364b3}.editor_box .e-dialog.largest{width:96vw!important;height:88vh!important;max-height:88vh;max-width:2100px}"]
             }] }
 ];
 /** @nocollapse */
@@ -34357,10 +34448,10 @@ class SidebarIconlistNewComponent {
 }
 SidebarIconlistNewComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-sidebar-iconlist-new",
-                template: "<div class=\"sidebar-iconlist\" *ngIf=\"config\">\r\n  <ul class=\"nav-tabs\">\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [ngClass]=\"{ active: currentTab === 'tab1' }\"\r\n        data-toggle=\"tab\"\r\n        (click)=\"switchTab('tab1')\"\r\n      >\r\n        <img\r\n          style=\"margin-right: 8px\"\r\n          src=\"../../../assets/img/dashboard_icon/basic-icon-filter.svg\"\r\n        />\r\n        <div class=\"tab-name\">\r\n          {{ translation.FILTER ? translation.FILTER : \".FILTER\" }}\r\n        </div>\r\n      </a>\r\n    </li>\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [ngClass]=\"{ active: currentTab === 'tab2' }\"\r\n        data-toggle=\"tab\"\r\n        (click)=\"switchTab('tab2')\"\r\n      >\r\n        <img\r\n          style=\"margin-right: 8px\"\r\n          src=\"../../../assets/img/dashboard_icon/dashboard-icon.svg\"\r\n        />\r\n        <div class=\"tab-name\">\r\n          {{ translation.PROPERTIES ? translation.PROPERTIES : \".PROPERTIES\" }}\r\n        </div>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n  <div class=\"sidebar-iconlist-content\">\r\n    <!-- <form action=\"\" method=\"\"> -->\r\n    <div\r\n      class=\"tab-content\"\r\n      style=\"height: calc(100% - 140px); overflow-y: scroll\"\r\n    >\r\n      <div class=\"tab-pane\" *ngIf=\"currentTab === 'tab1'\" style=\"height: 100%\">\r\n        <kt-field-filter\r\n          [portlet]=\"portlet\"\r\n          [dashboard]=\"dashboard\"\r\n          [portlets]=\"portlets\"\r\n          (updatePorletConfig)=\"_updatePorletConfig($event)\"\r\n        ></kt-field-filter>\r\n      </div>\r\n      <div class=\"tab-pane\" *ngIf=\"currentTab === 'tab2'\">\r\n        <div>\r\n          <div (click)=\"nextWizard(0)\" class=\"wizard\">\r\n            <span class=\"wizard-name\">\r\n              {{\r\n                translation.DATA_TABLE ? translation.DATA_TABLE : \"Data Table\"\r\n              }}*\r\n            </span>\r\n            <mat-icon style=\"position: absolute; right: 0\">\r\n              {{ !expandArray[0] ? \"expand_more\" : \"expand_less\" }}\r\n            </mat-icon>\r\n          </div>\r\n          <div\r\n            [ngStyle]=\"{ height: expandArray[0] ? '100px' : '0' }\"\r\n            [ngClass]=\"{ collapsed: !expandArray[0] }\"\r\n            class=\"wizard-expanded\"\r\n          >\r\n            <div class=\"data-source add-pdding\">\r\n              <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                {{\r\n                  translation.FIRST_CHOOSE_THE_DATA_TABLE_TO_CUSTOMIZE_YOUR_DASHBOARD\r\n                    ? translation.FIRST_CHOOSE_THE_DATA_TABLE_TO_CUSTOMIZE_YOUR_DASHBOARD\r\n                    : \"Firstly, choose the data table to customize your dashboard\"\r\n                }}\r\n              </div>\r\n              <div class=\"twelvepx\">\r\n                <mat-select\r\n                  class=\"datamart-select\"\r\n                  [(ngModel)]=\"selectedDatamart\"\r\n                  (selectionChange)=\"changeDataTable($event.value)\"\r\n                >\r\n                  <ng-container *ngFor=\"let datatable of dataMartTableList\">\r\n                    <!-- *ngIf=\"!datatable.isHide\" -->\r\n                    <mat-option [value]=\"datatable.datamartCode\">\r\n                      {{\r\n                        translation[datatable.langCode] || datatable.langCode\r\n                      }}\r\n                    </mat-option>\r\n                  </ng-container>\r\n                </mat-select>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"getFigurecode()\" (click)=\"nextWizard(2)\" class=\"wizard\">\r\n            <span class=\"wizard-name\"\r\n              >{{\r\n                translation.PORTLET_TYPE\r\n                  ? translation.PORTLET_TYPE\r\n                  : \".PORTLET_TYPE\"\r\n              }}*</span\r\n            >\r\n            <mat-icon class=\"wizard-icon\">{{\r\n              !expandArray[2] ? \"expand_more\" : \"expand_less\"\r\n            }}</mat-icon>\r\n          </div>\r\n          <!-- \u56FE\u8868\u7C7B\u578B\u9009\u62E9 -->\r\n          <div\r\n            *ngIf=\"getFigurecode()\"\r\n            [ngClass]=\"{ collapsed: !expandArray[2] }\"\r\n            class=\"wizard-expanded portlets\"\r\n          >\r\n            <kt-portlet-type-new\r\n              [portlet]=\"portlet\"\r\n              [dashboard]=\"dashboard\"\r\n              [dataMartCode]=\"selectedDatamart\"\r\n              (portletType)=\"getPortletType($event)\"\r\n            >\r\n            </kt-portlet-type-new>\r\n          </div>\r\n\r\n          <!-- new dashboard \u5E76\u4E14\u9009\u62E9\u56FE\u6807\u7C7B\u578B \u624D\u6709\u7684\u4F9B\u4E09\u4E2A\u56FE\u8868\u9009\u62E9\u7684X\u8F74Y\u8F74 -->\r\n          <ng-container\r\n            *ngIf=\"\r\n              ['newcolumn', 'newline', 'newcolumnline'].includes(portletType)\r\n            \"\r\n          >\r\n            <div class=\"wizard\" (click)=\"nextWizard(7)\">\r\n              <span class=\"wizard-name\"\r\n                >{{ translation.CONFIGURATIONS || \".CONFIGURATIONS\" }}*</span\r\n              >\r\n              <mat-icon class=\"wizard-icon\">{{\r\n                !expandArray[7] ? \"expand_more\" : \"expand_less\"\r\n              }}</mat-icon>\r\n            </div>\r\n\r\n            <!-- \u56FE\u6807\u914D\u7F6E\u9879 configuration -->\r\n            <div\r\n              [ngClass]=\"{ collapsed: !expandArray[7] }\"\r\n              class=\"wizard-expanded config\"\r\n            >\r\n              <div style=\"padding-left: 18px\">\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{ translation.COLORS || \".COLORS\" }}\r\n                </div>\r\n\r\n                <ejs-dropdownlist\r\n                  style=\"margin-bottom: 10px\"\r\n                  id=\"employees\"\r\n                  [dataSource]=\"themeData\"\r\n                  [allowFiltering]=\"true\"\r\n                  [filterType]=\"'Contains'\"\r\n                  [itemTemplate]=\"itemTemplate\"\r\n                  [valueTemplate]=\"valueTemplate\"\r\n                  [fields]=\"themeFields\"\r\n                  [value]=\"selectTheme\"\r\n                  (change)=\"changeTheme($event, 'theme')\"\r\n                  class=\"color-ipt\"\r\n                >\r\n                  <ng-template #itemTemplate let-data>\r\n                    <div class=\"color-box\">\r\n                      <div\r\n                        *ngFor=\"let i of data.value\"\r\n                        class=\"color-item\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': i\r\n                        }\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-template>\r\n                  <ng-template #valueTemplate let-data>\r\n                    <div class=\"color-box\">\r\n                      <div\r\n                        *ngFor=\"let item of data.value\"\r\n                        class=\"color-item\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': item\r\n                        }\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-template>\r\n                </ejs-dropdownlist>\r\n\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{ translation.X_AXIS || \".X-AXIS\" }}\r\n                </div>\r\n\r\n                <mat-select\r\n                  [(value)]=\"selectedX\"\r\n                  (openedChange)=\"xyChange($event)\"\r\n                  class=\"datamart-select\"\r\n                >\r\n                  <ng-container *ngFor=\"let i of yList\">\r\n                    <mat-option\r\n                      *ngIf=\"!i.isCalculatedField\"\r\n                      [value]=\"i.colName\"\r\n                      >{{\r\n                        (translation[i.langCode]\r\n                          ? translation[i.langCode]\r\n                          : \".\" + i.langCode) +\r\n                          (i.addtionName ? \" \" + i.addtionName : \"\")\r\n                      }}</mat-option\r\n                    >\r\n                  </ng-container>\r\n                </mat-select>\r\n\r\n                <ng-container *ngIf=\"selectedX\">\r\n                  <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                    {{ translation.FREQUENCY || \".FREQUENCY\" }}\r\n                  </div>\r\n\r\n                  <mat-select\r\n                    [(value)]=\"selectedMultiples\"\r\n                    (openedChange)=\"xyChange($event)\"\r\n                    class=\"datamart-select\"\r\n                  >\r\n                    <mat-option\r\n                      *ngFor=\"let i of multiplesList\"\r\n                      [value]=\"i.langCode\"\r\n                      >{{\r\n                        i.addtionName\r\n                          ? i.addtionName + \"\" + translation[i.langCode]\r\n                          : translation[i.langCode]\r\n                      }}</mat-option\r\n                    >\r\n                  </mat-select>\r\n                </ng-container>\r\n\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{\r\n                    portletType === \"newcolumnline\"\r\n                      ? (translation.COLUMN ? translation.COLUMN + \" \" : \"\") +\r\n                        (translation.Y_AXIS || \".COLUMN Y-AXIS\")\r\n                      : translation.Y_AXIS || \".Y-AXIS\"\r\n                  }}\r\n                </div>\r\n\r\n                <mat-select\r\n                  multiple\r\n                  [(value)]=\"selectedY\"\r\n                  (openedChange)=\"xyChange($event)\"\r\n                  class=\"datamart-select\"\r\n                >\r\n                  <ng-container *ngFor=\"let i of yList\">\r\n                    <mat-option\r\n                      *ngIf=\"!i.isCalculatedField\"\r\n                      [value]=\"i.colName\"\r\n                      >{{\r\n                        (translation[i.langCode]\r\n                          ? translation[i.langCode]\r\n                          : \".\" + i.langCode) +\r\n                          (i.addtionName ? \" \" + i.addtionName : \"\")\r\n                      }}</mat-option\r\n                    >\r\n                  </ng-container>\r\n                </mat-select>\r\n\r\n                <div\r\n                  style=\"margin-bottom: 10px\"\r\n                  class=\"twelvepx\"\r\n                  *ngIf=\"portletType == 'newcolumnline'\"\r\n                >\r\n                  {{\r\n                    (translation.LINE ? translation.LINE + \" \" : \"\") +\r\n                      (translation.Y_AXIS || \".LINE Y-AXIS\")\r\n                  }}\r\n                </div>\r\n\r\n                <mat-select\r\n                  multiple\r\n                  class=\"datamart-select\"\r\n                  [(value)]=\"selectedSecondY\"\r\n                  (openedChange)=\"xyChange($event)\"\r\n                  panelClass=\"mat-select-multi-panel\"\r\n                  *ngIf=\"portletType == 'newcolumnline'\"\r\n                >\r\n                  <ng-container *ngFor=\"let i of yList\">\r\n                    <mat-option\r\n                      *ngIf=\"!i.isCalculatedField\"\r\n                      [value]=\"i.colName\"\r\n                      >{{\r\n                        (translation[i.langCode]\r\n                          ? translation[i.langCode]\r\n                          : \".\" + i.langCode) +\r\n                          (i.addtionName ? \" \" + i.addtionName : \"\")\r\n                      }}</mat-option\r\n                    >\r\n                  </ng-container>\r\n                </mat-select>\r\n\r\n                <div class=\"data-label-content\">\r\n                  <div class=\"label\">\r\n                    {{ translation.DATA_LABEL || \".Data labels\" }}\r\n                  </div>\r\n                  <ejs-switch\r\n                    [(ngModel)]=\"hasMarker\"\r\n                    (ngModelChange)=\"labelConfigChange($event)\"\r\n                  ></ejs-switch>\r\n                </div>\r\n\r\n                <div style=\"margin: 10px 0\" class=\"twelvepx\">\r\n                  {{ translation.DISPLAY_UNITS || \".Display Units\" }}\r\n                </div>\r\n\r\n                <mat-select\r\n                  class=\"datamart-select\"\r\n                  [(ngModel)]=\"markerFormat\"\r\n                  (ngModelChange)=\"onChangeFormat()\"\r\n                >\r\n                  <ng-container *ngFor=\"let format of markerFormatList\">\r\n                    <mat-option [value]=\"format.value\">{{\r\n                      format.label\r\n                    }}</mat-option>\r\n                  </ng-container>\r\n                </mat-select>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <!-- historical IRR \u4E13\u7528 -->\r\n          <ng-container *ngIf=\"['historicalIRR'].includes(portletType)\">\r\n            <div class=\"wizard\" (click)=\"nextWizard(7)\">\r\n              <span class=\"wizard-name\"\r\n                >{{ translation.CONFIGURATIONS || \"CONFIGURATIONS\" }}*</span\r\n              >\r\n              <mat-icon class=\"wizard-icon\">{{\r\n                !expandArray[7] ? \"expand_more\" : \"expand_less\"\r\n              }}</mat-icon>\r\n            </div>\r\n\r\n            <!-- \u56FE\u6807\u914D\u7F6E\u9879 configuration -->\r\n            <div\r\n              [ngClass]=\"{ collapsed: !expandArray[7] }\"\r\n              class=\"wizard-expanded config\"\r\n            >\r\n              <div style=\"padding-left: 18px\">\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{ translation.COLORS || \".COLORS\" }}\r\n                </div>\r\n\r\n                <ejs-dropdownlist\r\n                  style=\"margin-bottom: 10px\"\r\n                  id=\"employees\"\r\n                  [dataSource]=\"themeData\"\r\n                  [allowFiltering]=\"true\"\r\n                  [filterType]=\"'Contains'\"\r\n                  [itemTemplate]=\"itemTemplate\"\r\n                  [valueTemplate]=\"valueTemplate\"\r\n                  [fields]=\"themeFields\"\r\n                  [value]=\"selectTheme\"\r\n                  (change)=\"changeTheme($event, 'theme')\"\r\n                  class=\"color-ipt\"\r\n                >\r\n                  <ng-template #itemTemplate let-data>\r\n                    <div class=\"color-box\">\r\n                      <div\r\n                        *ngFor=\"let i of data.value\"\r\n                        class=\"color-item\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': i\r\n                        }\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-template>\r\n                  <ng-template #valueTemplate let-data>\r\n                    <div class=\"color-box\">\r\n                      <div\r\n                        *ngFor=\"let item of data.value\"\r\n                        class=\"color-item\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': item\r\n                        }\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-template>\r\n                </ejs-dropdownlist>\r\n\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{ translation.FREQUENCY || \".FREQUENCY\" }}\r\n                </div>\r\n\r\n                <!-- Frequency: Yearly/Quarterly(default)/Monthly -->\r\n                <mat-select\r\n                  [(value)]=\"selectedMultiples\"\r\n                  (openedChange)=\"setHistoricalIRRChart($event)\"\r\n                  class=\"datamart-select\"\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"let i of frequencyOptions\"\r\n                    [value]=\"i.langCode\"\r\n                  >\r\n                    {{ (i.addtionName || \"\") + translation[i.langCode] }}\r\n                  </mat-option>\r\n                </mat-select>\r\n\r\n                <!-- Fund cashflow IRR ( fund ops settlement) \u53EF\u9009\u62E9 -->\r\n                <ng-container\r\n                  *ngIf=\"\r\n                    ['FundHistoricalCashflowIRR'].includes(selectedDatamart)\r\n                  \"\r\n                >\r\n                  <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                    Investors\r\n                  </div>\r\n                  <!-- Investors: All/exclude GP&SLP -->\r\n                  <mat-select\r\n                    [(value)]=\"selectedInvestor\"\r\n                    (openedChange)=\"setHistoricalIRRChart($event)\"\r\n                    class=\"datamart-select\"\r\n                  >\r\n                    <mat-option\r\n                      *ngFor=\"let item of investorList\"\r\n                      [value]=\"item.code\"\r\n                    >\r\n                      {{ item.text }}\r\n                    </mat-option>\r\n                  </mat-select>\r\n                </ng-container>\r\n\r\n                <!-- line \u548C bar \u56FE x \u8F74\u4E3A date\uFF0Cy \u8F74\u4E3A IRR \u767E\u5206\u6570 -->\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{ translation.VISUAL_TYPE || \".VISUAL_TYPE\" }}\r\n                </div>\r\n                <!-- Visual Type: Line(default)/Column Chart/Table -->\r\n                <mat-select\r\n                  [(value)]=\"selectedVisualType\"\r\n                  (openedChange)=\"setHistoricalIRRChart($event)\"\r\n                  class=\"datamart-select\"\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"let item of visualTypeList\"\r\n                    [value]=\"item.code\"\r\n                  >\r\n                    {{ item.text }}\r\n                  </mat-option>\r\n                </mat-select>\r\n                <div\r\n                  class=\"data-label-content\"\r\n                  *ngIf=\"selectedVisualType !== 'table'\"\r\n                >\r\n                  <div class=\"label\">\r\n                    {{ translation.DATA_LABEL || \".Data labels\" }}\r\n                  </div>\r\n                  <ejs-switch\r\n                    [checked]=\"true\"\r\n                    [(ngModel)]=\"hasMarker\"\r\n                    (ngModelChange)=\"labelConfigChange($event)\"\r\n                  ></ejs-switch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"wizard\" (click)=\"nextWizard(3)\">\r\n            <span class=\"wizard-name\"\r\n              >{{\r\n                translation.GENERAL_OPTIONS\r\n                  ? translation.GENERAL_OPTIONS\r\n                  : \".GENERAL_OPTIONS\"\r\n              }}*</span\r\n            >\r\n            <mat-icon class=\"wizard-icon\">{{\r\n              !expandArray[3] ? \"expand_more\" : \"expand_less\"\r\n            }}</mat-icon>\r\n          </div>\r\n          <div\r\n            class=\"dialog-content\"\r\n            [ngClass]=\"{ collapsed: !expandArray[3] }\"\r\n            *ngIf=\"portletType !== 'newchart'\"\r\n          >\r\n            <div class=\"condition-item\">\r\n              <div class=\"title\">\r\n                {{ translation.GADGET_TITLE || \".GADGET_TITLE\" }}\r\n              </div>\r\n              <input\r\n                matInput\r\n                #message\r\n                maxlength=\"256\"\r\n                (ngModelChange)=\"gadgetTitleChange($event)\"\r\n                [(ngModel)]=\"config.gadgetTitle\"\r\n                autocomplete=\"off\"\r\n              />\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"dialog-content\"\r\n            [ngClass]=\"{ collapsed: !expandArray[3] }\"\r\n            *ngIf=\"portletType === 'newchart'\"\r\n          >\r\n            <div class=\"condition-item\">\r\n              <div class=\"title\">\r\n                {{ translation.GADGET_TITLE || \".GADGET_TITLE\" }}\r\n              </div>\r\n              <input\r\n                matInput\r\n                #message\r\n                maxlength=\"256\"\r\n                (ngModelChange)=\"gadgetTitleChange($event)\"\r\n                [(ngModel)]=\"config.gadgetTitle\"\r\n                autocomplete=\"off\"\r\n              />\r\n            </div>\r\n            <div class=\"condition-item\">\r\n              <div class=\"title\">\r\n                {{ translation.CHARTTYPE || \".CHARTTYPE\" }}\r\n              </div>\r\n              <mat-select\r\n                [placeholder]=\"translation.SELECT_A_TYPE || 'Select a type'\"\r\n                [(ngModel)]=\"chartSettings.chartSeries.type\"\r\n                (selectionChange)=\"setChartType()\"\r\n              >\r\n                <mat-option *ngFor=\"let item of chartTypeList\" [value]=\"item\">\r\n                  {{ translation[\"chart_\" + item] || item }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <div class=\"condition-item flex\">\r\n              <ejs-checkbox\r\n                [label]=\"translation.MULTIPLE_AXIS || '.MULTIPLE_AXIS'\"\r\n                [(ngModel)]=\"chartSettings.enableMultipleAxis\"\r\n                (change)=\"setMultipleAxis($event)\"\r\n              ></ejs-checkbox>\r\n              <ejs-checkbox\r\n                [disabled]=\"!chartSettings.enableMultipleAxis\"\r\n                [label]=\"translation.SHOW_LEGEND || '.SHOW_LEGEND'\"\r\n                (change)=\"setMultipleAxis($event)\"\r\n                [(ngModel)]=\"chartSettings.legendSettings.visible\"\r\n              ></ejs-checkbox>\r\n            </div>\r\n            <div class=\"condition-item\">\r\n              <div class=\"title\">\r\n                {{ translation.MULTIPLE_AXIS_MODE || \".MULTIPLE_AXIS_MODE\" }}\r\n              </div>\r\n              <mat-select\r\n                [placeholder]=\"translation.SELECT_A_MODE || '.SELECT_A_MODE'\"\r\n                (selectionChange)=\"setMultipleAxis($event.value)\"\r\n                [(ngModel)]=\"chartSettings.multipleAxisMode\"\r\n                [disabled]=\"!chartSettings.enableMultipleAxis\"\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let item of multipleAxisModeList\"\r\n                  [value]=\"item\"\r\n                >\r\n                  {{ translation[\"chart_\" + item] || item }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <div class=\"condition-item\">\r\n              <div class=\"title\">\r\n                {{ translation.COLORS || \".COLORS\" }}\r\n              </div>\r\n\r\n              <ejs-dropdownlist\r\n                id=\"employees\"\r\n                [dataSource]=\"themeData\"\r\n                [allowFiltering]=\"true\"\r\n                [filterType]=\"'Contains'\"\r\n                [itemTemplate]=\"itemTemplate\"\r\n                [valueTemplate]=\"valueTemplate\"\r\n                [fields]=\"themeFields\"\r\n                [value]=\"selectTheme\"\r\n                (change)=\"getThemeData($event)\"\r\n                class=\"color-ipt\"\r\n              >\r\n                <ng-template #itemTemplate let-data>\r\n                  <div class=\"color-box\">\r\n                    <div\r\n                      *ngFor=\"let i of data.value\"\r\n                      class=\"color-item\"\r\n                      [ngStyle]=\"{\r\n                        'background-color': i\r\n                      }\"\r\n                    ></div>\r\n                  </div>\r\n                </ng-template>\r\n                <ng-template #valueTemplate let-data>\r\n                  <div class=\"color-box\">\r\n                    <div\r\n                      *ngFor=\"let item of data.value\"\r\n                      class=\"color-item\"\r\n                      [ngStyle]=\"{\r\n                        'background-color': item\r\n                      }\"\r\n                    ></div>\r\n                  </div>\r\n                </ng-template>\r\n              </ejs-dropdownlist>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- </form> -->\r\n    <div class=\"footer-btn\">\r\n      <button type=\"button\" mat-flat-button class=\"btn-close\" (click)=\"clear()\">\r\n        {{ translation.CLEAR ? translation.CLEAR : \"Clear\" }}\r\n      </button>\r\n      <button type=\"button\" mat-flat-button class=\"btn-save\" (click)=\"close()\">\r\n        {{ translation.CLOSE ? translation.CLOSE : \".CLOSE\" }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                selector: "rs-sidebar-iconlist-new",
+                template: "<div class=\"sidebar-iconlist\" *ngIf=\"config\">\r\n  <ul class=\"nav-tabs\">\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [ngClass]=\"{ active: currentTab === 'tab1' }\"\r\n        data-toggle=\"tab\"\r\n        (click)=\"switchTab('tab1')\"\r\n      >\r\n        <img\r\n          style=\"margin-right: 8px\"\r\n          src=\"../../../assets/img/dashboard_icon/basic-icon-filter.svg\"\r\n        />\r\n        <div class=\"tab-name\">\r\n          {{ translation.FILTER ? translation.FILTER : \".FILTER\" }}\r\n        </div>\r\n      </a>\r\n    </li>\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [ngClass]=\"{ active: currentTab === 'tab2' }\"\r\n        data-toggle=\"tab\"\r\n        (click)=\"switchTab('tab2')\"\r\n      >\r\n        <img\r\n          style=\"margin-right: 8px\"\r\n          src=\"../../../assets/img/dashboard_icon/dashboard-icon.svg\"\r\n        />\r\n        <div class=\"tab-name\">\r\n          {{ translation.PROPERTIES ? translation.PROPERTIES : \".PROPERTIES\" }}\r\n        </div>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n  <div class=\"sidebar-iconlist-content\">\r\n    <!-- <form action=\"\" method=\"\"> -->\r\n    <div\r\n      class=\"tab-content\"\r\n      style=\"height: calc(100% - 140px); overflow-y: scroll\"\r\n    >\r\n      <div class=\"tab-pane\" *ngIf=\"currentTab === 'tab1'\" style=\"height: 100%\">\r\n        <rs-field-filter\r\n          [portlet]=\"portlet\"\r\n          [dashboard]=\"dashboard\"\r\n          [portlets]=\"portlets\"\r\n          (updatePorletConfig)=\"_updatePorletConfig($event)\"\r\n        ></rs-field-filter>\r\n      </div>\r\n      <div class=\"tab-pane\" *ngIf=\"currentTab === 'tab2'\">\r\n        <div>\r\n          <div (click)=\"nextWizard(0)\" class=\"wizard\">\r\n            <span class=\"wizard-name\">\r\n              {{\r\n                translation.DATA_TABLE ? translation.DATA_TABLE : \"Data Table\"\r\n              }}*\r\n            </span>\r\n            <mat-icon style=\"position: absolute; right: 0\">\r\n              {{ !expandArray[0] ? \"expand_more\" : \"expand_less\" }}\r\n            </mat-icon>\r\n          </div>\r\n          <div\r\n            [ngStyle]=\"{ height: expandArray[0] ? '100px' : '0' }\"\r\n            [ngClass]=\"{ collapsed: !expandArray[0] }\"\r\n            class=\"wizard-expanded\"\r\n          >\r\n            <div class=\"data-source add-pdding\">\r\n              <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                {{\r\n                  translation.FIRST_CHOOSE_THE_DATA_TABLE_TO_CUSTOMIZE_YOUR_DASHBOARD\r\n                    ? translation.FIRST_CHOOSE_THE_DATA_TABLE_TO_CUSTOMIZE_YOUR_DASHBOARD\r\n                    : \"Firstly, choose the data table to customize your dashboard\"\r\n                }}\r\n              </div>\r\n              <div class=\"twelvepx\">\r\n                <mat-select\r\n                  class=\"datamart-select\"\r\n                  [(ngModel)]=\"selectedDatamart\"\r\n                  (selectionChange)=\"changeDataTable($event.value)\"\r\n                >\r\n                  <ng-container *ngFor=\"let datatable of dataMartTableList\">\r\n                    <!-- *ngIf=\"!datatable.isHide\" -->\r\n                    <mat-option [value]=\"datatable.datamartCode\">\r\n                      {{\r\n                        translation[datatable.langCode] || datatable.langCode\r\n                      }}\r\n                    </mat-option>\r\n                  </ng-container>\r\n                </mat-select>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"getFigurecode()\" (click)=\"nextWizard(2)\" class=\"wizard\">\r\n            <span class=\"wizard-name\"\r\n              >{{\r\n                translation.PORTLET_TYPE\r\n                  ? translation.PORTLET_TYPE\r\n                  : \".PORTLET_TYPE\"\r\n              }}*</span\r\n            >\r\n            <mat-icon class=\"wizard-icon\">{{\r\n              !expandArray[2] ? \"expand_more\" : \"expand_less\"\r\n            }}</mat-icon>\r\n          </div>\r\n          <!-- \u56FE\u8868\u7C7B\u578B\u9009\u62E9 -->\r\n          <div\r\n            *ngIf=\"getFigurecode()\"\r\n            [ngClass]=\"{ collapsed: !expandArray[2] }\"\r\n            class=\"wizard-expanded portlets\"\r\n          >\r\n            <rs-portlet-type-new\r\n              [portlet]=\"portlet\"\r\n              [dashboard]=\"dashboard\"\r\n              [dataMartCode]=\"selectedDatamart\"\r\n              (portletType)=\"getPortletType($event)\"\r\n            >\r\n            </rs-portlet-type-new>\r\n          </div>\r\n\r\n          <!-- new dashboard \u5E76\u4E14\u9009\u62E9\u56FE\u6807\u7C7B\u578B \u624D\u6709\u7684\u4F9B\u4E09\u4E2A\u56FE\u8868\u9009\u62E9\u7684X\u8F74Y\u8F74 -->\r\n          <ng-container\r\n            *ngIf=\"\r\n              ['newcolumn', 'newline', 'newcolumnline'].includes(portletType)\r\n            \"\r\n          >\r\n            <div class=\"wizard\" (click)=\"nextWizard(7)\">\r\n              <span class=\"wizard-name\"\r\n                >{{ translation.CONFIGURATIONS || \".CONFIGURATIONS\" }}*</span\r\n              >\r\n              <mat-icon class=\"wizard-icon\">{{\r\n                !expandArray[7] ? \"expand_more\" : \"expand_less\"\r\n              }}</mat-icon>\r\n            </div>\r\n\r\n            <!-- \u56FE\u6807\u914D\u7F6E\u9879 configuration -->\r\n            <div\r\n              [ngClass]=\"{ collapsed: !expandArray[7] }\"\r\n              class=\"wizard-expanded config\"\r\n            >\r\n              <div style=\"padding-left: 18px\">\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{ translation.COLORS || \".COLORS\" }}\r\n                </div>\r\n\r\n                <ejs-dropdownlist\r\n                  style=\"margin-bottom: 10px\"\r\n                  id=\"employees\"\r\n                  [dataSource]=\"themeData\"\r\n                  [allowFiltering]=\"true\"\r\n                  [filterType]=\"'Contains'\"\r\n                  [itemTemplate]=\"itemTemplate\"\r\n                  [valueTemplate]=\"valueTemplate\"\r\n                  [fields]=\"themeFields\"\r\n                  [value]=\"selectTheme\"\r\n                  (change)=\"changeTheme($event, 'theme')\"\r\n                  class=\"color-ipt\"\r\n                >\r\n                  <ng-template #itemTemplate let-data>\r\n                    <div class=\"color-box\">\r\n                      <div\r\n                        *ngFor=\"let i of data.value\"\r\n                        class=\"color-item\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': i\r\n                        }\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-template>\r\n                  <ng-template #valueTemplate let-data>\r\n                    <div class=\"color-box\">\r\n                      <div\r\n                        *ngFor=\"let item of data.value\"\r\n                        class=\"color-item\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': item\r\n                        }\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-template>\r\n                </ejs-dropdownlist>\r\n\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{ translation.X_AXIS || \".X-AXIS\" }}\r\n                </div>\r\n\r\n                <mat-select\r\n                  [(value)]=\"selectedX\"\r\n                  (openedChange)=\"xyChange($event)\"\r\n                  class=\"datamart-select\"\r\n                >\r\n                  <ng-container *ngFor=\"let i of yList\">\r\n                    <mat-option\r\n                      *ngIf=\"!i.isCalculatedField\"\r\n                      [value]=\"i.colName\"\r\n                      >{{\r\n                        (translation[i.langCode]\r\n                          ? translation[i.langCode]\r\n                          : \".\" + i.langCode) +\r\n                          (i.addtionName ? \" \" + i.addtionName : \"\")\r\n                      }}</mat-option\r\n                    >\r\n                  </ng-container>\r\n                </mat-select>\r\n\r\n                <ng-container *ngIf=\"selectedX\">\r\n                  <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                    {{ translation.FREQUENCY || \".FREQUENCY\" }}\r\n                  </div>\r\n\r\n                  <mat-select\r\n                    [(value)]=\"selectedMultiples\"\r\n                    (openedChange)=\"xyChange($event)\"\r\n                    class=\"datamart-select\"\r\n                  >\r\n                    <mat-option\r\n                      *ngFor=\"let i of multiplesList\"\r\n                      [value]=\"i.langCode\"\r\n                      >{{\r\n                        i.addtionName\r\n                          ? i.addtionName + \"\" + translation[i.langCode]\r\n                          : translation[i.langCode]\r\n                      }}</mat-option\r\n                    >\r\n                  </mat-select>\r\n                </ng-container>\r\n\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{\r\n                    portletType === \"newcolumnline\"\r\n                      ? (translation.COLUMN ? translation.COLUMN + \" \" : \"\") +\r\n                        (translation.Y_AXIS || \".COLUMN Y-AXIS\")\r\n                      : translation.Y_AXIS || \".Y-AXIS\"\r\n                  }}\r\n                </div>\r\n\r\n                <mat-select\r\n                  multiple\r\n                  [(value)]=\"selectedY\"\r\n                  (openedChange)=\"xyChange($event)\"\r\n                  class=\"datamart-select\"\r\n                >\r\n                  <ng-container *ngFor=\"let i of yList\">\r\n                    <mat-option\r\n                      *ngIf=\"!i.isCalculatedField\"\r\n                      [value]=\"i.colName\"\r\n                      >{{\r\n                        (translation[i.langCode]\r\n                          ? translation[i.langCode]\r\n                          : \".\" + i.langCode) +\r\n                          (i.addtionName ? \" \" + i.addtionName : \"\")\r\n                      }}</mat-option\r\n                    >\r\n                  </ng-container>\r\n                </mat-select>\r\n\r\n                <div\r\n                  style=\"margin-bottom: 10px\"\r\n                  class=\"twelvepx\"\r\n                  *ngIf=\"portletType == 'newcolumnline'\"\r\n                >\r\n                  {{\r\n                    (translation.LINE ? translation.LINE + \" \" : \"\") +\r\n                      (translation.Y_AXIS || \".LINE Y-AXIS\")\r\n                  }}\r\n                </div>\r\n\r\n                <mat-select\r\n                  multiple\r\n                  class=\"datamart-select\"\r\n                  [(value)]=\"selectedSecondY\"\r\n                  (openedChange)=\"xyChange($event)\"\r\n                  panelClass=\"mat-select-multi-panel\"\r\n                  *ngIf=\"portletType == 'newcolumnline'\"\r\n                >\r\n                  <ng-container *ngFor=\"let i of yList\">\r\n                    <mat-option\r\n                      *ngIf=\"!i.isCalculatedField\"\r\n                      [value]=\"i.colName\"\r\n                      >{{\r\n                        (translation[i.langCode]\r\n                          ? translation[i.langCode]\r\n                          : \".\" + i.langCode) +\r\n                          (i.addtionName ? \" \" + i.addtionName : \"\")\r\n                      }}</mat-option\r\n                    >\r\n                  </ng-container>\r\n                </mat-select>\r\n\r\n                <div class=\"data-label-content\">\r\n                  <div class=\"label\">\r\n                    {{ translation.DATA_LABEL || \".Data labels\" }}\r\n                  </div>\r\n                  <ejs-switch\r\n                    [(ngModel)]=\"hasMarker\"\r\n                    (ngModelChange)=\"labelConfigChange($event)\"\r\n                  ></ejs-switch>\r\n                </div>\r\n\r\n                <div style=\"margin: 10px 0\" class=\"twelvepx\">\r\n                  {{ translation.DISPLAY_UNITS || \".Display Units\" }}\r\n                </div>\r\n\r\n                <mat-select\r\n                  class=\"datamart-select\"\r\n                  [(ngModel)]=\"markerFormat\"\r\n                  (ngModelChange)=\"onChangeFormat()\"\r\n                >\r\n                  <ng-container *ngFor=\"let format of markerFormatList\">\r\n                    <mat-option [value]=\"format.value\">{{\r\n                      format.label\r\n                    }}</mat-option>\r\n                  </ng-container>\r\n                </mat-select>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <!-- historical IRR \u4E13\u7528 -->\r\n          <ng-container *ngIf=\"['historicalIRR'].includes(portletType)\">\r\n            <div class=\"wizard\" (click)=\"nextWizard(7)\">\r\n              <span class=\"wizard-name\"\r\n                >{{ translation.CONFIGURATIONS || \"CONFIGURATIONS\" }}*</span\r\n              >\r\n              <mat-icon class=\"wizard-icon\">{{\r\n                !expandArray[7] ? \"expand_more\" : \"expand_less\"\r\n              }}</mat-icon>\r\n            </div>\r\n\r\n            <!-- \u56FE\u6807\u914D\u7F6E\u9879 configuration -->\r\n            <div\r\n              [ngClass]=\"{ collapsed: !expandArray[7] }\"\r\n              class=\"wizard-expanded config\"\r\n            >\r\n              <div style=\"padding-left: 18px\">\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{ translation.COLORS || \".COLORS\" }}\r\n                </div>\r\n\r\n                <ejs-dropdownlist\r\n                  style=\"margin-bottom: 10px\"\r\n                  id=\"employees\"\r\n                  [dataSource]=\"themeData\"\r\n                  [allowFiltering]=\"true\"\r\n                  [filterType]=\"'Contains'\"\r\n                  [itemTemplate]=\"itemTemplate\"\r\n                  [valueTemplate]=\"valueTemplate\"\r\n                  [fields]=\"themeFields\"\r\n                  [value]=\"selectTheme\"\r\n                  (change)=\"changeTheme($event, 'theme')\"\r\n                  class=\"color-ipt\"\r\n                >\r\n                  <ng-template #itemTemplate let-data>\r\n                    <div class=\"color-box\">\r\n                      <div\r\n                        *ngFor=\"let i of data.value\"\r\n                        class=\"color-item\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': i\r\n                        }\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-template>\r\n                  <ng-template #valueTemplate let-data>\r\n                    <div class=\"color-box\">\r\n                      <div\r\n                        *ngFor=\"let item of data.value\"\r\n                        class=\"color-item\"\r\n                        [ngStyle]=\"{\r\n                          'background-color': item\r\n                        }\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-template>\r\n                </ejs-dropdownlist>\r\n\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{ translation.FREQUENCY || \".FREQUENCY\" }}\r\n                </div>\r\n\r\n                <!-- Frequency: Yearly/Quarterly(default)/Monthly -->\r\n                <mat-select\r\n                  [(value)]=\"selectedMultiples\"\r\n                  (openedChange)=\"setHistoricalIRRChart($event)\"\r\n                  class=\"datamart-select\"\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"let i of frequencyOptions\"\r\n                    [value]=\"i.langCode\"\r\n                  >\r\n                    {{ (i.addtionName || \"\") + translation[i.langCode] }}\r\n                  </mat-option>\r\n                </mat-select>\r\n\r\n                <!-- Fund cashflow IRR ( fund ops settlement) \u53EF\u9009\u62E9 -->\r\n                <ng-container\r\n                  *ngIf=\"\r\n                    ['FundHistoricalCashflowIRR'].includes(selectedDatamart)\r\n                  \"\r\n                >\r\n                  <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                    Investors\r\n                  </div>\r\n                  <!-- Investors: All/exclude GP&SLP -->\r\n                  <mat-select\r\n                    [(value)]=\"selectedInvestor\"\r\n                    (openedChange)=\"setHistoricalIRRChart($event)\"\r\n                    class=\"datamart-select\"\r\n                  >\r\n                    <mat-option\r\n                      *ngFor=\"let item of investorList\"\r\n                      [value]=\"item.code\"\r\n                    >\r\n                      {{ item.text }}\r\n                    </mat-option>\r\n                  </mat-select>\r\n                </ng-container>\r\n\r\n                <!-- line \u548C bar \u56FE x \u8F74\u4E3A date\uFF0Cy \u8F74\u4E3A IRR \u767E\u5206\u6570 -->\r\n                <div style=\"margin-bottom: 10px\" class=\"twelvepx\">\r\n                  {{ translation.VISUAL_TYPE || \".VISUAL_TYPE\" }}\r\n                </div>\r\n                <!-- Visual Type: Line(default)/Column Chart/Table -->\r\n                <mat-select\r\n                  [(value)]=\"selectedVisualType\"\r\n                  (openedChange)=\"setHistoricalIRRChart($event)\"\r\n                  class=\"datamart-select\"\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"let item of visualTypeList\"\r\n                    [value]=\"item.code\"\r\n                  >\r\n                    {{ item.text }}\r\n                  </mat-option>\r\n                </mat-select>\r\n                <div\r\n                  class=\"data-label-content\"\r\n                  *ngIf=\"selectedVisualType !== 'table'\"\r\n                >\r\n                  <div class=\"label\">\r\n                    {{ translation.DATA_LABEL || \".Data labels\" }}\r\n                  </div>\r\n                  <ejs-switch\r\n                    [checked]=\"true\"\r\n                    [(ngModel)]=\"hasMarker\"\r\n                    (ngModelChange)=\"labelConfigChange($event)\"\r\n                  ></ejs-switch>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"wizard\" (click)=\"nextWizard(3)\">\r\n            <span class=\"wizard-name\"\r\n              >{{\r\n                translation.GENERAL_OPTIONS\r\n                  ? translation.GENERAL_OPTIONS\r\n                  : \".GENERAL_OPTIONS\"\r\n              }}*</span\r\n            >\r\n            <mat-icon class=\"wizard-icon\">{{\r\n              !expandArray[3] ? \"expand_more\" : \"expand_less\"\r\n            }}</mat-icon>\r\n          </div>\r\n          <div\r\n            class=\"dialog-content\"\r\n            [ngClass]=\"{ collapsed: !expandArray[3] }\"\r\n            *ngIf=\"portletType !== 'newchart'\"\r\n          >\r\n            <div class=\"condition-item\">\r\n              <div class=\"title\">\r\n                {{ translation.GADGET_TITLE || \".GADGET_TITLE\" }}\r\n              </div>\r\n              <input\r\n                matInput\r\n                #message\r\n                maxlength=\"256\"\r\n                (ngModelChange)=\"gadgetTitleChange($event)\"\r\n                [(ngModel)]=\"config.gadgetTitle\"\r\n                autocomplete=\"off\"\r\n              />\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"dialog-content\"\r\n            [ngClass]=\"{ collapsed: !expandArray[3] }\"\r\n            *ngIf=\"portletType === 'newchart'\"\r\n          >\r\n            <div class=\"condition-item\">\r\n              <div class=\"title\">\r\n                {{ translation.GADGET_TITLE || \".GADGET_TITLE\" }}\r\n              </div>\r\n              <input\r\n                matInput\r\n                #message\r\n                maxlength=\"256\"\r\n                (ngModelChange)=\"gadgetTitleChange($event)\"\r\n                [(ngModel)]=\"config.gadgetTitle\"\r\n                autocomplete=\"off\"\r\n              />\r\n            </div>\r\n            <div class=\"condition-item\">\r\n              <div class=\"title\">\r\n                {{ translation.CHARTTYPE || \".CHARTTYPE\" }}\r\n              </div>\r\n              <mat-select\r\n                [placeholder]=\"translation.SELECT_A_TYPE || 'Select a type'\"\r\n                [(ngModel)]=\"chartSettings.chartSeries.type\"\r\n                (selectionChange)=\"setChartType()\"\r\n              >\r\n                <mat-option *ngFor=\"let item of chartTypeList\" [value]=\"item\">\r\n                  {{ translation[\"chart_\" + item] || item }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <div class=\"condition-item flex\">\r\n              <ejs-checkbox\r\n                [label]=\"translation.MULTIPLE_AXIS || '.MULTIPLE_AXIS'\"\r\n                [(ngModel)]=\"chartSettings.enableMultipleAxis\"\r\n                (change)=\"setMultipleAxis($event)\"\r\n              ></ejs-checkbox>\r\n              <ejs-checkbox\r\n                [disabled]=\"!chartSettings.enableMultipleAxis\"\r\n                [label]=\"translation.SHOW_LEGEND || '.SHOW_LEGEND'\"\r\n                (change)=\"setMultipleAxis($event)\"\r\n                [(ngModel)]=\"chartSettings.legendSettings.visible\"\r\n              ></ejs-checkbox>\r\n            </div>\r\n            <div class=\"condition-item\">\r\n              <div class=\"title\">\r\n                {{ translation.MULTIPLE_AXIS_MODE || \".MULTIPLE_AXIS_MODE\" }}\r\n              </div>\r\n              <mat-select\r\n                [placeholder]=\"translation.SELECT_A_MODE || '.SELECT_A_MODE'\"\r\n                (selectionChange)=\"setMultipleAxis($event.value)\"\r\n                [(ngModel)]=\"chartSettings.multipleAxisMode\"\r\n                [disabled]=\"!chartSettings.enableMultipleAxis\"\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let item of multipleAxisModeList\"\r\n                  [value]=\"item\"\r\n                >\r\n                  {{ translation[\"chart_\" + item] || item }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <div class=\"condition-item\">\r\n              <div class=\"title\">\r\n                {{ translation.COLORS || \".COLORS\" }}\r\n              </div>\r\n\r\n              <ejs-dropdownlist\r\n                id=\"employees\"\r\n                [dataSource]=\"themeData\"\r\n                [allowFiltering]=\"true\"\r\n                [filterType]=\"'Contains'\"\r\n                [itemTemplate]=\"itemTemplate\"\r\n                [valueTemplate]=\"valueTemplate\"\r\n                [fields]=\"themeFields\"\r\n                [value]=\"selectTheme\"\r\n                (change)=\"getThemeData($event)\"\r\n                class=\"color-ipt\"\r\n              >\r\n                <ng-template #itemTemplate let-data>\r\n                  <div class=\"color-box\">\r\n                    <div\r\n                      *ngFor=\"let i of data.value\"\r\n                      class=\"color-item\"\r\n                      [ngStyle]=\"{\r\n                        'background-color': i\r\n                      }\"\r\n                    ></div>\r\n                  </div>\r\n                </ng-template>\r\n                <ng-template #valueTemplate let-data>\r\n                  <div class=\"color-box\">\r\n                    <div\r\n                      *ngFor=\"let item of data.value\"\r\n                      class=\"color-item\"\r\n                      [ngStyle]=\"{\r\n                        'background-color': item\r\n                      }\"\r\n                    ></div>\r\n                  </div>\r\n                </ng-template>\r\n              </ejs-dropdownlist>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- </form> -->\r\n    <div class=\"footer-btn\">\r\n      <button type=\"button\" mat-flat-button class=\"btn-close\" (click)=\"clear()\">\r\n        {{ translation.CLEAR ? translation.CLEAR : \"Clear\" }}\r\n      </button>\r\n      <button type=\"button\" mat-flat-button class=\"btn-save\" (click)=\"close()\">\r\n        {{ translation.CLOSE ? translation.CLOSE : \".CLOSE\" }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["@charset \"UTF-8\";.sidebar-iconlist{display:flex;flex-direction:column;height:100%}.sidebar-iconlist .nav-tabs{width:100%;display:flex;justify-content:center}.sidebar-iconlist .nav-tabs .nav-item{width:40%;padding:15px 10px 0}.sidebar-iconlist .nav-tabs .nav-item .nav-link{padding:12px 0;display:flex;justify-content:center}.sidebar-iconlist .nav-tabs .nav-item .tab-name{font-size:13px;font-weight:700;color:#48465a}.sidebar-iconlist .sidebar-iconlist-content{background-color:#fff;flex:1;height:0}.nav-tabs .nav-link.active,.nav-tabs .nav-link:hover{border-bottom:2px solid #5d78ff}.wizard{position:relative;width:100%;height:40px;background-color:#f7f9fb;padding:12px;margin-bottom:10px;cursor:pointer}.wizard .wizard-name{font-size:16px;color:#6c7293;font-weight:600}.wizard .wizard-icon{position:absolute;right:0}.wizard.slide-out{transform:translateX(100%);transition:transform .5s}.wizard.slide-out.slide-in{transform:translateX(0);transition:transform .5s}.wizard.chart{margin-top:-50px}.edit-dashboard-container{height:250px;transition:height .5s;overflow-y:hidden}.edit-dashboard-container.collapsed{height:0;transition:height .5s}.wizard-expanded{background-color:#fff;font-size:15px;overflow-y:auto}.wizard-expanded::-webkit-scrollbar{display:none}.wizard-expanded.datasource{height:500px;transition:height .5s}.wizard-expanded.datasource.extended{height:225px;transition:height .5s}.wizard-expanded.datasource.collapsed{height:0;transition:height .5s}.wizard-expanded.portlets{height:370px;transition:height .5s}.wizard-expanded.portlets.collapsed{height:0;transition:height .5s}.wizard-expanded.general{height:100px;transition:height .5s}.wizard-expanded.general.collapsed{height:0;transition:height .5s}.wizard-expanded.config{height:436px;transition:height .5s}.wizard-expanded.config.collapsed{height:0;transition:height .5s}.wizard-expanded.fields{height:300px;overflow-y:scroll;display:flex;flex-direction:column;transition:height .5s;transform:translateX(0);padding-bottom:50px}.wizard-expanded.fields.collapsed{height:0;transition:height .5s;transform:translateX(16px)}.wizard-expanded.fields.extended{height:400px;transition:height .5s}.wizard-expanded.series{height:auto;display:flex;flex-direction:column;transition:height .5s}.wizard-expanded.series.collapsed{height:0;transition:height .5s}.wizard-expanded.series .series-card{border:.33px solid #6c7293;margin-top:5px;margin-bottom:5px;width:98%}.wizard-expanded.series .series-card .select{height:40px;background-color:rgba(239,241,254,.5);padding-left:10px;padding-top:10px;margin-top:5px;margin-bottom:5px}.wizard-expanded.xaxis{height:auto;transition:height .5s}.wizard-expanded.xaxis.collapsed{height:0;transition:height .5s}.wizard-expanded.xaxis .select{height:40px;background-color:rgba(239,241,254,.5);padding-left:10px;padding-top:10px;margin-top:5px;margin-bottom:5px}.wizard-expanded.yaxis{height:auto;transition:height .5s}.wizard-expanded.yaxis.collapsed{height:0;transition:height .5s}.wizard-expanded.yaxis .select{height:40px;background-color:rgba(239,241,254,.5);padding-left:10px;padding-top:10px;margin-top:5px;margin-bottom:5px}.wizard-expanded .datamart-type-btn{border-radius:20px;height:40px;border:2px solid #606ede;background-color:#fff;color:#606ede;margin-right:10px;padding-left:10px;padding-right:10px;margin-bottom:10px}.wizard-expanded .datamart-type-btn.selected{color:#fff;background-color:#606ede}.wizard-expanded .datamart-select{height:40px;background-color:rgba(239,241,254,.5);width:95%;padding-left:10px;padding-top:10px;margin-bottom:10px}.wizard-expanded .twelvepx{font-size:12px}.footer-btn{z-index:998;background:#fff;padding-top:15px;position:absolute;bottom:30px}.btn-save{width:150px;height:40px;border-radius:5px;color:#5d78ff;background-color:#eff1fe;border-style:none;font-size:15px;font-weight:700;font-family:Arial;margin-left:13px}.btn-save:hover{color:#fff;background:#606ede}.btn-close{width:150px;height:40px;border-radius:5px;background-color:#f2f3f7;border-style:none;font-size:15px;font-weight:700;font-family:Arial;color:#979cb4;margin-left:44px}.scroll-body::-webkit-scrollbar{display:none}::ng-deep kt-sidebar-iconlist .fields-title{margin-bottom:0!important;background:#f7f8fa!important;padding-left:0!important}::ng-deep kt-sidebar-iconlist .fields-data{background:#f7f8fa!important}::ng-deep kt-sidebar-iconlist .fields-data .mat-checkbox-frame{background:#fff!important;border:1px solid #d6d6d6!important}::ng-deep kt-sidebar-iconlist .fields-data .mat-checkbox-inner-container{margin-right:10px!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform 250ms cubic-bezier(0,0,.2,1)}.add-pdding{padding:0 16px}.data-source{background:#fff}.wizard-expanded.datasource{background:#f7f8fa}button.btn.prompt-btn{display:inline-block;width:20px!important;height:22px;margin-top:-6px;margin-left:3px}.prompt-btn{background-image:url(../../../assets/img/dashboard_icon/information-1.png);background-position:0 0;background-size:20px;background-repeat:no-repeat}.prompt-btn ngb-tooltip-window .tooltip{width:189px!important;height:58px!important;border-radius:2px!important;box-shadow:0 8px 16px 0 rgba(169,194,209,.25)!important;background-color:rgba(169,194,209,.25)!important;font-family:Arial!important;font-size:13px!important;color:#fff!important}.content-title{font-size:10px;font-weight:400;color:#a2a3b5}.icon-list mat-icon.mat-icon{width:30px;height:30px;line-height:30px;background:#eff1fe;margin-right:12px;color:#44566c;text-align:center;border-radius:5px;cursor:pointer;margin-top:6px}.icon-list mat-icon.mat-icon.selected{color:#fff;background-color:#606ede}.data-label-content{margin-top:8px;display:flex;align-items:center}.data-label-content .label{margin-right:8px}input.field-name{border-bottom:1px solid #eaedf0}.display-total{color:#fdbf5e}.scroll-body{padding-bottom:1vh}::ng-deep kt-sidebar-iconlist input,::ng-deep kt-sidebar-iconlist mat-select{color:#4a4a4a!important}::ng-deep kt-sidebar-iconlist span.mat-slide-toggle-content{font-family:Arial!important;font-size:15px!important;font-weight:700!important;color:#4a4a4a!important}::ng-deep kt-sidebar-iconlist .mat-form-field-flex{border-bottom:1px solid #e9edef;border-radius:0!important}.footer-btn{margin:0}.state-selector{width:360px;height:36px;border:2px solid #5867dd;border-radius:5px;display:inline-block;margin-left:15px;margin-bottom:20px}.state-selector .state{display:inline-block;width:33.3%;padding-top:1px;text-align:center;background-color:#fff;height:32px;line-height:32px;font-size:15px;cursor:pointer;color:#606ede}.state-selector .state.investment{border-left:2px solid #5867dd;border-right:2px solid #5867dd}.state-selector .state.selected{background-color:#5867dd;color:#fff}:host ::ng-deep.kt-margin-bottom-10-mobile{height:40px;margin-bottom:20px}:host ::ng-deep.kt-margin-bottom-10-mobile .mat-form-field-flex{height:40px;background:#f8fafb;border:none!important}:host ::ng-deep.field-icon-filter .filter .kt-margin-bottom-10-mobile .mat-form-field-flex{height:40px;background:#f8fafb;border:none!important}:host ::ng-deep .box{position:absolute;top:364px;background:#fff;width:100%;z-index:999;height:auto}:host ::ng-deep .box .mat-checkbox-inner-container{background:#f8fafb}:host ::ng-deep .box .box-header{position:relative;height:40px;width:100%;border-radius:5px;background-color:rgba(239,241,254,.5)}:host ::ng-deep .box .box-header .title-icon{position:absolute;top:10px;left:10px}:host ::ng-deep .box .box-header .close-icon{position:absolute;top:10px;right:10px}:host ::ng-deep .box .box-header .title{position:absolute;top:0;padding-left:42px;width:100%;font-family:Arial}:host ::ng-deep .box .box-header .close{position:absolute;top:10px;right:10px}:host ::ng-deep .box .box-content{display:flex;flex-direction:column;padding:10px;max-height:210px;overflow:auto!important}:host ::ng-deep .box .buttons{font-family:Arial;display:flex;width:100%;justify-content:center;margin-bottom:10px;margin-top:15px}:host ::ng-deep .box .buttons .noki-btn{width:110px;border-radius:6px;color:#5d78ff;background-color:#eff1fe;box-shadow:none;border:none;font-size:1.25rem;font-weight:400;margin-left:15px;margin-right:15px;height:40px;line-height:40px}:host ::ng-deep .box .buttons .noki-btn:hover{color:#fff;background-color:#5d78ff}.format .box-content{max-height:150px}:host::ng-deep .datamart-select .mat-select-value-text{font-size:15px!important;font-weight:400!important;color:#44566c!important}.fields-row{height:40px!important;line-height:40px;position:relative}.fields-row mat-checkbox.fields-{display:inline-block}.fields-row .field-icon-filter,.fields-row .field-icon-format{cursor:pointer;margin:0 6px}.fields-row .field-icon-filter mat-icon,.fields-row .field-icon-format mat-icon{transform:translateY(2px)!important}.fields-row .field-icon-filter .box,.fields-row .field-icon-format .box{position:absolute;top:40px;z-index:99;border:1px solid #eaedf0;border-radius:5px;height:auto;width:367px;cursor:default;background-color:#fff}.fields-row .field-icon-filter .box .mat-checkbox-inner-container,.fields-row .field-icon-format .box .mat-checkbox-inner-container{cursor:pointer}.fields-row .field-icon-filter .box .box-header,.fields-row .field-icon-format .box .box-header{position:relative;height:40px;width:100%;border-radius:5px;background-color:rgba(239,241,254,.5)}.fields-row .field-icon-filter .box .box-header .title-icon,.fields-row .field-icon-format .box .box-header .title-icon{position:absolute;top:10px;left:10px}.fields-row .field-icon-filter .box .box-header .close-icon,.fields-row .field-icon-format .box .box-header .close-icon{position:absolute;top:10px;right:10px}.fields-row .field-icon-filter .box .box-header .title,.fields-row .field-icon-format .box .box-header .title{position:absolute;top:0;padding-left:42px;width:100%;font-family:Arial}.fields-row .field-icon-filter .box .box-header .close,.fields-row .field-icon-format .box .box-header .close{position:absolute;top:10px;right:10px}.fields-row .field-icon-filter .box .box-content,.fields-row .field-icon-format .box .box-content{display:flex;flex-direction:column;padding:10px;overflow-y:hidden}.fields-row .field-icon-filter .box{transform:translateX(-302px)}.fields-row .field-icon-format .box{transform:translateX(-338px)}.fields-row .field-icon-total{width:36px;text-align:center;font-weight:500;cursor:pointer;margin:0 5px}:host::ng-deep .fields-row mat-checkbox.fields- label.mat-checkbox-layout{width:100%}:host::ng-deep .fields-row mat-checkbox.fields- span.mat-checkbox-label{width:calc(100% - 26px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host::ng-deep .fields-row .box-content label.mat-checkbox-layout{width:100%}:host::ng-deep .fields-row .box-content span.mat-checkbox-label{width:calc(100% - 26px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host::ng-deep .search-select-all{position:absolute;background:#fff;top:40px;z-index:9;width:calc(100% - 10px)}:host::ng-deep .search-select-all .search- .mat-form-field-flex{display:inline-flex;align-items:baseline;box-sizing:border-box;width:calc(100% - 10px);border:1px solid #e9edef;border-radius:5px!important}.tab-content{padding:0!important}ul.nav.nav-tabs.nav-tabs-line{width:100%;padding-right:0;margin-bottom:25px}ul.nav.nav-tabs.nav-tabs-line li{width:40%;padding:15px 10px 0}ul.nav.nav-tabs.nav-tabs-line li .tab-name{display:inline-block;font-size:13px;font-weight:700;color:#48465a}.color-ipt{width:95%}.color-ipt .e-list-item{background-color:#fff!important}.color-ipt .e-input-group{background-color:rgba(239,241,254,.5)!important}::ng-deep .e-dropdownlist .e-list-item.e-active{background:red!important}.color-box{width:100%;display:flex;height:40px;align-items:center;justify-content:center}.color-box .color-item{width:10%;height:16px}.dialog-content{padding:16px 24px}.dialog-content .condition-item{margin-bottom:18px}.dialog-content .condition-item.flex{display:flex}.dialog-content .condition-item.flex .e-checkbox-wrapper{flex:1;height:20px}.dialog-content .condition-item.flex .e-checkbox-wrapper .e-icons{height:18px;width:18px}.dialog-content .condition-item.flex .e-checkbox-wrapper .e-icons:before{font-size:12px}.dialog-content .condition-item .title{margin-bottom:6px;font-size:13px;color:#646c9a}.dialog-content .condition-item .mat-input-element,.dialog-content .condition-item .mat-select{border-bottom:1px solid rgba(0,0,0,.42);height:30px;line-height:30px;width:100%}.dialog-content .condition-item .mat-input-element.mat-select-disabled,.dialog-content .condition-item .mat-select.mat-select-disabled{opacity:.3}::ng-deep .cdk-overlay-pane{transform:translateX(-16px)!important}::ng-deep .cdk-overlay-pane .mat-select-panel-wrap{max-width:380px!important}::ng-deep .cdk-overlay-pane .mat-select-panel-wrap .mat-select-panel{min-width:calc(100% + 32px)!important}"]
+                styles: ["@charset \"UTF-8\";.sidebar-iconlist{display:flex;flex-direction:column;height:100%}.sidebar-iconlist .nav-tabs{width:100%;display:flex;justify-content:center}.sidebar-iconlist .nav-tabs .nav-item{width:40%;padding:15px 10px 0}.sidebar-iconlist .nav-tabs .nav-item .nav-link{padding:12px 0;display:flex;justify-content:center}.sidebar-iconlist .nav-tabs .nav-item .tab-name{font-size:13px;font-weight:700;color:#48465a}.sidebar-iconlist .sidebar-iconlist-content{background-color:#fff;flex:1;height:0}.nav-tabs .nav-link.active,.nav-tabs .nav-link:hover{border-bottom:2px solid #5d78ff}.wizard{position:relative;width:100%;height:40px;background-color:#f7f9fb;padding:12px;margin-bottom:10px;cursor:pointer}.wizard .wizard-name{font-size:16px;color:#6c7293;font-weight:600}.wizard .wizard-icon{position:absolute;right:0}.wizard.slide-out{transform:translateX(100%);transition:transform .5s}.wizard.slide-out.slide-in{transform:translateX(0);transition:transform .5s}.wizard.chart{margin-top:-50px}.edit-dashboard-container{height:250px;transition:height .5s;overflow-y:hidden}.edit-dashboard-container.collapsed{height:0;transition:height .5s}.wizard-expanded{background-color:#fff;font-size:15px;overflow-y:auto}.wizard-expanded::-webkit-scrollbar{display:none}.wizard-expanded.datasource{height:500px;transition:height .5s}.wizard-expanded.datasource.extended{height:225px;transition:height .5s}.wizard-expanded.datasource.collapsed{height:0;transition:height .5s}.wizard-expanded.portlets{height:370px;transition:height .5s}.wizard-expanded.portlets.collapsed{height:0;transition:height .5s}.wizard-expanded.general{height:100px;transition:height .5s}.wizard-expanded.general.collapsed{height:0;transition:height .5s}.wizard-expanded.config{height:436px;transition:height .5s}.wizard-expanded.config.collapsed{height:0;transition:height .5s}.wizard-expanded.fields{height:300px;overflow-y:scroll;display:flex;flex-direction:column;transition:height .5s;transform:translateX(0);padding-bottom:50px}.wizard-expanded.fields.collapsed{height:0;transition:height .5s;transform:translateX(16px)}.wizard-expanded.fields.extended{height:400px;transition:height .5s}.wizard-expanded.series{height:auto;display:flex;flex-direction:column;transition:height .5s}.wizard-expanded.series.collapsed{height:0;transition:height .5s}.wizard-expanded.series .series-card{border:.33px solid #6c7293;margin-top:5px;margin-bottom:5px;width:98%}.wizard-expanded.series .series-card .select{height:40px;background-color:rgba(239,241,254,.5);padding-left:10px;padding-top:10px;margin-top:5px;margin-bottom:5px}.wizard-expanded.xaxis{height:auto;transition:height .5s}.wizard-expanded.xaxis.collapsed{height:0;transition:height .5s}.wizard-expanded.xaxis .select{height:40px;background-color:rgba(239,241,254,.5);padding-left:10px;padding-top:10px;margin-top:5px;margin-bottom:5px}.wizard-expanded.yaxis{height:auto;transition:height .5s}.wizard-expanded.yaxis.collapsed{height:0;transition:height .5s}.wizard-expanded.yaxis .select{height:40px;background-color:rgba(239,241,254,.5);padding-left:10px;padding-top:10px;margin-top:5px;margin-bottom:5px}.wizard-expanded .datamart-type-btn{border-radius:20px;height:40px;border:2px solid #606ede;background-color:#fff;color:#606ede;margin-right:10px;padding-left:10px;padding-right:10px;margin-bottom:10px}.wizard-expanded .datamart-type-btn.selected{color:#fff;background-color:#606ede}.wizard-expanded .datamart-select{height:40px;background-color:rgba(239,241,254,.5);width:95%;padding-left:10px;padding-top:10px;margin-bottom:10px}.wizard-expanded .twelvepx{font-size:12px}.footer-btn{z-index:998;background:#fff;padding-top:15px;position:absolute;bottom:30px}.btn-save{width:150px;height:40px;border-radius:5px;color:#5d78ff;background-color:#eff1fe;border-style:none;font-size:15px;font-weight:700;font-family:Arial;margin-left:13px}.btn-save:hover{color:#fff;background:#606ede}.btn-close{width:150px;height:40px;border-radius:5px;background-color:#f2f3f7;border-style:none;font-size:15px;font-weight:700;font-family:Arial;color:#979cb4;margin-left:44px}.scroll-body::-webkit-scrollbar{display:none}::ng-deep kt-sidebar-iconlist .fields-title{margin-bottom:0!important;background:#f7f8fa!important;padding-left:0!important}::ng-deep kt-sidebar-iconlist .fields-data{background:#f7f8fa!important}::ng-deep kt-sidebar-iconlist .fields-data .mat-checkbox-frame{background:#fff!important;border:1px solid #d6d6d6!important}::ng-deep kt-sidebar-iconlist .fields-data .mat-checkbox-inner-container{margin-right:10px!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform 250ms cubic-bezier(0,0,.2,1)}.add-pdding{padding:0 16px}.data-source{background:#fff}.wizard-expanded.datasource{background:#f7f8fa}button.btn.prompt-btn{display:inline-block;width:20px!important;height:22px;margin-top:-6px;margin-left:3px}.prompt-btn{background-image:url(../../assets/img/dashboard_icon/information-1.png);background-position:0 0;background-size:20px;background-repeat:no-repeat}.prompt-btn ngb-tooltip-window .tooltip{width:189px!important;height:58px!important;border-radius:2px!important;box-shadow:0 8px 16px 0 rgba(169,194,209,.25)!important;background-color:rgba(169,194,209,.25)!important;font-family:Arial!important;font-size:13px!important;color:#fff!important}.content-title{font-size:10px;font-weight:400;color:#a2a3b5}.icon-list mat-icon.mat-icon{width:30px;height:30px;line-height:30px;background:#eff1fe;margin-right:12px;color:#44566c;text-align:center;border-radius:5px;cursor:pointer;margin-top:6px}.icon-list mat-icon.mat-icon.selected{color:#fff;background-color:#606ede}.data-label-content{margin-top:8px;display:flex;align-items:center}.data-label-content .label{margin-right:8px}input.field-name{border-bottom:1px solid #eaedf0}.display-total{color:#fdbf5e}.scroll-body{padding-bottom:1vh}::ng-deep kt-sidebar-iconlist input,::ng-deep kt-sidebar-iconlist mat-select{color:#4a4a4a!important}::ng-deep kt-sidebar-iconlist span.mat-slide-toggle-content{font-family:Arial!important;font-size:15px!important;font-weight:700!important;color:#4a4a4a!important}::ng-deep kt-sidebar-iconlist .mat-form-field-flex{border-bottom:1px solid #e9edef;border-radius:0!important}.footer-btn{margin:0}.state-selector{width:360px;height:36px;border:2px solid #5867dd;border-radius:5px;display:inline-block;margin-left:15px;margin-bottom:20px}.state-selector .state{display:inline-block;width:33.3%;padding-top:1px;text-align:center;background-color:#fff;height:32px;line-height:32px;font-size:15px;cursor:pointer;color:#606ede}.state-selector .state.investment{border-left:2px solid #5867dd;border-right:2px solid #5867dd}.state-selector .state.selected{background-color:#5867dd;color:#fff}:host ::ng-deep.kt-margin-bottom-10-mobile{height:40px;margin-bottom:20px}:host ::ng-deep.kt-margin-bottom-10-mobile .mat-form-field-flex{height:40px;background:#f8fafb;border:none!important}:host ::ng-deep.field-icon-filter .filter .kt-margin-bottom-10-mobile .mat-form-field-flex{height:40px;background:#f8fafb;border:none!important}:host ::ng-deep .box{position:absolute;top:364px;background:#fff;width:100%;z-index:999;height:auto}:host ::ng-deep .box .mat-checkbox-inner-container{background:#f8fafb}:host ::ng-deep .box .box-header{position:relative;height:40px;width:100%;border-radius:5px;background-color:rgba(239,241,254,.5)}:host ::ng-deep .box .box-header .title-icon{position:absolute;top:10px;left:10px}:host ::ng-deep .box .box-header .close-icon{position:absolute;top:10px;right:10px}:host ::ng-deep .box .box-header .title{position:absolute;top:0;padding-left:42px;width:100%;font-family:Arial}:host ::ng-deep .box .box-header .close{position:absolute;top:10px;right:10px}:host ::ng-deep .box .box-content{display:flex;flex-direction:column;padding:10px;max-height:210px;overflow:auto!important}:host ::ng-deep .box .buttons{font-family:Arial;display:flex;width:100%;justify-content:center;margin-bottom:10px;margin-top:15px}:host ::ng-deep .box .buttons .noki-btn{width:110px;border-radius:6px;color:#5d78ff;background-color:#eff1fe;box-shadow:none;border:none;font-size:1.25rem;font-weight:400;margin-left:15px;margin-right:15px;height:40px;line-height:40px}:host ::ng-deep .box .buttons .noki-btn:hover{color:#fff;background-color:#5d78ff}.format .box-content{max-height:150px}:host::ng-deep .datamart-select .mat-select-value-text{font-size:15px!important;font-weight:400!important;color:#44566c!important}.fields-row{height:40px!important;line-height:40px;position:relative}.fields-row mat-checkbox.fields-{display:inline-block}.fields-row .field-icon-filter,.fields-row .field-icon-format{cursor:pointer;margin:0 6px}.fields-row .field-icon-filter mat-icon,.fields-row .field-icon-format mat-icon{transform:translateY(2px)!important}.fields-row .field-icon-filter .box,.fields-row .field-icon-format .box{position:absolute;top:40px;z-index:99;border:1px solid #eaedf0;border-radius:5px;height:auto;width:367px;cursor:default;background-color:#fff}.fields-row .field-icon-filter .box .mat-checkbox-inner-container,.fields-row .field-icon-format .box .mat-checkbox-inner-container{cursor:pointer}.fields-row .field-icon-filter .box .box-header,.fields-row .field-icon-format .box .box-header{position:relative;height:40px;width:100%;border-radius:5px;background-color:rgba(239,241,254,.5)}.fields-row .field-icon-filter .box .box-header .title-icon,.fields-row .field-icon-format .box .box-header .title-icon{position:absolute;top:10px;left:10px}.fields-row .field-icon-filter .box .box-header .close-icon,.fields-row .field-icon-format .box .box-header .close-icon{position:absolute;top:10px;right:10px}.fields-row .field-icon-filter .box .box-header .title,.fields-row .field-icon-format .box .box-header .title{position:absolute;top:0;padding-left:42px;width:100%;font-family:Arial}.fields-row .field-icon-filter .box .box-header .close,.fields-row .field-icon-format .box .box-header .close{position:absolute;top:10px;right:10px}.fields-row .field-icon-filter .box .box-content,.fields-row .field-icon-format .box .box-content{display:flex;flex-direction:column;padding:10px;overflow-y:hidden}.fields-row .field-icon-filter .box{transform:translateX(-302px)}.fields-row .field-icon-format .box{transform:translateX(-338px)}.fields-row .field-icon-total{width:36px;text-align:center;font-weight:500;cursor:pointer;margin:0 5px}:host::ng-deep .fields-row mat-checkbox.fields- label.mat-checkbox-layout{width:100%}:host::ng-deep .fields-row mat-checkbox.fields- span.mat-checkbox-label{width:calc(100% - 26px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host::ng-deep .fields-row .box-content label.mat-checkbox-layout{width:100%}:host::ng-deep .fields-row .box-content span.mat-checkbox-label{width:calc(100% - 26px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host::ng-deep .search-select-all{position:absolute;background:#fff;top:40px;z-index:9;width:calc(100% - 10px)}:host::ng-deep .search-select-all .search- .mat-form-field-flex{display:inline-flex;align-items:baseline;box-sizing:border-box;width:calc(100% - 10px);border:1px solid #e9edef;border-radius:5px!important}.tab-content{padding:0!important}ul.nav.nav-tabs.nav-tabs-line{width:100%;padding-right:0;margin-bottom:25px}ul.nav.nav-tabs.nav-tabs-line li{width:40%;padding:15px 10px 0}ul.nav.nav-tabs.nav-tabs-line li .tab-name{display:inline-block;font-size:13px;font-weight:700;color:#48465a}.color-ipt{width:95%}.color-ipt .e-list-item{background-color:#fff!important}.color-ipt .e-input-group{background-color:rgba(239,241,254,.5)!important}::ng-deep .e-dropdownlist .e-list-item.e-active{background:red!important}.color-box{width:100%;display:flex;height:40px;align-items:center;justify-content:center}.color-box .color-item{width:10%;height:16px}.dialog-content{padding:16px 24px}.dialog-content .condition-item{margin-bottom:18px}.dialog-content .condition-item.flex{display:flex}.dialog-content .condition-item.flex .e-checkbox-wrapper{flex:1;height:20px}.dialog-content .condition-item.flex .e-checkbox-wrapper .e-icons{height:18px;width:18px}.dialog-content .condition-item.flex .e-checkbox-wrapper .e-icons:before{font-size:12px}.dialog-content .condition-item .title{margin-bottom:6px;font-size:13px;color:#646c9a}.dialog-content .condition-item .mat-input-element,.dialog-content .condition-item .mat-select{border-bottom:1px solid rgba(0,0,0,.42);height:30px;line-height:30px;width:100%}.dialog-content .condition-item .mat-input-element.mat-select-disabled,.dialog-content .condition-item .mat-select.mat-select-disabled{opacity:.3}::ng-deep .cdk-overlay-pane{transform:translateX(-16px)!important}::ng-deep .cdk-overlay-pane .mat-select-panel-wrap{max-width:380px!important}::ng-deep .cdk-overlay-pane .mat-select-panel-wrap .mat-select-panel{min-width:calc(100% + 32px)!important}"]
             }] }
 ];
 /** @nocollapse */
@@ -34577,9 +34668,9 @@ class EmptyIconPromptComponent {
 }
 EmptyIconPromptComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-empty-icon-prompt",
+                selector: "rs-empty-icon-prompt",
                 template: "<div class=\"content\">\r\n\t<div class=\"card-body d-flex flex-column\">\r\n\t\t<div class=\"flex-grow-1\" style=\"position: relative\">\r\n\t\t\t<img src=\"../../../../assets/img/dashboard_icon/customize.png\" />\r\n\t\t</div>\r\n\t\t<div class=\"pt-5\">\r\n\t\t\t<p\r\n\t\t\t\tclass=\"text-center font-weight-normal font-size-lg pb-7\"\r\n\t\t\t\t*ngIf=\"displayCode == 'portlet'\"\r\n\t\t\t>\r\n\t\t\t\tThe chart you created will be shown here\u2026\r\n\t\t\t</p>\r\n\t\t\t<p\r\n\t\t\t\tclass=\"text-center font-weight-normal font-size-lg pb-7\"\r\n\t\t\t\t*ngIf=\"displayCode == 'dashboard'\"\r\n\t\t\t>\r\n\t\t\t\tCustomize the dashboard by\r\n\t\t\t\t<span class=\"createChart\" (click)=\"editProperties()\"\r\n\t\t\t\t\t>Editing dashboard properties</span\r\n\t\t\t\t>\r\n\t\t\t</p>\r\n\t\t\t<p\r\n\t\t\t\tclass=\"text-center font-weight-normal font-size-lg pb-7\"\r\n\t\t\t\t*ngIf=\"displayCode == 'dashboardGroup'\"\r\n\t\t\t>\r\n\t\t\t\tAdd new dashboard group by\r\n\t\t\t\t<span class=\"createChart\" (click)=\"createNewDashboard()\"\r\n\t\t\t\t\t>Creating new dashboard</span\r\n\t\t\t\t>\r\n\t\t\t</p>\r\n\t\t\t<p\r\n\t\t\t\tclass=\"text-center font-weight-normal font-size-lg pb-7\"\r\n\t\t\t\t*ngIf=\"displayCode == 'customize'\"\r\n\t\t\t>\r\n\t\t\t\tClick\r\n\t\t\t\t<span class=\"createChart\" (click)=\"customize()\">Customize</span>\r\n\t\t\t\tto edit your dashboard\r\n\t\t\t</p>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n",
-                styles: ["::ng-deep kt-empty-icon-prompt{height:100%!important}.content{width:100%;height:inherit;align-items:center;display:flex}.card-body.d-flex.flex-column{width:60%}.flex-grow-1{width:100%;text-align:center;justify-content:center!important;align-content:center}span.createChart{color:#5d78ff;cursor:pointer}p.text-center.font-weight-normal.font-size-lg.pb-7.ng-star-inserted{font-family:Arial;font-size:16px;color:rgba(0,0,0,.5)}"]
+                styles: ["::ng-deep rs-empty-icon-prompt{height:100%!important}.content{width:100%;height:inherit;align-items:center;display:flex}.card-body.d-flex.flex-column{width:60%}.flex-grow-1{width:100%;text-align:center;justify-content:center!important;align-content:center}span.createChart{color:#5d78ff;cursor:pointer}p.text-center.font-weight-normal.font-size-lg.pb-7.ng-star-inserted{font-family:Arial;font-size:16px;color:rgba(0,0,0,.5)}"]
             }] }
 ];
 /** @nocollapse */
@@ -35984,7 +36075,7 @@ class GadgetTableComponent {
 }
 GadgetTableComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-gadget-table",
+                selector: "rs-gadget-table",
                 template: "<div class=\"control-section gadget-table\" style=\"height: 100%\" *ngIf=\"data && data.length\">\r\n\t<ejs-grid\r\n\t\t*ngIf=\"!hideTable\"\r\n\t\t#grid\r\n\t\t[dataSource]=\"data\"\r\n\t\t[allowSorting]=\"true\"\r\n\t\twidth=\"100%\"\r\n\t\t[pageSettings]=\"options\"\r\n\t\t[resizeSettings]=\"{ mode: 'Auto' }\"\r\n\t\t[allowExcelExport]=\"true\"\r\n\t\t[filterSettings]=\"filterSettings\"\r\n\t\t[allowResizing]=\"true\"\r\n\t\tshowColumnChooser=\"true\"\r\n\t\t[columnChooserSettings]=\"ColumnChooserSettings\"\r\n\t\t[aggregates]=\"aggregates\"\r\n\t\t(queryCellInfo)=\"customiseCell($event)\"\r\n\t\t(resizeStop)=\"resizeStop($event)\"\r\n\t\t(rowDataBound)=\"rowDataBound($event)\"\r\n\t\t(created)=\"created($event)\"\r\n\t\t(actionBegin)=\"actionBegin($event)\"\r\n\t\t(actionComplete)=\"actionComplete($event)\"\r\n\t\t(excelQueryCellInfo)=\"exportQueryCellInfo($event)\"\r\n\t>\r\n\t\t<e-columns>\r\n\t\t\t<e-column\r\n\t\t\t\t*ngIf=\"getLogoInfo('logoDocId', 'langValue')\"\r\n\t\t\t\t[headerText]=\"getLogoInfo('logoDocId', 'langValue')\"\r\n\t\t\t\twidth=\"120\"\r\n\t\t\t\ttextAlign=\"Center\"\r\n\t\t\t\t[visible]=\"!getLogoInfo('logoDocId', 'isHidden')\"\r\n\t\t\t>\r\n\t\t\t\t<ng-template #template let-data>\r\n\t\t\t\t\t<div class=\"image-\">\r\n\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t[src]=\"getLogoImage(data.logoDocId)\"\r\n\t\t\t\t\t\t\t[alt]=\"data.companyName\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</e-column>\r\n\t\t\t<e-column\r\n\t\t\t\t*ngFor=\"let table of tableList\"\r\n\t\t\t\t[field]=\"table.colName\"\r\n\t\t\t\t[filter]=\"filter\"\r\n\t\t\t\t[headerText]=\"\r\n\t\t\t\t\t(table.displayName\r\n\t\t\t\t\t\t? table.displayName\r\n\t\t\t\t\t\t: translation[table.langCode]\r\n\t\t\t\t\t\t? translation[table.langCode]\r\n\t\t\t\t\t\t: table.langValue) +\r\n\t\t\t\t\t(table.addtionName ? ' ' + table.addtionName : '')\r\n\t\t\t\t\"\r\n\t\t\t\t[width]=\"table.width ? table.width : 200\"\r\n\t\t\t\tclipMode=\"EllipsisWithTooltip\"\r\n\t\t\t\t[visible]=\"table.visible\"\r\n\t\t\t\t[type]=\"\r\n\t\t\t\t\t['number', 'percentNum', 'percent'].includes(table.dataType)\r\n\t\t\t\t\t\t? 'number'\r\n\t\t\t\t\t\t: ['date', 'datetime'].includes(table.dataType)\r\n\t\t\t\t\t\t? 'date'\r\n\t\t\t\t\t\t: null\r\n\t\t\t\t\"\r\n\t\t\t\t[format]=\"getFormatOptions(table.colName)\"\r\n\t\t\t\t[textAlign]=\"getAlign(table)\"\r\n\t\t\t>\r\n\t\t\t\t<ng-template\r\n\t\t\t\t\t#template\r\n\t\t\t\t\tlet-data\r\n\t\t\t\t\t*ngIf=\"millionFields.includes(table.colName); else elseBlock\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ data[table.colName] / 1000000 }}\r\n\t\t\t\t</ng-template>\r\n\t\t\t\t<ng-template #elseBlock>\r\n\t\t\t\t\t{{ data[table.colName] }}\r\n\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t<!-- terms\u5217 \u663E\u793A\u6362\u884C\u7B26 -->\r\n\t\t\t\t<ng-template\r\n\t\t\t\t\t#template\r\n\t\t\t\t\tlet-data\r\n\t\t\t\t\t*ngIf=\"table.colName == 'terms'\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tstyle=\"white-space: pre-line\"\r\n\t\t\t\t\t\t[innerHTML]=\"data[table.colName]\"\r\n\t\t\t\t\t></div>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</e-column>\r\n\t\t</e-columns>\r\n\t</ejs-grid>\r\n\t<ejs-pager\r\n\t\t#pager\r\n\t\t[currentPage]=\"currentPage\"\r\n\t\t[pageCount]=\"5\"\r\n\t\t[pageSize]=\"pageSize\"\r\n\t\t[pageSizes]=\"[10, 50, 100]\"\r\n\t\t[totalRecordsCount]=\"totalRecordsCount\"\r\n\t\t(click)=\"pageChanged($event)\"\r\n\t>\r\n\t</ejs-pager>\r\n\t<div class=\"full-box-mask\" *ngIf=\"pageLoading\">\r\n\t\t<mat-spinner\r\n\t\t\tstyle=\"z-index: 999\"\r\n\t\t\tmode=\"indeterminate\"\r\n\t\t\t[diameter]=\"24\"\r\n\t\t></mat-spinner>\r\n\t</div>\r\n</div>\r\n",
                 providers: [
                     ExcelExportService,
@@ -40368,7 +40459,7 @@ class GadgetPivotComponent {
 }
 GadgetPivotComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-gadget-pivot",
+                selector: "rs-gadget-pivot",
                 template: "<div class=\"control-section\" style=\"overflow: hidden; height: 100%\">\r\n\t<ejs-pivotview\r\n\t\twidth=\"100%\"\r\n\t\theight=\"100%\"\r\n\t\tstyle=\"display: block\"\r\n\t\t[dataSourceSettings]=\"dataSourceSettings\"\r\n\t\t#pivotview\r\n\t\t(dataBound)=\"dataBound($event)\"\r\n\t\tenableValueSorting=\"true\"\r\n\t\tallowConditionalFormatting=\"true\"\r\n\t\t[allowDeferLayoutUpdate]=\"true\"\r\n\t\t[gridSettings]=\"gridSettings\"\r\n\t\tallowExcelExport=\"true\"\r\n\t\tallowGrouping=\"true\"\r\n\t\t[zoomSettings]=\"zoomSettings\"\r\n\t\tenableVirtualization=\"true\"\r\n\t\t(enginePopulated)=\"afterEnginePopulate($event)\"\r\n\t\t(aggregateCellInfo)=\"aggregateCellInfo($event)\"\r\n\t\t(cellClick)=\"cellClick($event)\"\r\n\t\tallowDrillThrough=\"true\"\r\n\t\t(actionFailure)=\"actionFailure($event)\"\r\n\t\t(actionComplete)=\"actionComplete($event)\"\r\n\t\t(actionBegin)=\"actionBegin($event)\"\r\n\t\t(fieldListRefreshed)=\"fieldListRefreshed($event)\"\r\n\t\t(drillThrough)=\"drillThrough($event)\"\r\n\t\t[showTooltip]=\"false\"\r\n\t\t(queryCellInfo)=\"customiseCell($event)\"\r\n\t\t(beforeExport)=\"beforeExport($event)\"\r\n\t>\r\n\t</ejs-pivotview>\r\n\r\n\t<div class=\"pivotfieldlist-control\">\r\n\t\t<ejs-pivotfieldlist\r\n\t\t\t[id]=\"portlet.newId\"\r\n\t\t\t#pivotfieldlist\r\n\t\t\t[allowDeferLayoutUpdate]=\"true\"\r\n\t\t\trenderMode=\"Popup\"\r\n\t\t\t(enginePopulated)=\"afterPopulate($event)\"\r\n\t\t\t(memberEditorOpen)=\"onMemberEditorOpen($event)\"\r\n\t\t\t(enginePopulating)=\"enginePopulating($event)\"\r\n\t\t\t(aggregateCellInfo)=\"aggregateCellInfo($event)\"\r\n\t\t\t(fieldDrop)=\"onFieldDrop($event)\"\r\n\t\t\t(actionComplete)=\"actionComplete($event)\"\r\n\t\t\t(actionBegin)=\"actionBegin($event)\"\r\n\t\t\t(calculatedFieldCreate)=\"calculatedFieldCreate($event)\"\r\n\t\t\t(load)=\"onLoad()\"\r\n\t\t\t(created)=\"created($event)\"\r\n\t\t\t(dataBound)='ondataBound()'\r\n\t\t>\r\n\t\t</ejs-pivotfieldlist>\r\n\t</div>\r\n\r\n\t<div class=\"full-box-mask\" *ngIf=\"pageLoading\">\r\n\t\t<mat-spinner\r\n\t\t\tstyle=\"z-index: 999\"\r\n\t\t\tmode=\"indeterminate\"\r\n\t\t\t[diameter]=\"24\"\r\n\t\t></mat-spinner>\r\n\t</div>\r\n</div>\r\n",
                 providers: [
                     ToolbarService,
@@ -44647,7 +44738,7 @@ class GadgetPivotChartComponent {
 }
 GadgetPivotChartComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-gadget-pivot-chart",
+                selector: "rs-gadget-pivot-chart",
                 template: "<div class=\"control-section\" style=\"overflow: hidden; height: 100%\">\r\n\t<ejs-pivotview\r\n\t\twidth=\"100%\"\r\n\t\theight=\"100%\"\r\n\t\tstyle=\"display: block\"\r\n\t\t[dataSourceSettings]=\"dataSourceSettings\"\r\n\t\t#pivotview\r\n\t\t(dataBound)=\"dataBound($event)\"\r\n\t\tenableValueSorting=\"true\"\r\n\t\tallowConditionalFormatting=\"true\"\r\n\t\tallowExcelExport=\"true\"\r\n\t\tallowGrouping=\"true\"\r\n\t\t[zoomSettings]=\"zoomSettings\"\r\n\t\tenableVirtualization=\"true\"\r\n\t\t(aggregateCellInfo)=\"aggregateCellInfo($event)\"\r\n\t\t(cellClick)=\"cellClick($event)\"\r\n\t\tallowDrillThrough=\"true\"\r\n\t\t(actionFailure)=\"actionFailure($event)\"\r\n\t\t(fieldListRefreshed)=\"fieldListRefreshed($event)\"\r\n\t\t(drillThrough)=\"drillThrough($event)\"\r\n\t\t[chartSettings]=\"chartSettings\"\r\n\t\t(chartSeriesCreated)=\"chartSeriesCreated($event)\"\r\n\t\t[displayOption]=\"displayOption\"\r\n\t\t[showTooltip]=\"false\"\r\n\t\t(enginePopulated)=\"afterEnginePopulate($event)\"\r\n\t\t(beforeExport)=\"beforeExport($event)\"\r\n\t>\r\n\t</ejs-pivotview>\r\n\r\n\t<div class=\"pivotfieldlist-control\">\r\n\t\t<ejs-pivotfieldlist\r\n\t\t\t[id]=\"portlet.newId\"\r\n\t\t\t#pivotfieldlist\r\n\t\t\thidden=\"true\"\r\n\t\t\tenableValueSorting=\"true\"\r\n\t\t\tshowFieldList=\"true\"\r\n\t\t\tallowCalculatedField=\"true\"\r\n\t\t\tallowDeferLayoutUpdate=\"true\"\r\n\t\t\trenderMode=\"Popup\"\r\n\t\t\t(enginePopulated)=\"afterPopulate($event)\"\r\n\t\t\t(memberEditorOpen)=\"onMemberEditorOpen($event)\"\r\n\t\t\t(enginePopulating)=\"enginePopulating($event)\"\r\n\t\t\t(aggregateCellInfo)=\"aggregateCellInfo($event)\"\r\n\t\t\t(fieldDrop)=\"onFieldDrop($event)\"\r\n\t\t\t(actionComplete)=\"actionComplete($event)\"\r\n\t\t\t(actionBegin)=\"actionBegin($event)\"\r\n\t\t\t(calculatedFieldCreate)=\"calculatedFieldCreate($event)\"\r\n\t\t\t(load)=\"onLoad()\"\r\n\t\t\t(created)=\"created($event)\"\r\n\t\t>\r\n\t\t</ejs-pivotfieldlist>\r\n\t</div>\r\n\t<div class=\"full-box-mask\" *ngIf=\"pageLoading\">\r\n\t\t<mat-spinner\r\n\t\t\tstyle=\"z-index: 999\"\r\n\t\t\tmode=\"indeterminate\"\r\n\t\t\t[diameter]=\"24\"\r\n\t\t></mat-spinner>\r\n\t</div>\r\n</div>\r\n",
                 providers: [
                     ToolbarService,
@@ -45600,10 +45691,10 @@ class GadgetTransposeComponent {
 }
 GadgetTransposeComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-gadget-transpose",
+                selector: "rs-gadget-transpose",
                 template: "<div class=\"e-bigger transpose-grid\">\r\n\t<!-- \u865A\u62DF\u6EDA\u52A8\u4F1A\u5F15\u8D77\u4E0D\u663E\u793A\u7684bug -->\r\n\t<!-- [enableVirtualization]=\"true\" -->\r\n\t<ejs-grid\r\n\t\t#grid\r\n\t\t[dataSource]=\"data\"\r\n\t\t[rowRenderingMode]=\"rowMode\"\r\n\t\t[allowExcelExport]=\"true\"\r\n\t\tshowColumnChooser=\"true\"\r\n\t\tenableAdaptiveUI=\"true\"\r\n\t\twidth=\"100%\"\r\n\t\theight=\"100%\"\r\n\t\t[columnChooserSettings]=\"ColumnChooserSettings\"\r\n\t\t(queryCellInfo)=\"customiseCell($event)\"\r\n\t\t(actionComplete)=\"actionComplete($event)\"\r\n\t\t[allowPdfExport]=\"true\"\r\n\t\t[allowExcelExport]=\"true\"\r\n\t\t(excelQueryCellInfo)=\"exportQueryCellInfo($event)\"\r\n\t>\r\n\t\t<e-columns>\r\n\t\t\t<e-column\r\n\t\t\t\t*ngFor=\"let item of fields\"\r\n\t\t\t\t[field]=\"item.colName\"\r\n\t\t\t\t[headerText]=\"\r\n\t\t\t\t\titem.displayName\r\n\t\t\t\t\t\t? item.displayName\r\n\t\t\t\t\t\t: item.addtionName\r\n\t\t\t\t\t\t? item.langValue + ' ' + item.addtionName\r\n\t\t\t\t\t\t: item.langValue\r\n\t\t\t\t\"\r\n\t\t\t\t[visible]=\"item.visible\"\r\n\t\t\t\twidth=\"200\"\r\n\t\t\t\t[type]=\"\r\n\t\t\t\t\titem.dataType === 'number' ||\r\n\t\t\t\t\titem.dataType === 'percentNum' ||\r\n\t\t\t\t\titem.dataType === 'percent'\r\n\t\t\t\t\t\t? 'number'\r\n\t\t\t\t\t\t: item.dataType == 'date' || item.dataType == 'datetime'\r\n\t\t\t\t\t\t? 'date'\r\n\t\t\t\t\t\t: null\r\n\t\t\t\t\"\r\n\t\t\t\tclipMode=\"EllipsisWithTooltip\"\r\n\t\t\t\t[format]=\"getFormatOptions(item.colName)\"\r\n\t\t\t>\r\n\t\t\t</e-column>\r\n\t\t</e-columns>\r\n\t</ejs-grid>\r\n\t<div class=\"full-box-mask\" *ngIf=\"pageLoading\">\r\n\t\t<mat-spinner\r\n\t\t\tstyle=\"z-index: 999\"\r\n\t\t\tmode=\"indeterminate\"\r\n\t\t\t[diameter]=\"24\"\r\n\t\t></mat-spinner>\r\n\t</div>\r\n</div>\r\n",
                 providers: [ExcelExportService, ColumnChooserService, VirtualScrollService],
-                styles: [".e-bigger{height:100%}.transpose-grid{padding:0 12px 12px}.transpose-grid .e-gridcontent{border:0}.transpose-grid .e-gridcontent .e-content{width:100%!important}.transpose-grid .e-gridcontent .e-content .e-rowcell{padding:0 12px 0 55%!important;font-family:Arial;font-size:11px!important;font-weight:400;line-height:14px;background-color:#fff!important}td{border-bottom:1px solid #eff1f3!important;display:inline-block;height:35px!important;font-size:13px!important;text-align:right}td::before{color:#0b5496!important;text-align:left}:host::ng-deep .e-bigger ejs-grid{height:100%!important}:host::ng-deep .e-ccdlg.e-cc.e-control.e-dialog.e-lib.e-popup.e-popup-open{max-height:300px!important;z-index:100000!important;top:14px!important;left:200px!important}:host::ng-deep .e-bigger .e-dialog .e-dlg-header-content,:host::ng-deep .e-bigger.e-dialog .e-dlg-header-content{padding:14px!important}:host::ng-deep .e-bigger .e-dialog .e-dlg-header,:host::ng-deep .e-bigger.e-dialog .e-dlg-header{font-size:16px!important}:host::ng-deep .e-grid .e-ccdlg li.e-cclist{padding:7px 0!important;height:37px!important}:host::ng-deep .e-checkbox-wrapper .e-label,:host::ng-deep .e-css.e-checkbox-wrapper .e-label{font-size:14px!important}:host::ng-deep .e-btn,:host::ng-deep .e-css.e-btn{font-size:14px!important;padding:4px 8px!important}:host::ng-deep .e-dialog .e-footer-content{padding:14px!important}:host::ng-deep .e-bigger .e-float-input input,:host::ng-deep .e-bigger .e-float-input input.e-input,:host::ng-deep .e-bigger .e-float-input.e-control-wrapper input,:host::ng-deep .e-bigger .e-float-input.e-control-wrapper input.e-input,:host::ng-deep .e-bigger .e-input-group input,:host::ng-deep .e-bigger .e-input-group input.e-input,:host::ng-deep .e-bigger .e-input-group.e-control-wrapper input,:host::ng-deep .e-bigger .e-input-group.e-control-wrapper input.e-input,:host::ng-deep .e-float-input.e-bigger input,:host::ng-deep .e-float-input.e-bigger input.e-input,:host::ng-deep .e-float-input.e-control-wrapper.e-bigger input,:host::ng-deep .e-float-input.e-control-wrapper.e-bigger input.e-input,:host::ng-deep .e-input-group.e-bigger input,:host::ng-deep .e-input-group.e-bigger input.e-input,:host::ng-deep .e-input-group.e-control-wrapper.e-bigger input,:host::ng-deep .e-input-group.e-control-wrapper.e-bigger input.e-input,:host::ng-deep input.e-input.e-bigger{height:29px!important}:host::ng-deep .e-label{margin-left:7px!important}:host::ng-deep .e-grid .e-ccdlg .e-cc-contentdiv{height:121px!important}::ng-deep kt-gadget-transpose .e-grid .e-dialog.e-ccdlg{width:300px!important}::ng-deep kt-gadget-transpose .e-checkbox-wrapper.e-css{width:100%!important}::ng-deep kt-gadget-transpose .e-grid .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell).odd{background:#f8fafb!important}::ng-deep kt-gadget-transpose .e-grid .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell).even{background:#fff!important}::ng-deep kt-gadget-transpose .e-spin-show,::ng-deep kt-gadget-transpose .e-spinner-pane{display:none!important}::ng-deep kt-gadget-transpose .e-label{display:inline-block!important;width:calc(100% - 30px)!important;overflow:hidden!important;white-space:nowrap!important;height:16px!important;line-height:16px!important}::ng-deep kt-gadget-transpose .e-table .e-row{height:auto!important}::ng-deep kt-gadget-transpose .e-table .e-row td{height:22px!important;line-height:22px!important;color:#44566c!important;border-color:#eff1f3!important}::ng-deep kt-gadget-transpose .e-table .e-row td.first-cell{border-top:1px solid #eff1f3!important}::ng-deep kt-gadget-transpose .e-table .e-row td::before{top:0!important;left:0!important;color:#44566c!important}::ng-deep kt-gadget-transpose .e-table .odd{background:#f8fafb!important}::ng-deep kt-gadget-transpose .e-table .even{background:#fff!important}::ng-deep kt-gadget-transpose .e-bigger .e-grid.e-row-responsive .e-gridcontent .e-row,::ng-deep kt-gadget-transpose .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-row,::ng-deep kt-gadget-transpose .e-bigger.e-grid.e-row-responsive .e-gridcontent .e-row,::ng-deep kt-gadget-transpose .e-bigger.e-grid.e-row-responsive .e-summarycontent .e-row{border-color:#eff1f3!important}::ng-deep kt-gadget-transpose .full-screen-mask{width:100%;height:100%;background:rgba(0,0,0,.3);position:absolute;top:0;left:0;z-index:9999}::ng-deep kt-gadget-transpose mat-spinner.mat-spinner.mat-progress-spinner.mat-primary.mat-progress-spinner-indeterminate-animation{position:absolute;top:45%;left:47.5%!important;transform:translate(-25%,-25%)}"]
+                styles: [".e-bigger{height:100%}.transpose-grid{padding:0 12px 12px}.transpose-grid .e-gridcontent{border:0}.transpose-grid .e-gridcontent .e-content{width:100%!important}.transpose-grid .e-gridcontent .e-content .e-rowcell{padding:0 12px 0 55%!important;font-family:Arial;font-size:11px!important;font-weight:400;line-height:14px;background-color:#fff!important}td{border-bottom:1px solid #eff1f3!important;display:inline-block;height:35px!important;font-size:13px!important;text-align:right}td::before{color:#0b5496!important;text-align:left}:host::ng-deep .e-bigger ejs-grid{height:100%!important}:host::ng-deep .e-ccdlg.e-cc.e-control.e-dialog.e-lib.e-popup.e-popup-open{max-height:300px!important;z-index:100000!important;top:14px!important;left:200px!important}:host::ng-deep .e-bigger .e-dialog .e-dlg-header-content,:host::ng-deep .e-bigger.e-dialog .e-dlg-header-content{padding:14px!important}:host::ng-deep .e-bigger .e-dialog .e-dlg-header,:host::ng-deep .e-bigger.e-dialog .e-dlg-header{font-size:16px!important}:host::ng-deep .e-grid .e-ccdlg li.e-cclist{padding:7px 0!important;height:37px!important}:host::ng-deep .e-checkbox-wrapper .e-label,:host::ng-deep .e-css.e-checkbox-wrapper .e-label{font-size:14px!important}:host::ng-deep .e-btn,:host::ng-deep .e-css.e-btn{font-size:14px!important;padding:4px 8px!important}:host::ng-deep .e-dialog .e-footer-content{padding:14px!important}:host::ng-deep .e-bigger .e-float-input input,:host::ng-deep .e-bigger .e-float-input input.e-input,:host::ng-deep .e-bigger .e-float-input.e-control-wrapper input,:host::ng-deep .e-bigger .e-float-input.e-control-wrapper input.e-input,:host::ng-deep .e-bigger .e-input-group input,:host::ng-deep .e-bigger .e-input-group input.e-input,:host::ng-deep .e-bigger .e-input-group.e-control-wrapper input,:host::ng-deep .e-bigger .e-input-group.e-control-wrapper input.e-input,:host::ng-deep .e-float-input.e-bigger input,:host::ng-deep .e-float-input.e-bigger input.e-input,:host::ng-deep .e-float-input.e-control-wrapper.e-bigger input,:host::ng-deep .e-float-input.e-control-wrapper.e-bigger input.e-input,:host::ng-deep .e-input-group.e-bigger input,:host::ng-deep .e-input-group.e-bigger input.e-input,:host::ng-deep .e-input-group.e-control-wrapper.e-bigger input,:host::ng-deep .e-input-group.e-control-wrapper.e-bigger input.e-input,:host::ng-deep input.e-input.e-bigger{height:29px!important}:host::ng-deep .e-label{margin-left:7px!important}:host::ng-deep .e-grid .e-ccdlg .e-cc-contentdiv{height:121px!important}::ng-deep rs-gadget-transpose .e-grid .e-dialog.e-ccdlg{width:300px!important}::ng-deep rs-gadget-transpose .e-checkbox-wrapper.e-css{width:100%!important}::ng-deep rs-gadget-transpose .e-grid .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell).odd{background:#f8fafb!important}::ng-deep rs-gadget-transpose .e-grid .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell).even{background:#fff!important}::ng-deep rs-gadget-transpose .e-spin-show,::ng-deep rs-gadget-transpose .e-spinner-pane{display:none!important}::ng-deep rs-gadget-transpose .e-label{display:inline-block!important;width:calc(100% - 30px)!important;overflow:hidden!important;white-space:nowrap!important;height:16px!important;line-height:16px!important}::ng-deep rs-gadget-transpose .e-table .e-row{height:auto!important}::ng-deep rs-gadget-transpose .e-table .e-row td{height:22px!important;line-height:22px!important;color:#44566c!important;border-color:#eff1f3!important}::ng-deep rs-gadget-transpose .e-table .e-row td.first-cell{border-top:1px solid #eff1f3!important}::ng-deep rs-gadget-transpose .e-table .e-row td::before{top:0!important;left:0!important;color:#44566c!important}::ng-deep rs-gadget-transpose .e-table .odd{background:#f8fafb!important}::ng-deep rs-gadget-transpose .e-table .even{background:#fff!important}::ng-deep rs-gadget-transpose .e-bigger .e-grid.e-row-responsive .e-gridcontent .e-row,::ng-deep rs-gadget-transpose .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-row,::ng-deep rs-gadget-transpose .e-bigger.e-grid.e-row-responsive .e-gridcontent .e-row,::ng-deep rs-gadget-transpose .e-bigger.e-grid.e-row-responsive .e-summarycontent .e-row{border-color:#eff1f3!important}::ng-deep rs-gadget-transpose .full-screen-mask{width:100%;height:100%;background:rgba(0,0,0,.3);position:absolute;top:0;left:0;z-index:9999}::ng-deep rs-gadget-transpose mat-spinner.mat-spinner.mat-progress-spinner.mat-primary.mat-progress-spinner-indeterminate-animation{position:absolute;top:45%;left:47.5%!important;transform:translate(-25%,-25%)}"]
             }] }
 ];
 /** @nocollapse */
@@ -45961,10 +46052,10 @@ class PortletTypeNewComponent {
 }
 PortletTypeNewComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-portlet-type-new",
+                selector: "rs-portlet-type-new",
                 template: "<div class=\"portlet-row row\">\r\n\t<ng-container *ngFor=\"let item of portletList\">\r\n\t\t<div\r\n\t\t\tclass=\"portlet-wrapper\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\titem.portletCode == 'financialTable' ? getFinancialType() : true\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"portlet\"\r\n\t\t\t\t[class]=\"item.portletCode + '-type'\"\r\n\t\t\t\tmatTooltip=\"{{ setTooltip(item) }}\"\r\n\t\t\t\t[ngClass]=\"{\r\n\t\t\t\t\tenabled: item.portletCode !== type,\r\n\t\t\t\t\tselected: item.portletCode === type,\r\n\t\t\t\t\tdisabled:\r\n\t\t\t\t\t\tdisabledHistoricalIRR &&\r\n\t\t\t\t\t\titem.portletCode === 'historicalIRR'\r\n\t\t\t\t}\"\r\n\t\t\t\t(click)=\"selectPortletType(item.portletCode)\"\r\n\t\t\t></div>\r\n\t\t\t<div\r\n\t\t\t\t*ngIf=\"item.portletCode === 'newchart'\"\r\n\t\t\t\tstyle=\"position: relative; top: -4px\"\r\n\t\t\t\tclass=\"portlet-label\"\r\n\t\t\t></div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".portlet-row{display:flex;margin-bottom:10px;justify-content:left;padding:0 16px}.portlet-row .portlet-wrapper{width:20%;display:flex;flex-direction:column;align-items:center;cursor:pointer;margin-bottom:10px;margin-top:5px}.portlet-row .portlet-wrapper .portlet{width:32px;height:32px;background-color:#44566c}.portlet-row .portlet-wrapper .portlet.enabled{background-color:#fff}.portlet-row .portlet-wrapper .portlet.disabled{background-color:#fff;opacity:.4;pointer-events:none}.portlet-row .portlet-wrapper .portlet.selected{background-color:#5867dd;border:5px solid rgba(80,102,181,.5);border-radius:2px}.portlet-row .portlet-wrapper .portlet.selected.table-type{background-image:url(../../../../assets/img/dashboard_icon/table-3-white.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.selected.transpose-type{background-image:url(../../../../assets/img/dashboard_icon/transpose-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.pivot-type{background-image:url(../../../../assets/img/dashboard_icon/pivot-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.newchart-type{background-image:url(../../../../assets/img/dashboard_icon/pivot-chart-active.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.geo-type{background-image:url(../../../../assets/img/dashboard_icon/geo-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.pie-type{background-image:url(../../../../assets/img/dashboard_icon/pie-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.bar-type{background-image:url(../../../../assets/img/dashboard_icon/bar-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.column-type{background-image:url(../../../../assets/img/dashboard_icon/pivot_column_active.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.newcolumn-type{background-image:url(../../../../assets/img/dashboard_icon/column-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.line-type{background-image:url(../../../../assets/img/dashboard_icon/pivot_line_active.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.newline-type{background-image:url(../../../../assets/img/dashboard_icon/trade-up-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.area-type{background-image:url(../../../../assets/img/dashboard_icon/area-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.multiSeries-type{background-image:url(../../../../assets/img/dashboard_icon/multi-series-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.radar-type{background-image:url(../../../../assets/img/dashboard_icon/radar-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.financialTable-type{background-image:url(../../../../assets/img/dashboard_icon/ftable-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.newcolumnline-type{background-image:url(../../../../assets/img/dashboard_icon/chart-combined-active.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.historicalIRR-type{background-image:url(../../../../assets/img/dashboard_icon/historic-IRR-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.table-type{background-image:url(../../../../assets/img/dashboard_icon/table-3.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.transpose-type{background-image:url(../../../../assets/img/dashboard_icon/transpose.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.pivot-type{background-image:url(../../../../assets/img/dashboard_icon/pivot.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%;width:32px!important;height:32px!important;position:relative}.portlet-row .portlet-wrapper .portlet.newchart-type{background-image:url(../../../../assets/img/dashboard_icon/pivot-chart.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%;width:32px!important;height:32px!important;position:relative}.portlet-row .portlet-wrapper .portlet.geo-type{background-image:url(../../../../assets/img/dashboard_icon/geo.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.pie-type{background-image:url(../../../../assets/img/dashboard_icon/pie.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.bar-type{background-image:url(../../../../assets/img/dashboard_icon/bar.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.column-type{background-image:url(../../../../assets/img/dashboard_icon/pivot_column.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%;width:28px!important;height:28px!important;position:relative;top:1px}.portlet-row .portlet-wrapper .portlet.newcolumn-type{background-image:url(../../../../assets/img/dashboard_icon/column.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.line-type{background-image:url(../../../../assets/img/dashboard_icon/pivot_line.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%;width:28px!important;height:28px!important;position:relative;top:1px}.portlet-row .portlet-wrapper .portlet.newline-type{background-image:url(../../../../assets/img/dashboard_icon/trade-up.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.area-type{background-image:url(../../../../assets/img/dashboard_icon/area.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.multiSeries-type{background-image:url(../../../../assets/img/dashboard_icon/multi-series.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.radar-type{background-image:url(../../../../assets/img/dashboard_icon/radar.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.financialTable-type{background-image:url(../../../../assets/img/dashboard_icon/ftable.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.newcolumnline-type{background-image:url(../../../../assets/img/dashboard_icon/chart-combined.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.historicalIRR-type{background-image:url(../../../../assets/img/dashboard_icon/historic-IRR.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet-label{width:100%;text-align:center;font-weight:500;color:#44566c;font-size:12px}"]
+                styles: [".portlet-row{display:flex;margin-bottom:10px;justify-content:left;padding:0 16px}.portlet-row .portlet-wrapper{width:20%;display:flex;flex-direction:column;align-items:center;cursor:pointer;margin-bottom:10px;margin-top:5px}.portlet-row .portlet-wrapper .portlet{width:32px;height:32px;background-color:#44566c}.portlet-row .portlet-wrapper .portlet.enabled{background-color:#fff}.portlet-row .portlet-wrapper .portlet.disabled{background-color:#fff;opacity:.4;pointer-events:none}.portlet-row .portlet-wrapper .portlet.selected{background-color:#5867dd;border:5px solid rgba(80,102,181,.5);border-radius:2px}.portlet-row .portlet-wrapper .portlet.selected.table-type{background-image:url(../../assets/img/dashboard_icon/table-3-white.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.selected.transpose-type{background-image:url(../../assets/img/dashboard_icon/transpose-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.pivot-type{background-image:url(../../assets/img/dashboard_icon/pivot-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.newchart-type{background-image:url(../../assets/img/dashboard_icon/pivot-chart-active.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.geo-type{background-image:url(../../assets/img/dashboard_icon/geo-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.pie-type{background-image:url(../../assets/img/dashboard_icon/pie-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.bar-type{background-image:url(../../assets/img/dashboard_icon/bar-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.column-type{background-image:url(../../assets/img/dashboard_icon/pivot_column_active.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.newcolumn-type{background-image:url(../../assets/img/dashboard_icon/column-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.line-type{background-image:url(../../assets/img/dashboard_icon/pivot_line_active.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.newline-type{background-image:url(../../assets/img/dashboard_icon/trade-up-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.area-type{background-image:url(../../assets/img/dashboard_icon/area-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.multiSeries-type{background-image:url(../../assets/img/dashboard_icon/multi-series-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.radar-type{background-image:url(../../assets/img/dashboard_icon/radar-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.financialTable-type{background-image:url(../../assets/img/dashboard_icon/ftable-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.newcolumnline-type{background-image:url(../../assets/img/dashboard_icon/chart-combined-active.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.selected.historicalIRR-type{background-image:url(../../assets/img/dashboard_icon/historic-IRR-white.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.table-type{background-image:url(../../assets/img/dashboard_icon/table-3.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.transpose-type{background-image:url(../../assets/img/dashboard_icon/transpose.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.pivot-type{background-image:url(../../assets/img/dashboard_icon/pivot.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%;width:32px!important;height:32px!important;position:relative}.portlet-row .portlet-wrapper .portlet.newchart-type{background-image:url(../../assets/img/dashboard_icon/pivot-chart.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%;width:32px!important;height:32px!important;position:relative}.portlet-row .portlet-wrapper .portlet.geo-type{background-image:url(../../assets/img/dashboard_icon/geo.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.pie-type{background-image:url(../../assets/img/dashboard_icon/pie.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.bar-type{background-image:url(../../assets/img/dashboard_icon/bar.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.column-type{background-image:url(../../assets/img/dashboard_icon/pivot_column.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%;width:28px!important;height:28px!important;position:relative;top:1px}.portlet-row .portlet-wrapper .portlet.newcolumn-type{background-image:url(../../assets/img/dashboard_icon/column.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.line-type{background-image:url(../../assets/img/dashboard_icon/pivot_line.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%;width:28px!important;height:28px!important;position:relative;top:1px}.portlet-row .portlet-wrapper .portlet.newline-type{background-image:url(../../assets/img/dashboard_icon/trade-up.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.area-type{background-image:url(../../assets/img/dashboard_icon/area.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.multiSeries-type{background-image:url(../../assets/img/dashboard_icon/multi-series.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.radar-type{background-image:url(../../assets/img/dashboard_icon/radar.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.financialTable-type{background-image:url(../../assets/img/dashboard_icon/ftable.svg);background-repeat:no-repeat;background-position:center;background-size:100% 100%}.portlet-row .portlet-wrapper .portlet.newcolumnline-type{background-image:url(../../assets/img/dashboard_icon/chart-combined.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet.historicalIRR-type{background-image:url(../../assets/img/dashboard_icon/historic-IRR.svg);background-repeat:no-repeat;background-position:center}.portlet-row .portlet-wrapper .portlet-label{width:100%;text-align:center;font-weight:500;color:#44566c;font-size:12px}"]
             }] }
 ];
 /** @nocollapse */
@@ -46931,7 +47022,7 @@ class FieldFilterComponent {
 }
 FieldFilterComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-field-filter",
+                selector: "rs-field-filter",
                 template: "<div class=\"content\">\r\n\t<div class=\"search\">\r\n\t\t<mat-form-field appearance=\"outline\" class=\"search-box\">\r\n\t\t\t<span matPrefix>\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tmatSuffix\r\n\t\t\t\t\tstyle=\"transform: scale(1.25); line-height: 1.8\"\r\n\t\t\t\t\t>search</mat-icon\r\n\t\t\t\t>\r\n\t\t\t</span>\r\n\t\t\t<input\r\n\t\t\t\ttype=\"search\"\r\n\t\t\t\tmatInput\r\n\t\t\t\t[placeholder]=\"\r\n\t\t\t\t\ttranslation.SEARCH ? translation.SEARCH : 'SEARCH' + '...'\r\n\t\t\t\t\"\r\n\t\t\t\t(keyup)=\"filter($event.target.value)\"\r\n\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t[(ngModel)]=\"searchText\"\r\n\t\t\t/>\r\n\t\t</mat-form-field>\r\n\t</div>\r\n\t<div class=\"fields\">\r\n\t\t<div\r\n\t\t\tclass=\"field clearfix\"\r\n\t\t\t*ngFor=\"let item of fields; let i = index\"\r\n\t\t\t[hidden]=\"item.isHidden\"\r\n\t\t>\r\n\t\t\t<p class=\"field-name fl\">\r\n\t\t\t\t{{\r\n\t\t\t\t\titem.displayName\r\n\t\t\t\t\t\t? item.displayName\r\n\t\t\t\t\t\t: item.addtionName\r\n\t\t\t\t\t\t? item.langValue + \" \" + item.addtionName\r\n\t\t\t\t\t\t: item.langValue\r\n\t\t\t\t}}\r\n\t\t\t</p>\r\n\t\t\t<img\r\n\t\t\t\tclass=\"icon-filter fr\"\r\n\t\t\t\t(click)=\"openfilter(i, item)\"\r\n\t\t\t\tsrc=\"../../../../assets/img/dashboard_icon/{{\r\n\t\t\t\t\titem.selectAll ? 'gadget-filters' : 'gadget-filters-light'\r\n\t\t\t\t}}.svg\"\r\n\t\t\t/>\r\n\r\n\t\t\t<div\r\n\t\t\t\tclass=\"filter-pop fl\"\r\n\t\t\t\t*ngIf=\"showFilter_i === i && showPop_filter\"\r\n\t\t\t>\r\n\t\t\t\t<div class=\"search-bar\">\r\n\t\t\t\t\t<mat-form-field\r\n\t\t\t\t\t\tappearance=\"outline\"\r\n\t\t\t\t\t\tclass=\"search-\"\r\n\t\t\t\t\t\tstyle=\"\r\n\t\t\t\t\t\t\tdisplay: block;\r\n\t\t\t\t\t\t\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span matPrefix>\r\n\t\t\t\t\t\t\t<mat-icon matSuffix style=\"transform: scale(1.25)\"\r\n\t\t\t\t\t\t\t\t>search\r\n\t\t\t\t\t\t\t</mat-icon>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\ttype=\"search\"\r\n\t\t\t\t\t\t\tmatInput\r\n\t\t\t\t\t\t\t[placeholder]=\"\r\n\t\t\t\t\t\t\t\ttranslation.SEARCH\r\n\t\t\t\t\t\t\t\t\t? translation.SEARCH\r\n\t\t\t\t\t\t\t\t\t: 'SEARCH' + '...'\r\n\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\tstyle=\"font-size: 1.25rem\"\r\n\t\t\t\t\t\t\tclass=\"mat-form-field mat-form-field-fluid\"\r\n\t\t\t\t\t\t\t[(ngModel)]=\"childFilterSearchText\"\r\n\t\t\t\t\t\t\t(input)=\"searchFilter($event.target.value, item)\"\r\n\t\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t<mat-checkbox\r\n\t\t\t\t\t\tclass=\"select-all\"\r\n\t\t\t\t\t\t[(ngModel)]=\"item.selectAll\"\r\n\t\t\t\t\t\t(change)=\"filterSelectAll($event.checked, item)\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{\r\n\t\t\t\t\t\t\ttranslation.SELECT_ALL\r\n\t\t\t\t\t\t\t\t? translation.SELECT_ALL\r\n\t\t\t\t\t\t\t\t: \".SELECT_ALL\"\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t</mat-checkbox>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"filter-content\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"filter-\"\r\n\t\t\t\t\t\t*ngFor=\"let obj of item.dataList ? item.dataList : []\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<mat-checkbox\r\n\t\t\t\t\t\t\t[checked]=\"obj.checked\"\r\n\t\t\t\t\t\t\t(change)=\"\r\n\t\t\t\t\t\t\t\tfilterChecked($event.checked, item, obj.value)\r\n\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{{\r\n\t\t\t\t\t\t\t\tobj.value || obj.value === 0\r\n\t\t\t\t\t\t\t\t\t? item.dataType === \"date\" ||\r\n\t\t\t\t\t\t\t\t\t  item.dataType === \"dataTime\"\r\n\t\t\t\t\t\t\t\t\t\t? pbf.formatFilterDate(obj.value)\r\n\t\t\t\t\t\t\t\t\t\t: item.dataType === \"string\"\r\n\t\t\t\t\t\t\t\t\t\t? obj.value\r\n\t\t\t\t\t\t\t\t\t\t: (obj.value | number : \"1.2-2\")\r\n\t\t\t\t\t\t\t\t\t: \"Empty\"\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t</mat-checkbox>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n",
                 styles: ["@charset \"UTF-8\";.content{width:100%;height:100%;padding:10px 20px 10px 10px;background-color:#f7f8fa}.content .search-box{background:#fff;width:calc(100% - 8px);height:40px;margin-left:8px}.content .fields{height:calc(100% - 50px);overflow:auto;margin-top:5px}.content .fields::-webkit-scrollbar{width:5px;height:8px;background:#fff;position:static;z-index:999}.content .fields::-webkit-scrollbar-thumb{background:#eaedf0}.content .fields .field{display:flex;align-items:center;justify-content:space-between;position:relative;height:30px}.content .fields .field p.field-name{display:block;margin:0;padding-left:8px;line-height:30px;font-size:13px;color:#44566c;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .fields .field img{display:block;margin:0 8px;cursor:pointer}.content .fields .field .filter-pop{width:100%;height:300px;padding:12px;background:#fff!important;z-index:99;overflow:hidden;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.5;letter-spacing:normal;color:#212529;position:absolute;top:30px;border-radius:5px;border:1px solid #eaedf0}.content .fields .field .filter-pop .search-bar{margin-bottom:5px}.content .fields .field .filter-pop .filter-content{height:calc(100% - 89px);overflow:auto}.content .fields .field .filter-pop .filter-content::-webkit-scrollbar{width:5px;height:8px;background:#fff;position:static;z-index:999}.content .fields .field .filter-pop .filter-content::-webkit-scrollbar-thumb{background:#eaedf0}.content .fields .field .filter-pop .filter-content .filter-{height:30px;line-height:30px}.content .fields .field .type-pop{padding:10px;min-width:140px;background:#fff!important;z-index:99;overflow:hidden;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.5;letter-spacing:normal;color:#212529;position:absolute;top:30px;right:22px;border-radius:5px;border:1px solid #eaedf0}.content .fields .field .type-pop .filter-{height:30px;line-height:30px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:rgba(216,220,230,.12)}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border:none!important}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{padding-top:.09em!important}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix .mat-input-element{font-family:Arial!important;font-size:11px!important;font-weight:400!important;color:#44566c!important}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0!important}:host::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,:host::ng-deep .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background{background-color:#0081ff}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-prefix{color:#646c9a}:host::ng-deep .mat-form-field-flex{border:none!important}:host::ng-deep .mat-checkbox-inner-container{border:1px solid #d6d6d6;border-radius:3px}:host::ng-deep .search-bar .mat-form-field-flex{background-color:#f8fafb}"]
             }] }
@@ -47549,7 +47640,7 @@ class BarChartsComponent {
 }
 BarChartsComponent.decorators = [
     { type: Component, args: [{
-                selector: "kt-bar-charts",
+                selector: "rs-bar-charts",
                 template: "<div\r\n\tclass=\"content\"\r\n\t#chartContent\r\n\tid=\"chartContent\"\r\n\t*ngIf=\"dataColumn || dataLine\"\r\n>\r\n\t<ejs-chart\r\n\t\t#chart\r\n\t\tstyle=\"display: block\"\r\n\t\talign=\"center\"\r\n\t\t[title]=\"title\"\r\n\t\t[primaryXAxis]=\"primaryXAxis\"\r\n\t\t[primaryYAxis]=\"primaryYAxis\"\r\n\t\t[tooltip]=\"tooltip\"\r\n\t\t(load)=\"load($event)\"\r\n\t\t[chartArea]=\"chartArea\"\r\n\t\twidth=\"100%\"\r\n\t\t[height]=\"height\"\r\n\t\t[width]=\"width\"\r\n\t\t[zoomSettings]=\"zoomSettings\"\r\n\t\t[legendSettings]=\"legend\"\r\n\t\t[palettes]=\"customPalette\"\r\n\t\t(pointRender)=\"onPointRender($event)\"\r\n\t\t[enableAnimation]=\"false\"\r\n\t\t(textRender)=\"textRender($event)\"\r\n\t\t(tooltipRender)=\"tooltipRender($event)\"\r\n\t\t(axisLabelRender)=\"OnChartAxisLabeRender($event)\"\r\n\t>\r\n\t\t<e-series-collection>\r\n\t\t\t<ng-container *ngIf=\"dataColumn && dataColumn.length > 0\">\r\n\t\t\t\t<e-series\r\n\t\t\t\t\t*ngFor=\"let i of column\"\r\n\t\t\t\t\t[dataSource]=\"dataColumn\"\r\n\t\t\t\t\ttype=\"Column\"\r\n\t\t\t\t\t[xName]=\"i.xName\"\r\n\t\t\t\t\t[marker]=\"marker\"\r\n\t\t\t\t\t[yName]=\"i.yName\"\r\n\t\t\t\t\t[name]=\"i.name\"\r\n\t\t\t\t\tcolumnSpacing=\"0.1\"\r\n\t\t\t\t\twidth=\"2\"\r\n\t\t\t\t\topacity=\"1\"\r\n\t\t\t\t>\r\n\t\t\t\t</e-series>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<!-- \u53EA\u9009\u7B2C\u4E8C\u4E2AY\u8F74\u65F6\uFF0C\u663E\u793A\u6298\u7EBF\u56FE -->\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\tdataLine &&\r\n\t\t\t\t\tdataLine.length > 0 &&\r\n\t\t\t\t\tdataColumn &&\r\n\t\t\t\t\tdataColumn.length <= 0\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t\t<e-series\r\n\t\t\t\t\t*ngFor=\"let i of columnLine\"\r\n\t\t\t\t\t[dataSource]=\"dataLine\"\r\n\t\t\t\t\ttype=\"Spline\"\r\n\t\t\t\t\t[xName]=\"i.xName\"\r\n\t\t\t\t\t[yName]=\"i.yName\"\r\n\t\t\t\t\t[marker]=\"marker\"\r\n\t\t\t\t\t[name]=\"i.name\"\r\n\t\t\t\t\tcolumnSpacing=\"0.1\"\r\n\t\t\t\t\twidth=\"2\"\r\n\t\t\t\t\topacity=\"1\"\r\n\t\t\t\t>\r\n\t\t\t\t</e-series>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<!-- \u5982\u679C\u4E24\u4E2AY\u8F74\u662F\u540C\u7C7B\u578B\u6570\u636E\uFF0C\u5171\u7528\u4E00\u4E2AY\u8F74 -->\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\tdataColumn &&\r\n\t\t\t\t\tdataColumn.length > 0 &&\r\n\t\t\t\t\tdataLine &&\r\n\t\t\t\t\tdataLine.length > 0 &&\r\n\t\t\t\t\tcolumnType == lineType\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t\t<e-series\r\n\t\t\t\t\t*ngFor=\"let i of columnLine\"\r\n\t\t\t\t\t[dataSource]=\"dataLine\"\r\n\t\t\t\t\ttype=\"Spline\"\r\n\t\t\t\t\t[xName]=\"i.xName\"\r\n\t\t\t\t\t[yName]=\"i.yName\"\r\n\t\t\t\t\t[name]=\"i.name\"\r\n\t\t\t\t\t[marker]=\"marker\"\r\n\t\t\t\t\tcolumnSpacing=\"0.1\"\r\n\t\t\t\t\twidth=\"2\"\r\n\t\t\t\t\topacity=\"1\"\r\n\t\t\t\t>\r\n\t\t\t\t</e-series>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<!-- \u5982\u679C\u4E24\u4E2AY\u8F74\u662F\u4E0D\u540C\u7C7B\u578B\u6570\u636E\uFF0C\u5C31\u7528\u4E24\u4E2AY\u8F74 -->\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\tdataColumn &&\r\n\t\t\t\t\tdataColumn.length > 0 &&\r\n\t\t\t\t\tdataLine &&\r\n\t\t\t\t\tdataLine.length > 0 &&\r\n\t\t\t\t\tcolumnType != lineType\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t\t<e-series\r\n\t\t\t\t\t*ngFor=\"let i of columnLine\"\r\n\t\t\t\t\t[dataSource]=\"dataLine\"\r\n\t\t\t\t\ttype=\"Spline\"\r\n\t\t\t\t\t[xName]=\"i.xName\"\r\n\t\t\t\t\t[yName]=\"i.yName\"\r\n\t\t\t\t\t[marker]=\"marker\"\r\n\t\t\t\t\t[name]=\"i.name\"\r\n\t\t\t\t\twidth=\"2\"\r\n\t\t\t\t\topacity=\"1\"\r\n\t\t\t\t\tyAxisName=\"yAxis2\"\r\n\t\t\t\t>\r\n\t\t\t\t</e-series>\r\n\t\t\t</ng-container>\r\n\t\t</e-series-collection>\r\n\r\n\t\t<e-axes>\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\tdataColumn &&\r\n\t\t\t\t\tdataColumn.length > 0 &&\r\n\t\t\t\t\tdataLine &&\r\n\t\t\t\t\tdataLine.length > 0\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t\t<e-axis\r\n\t\t\t\t\topposedPosition=\"true\"\r\n\t\t\t\t\trowIndex=\"0\"\r\n\t\t\t\t\tname=\"yAxis2\"\r\n\t\t\t\t\t[majorGridLines]=\"{ width: 0 }\"\r\n\t\t\t\t\ttitle=\"\"\r\n\t\t\t\t\t[lineStyle]=\"{ width: 0 }\"\r\n\t\t\t\t\t[majorTickLines]=\"{ width: 0 }\"\r\n\t\t\t\t>\r\n\t\t\t\t</e-axis>\r\n\t\t\t</ng-container>\r\n\t\t</e-axes>\r\n\t</ejs-chart>\r\n\t<div class=\"full-box-mask\" *ngIf=\"pageLoading\">\r\n\t\t<mat-spinner\r\n\t\t\tstyle=\"z-index: 999\"\r\n\t\t\tmode=\"indeterminate\"\r\n\t\t\t[diameter]=\"24\"\r\n\t\t></mat-spinner>\r\n\t</div>\r\n</div>\r\n",
                 encapsulation: ViewEncapsulation.None,
                 providers: [DecimalPipe],