raise-common-lib 0.0.224-beta → 0.0.226

package/esm2015/lib/dashboard/pane-group-new.component.js

@@ -2682,7 +2682,7 @@ PaneGroupNewComponent.decorators = [
                 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}"]
+                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__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}"]
             }] }
 ];
 /** @nocollapse */

package/esm2015/lib/dashboard/sidebar-iconlist/field-filter/field-filter.component.js

@@ -918,7 +918,7 @@ FieldFilterComponent.decorators = [
     { type: Component, args: [{
                 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}"]
+                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 .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 .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}"]
             }] }
 ];
 /** @nocollapse */

package/esm2015/lib/dashboard/sidebar-iconlist/field-format/field-format.component.js

@@ -911,7 +911,7 @@ FieldFormatComponent.decorators = [
     { type: Component, args: [{
                 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 .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 */

package/esm2015/lib/layout/drawer/index.component.js

@@ -224,7 +224,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{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 */

package/esm5/lib/dashboard/pane-group-new.component.js

@@ -3056,7 +3056,7 @@ var PaneGroupNewComponent = /** @class */ (function () {
                     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}"]
+                    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__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}"]
                 }] }
     ];
     /** @nocollapse */

package/esm5/lib/dashboard/sidebar-iconlist/field-filter/field-filter.component.js

@@ -1037,7 +1037,7 @@ var FieldFilterComponent = /** @class */ (function () {
         { type: Component, args: [{
                     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}"]
+                    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 .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 .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}"]
                 }] }
     ];
     /** @nocollapse */

package/esm5/lib/dashboard/sidebar-iconlist/field-format/field-format.component.js

@@ -1089,7 +1089,7 @@ var FieldFormatComponent = /** @class */ (function () {
         { type: Component, args: [{
                     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 .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 */

package/esm5/lib/layout/drawer/index.component.js

@@ -286,7 +286,7 @@ var DrawerComponent = /** @class */ (function () {
         { 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{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 */