raise-common-lib-new 0.0.36 → 0.0.38

package/fesm2022/raise-common-lib-new.mjs

@@ -2,19 +2,19 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Component, ViewChild, Input, Output, HostBinding, Injectable, Inject, ContentChild, HostListener, ViewContainerRef, ViewChildren, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { times, debounce } from 'lodash';
 import * as i1 from '@angular/common';
-import { DatePipe, CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i2 from '@syncfusion/ej2-angular-grids';
-import { GridComponent, GridModule, PagerModule, GridAllModule, PageService, SortService, FilterService, ExcelExportService, EditService, ResizeService, ToolbarService, ColumnChooserService, AggregateService, ColumnMenuService, DetailRowService, SelectionService, GroupService } from '@syncfusion/ej2-angular-grids';
+import { GridComponent, GridModule, PagerModule, GridAllModule, PageService, RowDDService, SortService, FilterService, ExcelExportService, EditService, ResizeService, ToolbarService, ColumnChooserService, AggregateService, ColumnMenuService, DetailRowService, SelectionService, GroupService } from '@syncfusion/ej2-angular-grids';
 import * as i3 from '@syncfusion/ej2-angular-charts';
 import { ChartAllModule, AccumulationChartAllModule, RangeNavigatorAllModule, AccumulationChartModule, PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
 import * as i2$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i2$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i3$1 from '@angular/material/icon';
+import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { __decorate } from 'tslib';
-import { Subject, BehaviorSubject } from 'rxjs';
+import { Subject } from 'rxjs';
 import * as i1$2 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i1$1 from '@angular/material/dialog';
@@ -22,33 +22,38 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2$3 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
-import * as i3$2 from '@syncfusion/ej2-angular-inputs';
+import * as i2$4 from '@syncfusion/ej2-angular-inputs';
 import { TextBoxModule, ColorPickerModule, UploaderModule, NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
-import * as i2$4 from '@syncfusion/ej2-angular-navigations';
-import { CarouselAllModule, ToolbarModule, TabModule } from '@syncfusion/ej2-angular-navigations';
+import * as i2$5 from '@syncfusion/ej2-angular-navigations';
+import { CarouselAllModule, ToolbarModule, TabModule, TreeViewModule } from '@syncfusion/ej2-angular-navigations';
 import * as i1$3 from '@angular/router';
-import { NavigationEnd } from '@angular/router';
+import { NavigationEnd, NavigationStart } from '@angular/router';
 import { filter } from 'rxjs/operators';
-import * as i5 from '@syncfusion/ej2-angular-popups';
+import * as i5 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i5$1 from '@syncfusion/ej2-angular-popups';
 import { TooltipModule, DialogModule } from '@syncfusion/ej2-angular-popups';
 import { setCulture, L10n } from '@syncfusion/ej2-base';
 import * as i1$4 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
-import * as i3$3 from '@syncfusion/ej2-angular-splitbuttons';
-import { DropDownButtonModule, SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
-import * as i3$4 from '@syncfusion/ej2-angular-buttons';
+import * as i3$1 from '@syncfusion/ej2-angular-splitbuttons';
+import { DropDownButton, DropDownButtonModule, SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
+import * as i3$2 from '@syncfusion/ej2-angular-buttons';
 import { SwitchModule, CheckBoxModule, RadioButtonModule, ButtonModule } from '@syncfusion/ej2-angular-buttons';
 import { Query } from '@syncfusion/ej2-data';
-import * as i3$5 from '@syncfusion/ej2-angular-calendars';
+import moment from 'moment';
+import * as i4$1 from '@syncfusion/ej2-angular-calendars';
 import { DatePickerModule, DateRangePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';
-import * as i5$1 from '@syncfusion/ej2-angular-dropdowns';
+import * as i6 from '@syncfusion/ej2-angular-dropdowns';
 import { DropDownListModule, DropDownTreeModule, MultiSelectAllModule, AutoCompleteModule, ListBoxModule } from '@syncfusion/ej2-angular-dropdowns';
-import * as i2$5 from '@angular/platform-browser';
+import * as i1$5 from 'raise-common-lib';
+import * as i7 from '@syncfusion/ej2-angular-richtexteditor';
+import { RichTextEditorAllModule, HtmlEditorService, ToolbarService as ToolbarService$2 } from '@syncfusion/ej2-angular-richtexteditor';
+import * as i2$6 from '@angular/platform-browser';
 import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';
 import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
 import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
 import { PdfViewerModule, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService as ToolbarService$1, NavigationService, TextSearchService, TextSelectionService, PrintService } from '@syncfusion/ej2-angular-pdfviewer';
-import { RichTextEditorAllModule, HtmlEditorService, ToolbarService as ToolbarService$2 } from '@syncfusion/ej2-angular-richtexteditor';
 
 class CommonGridComponent {
     ref;
@@ -71,6 +76,7 @@ class CommonGridComponent {
     columnTemplate;
     pageSettings;
     allowPaging = true;
+    allowRowDragAndDrop = false;
     clipMode = "EllipsisWithTooltip";
     checkBoxWidth = 32; // col 数量过少的时候，check宽度会拉伸，这时候设置null
     childGrid;
@@ -107,6 +113,7 @@ class CommonGridComponent {
     actionComplete = new EventEmitter();
     rowSelected = new EventEmitter();
     rowDeselected = new EventEmitter();
+    rowDeselecting = new EventEmitter();
     onContextMenu = new EventEmitter();
     actionHandler = new EventEmitter();
     queryCellInfo = new EventEmitter();
@@ -116,6 +123,9 @@ class CommonGridComponent {
     dataBound = new EventEmitter();
     exportQueryCellInfo = new EventEmitter();
     rowSelecting = new EventEmitter();
+    rowDrop = new EventEmitter();
+    rowDrag = new EventEmitter();
+    rowDragStart = new EventEmitter();
     selectId = [];
     startPaging = false;
     indexList = [];
@@ -176,9 +186,18 @@ class CommonGridComponent {
     _exportQueryCellInfo(args) {
         this.exportQueryCellInfo.emit(args);
     }
+    _rowDrag(args) {
+        this.rowDrag.emit(args);
+    }
+    _rowDragStart(args) {
+        this.rowDragStart.emit(args);
+    }
     _recordDoubleClick($event) {
         this.recordDoubleClick.emit($event);
     }
+    _rowDeselecting($event) {
+        this.rowDeselecting.emit($event);
+    }
     /**
        * [selectionSettings]="{ checkboxOnly: true }"
          [showCheckBox]="true"
@@ -360,6 +379,9 @@ class CommonGridComponent {
     getSelectedRecords() {
         return this.grid.getSelectedRecords();
     }
+    onRowDrop(e) {
+        this.rowDrop.emit(e);
+    }
     _rowDataBound($event) {
         if (this.disableSystemRow && $event.data && $event.data.IsSystem) {
             $event.row.classList.add("e-disabled");
@@ -417,11 +439,11 @@ class CommonGridComponent {
         this.ref && this.ref.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommonGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommonGridComponent, selector: "rs-common-grid", inputs: { showCheckBox: "showCheckBox", loaded: "loaded", hiddenLoaded: "hiddenLoaded", authorized: "authorized", selectedDiffKey: "selectedDiffKey", gridHeight: "gridHeight", gridId: "gridId", resizeSettings: "resizeSettings", filterSettings: "filterSettings", template: "template", fields: "fields", dataSource: "dataSource", editSettings: "editSettings", columnTemplate: "columnTemplate", pageSettings: "pageSettings", allowPaging: "allowPaging", clipMode: "clipMode", checkBoxWidth: "checkBoxWidth", childGrid: "childGrid", frozenColumns: "frozenColumns", columnChooserSettings: "columnChooserSettings", contextMenuItems: "contextMenuItems", selectionSettings: "selectionSettings", alwaysShowCheckbox: "alwaysShowCheckbox", defaultRecord: "defaultRecord", disableSystemRow: "disableSystemRow" }, outputs: { recordDoubleClick: "recordDoubleClick", actionComplete: "actionComplete", rowSelected: "rowSelected", rowDeselected: "rowDeselected", onContextMenu: "onContextMenu", actionHandler: "actionHandler", queryCellInfo: "queryCellInfo", recordClick: "recordClick", actionBegin: "actionBegin", rowDataBound: "rowDataBound", dataBound: "dataBound", exportQueryCellInfo: "exportQueryCellInfo", rowSelecting: "rowSelecting" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ejs-grid\r\n\t#grid\r\n\t[id]=\"gridId\"\r\n\t[ngClass]=\"{\r\n\t\t'hide-Check-box': !alwaysShowCheckbox,\r\n\t\t'grid-loading': className === 'grid-loading'\r\n\t}\"\r\n\t[dataSource]=\"dataSource\"\r\n\t[allowPaging]=\"allowPaging && pageSettings\"\r\n\t[allowResizing]=\"true\"\r\n\t[pageSettings]=\"pageSettings\"\r\n\t[showColumnMenu]=\"true\"\r\n\t[allowSorting]=\"true\"\r\n\t[allowFiltering]=\"true\"\r\n\t[allowExcelExport]=\"true\"\r\n\t[filterSettings]=\"filterSettings\"\r\n\t[resizeSettings]=\"resizeSettings\"\r\n\t[allowSelection]=\"true\"\r\n\t[editSettings]=\"editSettings\"\r\n\t[childGrid]=\"childGrid\"\r\n\t[contextMenuItems]=\"\r\n\t\tdataSource && dataSource.length ? contextMenuItems : null\r\n\t\"\r\n\t[selectionSettings]=\"selectionSettings\"\r\n\t(recordClick)=\"_recordClick($event)\"\r\n\t(recordDoubleClick)=\"_recordDoubleClick($event)\"\r\n\t(actionBegin)=\"_actionBegin($event)\"\r\n\t(actionComplete)=\"_actionHandler($event)\"\r\n\t(rowSelected)=\"_rowSelected($event)\"\r\n\t(rowDeselected)=\"_rowDeselected($event)\"\r\n\tstyle=\"border: none\"\r\n\t(contextMenuClick)=\"_onContextMenu($event)\"\r\n\t(contextMenuOpen)=\"contextMenuOpen($event)\"\r\n\t(queryCellInfo)=\"customiseCell($event)\"\r\n\t(dataBound)=\"_dataBound($event)\"\r\n\t(rowDataBound)=\"_rowDataBound($event)\"\r\n\t(rowSelecting)=\"_rowSelecting($event)\"\r\n\t(excelQueryCellInfo)=\"_exportQueryCellInfo($event)\"\r\n\t(load)=\"_load()\"\r\n\t[frozenColumns]=\"frozenColumns\"\r\n\t[columnChooserSettings]=\"columnChooserSettings\"\r\n\r\n>\r\n\t<e-columns>\r\n\t\t<e-column\r\n\t\t\t*ngIf=\"showCheckBox\"\r\n\t\t\ttype=\"checkbox\"\r\n\t\t\t[width]=\"checkBoxWidth\"\r\n\t\t\t[showColumnMenu]=\"false\"\r\n\t\t\t[allowResizing]=\"false\"\r\n\t\t></e-column>\r\n\t\t<e-column\r\n\t\t\t*ngFor=\"let item of fields; trackBy: trackByFn; let last = last\"\r\n\t\t\t[field]=\"item.columnName\"\r\n\t\t\t[filter]=\"item.filter ? item.filter : { type: 'CheckBox' }\"\r\n\t\t\t[customAttributes]=\"\r\n\t\t\t\titem.colName === 'entityUserList' ||\r\n\t\t\t\titem.colName === 'kycProgress'\r\n\t\t\t\t\t? { class: 'hideColumnFilterClass' }\r\n\t\t\t\t\t: {}\r\n\t\t\t\"\r\n\t\t\t[headerText]=\"item.columnDisplayName\"\r\n\t\t\t[textAlign]=\"item.textAlign\"\r\n\t\t\t[showColumnMenu]=\"item.showColumnMenu === undefined ? true : false\"\r\n\t\t\t[allowFiltering]=\"item.allowFiltering === undefined ? true : false\"\r\n\t\t\t[allowSorting]=\"item.allowSorting === undefined ? true : false\"\r\n\t\t\t[editType]=\"item.editType\"\r\n\t\t\t[validationRules]=\"item.validationRules\"\r\n\t\t\t[type]=\"item.dataType || 'string'\"\r\n\t\t\t[width]=\"item.width\"\r\n\t\t\t[minWidth]=\"item.minWidth\"\r\n\t\t\t[format]=\"item.format\"\r\n\t\t\t[visible]=\"item.visible\"\r\n\t\t\t[template]=\"item.showTemplate ? columnTemplate : undefined\"\r\n\t\t\t[clipMode]=\"\r\n\t\t\t\titem.clipMode\r\n\t\t\t\t\t? item.clipMode\r\n\t\t\t\t\t: clipMode || 'EllipsisWithTooltip'\r\n\t\t\t\"\r\n\t\t\t[sortComparer]=\"item.dateComparer\"\r\n\t\t\t[allowResizing]=\"!last\"\r\n\t\t>\r\n\t\t</e-column>\r\n\t</e-columns>\r\n</ejs-grid>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GridComponent, selector: "ejs-grid", inputs: ["adaptiveUIMode", "aggregates", "allowExcelExport", "allowFiltering", "allowGrouping", "allowKeyboard", "allowMultiSorting", "allowPaging", "allowPdfExport", "allowReordering", "allowResizing", "allowRowDragAndDrop", "allowSelection", "allowSorting", "allowTextWrap", "autoFit", "childGrid", "clipMode", "columnChooserSettings", "columnMenuItems", "columnQueryMode", "columns", "contextMenuItems", "cssClass", "currencyCode", "currentAction", "currentViewData", "dataSource", "detailTemplate", "editSettings", "ej2StatePersistenceVersion", "emptyRecordTemplate", "enableAdaptiveUI", "enableAltRow", "enableAutoFill", "enableColumnVirtualization", "enableHeaderFocus", "enableHover", "enableHtmlSanitizer", "enableImmutableMode", "enableInfiniteScrolling", "enablePersistence", "enableRtl", "enableStickyHeader", "enableVirtualMaskRow", "enableVirtualization", "exportGrids", "filterSettings", "frozenColumns", "frozenRows", "gridLines", "groupSettings", "height", "hierarchyPrintMode", "infiniteScrollSettings", "loadingIndicator", "locale", "pageSettings", "pagerTemplate", "parentDetails", "printMode", "query", "queryString", "resizeSettings", "rowDropSettings", "rowHeight", "rowRenderingMode", "rowTemplate", "searchSettings", "selectedRowIndex", "selectionSettings", "showColumnChooser", "showColumnMenu", "showHider", "sortSettings", "textWrapSettings", "toolbar", "toolbarTemplate", "width"], outputs: ["actionBegin", "actionComplete", "actionFailure", "batchAdd", "batchCancel", "batchDelete", "beforeAutoFill", "beforeBatchAdd", "beforeBatchDelete", "beforeBatchSave", "beforeCopy", "beforeDataBound", "beforeExcelExport", "beforeOpenAdaptiveDialog", "beforeOpenColumnChooser", "beforePaste", "beforePdfExport", "beforePrint", "beginEdit", "cellDeselected", "cellDeselecting", "cellEdit", "cellSave", "cellSaved", "cellSelected", "cellSelecting", "checkBoxChange", "columnDataStateChange", "columnDeselected", "columnDeselecting", "columnDrag", "columnDragStart", "columnDrop", "columnMenuClick", "columnMenuOpen", "columnSelected", "columnSelecting", "commandClick", "contextMenuClick", "contextMenuOpen", "created", "dataBound", "dataSourceChanged", "dataStateChange", "destroyed", "detailDataBound", "excelAggregateQueryCellInfo", "excelExportComplete", "excelHeaderQueryCellInfo", "excelQueryCellInfo", "exportDetailDataBound", "exportDetailTemplate", "exportGroupCaption", "headerCellInfo", "keyPressed", "lazyLoadGroupCollapse", "lazyLoadGroupExpand", "load", "pdfAggregateQueryCellInfo", "pdfExportComplete", "pdfHeaderQueryCellInfo", "pdfQueryCellInfo", "printComplete", "queryCellInfo", "recordClick", "recordDoubleClick", "resizeStart", "resizeStop", "resizing", "rowDataBound", "rowDeselected", "rowDeselecting", "rowDrag", "rowDragStart", "rowDragStartHelper", "rowDrop", "rowSelected", "rowSelecting", "toolbarClick", "dataSourceChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "ejs-grid>e-columns>e-column", inputs: ["allowEditing", "allowFiltering", "allowGrouping", "allowReordering", "allowResizing", "allowSearching", "allowSorting", "autoFit", "clipMode", "columns", "commands", "customAttributes", "dataSource", "defaultValue", "disableHtmlEncode", "displayAsCheckBox", "edit", "editTemplate", "editType", "enableGroupByFormat", "field", "filter", "filterBarTemplate", "filterTemplate", "foreignKeyField", "foreignKeyValue", "format", "formatter", "freeze", "headerTemplate", "headerText", "headerTextAlign", "headerValueAccessor", "hideAtMedia", "index", "isFrozen", "isIdentity", "isPrimaryKey", "lockColumn", "maxWidth", "minWidth", "showColumnMenu", "showInColumnChooser", "sortComparer", "template", "textAlign", "type", "uid", "validationRules", "valueAccessor", "visible", "width"] }, { kind: "directive", type: i2.ColumnsDirective, selector: "ejs-grid>e-columns" }, { kind: "directive", type: i2.AggregateColumnDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns>e-column", inputs: ["columnName", "customAggregate", "field", "footerTemplate", "format", "groupCaptionTemplate", "groupFooterTemplate", "type"] }, { kind: "directive", type: i2.AggregateColumnsDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns" }, { kind: "directive", type: i3.ColumnDirective, selector: "e-columns>e-column", inputs: ["border", "width"] }, { kind: "directive", type: i3.ColumnsDirective, selector: "ejs-chart>e-columns" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommonGridComponent, selector: "rs-common-grid", inputs: { showCheckBox: "showCheckBox", loaded: "loaded", hiddenLoaded: "hiddenLoaded", authorized: "authorized", selectedDiffKey: "selectedDiffKey", gridHeight: "gridHeight", gridId: "gridId", resizeSettings: "resizeSettings", filterSettings: "filterSettings", template: "template", fields: "fields", dataSource: "dataSource", editSettings: "editSettings", columnTemplate: "columnTemplate", pageSettings: "pageSettings", allowPaging: "allowPaging", allowRowDragAndDrop: "allowRowDragAndDrop", clipMode: "clipMode", checkBoxWidth: "checkBoxWidth", childGrid: "childGrid", frozenColumns: "frozenColumns", columnChooserSettings: "columnChooserSettings", contextMenuItems: "contextMenuItems", selectionSettings: "selectionSettings", alwaysShowCheckbox: "alwaysShowCheckbox", defaultRecord: "defaultRecord", disableSystemRow: "disableSystemRow" }, outputs: { recordDoubleClick: "recordDoubleClick", actionComplete: "actionComplete", rowSelected: "rowSelected", rowDeselected: "rowDeselected", rowDeselecting: "rowDeselecting", onContextMenu: "onContextMenu", actionHandler: "actionHandler", queryCellInfo: "queryCellInfo", recordClick: "recordClick", actionBegin: "actionBegin", rowDataBound: "rowDataBound", dataBound: "dataBound", exportQueryCellInfo: "exportQueryCellInfo", rowSelecting: "rowSelecting", rowDrop: "rowDrop", rowDrag: "rowDrag", rowDragStart: "rowDragStart" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ejs-grid\r\n  #grid\r\n  [id]=\"gridId\"\r\n  [ngClass]=\"{\r\n    'hide-Check-box': !alwaysShowCheckbox,\r\n    'grid-loading': className === 'grid-loading'\r\n  }\"\r\n  [dataSource]=\"dataSource\"\r\n  [allowPaging]=\"allowPaging && pageSettings\"\r\n  [allowResizing]=\"true\"\r\n  [pageSettings]=\"pageSettings\"\r\n  [showColumnMenu]=\"true\"\r\n  [allowSorting]=\"true\"\r\n  [allowFiltering]=\"true\"\r\n  [allowExcelExport]=\"true\"\r\n  [allowRowDragAndDrop]=\"allowRowDragAndDrop\"\r\n  [filterSettings]=\"filterSettings\"\r\n  [resizeSettings]=\"resizeSettings\"\r\n  [allowSelection]=\"true\"\r\n  [editSettings]=\"editSettings\"\r\n  [childGrid]=\"childGrid\"\r\n  [contextMenuItems]=\"dataSource && dataSource.length ? contextMenuItems : null\"\r\n  [selectionSettings]=\"selectionSettings\"\r\n  (recordClick)=\"_recordClick($event)\"\r\n  (recordDoubleClick)=\"_recordDoubleClick($event)\"\r\n  (actionBegin)=\"_actionBegin($event)\"\r\n  (actionComplete)=\"_actionHandler($event)\"\r\n  (rowSelected)=\"_rowSelected($event)\"\r\n  (rowDeselecting)=\"_rowDeselecting($event)\"\r\n  (rowDeselected)=\"_rowDeselected($event)\"\r\n  style=\"border: none\"\r\n  (contextMenuClick)=\"_onContextMenu($event)\"\r\n  (contextMenuOpen)=\"contextMenuOpen($event)\"\r\n  (queryCellInfo)=\"customiseCell($event)\"\r\n  (dataBound)=\"_dataBound($event)\"\r\n  (rowDataBound)=\"_rowDataBound($event)\"\r\n  (rowSelecting)=\"_rowSelecting($event)\"\r\n  (excelQueryCellInfo)=\"_exportQueryCellInfo($event)\"\r\n  (rowDrop)=\"onRowDrop($event)\"\r\n  (rowDragStart)=\"_rowDragStart($event)\"\r\n  (rowDrag)=\"_rowDrag($event)\"\r\n  (load)=\"_load()\"\r\n  [frozenColumns]=\"frozenColumns\"\r\n  [columnChooserSettings]=\"columnChooserSettings\"\r\n>\r\n  <e-columns>\r\n    <e-column\r\n      *ngIf=\"showCheckBox\"\r\n      type=\"checkbox\"\r\n      [width]=\"checkBoxWidth\"\r\n      [minWidth]=\"checkBoxWidth\"\r\n      [showColumnMenu]=\"false\"\r\n      [allowResizing]=\"false\"\r\n    ></e-column>\r\n    <e-column\r\n      *ngFor=\"let item of fields; trackBy: trackByFn; let last = last\"\r\n      [field]=\"item.columnName\"\r\n      [filter]=\"item.filter ? item.filter : { type: 'CheckBox' }\"\r\n      [customAttributes]=\"\r\n        item.colName === 'entityUserList' || item.colName === 'kycProgress'\r\n          ? { class: 'hideColumnFilterClass' }\r\n          : {}\r\n      \"\r\n      [headerText]=\"item.columnDisplayName\"\r\n      [textAlign]=\"item.textAlign\"\r\n      [showColumnMenu]=\"item.showColumnMenu === undefined ? true : false\"\r\n      [allowFiltering]=\"item.allowFiltering === undefined ? true : false\"\r\n      [allowSorting]=\"item.allowSorting === undefined ? true : false\"\r\n      [editType]=\"item.editType\"\r\n      [validationRules]=\"item.validationRules\"\r\n      [type]=\"item.dataType || 'string'\"\r\n      [width]=\"item.width\"\r\n      [minWidth]=\"item.minWidth\"\r\n      [format]=\"item.format\"\r\n      [visible]=\"item.visible\"\r\n      [template]=\"item.showTemplate ? columnTemplate : undefined\"\r\n      [clipMode]=\"\r\n        item.clipMode ? item.clipMode : clipMode || 'EllipsisWithTooltip'\r\n      \"\r\n      [sortComparer]=\"item.dateComparer || null\"\r\n      [allowResizing]=\"!last\"\r\n    >\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GridComponent, selector: "ejs-grid", inputs: ["adaptiveUIMode", "aggregates", "allowExcelExport", "allowFiltering", "allowGrouping", "allowKeyboard", "allowMultiSorting", "allowPaging", "allowPdfExport", "allowReordering", "allowResizing", "allowRowDragAndDrop", "allowSelection", "allowSorting", "allowTextWrap", "autoFit", "childGrid", "clipMode", "columnChooserSettings", "columnMenuItems", "columnQueryMode", "columns", "contextMenuItems", "cssClass", "currencyCode", "currentAction", "currentViewData", "dataSource", "detailTemplate", "editSettings", "ej2StatePersistenceVersion", "emptyRecordTemplate", "enableAdaptiveUI", "enableAltRow", "enableAutoFill", "enableColumnVirtualization", "enableHeaderFocus", "enableHover", "enableHtmlSanitizer", "enableImmutableMode", "enableInfiniteScrolling", "enablePersistence", "enableRtl", "enableStickyHeader", "enableVirtualMaskRow", "enableVirtualization", "exportGrids", "filterSettings", "frozenColumns", "frozenRows", "gridLines", "groupSettings", "height", "hierarchyPrintMode", "infiniteScrollSettings", "loadingIndicator", "locale", "pageSettings", "pagerTemplate", "parentDetails", "printMode", "query", "queryString", "resizeSettings", "rowDropSettings", "rowHeight", "rowRenderingMode", "rowTemplate", "searchSettings", "selectedRowIndex", "selectionSettings", "showColumnChooser", "showColumnMenu", "showHider", "sortSettings", "textWrapSettings", "toolbar", "toolbarTemplate", "width"], outputs: ["actionBegin", "actionComplete", "actionFailure", "batchAdd", "batchCancel", "batchDelete", "beforeAutoFill", "beforeBatchAdd", "beforeBatchDelete", "beforeBatchSave", "beforeCopy", "beforeDataBound", "beforeExcelExport", "beforeOpenAdaptiveDialog", "beforeOpenColumnChooser", "beforePaste", "beforePdfExport", "beforePrint", "beginEdit", "cellDeselected", "cellDeselecting", "cellEdit", "cellSave", "cellSaved", "cellSelected", "cellSelecting", "checkBoxChange", "columnDataStateChange", "columnDeselected", "columnDeselecting", "columnDrag", "columnDragStart", "columnDrop", "columnMenuClick", "columnMenuOpen", "columnSelected", "columnSelecting", "commandClick", "contextMenuClick", "contextMenuOpen", "created", "dataBound", "dataSourceChanged", "dataStateChange", "destroyed", "detailDataBound", "excelAggregateQueryCellInfo", "excelExportComplete", "excelHeaderQueryCellInfo", "excelQueryCellInfo", "exportDetailDataBound", "exportDetailTemplate", "exportGroupCaption", "headerCellInfo", "keyPressed", "lazyLoadGroupCollapse", "lazyLoadGroupExpand", "load", "pdfAggregateQueryCellInfo", "pdfExportComplete", "pdfHeaderQueryCellInfo", "pdfQueryCellInfo", "printComplete", "queryCellInfo", "recordClick", "recordDoubleClick", "resizeStart", "resizeStop", "resizing", "rowDataBound", "rowDeselected", "rowDeselecting", "rowDrag", "rowDragStart", "rowDragStartHelper", "rowDrop", "rowSelected", "rowSelecting", "toolbarClick", "dataSourceChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "ejs-grid>e-columns>e-column", inputs: ["allowEditing", "allowFiltering", "allowGrouping", "allowReordering", "allowResizing", "allowSearching", "allowSorting", "autoFit", "clipMode", "columns", "commands", "customAttributes", "dataSource", "defaultValue", "disableHtmlEncode", "displayAsCheckBox", "edit", "editTemplate", "editType", "enableGroupByFormat", "field", "filter", "filterBarTemplate", "filterTemplate", "foreignKeyField", "foreignKeyValue", "format", "formatter", "freeze", "headerTemplate", "headerText", "headerTextAlign", "headerValueAccessor", "hideAtMedia", "index", "isFrozen", "isIdentity", "isPrimaryKey", "lockColumn", "maxWidth", "minWidth", "showColumnMenu", "showInColumnChooser", "sortComparer", "template", "textAlign", "type", "uid", "validationRules", "valueAccessor", "visible", "width"] }, { kind: "directive", type: i2.ColumnsDirective, selector: "ejs-grid>e-columns" }, { kind: "directive", type: i2.AggregateColumnDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns>e-column", inputs: ["columnName", "customAggregate", "field", "footerTemplate", "format", "groupCaptionTemplate", "groupFooterTemplate", "type"] }, { kind: "directive", type: i2.AggregateColumnsDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns" }, { kind: "directive", type: i3.ColumnDirective, selector: "e-columns>e-column", inputs: ["border", "width"] }, { kind: "directive", type: i3.ColumnsDirective, selector: "ejs-chart>e-columns" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommonGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-common-grid", template: "<ejs-grid\r\n\t#grid\r\n\t[id]=\"gridId\"\r\n\t[ngClass]=\"{\r\n\t\t'hide-Check-box': !alwaysShowCheckbox,\r\n\t\t'grid-loading': className === 'grid-loading'\r\n\t}\"\r\n\t[dataSource]=\"dataSource\"\r\n\t[allowPaging]=\"allowPaging && pageSettings\"\r\n\t[allowResizing]=\"true\"\r\n\t[pageSettings]=\"pageSettings\"\r\n\t[showColumnMenu]=\"true\"\r\n\t[allowSorting]=\"true\"\r\n\t[allowFiltering]=\"true\"\r\n\t[allowExcelExport]=\"true\"\r\n\t[filterSettings]=\"filterSettings\"\r\n\t[resizeSettings]=\"resizeSettings\"\r\n\t[allowSelection]=\"true\"\r\n\t[editSettings]=\"editSettings\"\r\n\t[childGrid]=\"childGrid\"\r\n\t[contextMenuItems]=\"\r\n\t\tdataSource && dataSource.length ? contextMenuItems : null\r\n\t\"\r\n\t[selectionSettings]=\"selectionSettings\"\r\n\t(recordClick)=\"_recordClick($event)\"\r\n\t(recordDoubleClick)=\"_recordDoubleClick($event)\"\r\n\t(actionBegin)=\"_actionBegin($event)\"\r\n\t(actionComplete)=\"_actionHandler($event)\"\r\n\t(rowSelected)=\"_rowSelected($event)\"\r\n\t(rowDeselected)=\"_rowDeselected($event)\"\r\n\tstyle=\"border: none\"\r\n\t(contextMenuClick)=\"_onContextMenu($event)\"\r\n\t(contextMenuOpen)=\"contextMenuOpen($event)\"\r\n\t(queryCellInfo)=\"customiseCell($event)\"\r\n\t(dataBound)=\"_dataBound($event)\"\r\n\t(rowDataBound)=\"_rowDataBound($event)\"\r\n\t(rowSelecting)=\"_rowSelecting($event)\"\r\n\t(excelQueryCellInfo)=\"_exportQueryCellInfo($event)\"\r\n\t(load)=\"_load()\"\r\n\t[frozenColumns]=\"frozenColumns\"\r\n\t[columnChooserSettings]=\"columnChooserSettings\"\r\n\r\n>\r\n\t<e-columns>\r\n\t\t<e-column\r\n\t\t\t*ngIf=\"showCheckBox\"\r\n\t\t\ttype=\"checkbox\"\r\n\t\t\t[width]=\"checkBoxWidth\"\r\n\t\t\t[showColumnMenu]=\"false\"\r\n\t\t\t[allowResizing]=\"false\"\r\n\t\t></e-column>\r\n\t\t<e-column\r\n\t\t\t*ngFor=\"let item of fields; trackBy: trackByFn; let last = last\"\r\n\t\t\t[field]=\"item.columnName\"\r\n\t\t\t[filter]=\"item.filter ? item.filter : { type: 'CheckBox' }\"\r\n\t\t\t[customAttributes]=\"\r\n\t\t\t\titem.colName === 'entityUserList' ||\r\n\t\t\t\titem.colName === 'kycProgress'\r\n\t\t\t\t\t? { class: 'hideColumnFilterClass' }\r\n\t\t\t\t\t: {}\r\n\t\t\t\"\r\n\t\t\t[headerText]=\"item.columnDisplayName\"\r\n\t\t\t[textAlign]=\"item.textAlign\"\r\n\t\t\t[showColumnMenu]=\"item.showColumnMenu === undefined ? true : false\"\r\n\t\t\t[allowFiltering]=\"item.allowFiltering === undefined ? true : false\"\r\n\t\t\t[allowSorting]=\"item.allowSorting === undefined ? true : false\"\r\n\t\t\t[editType]=\"item.editType\"\r\n\t\t\t[validationRules]=\"item.validationRules\"\r\n\t\t\t[type]=\"item.dataType || 'string'\"\r\n\t\t\t[width]=\"item.width\"\r\n\t\t\t[minWidth]=\"item.minWidth\"\r\n\t\t\t[format]=\"item.format\"\r\n\t\t\t[visible]=\"item.visible\"\r\n\t\t\t[template]=\"item.showTemplate ? columnTemplate : undefined\"\r\n\t\t\t[clipMode]=\"\r\n\t\t\t\titem.clipMode\r\n\t\t\t\t\t? item.clipMode\r\n\t\t\t\t\t: clipMode || 'EllipsisWithTooltip'\r\n\t\t\t\"\r\n\t\t\t[sortComparer]=\"item.dateComparer\"\r\n\t\t\t[allowResizing]=\"!last\"\r\n\t\t>\r\n\t\t</e-column>\r\n\t</e-columns>\r\n</ejs-grid>\r\n" }]
+            args: [{ selector: "rs-common-grid", template: "<ejs-grid\r\n  #grid\r\n  [id]=\"gridId\"\r\n  [ngClass]=\"{\r\n    'hide-Check-box': !alwaysShowCheckbox,\r\n    'grid-loading': className === 'grid-loading'\r\n  }\"\r\n  [dataSource]=\"dataSource\"\r\n  [allowPaging]=\"allowPaging && pageSettings\"\r\n  [allowResizing]=\"true\"\r\n  [pageSettings]=\"pageSettings\"\r\n  [showColumnMenu]=\"true\"\r\n  [allowSorting]=\"true\"\r\n  [allowFiltering]=\"true\"\r\n  [allowExcelExport]=\"true\"\r\n  [allowRowDragAndDrop]=\"allowRowDragAndDrop\"\r\n  [filterSettings]=\"filterSettings\"\r\n  [resizeSettings]=\"resizeSettings\"\r\n  [allowSelection]=\"true\"\r\n  [editSettings]=\"editSettings\"\r\n  [childGrid]=\"childGrid\"\r\n  [contextMenuItems]=\"dataSource && dataSource.length ? contextMenuItems : null\"\r\n  [selectionSettings]=\"selectionSettings\"\r\n  (recordClick)=\"_recordClick($event)\"\r\n  (recordDoubleClick)=\"_recordDoubleClick($event)\"\r\n  (actionBegin)=\"_actionBegin($event)\"\r\n  (actionComplete)=\"_actionHandler($event)\"\r\n  (rowSelected)=\"_rowSelected($event)\"\r\n  (rowDeselecting)=\"_rowDeselecting($event)\"\r\n  (rowDeselected)=\"_rowDeselected($event)\"\r\n  style=\"border: none\"\r\n  (contextMenuClick)=\"_onContextMenu($event)\"\r\n  (contextMenuOpen)=\"contextMenuOpen($event)\"\r\n  (queryCellInfo)=\"customiseCell($event)\"\r\n  (dataBound)=\"_dataBound($event)\"\r\n  (rowDataBound)=\"_rowDataBound($event)\"\r\n  (rowSelecting)=\"_rowSelecting($event)\"\r\n  (excelQueryCellInfo)=\"_exportQueryCellInfo($event)\"\r\n  (rowDrop)=\"onRowDrop($event)\"\r\n  (rowDragStart)=\"_rowDragStart($event)\"\r\n  (rowDrag)=\"_rowDrag($event)\"\r\n  (load)=\"_load()\"\r\n  [frozenColumns]=\"frozenColumns\"\r\n  [columnChooserSettings]=\"columnChooserSettings\"\r\n>\r\n  <e-columns>\r\n    <e-column\r\n      *ngIf=\"showCheckBox\"\r\n      type=\"checkbox\"\r\n      [width]=\"checkBoxWidth\"\r\n      [minWidth]=\"checkBoxWidth\"\r\n      [showColumnMenu]=\"false\"\r\n      [allowResizing]=\"false\"\r\n    ></e-column>\r\n    <e-column\r\n      *ngFor=\"let item of fields; trackBy: trackByFn; let last = last\"\r\n      [field]=\"item.columnName\"\r\n      [filter]=\"item.filter ? item.filter : { type: 'CheckBox' }\"\r\n      [customAttributes]=\"\r\n        item.colName === 'entityUserList' || item.colName === 'kycProgress'\r\n          ? { class: 'hideColumnFilterClass' }\r\n          : {}\r\n      \"\r\n      [headerText]=\"item.columnDisplayName\"\r\n      [textAlign]=\"item.textAlign\"\r\n      [showColumnMenu]=\"item.showColumnMenu === undefined ? true : false\"\r\n      [allowFiltering]=\"item.allowFiltering === undefined ? true : false\"\r\n      [allowSorting]=\"item.allowSorting === undefined ? true : false\"\r\n      [editType]=\"item.editType\"\r\n      [validationRules]=\"item.validationRules\"\r\n      [type]=\"item.dataType || 'string'\"\r\n      [width]=\"item.width\"\r\n      [minWidth]=\"item.minWidth\"\r\n      [format]=\"item.format\"\r\n      [visible]=\"item.visible\"\r\n      [template]=\"item.showTemplate ? columnTemplate : undefined\"\r\n      [clipMode]=\"\r\n        item.clipMode ? item.clipMode : clipMode || 'EllipsisWithTooltip'\r\n      \"\r\n      [sortComparer]=\"item.dateComparer || null\"\r\n      [allowResizing]=\"!last\"\r\n    >\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { grid: [{
                 type: ViewChild,
                 args: ["grid", { static: false }]
@@ -457,6 +479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowPaging: [{
                 type: Input
+            }], allowRowDragAndDrop: [{
+                type: Input
             }], clipMode: [{
                 type: Input
             }], checkBoxWidth: [{
@@ -485,6 +509,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], rowDeselected: [{
                 type: Output
+            }], rowDeselecting: [{
+                type: Output
             }], onContextMenu: [{
                 type: Output
             }], actionHandler: [{
@@ -503,6 +529,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], rowSelecting: [{
                 type: Output
+            }], rowDrop: [{
+                type: Output
+            }], rowDrag: [{
+                type: Output
+            }], rowDragStart: [{
+                type: Output
             }] } });
 
 class GridActionComponent {
@@ -511,53 +543,13 @@ class GridActionComponent {
         this.translation = JSON.parse(localStorage.getItem("translation"));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridActionComponent, selector: "rs-grid-action", ngImport: i0, template: "<button\r\n\tclass=\"grid-action-toggle\"\r\n\tmat-button\r\n\ttype=\"button\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\tmatTooltip=\"{{ translation.ACTIONS }}\"\r\n>\r\n\t<mat-icon svgIcon=\"more\"></mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"grid-action-menu-content\">\r\n\t<ng-content></ng-content>\r\n</mat-menu>\r\n", styles: [":host{flex:none;display:block;margin-left:auto}.grid-action-toggle{width:24px;height:24px;min-width:24px;max-width:24px;padding:0;border-radius:4px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;background:transparent}.grid-action-toggle:hover{background:#d6e3f533}.grid-action-toggle .mat-button-wrapper{max-height:24px;height:24px}.grid-action-toggle ::ng-deep .mat-icon{width:16px;height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}::ng-deep .grid-action-menu-content{padding:8px;border-radius:8px;background-color:#fff;box-shadow:0 0 8px #00000040}::ng-deep .grid-action-menu-content rs-grid-action-item.disabled{pointer-events:none}::ng-deep .grid-action-menu-content rs-grid-action-item.disabled button.grid-action-item{opacity:.4}::ng-deep .grid-action-menu-content button.grid-action-item{--mat-menu-item-label-text-font: Arial;--mat-menu-item-label-text-line-height: 14px;--mat-menu-item-label-text-size: 11px;--mat-menu-item-label-text-weight: 400;display:flex;flex-flow:row nowrap;align-items:center;gap:8px;height:28px!important;min-height:auto;padding:0 16px 0 8px;border-radius:4px;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:14px}::ng-deep .grid-action-menu-content button.grid-action-item .mat-mdc-menu-item-text{display:flex;flex-flow:row nowrap;align-items:center;gap:8px}::ng-deep .grid-action-menu-content button.grid-action-item:hover{background-color:#0000000a}::ng-deep .grid-action-menu-content button.grid-action-item:hover .mat-menu-ripple{background:none!important}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image:before{display:block;width:16px;height:16px;line-height:16px}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Detail]:before{content:url(/assets/img/grid-action-detail.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Delete]:before{content:url(/assets/img/grid-action-delete.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Send]:before{content:url(/assets/img/grid-action-send.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Copy]:before{content:url(/assets/img/grid-action-copy.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Edit]:before{content:url(/assets/img/grid-action-edit.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Note]:before{content:url(/assets/img/grid-action-note.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Settle]:before{content:url(/assets/img/grid-action-settle.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Download]:before{content:url(/assets/img/grid-action-download.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Preview]:before{content:url(/assets/img/grid-action-detail.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Export]:before{content:url(/assets/img/grid-action-export.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Move]:before{content:url(/assets/img/grid-action-move.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image img{height:16px;display:block}\n"], dependencies: [{ kind: "component", type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridActionComponent, selector: "rs-grid-action", ngImport: i0, template: "<button\r\n\tclass=\"grid-action-toggle\"\r\n\tmat-button\r\n\ttype=\"button\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\tmatTooltip=\"{{ translation.ACTIONS }}\"\r\n>\r\n\t<mat-icon svgIcon=\"more\"></mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"grid-action-menu-content\">\r\n\t<ng-content></ng-content>\r\n</mat-menu>\r\n", styles: [":host{flex:none;display:block;margin-left:auto}.grid-action-toggle{width:24px;height:24px;min-width:24px;max-width:24px;padding:0;border-radius:4px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;background:transparent}.grid-action-toggle:hover{background:#d6e3f533}.grid-action-toggle .mat-button-wrapper{max-height:24px;height:24px}.grid-action-toggle ::ng-deep .mat-icon{width:16px;height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}::ng-deep .grid-action-menu-content.mat-menu-panel{border-radius:8px;background-color:#fff;box-shadow:0 0 8px #00000040;overflow:visible}::ng-deep .grid-action-menu-content.mat-menu-panel .mat-menu-content{padding:8px}::ng-deep .grid-action-menu-content.mat-menu-panel rs-grid-action-item.disabled{pointer-events:none}::ng-deep .grid-action-menu-content.mat-menu-panel rs-grid-action-item.disabled button.grid-action-item{opacity:.4}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item{min-width:100px;position:relative;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start!important;gap:6px;height:28px!important;padding:0 8px;border-radius:4px;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:14px}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item:hover{background-color:#0000000a}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item:hover .mat-menu-ripple{background:none!important}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image:before{display:block;width:16px;height:16px;line-height:16px}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Detail]:before{content:url(/assets/img/grid-action-detail.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Delete]:before{content:url(/assets/img/grid-action-delete.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Send]:before{content:url(/assets/img/grid-action-send.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Copy]:before{content:url(/assets/img/grid-action-copy.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Edit]:before{content:url(/assets/img/grid-action-edit.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Note]:before{content:url(/assets/img/grid-action-note.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Download]:before{content:url(/assets/img/grid-action-download.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Preview]:before{content:url(/assets/img/grid-action-preview.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Export]:before{content:url(/assets/img/grid-action-export.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Move]:before{content:url(/assets/img/grid-action-move.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Duplicate]:before{content:url(/assets/img/grid-action-duplicate.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Refresh]:before{content:url(/assets/img/grid-action-refresh.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Add]:before{content:url(/assets/img/toolbar-action-add.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Import]:before{content:url(/assets/img/toolbar-action-import.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Upload]:before{content:url(/assets/img/toolbar-action-upload.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=AddFolder]:before{content:url(/assets/img/toolbar-action-addFolder.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Collapse]:before{content:url(/assets/img/toolbar-action-collapse.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Combine]:before{content:url(/assets/img/toolbar-action-combine.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Lock]:before{content:url(/assets/img/toolbar-action-lock.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Expand]:before{content:url(/assets/img/toolbar-action-expand.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=MoveTo]:before{content:url(/assets/img/toolbar-action-folderMove.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Publish]:before{content:url(/assets/img/toolbar-action-publish.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=ReCalculate]:before{content:url(/assets/img/toolbar-action-calculator.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Sync]:before{content:url(/assets/img/toolbar-action-sync.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Share]:before{content:url(/assets/img/toolbar-action-share.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Rename]:before{content:url(/assets/img/toolbar-action-rename.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=SaveSequence]:before{content:url(/assets/img/toolbar-action-saveSequence.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=SubmitForApproval]:before{content:url(/assets/img/toolbar-action-submitForApproval.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=SendToControlPanel]:before{content:url(/assets/img/toolbar-action-send-file.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=SetReminders]:before{content:url(/assets/img/toolbar-action-reminders.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Settle]:before{content:url(/assets/img/toolbar-action-settle.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Template]:before{content:url(/assets/img/toolbar-action-template.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Workflow]:before{content:url(/assets/img/toolbar-action-workflow.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Update]:before{content:url(/assets/img/toolbar-action-update.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=FetchData]:before{content:url(/assets/img/toolbar-action-fetchData.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=ViewStatus]:before{content:url(/assets/img/grid-action-viewStatus.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Verify]:before{content:url(/assets/img/grid-action-verify.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image img{height:16px;display:block}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-arrow{vertical-align:middle;position:absolute;right:4px;top:6px}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-arrow img{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-grid-action", template: "<button\r\n\tclass=\"grid-action-toggle\"\r\n\tmat-button\r\n\ttype=\"button\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\tmatTooltip=\"{{ translation.ACTIONS }}\"\r\n>\r\n\t<mat-icon svgIcon=\"more\"></mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"grid-action-menu-content\">\r\n\t<ng-content></ng-content>\r\n</mat-menu>\r\n", styles: [":host{flex:none;display:block;margin-left:auto}.grid-action-toggle{width:24px;height:24px;min-width:24px;max-width:24px;padding:0;border-radius:4px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;background:transparent}.grid-action-toggle:hover{background:#d6e3f533}.grid-action-toggle .mat-button-wrapper{max-height:24px;height:24px}.grid-action-toggle ::ng-deep .mat-icon{width:16px;height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}::ng-deep .grid-action-menu-content{padding:8px;border-radius:8px;background-color:#fff;box-shadow:0 0 8px #00000040}::ng-deep .grid-action-menu-content rs-grid-action-item.disabled{pointer-events:none}::ng-deep .grid-action-menu-content rs-grid-action-item.disabled button.grid-action-item{opacity:.4}::ng-deep .grid-action-menu-content button.grid-action-item{--mat-menu-item-label-text-font: Arial;--mat-menu-item-label-text-line-height: 14px;--mat-menu-item-label-text-size: 11px;--mat-menu-item-label-text-weight: 400;display:flex;flex-flow:row nowrap;align-items:center;gap:8px;height:28px!important;min-height:auto;padding:0 16px 0 8px;border-radius:4px;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:14px}::ng-deep .grid-action-menu-content button.grid-action-item .mat-mdc-menu-item-text{display:flex;flex-flow:row nowrap;align-items:center;gap:8px}::ng-deep .grid-action-menu-content button.grid-action-item:hover{background-color:#0000000a}::ng-deep .grid-action-menu-content button.grid-action-item:hover .mat-menu-ripple{background:none!important}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image:before{display:block;width:16px;height:16px;line-height:16px}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Detail]:before{content:url(/assets/img/grid-action-detail.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Delete]:before{content:url(/assets/img/grid-action-delete.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Send]:before{content:url(/assets/img/grid-action-send.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Copy]:before{content:url(/assets/img/grid-action-copy.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Edit]:before{content:url(/assets/img/grid-action-edit.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Note]:before{content:url(/assets/img/grid-action-note.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Settle]:before{content:url(/assets/img/grid-action-settle.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Download]:before{content:url(/assets/img/grid-action-download.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Preview]:before{content:url(/assets/img/grid-action-detail.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Export]:before{content:url(/assets/img/grid-action-export.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image[data-type=Move]:before{content:url(/assets/img/grid-action-move.svg)}::ng-deep .grid-action-menu-content button.grid-action-item .grid-action-image img{height:16px;display:block}\n"] }]
+            args: [{ selector: "rs-grid-action", template: "<button\r\n\tclass=\"grid-action-toggle\"\r\n\tmat-button\r\n\ttype=\"button\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\tmatTooltip=\"{{ translation.ACTIONS }}\"\r\n>\r\n\t<mat-icon svgIcon=\"more\"></mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"grid-action-menu-content\">\r\n\t<ng-content></ng-content>\r\n</mat-menu>\r\n", styles: [":host{flex:none;display:block;margin-left:auto}.grid-action-toggle{width:24px;height:24px;min-width:24px;max-width:24px;padding:0;border-radius:4px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;background:transparent}.grid-action-toggle:hover{background:#d6e3f533}.grid-action-toggle .mat-button-wrapper{max-height:24px;height:24px}.grid-action-toggle ::ng-deep .mat-icon{width:16px;height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}::ng-deep .grid-action-menu-content.mat-menu-panel{border-radius:8px;background-color:#fff;box-shadow:0 0 8px #00000040;overflow:visible}::ng-deep .grid-action-menu-content.mat-menu-panel .mat-menu-content{padding:8px}::ng-deep .grid-action-menu-content.mat-menu-panel rs-grid-action-item.disabled{pointer-events:none}::ng-deep .grid-action-menu-content.mat-menu-panel rs-grid-action-item.disabled button.grid-action-item{opacity:.4}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item{min-width:100px;position:relative;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start!important;gap:6px;height:28px!important;padding:0 8px;border-radius:4px;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:14px}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item:hover{background-color:#0000000a}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item:hover .mat-menu-ripple{background:none!important}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image:before{display:block;width:16px;height:16px;line-height:16px}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Detail]:before{content:url(/assets/img/grid-action-detail.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Delete]:before{content:url(/assets/img/grid-action-delete.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Send]:before{content:url(/assets/img/grid-action-send.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Copy]:before{content:url(/assets/img/grid-action-copy.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Edit]:before{content:url(/assets/img/grid-action-edit.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Note]:before{content:url(/assets/img/grid-action-note.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Download]:before{content:url(/assets/img/grid-action-download.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Preview]:before{content:url(/assets/img/grid-action-preview.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Export]:before{content:url(/assets/img/grid-action-export.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Move]:before{content:url(/assets/img/grid-action-move.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Duplicate]:before{content:url(/assets/img/grid-action-duplicate.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Refresh]:before{content:url(/assets/img/grid-action-refresh.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Add]:before{content:url(/assets/img/toolbar-action-add.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Import]:before{content:url(/assets/img/toolbar-action-import.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Upload]:before{content:url(/assets/img/toolbar-action-upload.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=AddFolder]:before{content:url(/assets/img/toolbar-action-addFolder.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Collapse]:before{content:url(/assets/img/toolbar-action-collapse.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Combine]:before{content:url(/assets/img/toolbar-action-combine.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Lock]:before{content:url(/assets/img/toolbar-action-lock.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Expand]:before{content:url(/assets/img/toolbar-action-expand.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=MoveTo]:before{content:url(/assets/img/toolbar-action-folderMove.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Publish]:before{content:url(/assets/img/toolbar-action-publish.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=ReCalculate]:before{content:url(/assets/img/toolbar-action-calculator.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Sync]:before{content:url(/assets/img/toolbar-action-sync.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Share]:before{content:url(/assets/img/toolbar-action-share.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Rename]:before{content:url(/assets/img/toolbar-action-rename.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=SaveSequence]:before{content:url(/assets/img/toolbar-action-saveSequence.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=SubmitForApproval]:before{content:url(/assets/img/toolbar-action-submitForApproval.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=SendToControlPanel]:before{content:url(/assets/img/toolbar-action-send-file.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=SetReminders]:before{content:url(/assets/img/toolbar-action-reminders.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Settle]:before{content:url(/assets/img/toolbar-action-settle.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Template]:before{content:url(/assets/img/toolbar-action-template.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Workflow]:before{content:url(/assets/img/toolbar-action-workflow.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Update]:before{content:url(/assets/img/toolbar-action-update.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=FetchData]:before{content:url(/assets/img/toolbar-action-fetchData.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=ViewStatus]:before{content:url(/assets/img/grid-action-viewStatus.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image[data-type=Verify]:before{content:url(/assets/img/grid-action-verify.svg)}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-image img{height:16px;display:block}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-arrow{vertical-align:middle;position:absolute;right:4px;top:6px}::ng-deep .grid-action-menu-content.mat-menu-panel button.grid-action-item .grid-action-arrow img{vertical-align:middle}\n"] }]
         }], ctorParameters: function () { return []; } });
 
-class GridActionItemComponent {
-    image;
-    text;
-    disabled;
-    get hostDisabled() {
-        return !!this.disabled;
-    }
-    ImageType = [
-        "Detail",
-        "Edit",
-        "Download",
-        "Delete",
-        "Note",
-        "Send",
-        "Copy",
-        "Settle",
-        "Preview",
-        "Export",
-        "Move",
-    ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridActionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridActionItemComponent, selector: "rs-grid-action-item", inputs: { image: "image", text: "text", disabled: "disabled" }, host: { properties: { "class.disabled": "this.hostDisabled" } }, ngImport: i0, template: "<button\r\n\tclass=\"grid-action-item\"\r\n\tmat-menu-item\r\n\ttype=\"button\"\r\n\t[disabled]=\"!!disabled\"\r\n>\r\n\t<span class=\"grid-action-image\" [attr.data-type]=\"image\">\r\n\t\t<img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n\t</span>\r\n\t<span>{{ text }}</span>\r\n</button>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridActionItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "rs-grid-action-item", template: "<button\r\n\tclass=\"grid-action-item\"\r\n\tmat-menu-item\r\n\ttype=\"button\"\r\n\t[disabled]=\"!!disabled\"\r\n>\r\n\t<span class=\"grid-action-image\" [attr.data-type]=\"image\">\r\n\t\t<img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n\t</span>\r\n\t<span>{{ text }}</span>\r\n</button>\r\n" }]
-        }], propDecorators: { image: [{
-                type: Input,
-                args: ["image"]
-            }], text: [{
-                type: Input,
-                args: ["text"]
-            }], disabled: [{
-                type: Input,
-                args: ["disabled"]
-            }], hostDisabled: [{
-                type: HostBinding,
-                args: ["class.disabled"]
-            }] } });
-
 class FloatBoxComponent {
     ref;
     _placement;
@@ -738,6 +730,8 @@ class FloatBoxComponent {
     close() {
         setTimeout(() => {
             this.opened = "no";
+            this.ref.markForCheck();
+            this.ref.detectChanges();
             this.openChange.emit(false);
         }, 0);
     }
@@ -773,6 +767,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ["content", { static: false }]
             }] } });
 
+class GridActionItemComponent {
+    image;
+    text;
+    disabled;
+    children = [];
+    hideArrow = false;
+    disabledOptions = {};
+    get hostDisabled() {
+        return !!this.disabled;
+    }
+    ImageType = [
+        "Detail",
+        "Edit",
+        "Duplicate",
+        "Refresh",
+        "Download",
+        "Delete",
+        "Note",
+        "Send",
+        "Copy",
+        "Settle",
+        "Preview",
+        "Export",
+        "Move",
+        "Add",
+        "Update",
+        "Import",
+        "Upload",
+        "AddFolder",
+        "Collapse",
+        "Combine",
+        "Lock",
+        "Expand",
+        "MoveTo",
+        "Publish",
+        "ReCalculate",
+        "Sync",
+        "Share",
+        "Rename",
+        "SaveSequence",
+        "SubmitForApproval",
+        "SendToControlPanel",
+        "SetReminders",
+        "Settle",
+        "Template",
+        "Workflow",
+        "FetchData",
+        "ViewStatus",
+        "Verify",
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridActionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridActionItemComponent, selector: "rs-grid-action-item", inputs: { image: "image", text: "text", disabled: "disabled", children: "children", hideArrow: "hideArrow", disabledOptions: "disabledOptions" }, host: { properties: { "class.disabled": "this.hostDisabled" } }, ngImport: i0, template: "<button\r\n  *ngIf=\"!children.length\"\r\n  class=\"grid-action-item e-btn text\"\r\n  mat-menu-item\r\n  type=\"button\"\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"grid-action-image\" *ngIf=\"image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n\r\n<rs-float-box placement=\"right\" position=\"start\">\r\n  <button\r\n    *ngIf=\"children.length\"\r\n    class=\"grid-action-item e-btn text\"\r\n    mat-menu-item\r\n    [disabled]=\"!!disabled\"\r\n  >\r\n    <span class=\"grid-action-image\" *ngIf=\"image\" [attr.data-type]=\"image\">\r\n      <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n    </span>\r\n    <span>{{ text }}</span>\r\n    <span class=\"grid-action-arrow\" *ngIf=\"!hideArrow\">\r\n      <img src=\"assets/img/grid-menu-arrow-right.svg\" />\r\n    </span>\r\n  </button>\r\n  <div float-content>\r\n    <ng-container *ngFor=\"let button of children\">\r\n      <button\r\n        class=\"grid-action-item e-btn text\"\r\n        [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n        (click)=\"button.action()\"\r\n      >\r\n        <span\r\n          class=\"grid-action-image\"\r\n          *ngIf=\"button.image\"\r\n          [attr.data-type]=\"button.image\"\r\n        >\r\n          <img *ngIf=\"!ImageType.includes(button.image)\" [src]=\"button.image\" />\r\n        </span>\r\n        <span>{{ button.text }}</span>\r\n      </button>\r\n    </ng-container>\r\n  </div>\r\n</rs-float-box>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: FloatBoxComponent, selector: "rs-float-box", inputs: ["placement", "position", "trigger", "animation", "fixed"], outputs: ["openChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridActionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rs-grid-action-item", template: "<button\r\n  *ngIf=\"!children.length\"\r\n  class=\"grid-action-item e-btn text\"\r\n  mat-menu-item\r\n  type=\"button\"\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"grid-action-image\" *ngIf=\"image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n\r\n<rs-float-box placement=\"right\" position=\"start\">\r\n  <button\r\n    *ngIf=\"children.length\"\r\n    class=\"grid-action-item e-btn text\"\r\n    mat-menu-item\r\n    [disabled]=\"!!disabled\"\r\n  >\r\n    <span class=\"grid-action-image\" *ngIf=\"image\" [attr.data-type]=\"image\">\r\n      <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n    </span>\r\n    <span>{{ text }}</span>\r\n    <span class=\"grid-action-arrow\" *ngIf=\"!hideArrow\">\r\n      <img src=\"assets/img/grid-menu-arrow-right.svg\" />\r\n    </span>\r\n  </button>\r\n  <div float-content>\r\n    <ng-container *ngFor=\"let button of children\">\r\n      <button\r\n        class=\"grid-action-item e-btn text\"\r\n        [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n        (click)=\"button.action()\"\r\n      >\r\n        <span\r\n          class=\"grid-action-image\"\r\n          *ngIf=\"button.image\"\r\n          [attr.data-type]=\"button.image\"\r\n        >\r\n          <img *ngIf=\"!ImageType.includes(button.image)\" [src]=\"button.image\" />\r\n        </span>\r\n        <span>{{ button.text }}</span>\r\n      </button>\r\n    </ng-container>\r\n  </div>\r\n</rs-float-box>\r\n" }]
+        }], propDecorators: { image: [{
+                type: Input,
+                args: ["image"]
+            }], text: [{
+                type: Input,
+                args: ["text"]
+            }], disabled: [{
+                type: Input,
+                args: ["disabled"]
+            }], children: [{
+                type: Input,
+                args: ["children"]
+            }], hideArrow: [{
+                type: Input,
+                args: ["hideArrow"]
+            }], disabledOptions: [{
+                type: Input
+            }], hostDisabled: [{
+                type: HostBinding,
+                args: ["class.disabled"]
+            }] } });
+
 function Debounce(delay = 300) {
     return function (target, propertyKey, descriptor) {
         const originalMethod = descriptor.value;
@@ -980,15 +1052,22 @@ class CommonDialogComponent {
     hideCloseIcon = false;
     hideCloseBtn = false;
     hideSaveBtn = false;
+    hideDiscardBtn = false;
     saveBtnLabel = "";
     cancelBtnLabel = "";
+    discardBtnLabel = "";
     showErrorIcon = false;
+    showZoomBtn = false;
+    // 关闭前的回调函数
+    onCloseRequest;
     // 显示相关属性
+    dialogStyle = {};
     size = "";
     title = "Dialog";
     loading = false;
     saveEmit = new EventEmitter();
     closeEmit = new EventEmitter();
+    defaultSize = "";
     constructor(dialogRef) {
         this.dialogRef = dialogRef;
     }
@@ -1001,29 +1080,45 @@ class CommonDialogComponent {
     ngOnInit() {
         this.getInfo();
     }
-    onClose(res) {
-        this.dialogRef.close(res);
-        this.closeEmit.emit(res);
+    onClose() {
+        if (this.onCloseRequest) {
+            this.onCloseRequest().then((confirmed) => {
+                if (confirmed) {
+                    this.dialogRef.close("close");
+                }
+            });
+        }
+        else {
+            this.dialogRef.close("close");
+        }
+    }
+    onZoom() {
+        if (this.size === "largest") {
+            this.size = this.defaultSize; // 恢复到原始大小
+        }
+        else {
+            this.size = "largest"; // 设置为最大化
+        }
     }
     onSave() {
-        // 这里把关闭事件emit上去，但是必须使用箭头函数保存this对象
-        this.saveEmit.emit((res) => {
-            this.onClose(res);
-        });
+        this.dialogRef.close("save");
+    }
+    onDiscard() {
+        this.dialogRef.close("discard");
     }
     getInfo() {
         this.translation = JSON.parse(localStorage.getItem("translation")) || {};
-        this.saveBtnLabel =
-            this.saveBtnLabel || this.translation.SAVE || ".SAVE";
+        this.saveBtnLabel = this.saveBtnLabel || this.translation.SAVE || ".SAVE";
         this.cancelBtnLabel =
             this.cancelBtnLabel || this.translation.CANCEL || ".CANCEL";
+        this.defaultSize = this.size;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommonDialogComponent, deps: [{ token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommonDialogComponent, selector: "kt-common-dialog", inputs: { hideHeader: "hideHeader", hideCloseIcon: "hideCloseIcon", hideCloseBtn: "hideCloseBtn", hideSaveBtn: "hideSaveBtn", saveBtnLabel: "saveBtnLabel", cancelBtnLabel: "cancelBtnLabel", showErrorIcon: "showErrorIcon", size: "size", title: "title", loading: "loading" }, outputs: { saveEmit: "saveEmit", closeEmit: "closeEmit" }, queries: [{ propertyName: "footerContent", first: true, predicate: ["footerSlot"], descendants: true }], ngImport: i0, template: "<div class=\"dialog\" [ngClass]=\"size\">\r\n\t<!-- \u5934\u90E8 -->\r\n\t<div *ngIf=\"!hideHeader\" mat-dialog-title class=\"dialog__header\">\r\n\t\t<div class=\"header__title\">\r\n\t\t\t<img\r\n\t\t\t\tsrc=\"../../../assets/img/notification-status-warning.svg\"\r\n\t\t\t\talt=\"\"\r\n\t\t\t\t*ngIf=\"showErrorIcon\"\r\n\t\t\t/>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\t\t<div\r\n\t\t\t*ngIf=\"!hideCloseIcon\"\r\n\t\t\tclass=\"header__close-btn\"\r\n\t\t\t(click)=\"onClose()\"\r\n\t\t>\r\n\t\t\t<img\r\n\t\t\t\tclass=\"header__close-icon\"\r\n\t\t\t\tsrc=\"../../../assets/img/close.svg\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- \u5185\u5BB9 -->\r\n\t<div class=\"dialog__content\" mat-dialog-content>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<!-- \u5E95\u90E8\u6309\u94AE -->\r\n\t<div mat-dialog-actions class=\"dialog__footer\">\r\n\t\t<ng-content select=\"[footerSlot]\"></ng-content>\r\n\t\t<!-- \u9ED8\u8BA4\u5C55\u793A\u4FDD\u5B58/\u5173\u95ED\u6309\u94AE -->\r\n\t\t<ng-container *ngIf=\"!customFooter\">\r\n\t\t\t<ng-template [ngTemplateOutlet]=\"defaultTemplate\"></ng-template>\r\n\t\t</ng-container>\r\n\t\t<ng-template #defaultTemplate>\r\n\t\t\t<button *ngIf=\"!hideCloseBtn\" class=\"e-btn\" [ngClass]=\"size\" mat-dialog-close>\r\n\t\t\t\t{{ cancelBtnLabel }}\r\n\t\t\t</button>\r\n\t\t\t<button *ngIf=\"!hideSaveBtn\" class=\"e-btn e-primary\" [ngClass]=\"size\" (click)=\"onSave()\">\r\n\t\t\t\t{{ saveBtnLabel }}\r\n\t\t\t</button>\r\n\t\t</ng-template>\r\n\t</div>\r\n\t<!-- loading -->\r\n\t<div class=\"dialog__loading\" [hidden]=\"!loading\">\r\n\t\t<img src=\"../../../assets/img/raise_loading.gif\" alt=\"\" />\r\n\t</div>\r\n</div>\r\n", styles: [":host::ng-deep .dialog{position:relative;max-height:90vh;font-weight:400;overflow:hidden}:host::ng-deep .dialog.medium{width:500px;padding:20px}:host::ng-deep .dialog.small{width:350px;padding:20px 16px}:host::ng-deep .dialog.small .dialog__header{color:#002c4f;margin-bottom:16px}:host::ng-deep .dialog.small .dialog__header .header__title{font-size:13px;line-height:16px}:host::ng-deep .dialog.small .dialog__content{font-size:12px;line-height:16px}:host::ng-deep .dialog.small .dialog__footer{min-height:42px;padding:16px 0 0;font-size:12px;line-height:14px}:host::ng-deep .dialog.small .dialog__footer button{padding:6px 12px;min-width:60px}:host::ng-deep .dialog.large{width:800px;padding:20px}:host::ng-deep .dialog .dialog__header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0}:host::ng-deep .dialog .dialog__header:before{display:none}:host::ng-deep .dialog .dialog__header .header__title{color:#002c4f;font-family:Arial;font-size:15px;font-weight:700;line-height:18px;flex:1;overflow:hidden;display:flex;align-items:center;gap:8px}:host::ng-deep .dialog .dialog__header .header__close-icon{display:block;width:100%;height:100%}:host::ng-deep .dialog .dialog__header .header__close-btn{cursor:pointer;flex:0 0 20px;padding:4px;width:20px;height:20px;display:flex;justify-content:center;align-items:center}:host::ng-deep .dialog .dialog__content{width:100%;min-height:38px;position:relative;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;font-size:13px;line-height:19px}:host::ng-deep .dialog .dialog__footer{position:relative;display:flex;align-items:center;justify-content:flex-end;padding:20px 0 0;font-size:13px;line-height:16px;margin-bottom:0}:host::ng-deep .dialog .dialog__footer button{border-radius:4px;padding:6px 16px;border:none;min-width:70px}:host::ng-deep .dialog .dialog__footer button+button{margin-left:12px}:host::ng-deep .dialog .dialog__footer .save-btn{background:#1364b3;border:1px solid #1364b3;font-weight:700;color:#fff}:host::ng-deep .dialog .dialog__footer .cancel-btn{border:1px solid #adb5bd;background:#fff}:host::ng-deep .dialog .dialog__loading{height:100%;background:transparent;position:fixed;inset:0;z-index:9999}:host::ng-deep .dialog .dialog__loading img{position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommonDialogComponent, selector: "rs-common-dialog", inputs: { hideHeader: "hideHeader", hideCloseIcon: "hideCloseIcon", hideCloseBtn: "hideCloseBtn", hideSaveBtn: "hideSaveBtn", hideDiscardBtn: "hideDiscardBtn", saveBtnLabel: "saveBtnLabel", cancelBtnLabel: "cancelBtnLabel", discardBtnLabel: "discardBtnLabel", showErrorIcon: "showErrorIcon", showZoomBtn: "showZoomBtn", onCloseRequest: "onCloseRequest", dialogStyle: "dialogStyle", size: "size", title: "title", loading: "loading" }, outputs: { saveEmit: "saveEmit", closeEmit: "closeEmit" }, queries: [{ propertyName: "footerContent", first: true, predicate: ["footerSlot"], descendants: true }], ngImport: i0, template: "<div class=\"dialog\" [ngClass]=\"size\" [ngStyle]=\"dialogStyle\">\r\n  <!-- \u5934\u90E8 -->\r\n  <div *ngIf=\"!hideHeader\" mat-dialog-title class=\"dialog__header\">\r\n    <div class=\"header__title\">\r\n      <img\r\n        src=\"../../../assets/img/notification-status-warning.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"showErrorIcon\"\r\n      />\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"header__actions\">\r\n      <div *ngIf=\"showZoomBtn\" class=\"header-btn\" (click)=\"onZoom()\">\r\n        <img\r\n          class=\"header-icon\"\r\n          *ngIf=\"size === 'largest'\"\r\n          src=\"../../../assets/img/dialog-shrink.svg\"\r\n        />\r\n        <img\r\n          class=\"header-icon\"\r\n          *ngIf=\"size !== 'largest'\"\r\n          src=\"../../../assets/img/dialog-grow.svg\"\r\n        />\r\n      </div>\r\n      <div *ngIf=\"!hideCloseIcon\" class=\"header-btn\" (click)=\"onClose()\">\r\n        <img class=\"header-icon\" src=\"../../../assets/img/dialog-close.svg\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- \u5185\u5BB9 -->\r\n  <div class=\"dialog__content\" mat-dialog-content>\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <!-- \u5E95\u90E8\u6309\u94AE -->\r\n  <div mat-dialog-actions class=\"dialog__footer\">\r\n    <ng-content select=\"[footerSlot]\"></ng-content>\r\n    <!-- \u9ED8\u8BA4\u5C55\u793A\u4FDD\u5B58/\u5173\u95ED\u6309\u94AE -->\r\n    <ng-container *ngIf=\"!customFooter\">\r\n      <ng-template [ngTemplateOutlet]=\"defaultTemplate\"></ng-template>\r\n    </ng-container>\r\n    <ng-template #defaultTemplate>\r\n      <button\r\n        *ngIf=\"!hideCloseBtn\"\r\n        class=\"e-btn\"\r\n        (click)=\"onClose()\"\r\n      >\r\n        {{ cancelBtnLabel }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"!hideDiscardBtn\"\r\n        class=\"e-btn\"\r\n        (click)=\"onDiscard()\"\r\n      >\r\n        {{ discardBtnLabel }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"!hideSaveBtn\"\r\n        class=\"e-btn e-primary\"\r\n        (click)=\"onSave()\"\r\n      >\r\n        {{ saveBtnLabel }}\r\n      </button>\r\n    </ng-template>\r\n  </div>\r\n  <!-- loading -->\r\n  <div class=\"dialog__loading\" [hidden]=\"!loading\">\r\n    <img src=\"../../../assets/img/raise_loading.gif\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [":host::ng-deep .dialog{position:relative;max-height:90vh;font-weight:400;padding:20px;overflow:hidden;display:flex;flex-direction:column}:host::ng-deep .dialog.largest{width:96vw!important;height:88vh!important;max-width:2100px;padding:20px}:host::ng-deep .dialog.medium{width:500px;padding:20px}:host::ng-deep .dialog.small{width:350px;padding:20px 16px}:host::ng-deep .dialog.small .dialog__header{color:#002c4f;margin-bottom:16px}:host::ng-deep .dialog.small .dialog__header .header__title{font-size:13px;line-height:16px}:host::ng-deep .dialog.small .dialog__content{font-size:12px;line-height:16px}:host::ng-deep .dialog.small .dialog__footer{min-height:42px;padding:16px 0 0;font-size:12px;line-height:14px}:host::ng-deep .dialog.small .dialog__footer button{padding:6px 12px;min-width:60px}:host::ng-deep .dialog.large{width:800px;padding:20px}:host::ng-deep .dialog .dialog__header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0}:host::ng-deep .dialog .dialog__header:before{display:none}:host::ng-deep .dialog .dialog__header .header__title{color:#002c4f;font-family:Arial;font-size:15px;font-weight:700;line-height:18px;flex:1;overflow:hidden;display:flex;align-items:center;gap:8px}:host::ng-deep .dialog .dialog__header .header__actions{display:flex;align-items:center;gap:20px}:host::ng-deep .dialog .dialog__header .header-icon{display:block}:host::ng-deep .dialog .dialog__header .header-btn{cursor:pointer;padding:2px;display:flex;justify-content:center;align-items:center}:host::ng-deep .dialog .dialog__content{width:100%;min-height:38px;position:relative;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;font-size:13px;line-height:19px;flex:1;height:0}:host::ng-deep .dialog .dialog__footer{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:20px 0 0;font-size:13px;line-height:16px;margin-bottom:0}:host::ng-deep .dialog .dialog__loading{height:100%;background:transparent;position:fixed;inset:0;z-index:9999}:host::ng-deep .dialog .dialog__loading img{position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommonDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: "kt-common-dialog", template: "<div class=\"dialog\" [ngClass]=\"size\">\r\n\t<!-- \u5934\u90E8 -->\r\n\t<div *ngIf=\"!hideHeader\" mat-dialog-title class=\"dialog__header\">\r\n\t\t<div class=\"header__title\">\r\n\t\t\t<img\r\n\t\t\t\tsrc=\"../../../assets/img/notification-status-warning.svg\"\r\n\t\t\t\talt=\"\"\r\n\t\t\t\t*ngIf=\"showErrorIcon\"\r\n\t\t\t/>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\t\t<div\r\n\t\t\t*ngIf=\"!hideCloseIcon\"\r\n\t\t\tclass=\"header__close-btn\"\r\n\t\t\t(click)=\"onClose()\"\r\n\t\t>\r\n\t\t\t<img\r\n\t\t\t\tclass=\"header__close-icon\"\r\n\t\t\t\tsrc=\"../../../assets/img/close.svg\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- \u5185\u5BB9 -->\r\n\t<div class=\"dialog__content\" mat-dialog-content>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<!-- \u5E95\u90E8\u6309\u94AE -->\r\n\t<div mat-dialog-actions class=\"dialog__footer\">\r\n\t\t<ng-content select=\"[footerSlot]\"></ng-content>\r\n\t\t<!-- \u9ED8\u8BA4\u5C55\u793A\u4FDD\u5B58/\u5173\u95ED\u6309\u94AE -->\r\n\t\t<ng-container *ngIf=\"!customFooter\">\r\n\t\t\t<ng-template [ngTemplateOutlet]=\"defaultTemplate\"></ng-template>\r\n\t\t</ng-container>\r\n\t\t<ng-template #defaultTemplate>\r\n\t\t\t<button *ngIf=\"!hideCloseBtn\" class=\"e-btn\" [ngClass]=\"size\" mat-dialog-close>\r\n\t\t\t\t{{ cancelBtnLabel }}\r\n\t\t\t</button>\r\n\t\t\t<button *ngIf=\"!hideSaveBtn\" class=\"e-btn e-primary\" [ngClass]=\"size\" (click)=\"onSave()\">\r\n\t\t\t\t{{ saveBtnLabel }}\r\n\t\t\t</button>\r\n\t\t</ng-template>\r\n\t</div>\r\n\t<!-- loading -->\r\n\t<div class=\"dialog__loading\" [hidden]=\"!loading\">\r\n\t\t<img src=\"../../../assets/img/raise_loading.gif\" alt=\"\" />\r\n\t</div>\r\n</div>\r\n", styles: [":host::ng-deep .dialog{position:relative;max-height:90vh;font-weight:400;overflow:hidden}:host::ng-deep .dialog.medium{width:500px;padding:20px}:host::ng-deep .dialog.small{width:350px;padding:20px 16px}:host::ng-deep .dialog.small .dialog__header{color:#002c4f;margin-bottom:16px}:host::ng-deep .dialog.small .dialog__header .header__title{font-size:13px;line-height:16px}:host::ng-deep .dialog.small .dialog__content{font-size:12px;line-height:16px}:host::ng-deep .dialog.small .dialog__footer{min-height:42px;padding:16px 0 0;font-size:12px;line-height:14px}:host::ng-deep .dialog.small .dialog__footer button{padding:6px 12px;min-width:60px}:host::ng-deep .dialog.large{width:800px;padding:20px}:host::ng-deep .dialog .dialog__header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0}:host::ng-deep .dialog .dialog__header:before{display:none}:host::ng-deep .dialog .dialog__header .header__title{color:#002c4f;font-family:Arial;font-size:15px;font-weight:700;line-height:18px;flex:1;overflow:hidden;display:flex;align-items:center;gap:8px}:host::ng-deep .dialog .dialog__header .header__close-icon{display:block;width:100%;height:100%}:host::ng-deep .dialog .dialog__header .header__close-btn{cursor:pointer;flex:0 0 20px;padding:4px;width:20px;height:20px;display:flex;justify-content:center;align-items:center}:host::ng-deep .dialog .dialog__content{width:100%;min-height:38px;position:relative;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;font-size:13px;line-height:19px}:host::ng-deep .dialog .dialog__footer{position:relative;display:flex;align-items:center;justify-content:flex-end;padding:20px 0 0;font-size:13px;line-height:16px;margin-bottom:0}:host::ng-deep .dialog .dialog__footer button{border-radius:4px;padding:6px 16px;border:none;min-width:70px}:host::ng-deep .dialog .dialog__footer button+button{margin-left:12px}:host::ng-deep .dialog .dialog__footer .save-btn{background:#1364b3;border:1px solid #1364b3;font-weight:700;color:#fff}:host::ng-deep .dialog .dialog__footer .cancel-btn{border:1px solid #adb5bd;background:#fff}:host::ng-deep .dialog .dialog__loading{height:100%;background:transparent;position:fixed;inset:0;z-index:9999}:host::ng-deep .dialog .dialog__loading img{position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)}\n"] }]
+            args: [{ selector: "rs-common-dialog", template: "<div class=\"dialog\" [ngClass]=\"size\" [ngStyle]=\"dialogStyle\">\r\n  <!-- \u5934\u90E8 -->\r\n  <div *ngIf=\"!hideHeader\" mat-dialog-title class=\"dialog__header\">\r\n    <div class=\"header__title\">\r\n      <img\r\n        src=\"../../../assets/img/notification-status-warning.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"showErrorIcon\"\r\n      />\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"header__actions\">\r\n      <div *ngIf=\"showZoomBtn\" class=\"header-btn\" (click)=\"onZoom()\">\r\n        <img\r\n          class=\"header-icon\"\r\n          *ngIf=\"size === 'largest'\"\r\n          src=\"../../../assets/img/dialog-shrink.svg\"\r\n        />\r\n        <img\r\n          class=\"header-icon\"\r\n          *ngIf=\"size !== 'largest'\"\r\n          src=\"../../../assets/img/dialog-grow.svg\"\r\n        />\r\n      </div>\r\n      <div *ngIf=\"!hideCloseIcon\" class=\"header-btn\" (click)=\"onClose()\">\r\n        <img class=\"header-icon\" src=\"../../../assets/img/dialog-close.svg\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- \u5185\u5BB9 -->\r\n  <div class=\"dialog__content\" mat-dialog-content>\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <!-- \u5E95\u90E8\u6309\u94AE -->\r\n  <div mat-dialog-actions class=\"dialog__footer\">\r\n    <ng-content select=\"[footerSlot]\"></ng-content>\r\n    <!-- \u9ED8\u8BA4\u5C55\u793A\u4FDD\u5B58/\u5173\u95ED\u6309\u94AE -->\r\n    <ng-container *ngIf=\"!customFooter\">\r\n      <ng-template [ngTemplateOutlet]=\"defaultTemplate\"></ng-template>\r\n    </ng-container>\r\n    <ng-template #defaultTemplate>\r\n      <button\r\n        *ngIf=\"!hideCloseBtn\"\r\n        class=\"e-btn\"\r\n        (click)=\"onClose()\"\r\n      >\r\n        {{ cancelBtnLabel }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"!hideDiscardBtn\"\r\n        class=\"e-btn\"\r\n        (click)=\"onDiscard()\"\r\n      >\r\n        {{ discardBtnLabel }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"!hideSaveBtn\"\r\n        class=\"e-btn e-primary\"\r\n        (click)=\"onSave()\"\r\n      >\r\n        {{ saveBtnLabel }}\r\n      </button>\r\n    </ng-template>\r\n  </div>\r\n  <!-- loading -->\r\n  <div class=\"dialog__loading\" [hidden]=\"!loading\">\r\n    <img src=\"../../../assets/img/raise_loading.gif\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [":host::ng-deep .dialog{position:relative;max-height:90vh;font-weight:400;padding:20px;overflow:hidden;display:flex;flex-direction:column}:host::ng-deep .dialog.largest{width:96vw!important;height:88vh!important;max-width:2100px;padding:20px}:host::ng-deep .dialog.medium{width:500px;padding:20px}:host::ng-deep .dialog.small{width:350px;padding:20px 16px}:host::ng-deep .dialog.small .dialog__header{color:#002c4f;margin-bottom:16px}:host::ng-deep .dialog.small .dialog__header .header__title{font-size:13px;line-height:16px}:host::ng-deep .dialog.small .dialog__content{font-size:12px;line-height:16px}:host::ng-deep .dialog.small .dialog__footer{min-height:42px;padding:16px 0 0;font-size:12px;line-height:14px}:host::ng-deep .dialog.small .dialog__footer button{padding:6px 12px;min-width:60px}:host::ng-deep .dialog.large{width:800px;padding:20px}:host::ng-deep .dialog .dialog__header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0}:host::ng-deep .dialog .dialog__header:before{display:none}:host::ng-deep .dialog .dialog__header .header__title{color:#002c4f;font-family:Arial;font-size:15px;font-weight:700;line-height:18px;flex:1;overflow:hidden;display:flex;align-items:center;gap:8px}:host::ng-deep .dialog .dialog__header .header__actions{display:flex;align-items:center;gap:20px}:host::ng-deep .dialog .dialog__header .header-icon{display:block}:host::ng-deep .dialog .dialog__header .header-btn{cursor:pointer;padding:2px;display:flex;justify-content:center;align-items:center}:host::ng-deep .dialog .dialog__content{width:100%;min-height:38px;position:relative;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;font-size:13px;line-height:19px;flex:1;height:0}:host::ng-deep .dialog .dialog__footer{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:20px 0 0;font-size:13px;line-height:16px;margin-bottom:0}:host::ng-deep .dialog .dialog__loading{height:100%;background:transparent;position:fixed;inset:0;z-index:9999}:host::ng-deep .dialog .dialog__loading img{position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }]; }, propDecorators: { hideHeader: [{
                 type: Input
             }], hideCloseIcon: [{
@@ -1032,12 +1127,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], hideSaveBtn: [{
                 type: Input
+            }], hideDiscardBtn: [{
+                type: Input
             }], saveBtnLabel: [{
                 type: Input
             }], cancelBtnLabel: [{
                 type: Input
+            }], discardBtnLabel: [{
+                type: Input
             }], showErrorIcon: [{
                 type: Input
+            }], showZoomBtn: [{
+                type: Input
+            }], onCloseRequest: [{
+                type: Input
+            }], dialogStyle: [{
+                type: Input
             }], size: [{
                 type: Input
             }], title: [{
@@ -1060,8 +1165,11 @@ class CommonDeleteComponent {
     title = "";
     saveBtnLabel = "";
     cancelBtnLabel = "";
+    discardBtnLabel = "";
     description = "";
     size = "small";
+    showZoomBtn = false;
+    isMultiLine = false;
     constructor(data, dialogRef) {
         this.data = data;
         this.dialogRef = dialogRef;
@@ -1074,21 +1182,21 @@ class CommonDeleteComponent {
             this.data.saveBtnLabel || this.translation.DELETE || ".DELETE";
         this.cancelBtnLabel =
             this.data.cancelBtnLabel || this.translation.CANCEL || ".CANCEL";
+        this.discardBtnLabel = this.data.discardBtnLabel;
         this.description =
             this.data.description ||
                 this.translation.IF_YOU_DELETE_THIS_RECORD_WARNING ||
                 ".If you delete this record, you won't be able to recover it. Do you want to delete it?";
         this.size = this.data.size || "small";
-    }
-    onSave(e) {
-        this.dialogRef.close(e);
+        this.showZoomBtn = this.data.showZoomBtn || false;
+        this.isMultiLine = Array.isArray(this.description);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommonDeleteComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommonDeleteComponent, selector: "kt-common-delete-dialog", ngImport: i0, template: "<kt-common-dialog\r\n\t[size]=\"size\"\r\n\t[title]=\"title\"\r\n\t[hideHeader]=\"false\"\r\n\t[hideCloseBtn]=\"data.hideCloseBtn === undefined ? false : data.hideCloseBtn\"\r\n\t[hideSaveBtn]=\"data.hideSaveBtn === undefined ? false : data.hideSaveBtn\"\r\n\t[saveBtnLabel]=\"saveBtnLabel\"\r\n\t[cancelBtnLabel]=\"cancelBtnLabel\"\r\n\t[showErrorIcon]=\"\r\n\t\tdata.showErrorIcon === undefined ? false : data.showErrorIcon\r\n\t\"\r\n\t[hideCloseIcon]=\"\r\n\t\tdata.hideCloseIcon === undefined ? false : data.hideCloseIcon\r\n\t\"\r\n\t(saveEmit)=\"onSave($event)\"\r\n>\r\n\t<div class=\"mapping-dialog\">\r\n\t\t{{ description }}\r\n\t</div>\r\n</kt-common-dialog>\r\n", styles: [".mapping-dialog{color:#44566c;font-family:Arial;font-size:12px;line-height:16px;white-space:pre-line}\n"], dependencies: [{ kind: "component", type: CommonDialogComponent, selector: "kt-common-dialog", inputs: ["hideHeader", "hideCloseIcon", "hideCloseBtn", "hideSaveBtn", "saveBtnLabel", "cancelBtnLabel", "showErrorIcon", "size", "title", "loading"], outputs: ["saveEmit", "closeEmit"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommonDeleteComponent, selector: "kt-common-delete-dialog", ngImport: i0, template: "<rs-common-dialog\r\n  [size]=\"size\"\r\n  [title]=\"title\"\r\n  [hideHeader]=\"false\"\r\n  [hideCloseBtn]=\"data.hideCloseBtn === undefined ? false : data.hideCloseBtn\"\r\n  [hideSaveBtn]=\"data.hideSaveBtn === undefined ? false : data.hideSaveBtn\"\r\n  [hideDiscardBtn]=\"\r\n    data.hideDiscardBtn === undefined ? true : data.hideDiscardBtn\r\n  \"\r\n  [saveBtnLabel]=\"saveBtnLabel\"\r\n  [cancelBtnLabel]=\"cancelBtnLabel\"\r\n  [discardBtnLabel]=\"discardBtnLabel\"\r\n  [showErrorIcon]=\"\r\n    data.showErrorIcon === undefined ? false : data.showErrorIcon\r\n  \"\r\n  [hideCloseIcon]=\"\r\n    data.hideCloseIcon === undefined ? false : data.hideCloseIcon\r\n  \"\r\n\t[showZoomBtn]=\"data.showZoomBtn\"\r\n>\r\n  <div class=\"mapping-dialog\">\r\n    <div *ngIf=\"isMultiLine\">\r\n      <div *ngFor=\"let item of description\" class=\"description-item\">\r\n        {{ item }}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"!isMultiLine\">\r\n      {{description}}\r\n    </div>\r\n  </div>\r\n</rs-common-dialog>\r\n", styles: [".mapping-dialog{color:#44566c;font-family:Arial;font-size:12px;line-height:16px;white-space:pre-line}.mapping-dialog .description-item{line-height:26px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CommonDialogComponent, selector: "rs-common-dialog", inputs: ["hideHeader", "hideCloseIcon", "hideCloseBtn", "hideSaveBtn", "hideDiscardBtn", "saveBtnLabel", "cancelBtnLabel", "discardBtnLabel", "showErrorIcon", "showZoomBtn", "onCloseRequest", "dialogStyle", "size", "title", "loading"], outputs: ["saveEmit", "closeEmit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommonDeleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: "kt-common-delete-dialog", template: "<kt-common-dialog\r\n\t[size]=\"size\"\r\n\t[title]=\"title\"\r\n\t[hideHeader]=\"false\"\r\n\t[hideCloseBtn]=\"data.hideCloseBtn === undefined ? false : data.hideCloseBtn\"\r\n\t[hideSaveBtn]=\"data.hideSaveBtn === undefined ? false : data.hideSaveBtn\"\r\n\t[saveBtnLabel]=\"saveBtnLabel\"\r\n\t[cancelBtnLabel]=\"cancelBtnLabel\"\r\n\t[showErrorIcon]=\"\r\n\t\tdata.showErrorIcon === undefined ? false : data.showErrorIcon\r\n\t\"\r\n\t[hideCloseIcon]=\"\r\n\t\tdata.hideCloseIcon === undefined ? false : data.hideCloseIcon\r\n\t\"\r\n\t(saveEmit)=\"onSave($event)\"\r\n>\r\n\t<div class=\"mapping-dialog\">\r\n\t\t{{ description }}\r\n\t</div>\r\n</kt-common-dialog>\r\n", styles: [".mapping-dialog{color:#44566c;font-family:Arial;font-size:12px;line-height:16px;white-space:pre-line}\n"] }]
+            args: [{ selector: "kt-common-delete-dialog", template: "<rs-common-dialog\r\n  [size]=\"size\"\r\n  [title]=\"title\"\r\n  [hideHeader]=\"false\"\r\n  [hideCloseBtn]=\"data.hideCloseBtn === undefined ? false : data.hideCloseBtn\"\r\n  [hideSaveBtn]=\"data.hideSaveBtn === undefined ? false : data.hideSaveBtn\"\r\n  [hideDiscardBtn]=\"\r\n    data.hideDiscardBtn === undefined ? true : data.hideDiscardBtn\r\n  \"\r\n  [saveBtnLabel]=\"saveBtnLabel\"\r\n  [cancelBtnLabel]=\"cancelBtnLabel\"\r\n  [discardBtnLabel]=\"discardBtnLabel\"\r\n  [showErrorIcon]=\"\r\n    data.showErrorIcon === undefined ? false : data.showErrorIcon\r\n  \"\r\n  [hideCloseIcon]=\"\r\n    data.hideCloseIcon === undefined ? false : data.hideCloseIcon\r\n  \"\r\n\t[showZoomBtn]=\"data.showZoomBtn\"\r\n>\r\n  <div class=\"mapping-dialog\">\r\n    <div *ngIf=\"isMultiLine\">\r\n      <div *ngFor=\"let item of description\" class=\"description-item\">\r\n        {{ item }}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"!isMultiLine\">\r\n      {{description}}\r\n    </div>\r\n  </div>\r\n</rs-common-dialog>\r\n", styles: [".mapping-dialog{color:#44566c;font-family:Arial;font-size:12px;line-height:16px;white-space:pre-line}.mapping-dialog .description-item{line-height:26px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1163,11 +1271,14 @@ class DialogService {
     showUnsavedChanges(data) {
         let defaultData = {
             title: this.translation.UNSAVED_CHANGES || ".UNSAVED_CHANGES",
-            description: this.translation
-                .YOU_HAVE_UNSAVED_CHANGED_ARE_YOU_SURE_YOU_WANT_TO_DISCARD_THEM ||
-                ".YOU_HAVE_UNSAVED_CHANGED_ARE_YOU_SURE_YOU_WANT_TO_DISCARD_THEM",
-            saveBtnLabel: this.translation.DISCARD_CHANGES || ".DISCARD_CHANGES",
-            cancelBtnLabel: this.translation.CONTINUE_EDITING || ".CONTINUE_EDITING",
+            description: this.translation.YOU_HAVE_UNSAVED_CHANGES_DO_YOU_WANT_TO_CONTINUE ||
+                ".YOU_HAVE_UNSAVED_CHANGES_DO_YOU_WANT_TO_CONTINUE",
+            saveBtnLabel: this.translation.SAVE_AND_LEAVE || ".SAVE_AND_LEAVE",
+            discardBtnLabel: this.translation.DISCARD_AND_LEAVE || ".DISCARD_AND_LEAVE",
+            cancelBtnLabel: this.translation.CANCEL || ".CANCEL",
+            hideDiscardBtn: false,
+            size: "medium",
+            hideCloseIcon: true,
         };
         if (data) {
             data = Object.assign(defaultData, data);
@@ -1220,6 +1331,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.MatSnackBar }, { type: i1$1.MatDialog }]; } });
 
+class TruncatedTextToggleComponent {
+    data;
+    maximum;
+    showData = "";
+    showExpandMoreBtn = false;
+    showCollapseBtn = false;
+    constructor() { }
+    ngOnInit() {
+        if (this.data.length > this.maximum) {
+            this.showExpandMoreBtn = true;
+            this.showData = this.data.substring(0, this.maximum) + "...";
+        }
+        else {
+            this.showData = this.data;
+        }
+    }
+    showAll() {
+        this.showExpandMoreBtn = false;
+        this.showCollapseBtn = true;
+        this.showData = this.data;
+    }
+    collapse() {
+        this.showExpandMoreBtn = true;
+        this.showCollapseBtn = false;
+        this.showData = this.data.substring(0, this.maximum) + "...";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TruncatedTextToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TruncatedTextToggleComponent, selector: "truncated-text-toggle", inputs: { data: "data", maximum: "maximum" }, ngImport: i0, template: "<div class=\"click-show-more-content\">\r\n  <span>{{ showData }}</span>\r\n  <span *ngIf=\"showExpandMoreBtn\" class=\"show-more\" (click)=\"showAll()\">\r\n    Read More\r\n    <img src=\"./assets/img/click_show_more_icon.svg\" alt=\"\" />\r\n  </span>\r\n  <div\r\n    class=\"show-more collapse-btn\"\r\n    (click)=\"collapse()\"\r\n    *ngIf=\"showCollapseBtn\"\r\n  >\r\n    Collapse\r\n    <img src=\"./assets/img/click_show_more_icon.svg\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [".click-show-more-content{word-wrap:break-word}.click-show-more-content .show-more{cursor:pointer;color:#1364b3;font-size:11px;margin-left:4px;vertical-align:middle}.click-show-more-content .show-more img{margin-left:2px;vertical-align:middle}.click-show-more-content .collapse-btn{display:flex;align-items:center;justify-content:flex-end}.click-show-more-content .collapse-btn img{transform:rotate(-180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TruncatedTextToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "truncated-text-toggle", template: "<div class=\"click-show-more-content\">\r\n  <span>{{ showData }}</span>\r\n  <span *ngIf=\"showExpandMoreBtn\" class=\"show-more\" (click)=\"showAll()\">\r\n    Read More\r\n    <img src=\"./assets/img/click_show_more_icon.svg\" alt=\"\" />\r\n  </span>\r\n  <div\r\n    class=\"show-more collapse-btn\"\r\n    (click)=\"collapse()\"\r\n    *ngIf=\"showCollapseBtn\"\r\n  >\r\n    Collapse\r\n    <img src=\"./assets/img/click_show_more_icon.svg\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [".click-show-more-content{word-wrap:break-word}.click-show-more-content .show-more{cursor:pointer;color:#1364b3;font-size:11px;margin-left:4px;vertical-align:middle}.click-show-more-content .show-more img{margin-left:2px;vertical-align:middle}.click-show-more-content .collapse-btn{display:flex;align-items:center;justify-content:flex-end}.click-show-more-content .collapse-btn img{transform:rotate(-180deg)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], maximum: [{
+                type: Input
+            }] } });
+
 class RsCommentaryComponent {
     cf;
     dialog;
@@ -1241,11 +1390,11 @@ class RsCommentaryComponent {
         lastModifiedOn: "lastModifiedOn",
         messageBody: "messageBody",
     };
+    dateTimePipeFormat = "dd-MMM-yyyy hh:mm:a";
     actionComplete = new EventEmitter();
     commentVal = "";
     replyVal = "";
     editCommentVal = "";
-    dateTimePipeFormat = "dd-MMM-yyyy hh:mm:a";
     translation;
     ngOnInit() {
         this.getInfo();
@@ -1286,12 +1435,12 @@ class RsCommentaryComponent {
     }
     deleteComment(item) {
         const dialogRef = this.dialog.showCommonDilaog({
-            title: "Delete Comment?",
-            description: "Are you sure you want to delete this Comment?",
+            title: this.translation["DELETE_COMMENT"],
+            description: this.translation["DELETE_COMMENT_CONFIRM"],
             saveBtnLabel: this.translation.DELETE,
         });
         dialogRef.afterClosed().subscribe((res) => {
-            if (!res) {
+            if (res === "close") {
                 return;
             }
             const idx = this.commentData.findIndex((ele) => ele[this.filedsKey.messageId] === item[this.filedsKey.messageId]);
@@ -1327,11 +1476,17 @@ class RsCommentaryComponent {
     }
     adjustTextareaHeight(e) {
         const textarea = e.target;
-        textarea.style.minHeight = "auto";
-        textarea.style.minHeight = textarea.scrollHeight + "px";
+        if (e.type === "focus" && textarea.value) {
+            textarea.style.height = "auto";
+            textarea.style.height = textarea.scrollHeight + "px";
+        }
+        else if (e.type === "input") {
+            textarea.style.height = "auto";
+            textarea.style.height = textarea.scrollHeight + "px";
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RsCommentaryComponent, deps: [{ token: CommonFunctionService }, { token: DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RsCommentaryComponent, selector: "rs-commentary", inputs: { displayName: "displayName", commentData: "commentData", editPermission: "editPermission", deletePermission: "deletePermission", isReadOnly: "isReadOnly", filedsKey: "filedsKey" }, outputs: { actionComplete: "actionComplete" }, ngImport: i0, template: "<div class=\"rs-commentary-wrap\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n    [ngTemplateOutletContext]=\"{ type: 'comment' }\"\r\n  ></ng-container>\r\n  <div class=\"reply-box\">\r\n    <div *ngFor=\"let item of commentData\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"replyItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'comment', item: item }\"\r\n      ></ng-container>\r\n      <div class=\"sub-reply-list\">\r\n        <ng-container\r\n          *ngFor=\"\r\n            let sub of item.isExpanded\r\n              ? item[filedsKey.commentaries]\r\n              : item[filedsKey.commentaries].slice(0, 3)\r\n          \"\r\n          [ngTemplateOutlet]=\"replyItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'sub', item: sub }\"\r\n        ></ng-container>\r\n      </div>\r\n      <button\r\n        class=\"e-btn text\"\r\n        *ngIf=\"item[filedsKey.commentaries].length > 3\"\r\n        (click)=\"item.isExpanded = !item.isExpanded\"\r\n        style=\"margin-bottom: 8px\"\r\n      >\r\n        {{\r\n          item.isExpanded\r\n            ? \"Collapse\"\r\n            : \"View All \" + item[filedsKey.commentaries].length + \" Replies\"\r\n        }}\r\n        <img\r\n          class=\"arrow\"\r\n          [ngClass]=\"{ collapse: item.isExpanded }\"\r\n          src=\"../../assets/img/dropdown-arrow.svg\"\r\n          alt=\"\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #commentBoxTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"comment-box\">\r\n    <div class=\"comment-input-wrap\">\r\n      <div class=\"avatar\" *ngIf=\"type !== 'editComment'\">\r\n        {{ cf.rtn(displayName) }}\r\n      </div>\r\n      <textarea\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-input\"\r\n        rows=\"2\"\r\n        [(ngModel)]=\"commentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'reply'\"\r\n        class=\"e-input\"\r\n        rows=\"2\"\r\n        [(ngModel)]=\"replyVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'editComment'\"\r\n        class=\"e-input\"\r\n        rows=\"2\"\r\n        [(ngModel)]=\"editCommentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n    </div>\r\n    <div class=\"btn-wrap\">\r\n      <button\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-btn e-primary small\"\r\n        [disabled]=\"commentVal === '' || isReadOnly || !editPermission\"\r\n        (click)=\"addComment()\"\r\n      >\r\n        {{ translation.COMMENT || \".COMMENT\" }}\r\n      </button>\r\n      <ng-container *ngIf=\"type === 'reply'\">\r\n        <button\r\n          class=\"e-btn small\"\r\n          (click)=\"item.showReplyInput = false; replyVal = ''\"\r\n        >\r\n          {{ translation.CANCEL || \".CANCEL\" }}\r\n        </button>\r\n        <button\r\n          class=\"e-btn e-primary small\"\r\n          [disabled]=\"replyVal === ''\"\r\n          (click)=\"addReply(item)\"\r\n        >\r\n          {{ translation.REPLY || \".REPLY\" }}\r\n        </button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"type === 'editComment'\">\r\n        <button class=\"e-btn text\" (click)=\"item.showCommentEdit = false\">\r\n          <img src=\"../../assets/img/comment-cancel.svg\" alt=\"\" />\r\n        </button>\r\n        <button\r\n          class=\"e-btn text\"\r\n          [disabled]=\"editCommentVal === ''\"\r\n          (click)=\"updateComment(item)\"\r\n        >\r\n          <img src=\"../../assets/img/comment-check.svg\" alt=\"\" />\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #replyItemTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"reply-item\" [ngClass]=\"{ comment: type === 'comment' }\">\r\n    <div class=\"avatar\">\r\n      {{ cf.rtn(item[filedsKey.ownerName]) }}\r\n    </div>\r\n    <div class=\"owner-wrap\">\r\n      <div class=\"owner-info\">\r\n        <div class=\"name\">\r\n          {{ item[filedsKey.ownerName] }}\r\n        </div>\r\n        <div class=\"time\">\r\n          {{ item[filedsKey.lastModifiedOn] | date : dateTimePipeFormat }}\r\n        </div>\r\n      </div>\r\n      <div class=\"message-wrap\">\r\n        <div class=\"message\" *ngIf=\"!item.showCommentEdit\">\r\n          {{ item[filedsKey.messageBody] }}\r\n        </div>\r\n        <ng-container\r\n          *ngIf=\"item.showCommentEdit\"\r\n          [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'editComment', item: item }\"\r\n        ></ng-container>\r\n      </div>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          type === 'comment' && !item.showReplyInput && !item.showCommentEdit\r\n        \"\r\n        class=\"e-btn text\"\r\n        (click)=\"item.showReplyInput = true\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n      >\r\n        {{ translation.REPLY || \".REPLY\" }}\r\n      </button>\r\n      <ng-container\r\n        *ngIf=\"item.showReplyInput\"\r\n        [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'reply', item: item }\"\r\n      ></ng-container>\r\n\r\n      <rs-grid-action *ngIf=\"type === 'comment'\">\r\n        <rs-grid-action-item\r\n          image=\"Edit\"\r\n          [text]=\"translation.EDIT\"\r\n          [disabled]=\"isReadOnly || !editPermission\"\r\n          (click)=\"editComment(item)\"\r\n        ></rs-grid-action-item>\r\n        <rs-grid-action-item\r\n          image=\"Delete\"\r\n          [text]=\"translation.DELETE\"\r\n          [disabled]=\"isReadOnly || !deletePermission\"\r\n          (click)=\"deleteComment(item)\"\r\n        ></rs-grid-action-item>\r\n      </rs-grid-action>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".rs-commentary-wrap{width:100%;height:100%;padding:32px;display:flex;flex-direction:column}.rs-commentary-wrap .comment-box{width:100%}.rs-commentary-wrap .comment-box .comment-input-wrap{margin-bottom:12px;display:flex;gap:12px}.rs-commentary-wrap .comment-box .comment-input-wrap .e-input{flex:1;width:0}.rs-commentary-wrap .comment-box .btn-wrap{display:flex;justify-content:flex-end;gap:12px}.rs-commentary-wrap .comment-box .btn-wrap .e-btn.text{padding:4px}.rs-commentary-wrap .reply-box{height:0;flex:1;overflow:auto;margin-top:16px;margin-right:-32px;padding-right:32px}.rs-commentary-wrap .reply-box .sub-reply-list{padding-left:40px}.rs-commentary-wrap .reply-box .e-btn.text{padding:0!important;min-width:auto;height:auto;color:#6c7c90!important}.rs-commentary-wrap .reply-box .e-btn.text:hover{background:transparent!important;color:#1364b3!important}.rs-commentary-wrap .reply-box .e-btn.text:focus{background:transparent!important;color:#6c7c90!important}.rs-commentary-wrap .reply-box .arrow.collapse{transform:rotate(180deg)}.rs-commentary-wrap .reply-box .reply-item{display:flex;gap:12px;padding:12px 0}.rs-commentary-wrap .reply-box .reply-item.comment{border-top:1px solid #eaedf0}.rs-commentary-wrap .reply-box .reply-item.comment:hover{background-color:#f6faff}.rs-commentary-wrap .reply-box .reply-item.comment:hover rs-grid-action{display:block}.rs-commentary-wrap .reply-box .reply-item rs-grid-action{display:none;position:absolute;cursor:pointer;top:-4px;right:8px}.rs-commentary-wrap .reply-box .owner-wrap{flex:1;width:0;position:relative}.rs-commentary-wrap .reply-box .owner-wrap .owner-info{display:flex;align-items:center;gap:12px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .name{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:700;line-height:14px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .time{color:#6c7c90;font-family:Arial;font-size:10px;font-style:normal;font-weight:400;line-height:12px}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap{padding:8px 0}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap .message{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.rs-commentary-wrap .avatar{width:32px;height:32px;border-radius:100%;border:1px solid rgba(108,124,144,.4);color:#44566c;display:flex;align-items:center;justify-content:center;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GridActionComponent, selector: "rs-grid-action" }, { kind: "component", type: GridActionItemComponent, selector: "rs-grid-action-item", inputs: ["image", "text", "disabled"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RsCommentaryComponent, selector: "rs-commentary", inputs: { displayName: "displayName", commentData: "commentData", editPermission: "editPermission", deletePermission: "deletePermission", isReadOnly: "isReadOnly", filedsKey: "filedsKey", dateTimePipeFormat: "dateTimePipeFormat" }, outputs: { actionComplete: "actionComplete" }, ngImport: i0, template: "<div class=\"rs-commentary-wrap\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n    [ngTemplateOutletContext]=\"{ type: 'comment' }\"\r\n  ></ng-container>\r\n  <div class=\"reply-box\">\r\n    <div *ngFor=\"let item of commentData\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"replyItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'comment', item: item }\"\r\n      ></ng-container>\r\n      <div class=\"sub-reply-list\">\r\n        <ng-container\r\n          *ngFor=\"\r\n            let sub of item.isExpanded\r\n              ? item[filedsKey.commentaries]\r\n              : item[filedsKey.commentaries].slice(0, 3)\r\n          \"\r\n          [ngTemplateOutlet]=\"replyItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'sub', item: sub }\"\r\n        ></ng-container>\r\n      </div>\r\n      <button\r\n        class=\"e-btn text\"\r\n        *ngIf=\"item[filedsKey.commentaries].length > 3\"\r\n        (click)=\"item.isExpanded = !item.isExpanded\"\r\n        style=\"margin-bottom: 8px\"\r\n      >\r\n        {{\r\n          item.isExpanded\r\n            ? \"Collapse\"\r\n            : \"View All \" + item[filedsKey.commentaries].length + \" Replies\"\r\n        }}\r\n        <img\r\n          class=\"arrow\"\r\n          [ngClass]=\"{ collapse: item.isExpanded }\"\r\n          src=\"../../assets/img/dropdown-arrow.svg\"\r\n          alt=\"\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #commentBoxTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"comment-box\">\r\n    <div class=\"comment-input-wrap\">\r\n      <div class=\"avatar\" *ngIf=\"type !== 'editComment'\">\r\n        {{ cf.rtn(displayName) }}\r\n      </div>\r\n      <textarea\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"commentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n        [placeholder]=\"translation.WRITE_YOUR_COMMENT || '.WRITE_YOUR_COMMENT'\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'reply'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"replyVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        [placeholder]=\"translation.WRITE_YOUR_COMMENT || '.WRITE_YOUR_COMMENT'\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'editComment'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"editCommentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        [placeholder]=\"translation.WRITE_YOUR_COMMENT || '.WRITE_YOUR_COMMENT'\"\r\n      ></textarea>\r\n    </div>\r\n    <div class=\"btn-wrap\">\r\n      <button\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-btn e-primary small\"\r\n        [disabled]=\"commentVal === '' || isReadOnly || !editPermission\"\r\n        (click)=\"addComment()\"\r\n      >\r\n        {{ translation.COMMENT || \".COMMENT\" }}\r\n      </button>\r\n      <ng-container *ngIf=\"type === 'reply'\">\r\n        <button\r\n          class=\"e-btn small\"\r\n          (click)=\"item.showReplyInput = false; replyVal = ''\"\r\n        >\r\n          {{ translation.CANCEL || \".CANCEL\" }}\r\n        </button>\r\n        <button\r\n          class=\"e-btn e-primary small\"\r\n          [disabled]=\"replyVal === ''\"\r\n          (click)=\"addReply(item)\"\r\n        >\r\n          {{ translation.REPLY || \".REPLY\" }}\r\n        </button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"type === 'editComment'\">\r\n        <button class=\"e-btn text\" (click)=\"item.showCommentEdit = false\">\r\n          <img src=\"../../assets/img/comment-cancel.svg\" alt=\"\" />\r\n        </button>\r\n        <button\r\n          class=\"e-btn text\"\r\n          [disabled]=\"editCommentVal === ''\"\r\n          (click)=\"updateComment(item)\"\r\n        >\r\n          <img src=\"../../assets/img/comment-check.svg\" alt=\"\" />\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #replyItemTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"reply-item\" [ngClass]=\"{ comment: type === 'comment' }\">\r\n    <div class=\"avatar\">\r\n      {{ cf.rtn(item[filedsKey.ownerName]) }}\r\n    </div>\r\n    <div class=\"owner-wrap\">\r\n      <div class=\"owner-info\">\r\n        <div class=\"name\">\r\n          {{ item[filedsKey.ownerName] }}\r\n        </div>\r\n        <div class=\"time\">\r\n          {{ item[filedsKey.lastModifiedOn] | date : dateTimePipeFormat }}\r\n        </div>\r\n      </div>\r\n      <div class=\"message-wrap\">\r\n        <div class=\"message\" *ngIf=\"!item.showCommentEdit\">\r\n          <!-- {{ item[filedsKey.messageBody] }} -->\r\n          <truncated-text-toggle\r\n            [maximum]=\"1050\"\r\n            [data]=\"item[filedsKey.messageBody]\"\r\n          >\r\n          </truncated-text-toggle>\r\n        </div>\r\n        <ng-container\r\n          *ngIf=\"item.showCommentEdit\"\r\n          [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'editComment', item: item }\"\r\n        ></ng-container>\r\n      </div>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          type === 'comment' && !item.showReplyInput && !item.showCommentEdit\r\n        \"\r\n        class=\"e-btn text\"\r\n        (click)=\"item.showReplyInput = true\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n      >\r\n        {{ translation.REPLY || \".REPLY\" }}\r\n      </button>\r\n      <ng-container\r\n        *ngIf=\"item.showReplyInput\"\r\n        [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'reply', item: item }\"\r\n      ></ng-container>\r\n\r\n      <rs-grid-action *ngIf=\"type === 'comment'\">\r\n        <rs-grid-action-item\r\n          image=\"Edit\"\r\n          [text]=\"translation.EDIT\"\r\n          [disabled]=\"isReadOnly || !editPermission\"\r\n          (click)=\"editComment(item)\"\r\n        ></rs-grid-action-item>\r\n        <rs-grid-action-item\r\n          image=\"Delete\"\r\n          [text]=\"translation.DELETE\"\r\n          [disabled]=\"isReadOnly || !deletePermission\"\r\n          (click)=\"deleteComment(item)\"\r\n        ></rs-grid-action-item>\r\n      </rs-grid-action>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".rs-commentary-wrap{width:100%;height:100%;padding:32px;display:flex;flex-direction:column}.rs-commentary-wrap .comment-box{width:100%}.rs-commentary-wrap .comment-box .comment-input-wrap{margin-bottom:12px;display:flex;gap:12px}.rs-commentary-wrap .comment-box .comment-input-wrap .e-input{flex:1;width:0;height:62px}.rs-commentary-wrap .comment-box .btn-wrap{display:flex;justify-content:flex-end;gap:12px}.rs-commentary-wrap .comment-box .btn-wrap .e-btn.text{padding:4px}.rs-commentary-wrap .reply-box{height:0;flex:1;overflow:auto;margin-top:16px;margin-right:-32px;padding-right:32px}.rs-commentary-wrap .reply-box .sub-reply-list{padding-left:40px}.rs-commentary-wrap .reply-box .e-btn.text{padding:0!important;min-width:auto;height:auto;color:#6c7c90!important}.rs-commentary-wrap .reply-box .e-btn.text:hover{background:transparent!important;color:#1364b3!important}.rs-commentary-wrap .reply-box .e-btn.text:focus{background:transparent!important;color:#6c7c90!important}.rs-commentary-wrap .reply-box .arrow.collapse{transform:rotate(180deg)}.rs-commentary-wrap .reply-box .reply-item{display:flex;gap:12px;padding:12px 0}.rs-commentary-wrap .reply-box .reply-item.comment{border-top:1px solid #eaedf0}.rs-commentary-wrap .reply-box .reply-item.comment:hover{background-color:#f6faff}.rs-commentary-wrap .reply-box .reply-item.comment:hover rs-grid-action{display:block}.rs-commentary-wrap .reply-box .reply-item rs-grid-action{display:none;position:absolute;cursor:pointer;top:-4px;right:8px}.rs-commentary-wrap .reply-box .owner-wrap{flex:1;width:0;position:relative}.rs-commentary-wrap .reply-box .owner-wrap .owner-info{display:flex;align-items:center;gap:8px;height:28px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .name{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:700;line-height:14px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .time{color:#6c7c90;font-family:Arial;font-size:10px;font-style:normal;font-weight:400;line-height:12px}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap{padding:12px 0}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap .message{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px;padding-right:8px;white-space:pre-wrap}.rs-commentary-wrap .avatar{width:32px;height:32px;border-radius:100%;border:1px solid rgba(108,124,144,.4);color:#44566c;display:flex;align-items:center;justify-content:center;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GridActionComponent, selector: "rs-grid-action" }, { kind: "component", type: GridActionItemComponent, selector: "rs-grid-action-item", inputs: ["image", "text", "disabled", "children", "hideArrow", "disabledOptions"] }, { kind: "component", type: TruncatedTextToggleComponent, selector: "truncated-text-toggle", inputs: ["data", "maximum"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 __decorate([
     Debounce(300)
@@ -1343,11 +1498,11 @@ __decorate([
     Debounce(300)
 ], RsCommentaryComponent.prototype, "addReply", null);
 __decorate([
-    Debounce(300)
+    Debounce(100)
 ], RsCommentaryComponent.prototype, "adjustTextareaHeight", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RsCommentaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-commentary", template: "<div class=\"rs-commentary-wrap\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n    [ngTemplateOutletContext]=\"{ type: 'comment' }\"\r\n  ></ng-container>\r\n  <div class=\"reply-box\">\r\n    <div *ngFor=\"let item of commentData\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"replyItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'comment', item: item }\"\r\n      ></ng-container>\r\n      <div class=\"sub-reply-list\">\r\n        <ng-container\r\n          *ngFor=\"\r\n            let sub of item.isExpanded\r\n              ? item[filedsKey.commentaries]\r\n              : item[filedsKey.commentaries].slice(0, 3)\r\n          \"\r\n          [ngTemplateOutlet]=\"replyItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'sub', item: sub }\"\r\n        ></ng-container>\r\n      </div>\r\n      <button\r\n        class=\"e-btn text\"\r\n        *ngIf=\"item[filedsKey.commentaries].length > 3\"\r\n        (click)=\"item.isExpanded = !item.isExpanded\"\r\n        style=\"margin-bottom: 8px\"\r\n      >\r\n        {{\r\n          item.isExpanded\r\n            ? \"Collapse\"\r\n            : \"View All \" + item[filedsKey.commentaries].length + \" Replies\"\r\n        }}\r\n        <img\r\n          class=\"arrow\"\r\n          [ngClass]=\"{ collapse: item.isExpanded }\"\r\n          src=\"../../assets/img/dropdown-arrow.svg\"\r\n          alt=\"\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #commentBoxTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"comment-box\">\r\n    <div class=\"comment-input-wrap\">\r\n      <div class=\"avatar\" *ngIf=\"type !== 'editComment'\">\r\n        {{ cf.rtn(displayName) }}\r\n      </div>\r\n      <textarea\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-input\"\r\n        rows=\"2\"\r\n        [(ngModel)]=\"commentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'reply'\"\r\n        class=\"e-input\"\r\n        rows=\"2\"\r\n        [(ngModel)]=\"replyVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'editComment'\"\r\n        class=\"e-input\"\r\n        rows=\"2\"\r\n        [(ngModel)]=\"editCommentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        placeholder=\"Write your comment...\"\r\n      ></textarea>\r\n    </div>\r\n    <div class=\"btn-wrap\">\r\n      <button\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-btn e-primary small\"\r\n        [disabled]=\"commentVal === '' || isReadOnly || !editPermission\"\r\n        (click)=\"addComment()\"\r\n      >\r\n        {{ translation.COMMENT || \".COMMENT\" }}\r\n      </button>\r\n      <ng-container *ngIf=\"type === 'reply'\">\r\n        <button\r\n          class=\"e-btn small\"\r\n          (click)=\"item.showReplyInput = false; replyVal = ''\"\r\n        >\r\n          {{ translation.CANCEL || \".CANCEL\" }}\r\n        </button>\r\n        <button\r\n          class=\"e-btn e-primary small\"\r\n          [disabled]=\"replyVal === ''\"\r\n          (click)=\"addReply(item)\"\r\n        >\r\n          {{ translation.REPLY || \".REPLY\" }}\r\n        </button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"type === 'editComment'\">\r\n        <button class=\"e-btn text\" (click)=\"item.showCommentEdit = false\">\r\n          <img src=\"../../assets/img/comment-cancel.svg\" alt=\"\" />\r\n        </button>\r\n        <button\r\n          class=\"e-btn text\"\r\n          [disabled]=\"editCommentVal === ''\"\r\n          (click)=\"updateComment(item)\"\r\n        >\r\n          <img src=\"../../assets/img/comment-check.svg\" alt=\"\" />\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #replyItemTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"reply-item\" [ngClass]=\"{ comment: type === 'comment' }\">\r\n    <div class=\"avatar\">\r\n      {{ cf.rtn(item[filedsKey.ownerName]) }}\r\n    </div>\r\n    <div class=\"owner-wrap\">\r\n      <div class=\"owner-info\">\r\n        <div class=\"name\">\r\n          {{ item[filedsKey.ownerName] }}\r\n        </div>\r\n        <div class=\"time\">\r\n          {{ item[filedsKey.lastModifiedOn] | date : dateTimePipeFormat }}\r\n        </div>\r\n      </div>\r\n      <div class=\"message-wrap\">\r\n        <div class=\"message\" *ngIf=\"!item.showCommentEdit\">\r\n          {{ item[filedsKey.messageBody] }}\r\n        </div>\r\n        <ng-container\r\n          *ngIf=\"item.showCommentEdit\"\r\n          [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'editComment', item: item }\"\r\n        ></ng-container>\r\n      </div>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          type === 'comment' && !item.showReplyInput && !item.showCommentEdit\r\n        \"\r\n        class=\"e-btn text\"\r\n        (click)=\"item.showReplyInput = true\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n      >\r\n        {{ translation.REPLY || \".REPLY\" }}\r\n      </button>\r\n      <ng-container\r\n        *ngIf=\"item.showReplyInput\"\r\n        [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'reply', item: item }\"\r\n      ></ng-container>\r\n\r\n      <rs-grid-action *ngIf=\"type === 'comment'\">\r\n        <rs-grid-action-item\r\n          image=\"Edit\"\r\n          [text]=\"translation.EDIT\"\r\n          [disabled]=\"isReadOnly || !editPermission\"\r\n          (click)=\"editComment(item)\"\r\n        ></rs-grid-action-item>\r\n        <rs-grid-action-item\r\n          image=\"Delete\"\r\n          [text]=\"translation.DELETE\"\r\n          [disabled]=\"isReadOnly || !deletePermission\"\r\n          (click)=\"deleteComment(item)\"\r\n        ></rs-grid-action-item>\r\n      </rs-grid-action>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".rs-commentary-wrap{width:100%;height:100%;padding:32px;display:flex;flex-direction:column}.rs-commentary-wrap .comment-box{width:100%}.rs-commentary-wrap .comment-box .comment-input-wrap{margin-bottom:12px;display:flex;gap:12px}.rs-commentary-wrap .comment-box .comment-input-wrap .e-input{flex:1;width:0}.rs-commentary-wrap .comment-box .btn-wrap{display:flex;justify-content:flex-end;gap:12px}.rs-commentary-wrap .comment-box .btn-wrap .e-btn.text{padding:4px}.rs-commentary-wrap .reply-box{height:0;flex:1;overflow:auto;margin-top:16px;margin-right:-32px;padding-right:32px}.rs-commentary-wrap .reply-box .sub-reply-list{padding-left:40px}.rs-commentary-wrap .reply-box .e-btn.text{padding:0!important;min-width:auto;height:auto;color:#6c7c90!important}.rs-commentary-wrap .reply-box .e-btn.text:hover{background:transparent!important;color:#1364b3!important}.rs-commentary-wrap .reply-box .e-btn.text:focus{background:transparent!important;color:#6c7c90!important}.rs-commentary-wrap .reply-box .arrow.collapse{transform:rotate(180deg)}.rs-commentary-wrap .reply-box .reply-item{display:flex;gap:12px;padding:12px 0}.rs-commentary-wrap .reply-box .reply-item.comment{border-top:1px solid #eaedf0}.rs-commentary-wrap .reply-box .reply-item.comment:hover{background-color:#f6faff}.rs-commentary-wrap .reply-box .reply-item.comment:hover rs-grid-action{display:block}.rs-commentary-wrap .reply-box .reply-item rs-grid-action{display:none;position:absolute;cursor:pointer;top:-4px;right:8px}.rs-commentary-wrap .reply-box .owner-wrap{flex:1;width:0;position:relative}.rs-commentary-wrap .reply-box .owner-wrap .owner-info{display:flex;align-items:center;gap:12px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .name{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:700;line-height:14px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .time{color:#6c7c90;font-family:Arial;font-size:10px;font-style:normal;font-weight:400;line-height:12px}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap{padding:8px 0}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap .message{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.rs-commentary-wrap .avatar{width:32px;height:32px;border-radius:100%;border:1px solid rgba(108,124,144,.4);color:#44566c;display:flex;align-items:center;justify-content:center;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px}\n"] }]
+            args: [{ selector: "rs-commentary", template: "<div class=\"rs-commentary-wrap\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n    [ngTemplateOutletContext]=\"{ type: 'comment' }\"\r\n  ></ng-container>\r\n  <div class=\"reply-box\">\r\n    <div *ngFor=\"let item of commentData\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"replyItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'comment', item: item }\"\r\n      ></ng-container>\r\n      <div class=\"sub-reply-list\">\r\n        <ng-container\r\n          *ngFor=\"\r\n            let sub of item.isExpanded\r\n              ? item[filedsKey.commentaries]\r\n              : item[filedsKey.commentaries].slice(0, 3)\r\n          \"\r\n          [ngTemplateOutlet]=\"replyItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'sub', item: sub }\"\r\n        ></ng-container>\r\n      </div>\r\n      <button\r\n        class=\"e-btn text\"\r\n        *ngIf=\"item[filedsKey.commentaries].length > 3\"\r\n        (click)=\"item.isExpanded = !item.isExpanded\"\r\n        style=\"margin-bottom: 8px\"\r\n      >\r\n        {{\r\n          item.isExpanded\r\n            ? \"Collapse\"\r\n            : \"View All \" + item[filedsKey.commentaries].length + \" Replies\"\r\n        }}\r\n        <img\r\n          class=\"arrow\"\r\n          [ngClass]=\"{ collapse: item.isExpanded }\"\r\n          src=\"../../assets/img/dropdown-arrow.svg\"\r\n          alt=\"\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #commentBoxTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"comment-box\">\r\n    <div class=\"comment-input-wrap\">\r\n      <div class=\"avatar\" *ngIf=\"type !== 'editComment'\">\r\n        {{ cf.rtn(displayName) }}\r\n      </div>\r\n      <textarea\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"commentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n        [placeholder]=\"translation.WRITE_YOUR_COMMENT || '.WRITE_YOUR_COMMENT'\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'reply'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"replyVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        [placeholder]=\"translation.WRITE_YOUR_COMMENT || '.WRITE_YOUR_COMMENT'\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'editComment'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"editCommentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        [placeholder]=\"translation.WRITE_YOUR_COMMENT || '.WRITE_YOUR_COMMENT'\"\r\n      ></textarea>\r\n    </div>\r\n    <div class=\"btn-wrap\">\r\n      <button\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-btn e-primary small\"\r\n        [disabled]=\"commentVal === '' || isReadOnly || !editPermission\"\r\n        (click)=\"addComment()\"\r\n      >\r\n        {{ translation.COMMENT || \".COMMENT\" }}\r\n      </button>\r\n      <ng-container *ngIf=\"type === 'reply'\">\r\n        <button\r\n          class=\"e-btn small\"\r\n          (click)=\"item.showReplyInput = false; replyVal = ''\"\r\n        >\r\n          {{ translation.CANCEL || \".CANCEL\" }}\r\n        </button>\r\n        <button\r\n          class=\"e-btn e-primary small\"\r\n          [disabled]=\"replyVal === ''\"\r\n          (click)=\"addReply(item)\"\r\n        >\r\n          {{ translation.REPLY || \".REPLY\" }}\r\n        </button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"type === 'editComment'\">\r\n        <button class=\"e-btn text\" (click)=\"item.showCommentEdit = false\">\r\n          <img src=\"../../assets/img/comment-cancel.svg\" alt=\"\" />\r\n        </button>\r\n        <button\r\n          class=\"e-btn text\"\r\n          [disabled]=\"editCommentVal === ''\"\r\n          (click)=\"updateComment(item)\"\r\n        >\r\n          <img src=\"../../assets/img/comment-check.svg\" alt=\"\" />\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #replyItemTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"reply-item\" [ngClass]=\"{ comment: type === 'comment' }\">\r\n    <div class=\"avatar\">\r\n      {{ cf.rtn(item[filedsKey.ownerName]) }}\r\n    </div>\r\n    <div class=\"owner-wrap\">\r\n      <div class=\"owner-info\">\r\n        <div class=\"name\">\r\n          {{ item[filedsKey.ownerName] }}\r\n        </div>\r\n        <div class=\"time\">\r\n          {{ item[filedsKey.lastModifiedOn] | date : dateTimePipeFormat }}\r\n        </div>\r\n      </div>\r\n      <div class=\"message-wrap\">\r\n        <div class=\"message\" *ngIf=\"!item.showCommentEdit\">\r\n          <!-- {{ item[filedsKey.messageBody] }} -->\r\n          <truncated-text-toggle\r\n            [maximum]=\"1050\"\r\n            [data]=\"item[filedsKey.messageBody]\"\r\n          >\r\n          </truncated-text-toggle>\r\n        </div>\r\n        <ng-container\r\n          *ngIf=\"item.showCommentEdit\"\r\n          [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'editComment', item: item }\"\r\n        ></ng-container>\r\n      </div>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          type === 'comment' && !item.showReplyInput && !item.showCommentEdit\r\n        \"\r\n        class=\"e-btn text\"\r\n        (click)=\"item.showReplyInput = true\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n      >\r\n        {{ translation.REPLY || \".REPLY\" }}\r\n      </button>\r\n      <ng-container\r\n        *ngIf=\"item.showReplyInput\"\r\n        [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'reply', item: item }\"\r\n      ></ng-container>\r\n\r\n      <rs-grid-action *ngIf=\"type === 'comment'\">\r\n        <rs-grid-action-item\r\n          image=\"Edit\"\r\n          [text]=\"translation.EDIT\"\r\n          [disabled]=\"isReadOnly || !editPermission\"\r\n          (click)=\"editComment(item)\"\r\n        ></rs-grid-action-item>\r\n        <rs-grid-action-item\r\n          image=\"Delete\"\r\n          [text]=\"translation.DELETE\"\r\n          [disabled]=\"isReadOnly || !deletePermission\"\r\n          (click)=\"deleteComment(item)\"\r\n        ></rs-grid-action-item>\r\n      </rs-grid-action>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".rs-commentary-wrap{width:100%;height:100%;padding:32px;display:flex;flex-direction:column}.rs-commentary-wrap .comment-box{width:100%}.rs-commentary-wrap .comment-box .comment-input-wrap{margin-bottom:12px;display:flex;gap:12px}.rs-commentary-wrap .comment-box .comment-input-wrap .e-input{flex:1;width:0;height:62px}.rs-commentary-wrap .comment-box .btn-wrap{display:flex;justify-content:flex-end;gap:12px}.rs-commentary-wrap .comment-box .btn-wrap .e-btn.text{padding:4px}.rs-commentary-wrap .reply-box{height:0;flex:1;overflow:auto;margin-top:16px;margin-right:-32px;padding-right:32px}.rs-commentary-wrap .reply-box .sub-reply-list{padding-left:40px}.rs-commentary-wrap .reply-box .e-btn.text{padding:0!important;min-width:auto;height:auto;color:#6c7c90!important}.rs-commentary-wrap .reply-box .e-btn.text:hover{background:transparent!important;color:#1364b3!important}.rs-commentary-wrap .reply-box .e-btn.text:focus{background:transparent!important;color:#6c7c90!important}.rs-commentary-wrap .reply-box .arrow.collapse{transform:rotate(180deg)}.rs-commentary-wrap .reply-box .reply-item{display:flex;gap:12px;padding:12px 0}.rs-commentary-wrap .reply-box .reply-item.comment{border-top:1px solid #eaedf0}.rs-commentary-wrap .reply-box .reply-item.comment:hover{background-color:#f6faff}.rs-commentary-wrap .reply-box .reply-item.comment:hover rs-grid-action{display:block}.rs-commentary-wrap .reply-box .reply-item rs-grid-action{display:none;position:absolute;cursor:pointer;top:-4px;right:8px}.rs-commentary-wrap .reply-box .owner-wrap{flex:1;width:0;position:relative}.rs-commentary-wrap .reply-box .owner-wrap .owner-info{display:flex;align-items:center;gap:8px;height:28px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .name{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:700;line-height:14px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .time{color:#6c7c90;font-family:Arial;font-size:10px;font-style:normal;font-weight:400;line-height:12px}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap{padding:12px 0}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap .message{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px;padding-right:8px;white-space:pre-wrap}.rs-commentary-wrap .avatar{width:32px;height:32px;border-radius:100%;border:1px solid rgba(108,124,144,.4);color:#44566c;display:flex;align-items:center;justify-content:center;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px}\n"] }]
         }], ctorParameters: function () { return [{ type: CommonFunctionService }, { type: DialogService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { displayName: [{
                 type: Input
             }], commentData: [{
@@ -1360,52 +1515,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], filedsKey: [{
                 type: Input
+            }], dateTimePipeFormat: [{
+                type: Input
             }], actionComplete: [{
                 type: Output
             }], addComment: [], deleteComment: [], addReply: [], adjustTextareaHeight: [] } });
 
+// 组件类
+class SearchInputComponent {
+    constructor() { }
+    placeholder = "";
+    hanleSearch = new EventEmitter();
+    handleInput = new EventEmitter();
+    debouncedInput;
+    searchValue = "";
+    translation;
+    ngOnInit() {
+        this.getInfo();
+        this.debouncedInput = debounce(() => {
+            this.onSeach();
+        }, 300);
+    }
+    getInfo() {
+        this.translation = JSON.parse(localStorage.getItem("translation"));
+        this.placeholder = this.placeholder || this.translation.SEARCH;
+    }
+    onInput(e) {
+        this.handleInput.emit(e.value);
+        this.debouncedInput();
+    }
+    onSeach() {
+        this.hanleSearch.emit(this.searchValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchInputComponent, selector: "rs-search-input", inputs: { placeholder: "placeholder" }, outputs: { hanleSearch: "hanleSearch", handleInput: "handleInput" }, ngImport: i0, template: "<div class=\"rs-search-input\">\r\n  <ejs-textbox\r\n    type=\"text\"\r\n    class=\"e-input\"\r\n    [(ngModel)]=\"searchValue\"\r\n    (input)=\"onInput($event)\"\r\n    [placeholder]=\"placeholder\"\r\n    [showClearButton]=\"true\"\r\n    autocomplete=\"off\"\r\n  ></ejs-textbox>\r\n</div>\r\n", styles: [".rs-search-input{width:240px}.rs-search-input .e-textbox{display:block;box-shadow:none!important}.rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px #1f7bff66!important;border-color:var(--rs-input-hover-border-color)!important}.rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:24px!important;line-height:22px!important}.rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-search-input ::ng-deep .e-input-group:before{content:\"\"!important;margin:5px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$4.TextBoxComponent, selector: "ejs-textbox", inputs: ["autocomplete", "cssClass", "enablePersistence", "enableRtl", "enabled", "floatLabelType", "htmlAttributes", "locale", "multiline", "placeholder", "readonly", "showClearButton", "type", "value", "width"], outputs: ["blur", "change", "created", "destroyed", "focus", "input", "valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rs-search-input", template: "<div class=\"rs-search-input\">\r\n  <ejs-textbox\r\n    type=\"text\"\r\n    class=\"e-input\"\r\n    [(ngModel)]=\"searchValue\"\r\n    (input)=\"onInput($event)\"\r\n    [placeholder]=\"placeholder\"\r\n    [showClearButton]=\"true\"\r\n    autocomplete=\"off\"\r\n  ></ejs-textbox>\r\n</div>\r\n", styles: [".rs-search-input{width:240px}.rs-search-input .e-textbox{display:block;box-shadow:none!important}.rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px #1f7bff66!important;border-color:var(--rs-input-hover-border-color)!important}.rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:24px!important;line-height:22px!important}.rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-search-input ::ng-deep .e-input-group:before{content:\"\"!important;margin:5px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
+                type: Input
+            }], hanleSearch: [{
+                type: Output
+            }], handleInput: [{
+                type: Output
+            }] } });
+
 // 组件类
 class RsPageListComponent {
     gridContent;
     orignGrid;
     treeGrid;
     wholeToolbarSlot;
+    searchInput;
     pageTitle;
     customPageTitle = false;
     hideSearch = false;
     isInner = false;
-    debouncedInput;
+    onGridSearch = new EventEmitter();
     hasWholeToolbarSlot = false;
+    translation;
     ngOnInit() {
-        this.debouncedInput = debounce(() => {
-            this.onSeach();
-        }, 300);
+        this.getInfo();
+    }
+    getInfo() {
+        this.translation = JSON.parse(localStorage.getItem("translation"));
     }
     ngAfterContentInit() {
         // 检测是否传入了 wholeToolbarSlot
         this.hasWholeToolbarSlot = !!this.wholeToolbarSlot;
     }
-    searchValue;
-    onSeach() {
+    setSearchValue(value) {
+        this.searchInput.searchValue = value;
+        this.onSeach(value);
+    }
+    onSeach(value) {
         if (this.gridContent) {
-            this.gridContent.grid.search(this.searchValue);
+            this.gridContent.grid.search(value);
         }
         else if (this.orignGrid) {
-            this.orignGrid.search(this.searchValue);
+            this.orignGrid.search(value);
         }
         else if (this.treeGrid) {
-            this.treeGrid.search(this.searchValue);
+            this.treeGrid.search(value);
+        }
+        else {
+            this.onGridSearch.emit(value);
         }
-    }
-    onInput() {
-        this.debouncedInput();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RsPageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RsPageListComponent, selector: "rs-page-list", inputs: { pageTitle: "pageTitle", customPageTitle: "customPageTitle", hideSearch: "hideSearch", isInner: "isInner" }, queries: [{ propertyName: "gridContent", first: true, predicate: CommonGridComponent, descendants: true }, { propertyName: "orignGrid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "treeGrid", first: true, predicate: TreeGridComponent, descendants: true }, { propertyName: "wholeToolbarSlot", first: true, predicate: ["wholeToolbarSlot"], descendants: true }], ngImport: i0, template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <h1 class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</h1>\r\n  </ng-template>\r\n  <div class=\"rs-sub-section\">\r\n    <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-content-wrap\">\r\n    <div class=\"rs-content-tab\">\r\n      <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-toolbar-wrap\">\r\n      <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n        <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n        <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n          <ejs-textbox\r\n            type=\"text\"\r\n            class=\"e-input\"\r\n            [(ngModel)]=\"searchValue\"\r\n            (input)=\"onInput()\"\r\n            placeholder=\"Search all fields\"\r\n            [showClearButton]=\"true\"\r\n            autocomplete=\"off\"\r\n          ></ejs-textbox>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"rs-grid-wrap\">\r\n      <ng-content select=\"[gridSlot]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-sub-section{width:100%}.rs-page-list-wrap .rs-content-wrap{display:flex;flex-direction:column;flex:1;height:0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px!important;min-width:auto!important}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-page-list-wrap .rs-content-wrap .rs-grid-wrap{flex:1;height:0}.rs-page-list-wrap.is-not-inner .rs-content-wrap{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px #0000001a}.rs-page-list-wrap .rs-search-input{width:240px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px #1f7bff66!important;border-color:var(--rs-input-hover-border-color)!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.TextBoxComponent, selector: "ejs-textbox", inputs: ["autocomplete", "cssClass", "enablePersistence", "enableRtl", "enabled", "floatLabelType", "htmlAttributes", "locale", "multiline", "placeholder", "readonly", "showClearButton", "type", "value", "width"], outputs: ["blur", "change", "created", "destroyed", "focus", "input", "valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RsPageListComponent, selector: "rs-page-list", inputs: { pageTitle: "pageTitle", customPageTitle: "customPageTitle", hideSearch: "hideSearch", isInner: "isInner" }, outputs: { onGridSearch: "onGridSearch" }, queries: [{ propertyName: "gridContent", first: true, predicate: CommonGridComponent, descendants: true }, { propertyName: "orignGrid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "treeGrid", first: true, predicate: TreeGridComponent, descendants: true }, { propertyName: "wholeToolbarSlot", first: true, predicate: ["wholeToolbarSlot"], descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <h1 class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</h1>\r\n  </ng-template>\r\n  <div class=\"rs-sub-section\">\r\n    <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-content-wrap\">\r\n    <div class=\"rs-content-tab\">\r\n      <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-toolbar-wrap\">\r\n      <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n        <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n        <rs-search-input\r\n          #searchInput\r\n          *ngIf=\"!hideSearch\"\r\n          [placeholder]=\"translation.SEARCH_ALL_FIELD\"\r\n          (hanleSearch)=\"onSeach($event)\"\r\n        ></rs-search-input>\r\n      </div>\r\n    </div>\r\n    <div class=\"rs-grid-wrap\">\r\n      <ng-content select=\"[gridSlot]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-sub-section{width:100%}.rs-page-list-wrap .rs-content-wrap{display:flex;flex-direction:column;flex:1;height:0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px!important;min-width:auto!important}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-page-list-wrap .rs-content-wrap .rs-grid-wrap{flex:1;height:0}.rs-page-list-wrap.is-not-inner .rs-content-wrap{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchInputComponent, selector: "rs-search-input", inputs: ["placeholder"], outputs: ["hanleSearch", "handleInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RsPageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-page-list", template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <h1 class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</h1>\r\n  </ng-template>\r\n  <div class=\"rs-sub-section\">\r\n    <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-content-wrap\">\r\n    <div class=\"rs-content-tab\">\r\n      <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-toolbar-wrap\">\r\n      <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n        <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n        <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n          <ejs-textbox\r\n            type=\"text\"\r\n            class=\"e-input\"\r\n            [(ngModel)]=\"searchValue\"\r\n            (input)=\"onInput()\"\r\n            placeholder=\"Search all fields\"\r\n            [showClearButton]=\"true\"\r\n            autocomplete=\"off\"\r\n          ></ejs-textbox>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"rs-grid-wrap\">\r\n      <ng-content select=\"[gridSlot]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-sub-section{width:100%}.rs-page-list-wrap .rs-content-wrap{display:flex;flex-direction:column;flex:1;height:0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px!important;min-width:auto!important}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-page-list-wrap .rs-content-wrap .rs-grid-wrap{flex:1;height:0}.rs-page-list-wrap.is-not-inner .rs-content-wrap{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px #0000001a}.rs-page-list-wrap .rs-search-input{width:240px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px #1f7bff66!important;border-color:var(--rs-input-hover-border-color)!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}\n"] }]
+            args: [{ selector: "rs-page-list", template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <h1 class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</h1>\r\n  </ng-template>\r\n  <div class=\"rs-sub-section\">\r\n    <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-content-wrap\">\r\n    <div class=\"rs-content-tab\">\r\n      <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-toolbar-wrap\">\r\n      <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n        <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n        <rs-search-input\r\n          #searchInput\r\n          *ngIf=\"!hideSearch\"\r\n          [placeholder]=\"translation.SEARCH_ALL_FIELD\"\r\n          (hanleSearch)=\"onSeach($event)\"\r\n        ></rs-search-input>\r\n      </div>\r\n    </div>\r\n    <div class=\"rs-grid-wrap\">\r\n      <ng-content select=\"[gridSlot]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-sub-section{width:100%}.rs-page-list-wrap .rs-content-wrap{display:flex;flex-direction:column;flex:1;height:0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px!important;min-width:auto!important}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-page-list-wrap .rs-content-wrap .rs-grid-wrap{flex:1;height:0}.rs-page-list-wrap.is-not-inner .rs-content-wrap{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px #0000001a}\n"] }]
         }], propDecorators: { gridContent: [{
                 type: ContentChild,
                 args: [CommonGridComponent, { static: false }]
@@ -1418,6 +1621,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], wholeToolbarSlot: [{
                 type: ContentChild,
                 args: ["wholeToolbarSlot", { static: false }]
+            }], searchInput: [{
+                type: ViewChild,
+                args: ["searchInput", { static: false }]
             }], pageTitle: [{
                 type: Input
             }], customPageTitle: [{
@@ -1426,6 +1632,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], isInner: [{
                 type: Input
+            }], onGridSearch: [{
+                type: Output
             }] } });
 
 // 组件类
@@ -1460,7 +1668,7 @@ class RsPageTabComponent {
         this.tabObj.select(idx);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RsPageTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RsPageTabComponent, selector: "rs-page-tab", inputs: { pageTitle: "pageTitle", customPageTitle: "customPageTitle", tabList: "tabList", currentTab: "currentTab" }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabObj", first: true, predicate: ["tabObj"], descendants: true }], ngImport: i0, template: "<div class=\"rs-page-list-wrap\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <div class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</div>\r\n  </ng-template>\r\n  <ejs-tab\r\n    class=\"rs-tab\"\r\n    #tabObj\r\n    (selected)=\"onTabClick($event)\"\r\n    [animation]=\"animation\"\r\n\t  overflowMode=\"Popup\"\r\n    heightAdjustMode=\"None\"\r\n  >\r\n    <e-tabitems>\r\n      <e-tabitem *ngFor=\"let item of tabList\">\r\n        <ng-template #headerText>\r\n          <div>{{ item.title }}</div>\r\n        </ng-template>\r\n      </e-tabitem>\r\n    </e-tabitems>\r\n  </ejs-tab>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[tabContentSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-tab{padding:0 20px}.rs-page-list-wrap .rs-tab .e-tab-header:before{display:none}.rs-page-list-wrap .rs-tab .e-toolbar-items{gap:32px;min-height:36px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item{border:0}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-wrap{padding:0;border:0;position:relative;height:36px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-wrap:before{content:\" \";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:transparent}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-text{color:#5f6f81;font-family:Arial;font-size:13px;font-style:normal;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap:before{background-color:#1f7bff}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item.e-active .e-tab-text{color:#44566c}.rs-page-list-wrap .rs-tab .e-hor-nav{width:24px;height:24px;min-height:24px;top:3px;border-radius:4px;background-color:transparent!important;border:1px solid #eaedf0!important}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons{box-shadow:none;background-color:transparent!important;border-color:transparent!important;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%223%22 viewBox%3D%220 0 14 3%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22Drag bar%22%3E%0D%3Ccircle id%3D%22Ellipse 30%22 cx%3D%221.5%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 1.5 1.5)%22 fill%3D%22%236B6B6B%22%2F%3E%0D%3Ccircle id%3D%22Ellipse 31%22 cx%3D%227%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 7 1.5)%22 fill%3D%22%236B6B6B%22%2F%3E%0D%3Ccircle id%3D%22Ellipse 32%22 cx%3D%2212.5%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 12.5 1.5)%22 fill%3D%22%236B6B6B%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\");background-size:14px 3px;background-repeat:no-repeat;background-position:4px 14px}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons:before{display:none}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons:hover{background-color:#eff5fb!important;border-color:#b1d0fc!important;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%223%22 viewBox%3D%220 0 14 3%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22Drag bar%22%3E%0D%3Ccircle id%3D%22Ellipse 30%22 cx%3D%221.5%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 1.5 1.5)%22 fill%3D%22%231F7BFF%22%2F%3E%0D%3Ccircle id%3D%22Ellipse 31%22 cx%3D%227%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 7 1.5)%22 fill%3D%22%231F7BFF%22%2F%3E%0D%3Ccircle id%3D%22Ellipse 32%22 cx%3D%2212.5%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 12.5 1.5)%22 fill%3D%22%231F7BFF%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.rs-page-list-wrap .rs-tab .e-toolbar-pop{min-width:160px;border-radius:10px;background:#fff;box-shadow:0 0 8px #00000040;padding:8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap{padding:0 8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-tab-text{color:#44566c;font-family:Arial;font-size:13px;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover{border-radius:6px;background:#1f7bff0d}.rs-page-list-wrap .rs-grid-wrap{flex:1;height:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.TabComponent, selector: "ejs-tab", inputs: ["allowDragAndDrop", "animation", "clearTemplates", "cssClass", "dragArea", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "headerPlacement", "height", "heightAdjustMode", "items", "loadOn", "locale", "overflowMode", "reorderActiveTab", "scrollStep", "selectedItem", "showCloseButton", "width"], outputs: ["added", "adding", "created", "destroyed", "dragged", "dragging", "onDragStart", "removed", "removing", "selected", "selecting"] }, { kind: "directive", type: i2$4.TabItemDirective, selector: "e-tabitems>e-tabitem", inputs: ["content", "cssClass", "disabled", "header", "headerTemplate", "id", "tabIndex", "visible"] }, { kind: "directive", type: i2$4.TabItemsDirective, selector: "ejs-tab>e-tabitems" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RsPageTabComponent, selector: "rs-page-tab", inputs: { pageTitle: "pageTitle", customPageTitle: "customPageTitle", tabList: "tabList", currentTab: "currentTab" }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabObj", first: true, predicate: ["tabObj"], descendants: true }], ngImport: i0, template: "<div class=\"rs-page-list-wrap\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <div class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</div>\r\n  </ng-template>\r\n  <ejs-tab\r\n    class=\"rs-tab\"\r\n    #tabObj\r\n    (selected)=\"onTabClick($event)\"\r\n    [animation]=\"animation\"\r\n\t  overflowMode=\"Popup\"\r\n    heightAdjustMode=\"None\"\r\n  >\r\n    <e-tabitems>\r\n      <e-tabitem *ngFor=\"let item of tabList\">\r\n        <ng-template #headerText>\r\n          <div>{{ item.title }}</div>\r\n        </ng-template>\r\n      </e-tabitem>\r\n    </e-tabitems>\r\n  </ejs-tab>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[tabContentSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-tab{padding:0 20px}.rs-page-list-wrap .rs-tab .e-tab-header:before{display:none}.rs-page-list-wrap .rs-tab .e-toolbar-items{gap:32px;min-height:36px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item{border:0}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-wrap{padding:0;border:0;position:relative;height:36px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-wrap:before{content:\" \";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:transparent}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-text{color:#5f6f81;font-family:Arial;font-size:13px;font-style:normal;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap:before{background-color:#1f7bff}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item.e-active .e-tab-text{color:#44566c}.rs-page-list-wrap .rs-tab .e-hor-nav{width:24px;height:24px;min-height:24px;top:3px;border-radius:4px;background-color:transparent!important;border:1px solid #eaedf0!important}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons{box-shadow:none;background-color:transparent!important;border-color:transparent!important;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%223%22 viewBox%3D%220 0 14 3%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22Drag bar%22%3E%0D%3Ccircle id%3D%22Ellipse 30%22 cx%3D%221.5%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 1.5 1.5)%22 fill%3D%22%236B6B6B%22%2F%3E%0D%3Ccircle id%3D%22Ellipse 31%22 cx%3D%227%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 7 1.5)%22 fill%3D%22%236B6B6B%22%2F%3E%0D%3Ccircle id%3D%22Ellipse 32%22 cx%3D%2212.5%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 12.5 1.5)%22 fill%3D%22%236B6B6B%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\");background-size:14px 3px;background-repeat:no-repeat;background-position:4px 14px}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons:before{display:none}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons:hover{background-color:#eff5fb!important;border-color:#b1d0fc!important;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%223%22 viewBox%3D%220 0 14 3%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22Drag bar%22%3E%0D%3Ccircle id%3D%22Ellipse 30%22 cx%3D%221.5%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 1.5 1.5)%22 fill%3D%22%231F7BFF%22%2F%3E%0D%3Ccircle id%3D%22Ellipse 31%22 cx%3D%227%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 7 1.5)%22 fill%3D%22%231F7BFF%22%2F%3E%0D%3Ccircle id%3D%22Ellipse 32%22 cx%3D%2212.5%22 cy%3D%221.5%22 r%3D%221.5%22 transform%3D%22rotate(-90 12.5 1.5)%22 fill%3D%22%231F7BFF%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.rs-page-list-wrap .rs-tab .e-toolbar-pop{min-width:160px;border-radius:10px;background:#fff;box-shadow:0 0 8px #00000040;padding:8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap{padding:0 8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-tab-text{color:#44566c;font-family:Arial;font-size:13px;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover{border-radius:6px;background:#1f7bff0d}.rs-page-list-wrap .rs-grid-wrap{flex:1;height:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$5.TabComponent, selector: "ejs-tab", inputs: ["allowDragAndDrop", "animation", "clearTemplates", "cssClass", "dragArea", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "headerPlacement", "height", "heightAdjustMode", "items", "loadOn", "locale", "overflowMode", "reorderActiveTab", "scrollStep", "selectedItem", "showCloseButton", "width"], outputs: ["added", "adding", "created", "destroyed", "dragged", "dragging", "onDragStart", "removed", "removing", "selected", "selecting"] }, { kind: "directive", type: i2$5.TabItemDirective, selector: "e-tabitems>e-tabitem", inputs: ["content", "cssClass", "disabled", "header", "headerTemplate", "id", "tabIndex", "visible"] }, { kind: "directive", type: i2$5.TabItemsDirective, selector: "ejs-tab>e-tabitems" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RsPageTabComponent, decorators: [{
             type: Component,
@@ -1486,40 +1694,46 @@ class GridBoxComponent {
     orignGrid;
     treeGrid;
     wholeToolbarSlot;
+    searchInput;
     hideSearch = false;
     isInner = false;
-    debouncedInput;
+    onGridSearch = new EventEmitter();
     hasWholeToolbarSlot = false;
+    translation;
     ngOnInit() {
-        this.debouncedInput = debounce(() => {
-            this.onSeach();
-        }, 300);
+        this.getInfo();
+    }
+    getInfo() {
+        this.translation = JSON.parse(localStorage.getItem("translation"));
     }
     ngAfterContentInit() {
         // 检测是否传入了 wholeToolbarSlot
         this.hasWholeToolbarSlot = !!this.wholeToolbarSlot;
     }
-    searchValue;
-    onSeach() {
+    setSearchValue(value) {
+        this.searchInput.searchValue = value;
+        this.onSeach(value);
+    }
+    onSeach(value) {
         if (this.gridContent) {
-            this.gridContent.grid.search(this.searchValue);
+            this.gridContent.grid.search(value);
         }
         else if (this.orignGrid) {
-            this.orignGrid.search(this.searchValue);
+            this.orignGrid.search(value);
         }
         else if (this.treeGrid) {
-            this.treeGrid.search(this.searchValue);
+            this.treeGrid.search(value);
+        }
+        else {
+            this.onGridSearch.emit(value);
         }
-    }
-    onInput() {
-        this.debouncedInput();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridBoxComponent, selector: "rs-grid-box", inputs: { hideSearch: "hideSearch", isInner: "isInner" }, queries: [{ propertyName: "gridContent", first: true, predicate: CommonGridComponent, descendants: true }, { propertyName: "orignGrid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "treeGrid", first: true, predicate: TreeGridComponent, descendants: true }, { propertyName: "wholeToolbarSlot", first: true, predicate: ["wholeToolbarSlot"], descendants: true }], ngImport: i0, template: "<div class=\"rs-grid-box\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <div class=\"rs-content-tab\">\r\n    <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-toolbar-wrap\">\r\n    <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n      <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n      <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n        <ejs-textbox\r\n          type=\"text\"\r\n          class=\"e-input\"\r\n          [(ngModel)]=\"searchValue\"\r\n          (input)=\"onInput()\"\r\n          placeholder=\"Search all fields\"\r\n          [showClearButton]=\"true\"\r\n          autocomplete=\"off\"\r\n        ></ejs-textbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[gridSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{height:100%}.rs-grid-box{display:flex;flex-direction:column;height:100%}.rs-grid-box.is-not-inner{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px #0000001a}.rs-grid-box .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-grid-box .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-grid-box .rs-toolbar-wrap .rs-left-col,.rs-grid-box .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-grid-box .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-grid-box .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px!important;min-width:auto!important}.rs-grid-box .rs-toolbar-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-grid-box .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-grid-box .rs-grid-wrap{flex:1;height:0}.rs-grid-box .rs-search-input{width:240px}.rs-grid-box .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-grid-box .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px #1f7bff66!important;border-color:var(--rs-input-hover-border-color)!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-grid-box .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-grid-box .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group:before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.TextBoxComponent, selector: "ejs-textbox", inputs: ["autocomplete", "cssClass", "enablePersistence", "enableRtl", "enabled", "floatLabelType", "htmlAttributes", "locale", "multiline", "placeholder", "readonly", "showClearButton", "type", "value", "width"], outputs: ["blur", "change", "created", "destroyed", "focus", "input", "valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridBoxComponent, selector: "rs-grid-box", inputs: { hideSearch: "hideSearch", isInner: "isInner" }, outputs: { onGridSearch: "onGridSearch" }, queries: [{ propertyName: "gridContent", first: true, predicate: CommonGridComponent, descendants: true }, { propertyName: "orignGrid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "treeGrid", first: true, predicate: TreeGridComponent, descendants: true }, { propertyName: "wholeToolbarSlot", first: true, predicate: ["wholeToolbarSlot"], descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"rs-grid-box\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <div class=\"rs-content-tab\">\r\n    <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-toolbar-wrap\">\r\n    <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n      <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n      <rs-search-input\r\n          #searchInput\r\n          *ngIf=\"!hideSearch\"\r\n          [placeholder]=\"translation.SEARCH_ALL_FIELD\"\r\n          (hanleSearch)=\"onSeach($event)\"\r\n        ></rs-search-input>\r\n    </div>\r\n  </div>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[gridSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{height:100%}.rs-grid-box{display:flex;flex-direction:column;height:100%}.rs-grid-box.is-not-inner{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px #0000001a}.rs-grid-box .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-grid-box .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-grid-box .rs-toolbar-wrap .rs-left-col,.rs-grid-box .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-grid-box .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-grid-box .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px!important;min-width:auto!important}.rs-grid-box .rs-toolbar-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-grid-box .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-grid-box .rs-grid-wrap{flex:1;height:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchInputComponent, selector: "rs-search-input", inputs: ["placeholder"], outputs: ["hanleSearch", "handleInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-grid-box", template: "<div class=\"rs-grid-box\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <div class=\"rs-content-tab\">\r\n    <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-toolbar-wrap\">\r\n    <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n      <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n      <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n        <ejs-textbox\r\n          type=\"text\"\r\n          class=\"e-input\"\r\n          [(ngModel)]=\"searchValue\"\r\n          (input)=\"onInput()\"\r\n          placeholder=\"Search all fields\"\r\n          [showClearButton]=\"true\"\r\n          autocomplete=\"off\"\r\n        ></ejs-textbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[gridSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{height:100%}.rs-grid-box{display:flex;flex-direction:column;height:100%}.rs-grid-box.is-not-inner{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px #0000001a}.rs-grid-box .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-grid-box .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-grid-box .rs-toolbar-wrap .rs-left-col,.rs-grid-box .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-grid-box .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-grid-box .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px!important;min-width:auto!important}.rs-grid-box .rs-toolbar-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-grid-box .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-grid-box .rs-grid-wrap{flex:1;height:0}.rs-grid-box .rs-search-input{width:240px}.rs-grid-box .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-grid-box .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px #1f7bff66!important;border-color:var(--rs-input-hover-border-color)!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-grid-box .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-grid-box .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group:before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}\n"] }]
+            args: [{ selector: "rs-grid-box", template: "<div class=\"rs-grid-box\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <div class=\"rs-content-tab\">\r\n    <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-toolbar-wrap\">\r\n    <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n      <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n      <rs-search-input\r\n          #searchInput\r\n          *ngIf=\"!hideSearch\"\r\n          [placeholder]=\"translation.SEARCH_ALL_FIELD\"\r\n          (hanleSearch)=\"onSeach($event)\"\r\n        ></rs-search-input>\r\n    </div>\r\n  </div>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[gridSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{height:100%}.rs-grid-box{display:flex;flex-direction:column;height:100%}.rs-grid-box.is-not-inner{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px #0000001a}.rs-grid-box .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-grid-box .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-grid-box .rs-toolbar-wrap .rs-left-col,.rs-grid-box .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.rs-grid-box .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-grid-box .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px!important;min-width:auto!important}.rs-grid-box .rs-toolbar-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-grid-box .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-grid-box .rs-grid-wrap{flex:1;height:0}\n"] }]
         }], propDecorators: { gridContent: [{
                 type: ContentChild,
                 args: [CommonGridComponent, { static: false }]
@@ -1532,10 +1746,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], wholeToolbarSlot: [{
                 type: ContentChild,
                 args: ["wholeToolbarSlot", { static: false }]
+            }], searchInput: [{
+                type: ViewChild,
+                args: ["searchInput", { static: false }]
             }], hideSearch: [{
                 type: Input
             }], isInner: [{
                 type: Input
+            }], onGridSearch: [{
+                type: Output
             }] } });
 
 const DefaultDrawerConfig = {
@@ -1546,7 +1765,6 @@ class DrawerService {
     router;
     uniqueDrawerComponent;
     resultPromiseResolveMap = new Map();
-    openedSubscription;
     routerSubscription;
     ListenChangeCbs = new Set();
     constructor(router) {
@@ -1571,13 +1789,10 @@ class DrawerService {
             this.removeDrawer();
         }
         this.uniqueDrawerComponent = component;
-        this.openedSubscription = component.$isOpened.subscribe((value) => !value && this.hide());
         this.listenRouterChange();
     }
     removeDrawer() {
-        this.openedSubscription && this.openedSubscription.unsubscribe();
         this.routerSubscription && this.routerSubscription.unsubscribe();
-        this.openedSubscription = null;
         this.routerSubscription = null;
         this.uniqueDrawerComponent = null;
     }
@@ -1585,7 +1800,7 @@ class DrawerService {
         const drawer = this.uniqueDrawerComponent;
         if (!this.checkChange("show", { component, config, data }) ||
             !drawer ||
-            drawer.$isOpened.getValue()) {
+            drawer.isOpened) {
             return {
                 instance: null,
                 result: null,
@@ -1618,9 +1833,15 @@ class DrawerService {
             drawer && drawer.back();
         }
     }
+    setConfig(config) {
+        if (this.uniqueDrawerComponent) {
+            this.uniqueDrawerComponent.setConfig(config);
+        }
+    }
     deleteCache(cacheKey) {
         const drawer = this.uniqueDrawerComponent;
         drawer && drawer.deleteCache(cacheKey);
+        this.resultPromiseResolveMap.delete(cacheKey);
     }
     onChange(callback) {
         this.ListenChangeCbs.add(callback);
@@ -1664,7 +1885,10 @@ class MultiTabComponent {
     keepAlive;
     singleReuseUrls = []; //只能单个缓存的url
     noGenerateTabUrls = []; //不生成tab的url
+    flattenMenu = [];
+    defaultTabUrl = "";
     onRefreshTab = new EventEmitter();
+    onCloseTab = new EventEmitter();
     subscriptions = [];
     TAB_WIDTH = 164;
     GAP_NORMAL = 54;
@@ -1676,20 +1900,38 @@ class MultiTabComponent {
     selectedTab = 0;
     maxTabs = 10;
     screenWidth = window.innerWidth; // 初始化屏幕宽度
+    translation;
     onResize(event) {
         this.screenWidth = window.innerWidth; // 更新屏幕宽度
         // this.setEllipsisTitle(); 在最外面容器调用
     }
     ngOnInit() {
+        this.translation = JSON.parse(localStorage.getItem("translation"));
         this.initTab();
         // 解决刷新页面后，选中的 tab 丢失问题
         const isExistIdx = this.tabList.findIndex((ele) => this.urlWithoutQuery(ele.url) === this.urlWithoutQuery(this.router.url));
         if (isExistIdx !== -1) {
             this.selectedTab = isExistIdx;
         }
+        this.subscriptions.push(this.router.events
+            .pipe(filter((event) => event instanceof NavigationStart))
+            .subscribe((event) => {
+            const navigation = this.router.getCurrentNavigation(); // 获取当前导航
+            if (navigation) {
+                const state = navigation.extras.state; // 获取传递的 state
+                let noReused = (state && state["noReused"]) || false; // 当前tab不复用，新开一个tab,当有已经存在的tab时候也是新开
+                const isExistIdx = this.tabList.findIndex((ele) => this.urlWithoutQuery(ele.url) ===
+                    this.urlWithoutQuery(event.url));
+                if (isExistIdx !== -1 &&
+                    (noReused || this.tabList[isExistIdx].url !== event.url)) {
+                    // 如果当前tab已经存在，并且是新开的tab
+                    this.closeTab(isExistIdx, true); // 关闭当前tab
+                }
+            }
+        }));
         this.subscriptions.push(this.router.events
             .pipe(filter((event) => event instanceof NavigationEnd))
-            .subscribe(() => {
+            .subscribe((event) => {
             const navigation = this.router.getCurrentNavigation(); // 获取当前导航
             if (navigation) {
                 const tooltipElements = document.querySelectorAll(".e-popup-open");
@@ -1706,12 +1948,11 @@ class MultiTabComponent {
                     navigationInfo.title ||
                     navigationInfo.subTitle ||
                     navigationInfo.name;
-                let noReused = (state && state["noReused"]) || false; // 当前tab不复用，新开一个tab,当有已经存在的tab时候也是新开
                 if (currentRoute && !skipLocationChange) {
                     if (this.noGenerateTabUrls.includes(this.urlWithoutQuery(this.router.url))) {
                         return; // 排除不生成tab的url
                     }
-                    this.setTab(this.router.url, currentRoute.snapshot.routeConfig.path, title, noReused);
+                    this.setTab(this.router.url, currentRoute.snapshot.routeConfig.path, title);
                 }
             }
         }));
@@ -1726,25 +1967,18 @@ class MultiTabComponent {
         this.selectedTab = 0; // 重置选中的 tab 索引
         this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
-    setEllipsisTitle(title) {
+    setEllipsisTitle() {
         this.textGap = this.GAP_NORMAL;
         if (this.screenWidth <= 1100) {
             this.textGap = this.GAP_SMALL;
         }
         let { allWidth, leftWidth, rightWidth } = this.calcTabWidth();
         let width = Math.floor((allWidth - rightWidth) / (this.tabList && this.tabList.length));
-        if (title) {
-            return this.cf.setMiddleEllipsis(title, width > this.TAB_WIDTH
+        this.tabList.forEach((ele, idx) => {
+            ele.displayTitle = this.cf.setMiddleEllipsis(this.translation[ele.title] || ele.title, width > this.TAB_WIDTH
                 ? this.TAB_WIDTH - this.textGap
                 : width - this.textGap, 12);
-        }
-        else {
-            this.tabList.forEach((ele, idx) => {
-                ele.displayTitle = this.cf.setMiddleEllipsis(ele.title, width > this.TAB_WIDTH
-                    ? this.TAB_WIDTH - this.textGap
-                    : width - this.textGap, 12);
-            });
-        }
+        });
         this.ref.markForCheck();
         this.ref.detectChanges();
     }
@@ -1771,21 +2005,29 @@ class MultiTabComponent {
         };
     }
     initTab() {
+        // console.log("this.flattenMenu", this.flattenMenu);
         let TabCache = JSON.parse(sessionStorage.getItem("TabCache"));
         this.tabList = TabCache || [];
         if (this.tabList.length === 0) {
-            const title = sessionStorage.getItem("firstTabTitle");
-            if (title) {
-                sessionStorage.removeItem("firstTabTitle");
-                const url = this.router.url;
-                this.addTab(url, title);
+            const pureUrl = this.urlWithoutQuery(this.router.url);
+            const target = this.flattenMenu.find((ele) => ele.url === pureUrl);
+            if (target) {
+                if (target.url !== this.defaultTabUrl) {
+                    const defaultTab = this.flattenMenu.find((ele) => ele.url === this.defaultTabUrl);
+                    this.tabList.push({
+                        url: defaultTab.url,
+                        title: defaultTab.menuCode || defaultTab.label,
+                        displayTitle: defaultTab.menuCode || defaultTab.label,
+                    });
+                }
+                this.addTab(target.url, target.menuCode || target.label);
             }
         }
     }
     closeTab(idx, noChange) {
         const tab = this.tabList[idx];
         this.tabList = this.tabList.filter((ele) => ele.url !== tab.url);
-        this.clearCache(this.urlWithoutQuery(tab.url));
+        this.clearCache(tab.url);
         if (!noChange && this.selectedTab === idx) {
             const targetIdx = Math.max(0, idx - 1);
             this.changeTab(this.tabList[targetIdx], targetIdx);
@@ -1795,6 +2037,7 @@ class MultiTabComponent {
         }
         this.setEllipsisTitle();
         sessionStorage.setItem("TabCache", JSON.stringify(this.tabList));
+        this.onCloseTab.emit(tab);
         this.ref.markForCheck();
     }
     changeTab(tab, idx) {
@@ -1815,7 +2058,7 @@ class MultiTabComponent {
         if (this.tabList.length >= this.maxTabs) {
             const secondTab = this.tabList[1];
             this.tabList = this.tabList.filter((ele) => ele.url !== secondTab.url);
-            this.clearCache(this.urlWithoutQuery(secondTab.url));
+            this.clearCache(secondTab.url);
         }
         const localPermissions = sessionStorage.getItem("permissions") ||
             localStorage.getItem("permissions");
@@ -1835,32 +2078,42 @@ class MultiTabComponent {
         sessionStorage.setItem("TabCache", JSON.stringify(this.tabList));
         this.ref.markForCheck();
     }
-    setTab(url, pureUrl, title, noReused) {
+    setTab(url, pureUrl, title) {
         const isExistIdx = this.tabList.findIndex((ele) => this.urlWithoutQuery(ele.url) === this.urlWithoutQuery(url));
         if (isExistIdx === -1) {
             const singleIdx = this.singleReuseUrls.findIndex((ele) => ele === pureUrl);
             if (singleIdx !== -1) {
                 this.tabList = this.tabList.filter((ele) => !ele.url.includes(this.singleReuseUrls[singleIdx]));
-                this.keepAlive.clearCache(url);
+                this.keepAlive.clearCache(this.urlWithoutQuery(url));
                 this.drawer.deleteCache(url);
             }
             this.addTab(url, title);
         }
         else {
-            const targetTabUrl = this.tabList[isExistIdx].url;
-            if (targetTabUrl !== url || noReused) {
-                // 当缓存一致时候，但是url不一致，重新按照新的url生成tab
-                this.closeTab(isExistIdx, true);
-                setTimeout(() => {
-                    this.addTab(url, title);
-                }, 30);
-            }
-            else {
-                this.changeTab(this.tabList[isExistIdx], isExistIdx);
-            }
+            this.changeTab(this.tabList[isExistIdx], isExistIdx);
             this.ref.markForCheck();
         }
     }
+    onTabDrop(event) {
+        const { previousIndex, currentIndex } = event;
+        // 禁止拖动第一个标签页
+        if (previousIndex === 0 || currentIndex === 0)
+            return;
+        const wasSelected = this.selectedTab === previousIndex;
+        moveItemInArray(this.tabList, previousIndex, currentIndex);
+        sessionStorage.setItem("TabCache", JSON.stringify(this.tabList));
+        if (wasSelected) {
+            this.selectedTab = currentIndex;
+        }
+        else if (previousIndex < this.selectedTab &&
+            currentIndex >= this.selectedTab) {
+            this.selectedTab--;
+        }
+        else if (previousIndex > this.selectedTab &&
+            currentIndex <= this.selectedTab) {
+            this.selectedTab++;
+        }
+    }
     timer = null;
     refreshTab() {
         const loadingIcon = document.getElementById("loadingIcon");
@@ -1882,31 +2135,36 @@ class MultiTabComponent {
         // });
     }
     clearCache(url) {
-        this.keepAlive.clearCache(url); // 调用自定义策略的清除缓存方法
+        this.keepAlive.clearCache(this.urlWithoutQuery(url)); // 调用自定义策略的清除缓存方法
         this.drawer.deleteCache(url);
     }
     cleanAllCache() {
         sessionStorage.removeItem("TabCache"); // 清除缓存
         this.tabList = []; // 清空 tab 列表
         this.selectedTab = 0; // 重置选中的 tab 索引
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
         this.keepAlive.clearAllCache(); // 调用自定义策略的清除缓存方法
     }
     urlWithoutQuery(url) {
         return url.split("?")[0];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiTabComponent, deps: [{ token: i1$3.Router }, { token: CommonFunctionService }, { token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: DrawerService }, { token: i1$3.RouteReuseStrategy }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiTabComponent, selector: "rs-multi-tab", inputs: { singleReuseUrls: "singleReuseUrls", noGenerateTabUrls: "noGenerateTabUrls" }, outputs: { onRefreshTab: "onRefreshTab" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"rs-multi-tab\" [ngClass]=\"{ 'b-line': tabList.length > 0 }\">\r\n\t<ul>\r\n\t\t<ng-container *ngFor=\"let tab of tabList; let i = index\">\r\n\t\t\t<li\r\n\t\t\t\t[ngClass]=\"selectedTab === i ? 'isSelect' : 'notSelect'\"\r\n\t\t\t\t(click)=\"changeTab(tab, i)\"\r\n\t\t\t>\r\n\t\t\t\t<ejs-tooltip\r\n\t\t\t\t\tid=\"notSelectTooltip\"\r\n\t\t\t\t\t[showTipPointer]=\"false\"\r\n\t\t\t\t\t[openDelay]=\"500\"\r\n\t\t\t\t\t*ngIf=\"tab.displayTitle !== tab.title; else originText\"\r\n\t\t\t\t\tstyle=\"height: 27px\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ng-template #content>\r\n\t\t\t\t\t\t<div class=\"tooltip-content\">\r\n\t\t\t\t\t\t\t{{ tab.title }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<span class=\"tabTitle\">{{ tab.displayTitle }}</span>\r\n\t\t\t\t</ejs-tooltip>\r\n\t\t\t\t<ng-template #originText>\r\n\t\t\t\t\t<span class=\"tabTitle\">\r\n\t\t\t\t\t\t{{ tab.displayTitle }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</ng-template>\r\n\t\t\t\t<span\r\n\t\t\t\t\tclass=\"img-block\"\r\n\t\t\t\t\t*ngIf=\"selectedTab !== i && i !== 0\"\r\n\t\t\t\t></span>\r\n\t\t\t\t<img\r\n\t\t\t\t\t*ngIf=\"i !== 0\"\r\n\t\t\t\t\tsrc=\"../../../assets/img/close-url.svg\"\r\n\t\t\t\t\t(click)=\"closeTab(i)\"\r\n\t\t\t\t/>\r\n\t\t\t</li>\r\n\t\t</ng-container>\r\n\t</ul>\r\n\t<div class=\"refresh-tab\" (click)=\"refreshTab()\" *ngIf=\"tabList.length > 0\">\r\n\t\t<ejs-tooltip\r\n\t\t\tid=\"notSelectTooltip\"\r\n\t\t\tcssClass=\"notSelectTooltip\"\r\n\t\t\t[showTipPointer]=\"false\"\r\n\t\t\t[openDelay]=\"500\"\r\n\t\t\tstyle=\"height: 27px\"\r\n\t\t>\r\n\t\t\t<ng-template #content>\r\n\t\t\t\t<div class=\"tooltip-content\">Refresh Current Tab</div>\r\n\t\t\t</ng-template>\r\n\t\t\t<img\r\n\t\t\t\tid=\"loadingIcon\"\r\n\t\t\t\talt\r\n\t\t\t\tclass=\"refresh-btn\"\r\n\t\t\t\tsrc=\"../../../assets/img/desktop-refresh-btn.svg\"\r\n\t\t\t/>\r\n\t\t</ejs-tooltip>\r\n\t</div>\r\n</div>\r\n", styles: [".rs-multi-tab{width:100%;display:flex;justify-content:space-between;margin:0 auto;max-width:1886px}.rs-multi-tab.b-line{border-bottom:1px solid #e5eaef}.rs-multi-tab ul{display:flex;margin:0 8px;padding:0;overflow:hidden;height:100%}.rs-multi-tab ul li{max-width:164px;padding:0 12px;display:flex;align-items:center;flex:auto;border:1px solid #e5eaef;border-bottom:none;color:#5f6f81;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;height:28px;background:#f8fafb;vertical-align:top;position:relative;cursor:default}.rs-multi-tab ul li .tabTitle{display:inline-block;white-space:nowrap;font-size:11px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px;transition:width .3s ease}.rs-multi-tab ul li img{border-radius:4px;padding:4px;margin-left:6px;margin-top:1px;vertical-align:top;cursor:pointer}.rs-multi-tab ul li img:hover{background:#dce8f6}.rs-multi-tab ul li:not(:last-child){border-right:none}.rs-multi-tab ul li:first-of-type{border-top-left-radius:8px}.rs-multi-tab ul li:last-child{border-top-right-radius:8px}.rs-multi-tab ul .isSelect{color:#1f3f5c;background:#fff}.rs-multi-tab ul .notSelect img{display:none}.rs-multi-tab ul .notSelect .img-block{display:inline-block;width:22px}.rs-multi-tab ul .notSelect:hover{color:#1f3f5c;background-color:#1f7bff0a}.rs-multi-tab ul .notSelect:hover .img-block{display:none}.rs-multi-tab ul .notSelect:hover img{display:inline-block}.rs-multi-tab .refresh-tab{cursor:pointer;text-align:right;color:#6c7c90;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;padding-right:12px}.rs-multi-tab .refresh-tab img{vertical-align:middle;margin-right:4px}.refresh-tab-loading{animation:spin 1s linear infinite}.notSelectTooltip{transform:translate(-12px)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tooltip-content{padding:4px;color:#f8fafb;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:14px}@media (max-width: 1400px){.refresh-tab{padding-right:0!important}.refresh-tab span{display:none!important}}@media (max-width: 1100px){.rs-multi-tab ul li img{position:absolute;right:3px;background-color:#fff}.notSelect:hover img{position:absolute;right:3px;background-color:#eff5fb}.img-block{display:none!important}.isSelect:not(:first-child){padding-right:20px!important}}@media (max-width: 600px){.rs-multi-tab ul li{padding:0 8px}.rs-multi-tab ul .notSelect .img-block{width:0px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.TooltipComponent, selector: "ejs-tooltip", inputs: ["animation", "closeDelay", "container", "content", "cssClass", "enableHtmlParse", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "height", "htmlAttributes", "isSticky", "locale", "mouseTrail", "offsetX", "offsetY", "openDelay", "opensOn", "position", "showTipPointer", "target", "tipPointerPosition", "width", "windowCollision"], outputs: ["afterClose", "afterOpen", "beforeClose", "beforeCollision", "beforeOpen", "beforeRender", "created", "destroyed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiTabComponent, selector: "rs-multi-tab", inputs: { singleReuseUrls: "singleReuseUrls", noGenerateTabUrls: "noGenerateTabUrls", flattenMenu: "flattenMenu", defaultTabUrl: "defaultTabUrl" }, outputs: { onRefreshTab: "onRefreshTab", onCloseTab: "onCloseTab" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"rs-multi-tab\" [ngClass]=\"{ 'b-line': tabList.length > 0 }\">\r\n  <ul\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"onTabDrop($event)\"\r\n  >\r\n    <li\r\n      class=\"tab-item\"\r\n      *ngFor=\"let tab of tabList; let i = index\"\r\n      [ngClass]=\"selectedTab === i ? 'isSelect' : 'notSelect'\"\r\n      [cdkDragDisabled]=\"i === 0\"\r\n      cdkDrag\r\n      (click)=\"changeTab(tab, i)\"\r\n    >\r\n      <ng-template cdkDragPlaceholder let-item>\r\n        <div class=\"placeholder\"></div>\r\n      </ng-template>\r\n      <ejs-tooltip\r\n        id=\"notSelectTooltip\"\r\n        [showTipPointer]=\"false\"\r\n        [openDelay]=\"500\"\r\n        *ngIf=\"tab.displayTitle !== (translation[tab.title] || tab.title) ; else originText\"\r\n        style=\"height: 27px\"\r\n      >\r\n        <ng-template #content>\r\n          <div class=\"tooltip-content\">\r\n            {{ translation[tab.title] || tab.title }}\r\n          </div>\r\n        </ng-template>\r\n        <span class=\"tabTitle\">{{ translation[tab.displayTitle] || tab.displayTitle }}</span>\r\n      </ejs-tooltip>\r\n      <ng-template #originText>\r\n        <span class=\"tabTitle\">\r\n          {{ tab.displayTitle }}\r\n        </span>\r\n      </ng-template>\r\n      <span class=\"img-block\" *ngIf=\"selectedTab !== i && i !== 0\"></span>\r\n      <img\r\n        *ngIf=\"i !== 0\"\r\n        src=\"../../../assets/img/close-url.svg\"\r\n        (click)=\"closeTab(i)\"\r\n      />\r\n    </li>\r\n  </ul>\r\n  <div class=\"refresh-tab\" (click)=\"refreshTab()\" *ngIf=\"tabList.length > 0\">\r\n    <ejs-tooltip\r\n      id=\"notSelectTooltip\"\r\n      cssClass=\"notSelectTooltip\"\r\n      [showTipPointer]=\"false\"\r\n      [openDelay]=\"500\"\r\n      style=\"height: 27px\"\r\n    >\r\n      <ng-template #content>\r\n        <div class=\"tooltip-content\">\r\n          {{ translation.REFRESH_CURRENT_TAB || \".REFRESH_CURRENT_TAB\" }}\r\n        </div>\r\n      </ng-template>\r\n      <img\r\n        id=\"loadingIcon\"\r\n        alt\r\n        class=\"refresh-btn\"\r\n        src=\"../../../assets/img/desktop-refresh-btn.svg\"\r\n      />\r\n    </ejs-tooltip>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rs-multi-tab{width:100%;display:flex;justify-content:space-between;margin:0 auto;max-width:1886px}.rs-multi-tab.b-line{border-bottom:1px solid #e5eaef}.rs-multi-tab ul{display:flex;margin:0 8px;padding:0;overflow:hidden;height:100%}.rs-multi-tab ul .tab-item{max-width:164px;padding:0 12px;display:flex;align-items:center;flex:auto;border:1px solid #e5eaef;border-bottom:none;color:#5f6f81;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;height:28px;background:#f8fafb;vertical-align:top;position:relative;cursor:default}.rs-multi-tab ul .tab-item .tabTitle{display:inline-block;white-space:nowrap;font-size:11px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px;transition:width .3s ease}.rs-multi-tab ul .tab-item img{border-radius:4px;padding:4px;margin-left:6px;margin-top:1px;vertical-align:top;cursor:pointer}.rs-multi-tab ul .tab-item img:hover{background:#dce8f6}.rs-multi-tab ul .tab-item:not(:last-child){border-right:none}.rs-multi-tab ul .tab-item:first-of-type{border-top-left-radius:8px}.rs-multi-tab ul .tab-item:last-child{border-top-right-radius:8px}.rs-multi-tab ul.cdk-drop-list-dragging .tab-item.cdk-drag-disabled:hover{background:#f8fafb!important;cursor:no-drop}.rs-multi-tab ul .isSelect{color:#1f3f5c;background:#fff}.rs-multi-tab ul .notSelect img{display:none}.rs-multi-tab ul .notSelect .img-block{display:inline-block;width:22px}.rs-multi-tab ul .notSelect:hover{color:#1f3f5c;background-color:#1f7bff0a}.rs-multi-tab ul .notSelect:hover .img-block{display:none}.rs-multi-tab ul .notSelect:hover img{display:inline-block}.rs-multi-tab .refresh-tab{cursor:pointer;text-align:right;color:#6c7c90;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;padding-right:12px}.rs-multi-tab .refresh-tab img{vertical-align:middle;margin-right:4px}.refresh-tab-loading{animation:spin 1s linear infinite}.notSelectTooltip{transform:translate(-12px)}.tab-item.cdk-drag{max-width:164px;padding:0 12px;display:flex;align-items:center;flex:auto;border:1px solid #e5eaef;border-bottom:none;color:#5f6f81;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;height:28px;background:#f8fafb;vertical-align:top;position:relative;cursor:default}.tab-item.cdk-drag .tabTitle{display:inline-block;white-space:nowrap;font-size:11px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px;transition:width .3s ease}.tab-item.cdk-drag img{border-radius:4px;padding:4px;margin-left:6px;margin-top:1px;vertical-align:top;cursor:pointer}.tab-item.cdk-drag img:hover{background:#dce8f6}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tooltip-content{padding:4px;color:#f8fafb;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:14px;width:-moz-fit-content;width:fit-content;white-space:nowrap}@media (max-width: 1400px){.refresh-tab{padding-right:0!important}.refresh-tab span{display:none!important}}@media (max-width: 1100px){.rs-multi-tab ul .tab-item img{position:absolute;right:3px;background-color:#fff}.notSelect:hover img{position:absolute;right:3px;background-color:#eff5fb}.img-block{display:none!important}.isSelect:not(:first-child){padding-right:20px!important}}@media (max-width: 600px){.rs-multi-tab ul .tab-item{padding:0 8px}.rs-multi-tab ul .notSelect .img-block{width:0px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i5$1.TooltipComponent, selector: "ejs-tooltip", inputs: ["animation", "closeDelay", "container", "content", "cssClass", "enableHtmlParse", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "height", "htmlAttributes", "isSticky", "locale", "mouseTrail", "offsetX", "offsetY", "openDelay", "opensOn", "position", "showTipPointer", "target", "tipPointerPosition", "width", "windowCollision"], outputs: ["afterClose", "afterOpen", "beforeClose", "beforeCollision", "beforeOpen", "beforeRender", "created", "destroyed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-multi-tab", template: "<div class=\"rs-multi-tab\" [ngClass]=\"{ 'b-line': tabList.length > 0 }\">\r\n\t<ul>\r\n\t\t<ng-container *ngFor=\"let tab of tabList; let i = index\">\r\n\t\t\t<li\r\n\t\t\t\t[ngClass]=\"selectedTab === i ? 'isSelect' : 'notSelect'\"\r\n\t\t\t\t(click)=\"changeTab(tab, i)\"\r\n\t\t\t>\r\n\t\t\t\t<ejs-tooltip\r\n\t\t\t\t\tid=\"notSelectTooltip\"\r\n\t\t\t\t\t[showTipPointer]=\"false\"\r\n\t\t\t\t\t[openDelay]=\"500\"\r\n\t\t\t\t\t*ngIf=\"tab.displayTitle !== tab.title; else originText\"\r\n\t\t\t\t\tstyle=\"height: 27px\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ng-template #content>\r\n\t\t\t\t\t\t<div class=\"tooltip-content\">\r\n\t\t\t\t\t\t\t{{ tab.title }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<span class=\"tabTitle\">{{ tab.displayTitle }}</span>\r\n\t\t\t\t</ejs-tooltip>\r\n\t\t\t\t<ng-template #originText>\r\n\t\t\t\t\t<span class=\"tabTitle\">\r\n\t\t\t\t\t\t{{ tab.displayTitle }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</ng-template>\r\n\t\t\t\t<span\r\n\t\t\t\t\tclass=\"img-block\"\r\n\t\t\t\t\t*ngIf=\"selectedTab !== i && i !== 0\"\r\n\t\t\t\t></span>\r\n\t\t\t\t<img\r\n\t\t\t\t\t*ngIf=\"i !== 0\"\r\n\t\t\t\t\tsrc=\"../../../assets/img/close-url.svg\"\r\n\t\t\t\t\t(click)=\"closeTab(i)\"\r\n\t\t\t\t/>\r\n\t\t\t</li>\r\n\t\t</ng-container>\r\n\t</ul>\r\n\t<div class=\"refresh-tab\" (click)=\"refreshTab()\" *ngIf=\"tabList.length > 0\">\r\n\t\t<ejs-tooltip\r\n\t\t\tid=\"notSelectTooltip\"\r\n\t\t\tcssClass=\"notSelectTooltip\"\r\n\t\t\t[showTipPointer]=\"false\"\r\n\t\t\t[openDelay]=\"500\"\r\n\t\t\tstyle=\"height: 27px\"\r\n\t\t>\r\n\t\t\t<ng-template #content>\r\n\t\t\t\t<div class=\"tooltip-content\">Refresh Current Tab</div>\r\n\t\t\t</ng-template>\r\n\t\t\t<img\r\n\t\t\t\tid=\"loadingIcon\"\r\n\t\t\t\talt\r\n\t\t\t\tclass=\"refresh-btn\"\r\n\t\t\t\tsrc=\"../../../assets/img/desktop-refresh-btn.svg\"\r\n\t\t\t/>\r\n\t\t</ejs-tooltip>\r\n\t</div>\r\n</div>\r\n", styles: [".rs-multi-tab{width:100%;display:flex;justify-content:space-between;margin:0 auto;max-width:1886px}.rs-multi-tab.b-line{border-bottom:1px solid #e5eaef}.rs-multi-tab ul{display:flex;margin:0 8px;padding:0;overflow:hidden;height:100%}.rs-multi-tab ul li{max-width:164px;padding:0 12px;display:flex;align-items:center;flex:auto;border:1px solid #e5eaef;border-bottom:none;color:#5f6f81;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;height:28px;background:#f8fafb;vertical-align:top;position:relative;cursor:default}.rs-multi-tab ul li .tabTitle{display:inline-block;white-space:nowrap;font-size:11px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px;transition:width .3s ease}.rs-multi-tab ul li img{border-radius:4px;padding:4px;margin-left:6px;margin-top:1px;vertical-align:top;cursor:pointer}.rs-multi-tab ul li img:hover{background:#dce8f6}.rs-multi-tab ul li:not(:last-child){border-right:none}.rs-multi-tab ul li:first-of-type{border-top-left-radius:8px}.rs-multi-tab ul li:last-child{border-top-right-radius:8px}.rs-multi-tab ul .isSelect{color:#1f3f5c;background:#fff}.rs-multi-tab ul .notSelect img{display:none}.rs-multi-tab ul .notSelect .img-block{display:inline-block;width:22px}.rs-multi-tab ul .notSelect:hover{color:#1f3f5c;background-color:#1f7bff0a}.rs-multi-tab ul .notSelect:hover .img-block{display:none}.rs-multi-tab ul .notSelect:hover img{display:inline-block}.rs-multi-tab .refresh-tab{cursor:pointer;text-align:right;color:#6c7c90;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;padding-right:12px}.rs-multi-tab .refresh-tab img{vertical-align:middle;margin-right:4px}.refresh-tab-loading{animation:spin 1s linear infinite}.notSelectTooltip{transform:translate(-12px)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tooltip-content{padding:4px;color:#f8fafb;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:14px}@media (max-width: 1400px){.refresh-tab{padding-right:0!important}.refresh-tab span{display:none!important}}@media (max-width: 1100px){.rs-multi-tab ul li img{position:absolute;right:3px;background-color:#fff}.notSelect:hover img{position:absolute;right:3px;background-color:#eff5fb}.img-block{display:none!important}.isSelect:not(:first-child){padding-right:20px!important}}@media (max-width: 600px){.rs-multi-tab ul li{padding:0 8px}.rs-multi-tab ul .notSelect .img-block{width:0px!important}}\n"] }]
+            args: [{ selector: "rs-multi-tab", template: "<div class=\"rs-multi-tab\" [ngClass]=\"{ 'b-line': tabList.length > 0 }\">\r\n  <ul\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"onTabDrop($event)\"\r\n  >\r\n    <li\r\n      class=\"tab-item\"\r\n      *ngFor=\"let tab of tabList; let i = index\"\r\n      [ngClass]=\"selectedTab === i ? 'isSelect' : 'notSelect'\"\r\n      [cdkDragDisabled]=\"i === 0\"\r\n      cdkDrag\r\n      (click)=\"changeTab(tab, i)\"\r\n    >\r\n      <ng-template cdkDragPlaceholder let-item>\r\n        <div class=\"placeholder\"></div>\r\n      </ng-template>\r\n      <ejs-tooltip\r\n        id=\"notSelectTooltip\"\r\n        [showTipPointer]=\"false\"\r\n        [openDelay]=\"500\"\r\n        *ngIf=\"tab.displayTitle !== (translation[tab.title] || tab.title) ; else originText\"\r\n        style=\"height: 27px\"\r\n      >\r\n        <ng-template #content>\r\n          <div class=\"tooltip-content\">\r\n            {{ translation[tab.title] || tab.title }}\r\n          </div>\r\n        </ng-template>\r\n        <span class=\"tabTitle\">{{ translation[tab.displayTitle] || tab.displayTitle }}</span>\r\n      </ejs-tooltip>\r\n      <ng-template #originText>\r\n        <span class=\"tabTitle\">\r\n          {{ tab.displayTitle }}\r\n        </span>\r\n      </ng-template>\r\n      <span class=\"img-block\" *ngIf=\"selectedTab !== i && i !== 0\"></span>\r\n      <img\r\n        *ngIf=\"i !== 0\"\r\n        src=\"../../../assets/img/close-url.svg\"\r\n        (click)=\"closeTab(i)\"\r\n      />\r\n    </li>\r\n  </ul>\r\n  <div class=\"refresh-tab\" (click)=\"refreshTab()\" *ngIf=\"tabList.length > 0\">\r\n    <ejs-tooltip\r\n      id=\"notSelectTooltip\"\r\n      cssClass=\"notSelectTooltip\"\r\n      [showTipPointer]=\"false\"\r\n      [openDelay]=\"500\"\r\n      style=\"height: 27px\"\r\n    >\r\n      <ng-template #content>\r\n        <div class=\"tooltip-content\">\r\n          {{ translation.REFRESH_CURRENT_TAB || \".REFRESH_CURRENT_TAB\" }}\r\n        </div>\r\n      </ng-template>\r\n      <img\r\n        id=\"loadingIcon\"\r\n        alt\r\n        class=\"refresh-btn\"\r\n        src=\"../../../assets/img/desktop-refresh-btn.svg\"\r\n      />\r\n    </ejs-tooltip>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rs-multi-tab{width:100%;display:flex;justify-content:space-between;margin:0 auto;max-width:1886px}.rs-multi-tab.b-line{border-bottom:1px solid #e5eaef}.rs-multi-tab ul{display:flex;margin:0 8px;padding:0;overflow:hidden;height:100%}.rs-multi-tab ul .tab-item{max-width:164px;padding:0 12px;display:flex;align-items:center;flex:auto;border:1px solid #e5eaef;border-bottom:none;color:#5f6f81;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;height:28px;background:#f8fafb;vertical-align:top;position:relative;cursor:default}.rs-multi-tab ul .tab-item .tabTitle{display:inline-block;white-space:nowrap;font-size:11px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px;transition:width .3s ease}.rs-multi-tab ul .tab-item img{border-radius:4px;padding:4px;margin-left:6px;margin-top:1px;vertical-align:top;cursor:pointer}.rs-multi-tab ul .tab-item img:hover{background:#dce8f6}.rs-multi-tab ul .tab-item:not(:last-child){border-right:none}.rs-multi-tab ul .tab-item:first-of-type{border-top-left-radius:8px}.rs-multi-tab ul .tab-item:last-child{border-top-right-radius:8px}.rs-multi-tab ul.cdk-drop-list-dragging .tab-item.cdk-drag-disabled:hover{background:#f8fafb!important;cursor:no-drop}.rs-multi-tab ul .isSelect{color:#1f3f5c;background:#fff}.rs-multi-tab ul .notSelect img{display:none}.rs-multi-tab ul .notSelect .img-block{display:inline-block;width:22px}.rs-multi-tab ul .notSelect:hover{color:#1f3f5c;background-color:#1f7bff0a}.rs-multi-tab ul .notSelect:hover .img-block{display:none}.rs-multi-tab ul .notSelect:hover img{display:inline-block}.rs-multi-tab .refresh-tab{cursor:pointer;text-align:right;color:#6c7c90;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;padding-right:12px}.rs-multi-tab .refresh-tab img{vertical-align:middle;margin-right:4px}.refresh-tab-loading{animation:spin 1s linear infinite}.notSelectTooltip{transform:translate(-12px)}.tab-item.cdk-drag{max-width:164px;padding:0 12px;display:flex;align-items:center;flex:auto;border:1px solid #e5eaef;border-bottom:none;color:#5f6f81;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;height:28px;background:#f8fafb;vertical-align:top;position:relative;cursor:default}.tab-item.cdk-drag .tabTitle{display:inline-block;white-space:nowrap;font-size:11px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px;transition:width .3s ease}.tab-item.cdk-drag img{border-radius:4px;padding:4px;margin-left:6px;margin-top:1px;vertical-align:top;cursor:pointer}.tab-item.cdk-drag img:hover{background:#dce8f6}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tooltip-content{padding:4px;color:#f8fafb;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:14px;width:-moz-fit-content;width:fit-content;white-space:nowrap}@media (max-width: 1400px){.refresh-tab{padding-right:0!important}.refresh-tab span{display:none!important}}@media (max-width: 1100px){.rs-multi-tab ul .tab-item img{position:absolute;right:3px;background-color:#fff}.notSelect:hover img{position:absolute;right:3px;background-color:#eff5fb}.img-block{display:none!important}.isSelect:not(:first-child){padding-right:20px!important}}@media (max-width: 600px){.rs-multi-tab ul .tab-item{padding:0 8px}.rs-multi-tab ul .notSelect .img-block{width:0px!important}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: CommonFunctionService }, { type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: DrawerService }, { type: i1$3.RouteReuseStrategy }]; }, propDecorators: { singleReuseUrls: [{
                 type: Input
             }], noGenerateTabUrls: [{
                 type: Input
+            }], flattenMenu: [{
+                type: Input
+            }], defaultTabUrl: [{
+                type: Input
             }], onRefreshTab: [{
                 type: Output
+            }], onCloseTab: [{
+                type: Output
             }], onResize: [{
                 type: HostListener,
                 args: ["window:resize", ["$event"]]
@@ -1915,6 +2173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class DrawerComponent {
     resolver;
     service;
+    ref;
     element;
     drawer;
     header;
@@ -1924,13 +2183,14 @@ class DrawerComponent {
     topSlot;
     container;
     config = DefaultDrawerConfig;
-    useTransition = "yes";
-    $isOpened = new BehaviorSubject(false);
+    useAnimation = "yes";
+    isOpened = false;
     hiddenDrawer = true;
     componentRefMap = new Map();
-    constructor(resolver, service) {
+    constructor(resolver, service, ref) {
         this.resolver = resolver;
         this.service = service;
+        this.ref = ref;
     }
     createDynamicComponent(component) {
         // 确保在调用之前目标组件已经在entryComponents中声明
@@ -1975,6 +2235,15 @@ class DrawerComponent {
             this.drawer.nativeElement.insertBefore(this.header.nativeElement, this.drawer.nativeElement.firstChild);
             this.header.nativeElement.append(this.toolbarSlot.nativeElement);
         }
+        this.config = cache.config;
+        this.ref.markForCheck();
+    }
+    setConfig(config) {
+        const cache = this.componentRefMap.get(this.service.cacheKey);
+        if (cache) {
+            cache.config = { ...cache.config, ...config };
+            this.setCache(cache);
+        }
     }
     show(component, config, data) {
         const showConfig = { ...DefaultDrawerConfig, ...config };
@@ -1992,7 +2261,6 @@ class DrawerComponent {
         this.setComponentData(componentRef, data);
         this.componentRefMap.set(this.service.cacheKey, cache);
         this.setCache(cache);
-        this.config = showConfig;
         this.toggleOpenStatus(true, true);
         return componentRef.instance;
     }
@@ -2017,32 +2285,33 @@ class DrawerComponent {
         const cache = this.componentRefMap.get(this.service.cacheKey);
         if (cache) {
             cache.ref.location.nativeElement.style.display = "";
-            this.config = cache.config;
             this.setCache(cache);
             this.toggleOpenStatus(true);
         }
         else {
             this.toggleOpenStatus(false);
         }
-        this.useTransition = "no";
+        this.useAnimation = "no";
     }
-    toggleOpenStatus(isOpen, useTransition = false) {
-        this.$isOpened.next(isOpen);
-        this.useTransition = useTransition ? "yes" : "no";
-        this.hiddenDrawer = !isOpen && !useTransition;
+    toggleOpenStatus(isOpen, useAnimation = false) {
+        this.isOpened = isOpen;
+        this.useAnimation = useAnimation ? "yes" : "no";
+        this.hiddenDrawer = !isOpen && !useAnimation;
+        this.ref.markForCheck();
     }
-    onTransitionEnd() {
-        if (!this.$isOpened.getValue()) {
+    onAnimationEnd() {
+        if (!this.isOpened) {
             this.hiddenDrawer = true;
+            this.ref.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawerComponent, selector: "rs-drawer", viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }, { propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "toolbarSlot", first: true, predicate: ["toolbarSlot"], descendants: true }, { propertyName: "headerSlot", first: true, predicate: ["headerSlot"], descendants: true }, { propertyName: "topSlot", first: true, predicate: ["topSlot"], descendants: true }, { propertyName: "container", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, 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 | async) ? 'yes' : 'no'\"\r\n    [attr.data-transition]=\"useTransition\"\r\n    [hidden]=\"hiddenDrawer\"\r\n    (transitionend)=\"onTransitionEnd()\"\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-transition=yes]{transition:.5s ease-in-out;transition-property:opacity,left}.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(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12 18L7.54986 12L12 6%22 stroke%3D%22%236C7C90%22 stroke-linecap%3D%22round%22%2F%3E%0D%3Cpath d%3D%22M17.427 12.5C17.7031 12.5 17.927 12.2761 17.927 12C17.927 11.7239 17.7031 11.5 17.427 11.5L17.427 12.5ZM7.39893 12.5L17.427 12.5L17.427 11.5L7.39893 11.5L7.39893 12.5Z%22 fill%3D%22%236C7C90%22%2F%3E%0D%3C%2Fsvg%3E%0D\");width:24px;height:24px;margin-right:8px;transition:transform ease-in-out 125ms}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button:hover:before{transform:translate(-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, 0px);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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: DrawerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawerComponent, selector: "rs-drawer", viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }, { propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "toolbarSlot", first: true, predicate: ["toolbarSlot"], descendants: true }, { propertyName: "headerSlot", first: true, predicate: ["headerSlot"], descendants: true }, { propertyName: "topSlot", first: true, predicate: ["topSlot"], descendants: true }, { propertyName: "container", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, 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]{animation:drawer-open ease-in-out .5s}@keyframes drawer-open{0%{left:100%;opacity:0}to{left:0;opacity:1}}.rs-drawer-container .rs-drawer[data-animation=yes][data-opened=no]{animation:drawer-close ease-in-out .5s}@keyframes drawer-close{0%{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(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12 18L7.54986 12L12 6%22 stroke%3D%22%236C7C90%22 stroke-linecap%3D%22round%22%2F%3E%0D%3Cpath d%3D%22M17.427 12.5C17.7031 12.5 17.927 12.2761 17.927 12C17.927 11.7239 17.7031 11.5 17.427 11.5L17.427 12.5ZM7.39893 12.5L17.427 12.5L17.427 11.5L7.39893 11.5L7.39893 12.5Z%22 fill%3D%22%236C7C90%22%2F%3E%0D%3C%2Fsvg%3E%0D\");width:24px;height:24px;margin-right:8px;transition:transform ease-in-out 125ms}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button:hover:before{transform:translate(-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, 0px);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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: 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 | async) ? 'yes' : 'no'\"\r\n    [attr.data-transition]=\"useTransition\"\r\n    [hidden]=\"hiddenDrawer\"\r\n    (transitionend)=\"onTransitionEnd()\"\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-transition=yes]{transition:.5s ease-in-out;transition-property:opacity,left}.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(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12 18L7.54986 12L12 6%22 stroke%3D%22%236C7C90%22 stroke-linecap%3D%22round%22%2F%3E%0D%3Cpath d%3D%22M17.427 12.5C17.7031 12.5 17.927 12.2761 17.927 12C17.927 11.7239 17.7031 11.5 17.427 11.5L17.427 12.5ZM7.39893 12.5L17.427 12.5L17.427 11.5L7.39893 11.5L7.39893 12.5Z%22 fill%3D%22%236C7C90%22%2F%3E%0D%3C%2Fsvg%3E%0D\");width:24px;height:24px;margin-right:8px;transition:transform ease-in-out 125ms}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button:hover:before{transform:translate(-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, 0px);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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: DrawerService }]; }, propDecorators: { element: [{
+            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]{animation:drawer-open ease-in-out .5s}@keyframes drawer-open{0%{left:100%;opacity:0}to{left:0;opacity:1}}.rs-drawer-container .rs-drawer[data-animation=yes][data-opened=no]{animation:drawer-close ease-in-out .5s}@keyframes drawer-close{0%{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(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12 18L7.54986 12L12 6%22 stroke%3D%22%236C7C90%22 stroke-linecap%3D%22round%22%2F%3E%0D%3Cpath d%3D%22M17.427 12.5C17.7031 12.5 17.927 12.2761 17.927 12C17.927 11.7239 17.7031 11.5 17.427 11.5L17.427 12.5ZM7.39893 12.5L17.427 12.5L17.427 11.5L7.39893 11.5L7.39893 12.5Z%22 fill%3D%22%236C7C90%22%2F%3E%0D%3C%2Fsvg%3E%0D\");width:24px;height:24px;margin-right:8px;transition:transform ease-in-out 125ms}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button:hover:before{transform:translate(-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, 0px);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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: DrawerService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { element: [{
                 type: ViewChild,
                 args: ["element", { static: false }]
             }], drawer: [{
@@ -2109,6 +2378,7 @@ class ToolbarItemComponent {
     text;
     disabled;
     children = [];
+    hideArrow = false;
     disabledOptions = {};
     buttonElement;
     get hostDisabled() {
@@ -2121,19 +2391,41 @@ class ToolbarItemComponent {
     ImageType = [
         "Add",
         "Delete",
+        "Update",
         "Import",
         "Export",
         "Upload",
         "Download",
         "Duplicate",
         "Refresh",
+        "AddFolder",
+        "Collapse",
+        "Combine",
+        "Edit",
+        "Lock",
+        "Expand",
+        "MoveTo",
+        "Publish",
+        "Preview",
+        "ReCalculate",
+        "Sync",
+        "Share",
+        "Rename",
+        "SaveSequence",
+        "SubmitForApproval",
+        "SendToControlPanel",
+        "SetReminders",
+        "Settle",
+        "Template",
+        "Workflow",
+        "FetchData",
     ];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarItemComponent, selector: "rs-toolbar-item", inputs: { image: "image", text: "text", disabled: "disabled", children: "children", disabledOptions: "disabledOptions" }, host: { properties: { "class.disabled": "this.hostDisabled" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], ngImport: i0, template: "<button\r\n  *ngIf=\"!children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n\r\n<button\r\n  *ngIf=\"children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  mat-menu-item\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-container *ngFor=\"let button of children\">\r\n    <button\r\n      class=\"toolbar-action-item e-btn text\"\r\n      [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n      (click)=\"button.action()\"\r\n    >\r\n      <span class=\"toolbar-action-image\" [attr.data-type]=\"button.image\">\r\n        <img *ngIf=\"!ImageType.includes(button.image)\" [src]=\"button.image\" />\r\n      </span>\r\n      <span>{{ button.text }}</span>\r\n    </button>\r\n  </ng-container>\r\n</mat-menu>\r\n", styles: ["rs-toolbar-item.disabled{pointer-events:none}.toolbar-action-item{min-width:auto;padding:4px 8px}.toolbar-action-item .toolbar-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}.toolbar-action-item .toolbar-action-image:before{display:block;width:16px;height:16px;line-height:16px}.toolbar-action-item .toolbar-action-image[data-type=Add]:before{content:url(/assets/img/toolbar-action-add.svg)}.toolbar-action-item .toolbar-action-image[data-type=Delete]:before{content:url(/assets/img/toolbar-action-delete.svg)}.toolbar-action-item .toolbar-action-image[data-type=Import]:before{content:url(/assets/img/toolbar-action-import.svg)}.toolbar-action-item .toolbar-action-image[data-type=Upload]:before{content:url(/assets/img/toolbar-action-upload.svg)}.toolbar-action-item .toolbar-action-image[data-type=Download]:before{content:url(/assets/img/toolbar-action-download.svg)}.toolbar-action-item .toolbar-action-image[data-type=Export]:before{content:url(/assets/img/toolbar-action-export.svg)}.toolbar-action-item .toolbar-action-image[data-type=Duplicate]:before{content:url(/assets/img/toolbar-action-duplicate.svg)}.toolbar-action-item .toolbar-action-image[data-type=Refresh]:before{content:url(/assets/img/toolbar-action-refresh.svg)}.toolbar-action-item .toolbar-action-image img{height:16px;display:block}.toolbar-action-item.e-btn{width:100%;justify-content:flex-start}.toolbar-action-item ::ng-deep .mat-mdc-menu-item-text{display:flex;gap:6px;align-items:center}.toolbar-action-item.mat-mdc-menu-item{min-height:24px}.toolbar-action-item.mat-menu-item:after{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarItemComponent, selector: "rs-toolbar-item", inputs: { image: "image", text: "text", disabled: "disabled", children: "children", hideArrow: "hideArrow", disabledOptions: "disabledOptions" }, host: { properties: { "class.disabled": "this.hostDisabled" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], ngImport: i0, template: "<button\r\n  *ngIf=\"!children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" *ngIf=\"image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n\r\n<button\r\n  *ngIf=\"children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  mat-menu-item\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" *ngIf=\"image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n  <span class=\"toolbar-action-arrow\" *ngIf=\"!hideArrow\">\r\n    <img src=\"assets/img/down-arrow.svg\" />\r\n  </span>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"toolbar-action-menu-content\">\r\n  <ng-container *ngFor=\"let button of children\">\r\n    <button\r\n      class=\"toolbar-action-item e-btn text\"\r\n      [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n      (click)=\"button.action()\"\r\n    >\r\n      <span\r\n        class=\"toolbar-action-image\"\r\n        *ngIf=\"button.image\"\r\n        [attr.data-type]=\"button.image\"\r\n      >\r\n        <img *ngIf=\"!ImageType.includes(button.image)\" [src]=\"button.image\" />\r\n      </span>\r\n      <span>{{ button.text }}</span>\r\n    </button>\r\n  </ng-container>\r\n</mat-menu>\r\n", styles: ["rs-toolbar-item.disabled{pointer-events:none}.toolbar-action-item{padding:4px 8px;font-size:11px!important;min-width:100px;font-size:11px}.toolbar-action-item .toolbar-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}.toolbar-action-item .toolbar-action-image:before{display:block;width:16px;height:16px}.toolbar-action-item .toolbar-action-image[data-type=Add]:before{content:url(/assets/img/toolbar-action-add.svg)}.toolbar-action-item .toolbar-action-image[data-type=Delete]:before{content:url(/assets/img/toolbar-action-delete.svg)}.toolbar-action-item .toolbar-action-image[data-type=Import]:before{content:url(/assets/img/toolbar-action-import.svg)}.toolbar-action-item .toolbar-action-image[data-type=Upload]:before{content:url(/assets/img/toolbar-action-upload.svg)}.toolbar-action-item .toolbar-action-image[data-type=Download]:before{content:url(/assets/img/toolbar-action-download.svg)}.toolbar-action-item .toolbar-action-image[data-type=Export]:before{content:url(/assets/img/toolbar-action-export.svg)}.toolbar-action-item .toolbar-action-image[data-type=Duplicate]:before{content:url(/assets/img/toolbar-action-duplicate.svg)}.toolbar-action-item .toolbar-action-image[data-type=Refresh]:before{content:url(/assets/img/toolbar-action-refresh.svg)}.toolbar-action-item .toolbar-action-image[data-type=AddFolder]:before{content:url(/assets/img/toolbar-action-addFolder.svg)}.toolbar-action-item .toolbar-action-image[data-type=Collapse]:before{content:url(/assets/img/toolbar-action-collapse.svg)}.toolbar-action-item .toolbar-action-image[data-type=Combine]:before{content:url(/assets/img/toolbar-action-combine.svg)}.toolbar-action-item .toolbar-action-image[data-type=Edit]:before{content:url(/assets/img/toolbar-action-edit.svg)}.toolbar-action-item .toolbar-action-image[data-type=Lock]:before{content:url(/assets/img/toolbar-action-lock.svg)}.toolbar-action-item .toolbar-action-image[data-type=Expand]:before{content:url(/assets/img/toolbar-action-expand.svg)}.toolbar-action-item .toolbar-action-image[data-type=MoveTo]:before{content:url(/assets/img/toolbar-action-folderMove.svg)}.toolbar-action-item .toolbar-action-image[data-type=Publish]:before{content:url(/assets/img/toolbar-action-publish.svg)}.toolbar-action-item .toolbar-action-image[data-type=Preview]:before{content:url(/assets/img/toolbar-action-preview.svg)}.toolbar-action-item .toolbar-action-image[data-type=ReCalculate]:before{content:url(/assets/img/toolbar-action-calculator.svg)}.toolbar-action-item .toolbar-action-image[data-type=Sync]:before{content:url(/assets/img/toolbar-action-sync.svg)}.toolbar-action-item .toolbar-action-image[data-type=Share]:before{content:url(/assets/img/toolbar-action-share.svg)}.toolbar-action-item .toolbar-action-image[data-type=Rename]:before{content:url(/assets/img/toolbar-action-rename.svg)}.toolbar-action-item .toolbar-action-image[data-type=SaveSequence]:before{content:url(/assets/img/toolbar-action-saveSequence.svg)}.toolbar-action-item .toolbar-action-image[data-type=SubmitForApproval]:before{content:url(/assets/img/toolbar-action-submitForApproval.svg)}.toolbar-action-item .toolbar-action-image[data-type=SendToControlPanel]:before{content:url(/assets/img/toolbar-action-send-file.svg)}.toolbar-action-item .toolbar-action-image[data-type=SetReminders]:before{content:url(/assets/img/toolbar-action-reminders.svg)}.toolbar-action-item .toolbar-action-image[data-type=Settle]:before{content:url(/assets/img/toolbar-action-settle.svg)}.toolbar-action-item .toolbar-action-image[data-type=Template]:before{content:url(/assets/img/toolbar-action-template.svg)}.toolbar-action-item .toolbar-action-image[data-type=Workflow]:before{content:url(/assets/img/toolbar-action-workflow.svg)}.toolbar-action-item .toolbar-action-image[data-type=Update]:before{content:url(/assets/img/toolbar-action-update.svg)}.toolbar-action-item .toolbar-action-image[data-type=FetchData]:before{content:url(/assets/img/toolbar-action-fetchData.svg)}.toolbar-action-item .toolbar-action-image img{height:16px;display:block}.toolbar-action-item.e-btn{width:100%;justify-content:flex-start}.toolbar-action-item.mat-menu-item:after{display:none}.toolbar-action-item ::ng-deep .mat-mdc-menu-item-text{font-family:var(--rs-font-family);display:flex;justify-content:center;align-items:center;gap:6px;font-style:normal;background:transparent!important;color:var(--rs-cancel-btn-color)!important;height:24px!important;min-width:auto!important;font-size:12px;border-radius:4px;box-shadow:none!important;line-height:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-toolbar-item", template: "<button\r\n  *ngIf=\"!children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n\r\n<button\r\n  *ngIf=\"children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  mat-menu-item\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-container *ngFor=\"let button of children\">\r\n    <button\r\n      class=\"toolbar-action-item e-btn text\"\r\n      [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n      (click)=\"button.action()\"\r\n    >\r\n      <span class=\"toolbar-action-image\" [attr.data-type]=\"button.image\">\r\n        <img *ngIf=\"!ImageType.includes(button.image)\" [src]=\"button.image\" />\r\n      </span>\r\n      <span>{{ button.text }}</span>\r\n    </button>\r\n  </ng-container>\r\n</mat-menu>\r\n", styles: ["rs-toolbar-item.disabled{pointer-events:none}.toolbar-action-item{min-width:auto;padding:4px 8px}.toolbar-action-item .toolbar-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}.toolbar-action-item .toolbar-action-image:before{display:block;width:16px;height:16px;line-height:16px}.toolbar-action-item .toolbar-action-image[data-type=Add]:before{content:url(/assets/img/toolbar-action-add.svg)}.toolbar-action-item .toolbar-action-image[data-type=Delete]:before{content:url(/assets/img/toolbar-action-delete.svg)}.toolbar-action-item .toolbar-action-image[data-type=Import]:before{content:url(/assets/img/toolbar-action-import.svg)}.toolbar-action-item .toolbar-action-image[data-type=Upload]:before{content:url(/assets/img/toolbar-action-upload.svg)}.toolbar-action-item .toolbar-action-image[data-type=Download]:before{content:url(/assets/img/toolbar-action-download.svg)}.toolbar-action-item .toolbar-action-image[data-type=Export]:before{content:url(/assets/img/toolbar-action-export.svg)}.toolbar-action-item .toolbar-action-image[data-type=Duplicate]:before{content:url(/assets/img/toolbar-action-duplicate.svg)}.toolbar-action-item .toolbar-action-image[data-type=Refresh]:before{content:url(/assets/img/toolbar-action-refresh.svg)}.toolbar-action-item .toolbar-action-image img{height:16px;display:block}.toolbar-action-item.e-btn{width:100%;justify-content:flex-start}.toolbar-action-item ::ng-deep .mat-mdc-menu-item-text{display:flex;gap:6px;align-items:center}.toolbar-action-item.mat-mdc-menu-item{min-height:24px}.toolbar-action-item.mat-menu-item:after{display:none}\n"] }]
+            args: [{ selector: "rs-toolbar-item", template: "<button\r\n  *ngIf=\"!children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" *ngIf=\"image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n\r\n<button\r\n  *ngIf=\"children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  mat-menu-item\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" *ngIf=\"image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n  <span class=\"toolbar-action-arrow\" *ngIf=\"!hideArrow\">\r\n    <img src=\"assets/img/down-arrow.svg\" />\r\n  </span>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"toolbar-action-menu-content\">\r\n  <ng-container *ngFor=\"let button of children\">\r\n    <button\r\n      class=\"toolbar-action-item e-btn text\"\r\n      [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n      (click)=\"button.action()\"\r\n    >\r\n      <span\r\n        class=\"toolbar-action-image\"\r\n        *ngIf=\"button.image\"\r\n        [attr.data-type]=\"button.image\"\r\n      >\r\n        <img *ngIf=\"!ImageType.includes(button.image)\" [src]=\"button.image\" />\r\n      </span>\r\n      <span>{{ button.text }}</span>\r\n    </button>\r\n  </ng-container>\r\n</mat-menu>\r\n", styles: ["rs-toolbar-item.disabled{pointer-events:none}.toolbar-action-item{padding:4px 8px;font-size:11px!important;min-width:100px;font-size:11px}.toolbar-action-item .toolbar-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}.toolbar-action-item .toolbar-action-image:before{display:block;width:16px;height:16px}.toolbar-action-item .toolbar-action-image[data-type=Add]:before{content:url(/assets/img/toolbar-action-add.svg)}.toolbar-action-item .toolbar-action-image[data-type=Delete]:before{content:url(/assets/img/toolbar-action-delete.svg)}.toolbar-action-item .toolbar-action-image[data-type=Import]:before{content:url(/assets/img/toolbar-action-import.svg)}.toolbar-action-item .toolbar-action-image[data-type=Upload]:before{content:url(/assets/img/toolbar-action-upload.svg)}.toolbar-action-item .toolbar-action-image[data-type=Download]:before{content:url(/assets/img/toolbar-action-download.svg)}.toolbar-action-item .toolbar-action-image[data-type=Export]:before{content:url(/assets/img/toolbar-action-export.svg)}.toolbar-action-item .toolbar-action-image[data-type=Duplicate]:before{content:url(/assets/img/toolbar-action-duplicate.svg)}.toolbar-action-item .toolbar-action-image[data-type=Refresh]:before{content:url(/assets/img/toolbar-action-refresh.svg)}.toolbar-action-item .toolbar-action-image[data-type=AddFolder]:before{content:url(/assets/img/toolbar-action-addFolder.svg)}.toolbar-action-item .toolbar-action-image[data-type=Collapse]:before{content:url(/assets/img/toolbar-action-collapse.svg)}.toolbar-action-item .toolbar-action-image[data-type=Combine]:before{content:url(/assets/img/toolbar-action-combine.svg)}.toolbar-action-item .toolbar-action-image[data-type=Edit]:before{content:url(/assets/img/toolbar-action-edit.svg)}.toolbar-action-item .toolbar-action-image[data-type=Lock]:before{content:url(/assets/img/toolbar-action-lock.svg)}.toolbar-action-item .toolbar-action-image[data-type=Expand]:before{content:url(/assets/img/toolbar-action-expand.svg)}.toolbar-action-item .toolbar-action-image[data-type=MoveTo]:before{content:url(/assets/img/toolbar-action-folderMove.svg)}.toolbar-action-item .toolbar-action-image[data-type=Publish]:before{content:url(/assets/img/toolbar-action-publish.svg)}.toolbar-action-item .toolbar-action-image[data-type=Preview]:before{content:url(/assets/img/toolbar-action-preview.svg)}.toolbar-action-item .toolbar-action-image[data-type=ReCalculate]:before{content:url(/assets/img/toolbar-action-calculator.svg)}.toolbar-action-item .toolbar-action-image[data-type=Sync]:before{content:url(/assets/img/toolbar-action-sync.svg)}.toolbar-action-item .toolbar-action-image[data-type=Share]:before{content:url(/assets/img/toolbar-action-share.svg)}.toolbar-action-item .toolbar-action-image[data-type=Rename]:before{content:url(/assets/img/toolbar-action-rename.svg)}.toolbar-action-item .toolbar-action-image[data-type=SaveSequence]:before{content:url(/assets/img/toolbar-action-saveSequence.svg)}.toolbar-action-item .toolbar-action-image[data-type=SubmitForApproval]:before{content:url(/assets/img/toolbar-action-submitForApproval.svg)}.toolbar-action-item .toolbar-action-image[data-type=SendToControlPanel]:before{content:url(/assets/img/toolbar-action-send-file.svg)}.toolbar-action-item .toolbar-action-image[data-type=SetReminders]:before{content:url(/assets/img/toolbar-action-reminders.svg)}.toolbar-action-item .toolbar-action-image[data-type=Settle]:before{content:url(/assets/img/toolbar-action-settle.svg)}.toolbar-action-item .toolbar-action-image[data-type=Template]:before{content:url(/assets/img/toolbar-action-template.svg)}.toolbar-action-item .toolbar-action-image[data-type=Workflow]:before{content:url(/assets/img/toolbar-action-workflow.svg)}.toolbar-action-item .toolbar-action-image[data-type=Update]:before{content:url(/assets/img/toolbar-action-update.svg)}.toolbar-action-item .toolbar-action-image[data-type=FetchData]:before{content:url(/assets/img/toolbar-action-fetchData.svg)}.toolbar-action-item .toolbar-action-image img{height:16px;display:block}.toolbar-action-item.e-btn{width:100%;justify-content:flex-start}.toolbar-action-item.mat-menu-item:after{display:none}.toolbar-action-item ::ng-deep .mat-mdc-menu-item-text{font-family:var(--rs-font-family);display:flex;justify-content:center;align-items:center;gap:6px;font-style:normal;background:transparent!important;color:var(--rs-cancel-btn-color)!important;height:24px!important;min-width:auto!important;font-size:12px;border-radius:4px;box-shadow:none!important;line-height:normal}\n"] }]
         }], propDecorators: { image: [{
                 type: Input,
                 args: ["image"]
@@ -2146,6 +2438,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], children: [{
                 type: Input,
                 args: ["children"]
+            }], hideArrow: [{
+                type: Input,
+                args: ["hideArrow"]
             }], disabledOptions: [{
                 type: Input
             }], buttonElement: [{
@@ -2208,7 +2503,7 @@ class RSToolbarComponent {
         this.updateButtonVisibility();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RSToolbarComponent, deps: [{ token: i1$3.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RSToolbarComponent, selector: "rs-toolbar", inputs: { buttons: "buttons", disabledOptions: "disabledOptions" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true }, { propertyName: "buttonElements", predicate: ["toolbarItem"], descendants: true }], ngImport: i0, template: "<div #toolbarContainer class=\"rs-toolbar-container\">\r\n  <!-- \u53EF\u89C1\u6309\u94AE -->\r\n  <ng-container *ngFor=\"let button of buttons\">\r\n    <div class=\"temp-hidden\" #toolbarItem>\r\n      <rs-toolbar-item\r\n        [image]=\"button.image\"\r\n        [text]=\"button.text\"\r\n        [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n        (click)=\"button.action && button.action()\"\r\n        [children]=\"button.children || []\"\r\n        [disabledOptions]=\"disabledOptions\"\r\n      >\r\n      </rs-toolbar-item>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- \u4E0B\u62C9\u83DC\u5355\uFF08\u5982\u679C\u6709\u9690\u85CF\u6309\u94AE\uFF09 -->\r\n  <button\r\n    *ngIf=\"hiddenButtons.length > 0\"\r\n    mat-button\r\n    [matMenuTriggerFor]=\"menu\"\r\n    #menuTrigger=\"matMenuTrigger\"\r\n    class=\"action-toggle\"\r\n  >\r\n    <mat-icon svgIcon=\"more\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\">\r\n    <ng-container *ngFor=\"let button of hiddenButtons\">\r\n      <rs-toolbar-item\r\n        [image]=\"button.image\"\r\n        [text]=\"button.text\"\r\n        (click)=\"button.action && button.action()\"\r\n        [disabled]=\"disabledOptions[button.key] || false\"\r\n        [children]=\"button.children || []\"\r\n        [disabledOptions]=\"disabledOptions\"\r\n      >\r\n      </rs-toolbar-item>\r\n    </ng-container>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.rs-toolbar-container{width:100%;display:flex;align-items:center}.rs-toolbar-container .temp-hidden{visibility:hidden;position:absolute}.rs-toolbar-container .action-toggle{width:24px;height:24px;min-width:24px;max-width:24px;padding:0;border-radius:4px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;background:transparent}.rs-toolbar-container .action-toggle:hover{background:#d6e3f533}.rs-toolbar-container .action-toggle .mat-button-wrapper{max-height:24px;height:24px}.rs-toolbar-container .action-toggle ::ng-deep .mat-icon{width:16px;height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarItemComponent, selector: "rs-toolbar-item", inputs: ["image", "text", "disabled", "children", "disabledOptions"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RSToolbarComponent, selector: "rs-toolbar", inputs: { buttons: "buttons", disabledOptions: "disabledOptions" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true }, { propertyName: "buttonElements", predicate: ["toolbarItem"], descendants: true }], ngImport: i0, template: "<div #toolbarContainer class=\"rs-toolbar-container\">\r\n  <!-- \u53EF\u89C1\u6309\u94AE -->\r\n  <ng-container *ngFor=\"let button of buttons\">\r\n    <div class=\"temp-hidden\" #toolbarItem>\r\n      <rs-toolbar-item\r\n        [image]=\"button.image\"\r\n        [text]=\"button.text\"\r\n        [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n        (click)=\"button.action && button.action()\"\r\n        [children]=\"button.children || []\"\r\n        [disabledOptions]=\"disabledOptions\"\r\n      >\r\n      </rs-toolbar-item>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- \u4E0B\u62C9\u83DC\u5355\uFF08\u5982\u679C\u6709\u9690\u85CF\u6309\u94AE\uFF09 -->\r\n  <button\r\n    *ngIf=\"hiddenButtons.length > 0\"\r\n    mat-button\r\n    [matMenuTriggerFor]=\"menu\"\r\n    #menuTrigger=\"matMenuTrigger\"\r\n    class=\"action-toggle\"\r\n  >\r\n    <mat-icon svgIcon=\"more\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\">\r\n    <ng-container *ngFor=\"let button of hiddenButtons\">\r\n      <rs-toolbar-item\r\n        [image]=\"button.image\"\r\n        [text]=\"button.text\"\r\n        (click)=\"button.action && button.action()\"\r\n        [disabled]=\"disabledOptions[button.key] || false\"\r\n        [children]=\"button.children || []\"\r\n        [disabledOptions]=\"disabledOptions\"\r\n      >\r\n      </rs-toolbar-item>\r\n    </ng-container>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.rs-toolbar-container{width:100%;display:flex;align-items:center}.rs-toolbar-container .temp-hidden{visibility:hidden;position:absolute}.rs-toolbar-container .action-toggle{width:24px;height:24px;min-width:24px;max-width:24px;padding:0;border-radius:4px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;background:transparent}.rs-toolbar-container .action-toggle:hover{background:#d6e3f533}.rs-toolbar-container .action-toggle .mat-button-wrapper{max-height:24px;height:24px}.rs-toolbar-container .action-toggle ::ng-deep .mat-icon{width:16px;height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarItemComponent, selector: "rs-toolbar-item", inputs: ["image", "text", "disabled", "children", "hideArrow", "disabledOptions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RSToolbarComponent, decorators: [{
             type: Component,
@@ -18827,6 +19122,7 @@ class RSHeaderComponent {
     }
     isCollapsed = false; // 接收输入属性
     lastLoginTime = new Date();
+    appName = "";
     set langOptions(options) {
         this._langOptions = options;
         if (options && options.length > 0) {
@@ -18854,15 +19150,17 @@ class RSHeaderComponent {
         this.changeLanguage.emit(this.currentLang.languageCode);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RSHeaderComponent, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RSHeaderComponent, selector: "rs-header", inputs: { isCollapsed: "isCollapsed", lastLoginTime: "lastLoginTime", langOptions: "langOptions" }, outputs: { toggleMenu: "toggleMenu", changeLanguage: "changeLanguage" }, ngImport: i0, template: "<div class=\"rs-header\">\r\n  <div class=\"logo-wrap\">\r\n    <div class=\"toggle-menu-wrap\">\r\n      <img\r\n        class=\"toggle-menu\"\r\n        src=\"../../../assets/img/toggle-menu-icon.svg\"\r\n        (click)=\"onToggleMenu()\"\r\n      />\r\n    </div>\r\n    <img\r\n      class=\"logo\"\r\n      src=\"../../../assets/img/raise_logo_main.svg\"\r\n      alt=\"logo\"\r\n    />\r\n  </div>\r\n  <div class=\"content-header-wrap\">\r\n    <div class=\"bread-crumbs-wrap\">\r\n      <ng-content select=\"[breadCrumbs]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-header-toolbar-wrap\">\r\n      <div class=\"quick-icon-group\">\r\n        <ng-content select=\"[toolbar]\"></ng-content>\r\n      </div>\r\n      <ng-container *ngIf=\"langOptions?.length > 1\">\r\n        <div class=\"line\"></div>\r\n        <div class=\"langulage-wrap\">\r\n          <button\r\n            class=\"e-btn text\"\r\n            ejs-dropdownbutton\r\n            [items]=\"langOptions\"\r\n            (select)=\"selectLanguage($event)\"\r\n          >\r\n            {{ currentLang.text }}\r\n          </button>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div class=\"line\"></div>\r\n      <div class=\"last-login-wrap\">\r\n        {{ translation?.LAST_LOGIN || \"Last Login\" }}:\r\n        {{ lastLoginTime | date : \"dd MMM yy h:mm a\" }}\r\n      </div>\r\n      <div class=\"line\"></div>\r\n      <div class=\"user-info-wrap\">\r\n        <ng-content select=\"[userInfo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".rs-header{height:50px;background-color:var(--rs-container-bg);display:flex;justify-content:space-between}.rs-header .logo-wrap{width:240px;display:flex;padding:12px 0 0 20px}.rs-header .logo-wrap .toggle-menu-wrap{cursor:pointer;margin-right:8px;margin-top:2px;width:24px;height:24px}.rs-header .logo-wrap .toggle-menu-wrap:hover{background:#1364b30d;border-radius:6px}.rs-header .logo-wrap .logo{width:77px;height:32px}@media (max-width: 1200px){.rs-header .logo-wrap{width:auto}}.rs-header .content-header-wrap{display:flex;justify-content:space-between;align-items:center;flex:1;max-width:1886px;margin:0 auto}.rs-header .bread-crumbs-wrap{padding-left:16px}.rs-header .rs-header-toolbar-wrap,.rs-header .rs-header-toolbar-wrap .quick-icon-group{display:flex;align-items:center}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon{width:32px;height:32px;display:flex;justify-content:center;align-items:center;margin-right:8px;cursor:pointer}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:last-child{margin-right:16px}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon svg{width:24px;height:24px;color:#6c7c90;stroke:#6c7c90}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover{border-radius:4px;background:#1f7bff0a}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover svg{color:#1f7bff;stroke:#1f7bff}.rs-header .rs-header-toolbar-wrap .line{width:1px;height:24px;background-color:var(--rs-border-color)}.rs-header .rs-header-toolbar-wrap .langulage-wrap{padding:0 16px}.rs-header .rs-header-toolbar-wrap .last-login-wrap{padding:0 16px;color:var(--rs-labels-color);font-size:11px;font-weight:400;line-height:1}@media (max-width: 768px){.rs-header .rs-header-toolbar-wrap .last-login-wrap{display:none}}.rs-header .rs-header-toolbar-wrap .user-info-wrap{padding:0 20px 0 16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$3.DropDownButtonComponent, selector: "[ejs-dropdownbutton]", inputs: ["closeActionEvents", "content", "createPopupOnClick", "cssClass", "disabled", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "iconCss", "iconPosition", "items", "locale", "target"], outputs: ["beforeClose", "beforeItemRender", "beforeOpen", "close", "created", "open", "select"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RSHeaderComponent, selector: "rs-header", inputs: { isCollapsed: "isCollapsed", lastLoginTime: "lastLoginTime", appName: "appName", langOptions: "langOptions" }, outputs: { toggleMenu: "toggleMenu", changeLanguage: "changeLanguage" }, ngImport: i0, template: "<div class=\"rs-header\">\r\n  <div class=\"logo-wrap\">\r\n    <div class=\"toggle-menu-wrap\">\r\n      <img\r\n        class=\"toggle-menu\"\r\n        src=\"../../../assets/img/toggle-menu-icon.svg\"\r\n        (click)=\"onToggleMenu()\"\r\n      />\r\n    </div>\r\n    <img\r\n      class=\"logo\"\r\n      src=\"../../../assets/img/raise_logo_main.svg\"\r\n      alt=\"logo\"\r\n    />\r\n    <div *ngIf=\"appName\" class=\"header-app-name\">{{ appName }}</div>\r\n  </div>\r\n  <div class=\"content-header-wrap\">\r\n    <div class=\"bread-crumbs-wrap\">\r\n      <ng-content select=\"[breadCrumbs]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-header-toolbar-wrap\">\r\n      <div class=\"quick-icon-group\">\r\n        <ng-content select=\"[toolbar]\"></ng-content>\r\n      </div>\r\n      <div class=\"line\"></div>\r\n      <div class=\"langulage-wrap\">\r\n        <button\r\n          class=\"e-btn text\"\r\n          ejs-dropdownbutton\r\n          [items]=\"langOptions\"\r\n          (select)=\"selectLanguage($event)\"\r\n        >\r\n          {{ currentLang && currentLang.text }}\r\n        </button>\r\n      </div>\r\n      <!-- <div class=\"line\"></div>\r\n      <div class=\"last-login-wrap\">\r\n        {{ translation?.LAST_LOGIN || \"Last Login\" }}:\r\n        {{ lastLoginTime | date : \"dd MMM yy h:mm a\" }}\r\n      </div> -->\r\n      <div class=\"line\"></div>\r\n      <div class=\"user-info-wrap\">\r\n        <ng-content select=\"[userInfo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".rs-header{height:50px;background-color:var(--rs-container-bg);display:flex;justify-content:space-between}.rs-header .logo-wrap{width:240px;display:flex;padding:12px 0 0 20px}.rs-header .logo-wrap .toggle-menu-wrap{cursor:pointer;margin-right:8px;margin-top:2px;width:24px;height:24px}.rs-header .logo-wrap .toggle-menu-wrap:hover{background:#1364b30d;border-radius:6px}.rs-header .logo-wrap .logo{width:77px;height:32px}.rs-header .logo-wrap .header-app-name{font-size:24px;color:#15477f;margin-left:6px;margin-top:-8px}@media (max-width: 1200px){.rs-header .logo-wrap{width:auto}}.rs-header .content-header-wrap{display:flex;justify-content:space-between;align-items:center;flex:1;max-width:1886px;margin:0 auto}.rs-header .bread-crumbs-wrap{padding-left:16px}.rs-header .rs-header-toolbar-wrap,.rs-header .rs-header-toolbar-wrap .quick-icon-group{display:flex;align-items:center}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon{width:32px;height:32px;display:flex;justify-content:center;align-items:center;margin-right:8px;cursor:pointer}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:last-child{margin-right:16px}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon svg{width:24px;height:24px;color:#6c7c90;stroke:#6c7c90}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover{border-radius:4px;background:#1f7bff0a}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover svg{color:#1f7bff;stroke:#1f7bff}.rs-header .rs-header-toolbar-wrap .line{width:1px;height:24px;background-color:var(--rs-border-color)}.rs-header .rs-header-toolbar-wrap .langulage-wrap{padding:0 16px}.rs-header .rs-header-toolbar-wrap .last-login-wrap{padding:0 16px;color:var(--rs-labels-color);font-size:11px;font-weight:400;line-height:1}.rs-header .rs-header-toolbar-wrap .user-info-wrap{padding:0 20px 0 16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DropDownButtonComponent, selector: "[ejs-dropdownbutton]", inputs: ["closeActionEvents", "content", "createPopupOnClick", "cssClass", "disabled", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "iconCss", "iconPosition", "items", "locale", "target"], outputs: ["beforeClose", "beforeItemRender", "beforeOpen", "close", "created", "open", "select"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RSHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-header", template: "<div class=\"rs-header\">\r\n  <div class=\"logo-wrap\">\r\n    <div class=\"toggle-menu-wrap\">\r\n      <img\r\n        class=\"toggle-menu\"\r\n        src=\"../../../assets/img/toggle-menu-icon.svg\"\r\n        (click)=\"onToggleMenu()\"\r\n      />\r\n    </div>\r\n    <img\r\n      class=\"logo\"\r\n      src=\"../../../assets/img/raise_logo_main.svg\"\r\n      alt=\"logo\"\r\n    />\r\n  </div>\r\n  <div class=\"content-header-wrap\">\r\n    <div class=\"bread-crumbs-wrap\">\r\n      <ng-content select=\"[breadCrumbs]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-header-toolbar-wrap\">\r\n      <div class=\"quick-icon-group\">\r\n        <ng-content select=\"[toolbar]\"></ng-content>\r\n      </div>\r\n      <ng-container *ngIf=\"langOptions?.length > 1\">\r\n        <div class=\"line\"></div>\r\n        <div class=\"langulage-wrap\">\r\n          <button\r\n            class=\"e-btn text\"\r\n            ejs-dropdownbutton\r\n            [items]=\"langOptions\"\r\n            (select)=\"selectLanguage($event)\"\r\n          >\r\n            {{ currentLang.text }}\r\n          </button>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div class=\"line\"></div>\r\n      <div class=\"last-login-wrap\">\r\n        {{ translation?.LAST_LOGIN || \"Last Login\" }}:\r\n        {{ lastLoginTime | date : \"dd MMM yy h:mm a\" }}\r\n      </div>\r\n      <div class=\"line\"></div>\r\n      <div class=\"user-info-wrap\">\r\n        <ng-content select=\"[userInfo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".rs-header{height:50px;background-color:var(--rs-container-bg);display:flex;justify-content:space-between}.rs-header .logo-wrap{width:240px;display:flex;padding:12px 0 0 20px}.rs-header .logo-wrap .toggle-menu-wrap{cursor:pointer;margin-right:8px;margin-top:2px;width:24px;height:24px}.rs-header .logo-wrap .toggle-menu-wrap:hover{background:#1364b30d;border-radius:6px}.rs-header .logo-wrap .logo{width:77px;height:32px}@media (max-width: 1200px){.rs-header .logo-wrap{width:auto}}.rs-header .content-header-wrap{display:flex;justify-content:space-between;align-items:center;flex:1;max-width:1886px;margin:0 auto}.rs-header .bread-crumbs-wrap{padding-left:16px}.rs-header .rs-header-toolbar-wrap,.rs-header .rs-header-toolbar-wrap .quick-icon-group{display:flex;align-items:center}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon{width:32px;height:32px;display:flex;justify-content:center;align-items:center;margin-right:8px;cursor:pointer}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:last-child{margin-right:16px}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon svg{width:24px;height:24px;color:#6c7c90;stroke:#6c7c90}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover{border-radius:4px;background:#1f7bff0a}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover svg{color:#1f7bff;stroke:#1f7bff}.rs-header .rs-header-toolbar-wrap .line{width:1px;height:24px;background-color:var(--rs-border-color)}.rs-header .rs-header-toolbar-wrap .langulage-wrap{padding:0 16px}.rs-header .rs-header-toolbar-wrap .last-login-wrap{padding:0 16px;color:var(--rs-labels-color);font-size:11px;font-weight:400;line-height:1}@media (max-width: 768px){.rs-header .rs-header-toolbar-wrap .last-login-wrap{display:none}}.rs-header .rs-header-toolbar-wrap .user-info-wrap{padding:0 20px 0 16px}\n"] }]
+            args: [{ selector: "rs-header", template: "<div class=\"rs-header\">\r\n  <div class=\"logo-wrap\">\r\n    <div class=\"toggle-menu-wrap\">\r\n      <img\r\n        class=\"toggle-menu\"\r\n        src=\"../../../assets/img/toggle-menu-icon.svg\"\r\n        (click)=\"onToggleMenu()\"\r\n      />\r\n    </div>\r\n    <img\r\n      class=\"logo\"\r\n      src=\"../../../assets/img/raise_logo_main.svg\"\r\n      alt=\"logo\"\r\n    />\r\n    <div *ngIf=\"appName\" class=\"header-app-name\">{{ appName }}</div>\r\n  </div>\r\n  <div class=\"content-header-wrap\">\r\n    <div class=\"bread-crumbs-wrap\">\r\n      <ng-content select=\"[breadCrumbs]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-header-toolbar-wrap\">\r\n      <div class=\"quick-icon-group\">\r\n        <ng-content select=\"[toolbar]\"></ng-content>\r\n      </div>\r\n      <div class=\"line\"></div>\r\n      <div class=\"langulage-wrap\">\r\n        <button\r\n          class=\"e-btn text\"\r\n          ejs-dropdownbutton\r\n          [items]=\"langOptions\"\r\n          (select)=\"selectLanguage($event)\"\r\n        >\r\n          {{ currentLang && currentLang.text }}\r\n        </button>\r\n      </div>\r\n      <!-- <div class=\"line\"></div>\r\n      <div class=\"last-login-wrap\">\r\n        {{ translation?.LAST_LOGIN || \"Last Login\" }}:\r\n        {{ lastLoginTime | date : \"dd MMM yy h:mm a\" }}\r\n      </div> -->\r\n      <div class=\"line\"></div>\r\n      <div class=\"user-info-wrap\">\r\n        <ng-content select=\"[userInfo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".rs-header{height:50px;background-color:var(--rs-container-bg);display:flex;justify-content:space-between}.rs-header .logo-wrap{width:240px;display:flex;padding:12px 0 0 20px}.rs-header .logo-wrap .toggle-menu-wrap{cursor:pointer;margin-right:8px;margin-top:2px;width:24px;height:24px}.rs-header .logo-wrap .toggle-menu-wrap:hover{background:#1364b30d;border-radius:6px}.rs-header .logo-wrap .logo{width:77px;height:32px}.rs-header .logo-wrap .header-app-name{font-size:24px;color:#15477f;margin-left:6px;margin-top:-8px}@media (max-width: 1200px){.rs-header .logo-wrap{width:auto}}.rs-header .content-header-wrap{display:flex;justify-content:space-between;align-items:center;flex:1;max-width:1886px;margin:0 auto}.rs-header .bread-crumbs-wrap{padding-left:16px}.rs-header .rs-header-toolbar-wrap,.rs-header .rs-header-toolbar-wrap .quick-icon-group{display:flex;align-items:center}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon{width:32px;height:32px;display:flex;justify-content:center;align-items:center;margin-right:8px;cursor:pointer}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:last-child{margin-right:16px}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon svg{width:24px;height:24px;color:#6c7c90;stroke:#6c7c90}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover{border-radius:4px;background:#1f7bff0a}.rs-header .rs-header-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover svg{color:#1f7bff;stroke:#1f7bff}.rs-header .rs-header-toolbar-wrap .line{width:1px;height:24px;background-color:var(--rs-border-color)}.rs-header .rs-header-toolbar-wrap .langulage-wrap{padding:0 16px}.rs-header .rs-header-toolbar-wrap .last-login-wrap{padding:0 16px;color:var(--rs-labels-color);font-size:11px;font-weight:400;line-height:1}.rs-header .rs-header-toolbar-wrap .user-info-wrap{padding:0 20px 0 16px}\n"] }]
         }], ctorParameters: function () { return [{ type: TranslationService }]; }, propDecorators: { isCollapsed: [{
                 type: Input
             }], lastLoginTime: [{
                 type: Input
+            }], appName: [{
+                type: Input
             }], langOptions: [{
                 type: Input
             }], toggleMenu: [{
@@ -18877,11 +19175,11 @@ class RSFooterComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RSFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RSFooterComponent, selector: "rs-footer", ngImport: i0, template: "<div class=\"rs-footer\">\r\n  <span>\r\n    RAISE<sup>&reg;</sup>\u00A0\u00A9\u00A0\r\n    {{ today | date : \"yyyy\" }}\r\n    Linnovate Partners</span\r\n  >\r\n</div>\r\n", styles: [".rs-footer{height:40px;padding:0 24px;display:flex;align-items:center;background-color:var(--rs-container-bg);color:var(--rs-labels-color);font-family:var(--rs-font-family);font-size:11px;max-width:1886px;margin:0 auto}\n"], dependencies: [{ kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RSFooterComponent, selector: "rs-footer", ngImport: i0, template: "<div class=\"rs-footer\">\r\n  <span>\r\n    RAISE<sup>&reg;</sup>\u00A0\u00A9\u00A0\r\n    {{ today | date : \"yyyy\" }}\r\n    Linnovate Partners</span\r\n  >\r\n</div>\r\n", styles: [".rs-footer{height:40px;padding:0 24px;display:flex;align-items:center;background-color:var(--rs-container-bg);color:var(--rs-labels-color);font-family:var(--rs-font-family);font-size:11px;max-width:1886px;margin:0 auto}@media (max-width: 768px){.rs-footer{width:100%;position:fixed;bottom:0;left:0}}\n"], dependencies: [{ kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RSFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-footer', template: "<div class=\"rs-footer\">\r\n  <span>\r\n    RAISE<sup>&reg;</sup>\u00A0\u00A9\u00A0\r\n    {{ today | date : \"yyyy\" }}\r\n    Linnovate Partners</span\r\n  >\r\n</div>\r\n", styles: [".rs-footer{height:40px;padding:0 24px;display:flex;align-items:center;background-color:var(--rs-container-bg);color:var(--rs-labels-color);font-family:var(--rs-font-family);font-size:11px;max-width:1886px;margin:0 auto}\n"] }]
+            args: [{ selector: 'rs-footer', template: "<div class=\"rs-footer\">\r\n  <span>\r\n    RAISE<sup>&reg;</sup>\u00A0\u00A9\u00A0\r\n    {{ today | date : \"yyyy\" }}\r\n    Linnovate Partners</span\r\n  >\r\n</div>\r\n", styles: [".rs-footer{height:40px;padding:0 24px;display:flex;align-items:center;background-color:var(--rs-container-bg);color:var(--rs-labels-color);font-family:var(--rs-font-family);font-size:11px;max-width:1886px;margin:0 auto}@media (max-width: 768px){.rs-footer{width:100%;position:fixed;bottom:0;left:0}}\n"] }]
         }] });
 
 // 组件类
@@ -18944,11 +19242,11 @@ class MainContainerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MainContainerComponent, deps: [{ token: DrawerService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MainContainerComponent, selector: "rs-main-container", inputs: { isCollapsed: "isCollapsed", singleReuseUrls: "singleReuseUrls" }, outputs: { onWidthChange: "onWidthChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "headerRef", first: true, predicate: RSHeaderComponent, descendants: true, static: true }, { propertyName: "multiTabRef", first: true, predicate: MultiTabComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<div class=\"app-main-container\">\r\n  <ng-content select=\"[headerSlot]\"></ng-content>\r\n  <div class=\"main-page\">\r\n    <div class=\"left-aside\">\r\n      <ng-content select=\"[leftAsideSlot]\"></ng-content>\r\n    </div>\r\n    <div\r\n      class=\"right-aside\"\r\n      [ngClass]=\"{ isCollapsed: isCollapsed }\"\r\n      (click)=\"onRightAsideClick()\"\r\n    >\r\n      <ng-content select=\"[multiTabSlot]\"></ng-content>\r\n      <!-- <rs-multi-tab [singleReuseUrls]=\"singleReuseUrls\"></rs-multi-tab> -->\r\n      <div class=\"router-content\">\r\n        <rs-drawer #drawer>\r\n          <ng-content select=\"[routerSlot]\"></ng-content>\r\n        </rs-drawer>\r\n      </div>\r\n      <rs-footer></rs-footer>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".app-main-container{display:flex;flex-direction:column;height:100vh}.app-main-container .main-page{flex:1;height:0;display:flex;background-color:var(--rs-container-bg)}.app-main-container .left-aside{height:100%}.app-main-container .right-aside{width:0;flex:1;display:flex;flex-direction:column;padding-right:12px}.app-main-container .right-aside .router-content{flex:1;overflow:auto;max-width:1886px;width:100%;margin:0 auto}@media (max-width: 992px){.app-main-container .right-aside.isCollapsed{position:relative}.app-main-container .right-aside.isCollapsed:after{content:\" \";position:absolute;z-index:5;inset:0;background-color:#0003}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RSFooterComponent, selector: "rs-footer" }, { kind: "component", type: DrawerComponent, selector: "rs-drawer" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MainContainerComponent, selector: "rs-main-container", inputs: { isCollapsed: "isCollapsed", singleReuseUrls: "singleReuseUrls" }, outputs: { onWidthChange: "onWidthChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "headerRef", first: true, predicate: RSHeaderComponent, descendants: true, static: true }, { propertyName: "multiTabRef", first: true, predicate: MultiTabComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<div class=\"app-main-container-wrap\">\r\n  <div class=\"app-main-container\">\r\n    <ng-content select=\"[headerSlot]\"></ng-content>\r\n    <div class=\"main-page\">\r\n      <div class=\"left-aside\">\r\n        <ng-content select=\"[leftAsideSlot]\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"right-aside\"\r\n        [ngClass]=\"{ isCollapsed: isCollapsed }\"\r\n        (click)=\"onRightAsideClick()\"\r\n      >\r\n        <ng-content select=\"[multiTabSlot]\"></ng-content>\r\n        <!-- <rs-multi-tab [singleReuseUrls]=\"singleReuseUrls\"></rs-multi-tab> -->\r\n        <div class=\"router-content\">\r\n          <rs-drawer #drawer>\r\n            <ng-content select=\"[routerSlot]\"></ng-content>\r\n          </rs-drawer>\r\n        </div>\r\n        <rs-footer></rs-footer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".app-main-container-wrap{width:100%;overflow:auto;height:100vh}@media (max-width: 768px){.app-main-container-wrap{height:calc(100vh - 40px)}}.app-main-container{display:flex;flex-direction:column;height:100%;min-width:768px}.app-main-container .main-page{flex:1;height:0;display:flex;background-color:var(--rs-container-bg)}.app-main-container .left-aside{height:100%}.app-main-container .right-aside{width:0;flex:1;display:flex;flex-direction:column;padding-right:12px}.app-main-container .right-aside .router-content{flex:1;overflow:auto;max-width:1886px;width:100%;margin:0 auto}@media (max-width: 992px){.app-main-container .right-aside{padding-left:12px}.app-main-container .right-aside.isCollapsed{position:relative}.app-main-container .right-aside.isCollapsed:after{content:\" \";position:absolute;z-index:5;inset:0;background-color:#0003}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RSFooterComponent, selector: "rs-footer" }, { kind: "component", type: DrawerComponent, selector: "rs-drawer" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MainContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-main-container", template: "<div class=\"app-main-container\">\r\n  <ng-content select=\"[headerSlot]\"></ng-content>\r\n  <div class=\"main-page\">\r\n    <div class=\"left-aside\">\r\n      <ng-content select=\"[leftAsideSlot]\"></ng-content>\r\n    </div>\r\n    <div\r\n      class=\"right-aside\"\r\n      [ngClass]=\"{ isCollapsed: isCollapsed }\"\r\n      (click)=\"onRightAsideClick()\"\r\n    >\r\n      <ng-content select=\"[multiTabSlot]\"></ng-content>\r\n      <!-- <rs-multi-tab [singleReuseUrls]=\"singleReuseUrls\"></rs-multi-tab> -->\r\n      <div class=\"router-content\">\r\n        <rs-drawer #drawer>\r\n          <ng-content select=\"[routerSlot]\"></ng-content>\r\n        </rs-drawer>\r\n      </div>\r\n      <rs-footer></rs-footer>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".app-main-container{display:flex;flex-direction:column;height:100vh}.app-main-container .main-page{flex:1;height:0;display:flex;background-color:var(--rs-container-bg)}.app-main-container .left-aside{height:100%}.app-main-container .right-aside{width:0;flex:1;display:flex;flex-direction:column;padding-right:12px}.app-main-container .right-aside .router-content{flex:1;overflow:auto;max-width:1886px;width:100%;margin:0 auto}@media (max-width: 992px){.app-main-container .right-aside.isCollapsed{position:relative}.app-main-container .right-aside.isCollapsed:after{content:\" \";position:absolute;z-index:5;inset:0;background-color:#0003}}\n"] }]
+            args: [{ selector: "rs-main-container", template: "<div class=\"app-main-container-wrap\">\r\n  <div class=\"app-main-container\">\r\n    <ng-content select=\"[headerSlot]\"></ng-content>\r\n    <div class=\"main-page\">\r\n      <div class=\"left-aside\">\r\n        <ng-content select=\"[leftAsideSlot]\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"right-aside\"\r\n        [ngClass]=\"{ isCollapsed: isCollapsed }\"\r\n        (click)=\"onRightAsideClick()\"\r\n      >\r\n        <ng-content select=\"[multiTabSlot]\"></ng-content>\r\n        <!-- <rs-multi-tab [singleReuseUrls]=\"singleReuseUrls\"></rs-multi-tab> -->\r\n        <div class=\"router-content\">\r\n          <rs-drawer #drawer>\r\n            <ng-content select=\"[routerSlot]\"></ng-content>\r\n          </rs-drawer>\r\n        </div>\r\n        <rs-footer></rs-footer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".app-main-container-wrap{width:100%;overflow:auto;height:100vh}@media (max-width: 768px){.app-main-container-wrap{height:calc(100vh - 40px)}}.app-main-container{display:flex;flex-direction:column;height:100%;min-width:768px}.app-main-container .main-page{flex:1;height:0;display:flex;background-color:var(--rs-container-bg)}.app-main-container .left-aside{height:100%}.app-main-container .right-aside{width:0;flex:1;display:flex;flex-direction:column;padding-right:12px}.app-main-container .right-aside .router-content{flex:1;overflow:auto;max-width:1886px;width:100%;margin:0 auto}@media (max-width: 992px){.app-main-container .right-aside{padding-left:12px}.app-main-container .right-aside.isCollapsed{position:relative}.app-main-container .right-aside.isCollapsed:after{content:\" \";position:absolute;z-index:5;inset:0;background-color:#0003}}\n"] }]
         }], ctorParameters: function () { return [{ type: DrawerService }, { type: i0.ElementRef }]; }, propDecorators: { headerRef: [{
                 type: ContentChild,
                 args: [RSHeaderComponent, { static: true }]
@@ -18972,8 +19270,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 // 组件类
 class RSAsideComponent {
     router;
-    constructor(router) {
+    cf;
+    constructor(router, cf) {
         this.router = router;
+        this.cf = cf;
     }
     toggleMenu = new EventEmitter();
     navClick = new EventEmitter();
@@ -19018,13 +19318,13 @@ class RSAsideComponent {
         }
         this.navClick.emit(item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RSAsideComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RSAsideComponent, selector: "rs-aside", inputs: { isCollapsed: "isCollapsed", customNavClick: "customNavClick", navList: "navList", relationStart: "relationStart" }, outputs: { toggleMenu: "toggleMenu", navClick: "navClick" }, ngImport: i0, template: "<div class=\"rs-aside\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n  <div class=\"nav-list\">\r\n    <div\r\n      class=\"nav-group\"\r\n      [ngClass]=\"group.class\"\r\n      *ngFor=\"let group of navList\"\r\n    >\r\n      <div\r\n        class=\"nav-item\"\r\n        [ngClass]=\"{ isCurrent: currentNav === nav.url }\"\r\n        *ngFor=\"let nav of group.navItems\"\r\n        (click)=\"onNavClick(nav)\"\r\n      >\r\n        <div class=\"nav-item-inner\" *ngIf=\"nav.menuType === 'MENU'\">\r\n          <ejs-tooltip\r\n            [showTipPointer]=\"false\"\r\n            *ngIf=\"isCollapsed; else originIcon\"\r\n          >\r\n            <ng-template #content>\r\n              <div class=\"tooltip-content\">\r\n                {{ nav.label }}\r\n              </div>\r\n            </ng-template>\r\n            <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.iconCode\"></mat-icon>\r\n          </ejs-tooltip>\r\n          <ng-template #originIcon>\r\n            <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.iconCode\"></mat-icon>\r\n          </ng-template>\r\n          <span class=\"nav-text\" [ngClass]=\"{ isCollapsed: isCollapsed }\">{{\r\n            nav.label\r\n          }}</span>\r\n        </div>\r\n        <div class=\"dividing-line\" *ngIf=\"nav.menuType === 'LABEL'\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"bottom-iconbox\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n    <ng-content select=\"[bottomIconBox]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".rs-aside{display:flex;flex-direction:column;height:100%;width:240px;will-change:width;transition:width .3s;padding-right:20px}.rs-aside.isCollapsed{width:64px;padding-right:0}.rs-aside.isCollapsed .nav-list .nav-item .nav-item-inner{margin-right:12px}.rs-aside.isCollapsed .nav-list .nav-item .dividing-line{margin:8px 20px 8px 10px}.rs-aside .nav-list{padding-top:12px;flex:1;overflow:auto;height:0}.rs-aside .nav-list .nav-item{cursor:pointer;padding-left:11px}.rs-aside .nav-list .nav-item .nav-item-inner{height:32px;display:flex;align-items:center;padding:8px 8px 8px 12px}.rs-aside .nav-list .nav-item .nav-item-inner ::ng-deep .menu-icon{width:33px;height:16px;display:flex;align-items:center}.rs-aside .nav-list .nav-item .nav-item-inner ::ng-deep .menu-icon svg{width:16px;height:16px}.rs-aside .nav-list .nav-item .dividing-line{margin:8px 0 8px 10px;height:1px;background-color:#dbe1e780}.rs-aside .nav-list .nav-item:hover .nav-item-inner{border-radius:6px;background:#1f7bff0a}.rs-aside .nav-list .nav-item .nav-text{color:#5f6f81;font-family:Arial;font-size:12px;font-weight:400;line-height:16px;transition:all .3s;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;top:1px}@media (min-width: 993px){.rs-aside .nav-list .nav-item .nav-text.isCollapsed{opacity:0;width:0}}.rs-aside .nav-list .nav-item.isCurrent{position:relative}.rs-aside .nav-list .nav-item.isCurrent .nav-text{color:#44566c;font-weight:700}.rs-aside .nav-list .nav-item.isCurrent:before{content:\"\";position:absolute;left:4px;top:8px;width:3px;height:16px;background-color:#1364b3;border-radius:2px}.rs-aside .bottom-iconbox{padding:12px 20px;height:48px;display:flex;gap:12px}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon{width:24px;height:24px;display:flex;justify-content:center;align-items:center;border:1px solid #eaedf0;border-radius:24px;cursor:pointer}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon svg{width:16px;height:16px;color:#6c7c90;stroke:#6c7c90}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon.disabled{cursor:default;opacity:.5}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon:not(.disabled):hover{background-color:#fff}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon:not(.disabled):hover svg{color:#1f7bff;stroke:#1f7bff}@media (min-width: 993px){.rs-aside .bottom-iconbox.isCollapsed{flex-direction:column;height:auto}}@media (max-width: 992px){.rs-aside{width:0;position:absolute;height:calc(100% - 50px);z-index:10;background-color:var(--rs-container-bg);padding-right:0}.rs-aside .bottom-iconbox{display:none}.rs-aside.isCollapsed{width:240px;padding-right:16px}.rs-aside.isCollapsed .bottom-iconbox{display:flex}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.TooltipComponent, selector: "ejs-tooltip", inputs: ["animation", "closeDelay", "container", "content", "cssClass", "enableHtmlParse", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "height", "htmlAttributes", "isSticky", "locale", "mouseTrail", "offsetX", "offsetY", "openDelay", "opensOn", "position", "showTipPointer", "target", "tipPointerPosition", "width", "windowCollision"], outputs: ["afterClose", "afterOpen", "beforeClose", "beforeCollision", "beforeOpen", "beforeRender", "created", "destroyed"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RSAsideComponent, deps: [{ token: i1$3.Router }, { token: CommonFunctionService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RSAsideComponent, selector: "rs-aside", inputs: { isCollapsed: "isCollapsed", customNavClick: "customNavClick", navList: "navList", relationStart: "relationStart" }, outputs: { toggleMenu: "toggleMenu", navClick: "navClick" }, ngImport: i0, template: "<div class=\"rs-aside\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n  <div class=\"nav-list\">\r\n    <div\r\n      class=\"nav-group\"\r\n      [ngClass]=\"group.class\"\r\n      *ngFor=\"let group of navList\"\r\n    >\r\n      <div\r\n        class=\"nav-item\"\r\n        [ngClass]=\"{ isCurrent: currentNav === nav.url }\"\r\n        *ngFor=\"let nav of group.navItems\"\r\n        (click)=\"onNavClick(nav)\"\r\n      >\r\n        <div class=\"nav-item-inner\" *ngIf=\"nav.menuType === 'MENU'\">\r\n          <ejs-tooltip\r\n            [showTipPointer]=\"false\"\r\n            *ngIf=\"isCollapsed; else originIcon\"\r\n            position='RightCenter'\r\n          >\r\n            <ng-template #content>\r\n              <div class=\"tooltip-content\">\r\n                {{ nav.label }}\r\n              </div>\r\n            </ng-template>\r\n            <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.iconCode\"></mat-icon>\r\n          </ejs-tooltip>\r\n          <ng-template #originIcon>\r\n            <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.iconCode\"></mat-icon>\r\n          </ng-template>\r\n          <!-- <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.iconCode\"></mat-icon> -->\r\n          <ejs-tooltip\r\n            [showTipPointer]=\"false\"\r\n            *ngIf=\"nav.displayLabel !== nav.label; else originText\"\r\n            position='RightCenter'\r\n            class=\"nav-tooltip-text\"\r\n          >\r\n            <ng-template #content>\r\n              <div class=\"tooltip-content\">\r\n                {{ nav.label }}\r\n              </div>\r\n            </ng-template>\r\n            <span class=\"nav-text\" [ngClass]=\"{ isCollapsed: isCollapsed }\">{{\r\n              nav.displayLabel\r\n            }}</span>\r\n          </ejs-tooltip>\r\n          <ng-template #originText>\r\n            <span class=\"nav-text\" [ngClass]=\"{ isCollapsed: isCollapsed }\">{{\r\n              nav.label\r\n            }}</span>\r\n          </ng-template>\r\n        </div>\r\n        <div class=\"dividing-line\" *ngIf=\"nav.menuType === 'LABEL'\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"bottom-iconbox\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n    <ng-content select=\"[bottomIconBox]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".rs-aside{display:flex;flex-direction:column;height:100%;width:240px;will-change:width;transition:width .3s;padding-right:20px}.rs-aside.isCollapsed{width:64px;padding-right:0}.rs-aside.isCollapsed .nav-list .nav-item .nav-item-inner{margin-right:12px}.rs-aside.isCollapsed .nav-list .nav-item .dividing-line{margin:8px 20px 8px 10px}.rs-aside .nav-list{padding-top:12px;flex:1;overflow:auto;height:0}.rs-aside .nav-list .nav-item{cursor:pointer;padding-left:11px}.rs-aside .nav-list .nav-item .nav-item-inner{height:32px;display:flex;align-items:center;padding:8px 8px 8px 12px}.rs-aside .nav-list .nav-item .nav-item-inner ::ng-deep .menu-icon{width:33px;height:16px;display:flex;align-items:center}.rs-aside .nav-list .nav-item .nav-item-inner ::ng-deep .menu-icon svg{width:16px;height:16px}.rs-aside .nav-list .nav-item .dividing-line{margin:8px 0 8px 10px;height:1px;background-color:#dbe1e780}.rs-aside .nav-list .nav-item:hover .nav-item-inner{border-radius:6px;background:#1f7bff0a}.rs-aside .nav-list .nav-item .nav-text{display:inline-block;color:#5f6f81;font-family:Arial;font-size:12px;font-weight:400;line-height:16px;transition:all .3s;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;top:1px;flex:1}@media (min-width: 993px){.rs-aside .nav-list .nav-item .nav-text.isCollapsed{opacity:0;width:0}}.rs-aside .nav-list .nav-item .nav-tooltip-text{flex:1;width:0}.rs-aside .nav-list .nav-item.isCurrent{position:relative}.rs-aside .nav-list .nav-item.isCurrent .nav-text{color:#44566c;font-weight:700}.rs-aside .nav-list .nav-item.isCurrent:before{content:\"\";position:absolute;left:4px;top:8px;width:3px;height:16px;background-color:#1364b3;border-radius:2px}.rs-aside .bottom-iconbox{padding:12px 20px;height:48px;display:flex;gap:12px}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon{width:24px;height:24px;display:flex;justify-content:center;align-items:center;border:1px solid #eaedf0;border-radius:24px;cursor:pointer}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon svg{width:16px;height:16px;color:#6c7c90;stroke:#6c7c90}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon.disabled{cursor:default;opacity:.5}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon:not(.disabled):hover{background-color:#fff}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon:not(.disabled):hover svg{color:#1f7bff;stroke:#1f7bff}@media (min-width: 993px){.rs-aside .bottom-iconbox.isCollapsed{flex-direction:column;height:auto}}@media (max-width: 992px){.rs-aside{width:0;position:absolute;height:calc(100% - 50px);z-index:10;background-color:var(--rs-container-bg);padding-right:0}.rs-aside .bottom-iconbox{display:none}.rs-aside.isCollapsed{width:240px;padding-right:16px}.rs-aside.isCollapsed .bottom-iconbox{display:flex}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.TooltipComponent, selector: "ejs-tooltip", inputs: ["animation", "closeDelay", "container", "content", "cssClass", "enableHtmlParse", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "height", "htmlAttributes", "isSticky", "locale", "mouseTrail", "offsetX", "offsetY", "openDelay", "opensOn", "position", "showTipPointer", "target", "tipPointerPosition", "width", "windowCollision"], outputs: ["afterClose", "afterOpen", "beforeClose", "beforeCollision", "beforeOpen", "beforeRender", "created", "destroyed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RSAsideComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-aside", template: "<div class=\"rs-aside\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n  <div class=\"nav-list\">\r\n    <div\r\n      class=\"nav-group\"\r\n      [ngClass]=\"group.class\"\r\n      *ngFor=\"let group of navList\"\r\n    >\r\n      <div\r\n        class=\"nav-item\"\r\n        [ngClass]=\"{ isCurrent: currentNav === nav.url }\"\r\n        *ngFor=\"let nav of group.navItems\"\r\n        (click)=\"onNavClick(nav)\"\r\n      >\r\n        <div class=\"nav-item-inner\" *ngIf=\"nav.menuType === 'MENU'\">\r\n          <ejs-tooltip\r\n            [showTipPointer]=\"false\"\r\n            *ngIf=\"isCollapsed; else originIcon\"\r\n          >\r\n            <ng-template #content>\r\n              <div class=\"tooltip-content\">\r\n                {{ nav.label }}\r\n              </div>\r\n            </ng-template>\r\n            <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.iconCode\"></mat-icon>\r\n          </ejs-tooltip>\r\n          <ng-template #originIcon>\r\n            <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.iconCode\"></mat-icon>\r\n          </ng-template>\r\n          <span class=\"nav-text\" [ngClass]=\"{ isCollapsed: isCollapsed }\">{{\r\n            nav.label\r\n          }}</span>\r\n        </div>\r\n        <div class=\"dividing-line\" *ngIf=\"nav.menuType === 'LABEL'\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"bottom-iconbox\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n    <ng-content select=\"[bottomIconBox]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".rs-aside{display:flex;flex-direction:column;height:100%;width:240px;will-change:width;transition:width .3s;padding-right:20px}.rs-aside.isCollapsed{width:64px;padding-right:0}.rs-aside.isCollapsed .nav-list .nav-item .nav-item-inner{margin-right:12px}.rs-aside.isCollapsed .nav-list .nav-item .dividing-line{margin:8px 20px 8px 10px}.rs-aside .nav-list{padding-top:12px;flex:1;overflow:auto;height:0}.rs-aside .nav-list .nav-item{cursor:pointer;padding-left:11px}.rs-aside .nav-list .nav-item .nav-item-inner{height:32px;display:flex;align-items:center;padding:8px 8px 8px 12px}.rs-aside .nav-list .nav-item .nav-item-inner ::ng-deep .menu-icon{width:33px;height:16px;display:flex;align-items:center}.rs-aside .nav-list .nav-item .nav-item-inner ::ng-deep .menu-icon svg{width:16px;height:16px}.rs-aside .nav-list .nav-item .dividing-line{margin:8px 0 8px 10px;height:1px;background-color:#dbe1e780}.rs-aside .nav-list .nav-item:hover .nav-item-inner{border-radius:6px;background:#1f7bff0a}.rs-aside .nav-list .nav-item .nav-text{color:#5f6f81;font-family:Arial;font-size:12px;font-weight:400;line-height:16px;transition:all .3s;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;top:1px}@media (min-width: 993px){.rs-aside .nav-list .nav-item .nav-text.isCollapsed{opacity:0;width:0}}.rs-aside .nav-list .nav-item.isCurrent{position:relative}.rs-aside .nav-list .nav-item.isCurrent .nav-text{color:#44566c;font-weight:700}.rs-aside .nav-list .nav-item.isCurrent:before{content:\"\";position:absolute;left:4px;top:8px;width:3px;height:16px;background-color:#1364b3;border-radius:2px}.rs-aside .bottom-iconbox{padding:12px 20px;height:48px;display:flex;gap:12px}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon{width:24px;height:24px;display:flex;justify-content:center;align-items:center;border:1px solid #eaedf0;border-radius:24px;cursor:pointer}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon svg{width:16px;height:16px;color:#6c7c90;stroke:#6c7c90}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon.disabled{cursor:default;opacity:.5}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon:not(.disabled):hover{background-color:#fff}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon:not(.disabled):hover svg{color:#1f7bff;stroke:#1f7bff}@media (min-width: 993px){.rs-aside .bottom-iconbox.isCollapsed{flex-direction:column;height:auto}}@media (max-width: 992px){.rs-aside{width:0;position:absolute;height:calc(100% - 50px);z-index:10;background-color:var(--rs-container-bg);padding-right:0}.rs-aside .bottom-iconbox{display:none}.rs-aside.isCollapsed{width:240px;padding-right:16px}.rs-aside.isCollapsed .bottom-iconbox{display:flex}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: { toggleMenu: [{
+            args: [{ selector: "rs-aside", template: "<div class=\"rs-aside\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n  <div class=\"nav-list\">\r\n    <div\r\n      class=\"nav-group\"\r\n      [ngClass]=\"group.class\"\r\n      *ngFor=\"let group of navList\"\r\n    >\r\n      <div\r\n        class=\"nav-item\"\r\n        [ngClass]=\"{ isCurrent: currentNav === nav.url }\"\r\n        *ngFor=\"let nav of group.navItems\"\r\n        (click)=\"onNavClick(nav)\"\r\n      >\r\n        <div class=\"nav-item-inner\" *ngIf=\"nav.menuType === 'MENU'\">\r\n          <ejs-tooltip\r\n            [showTipPointer]=\"false\"\r\n            *ngIf=\"isCollapsed; else originIcon\"\r\n            position='RightCenter'\r\n          >\r\n            <ng-template #content>\r\n              <div class=\"tooltip-content\">\r\n                {{ nav.label }}\r\n              </div>\r\n            </ng-template>\r\n            <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.iconCode\"></mat-icon>\r\n          </ejs-tooltip>\r\n          <ng-template #originIcon>\r\n            <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.iconCode\"></mat-icon>\r\n          </ng-template>\r\n          <!-- <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.iconCode\"></mat-icon> -->\r\n          <ejs-tooltip\r\n            [showTipPointer]=\"false\"\r\n            *ngIf=\"nav.displayLabel !== nav.label; else originText\"\r\n            position='RightCenter'\r\n            class=\"nav-tooltip-text\"\r\n          >\r\n            <ng-template #content>\r\n              <div class=\"tooltip-content\">\r\n                {{ nav.label }}\r\n              </div>\r\n            </ng-template>\r\n            <span class=\"nav-text\" [ngClass]=\"{ isCollapsed: isCollapsed }\">{{\r\n              nav.displayLabel\r\n            }}</span>\r\n          </ejs-tooltip>\r\n          <ng-template #originText>\r\n            <span class=\"nav-text\" [ngClass]=\"{ isCollapsed: isCollapsed }\">{{\r\n              nav.label\r\n            }}</span>\r\n          </ng-template>\r\n        </div>\r\n        <div class=\"dividing-line\" *ngIf=\"nav.menuType === 'LABEL'\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"bottom-iconbox\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n    <ng-content select=\"[bottomIconBox]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".rs-aside{display:flex;flex-direction:column;height:100%;width:240px;will-change:width;transition:width .3s;padding-right:20px}.rs-aside.isCollapsed{width:64px;padding-right:0}.rs-aside.isCollapsed .nav-list .nav-item .nav-item-inner{margin-right:12px}.rs-aside.isCollapsed .nav-list .nav-item .dividing-line{margin:8px 20px 8px 10px}.rs-aside .nav-list{padding-top:12px;flex:1;overflow:auto;height:0}.rs-aside .nav-list .nav-item{cursor:pointer;padding-left:11px}.rs-aside .nav-list .nav-item .nav-item-inner{height:32px;display:flex;align-items:center;padding:8px 8px 8px 12px}.rs-aside .nav-list .nav-item .nav-item-inner ::ng-deep .menu-icon{width:33px;height:16px;display:flex;align-items:center}.rs-aside .nav-list .nav-item .nav-item-inner ::ng-deep .menu-icon svg{width:16px;height:16px}.rs-aside .nav-list .nav-item .dividing-line{margin:8px 0 8px 10px;height:1px;background-color:#dbe1e780}.rs-aside .nav-list .nav-item:hover .nav-item-inner{border-radius:6px;background:#1f7bff0a}.rs-aside .nav-list .nav-item .nav-text{display:inline-block;color:#5f6f81;font-family:Arial;font-size:12px;font-weight:400;line-height:16px;transition:all .3s;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;top:1px;flex:1}@media (min-width: 993px){.rs-aside .nav-list .nav-item .nav-text.isCollapsed{opacity:0;width:0}}.rs-aside .nav-list .nav-item .nav-tooltip-text{flex:1;width:0}.rs-aside .nav-list .nav-item.isCurrent{position:relative}.rs-aside .nav-list .nav-item.isCurrent .nav-text{color:#44566c;font-weight:700}.rs-aside .nav-list .nav-item.isCurrent:before{content:\"\";position:absolute;left:4px;top:8px;width:3px;height:16px;background-color:#1364b3;border-radius:2px}.rs-aside .bottom-iconbox{padding:12px 20px;height:48px;display:flex;gap:12px}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon{width:24px;height:24px;display:flex;justify-content:center;align-items:center;border:1px solid #eaedf0;border-radius:24px;cursor:pointer}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon svg{width:16px;height:16px;color:#6c7c90;stroke:#6c7c90}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon.disabled{cursor:default;opacity:.5}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon:not(.disabled):hover{background-color:#fff}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon:not(.disabled):hover svg{color:#1f7bff;stroke:#1f7bff}@media (min-width: 993px){.rs-aside .bottom-iconbox.isCollapsed{flex-direction:column;height:auto}}@media (max-width: 992px){.rs-aside{width:0;position:absolute;height:calc(100% - 50px);z-index:10;background-color:var(--rs-container-bg);padding-right:0}.rs-aside .bottom-iconbox{display:none}.rs-aside.isCollapsed{width:240px;padding-right:16px}.rs-aside.isCollapsed .bottom-iconbox{display:flex}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: CommonFunctionService }]; }, propDecorators: { toggleMenu: [{
                 type: Output
             }], navClick: [{
                 type: Output
@@ -19133,7 +19433,7 @@ class RadioGroupComponent {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioGroupComponent, selector: "rs-radio-group", inputs: { value: "value", dataSource: "dataSource", orientation: "orientation", fields: "fields", disabled: "disabled", error: "error" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"radio-group\" [ngClass]=\"[orientation, error ? 'error' : '']\">\r\n  <div class=\"radio-item\" *ngFor=\"let option of dataSource\">\r\n    <ejs-radiobutton\r\n      [label]=\"option[fields.text]\"\r\n      [(ngModel)]=\"value\"\r\n      [value]=\"option[fields.value]\"\r\n      [disabled]=\"option[fields.disabled] || disabled\"\r\n      (change)=\"onChange($event)\"\r\n    ></ejs-radiobutton>\r\n  </div>\r\n</div>\r\n", styles: [".radio-group{display:flex;padding-left:4px}.radio-group.horizontal{flex-direction:row;gap:35px}.radio-group.vertical{flex-direction:column;gap:14px}.radio-group.error .e-radio+label:before{border-color:var(--rs-input-error-border-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$4.RadioButtonComponent, selector: "ejs-radiobutton", inputs: ["checked", "cssClass", "disabled", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "htmlAttributes", "label", "labelPosition", "locale", "name", "value"], outputs: ["focus", "blur", "change", "created", "valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioGroupComponent, selector: "rs-radio-group", inputs: { value: "value", dataSource: "dataSource", orientation: "orientation", fields: "fields", disabled: "disabled", error: "error" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"radio-group\" [ngClass]=\"[orientation, error ? 'error' : '']\">\r\n  <div class=\"radio-item\" *ngFor=\"let option of dataSource\">\r\n    <ejs-radiobutton\r\n      [label]=\"option[fields.text]\"\r\n      [(ngModel)]=\"value\"\r\n      [value]=\"option[fields.value]\"\r\n      [disabled]=\"option[fields.disabled] || disabled\"\r\n      (change)=\"onChange($event)\"\r\n    ></ejs-radiobutton>\r\n  </div>\r\n</div>\r\n", styles: [".radio-group{display:flex;padding-left:4px}.radio-group.horizontal{flex-direction:row;gap:35px}.radio-group.vertical{flex-direction:column;gap:14px}.radio-group.error .e-radio+label:before{border-color:var(--rs-input-error-border-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.RadioButtonComponent, selector: "ejs-radiobutton", inputs: ["checked", "cssClass", "disabled", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "htmlAttributes", "label", "labelPosition", "locale", "name", "value"], outputs: ["focus", "blur", "change", "created", "valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
@@ -19184,7 +19484,7 @@ class CheckboxGroupComponent {
         this.ref.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxGroupComponent, selector: "rs-checkbox-group", inputs: { name: "name", value: "value", dataSource: "dataSource", orientation: "orientation", fields: "fields", disabled: "disabled", error: "error" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"checkbox-group\" [ngClass]=\"[orientation, error ? 'error' : '']\">\r\n  <div class=\"checkbox-item\" *ngFor=\"let option of dataSource\">\r\n    <ejs-checkbox\r\n      [name]=\"name\"\r\n      [label]=\"option[fields.text]\"\r\n      [value]=\"option[fields.value]\"\r\n      [disabled]=\"option[fields.disabled] || disabled\"\r\n      [checked]=\"value.includes(option[fields.value])\"\r\n      (change)=\"onChange($event, option)\"\r\n    ></ejs-checkbox>\r\n  </div>\r\n</div>\r\n", styles: [".checkbox-group{display:flex;padding-left:4px}.checkbox-group.horizontal{flex-direction:row;gap:35px}.checkbox-group.vertical{flex-direction:column;gap:14px}.checkbox-group.error .e-checkbox-wrapper .e-frame{border-color:var(--rs-input-error-border-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$4.CheckBoxComponent, selector: "ejs-checkbox", inputs: ["checked", "cssClass", "disabled", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "htmlAttributes", "indeterminate", "label", "labelPosition", "locale", "name", "value"], outputs: ["focus", "blur", "change", "created", "checkedChange", "indeterminateChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxGroupComponent, selector: "rs-checkbox-group", inputs: { name: "name", value: "value", dataSource: "dataSource", orientation: "orientation", fields: "fields", disabled: "disabled", error: "error" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"checkbox-group\" [ngClass]=\"[orientation, error ? 'error' : '']\">\r\n  <div class=\"checkbox-item\" *ngFor=\"let option of dataSource\">\r\n    <ejs-checkbox\r\n      [name]=\"name\"\r\n      [label]=\"option[fields.text]\"\r\n      [value]=\"option[fields.value]\"\r\n      [disabled]=\"option[fields.disabled] || disabled\"\r\n      [checked]=\"value.includes(option[fields.value])\"\r\n      (change)=\"onChange($event, option)\"\r\n    ></ejs-checkbox>\r\n  </div>\r\n</div>\r\n", styles: [".checkbox-group{display:flex;padding-left:4px}.checkbox-group.horizontal{flex-direction:row;gap:35px}.checkbox-group.vertical{flex-direction:column;gap:14px}.checkbox-group.error .e-checkbox-wrapper .e-frame{border-color:var(--rs-input-error-border-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$2.CheckBoxComponent, selector: "ejs-checkbox", inputs: ["checked", "cssClass", "disabled", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "htmlAttributes", "indeterminate", "label", "labelPosition", "locale", "name", "value"], outputs: ["focus", "blur", "change", "created", "checkedChange", "indeterminateChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
             type: Component,
@@ -19225,7 +19525,7 @@ class SwitchInputComponent {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SwitchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SwitchInputComponent, selector: "rs-switch-input", inputs: { value: "value", text: "text", orientation: "orientation", disabled: "disabled", error: "error" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"rs-switch\" [ngClass]=\"[orientation, error ? 'error' : '', disabled ? 'disabled' : '']\">\r\n  <label class=\"switch-label\" (click)=\"onClick()\"> {{ text }} </label>\r\n  <ejs-switch\r\n    [(ngModel)]=\"value\"\r\n    [disabled]=\"disabled\"\r\n    (change)=\"onChange($event)\"\r\n  ></ejs-switch>\r\n</div>\r\n", styles: [".rs-switch{display:flex;align-items:center;gap:8px}.rs-switch.behind{flex-direction:row-reverse;justify-content:flex-end}.rs-switch .switch-label{color:var(--rs-label-color);font-family:var(--rs-font-family);font-size:var(--rs-font-size);cursor:pointer}.rs-switch.disabled .switch-label{cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$4.SwitchComponent, selector: "ejs-switch", inputs: ["checked", "cssClass", "disabled", "enablePersistence", "enableRtl", "htmlAttributes", "locale", "name", "offLabel", "onLabel", "value"], outputs: ["focus", "blur", "change", "created", "checkedChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SwitchInputComponent, selector: "rs-switch-input", inputs: { value: "value", text: "text", orientation: "orientation", disabled: "disabled", error: "error" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"rs-switch\" [ngClass]=\"[orientation, error ? 'error' : '', disabled ? 'disabled' : '']\">\r\n  <label class=\"switch-label\" (click)=\"onClick()\"> {{ text }} </label>\r\n  <ejs-switch\r\n    [(ngModel)]=\"value\"\r\n    [disabled]=\"disabled\"\r\n    (change)=\"onChange($event)\"\r\n  ></ejs-switch>\r\n</div>\r\n", styles: [".rs-switch{display:flex;align-items:center;gap:8px}.rs-switch.behind{flex-direction:row-reverse;justify-content:flex-end}.rs-switch .switch-label{color:var(--rs-label-color);font-family:var(--rs-font-family);font-size:var(--rs-font-size);cursor:pointer}.rs-switch.disabled .switch-label{cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.SwitchComponent, selector: "ejs-switch", inputs: ["checked", "cssClass", "disabled", "enablePersistence", "enableRtl", "htmlAttributes", "locale", "name", "offLabel", "onLabel", "value"], outputs: ["focus", "blur", "change", "created", "checkedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SwitchInputComponent, decorators: [{
             type: Component,
@@ -19286,9 +19586,8 @@ function filterShowSection(sections) {
 const EmailPattern = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
 
 class DrawerFormComponent {
-    datePipe;
     ref;
-    sections = [];
+    _sections = [];
     optionsMap = {};
     customTemplate;
     customSectionTemplate;
@@ -19307,16 +19606,18 @@ class DrawerFormComponent {
     rootEl;
     containers;
     sectionContainers;
+    sections = [];
     filterOptionsMap = {};
     fieldValidMap = {};
-    constructor(datePipe, ref) {
-        this.datePipe = datePipe;
+    dateValidMap = {};
+    constructor(ref) {
         this.ref = ref;
     }
     ngOnInit() { }
     ngOnChanges(changes) {
-        if (changes.sections) {
-            this.formatForm(changes.sections.currentValue);
+        if (changes._sections) {
+            this.sections = filterShowSection(changes._sections.currentValue);
+            this.formatForm(this.sections);
         }
         if (changes.form && !changes.form.firstChange) {
             this.checkFormChange(changes.form.previousValue, changes.form.currentValue);
@@ -19371,7 +19672,9 @@ class DrawerFormComponent {
         Object.entries(current).forEach(([key, currentValue]) => {
             if (previous[key] !== currentValue) {
                 const field = this.getField(key);
-                this.formItemValidator(field);
+                if (field) {
+                    this.formItemValidator(field);
+                }
             }
         });
     }
@@ -19469,13 +19772,30 @@ class DrawerFormComponent {
     onInput(value, field) {
         this.callFunction(field.onInput, value, field);
     }
-    onChange(value, field) {
+    onComponentChange(event, field) {
+        if (!event.isInteracted) {
+            return;
+        }
+        let value = event.value;
         if (field.fieldFormType === "Datepicker") {
-            value = this.datePipe.transform(value, "yyyy-MM-dd");
+            value = moment(value).format("YYYY-MM-DD");
         }
+        this.onChange(value, field);
+    }
+    onChange(value, field) {
         this.updateForm(value, field);
         this.callFunction(field.onChange, value, field);
     }
+    onDatePickerBlur(event, field) {
+        this.onBlur(field);
+        const $input = event.model.element.querySelector("input");
+        if (!$input) {
+            return;
+        }
+        const date = moment($input.value);
+        this.onChange(date.isValid() ? date.format("YYYY-MM-DD") : null, field);
+        this.dateValidMap[field.formKey] = date.isValid();
+    }
     onFocus(field) {
         this.callFunction(field.onFocus, field);
     }
@@ -19489,6 +19809,13 @@ class DrawerFormComponent {
         }
         event.updateData(this.optionsMap[field.optionKey] || [], query);
     }
+    getValue(field) {
+        if (field.fieldFormType === "Datepicker" && this.form[field.formKey]) {
+            const date = moment(this.form[field.formKey]);
+            return date.isValid() ? date.toDate() : null;
+        }
+        return this.form[field.formKey];
+    }
     getDisabled(field) {
         if (this.formDisabled) {
             return true;
@@ -19554,13 +19881,13 @@ class DrawerFormComponent {
         onScroll();
         scrollViewEl.addEventListener("scroll", onScroll);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerFormComponent, deps: [{ token: i1.DatePipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawerFormComponent, selector: "rs-drawer-form", inputs: { sections: "sections", optionsMap: "optionsMap", customTemplate: "customTemplate", customSectionTemplate: "customSectionTemplate", formDisabled: ["disabled", "formDisabled"], showAnchor: "showAnchor", optionFields: "optionFields", showFilterNumber: "showFilterNumber", form: "form" }, outputs: { formChange: "formChange", fieldChange: "fieldChange" }, providers: [DatePipe], viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["drawerFormEl"], descendants: true }, { propertyName: "containers", predicate: ["customTemplateContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "sectionContainers", predicate: ["customSectionContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "sectionEls", predicate: ["sectionEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #drawerFormEl class=\"rs-drawer-form-container\">\r\n  <div class=\"section-container\">\r\n    <div #sectionEl class=\"section-item\" *ngFor=\"let section of sections\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"section-expand-checkbox\"\r\n        *ngIf=\"section.title\"\r\n      />\r\n      <div class=\"section-title\" *ngIf=\"section.title\">\r\n        <span>{{ section.title }}</span>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"!section.customKey\">\r\n        <div\r\n          class=\"form-item\"\r\n          *ngFor=\"let field of section.fields\"\r\n          [attr.data-required]=\"field.required ? 'yes' : 'no'\"\r\n          [attr.data-disabled]=\"field.disabled || formDisabled ? 'yes' : 'no'\"\r\n          [attr.data-error]=\"\r\n            fieldValidMap[field.formKey] === false ? 'yes' : 'no'\r\n          \"\r\n        >\r\n          <div class=\"form-label\">\r\n            <span>{{ field.label }}</span>\r\n            <ejs-tooltip\r\n              class=\"form-tooltip\"\r\n              cssClass=\"rs-drawer-tooltip\"\r\n              *ngIf=\"field.tooltip\"\r\n              position=\"RightCenter\"\r\n              [content]=\"field.tooltip\"\r\n            >\r\n              <span class=\"tooltip-icon\"></span>\r\n            </ejs-tooltip>\r\n          </div>\r\n          <div class=\"form-content\">\r\n            <!-- Radio -->\r\n            <rs-radio-group\r\n              *ngIf=\"field.fieldFormType === 'Radio'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-radio-group>\r\n            <!-- Checkbox -->\r\n            <rs-checkbox-group\r\n              *ngIf=\"field.fieldFormType === 'Checkbox'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-checkbox-group>\r\n            <!-- Switch -->\r\n            <rs-switch-input\r\n              *ngIf=\"field.fieldFormType === 'Switch'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-switch-input>\r\n            <!-- Input -->\r\n            <input\r\n              class=\"e-input\"\r\n              *ngIf=\"\r\n                field.fieldFormType === 'Text' ||\r\n                field.fieldFormType === 'Email'\r\n              \"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n            />\r\n            <!-- Textarea -->\r\n            <textarea\r\n              class=\"e-input\"\r\n              *ngIf=\"field.fieldFormType === 'Textarea'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n              rows=\"3\"\r\n            ></textarea>\r\n            <!-- Number Input -->\r\n            <ejs-numerictextbox\r\n              *ngIf=\"field.fieldFormType === 'Number'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [max]=\"field.max\"\r\n              [min]=\"field.min\"\r\n              [format]=\"field.format\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-numerictextbox>\r\n            <!-- Tags Input -->\r\n            <rs-tag-input\r\n              *ngIf=\"field.fieldFormType === 'Tags'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [inputMaxlength]=\"field.maxlength\"\r\n              [inputMinlength]=\"field.minlength\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></rs-tag-input>\r\n            <!-- AutoComplete -->\r\n            <ejs-autocomplete\r\n              *ngIf=\"field.fieldFormType === 'AutoComplete'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-autocomplete>\r\n            <!-- Dropdown -->\r\n            <ejs-dropdownlist\r\n              *ngIf=\"field.fieldFormType === 'Dropdown'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showClearButton]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-dropdownlist>\r\n            <!-- MultiSelect -->\r\n            <ejs-multiselect\r\n              *ngIf=\"field.fieldFormType === 'MultiSelect'\"\r\n              mode=\"CheckBox\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showDropDownIcon]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            >\r\n            </ejs-multiselect>\r\n            <!-- Datepicker -->\r\n            <ejs-datepicker\r\n              *ngIf=\"field.fieldFormType === 'Datepicker'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [format]=\"field.format || 'dd-MMM-yyyy'\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-datepicker>\r\n            <ng-template\r\n              #customTemplateContainer\r\n              *ngIf=\"field.fieldFormType === 'Custom'\"\r\n            ></ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"section.customKey\">\r\n        <ng-template #customSectionContainer></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"sections.length > 1 && showAnchor\" class=\"anchor-container\">\r\n    <div\r\n      class=\"anchor-item\"\r\n      *ngFor=\"let section of sections; let index = index\"\r\n      [style.display]=\"section.title ? 'block' : 'none'\"\r\n      [attr.data-active]=\"scrollIndex === index ? 'yes' : 'no'\"\r\n      [attr.data-content]=\"section.title\"\r\n      (click)=\"onClickAnchor(index)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;margin-top:16px}.rs-drawer-form-container{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:32px}.rs-drawer-form-container .section-container{flex:auto;display:flex;flex-flow:column nowrap;max-width:1576px}.rs-drawer-form-container .section-item{position:relative}.rs-drawer-form-container .section-item:not(:first-child){border-top:1px solid #eaedf0}.rs-drawer-form-container .section-expand-checkbox{display:block;width:100%;height:28px;appearance:none;cursor:pointer;position:absolute;top:0;left:0}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title:before{transform:rotate(-90deg)}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title+.section-form{max-height:0;overflow:hidden}.rs-drawer-form-container .section-title{padding:6px 0;margin-bottom:12px;color:#44566c;font-family:Arial;font-size:13px;font-style:normal;font-weight:700;line-height:16px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:none}.rs-drawer-form-container .section-title:before{content:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12.2426 6.24264L8 9.5L3.75736 6.24264%22 stroke%3D%22%236B6B6B%22%2F%3E%0D%3C%2Fsvg%3E%0D\");display:block;height:16px;width:16px;margin-right:8px}.rs-drawer-form-container .section-form{display:flex;flex-flow:row wrap;justify-content:space-between;gap:12px 56px;max-width:1576px;padding:0 24px;margin-bottom:20px}.rs-drawer-form-container .section-form .form-item{min-height:28px;min-width:400px;max-width:700px;width:calc((100% - 56px)/2);display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:flex-start}.rs-drawer-form-container .section-form .form-item[data-required=yes] .form-label>span:first-child:after{content:\"*\";color:var(--rs-input-require-label-color)}.rs-drawer-form-container .section-form .form-item .form-label{flex:none;width:144px;height:28px;margin-right:16px;color:#43566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;display:flex;flex-flow:row nowrap;align-items:center}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip{margin-left:4px}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip .tooltip-icon:before{content:\" \";display:block;width:14px;height:14px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2218%22 viewBox%3D%220 0 18 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D    %3Cpath d%3D%22M9 1a8 8 0 1 0 8 8 8.009 8.009 0 0 0-8-8zm0 14.667A6.666 6.666 0 1 1 15.667 9 6.674 6.674 0 0 1 9 15.667z%22 fill%3D%22%2344566C%22%2F%3E%0D    %3Cpath d%3D%22M9 7.667h-.667a.667.667 0 1 0 0 1.333h.666v4a.667.667 0 0 0 1.334 0V9a1.333 1.333 0 0 0-1.334-1.333zM9 6.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2z%22 fill%3D%22%2344566C%22%2F%3E%0D%3C%2Fsvg%3E%0D\");background-size:contain;cursor:pointer}.rs-drawer-form-container .section-form .form-item .form-content{flex:auto}@media (max-width: 1420px){.rs-drawer-form-container .section-form .form-item{width:100%}}.rs-drawer-form-container .anchor-container{flex:none;display:flex;flex-flow:column nowrap;gap:4px;min-width:120px;height:auto;position:sticky;top:56px}.rs-drawer-form-container .anchor-item{min-width:120px;padding:4px 12px;border-left:1px solid #eaedf0;cursor:pointer;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:16px;position:relative}.rs-drawer-form-container .anchor-item:before{content:attr(data-content);color:#44566c;font-weight:400;position:absolute;left:12px}.rs-drawer-form-container .anchor-item:after{content:attr(data-content);visibility:hidden;color:#1364b3;font-weight:700}.rs-drawer-form-container .anchor-item[data-active=yes]{border-color:#1f7bff}.rs-drawer-form-container .anchor-item[data-active=yes]:before{visibility:hidden}.rs-drawer-form-container .anchor-item[data-active=yes]:after{visibility:visible}.rs-drawer-tooltip.e-tooltip-wrap{border:none;background-color:#44566c}.rs-drawer-tooltip.e-tooltip-wrap .e-arrow-tip{height:4px;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.TooltipComponent, selector: "ejs-tooltip", inputs: ["animation", "closeDelay", "container", "content", "cssClass", "enableHtmlParse", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "height", "htmlAttributes", "isSticky", "locale", "mouseTrail", "offsetX", "offsetY", "openDelay", "opensOn", "position", "showTipPointer", "target", "tipPointerPosition", "width", "windowCollision"], outputs: ["afterClose", "afterOpen", "beforeClose", "beforeCollision", "beforeOpen", "beforeRender", "created", "destroyed"] }, { kind: "component", type: i3$5.DatePickerComponent, selector: "ejs-datepicker", inputs: ["allowEdit", "calendarMode", "cssClass", "dayHeaderFormat", "depth", "enableMask", "enablePersistence", "enableRtl", "enabled", "firstDayOfWeek", "floatLabelType", "format", "fullScreenMode", "htmlAttributes", "isMultiSelection", "keyConfigs", "locale", "maskPlaceholder", "max", "min", "openOnFocus", "placeholder", "readonly", "serverTimezoneOffset", "showClearButton", "showTodayButton", "start", "strictMode", "value", "values", "weekNumber", "weekRule", "width", "zIndex"], outputs: ["blur", "change", "cleared", "close", "created", "destroyed", "focus", "navigated", "open", "renderDayCell", "valueChange"] }, { kind: "component", type: i3$2.NumericTextBoxComponent, selector: "ejs-numerictextbox", inputs: ["cssClass", "currency", "currencyCode", "decimals", "enablePersistence", "enableRtl", "enabled", "floatLabelType", "format", "htmlAttributes", "locale", "max", "min", "placeholder", "readonly", "showClearButton", "showSpinButton", "step", "strictMode", "validateDecimalOnType", "value", "width"], outputs: ["blur", "change", "created", "destroyed", "focus", "valueChange"] }, { kind: "component", type: i5$1.DropDownListComponent, selector: "ejs-dropdownlist", inputs: ["actionFailureTemplate", "allowFiltering", "allowObjectBinding", "cssClass", "dataSource", "enablePersistence", "enableRtl", "enableVirtualization", "enabled", "fields", "filterBarPlaceholder", "filterType", "floatLabelType", "footerTemplate", "groupTemplate", "headerTemplate", "htmlAttributes", "ignoreAccent", "ignoreCase", "index", "isDeviceFullScreen", "itemTemplate", "locale", "noRecordsTemplate", "placeholder", "popupHeight", "popupWidth", "query", "readonly", "showClearButton", "sortOrder", "text", "value", "valueTemplate", "width", "zIndex"], outputs: ["actionBegin", "actionComplete", "actionFailure", "beforeOpen", "blur", "change", "close", "created", "dataBound", "destroyed", "filtering", "focus", "open", "select", "valueChange"] }, { kind: "component", type: i5$1.MultiSelectComponent, selector: "ejs-multiselect", inputs: ["actionFailureTemplate", "addTagOnBlur", "allowCustomValue", "allowFiltering", "allowObjectBinding", "changeOnBlur", "closePopupOnSelect", "cssClass", "dataSource", "delimiterChar", "enableGroupCheckBox", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSelectionOrder", "enableVirtualization", "enabled", "fields", "filterBarPlaceholder", "filterType", "floatLabelType", "footerTemplate", "groupTemplate", "headerTemplate", "hideSelectedItem", "htmlAttributes", "ignoreAccent", "ignoreCase", "isDeviceFullScreen", "itemTemplate", "locale", "maximumSelectionLength", "mode", "noRecordsTemplate", "openOnClick", "placeholder", "popupHeight", "popupWidth", "query", "readonly", "selectAllText", "showClearButton", "showDropDownIcon", "showSelectAll", "sortOrder", "text", "unSelectAllText", "value", "valueTemplate", "width", "zIndex"], outputs: ["actionBegin", "actionComplete", "actionFailure", "beforeOpen", "beforeSelectAll", "blur", "change", "chipSelection", "close", "created", "customValueSelection", "dataBound", "destroyed", "filtering", "focus", "open", "removed", "removing", "select", "selectedAll", "tagging", "valueChange"] }, { kind: "component", type: i5$1.AutoCompleteComponent, selector: "ejs-autocomplete", inputs: ["actionFailureTemplate", "allowCustom", "allowFiltering", "allowObjectBinding", "autofill", "cssClass", "dataSource", "enablePersistence", "enableRtl", "enableVirtualization", "enabled", "fields", "filterBarPlaceholder", "filterType", "floatLabelType", "footerTemplate", "groupTemplate", "headerTemplate", "highlight", "htmlAttributes", "ignoreAccent", "ignoreCase", "index", "isDeviceFullScreen", "itemTemplate", "locale", "minLength", "noRecordsTemplate", "placeholder", "popupHeight", "popupWidth", "query", "readonly", "showClearButton", "showPopupButton", "sortOrder", "suggestionCount", "text", "value", "valueTemplate", "width", "zIndex"], outputs: ["actionBegin", "actionComplete", "actionFailure", "beforeOpen", "blur", "change", "close", "created", "customValueSpecifier", "dataBound", "destroyed", "filtering", "focus", "open", "select", "valueChange"] }, { kind: "component", type: TagInputComponent, selector: "rs-tag-input", inputs: ["value", "fields", "disabled", "error", "inputMinlength", "inputMaxlength"], outputs: ["valueChange", "focus", "blur"] }, { kind: "component", type: RadioGroupComponent, selector: "rs-radio-group", inputs: ["value", "dataSource", "orientation", "fields", "disabled", "error"], outputs: ["valueChange"] }, { kind: "component", type: CheckboxGroupComponent, selector: "rs-checkbox-group", inputs: ["name", "value", "dataSource", "orientation", "fields", "disabled", "error"], outputs: ["valueChange"] }, { kind: "component", type: SwitchInputComponent, selector: "rs-switch-input", inputs: ["value", "text", "orientation", "disabled", "error"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawerFormComponent, selector: "rs-drawer-form", inputs: { _sections: ["sections", "_sections"], optionsMap: "optionsMap", customTemplate: "customTemplate", customSectionTemplate: "customSectionTemplate", formDisabled: ["disabled", "formDisabled"], showAnchor: "showAnchor", optionFields: "optionFields", showFilterNumber: "showFilterNumber", form: "form" }, outputs: { formChange: "formChange", fieldChange: "fieldChange" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["drawerFormEl"], descendants: true }, { propertyName: "containers", predicate: ["customTemplateContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "sectionContainers", predicate: ["customSectionContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "sectionEls", predicate: ["sectionEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #drawerFormEl class=\"rs-drawer-form-container\">\r\n  <div class=\"section-container\">\r\n    <div #sectionEl class=\"section-item\" *ngFor=\"let section of sections\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"section-expand-checkbox\"\r\n        *ngIf=\"section.title\"\r\n      />\r\n      <div class=\"section-title\" *ngIf=\"section.title\">\r\n        <span>{{ section.title }}</span>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"!section.customKey\">\r\n        <div\r\n          class=\"form-item\"\r\n          *ngFor=\"let field of section.fields\"\r\n          [attr.data-required]=\"field.required ? 'yes' : 'no'\"\r\n          [attr.data-disabled]=\"field.disabled || formDisabled ? 'yes' : 'no'\"\r\n          [attr.data-error]=\"\r\n            fieldValidMap[field.formKey] === false ? 'yes' : 'no'\r\n          \"\r\n        >\r\n          <div class=\"form-label\">\r\n            <span>{{ field.label }}</span>\r\n            <ejs-tooltip\r\n              class=\"form-tooltip\"\r\n              cssClass=\"rs-drawer-tooltip\"\r\n              *ngIf=\"field.tooltip\"\r\n              position=\"RightCenter\"\r\n              [content]=\"field.tooltip\"\r\n            >\r\n              <span class=\"tooltip-icon\"></span>\r\n            </ejs-tooltip>\r\n          </div>\r\n          <div class=\"form-content\">\r\n            <!-- Radio -->\r\n            <rs-radio-group\r\n              *ngIf=\"field.fieldFormType === 'Radio'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-radio-group>\r\n            <!-- Checkbox -->\r\n            <rs-checkbox-group\r\n              *ngIf=\"field.fieldFormType === 'Checkbox'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-checkbox-group>\r\n            <!-- Switch -->\r\n            <rs-switch-input\r\n              *ngIf=\"field.fieldFormType === 'Switch'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-switch-input>\r\n            <!-- Input -->\r\n            <input\r\n              class=\"e-input\"\r\n              *ngIf=\"\r\n                field.fieldFormType === 'Text' ||\r\n                field.fieldFormType === 'Email'\r\n              \"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n            />\r\n            <!-- Textarea -->\r\n            <textarea\r\n              class=\"e-input\"\r\n              *ngIf=\"field.fieldFormType === 'Textarea'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n              rows=\"3\"\r\n            ></textarea>\r\n            <!-- Number Input -->\r\n            <ejs-numerictextbox\r\n              *ngIf=\"field.fieldFormType === 'Number'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [max]=\"field.max\"\r\n              [min]=\"field.min\"\r\n              [step]=\"field.step\"\r\n              [decimals]=\"field.decimals\"\r\n              [format]=\"field.format\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-numerictextbox>\r\n            <!-- Tags Input -->\r\n            <rs-tag-input\r\n              *ngIf=\"field.fieldFormType === 'Tags'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [inputMaxlength]=\"field.maxlength\"\r\n              [inputMinlength]=\"field.minlength\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></rs-tag-input>\r\n            <!-- AutoComplete -->\r\n            <ejs-autocomplete\r\n              *ngIf=\"field.fieldFormType === 'AutoComplete'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-autocomplete>\r\n            <!-- Dropdown -->\r\n            <ejs-dropdownlist\r\n              *ngIf=\"field.fieldFormType === 'Dropdown'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showClearButton]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-dropdownlist>\r\n            <!-- MultiSelect -->\r\n            <ejs-multiselect\r\n              *ngIf=\"field.fieldFormType === 'MultiSelect'\"\r\n              mode=\"CheckBox\"\r\n              [ngModel]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showDropDownIcon]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            >\r\n            </ejs-multiselect>\r\n            <!-- Datepicker -->\r\n            <ejs-datepicker\r\n              *ngIf=\"field.fieldFormType === 'Datepicker'\"\r\n              [value]=\"getValue(field)\"\r\n              [format]=\"field.format || 'dd-MMM-yyyy'\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"\r\n                fieldValidMap[field.formKey] === false ||\r\n                dateValidMap[field.formKey] === false\r\n              \"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onDatePickerBlur($event, field)\"\r\n            ></ejs-datepicker>\r\n            <ng-template\r\n              #customTemplateContainer\r\n              *ngIf=\"field.fieldFormType === 'Custom'\"\r\n            ></ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"section.customKey\">\r\n        <ng-template #customSectionContainer></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"sections.length > 1 && showAnchor\" class=\"anchor-container\">\r\n    <div\r\n      class=\"anchor-item\"\r\n      *ngFor=\"let section of sections; let index = index\"\r\n      [style.display]=\"section.title ? 'block' : 'none'\"\r\n      [attr.data-active]=\"scrollIndex === index ? 'yes' : 'no'\"\r\n      [attr.data-content]=\"section.title\"\r\n      (click)=\"onClickAnchor(index)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;margin-top:16px}.rs-drawer-form-container{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:32px}.rs-drawer-form-container .section-container{flex:auto;display:flex;flex-flow:column nowrap;max-width:1576px}.rs-drawer-form-container .section-item{position:relative}.rs-drawer-form-container .section-item:not(:first-child){border-top:1px solid #eaedf0}.rs-drawer-form-container .section-expand-checkbox{display:block;width:100%;height:28px;appearance:none;cursor:pointer;position:absolute;top:0;left:0}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title:before{transform:rotate(-90deg)}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title+.section-form{max-height:0;overflow:hidden}.rs-drawer-form-container .section-title{padding:6px 0;margin-bottom:12px;color:#44566c;font-family:Arial;font-size:13px;font-style:normal;font-weight:700;line-height:16px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:none}.rs-drawer-form-container .section-title:before{content:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12.2426 6.24264L8 9.5L3.75736 6.24264%22 stroke%3D%22%236B6B6B%22%2F%3E%0D%3C%2Fsvg%3E%0D\");display:block;height:16px;width:16px;margin-right:8px}.rs-drawer-form-container .section-form{display:flex;flex-flow:row wrap;justify-content:space-between;gap:12px 56px;max-width:1576px;padding:0 24px;margin-bottom:20px}.rs-drawer-form-container .section-form .form-item{min-height:28px;min-width:400px;max-width:700px;width:calc((100% - 56px)/2);display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:flex-start}.rs-drawer-form-container .section-form .form-item[data-required=yes] .form-label>span:first-child:after{content:\"*\";color:var(--rs-input-require-label-color)}.rs-drawer-form-container .section-form .form-item .form-label{flex:none;width:144px;height:28px;margin-right:16px;color:#43566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;display:flex;flex-flow:row nowrap;align-items:center}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip{margin-left:4px}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip .tooltip-icon:before{content:\" \";display:block;width:14px;height:14px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2218%22 viewBox%3D%220 0 18 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D    %3Cpath d%3D%22M9 1a8 8 0 1 0 8 8 8.009 8.009 0 0 0-8-8zm0 14.667A6.666 6.666 0 1 1 15.667 9 6.674 6.674 0 0 1 9 15.667z%22 fill%3D%22%2344566C%22%2F%3E%0D    %3Cpath d%3D%22M9 7.667h-.667a.667.667 0 1 0 0 1.333h.666v4a.667.667 0 0 0 1.334 0V9a1.333 1.333 0 0 0-1.334-1.333zM9 6.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2z%22 fill%3D%22%2344566C%22%2F%3E%0D%3C%2Fsvg%3E%0D\");background-size:contain;cursor:pointer}.rs-drawer-form-container .section-form .form-item .form-content{flex:auto}@media (max-width: 1420px){.rs-drawer-form-container .section-form .form-item{width:100%}}.rs-drawer-form-container .anchor-container{flex:none;display:flex;flex-flow:column nowrap;gap:4px;min-width:120px;height:auto;position:sticky;top:56px}.rs-drawer-form-container .anchor-item{min-width:120px;padding:4px 12px;border-left:1px solid #eaedf0;cursor:pointer;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:16px;position:relative}.rs-drawer-form-container .anchor-item:before{content:attr(data-content);color:#44566c;font-weight:400;position:absolute;left:12px}.rs-drawer-form-container .anchor-item:after{content:attr(data-content);visibility:hidden;color:#1364b3;font-weight:700}.rs-drawer-form-container .anchor-item[data-active=yes]{border-color:#1f7bff}.rs-drawer-form-container .anchor-item[data-active=yes]:before{visibility:hidden}.rs-drawer-form-container .anchor-item[data-active=yes]:after{visibility:visible}.rs-drawer-tooltip.e-tooltip-wrap{border:none;background-color:#44566c}.rs-drawer-tooltip.e-tooltip-wrap .e-arrow-tip{height:4px;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.TooltipComponent, selector: "ejs-tooltip", inputs: ["animation", "closeDelay", "container", "content", "cssClass", "enableHtmlParse", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "height", "htmlAttributes", "isSticky", "locale", "mouseTrail", "offsetX", "offsetY", "openDelay", "opensOn", "position", "showTipPointer", "target", "tipPointerPosition", "width", "windowCollision"], outputs: ["afterClose", "afterOpen", "beforeClose", "beforeCollision", "beforeOpen", "beforeRender", "created", "destroyed"] }, { kind: "component", type: i4$1.DatePickerComponent, selector: "ejs-datepicker", inputs: ["allowEdit", "calendarMode", "cssClass", "dayHeaderFormat", "depth", "enableMask", "enablePersistence", "enableRtl", "enabled", "firstDayOfWeek", "floatLabelType", "format", "fullScreenMode", "htmlAttributes", "isMultiSelection", "keyConfigs", "locale", "maskPlaceholder", "max", "min", "openOnFocus", "placeholder", "readonly", "serverTimezoneOffset", "showClearButton", "showTodayButton", "start", "strictMode", "value", "values", "weekNumber", "weekRule", "width", "zIndex"], outputs: ["blur", "change", "cleared", "close", "created", "destroyed", "focus", "navigated", "open", "renderDayCell", "valueChange"] }, { kind: "component", type: i2$4.NumericTextBoxComponent, selector: "ejs-numerictextbox", inputs: ["cssClass", "currency", "currencyCode", "decimals", "enablePersistence", "enableRtl", "enabled", "floatLabelType", "format", "htmlAttributes", "locale", "max", "min", "placeholder", "readonly", "showClearButton", "showSpinButton", "step", "strictMode", "validateDecimalOnType", "value", "width"], outputs: ["blur", "change", "created", "destroyed", "focus", "valueChange"] }, { kind: "component", type: i6.DropDownListComponent, selector: "ejs-dropdownlist", inputs: ["actionFailureTemplate", "allowFiltering", "allowObjectBinding", "cssClass", "dataSource", "enablePersistence", "enableRtl", "enableVirtualization", "enabled", "fields", "filterBarPlaceholder", "filterType", "floatLabelType", "footerTemplate", "groupTemplate", "headerTemplate", "htmlAttributes", "ignoreAccent", "ignoreCase", "index", "isDeviceFullScreen", "itemTemplate", "locale", "noRecordsTemplate", "placeholder", "popupHeight", "popupWidth", "query", "readonly", "showClearButton", "sortOrder", "text", "value", "valueTemplate", "width", "zIndex"], outputs: ["actionBegin", "actionComplete", "actionFailure", "beforeOpen", "blur", "change", "close", "created", "dataBound", "destroyed", "filtering", "focus", "open", "select", "valueChange"] }, { kind: "component", type: i6.MultiSelectComponent, selector: "ejs-multiselect", inputs: ["actionFailureTemplate", "addTagOnBlur", "allowCustomValue", "allowFiltering", "allowObjectBinding", "changeOnBlur", "closePopupOnSelect", "cssClass", "dataSource", "delimiterChar", "enableGroupCheckBox", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSelectionOrder", "enableVirtualization", "enabled", "fields", "filterBarPlaceholder", "filterType", "floatLabelType", "footerTemplate", "groupTemplate", "headerTemplate", "hideSelectedItem", "htmlAttributes", "ignoreAccent", "ignoreCase", "isDeviceFullScreen", "itemTemplate", "locale", "maximumSelectionLength", "mode", "noRecordsTemplate", "openOnClick", "placeholder", "popupHeight", "popupWidth", "query", "readonly", "selectAllText", "showClearButton", "showDropDownIcon", "showSelectAll", "sortOrder", "text", "unSelectAllText", "value", "valueTemplate", "width", "zIndex"], outputs: ["actionBegin", "actionComplete", "actionFailure", "beforeOpen", "beforeSelectAll", "blur", "change", "chipSelection", "close", "created", "customValueSelection", "dataBound", "destroyed", "filtering", "focus", "open", "removed", "removing", "select", "selectedAll", "tagging", "valueChange"] }, { kind: "component", type: i6.AutoCompleteComponent, selector: "ejs-autocomplete", inputs: ["actionFailureTemplate", "allowCustom", "allowFiltering", "allowObjectBinding", "autofill", "cssClass", "dataSource", "enablePersistence", "enableRtl", "enableVirtualization", "enabled", "fields", "filterBarPlaceholder", "filterType", "floatLabelType", "footerTemplate", "groupTemplate", "headerTemplate", "highlight", "htmlAttributes", "ignoreAccent", "ignoreCase", "index", "isDeviceFullScreen", "itemTemplate", "locale", "minLength", "noRecordsTemplate", "placeholder", "popupHeight", "popupWidth", "query", "readonly", "showClearButton", "showPopupButton", "sortOrder", "suggestionCount", "text", "value", "valueTemplate", "width", "zIndex"], outputs: ["actionBegin", "actionComplete", "actionFailure", "beforeOpen", "blur", "change", "close", "created", "customValueSpecifier", "dataBound", "destroyed", "filtering", "focus", "open", "select", "valueChange"] }, { kind: "component", type: TagInputComponent, selector: "rs-tag-input", inputs: ["value", "fields", "disabled", "error", "inputMinlength", "inputMaxlength"], outputs: ["valueChange", "focus", "blur"] }, { kind: "component", type: RadioGroupComponent, selector: "rs-radio-group", inputs: ["value", "dataSource", "orientation", "fields", "disabled", "error"], outputs: ["valueChange"] }, { kind: "component", type: CheckboxGroupComponent, selector: "rs-checkbox-group", inputs: ["name", "value", "dataSource", "orientation", "fields", "disabled", "error"], outputs: ["valueChange"] }, { kind: "component", type: SwitchInputComponent, selector: "rs-switch-input", inputs: ["value", "text", "orientation", "disabled", "error"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rs-drawer-form", providers: [DatePipe], template: "<div #drawerFormEl class=\"rs-drawer-form-container\">\r\n  <div class=\"section-container\">\r\n    <div #sectionEl class=\"section-item\" *ngFor=\"let section of sections\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"section-expand-checkbox\"\r\n        *ngIf=\"section.title\"\r\n      />\r\n      <div class=\"section-title\" *ngIf=\"section.title\">\r\n        <span>{{ section.title }}</span>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"!section.customKey\">\r\n        <div\r\n          class=\"form-item\"\r\n          *ngFor=\"let field of section.fields\"\r\n          [attr.data-required]=\"field.required ? 'yes' : 'no'\"\r\n          [attr.data-disabled]=\"field.disabled || formDisabled ? 'yes' : 'no'\"\r\n          [attr.data-error]=\"\r\n            fieldValidMap[field.formKey] === false ? 'yes' : 'no'\r\n          \"\r\n        >\r\n          <div class=\"form-label\">\r\n            <span>{{ field.label }}</span>\r\n            <ejs-tooltip\r\n              class=\"form-tooltip\"\r\n              cssClass=\"rs-drawer-tooltip\"\r\n              *ngIf=\"field.tooltip\"\r\n              position=\"RightCenter\"\r\n              [content]=\"field.tooltip\"\r\n            >\r\n              <span class=\"tooltip-icon\"></span>\r\n            </ejs-tooltip>\r\n          </div>\r\n          <div class=\"form-content\">\r\n            <!-- Radio -->\r\n            <rs-radio-group\r\n              *ngIf=\"field.fieldFormType === 'Radio'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-radio-group>\r\n            <!-- Checkbox -->\r\n            <rs-checkbox-group\r\n              *ngIf=\"field.fieldFormType === 'Checkbox'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-checkbox-group>\r\n            <!-- Switch -->\r\n            <rs-switch-input\r\n              *ngIf=\"field.fieldFormType === 'Switch'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-switch-input>\r\n            <!-- Input -->\r\n            <input\r\n              class=\"e-input\"\r\n              *ngIf=\"\r\n                field.fieldFormType === 'Text' ||\r\n                field.fieldFormType === 'Email'\r\n              \"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n            />\r\n            <!-- Textarea -->\r\n            <textarea\r\n              class=\"e-input\"\r\n              *ngIf=\"field.fieldFormType === 'Textarea'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n              rows=\"3\"\r\n            ></textarea>\r\n            <!-- Number Input -->\r\n            <ejs-numerictextbox\r\n              *ngIf=\"field.fieldFormType === 'Number'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [max]=\"field.max\"\r\n              [min]=\"field.min\"\r\n              [format]=\"field.format\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-numerictextbox>\r\n            <!-- Tags Input -->\r\n            <rs-tag-input\r\n              *ngIf=\"field.fieldFormType === 'Tags'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [inputMaxlength]=\"field.maxlength\"\r\n              [inputMinlength]=\"field.minlength\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></rs-tag-input>\r\n            <!-- AutoComplete -->\r\n            <ejs-autocomplete\r\n              *ngIf=\"field.fieldFormType === 'AutoComplete'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-autocomplete>\r\n            <!-- Dropdown -->\r\n            <ejs-dropdownlist\r\n              *ngIf=\"field.fieldFormType === 'Dropdown'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showClearButton]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-dropdownlist>\r\n            <!-- MultiSelect -->\r\n            <ejs-multiselect\r\n              *ngIf=\"field.fieldFormType === 'MultiSelect'\"\r\n              mode=\"CheckBox\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showDropDownIcon]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            >\r\n            </ejs-multiselect>\r\n            <!-- Datepicker -->\r\n            <ejs-datepicker\r\n              *ngIf=\"field.fieldFormType === 'Datepicker'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [format]=\"field.format || 'dd-MMM-yyyy'\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"$event.isInteracted && onChange($event.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-datepicker>\r\n            <ng-template\r\n              #customTemplateContainer\r\n              *ngIf=\"field.fieldFormType === 'Custom'\"\r\n            ></ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"section.customKey\">\r\n        <ng-template #customSectionContainer></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"sections.length > 1 && showAnchor\" class=\"anchor-container\">\r\n    <div\r\n      class=\"anchor-item\"\r\n      *ngFor=\"let section of sections; let index = index\"\r\n      [style.display]=\"section.title ? 'block' : 'none'\"\r\n      [attr.data-active]=\"scrollIndex === index ? 'yes' : 'no'\"\r\n      [attr.data-content]=\"section.title\"\r\n      (click)=\"onClickAnchor(index)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;margin-top:16px}.rs-drawer-form-container{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:32px}.rs-drawer-form-container .section-container{flex:auto;display:flex;flex-flow:column nowrap;max-width:1576px}.rs-drawer-form-container .section-item{position:relative}.rs-drawer-form-container .section-item:not(:first-child){border-top:1px solid #eaedf0}.rs-drawer-form-container .section-expand-checkbox{display:block;width:100%;height:28px;appearance:none;cursor:pointer;position:absolute;top:0;left:0}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title:before{transform:rotate(-90deg)}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title+.section-form{max-height:0;overflow:hidden}.rs-drawer-form-container .section-title{padding:6px 0;margin-bottom:12px;color:#44566c;font-family:Arial;font-size:13px;font-style:normal;font-weight:700;line-height:16px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:none}.rs-drawer-form-container .section-title:before{content:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12.2426 6.24264L8 9.5L3.75736 6.24264%22 stroke%3D%22%236B6B6B%22%2F%3E%0D%3C%2Fsvg%3E%0D\");display:block;height:16px;width:16px;margin-right:8px}.rs-drawer-form-container .section-form{display:flex;flex-flow:row wrap;justify-content:space-between;gap:12px 56px;max-width:1576px;padding:0 24px;margin-bottom:20px}.rs-drawer-form-container .section-form .form-item{min-height:28px;min-width:400px;max-width:700px;width:calc((100% - 56px)/2);display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:flex-start}.rs-drawer-form-container .section-form .form-item[data-required=yes] .form-label>span:first-child:after{content:\"*\";color:var(--rs-input-require-label-color)}.rs-drawer-form-container .section-form .form-item .form-label{flex:none;width:144px;height:28px;margin-right:16px;color:#43566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;display:flex;flex-flow:row nowrap;align-items:center}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip{margin-left:4px}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip .tooltip-icon:before{content:\" \";display:block;width:14px;height:14px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2218%22 viewBox%3D%220 0 18 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D    %3Cpath d%3D%22M9 1a8 8 0 1 0 8 8 8.009 8.009 0 0 0-8-8zm0 14.667A6.666 6.666 0 1 1 15.667 9 6.674 6.674 0 0 1 9 15.667z%22 fill%3D%22%2344566C%22%2F%3E%0D    %3Cpath d%3D%22M9 7.667h-.667a.667.667 0 1 0 0 1.333h.666v4a.667.667 0 0 0 1.334 0V9a1.333 1.333 0 0 0-1.334-1.333zM9 6.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2z%22 fill%3D%22%2344566C%22%2F%3E%0D%3C%2Fsvg%3E%0D\");background-size:contain;cursor:pointer}.rs-drawer-form-container .section-form .form-item .form-content{flex:auto}@media (max-width: 1420px){.rs-drawer-form-container .section-form .form-item{width:100%}}.rs-drawer-form-container .anchor-container{flex:none;display:flex;flex-flow:column nowrap;gap:4px;min-width:120px;height:auto;position:sticky;top:56px}.rs-drawer-form-container .anchor-item{min-width:120px;padding:4px 12px;border-left:1px solid #eaedf0;cursor:pointer;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:16px;position:relative}.rs-drawer-form-container .anchor-item:before{content:attr(data-content);color:#44566c;font-weight:400;position:absolute;left:12px}.rs-drawer-form-container .anchor-item:after{content:attr(data-content);visibility:hidden;color:#1364b3;font-weight:700}.rs-drawer-form-container .anchor-item[data-active=yes]{border-color:#1f7bff}.rs-drawer-form-container .anchor-item[data-active=yes]:before{visibility:hidden}.rs-drawer-form-container .anchor-item[data-active=yes]:after{visibility:visible}.rs-drawer-tooltip.e-tooltip-wrap{border:none;background-color:#44566c}.rs-drawer-tooltip.e-tooltip-wrap .e-arrow-tip{height:4px;visibility:hidden}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DatePipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { sections: [{
+            args: [{ selector: "rs-drawer-form", template: "<div #drawerFormEl class=\"rs-drawer-form-container\">\r\n  <div class=\"section-container\">\r\n    <div #sectionEl class=\"section-item\" *ngFor=\"let section of sections\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"section-expand-checkbox\"\r\n        *ngIf=\"section.title\"\r\n      />\r\n      <div class=\"section-title\" *ngIf=\"section.title\">\r\n        <span>{{ section.title }}</span>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"!section.customKey\">\r\n        <div\r\n          class=\"form-item\"\r\n          *ngFor=\"let field of section.fields\"\r\n          [attr.data-required]=\"field.required ? 'yes' : 'no'\"\r\n          [attr.data-disabled]=\"field.disabled || formDisabled ? 'yes' : 'no'\"\r\n          [attr.data-error]=\"\r\n            fieldValidMap[field.formKey] === false ? 'yes' : 'no'\r\n          \"\r\n        >\r\n          <div class=\"form-label\">\r\n            <span>{{ field.label }}</span>\r\n            <ejs-tooltip\r\n              class=\"form-tooltip\"\r\n              cssClass=\"rs-drawer-tooltip\"\r\n              *ngIf=\"field.tooltip\"\r\n              position=\"RightCenter\"\r\n              [content]=\"field.tooltip\"\r\n            >\r\n              <span class=\"tooltip-icon\"></span>\r\n            </ejs-tooltip>\r\n          </div>\r\n          <div class=\"form-content\">\r\n            <!-- Radio -->\r\n            <rs-radio-group\r\n              *ngIf=\"field.fieldFormType === 'Radio'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-radio-group>\r\n            <!-- Checkbox -->\r\n            <rs-checkbox-group\r\n              *ngIf=\"field.fieldFormType === 'Checkbox'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-checkbox-group>\r\n            <!-- Switch -->\r\n            <rs-switch-input\r\n              *ngIf=\"field.fieldFormType === 'Switch'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n            ></rs-switch-input>\r\n            <!-- Input -->\r\n            <input\r\n              class=\"e-input\"\r\n              *ngIf=\"\r\n                field.fieldFormType === 'Text' ||\r\n                field.fieldFormType === 'Email'\r\n              \"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n            />\r\n            <!-- Textarea -->\r\n            <textarea\r\n              class=\"e-input\"\r\n              *ngIf=\"field.fieldFormType === 'Textarea'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [required]=\"field.required\"\r\n              [attr.maxlength]=\"field.maxlength\"\r\n              [attr.minlength]=\"field.minlength\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (input)=\"onInput($event.target.value, field)\"\r\n              (change)=\"onChange($event.target.value, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n              autocomplete=\"off\"\r\n              rows=\"3\"\r\n            ></textarea>\r\n            <!-- Number Input -->\r\n            <ejs-numerictextbox\r\n              *ngIf=\"field.fieldFormType === 'Number'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [max]=\"field.max\"\r\n              [min]=\"field.min\"\r\n              [step]=\"field.step\"\r\n              [decimals]=\"field.decimals\"\r\n              [format]=\"field.format\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-numerictextbox>\r\n            <!-- Tags Input -->\r\n            <rs-tag-input\r\n              *ngIf=\"field.fieldFormType === 'Tags'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [inputMaxlength]=\"field.maxlength\"\r\n              [inputMinlength]=\"field.minlength\"\r\n              [disabled]=\"getDisabled(field)\"\r\n              [error]=\"fieldValidMap[field.formKey] === false\"\r\n              (valueChange)=\"onChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></rs-tag-input>\r\n            <!-- AutoComplete -->\r\n            <ejs-autocomplete\r\n              *ngIf=\"field.fieldFormType === 'AutoComplete'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-autocomplete>\r\n            <!-- Dropdown -->\r\n            <ejs-dropdownlist\r\n              *ngIf=\"field.fieldFormType === 'Dropdown'\"\r\n              [value]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showClearButton]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            ></ejs-dropdownlist>\r\n            <!-- MultiSelect -->\r\n            <ejs-multiselect\r\n              *ngIf=\"field.fieldFormType === 'MultiSelect'\"\r\n              mode=\"CheckBox\"\r\n              [ngModel]=\"form[field.formKey]\"\r\n              [dataSource]=\"optionsMap[field.optionKey]\"\r\n              [fields]=\"getOptionFields(field)\"\r\n              [allowFiltering]=\"true\"\r\n              [showDropDownIcon]=\"true\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"fieldValidMap[field.formKey] === false\"\r\n              (filtering)=\"onFiltering($event, field)\"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onBlur(field)\"\r\n            >\r\n            </ejs-multiselect>\r\n            <!-- Datepicker -->\r\n            <ejs-datepicker\r\n              *ngIf=\"field.fieldFormType === 'Datepicker'\"\r\n              [value]=\"getValue(field)\"\r\n              [format]=\"field.format || 'dd-MMM-yyyy'\"\r\n              [enabled]=\"!getDisabled(field)\"\r\n              [class.error]=\"\r\n                fieldValidMap[field.formKey] === false ||\r\n                dateValidMap[field.formKey] === false\r\n              \"\r\n              (change)=\"onComponentChange($event, field)\"\r\n              (focus)=\"onFocus(field)\"\r\n              (blur)=\"onDatePickerBlur($event, field)\"\r\n            ></ejs-datepicker>\r\n            <ng-template\r\n              #customTemplateContainer\r\n              *ngIf=\"field.fieldFormType === 'Custom'\"\r\n            ></ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"section-form\" *ngIf=\"section.customKey\">\r\n        <ng-template #customSectionContainer></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"sections.length > 1 && showAnchor\" class=\"anchor-container\">\r\n    <div\r\n      class=\"anchor-item\"\r\n      *ngFor=\"let section of sections; let index = index\"\r\n      [style.display]=\"section.title ? 'block' : 'none'\"\r\n      [attr.data-active]=\"scrollIndex === index ? 'yes' : 'no'\"\r\n      [attr.data-content]=\"section.title\"\r\n      (click)=\"onClickAnchor(index)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;margin-top:16px}.rs-drawer-form-container{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:32px}.rs-drawer-form-container .section-container{flex:auto;display:flex;flex-flow:column nowrap;max-width:1576px}.rs-drawer-form-container .section-item{position:relative}.rs-drawer-form-container .section-item:not(:first-child){border-top:1px solid #eaedf0}.rs-drawer-form-container .section-expand-checkbox{display:block;width:100%;height:28px;appearance:none;cursor:pointer;position:absolute;top:0;left:0}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title:before{transform:rotate(-90deg)}.rs-drawer-form-container .section-expand-checkbox:checked+.section-title+.section-form{max-height:0;overflow:hidden}.rs-drawer-form-container .section-title{padding:6px 0;margin-bottom:12px;color:#44566c;font-family:Arial;font-size:13px;font-style:normal;font-weight:700;line-height:16px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:none}.rs-drawer-form-container .section-title:before{content:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12.2426 6.24264L8 9.5L3.75736 6.24264%22 stroke%3D%22%236B6B6B%22%2F%3E%0D%3C%2Fsvg%3E%0D\");display:block;height:16px;width:16px;margin-right:8px}.rs-drawer-form-container .section-form{display:flex;flex-flow:row wrap;justify-content:space-between;gap:12px 56px;max-width:1576px;padding:0 24px;margin-bottom:20px}.rs-drawer-form-container .section-form .form-item{min-height:28px;min-width:400px;max-width:700px;width:calc((100% - 56px)/2);display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:flex-start}.rs-drawer-form-container .section-form .form-item[data-required=yes] .form-label>span:first-child:after{content:\"*\";color:var(--rs-input-require-label-color)}.rs-drawer-form-container .section-form .form-item .form-label{flex:none;width:144px;height:28px;margin-right:16px;color:#43566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;display:flex;flex-flow:row nowrap;align-items:center}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip{margin-left:4px}.rs-drawer-form-container .section-form .form-item .form-label .form-tooltip .tooltip-icon:before{content:\" \";display:block;width:14px;height:14px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2218%22 viewBox%3D%220 0 18 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D    %3Cpath d%3D%22M9 1a8 8 0 1 0 8 8 8.009 8.009 0 0 0-8-8zm0 14.667A6.666 6.666 0 1 1 15.667 9 6.674 6.674 0 0 1 9 15.667z%22 fill%3D%22%2344566C%22%2F%3E%0D    %3Cpath d%3D%22M9 7.667h-.667a.667.667 0 1 0 0 1.333h.666v4a.667.667 0 0 0 1.334 0V9a1.333 1.333 0 0 0-1.334-1.333zM9 6.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2z%22 fill%3D%22%2344566C%22%2F%3E%0D%3C%2Fsvg%3E%0D\");background-size:contain;cursor:pointer}.rs-drawer-form-container .section-form .form-item .form-content{flex:auto}@media (max-width: 1420px){.rs-drawer-form-container .section-form .form-item{width:100%}}.rs-drawer-form-container .anchor-container{flex:none;display:flex;flex-flow:column nowrap;gap:4px;min-width:120px;height:auto;position:sticky;top:56px}.rs-drawer-form-container .anchor-item{min-width:120px;padding:4px 12px;border-left:1px solid #eaedf0;cursor:pointer;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:16px;position:relative}.rs-drawer-form-container .anchor-item:before{content:attr(data-content);color:#44566c;font-weight:400;position:absolute;left:12px}.rs-drawer-form-container .anchor-item:after{content:attr(data-content);visibility:hidden;color:#1364b3;font-weight:700}.rs-drawer-form-container .anchor-item[data-active=yes]{border-color:#1f7bff}.rs-drawer-form-container .anchor-item[data-active=yes]:before{visibility:hidden}.rs-drawer-form-container .anchor-item[data-active=yes]:after{visibility:visible}.rs-drawer-tooltip.e-tooltip-wrap{border:none;background-color:#44566c}.rs-drawer-tooltip.e-tooltip-wrap .e-arrow-tip{height:4px;visibility:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _sections: [{
                 type: Input,
                 args: ["sections"]
             }], optionsMap: [{
@@ -19607,6 +19934,869 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ["sectionEl"]
             }] } });
 
+// 从环境配置获取AI配置
+function getAIConfig() {
+    return {
+        endpoint: "https://aidevused.openai.azure.com/",
+        apiKey: "ccba76e279f64653a50ac4fee90afe5c",
+        deployment: "gpt-4",
+        apiVersion: "2025-01-01-preview",
+        enabled: true,
+    };
+}
+// 检查配置是否有效
+function isAIConfigValid(config) {
+    // 检查是否为aidevused端点且有有效API密钥
+    return !!((config.endpoint &&
+        config.apiKey &&
+        config.deployment &&
+        config.enabled &&
+        config.endpoint === "https://aidevused.openai.azure.com/" &&
+        config.apiKey !== "your-api-key-here") // Azure OpenAI API密钥通常以sk-开头
+    );
+}
+// 从后端API获取AI配置（推荐方式）
+async function getAIConfigFromBackend() {
+    try {
+        // 这里应该调用你的后端API来获取AI配置
+        // 例如：return await this.http.get('/api/ai-config');
+        // 临时返回默认配置
+        return getAIConfig();
+    }
+    catch (error) {
+        console.error("Failed to get AI config from backend:", error);
+        return getAIConfig();
+    }
+}
+
+// import { testAIFunction } from './ai-test';
+// testAIFunction();
+// 使用fetch API发送请求到Azure OpenAI
+async function sendAIRequest(messages, config) {
+    try {
+        const url = `${config.endpoint}/openai/deployments/${config.deployment}/chat/completions?api-version=${config.apiVersion}`;
+        const url1 = `${config.endpoint}`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'api-key': config.apiKey,
+                // 'subscription-id': 'a9548c86-f489-4deb-8f46-738b7ea44d0b',
+            },
+            body: JSON.stringify({
+                messages: messages,
+                max_tokens: 1000,
+                temperature: 0.7,
+                top_p: 1,
+                frequency_penalty: 0,
+                presence_penalty: 0,
+            }),
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
+        }
+        const data = await response.json();
+        if (!data.choices || !data.choices[0] || !data.choices[0].message) {
+            throw new Error('Invalid response format from AI service');
+        }
+        return data.choices[0].message.content;
+    }
+    catch (error) {
+        console.error('AI request failed:', error);
+        throw error;
+    }
+}
+// 备用方案：使用模拟数据（用于开发测试）
+function getMockAIResponse(subQuery, promptQuery) {
+    const mockResponses = {
+        Rephrase: `Rephrased: ${promptQuery}`,
+        Grammar: `Corrected: ${promptQuery}`,
+        Summarize: `Summary: ${promptQuery.substring(0, 100)}...`,
+        Elaborate: `Elaborated: ${promptQuery} with additional details and context.`,
+        Translate: `Translated: ${promptQuery}`,
+        SentimentAnalysis: '😊 Positive',
+    };
+    for (const [key, value] of Object.entries(mockResponses)) {
+        if (subQuery.includes(key)) {
+            return value;
+        }
+    }
+    return `AI processed: ${promptQuery}`;
+}
+// 主要的AI请求方法
+async function OpenAiModelRTE(subQuery, promptQuery) {
+    try {
+        const config = getAIConfig();
+        // 检查配置是否有效
+        if (!isAIConfigValid(config)) {
+            console.warn('AI configuration is incomplete or disabled, using mock response');
+            return getMockAIResponse(subQuery, promptQuery);
+        }
+        const messages = [
+            {
+                role: 'system',
+                content: subQuery.includes('emoji followed by the sentiment in the format')
+                    ? 'You are a helpful assistant. Please respond in string format.'
+                    : "NOTE: Return same html format just do changes content only. don't change html formats.",
+            },
+            {
+                role: 'user',
+                content: `${subQuery} ${promptQuery}`,
+            },
+        ];
+        const result = await sendAIRequest(messages, config);
+        return result;
+    }
+    catch (error) {
+        console.error('AI request failed, using mock response:', error);
+        return getMockAIResponse(subQuery, promptQuery);
+    }
+}
+// 兼容性方法（保持向后兼容）
+async function getAzureChatAIRequest(options) {
+    try {
+        const config = getAIConfig();
+        if (!isAIConfigValid(config)) {
+            return null;
+        }
+        const result = await sendAIRequest(options.messages, config);
+        return result;
+    }
+    catch (err) {
+        console.error('Error occurred:', err);
+        return null;
+    }
+}
+async function getAzureTextAIRequest(prompt) {
+    try {
+        const config = getAIConfig();
+        if (!isAIConfigValid(config)) {
+            return undefined;
+        }
+        const messages = [
+            {
+                role: 'user',
+                content: prompt,
+            },
+        ];
+        const result = await sendAIRequest(messages, config);
+        return result;
+    }
+    catch (err) {
+        console.error('Error occurred:', err);
+        return undefined;
+    }
+}
+
+// font family
+const fontFamily = {
+    default: "Arial",
+    items: [
+        {
+            text: "Arial",
+            value: "Arial, Helvetica, sans-serif",
+            cssClass: "e-arial",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Times New Roman",
+            value: "Times New Roman,Times,serif",
+            cssClass: "e-times-new-roman",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Helvetica",
+            value: "Helvetica",
+            cssClass: "e-helvetica",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Calibri",
+            value: "Calibri, Helvetica, sans-serif",
+            cssClass: "e-calibri",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Verdana",
+            value: "Verdana,Geneva,sans-serif",
+            cssClass: "e-verdana",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Georgia",
+            value: "Georgia,serif",
+            cssClass: "e-georgia",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Open Sans",
+            value: "Open Sans, sans-serif",
+            cssClass: "e-open-sans",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Roboto",
+            value: "Roboto",
+            cssClass: "e-roboto",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Lato",
+            value: "Lato, sans-serif",
+            cssClass: "e-lato",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Montserrat",
+            value: "Montserrat, sans-serif",
+            cssClass: "e-montserrat",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Segoe UI",
+            value: "Segoe UI",
+            cssClass: "e-segoe-ui",
+            command: "Font",
+            subCommand: "FontName",
+        },
+        {
+            text: "Impact",
+            value: "Impact,Charcoal,sans-serif",
+            cssClass: "e-impact",
+            command: "Font",
+            subCommand: "FontName",
+        },
+    ],
+};
+// line height配置
+const lineHeight_items = [
+    {
+        text: "1.0",
+    },
+    {
+        text: "1.15",
+    },
+    {
+        text: "1.5",
+    },
+    {
+        text: "2.0",
+    },
+    {
+        text: "2.5",
+    },
+    {
+        text: "3.0",
+    },
+];
+const BULLET_STYLES = [
+    {
+        id: "disc",
+        text: "● 实心圆点",
+        symbol: "●",
+        iconCss: "e-icons e-bullet-disc",
+        description: "标准实心圆点",
+    },
+    {
+        id: "circle",
+        text: "○ 空心圆点",
+        symbol: "○",
+        iconCss: "e-icons e-bullet-circle",
+        description: "空心圆点",
+    },
+    {
+        id: "square",
+        text: "■ 实心方块",
+        symbol: "■",
+        iconCss: "e-icons e-bullet-square",
+        description: "实心方块",
+    },
+    {
+        id: "diamond",
+        text: "◆ 实心菱形",
+        symbol: "◆",
+        iconCss: "e-icons e-bullet-diamond",
+        description: "实心菱形",
+    },
+    {
+        id: "triangle",
+        text: "► 实心三角",
+        symbol: "►",
+        iconCss: "e-icons e-bullet-triangle",
+        description: "实心三角形",
+    },
+    {
+        id: "arrow",
+        text: "➤ 箭头",
+        symbol: "➤",
+        iconCss: "e-icons e-bullet-arrow",
+        description: "箭头符号",
+    },
+    {
+        id: "star",
+        text: "★ 星形",
+        symbol: "★",
+        iconCss: "e-icons e-bullet-star",
+        description: "星形符号",
+    },
+    {
+        id: "check",
+        text: "✓ 对勾",
+        symbol: "✓",
+        iconCss: "e-icons e-bullet-check",
+        description: "对勾符号",
+    },
+    {
+        id: "heart",
+        text: "♥ 心形",
+        symbol: "♥",
+        iconCss: "e-icons e-bullet-heart",
+        description: "心形符号",
+    },
+    {
+        id: "bullet",
+        text: "• 小圆点",
+        symbol: "•",
+        iconCss: "e-icons e-bullet-bullet",
+        description: "小圆点",
+    },
+];
+// 获取符号样式
+function getBulletStyle(id) {
+    return BULLET_STYLES.find((style) => style.id === id);
+}
+// 获取所有符号样式
+function getAllBulletStyles() {
+    return BULLET_STYLES;
+}
+// 应用符号样式到列表
+function applyBulletStyle(ul, style) {
+    if (style.id === "disc" || style.id === "circle" || style.id === "square") {
+        // 使用CSS list-style-type
+        ul.style.listStyleType = style.id;
+        // 移除自定义符号
+        ul.querySelectorAll(".custom-bullet").forEach((bullet) => bullet.remove());
+    }
+    else {
+        // 使用自定义符号
+        ul.style.listStyleType = "none";
+        ul.setAttribute("data-bullet-style", style.id);
+        const listItems = ul.querySelectorAll("li");
+        listItems.forEach((li) => {
+            // 移除现有的自定义符号
+            const existingBullet = li.querySelector(".custom-bullet");
+            if (existingBullet) {
+                existingBullet.remove();
+            }
+            // 添加新的自定义符号
+            const bullet = document.createElement("span");
+            bullet.className = "custom-bullet";
+            bullet.textContent = style.symbol;
+            bullet.style.marginRight = "8px";
+            bullet.style.color = "#666";
+            // 将符号插入到列表项的开头
+            li.insertBefore(bullet, li.firstChild);
+        });
+    }
+}
+
+class RichtexteditorComponent {
+    dialog;
+    ref;
+    rteObj;
+    queryCategory;
+    leftRte;
+    rightRte;
+    AIdialog;
+    sentimentButton;
+    regenerateButton;
+    copyButton;
+    replaceButton;
+    // @ViewChild("chipList", { static: false }) public chipList!: ChipListComponent;
+    placeholder = "";
+    value = "";
+    height = 150;
+    autoSaveOnIdle = true;
+    target = "#container"; // dialog 弹窗父级
+    toolbarClick = new EventEmitter();
+    change = new EventEmitter();
+    // @Output() change = new EventEmitter();
+    family = fontFamily;
+    dialogWidth = "800px";
+    dialogHeight = "642px";
+    showZoomBtn = true;
+    showMsg = false;
+    insertImageSettings = {
+        saveFormat: "Blob",
+        allowedTypes: [".svg", ".png"],
+        display: "none",
+    };
+    editorManager;
+    size = "";
+    selectedQuery;
+    dropValIndex = 0;
+    queryList = [
+        { id: "Rephrase", text: "Rephrase" },
+        { id: "Grammar", text: "Correct Grammar" },
+        { id: "Summarize", text: "Summarize" },
+        { id: "Elaborate", text: "Elaborate" },
+        { id: "Translate", text: "Translate" },
+        { id: "SentimentAnalysis", text: "Sentiment Analysis" },
+    ];
+    rephraseTyleList = [
+        { text: "Standard", id: "Standard" },
+        { text: "Fluent", id: "Fluent" },
+        { text: "Professional", id: "Professional" },
+    ];
+    languageList = [
+        { id: "EN", text: "English" },
+        { id: "ZH", text: "Chinese (Simplified)" },
+        { id: "ES", text: "Spanish" },
+        { id: "ZHT", text: "Chinese (Traditional)" },
+        { id: "HI", text: "Hindi" },
+        { id: "AR", text: "Arabic" },
+        { id: "BN", text: "Bengali" },
+        { id: "PT", text: "Portuguese" },
+        { id: "RU", text: "Russian" },
+        { id: "JA", text: "Japanese" },
+        { id: "DE", text: "German" },
+        { id: "KO", text: "Korean" },
+        { id: "FR", text: "French" },
+        { id: "IT", text: "Italian" },
+        { id: "TR", text: "Turkish" },
+    ];
+    promptQuery = "";
+    isSentimentCheck = false;
+    subQuery = "";
+    translatelanguage;
+    chipValue = "Standard";
+    apiResultData;
+    AIResult;
+    tools = {
+        enableFloating: false,
+        items: [
+            {
+                tooltipText: "AI Assist",
+                template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="ai_assistant_button_tbar" style="width:100%"><div class="e-rte-dropdown-btn-text">AI Assist</div></button>',
+            },
+            "Bold",
+            "Italic",
+            "Underline",
+            "StrikeThrough",
+            "FontName",
+            "FontSize",
+            "FontColor",
+            "BackgroundColor",
+            "LowerCase",
+            "UpperCase",
+            "|",
+            "CreateTable",
+            "Formats",
+            "Alignments",
+            {
+                tooltipText: "Line Height",
+                template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="lineheight_tbar"  style="width:100%"></button>',
+            },
+            "OrderedList",
+            "UnorderedList",
+            "Outdent",
+            "Indent",
+            "|",
+            "CreateLink",
+            {
+                tooltipText: "",
+                template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar"  style="width:100%">' +
+                    '<div class="e-tbar-btn-text" style="font-weight: 500;"><img src="/assets/img/file-icon.svg" style="position: relative;top: -2px;"/><div class="uploadActions"><div id="uploadFromUser">Computer File</div><div id="relationDom">Ticket Attachment</div></div></div></button>',
+            },
+            "|",
+            "FormatPainter",
+            "ClearFormat",
+            "|",
+            "Undo",
+            "Redo",
+            //'SourceCode',
+        ],
+    };
+    constructor(dialog, ref) {
+        this.dialog = dialog;
+        this.ref = ref;
+    }
+    ngOnInit() { }
+    onContentChange(args) {
+        const tables = document.querySelectorAll("table.e-rte-table");
+        tables.forEach((table) => {
+            const htmlTable = table;
+            htmlTable.style.marginBottom = "10px";
+            htmlTable.style.borderCollapse = "collapse";
+            htmlTable.style.emptyCells = "show";
+            const tdElements = table.querySelectorAll("td");
+            tdElements.forEach((td) => {
+                td.style.border = "1px solid #adb5bd";
+                td.style.height = "20px";
+                td.style.minWidth = "20px";
+                td.style.padding = "2px 5px";
+                td.style.boxSizing = "border-box";
+            });
+        });
+        this.change.emit(args);
+    }
+    onCreate() {
+        //bind the a click event
+        // let editorContent = this.rteObj.contentModule.getEditPanel() as HTMLElement;
+        // editorContent.addEventListener('click', this.OnClicked.bind(this));
+        //add the line height
+        this.editorManager = this.rteObj.formatter.editorManager;
+        let splitButton = new DropDownButton({
+            items: lineHeight_items,
+            iconCss: "e-icons e-line-spacing",
+            select: this.onSelect.bind(this),
+        });
+        splitButton.appendTo("#lineheight_tbar");
+        // ai assist
+        let aiassistantButton = new DropDownButton({
+            items: this.queryList,
+            // iconCss: "e-btn-icon e-icons e-assistview-icon e-icon-left",
+            select: (args) => this.aiQuerySelectedMenu(args),
+        });
+        aiassistantButton.appendTo("#ai_assistant_button_tbar");
+    }
+    onSelect(args) {
+        if (this.rteObj.formatter.getUndoRedoStack().length === 0) {
+            this.rteObj.formatter.saveData();
+        }
+        let nodes = this.editorManager.domNode.blockNodes();
+        for (let i = 0; nodes.length > i; i++) {
+            nodes[i].style.lineHeight = args.item.text;
+        }
+        this.rteObj.formatter.saveData();
+        this.rteObj.formatter.enableUndo(this.rteObj);
+    }
+    aiQuerySelectedMenu(args) {
+        this.dialogueOpen(args.item.text);
+    }
+    dialogueOpen(selectedQuery) {
+        var selectionText = this.rteObj.getSelectedHtml();
+        this.selectedQuery = selectedQuery;
+        if (selectionText) {
+            let range = this.rteObj.formatter.editorManager.nodeSelection.getRange(this.rteObj.contentModule.getDocument());
+            this.rteObj.formatter.editorManager.nodeSelection.save(range, this.rteObj.contentModule.getDocument());
+            this.dropValIndex = this.queryList.findIndex((q) => q.text.toLowerCase() === selectedQuery.toLowerCase());
+            this.queryCategory.index = this.dropValIndex;
+            this.leftRte.value = this.promptQuery = selectionText;
+            this.leftRte.refreshUI();
+            this.AIdialog.show();
+            this.updateAISugesstionsData(selectedQuery);
+        }
+        else {
+            this.showMsg = true;
+            setTimeout(() => {
+                this.showMsg = false;
+            }, 3000);
+            console.log("Please select the content to perform the AI operation.");
+        }
+    }
+    updateAISugesstionsData(selectedQuery) {
+        this.isSentimentCheck = false;
+        switch (selectedQuery) {
+            case "Summarize":
+                this.subQuery = "Summarize the upcoming sentence shortly.";
+                break;
+            case "Elaborate":
+                this.subQuery = "Elaborate on the upcoming sentence.";
+                break;
+            case "Rephrase":
+                this.subQuery = this.chipValue + " rephrase the upcoming sentence.";
+                break;
+            case "Correct Grammar":
+                this.subQuery = "Correct the grammar of the upcoming sentence.";
+                break;
+            case "Translate":
+                this.subQuery =
+                    "Translate the upcoming sentence to " + this.translatelanguage + ".";
+                break;
+            case "Sentiment Analysis":
+                this.isSentimentCheck = true;
+                this.subQuery =
+                    'Analyze the sentiment and grammar of the following paragraphs and provide the expression score with an emoji followed by the sentiment in the format: "😊 Neutral". \n\nNOTE: Avoid any additional text or explanation:';
+                break;
+        }
+        this.updateAISugesstions();
+    }
+    updateAISugesstions() {
+        try {
+            if (this.promptQuery) {
+                document.getElementById("skeletonId").style.display =
+                    "";
+                document.getElementById("rightRte").style.display =
+                    "none";
+                this.sentimentButton.element.style.display = "none";
+                this.regenerateButton.disabled = true;
+                this.copyButton.disabled = true;
+                this.replaceButton.disabled = true;
+                this.apiResultData = this.getResponseFromOpenAI(this.subQuery, this.promptQuery);
+                this.apiResultData.then((result) => {
+                    this.AIResult = this.isSentimentCheck ? this.promptQuery : result;
+                    this.sentimentButton.content = result
+                        .toLowerCase()
+                        .includes("positive")
+                        ? "😊 Positive"
+                        : result.toLowerCase().includes("negative")
+                            ? "😞 Negative"
+                            : "😐 Neutral";
+                    this.sentimentButton.element.style.display = !this.isSentimentCheck
+                        ? "none"
+                        : "";
+                    this.rightRte.value = this.AIResult;
+                    var noResultsFound = !(this.AIResult || this.promptQuery);
+                    document.getElementById("no-results-found").style.display = noResultsFound ? "" : "none";
+                    this.regenerateButton.disabled = noResultsFound;
+                    this.copyButton.disabled = noResultsFound;
+                    this.replaceButton.disabled = noResultsFound;
+                    document.getElementById("skeletonId").style.display =
+                        "none";
+                    document.getElementById("rightRte").style.display =
+                        noResultsFound ? "none" : "";
+                    console.log(noResultsFound, document.getElementById("rightRte").style);
+                    // this.ref.markForCheck();
+                });
+            }
+        }
+        catch {
+            // this.toastObj.show();
+        }
+    }
+    async getResponseFromOpenAI(subQuery, promptQuery) {
+        const content = await OpenAiModelRTE(subQuery, promptQuery);
+        return content ? content : "";
+    }
+    dialogShow() {
+        this.regenerateButton.element.addEventListener("click", () => {
+            this.updateAISugesstions();
+        });
+        this.copyButton.element.addEventListener("click", () => {
+            this.copyTextToClipboard(this.AIResult);
+        });
+        this.replaceButton.element.addEventListener("click", () => {
+            let range = this.rteObj.formatter.editorManager.nodeSelection.getRange(this.rteObj.contentModule.getDocument());
+            this.rteObj.formatter.editorManager.nodeSelection.restore(range);
+            this.rteObj.executeCommand("insertHTML", this.AIResult, {
+                undo: true,
+            });
+            this.closeDialog();
+        });
+        this.AIdialog.element.style.display = "";
+    }
+    closeDialog() {
+        this.AIdialog.hide();
+        this.rightRte.value = "";
+        this.leftRte.value = "";
+        this.promptQuery = "";
+        this.chipValue = "Standard";
+        this.AIResult = "";
+        this.dropValIndex = 0;
+        this.selectedQuery = "Rephrase";
+        this.sentimentButton.content = "😊 Neutral";
+    }
+    copyTextToClipboard(text) {
+        if (navigator.clipboard) {
+            navigator.clipboard
+                .writeText(text)
+                .then(() => {
+                console.log("Text copied to clipboard successfully!");
+            })
+                .catch((err) => {
+                console.error("Failed to copy text: ", err);
+            });
+        }
+        else {
+            // Fallback for browsers that do not support the Clipboard API
+            const textarea = document.createElement("textarea");
+            textarea.value = text;
+            document.body.appendChild(textarea);
+            textarea.select();
+            try {
+                document.execCommand("copy");
+                console.log("Text copied to clipboard using execCommand");
+            }
+            catch (err) {
+                console.error("Failed to copy text: ", err);
+            }
+            finally {
+                document.body.removeChild(textarea);
+            }
+        }
+    }
+    onOverlayClick() {
+        let activeEle = this.AIdialog.element.querySelector(".char_block.e-active");
+        if (activeEle) {
+            activeEle.classList.remove("e-active");
+        }
+        this.closeDialog();
+    }
+    onQuerySelect(args) {
+        // this.chipList.selectedChips = 0;
+        this.translatelanguage = "EN";
+        this.selectedQuery = args.itemData.text;
+        this.updateAISugesstionsData(args.itemData.text);
+    }
+    onLanguageSelect(args) {
+        this.translatelanguage = args.itemData.id;
+        this.updateAISugesstionsData("Translate");
+    }
+    onChipClick(args) {
+        this.chipValue = args.itemData.text;
+        // 事件会触发两次 必须判断args.text是否有值
+        if (args.itemData.text)
+            this.updateAISugesstionsData("Rephrase");
+    }
+    _toolbarClick(args) {
+        this.toolbarClick.emit(args);
+    }
+    hideToast() {
+        this.showMsg = false;
+    }
+    onZoom() {
+        if (this.size === "largest") {
+            this.size = ""; // 恢复到原始大小
+        }
+        else {
+            this.size = "largest"; // 设置为最大化
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichtexteditorComponent, deps: [{ token: i1$5.DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RichtexteditorComponent, selector: "rs-richtext-editor", inputs: { placeholder: "placeholder", value: "value", height: "height", autoSaveOnIdle: "autoSaveOnIdle", target: "target" }, outputs: { toolbarClick: "toolbarClick", change: "change" }, viewQueries: [{ propertyName: "rteObj", first: true, predicate: ["editor"], descendants: true }, { propertyName: "queryCategory", first: true, predicate: ["queryCategory"], descendants: true }, { propertyName: "leftRte", first: true, predicate: ["leftRte"], descendants: true }, { propertyName: "rightRte", first: true, predicate: ["rightRte"], descendants: true }, { propertyName: "AIdialog", first: true, predicate: ["AIdialog"], descendants: true, static: true }, { propertyName: "sentimentButton", first: true, predicate: ["sentimentButton"], descendants: true }, { propertyName: "regenerateButton", first: true, predicate: ["regenerateButton"], descendants: true }, { propertyName: "copyButton", first: true, predicate: ["copyButton"], descendants: true }, { propertyName: "replaceButton", first: true, predicate: ["replaceButton"], descendants: true }], ngImport: i0, template: "<div class=\"editor_box\" id=\"container\">\r\n  <ejs-richtexteditor\r\n    #editor\r\n    id=\"editor\"\r\n    [height]=\"height\"\r\n    [saveInterval]=\"0\"\r\n    [autoSaveOnIdle]=\"autoSaveOnIdle\"\r\n    [toolbarSettings]=\"tools\"\r\n    [fontFamily]=\"family\"\r\n    [insertImageSettings]=\"insertImageSettings\"\r\n    [(value)]=\"value\"\r\n    (change)=\"onContentChange($event)\"\r\n    (created)=\"onCreate()\"\r\n    (toolbarClick)=\"_toolbarClick($event)\"\r\n  >\r\n  </ejs-richtexteditor>\r\n  <ejs-dialog\r\n    #AIdialog\r\n    id=\"AIdialog\"\r\n    [ngClass]=\"size\"\r\n    [visible]=\"false\"\r\n    [target]=\"target\"\r\n    [isModal]=\"true\"\r\n    [height]=\"dialogHeight\"\r\n    [width]=\"dialogWidth\"\r\n    maxHeight=\"80%\"\r\n    cssClass=\"e-rte-elements custom-dialog-rte\"\r\n    zIndex=\"1000\"\r\n    (close)=\"closeDialog()\"\r\n    (overlayClick)=\"onOverlayClick()\"\r\n    (open)=\"dialogShow()\"\r\n  >\r\n    <ng-template #header>\r\n      <div class=\"header-title\">AI Assist</div>\r\n      <div class=\"header-buttons\">\r\n        <div *ngIf=\"showZoomBtn\" class=\"header-zoom\" (click)=\"onZoom()\">\r\n          <img\r\n            class=\"header-icon\"\r\n            *ngIf=\"size === 'largest'\"\r\n            src=\"../../../assets/img/dialog-shrink.svg\"\r\n          />\r\n          <img\r\n            class=\"header-icon\"\r\n            *ngIf=\"size !== 'largest'\"\r\n            src=\"../../../assets/img/dialog-grow.svg\"\r\n          />\r\n        </div>\r\n        <div class=\"header-btn\" (click)=\"closeDialog()\">\r\n          <img class=\"header-icon\" src=\"../../../assets/img/dialog-close.svg\" />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #footerTemplate>\r\n      <div id=\"dialog-footer-content\">\r\n        <div class=\"custom-row-0\">\r\n          <div\r\n            class=\"cuscol-0\"\r\n            style=\"width: 100%; align-items: center; justify-content: left\"\r\n          ></div>\r\n          <div\r\n            class=\"cuscol-1\"\r\n            style=\"\r\n              display: flex;\r\n              flex-direction: column;\r\n              justify-content: center;\r\n              align-items: center;\r\n              width: 100%;\r\n            \"\r\n          >\r\n            <div style=\"text-align: right; width: 100%\">\r\n              <button\r\n                ejs-button\r\n                #sentimentButton\r\n                content=\"\uD83D\uDE0A Neutral\"\r\n                disabled=\"false\"\r\n                cssClass=\"sentiment\"\r\n              ></button>\r\n              <button\r\n                ejs-button\r\n                #copyButton\r\n                content=\"Copy\"\r\n                disabled=\"false\"\r\n                class=\"copy-btn\"\r\n              ></button>\r\n              <button\r\n                ejs-button\r\n                #replaceButton\r\n                content=\"Replace\"\r\n                isPrimary=\"true\"\r\n                disabled=\"false\"\r\n              ></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #content>\r\n      <div class=\"dialog-content\" style=\"height: 100%\">\r\n        <div class=\"custom-row-0\">\r\n          <div class=\"cuscol-0\" style=\"width: 100%\">\r\n            <ejs-dropdownlist\r\n              #queryCategory\r\n              style=\"width: 200px\"\r\n              id=\"queryCategory\"\r\n              [dataSource]=\"queryList\"\r\n              index=\"0\"\r\n              [fields]=\"{ text: 'text', value: 'id' }\"\r\n              (select)=\"onQuerySelect($event)\"\r\n            >\r\n              Rephrase\r\n            </ejs-dropdownlist>\r\n            <ejs-dropdownlist\r\n              *ngIf=\"selectedQuery == 'Rephrase'\"\r\n              id=\"chips-container\"\r\n              #chipList\r\n              style=\"width: 160px\"\r\n              [(ngModel)]=\"chipValue\"\r\n              [dataSource]=\"rephraseTyleList\"\r\n              [fields]=\"{ text: 'text', value: 'id' }\"\r\n              (select)=\"onChipClick($event)\"\r\n            >\r\n            </ejs-dropdownlist>\r\n            <ejs-dropdownlist\r\n              *ngIf=\"selectedQuery == 'Translate'\"\r\n              #languageCategory\r\n              index=\"0\"\r\n              id=\"language-Category\"\r\n              [dataSource]=\"languageList\"\r\n              [fields]=\"{ text: 'text', value: 'id' }\"\r\n              (select)=\"onLanguageSelect($event)\"\r\n            >\r\n            </ejs-dropdownlist>\r\n          </div>\r\n          <div\r\n            class=\"cuscol-1\"\r\n            style=\"\r\n              justify-content: space-between;\r\n              align-items: center;\r\n              width: 100%;\r\n            \"\r\n          >\r\n            <!-- <ejs-chiplist\r\n              id=\"chips-container\"\r\n              #chipList\r\n              [chips]=\"['Standard', 'Fluent', 'Professional']\"\r\n              selection=\"Single\"\r\n              cssClass=\"e-outline\"\r\n              [selectedChips]=\"[0]\"\r\n              (click)=\"onChipClick($event)\"\r\n            >\r\n            </ejs-chiplist> -->\r\n            <button\r\n              ejs-button\r\n              #regenerateButton\r\n              content=\"Regenerate\"\r\n              isPrimary=\"true\"\r\n              disabled=\"false\"\r\n            ></button>\r\n          </div>\r\n        </div>\r\n        <div class=\"custom-row-1\" style=\"height: calc(100% - 40px)\">\r\n          <div\r\n            class=\"cuscol-0\"\r\n            style=\"\r\n              width: 100%;\r\n              height: 100%;\r\n              align-items: center;\r\n              justify-content: left;\r\n            \"\r\n          >\r\n            <div style=\"text-align: left; height: 100%\">\r\n              <ejs-richtexteditor\r\n                #leftRte\r\n                id=\"leftRte\"\r\n                height=\"100%\"\r\n                [toolbarSettings]=\"{ enable: false }\"\r\n                placeholder=\"Analysis of AI Support\"\r\n                cssClass=\"e-outline\"\r\n              >\r\n              </ejs-richtexteditor>\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"cuscol-1\"\r\n            style=\"\r\n              display: flex;\r\n              justify-content: space-between;\r\n              width: 100%;\r\n              height: 100%;\r\n            \"\r\n          >\r\n            <div style=\"text-align: left; width: 100%; height: 100%\">\r\n              <ejs-richtexteditor\r\n                #rightRte\r\n                id=\"rightRte\"\r\n                height=\"100%\"\r\n                [toolbarSettings]=\"{ enable: false }\"\r\n                placeholder=\"Analysis of AI Support\"\r\n                cssClass=\"e-outline\"\r\n              >\r\n                <!-- style=\"display: none\" -->\r\n              </ejs-richtexteditor>\r\n              <div\r\n                class=\"no-results-found\"\r\n                id=\"no-results-found\"\r\n                style=\"display: none; height: 244px; align-content: center\"\r\n              >\r\n                <img\r\n                  height=\"50\"\r\n                  width=\"50\"\r\n                  src=\"https://storage.googleapis.com/cdn-bolddesk/agent-angular-app/images/light/no-records-warning.svg\"\r\n                />\r\n                <div>No results found</div>\r\n              </div>\r\n              <div id=\"skeletonId\" style=\"display: none\">\r\n                <ejs-skeleton\r\n                  #skeletonId1\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"100%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId2\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"90%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId3\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"70%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId4\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"50%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId5\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"30%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId6\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"10%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </ejs-dialog>\r\n  <div class=\"toast\" *ngIf=\"showMsg\">\r\n    <span class=\"toast_text\">First, Select some text</span\r\n    ><span class=\"close_icon\" (click)=\"hideToast()\"></span>\r\n  </div>\r\n</div>\r\n", styles: [".editor_box{position:relative;width:100%;height:100%}.editor_box .toast{position:absolute;left:35%;top:110px;z-index:1;width:400px;border-radius:4px;border:1px solid #e8f2ff;background:#f4f8ff;padding:4px 12px;color:#1f3f5c;font-size:12px;font-style:normal;font-weight:400;height:32px;font-family:Arial;display:flex;align-items:center;justify-content:space-between}.editor_box .toast .toast_text:before{content:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2217%22 viewBox%3D%220 0 16 17%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Ccircle cx%3D%228%22 cy%3D%228.5%22 r%3D%226.5%22 stroke%3D%22%236B6B6B%22%2F%3E%0D%3Cpath d%3D%22M8 8.5V11.5%22 stroke%3D%22%236B6B6B%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22%2F%3E%0D%3Ccircle cx%3D%228%22 cy%3D%225.5%22 r%3D%221%22 fill%3D%22%236B6B6B%22%2F%3E%0D%3C%2Fsvg%3E%0D\");display:inline-block;width:16px;height:16px;vertical-align:bottom;margin-right:8px}.editor_box .toast .close_icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M3.50021 12.9999L12.5001 4.00007%22 stroke%3D%22%236C7C90%22 stroke-linecap%3D%22round%22%2F%3E%0D%3Cpath d%3D%22M12.4999 12.9999L3.50007 4.00007%22 stroke%3D%22%236C7C90%22 stroke-linecap%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E%0D\");cursor:pointer;display:inline-block;width:16px;height:16px}.custom-dialog-rte{padding:0 20px;border-radius:10px}.custom-row-0,.custom-row-1,.custom-row-2{display:flex;align-items:center;padding:12px 24px}.e-rte-dropdown-btn-text{padding-left:4px}.no-results-found{text-align:center}.no-results-found img{display:block;margin:0 auto}.e-custom{margin-right:.5rem;border-radius:25px!important}.custom-dialog-rte .skeleton-rectangle{border-radius:4px}@media (max-width: 767px){.cuscol-0,.cuscol-1,.cuscol-2{justify-content:center!important}.custom-row-0,.custom-row-1,.custom-row-2{flex-direction:column!important}.cuscol-1{border-right:none!important}.cuscol-0{width:100%;align-items:center}::ng-deep:host .e-dialog{max-height:80%!important}.custom-dialog-rte .e-dialog .e-dlg-content{overflow-y:auto!important}.custom-dialog-rte .e-dialog .e-dlg-content .e-richtexteditor{height:100px!important}.cuscol-noresult{padding-bottom:20px!important}.e-chip-list{padding:5px!important}.cuscol{padding-right:.2rem!important;width:auto!important}.custom-row-1{height:auto!important}}.cuscol-1{display:flex;flex-direction:row!important}.cuscol-2{display:flex;flex-direction:column!important}.sentiment{color:#000!important}.custom-dialog-rte .e-dialog .e-dlg-content{padding:0!important;overflow-y:hidden}.custom-dialog-rte .e-dialog .e-dlg-header-content{padding:20px 0!important;border:0!important}.custom-dialog-rte .e-dialog .e-dlg-header-content .e-dlg-header{display:flex;align-items:center;line-height:18px;justify-content:space-between}.custom-dialog-rte .e-dialog .e-dlg-header-content .e-dlg-header .header-title{font-family:Arial;font-size:15px;font-weight:700;font-style:normal}.custom-dialog-rte .e-dialog .e-dlg-header-content .header-buttons{display:flex}.custom-dialog-rte .e-dialog .e-dlg-header-content .header-buttons img{width:16px;height:16px;cursor:pointer;padding:2px;margin-left:12px}.custom-dialog-rte .e-dialog .e-footer-content{padding:0!important}.custom-dialog-rte .e-dialog .e-dlg-content .e-richtexteditor.e-rte-tb-expand .e-rte-content,.e-richtexteditor.e-rte-tb-expand .e-source-content{border:0;border-bottom:1px solid #dee2e6;border-top:0px solid #dee2e6!important}.custom-dialog-rte .dialog-content .custom-row-0{border-top:0px solid #ddd!important;padding:0;margin-bottom:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-0{justify-content:left;border-right:none!important;padding:0;display:flex;gap:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-1{padding:0;margin-left:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-1 .e-primary{color:#44566c;border-radius:4px;border:1px solid #dbe1e7;background:#fff;width:87px;margin:0;padding:2px 12px;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;height:28px}.custom-dialog-rte .dialog-content .custom-row-1{padding:0;height:calc(100% - 40px);gap:12px}.custom-dialog-rte .e-footer-content{border:0}.custom-dialog-rte .e-footer-content .custom-row-0{padding:20px 0}.custom-dialog-rte .e-footer-content .e-control.e-btn{font-family:Arial;font-size:12px;line-height:14px;padding:2px 12px;height:28px;background:#fff;color:#44566c}.custom-dialog-rte .e-footer-content .e-control.e-btn.copy-btn{border-color:#dbe1e7}.custom-dialog-rte .e-footer-content .e-control.e-btn.copy-btn:before{content:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2216%22 height%3D%2216%22 fill%3D%22white%22%2F%3E%3Crect x%3D%224.5%22 y%3D%224.5%22 width%3D%229%22 height%3D%229%22 rx%3D%221.5%22 stroke%3D%22%236C7C90%22%2F%3E%3Cpath d%3D%22M11.5 2.5H4.5C3.39543 2.5 2.5 3.39543 2.5 4.5V11.5%22 stroke%3D%22%236C7C90%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");vertical-align:middle;margin-right:6px}.custom-dialog-rte .e-footer-content .e-control.e-btn.e-primary{color:#fff;background:#1364b3}.editor_box .e-dialog.largest{width:96vw!important;height:88vh!important;max-height:88vh;max-width:2100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "[ejs-button]", inputs: ["content", "cssClass", "disabled", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "iconCss", "iconPosition", "isPrimary", "isToggle", "locale"], outputs: ["created"] }, { kind: "component", type: i5$1.DialogComponent, selector: "ejs-dialog", inputs: ["allowDragging", "animationSettings", "buttons", "closeOnEscape", "content", "cssClass", "enableHtmlSanitizer", "enablePersistence", "enableResize", "enableRtl", "footerTemplate", "header", "height", "isModal", "locale", "minHeight", "position", "resizeHandles", "showCloseIcon", "target", "visible", "width", "zIndex"], outputs: ["beforeClose", "beforeOpen", "beforeSanitizeHtml", "close", "created", "destroyed", "drag", "dragStart", "dragStop", "open", "overlayClick", "resizeStart", "resizeStop", "resizing", "visibleChange"] }, { kind: "component", type: i6.DropDownListComponent, selector: "ejs-dropdownlist", inputs: ["actionFailureTemplate", "allowFiltering", "allowObjectBinding", "cssClass", "dataSource", "enablePersistence", "enableRtl", "enableVirtualization", "enabled", "fields", "filterBarPlaceholder", "filterType", "floatLabelType", "footerTemplate", "groupTemplate", "headerTemplate", "htmlAttributes", "ignoreAccent", "ignoreCase", "index", "isDeviceFullScreen", "itemTemplate", "locale", "noRecordsTemplate", "placeholder", "popupHeight", "popupWidth", "query", "readonly", "showClearButton", "sortOrder", "text", "value", "valueTemplate", "width", "zIndex"], outputs: ["actionBegin", "actionComplete", "actionFailure", "beforeOpen", "blur", "change", "close", "created", "dataBound", "destroyed", "filtering", "focus", "open", "select", "valueChange"] }, { kind: "component", type: i7.RichTextEditorComponent, selector: "ejs-richtexteditor", inputs: ["autoSaveOnIdle", "backgroundColor", "bulletFormatList", "cssClass", "editorMode", "emojiPickerSettings", "enableAutoUrl", "enableHtmlEncode", "enableHtmlSanitizer", "enablePersistence", "enableResize", "enableRtl", "enableTabKey", "enableXhtml", "enabled", "enterKey", "exportPdf", "exportWord", "fileManagerSettings", "floatingToolbarOffset", "fontColor", "fontFamily", "fontSize", "format", "formatPainterSettings", "formatter", "height", "htmlAttributes", "iframeSettings", "importWord", "inlineMode", "insertAudioSettings", "insertImageSettings", "insertVideoSettings", "keyConfig", "locale", "maxLength", "numberFormatList", "pasteCleanupSettings", "placeholder", "quickToolbarSettings", "readonly", "saveInterval", "shiftEnterKey", "showCharCount", "showTooltip", "slashMenuSettings", "tableSettings", "toolbarSettings", "undoRedoSteps", "undoRedoTimer", "value", "valueTemplate", "width"], outputs: ["actionBegin", "actionComplete", "afterImageDelete", "afterMediaDelete", "afterPasteCleanup", "beforeDialogClose", "beforeDialogOpen", "beforeFileUpload", "beforeImageDrop", "beforeImageUpload", "beforePasteCleanup", "beforeQuickToolbarOpen", "beforeSanitizeHtml", "blur", "change", "created", "destroyed", "dialogClose", "dialogOpen", "fileRemoving", "fileSelected", "fileUploadFailed", "fileUploadSuccess", "fileUploading", "focus", "imageRemoving", "imageSelected", "imageUploadFailed", "imageUploadSuccess", "imageUploading", "quickToolbarClose", "quickToolbarOpen", "resizeStart", "resizeStop", "resizing", "slashMenuItemSelect", "toolbarClick", "toolbarStatusUpdate", "updatedToolbarStatus", "valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichtexteditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rs-richtext-editor", template: "<div class=\"editor_box\" id=\"container\">\r\n  <ejs-richtexteditor\r\n    #editor\r\n    id=\"editor\"\r\n    [height]=\"height\"\r\n    [saveInterval]=\"0\"\r\n    [autoSaveOnIdle]=\"autoSaveOnIdle\"\r\n    [toolbarSettings]=\"tools\"\r\n    [fontFamily]=\"family\"\r\n    [insertImageSettings]=\"insertImageSettings\"\r\n    [(value)]=\"value\"\r\n    (change)=\"onContentChange($event)\"\r\n    (created)=\"onCreate()\"\r\n    (toolbarClick)=\"_toolbarClick($event)\"\r\n  >\r\n  </ejs-richtexteditor>\r\n  <ejs-dialog\r\n    #AIdialog\r\n    id=\"AIdialog\"\r\n    [ngClass]=\"size\"\r\n    [visible]=\"false\"\r\n    [target]=\"target\"\r\n    [isModal]=\"true\"\r\n    [height]=\"dialogHeight\"\r\n    [width]=\"dialogWidth\"\r\n    maxHeight=\"80%\"\r\n    cssClass=\"e-rte-elements custom-dialog-rte\"\r\n    zIndex=\"1000\"\r\n    (close)=\"closeDialog()\"\r\n    (overlayClick)=\"onOverlayClick()\"\r\n    (open)=\"dialogShow()\"\r\n  >\r\n    <ng-template #header>\r\n      <div class=\"header-title\">AI Assist</div>\r\n      <div class=\"header-buttons\">\r\n        <div *ngIf=\"showZoomBtn\" class=\"header-zoom\" (click)=\"onZoom()\">\r\n          <img\r\n            class=\"header-icon\"\r\n            *ngIf=\"size === 'largest'\"\r\n            src=\"../../../assets/img/dialog-shrink.svg\"\r\n          />\r\n          <img\r\n            class=\"header-icon\"\r\n            *ngIf=\"size !== 'largest'\"\r\n            src=\"../../../assets/img/dialog-grow.svg\"\r\n          />\r\n        </div>\r\n        <div class=\"header-btn\" (click)=\"closeDialog()\">\r\n          <img class=\"header-icon\" src=\"../../../assets/img/dialog-close.svg\" />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #footerTemplate>\r\n      <div id=\"dialog-footer-content\">\r\n        <div class=\"custom-row-0\">\r\n          <div\r\n            class=\"cuscol-0\"\r\n            style=\"width: 100%; align-items: center; justify-content: left\"\r\n          ></div>\r\n          <div\r\n            class=\"cuscol-1\"\r\n            style=\"\r\n              display: flex;\r\n              flex-direction: column;\r\n              justify-content: center;\r\n              align-items: center;\r\n              width: 100%;\r\n            \"\r\n          >\r\n            <div style=\"text-align: right; width: 100%\">\r\n              <button\r\n                ejs-button\r\n                #sentimentButton\r\n                content=\"\uD83D\uDE0A Neutral\"\r\n                disabled=\"false\"\r\n                cssClass=\"sentiment\"\r\n              ></button>\r\n              <button\r\n                ejs-button\r\n                #copyButton\r\n                content=\"Copy\"\r\n                disabled=\"false\"\r\n                class=\"copy-btn\"\r\n              ></button>\r\n              <button\r\n                ejs-button\r\n                #replaceButton\r\n                content=\"Replace\"\r\n                isPrimary=\"true\"\r\n                disabled=\"false\"\r\n              ></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #content>\r\n      <div class=\"dialog-content\" style=\"height: 100%\">\r\n        <div class=\"custom-row-0\">\r\n          <div class=\"cuscol-0\" style=\"width: 100%\">\r\n            <ejs-dropdownlist\r\n              #queryCategory\r\n              style=\"width: 200px\"\r\n              id=\"queryCategory\"\r\n              [dataSource]=\"queryList\"\r\n              index=\"0\"\r\n              [fields]=\"{ text: 'text', value: 'id' }\"\r\n              (select)=\"onQuerySelect($event)\"\r\n            >\r\n              Rephrase\r\n            </ejs-dropdownlist>\r\n            <ejs-dropdownlist\r\n              *ngIf=\"selectedQuery == 'Rephrase'\"\r\n              id=\"chips-container\"\r\n              #chipList\r\n              style=\"width: 160px\"\r\n              [(ngModel)]=\"chipValue\"\r\n              [dataSource]=\"rephraseTyleList\"\r\n              [fields]=\"{ text: 'text', value: 'id' }\"\r\n              (select)=\"onChipClick($event)\"\r\n            >\r\n            </ejs-dropdownlist>\r\n            <ejs-dropdownlist\r\n              *ngIf=\"selectedQuery == 'Translate'\"\r\n              #languageCategory\r\n              index=\"0\"\r\n              id=\"language-Category\"\r\n              [dataSource]=\"languageList\"\r\n              [fields]=\"{ text: 'text', value: 'id' }\"\r\n              (select)=\"onLanguageSelect($event)\"\r\n            >\r\n            </ejs-dropdownlist>\r\n          </div>\r\n          <div\r\n            class=\"cuscol-1\"\r\n            style=\"\r\n              justify-content: space-between;\r\n              align-items: center;\r\n              width: 100%;\r\n            \"\r\n          >\r\n            <!-- <ejs-chiplist\r\n              id=\"chips-container\"\r\n              #chipList\r\n              [chips]=\"['Standard', 'Fluent', 'Professional']\"\r\n              selection=\"Single\"\r\n              cssClass=\"e-outline\"\r\n              [selectedChips]=\"[0]\"\r\n              (click)=\"onChipClick($event)\"\r\n            >\r\n            </ejs-chiplist> -->\r\n            <button\r\n              ejs-button\r\n              #regenerateButton\r\n              content=\"Regenerate\"\r\n              isPrimary=\"true\"\r\n              disabled=\"false\"\r\n            ></button>\r\n          </div>\r\n        </div>\r\n        <div class=\"custom-row-1\" style=\"height: calc(100% - 40px)\">\r\n          <div\r\n            class=\"cuscol-0\"\r\n            style=\"\r\n              width: 100%;\r\n              height: 100%;\r\n              align-items: center;\r\n              justify-content: left;\r\n            \"\r\n          >\r\n            <div style=\"text-align: left; height: 100%\">\r\n              <ejs-richtexteditor\r\n                #leftRte\r\n                id=\"leftRte\"\r\n                height=\"100%\"\r\n                [toolbarSettings]=\"{ enable: false }\"\r\n                placeholder=\"Analysis of AI Support\"\r\n                cssClass=\"e-outline\"\r\n              >\r\n              </ejs-richtexteditor>\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"cuscol-1\"\r\n            style=\"\r\n              display: flex;\r\n              justify-content: space-between;\r\n              width: 100%;\r\n              height: 100%;\r\n            \"\r\n          >\r\n            <div style=\"text-align: left; width: 100%; height: 100%\">\r\n              <ejs-richtexteditor\r\n                #rightRte\r\n                id=\"rightRte\"\r\n                height=\"100%\"\r\n                [toolbarSettings]=\"{ enable: false }\"\r\n                placeholder=\"Analysis of AI Support\"\r\n                cssClass=\"e-outline\"\r\n              >\r\n                <!-- style=\"display: none\" -->\r\n              </ejs-richtexteditor>\r\n              <div\r\n                class=\"no-results-found\"\r\n                id=\"no-results-found\"\r\n                style=\"display: none; height: 244px; align-content: center\"\r\n              >\r\n                <img\r\n                  height=\"50\"\r\n                  width=\"50\"\r\n                  src=\"https://storage.googleapis.com/cdn-bolddesk/agent-angular-app/images/light/no-records-warning.svg\"\r\n                />\r\n                <div>No results found</div>\r\n              </div>\r\n              <div id=\"skeletonId\" style=\"display: none\">\r\n                <ejs-skeleton\r\n                  #skeletonId1\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"100%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId2\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"90%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId3\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"70%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId4\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"50%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId5\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"30%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n                <ejs-skeleton\r\n                  #skeletonId6\r\n                  shape=\"Rectangle\"\r\n                  height=\"20px\"\r\n                  width=\"10%\"\r\n                ></ejs-skeleton\r\n                ><br />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </ejs-dialog>\r\n  <div class=\"toast\" *ngIf=\"showMsg\">\r\n    <span class=\"toast_text\">First, Select some text</span\r\n    ><span class=\"close_icon\" (click)=\"hideToast()\"></span>\r\n  </div>\r\n</div>\r\n", styles: [".editor_box{position:relative;width:100%;height:100%}.editor_box .toast{position:absolute;left:35%;top:110px;z-index:1;width:400px;border-radius:4px;border:1px solid #e8f2ff;background:#f4f8ff;padding:4px 12px;color:#1f3f5c;font-size:12px;font-style:normal;font-weight:400;height:32px;font-family:Arial;display:flex;align-items:center;justify-content:space-between}.editor_box .toast .toast_text:before{content:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2217%22 viewBox%3D%220 0 16 17%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Ccircle cx%3D%228%22 cy%3D%228.5%22 r%3D%226.5%22 stroke%3D%22%236B6B6B%22%2F%3E%0D%3Cpath d%3D%22M8 8.5V11.5%22 stroke%3D%22%236B6B6B%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22%2F%3E%0D%3Ccircle cx%3D%228%22 cy%3D%225.5%22 r%3D%221%22 fill%3D%22%236B6B6B%22%2F%3E%0D%3C%2Fsvg%3E%0D\");display:inline-block;width:16px;height:16px;vertical-align:bottom;margin-right:8px}.editor_box .toast .close_icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M3.50021 12.9999L12.5001 4.00007%22 stroke%3D%22%236C7C90%22 stroke-linecap%3D%22round%22%2F%3E%0D%3Cpath d%3D%22M12.4999 12.9999L3.50007 4.00007%22 stroke%3D%22%236C7C90%22 stroke-linecap%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E%0D\");cursor:pointer;display:inline-block;width:16px;height:16px}.custom-dialog-rte{padding:0 20px;border-radius:10px}.custom-row-0,.custom-row-1,.custom-row-2{display:flex;align-items:center;padding:12px 24px}.e-rte-dropdown-btn-text{padding-left:4px}.no-results-found{text-align:center}.no-results-found img{display:block;margin:0 auto}.e-custom{margin-right:.5rem;border-radius:25px!important}.custom-dialog-rte .skeleton-rectangle{border-radius:4px}@media (max-width: 767px){.cuscol-0,.cuscol-1,.cuscol-2{justify-content:center!important}.custom-row-0,.custom-row-1,.custom-row-2{flex-direction:column!important}.cuscol-1{border-right:none!important}.cuscol-0{width:100%;align-items:center}::ng-deep:host .e-dialog{max-height:80%!important}.custom-dialog-rte .e-dialog .e-dlg-content{overflow-y:auto!important}.custom-dialog-rte .e-dialog .e-dlg-content .e-richtexteditor{height:100px!important}.cuscol-noresult{padding-bottom:20px!important}.e-chip-list{padding:5px!important}.cuscol{padding-right:.2rem!important;width:auto!important}.custom-row-1{height:auto!important}}.cuscol-1{display:flex;flex-direction:row!important}.cuscol-2{display:flex;flex-direction:column!important}.sentiment{color:#000!important}.custom-dialog-rte .e-dialog .e-dlg-content{padding:0!important;overflow-y:hidden}.custom-dialog-rte .e-dialog .e-dlg-header-content{padding:20px 0!important;border:0!important}.custom-dialog-rte .e-dialog .e-dlg-header-content .e-dlg-header{display:flex;align-items:center;line-height:18px;justify-content:space-between}.custom-dialog-rte .e-dialog .e-dlg-header-content .e-dlg-header .header-title{font-family:Arial;font-size:15px;font-weight:700;font-style:normal}.custom-dialog-rte .e-dialog .e-dlg-header-content .header-buttons{display:flex}.custom-dialog-rte .e-dialog .e-dlg-header-content .header-buttons img{width:16px;height:16px;cursor:pointer;padding:2px;margin-left:12px}.custom-dialog-rte .e-dialog .e-footer-content{padding:0!important}.custom-dialog-rte .e-dialog .e-dlg-content .e-richtexteditor.e-rte-tb-expand .e-rte-content,.e-richtexteditor.e-rte-tb-expand .e-source-content{border:0;border-bottom:1px solid #dee2e6;border-top:0px solid #dee2e6!important}.custom-dialog-rte .dialog-content .custom-row-0{border-top:0px solid #ddd!important;padding:0;margin-bottom:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-0{justify-content:left;border-right:none!important;padding:0;display:flex;gap:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-1{padding:0;margin-left:12px}.custom-dialog-rte .dialog-content .custom-row-0 .cuscol-1 .e-primary{color:#44566c;border-radius:4px;border:1px solid #dbe1e7;background:#fff;width:87px;margin:0;padding:2px 12px;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px;height:28px}.custom-dialog-rte .dialog-content .custom-row-1{padding:0;height:calc(100% - 40px);gap:12px}.custom-dialog-rte .e-footer-content{border:0}.custom-dialog-rte .e-footer-content .custom-row-0{padding:20px 0}.custom-dialog-rte .e-footer-content .e-control.e-btn{font-family:Arial;font-size:12px;line-height:14px;padding:2px 12px;height:28px;background:#fff;color:#44566c}.custom-dialog-rte .e-footer-content .e-control.e-btn.copy-btn{border-color:#dbe1e7}.custom-dialog-rte .e-footer-content .e-control.e-btn.copy-btn:before{content:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2216%22 height%3D%2216%22 fill%3D%22white%22%2F%3E%3Crect x%3D%224.5%22 y%3D%224.5%22 width%3D%229%22 height%3D%229%22 rx%3D%221.5%22 stroke%3D%22%236C7C90%22%2F%3E%3Cpath d%3D%22M11.5 2.5H4.5C3.39543 2.5 2.5 3.39543 2.5 4.5V11.5%22 stroke%3D%22%236C7C90%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");vertical-align:middle;margin-right:6px}.custom-dialog-rte .e-footer-content .e-control.e-btn.e-primary{color:#fff;background:#1364b3}.editor_box .e-dialog.largest{width:96vw!important;height:88vh!important;max-height:88vh;max-width:2100px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$5.DialogService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { rteObj: [{
+                type: ViewChild,
+                args: ["editor", { static: false }]
+            }], queryCategory: [{
+                type: ViewChild,
+                args: ["queryCategory", { static: false }]
+            }], leftRte: [{
+                type: ViewChild,
+                args: ["leftRte", { static: false }]
+            }], rightRte: [{
+                type: ViewChild,
+                args: ["rightRte", { static: false }]
+            }], AIdialog: [{
+                type: ViewChild,
+                args: ["AIdialog", { static: true }]
+            }], sentimentButton: [{
+                type: ViewChild,
+                args: ["sentimentButton", { static: false }]
+            }], regenerateButton: [{
+                type: ViewChild,
+                args: ["regenerateButton", { static: false }]
+            }], copyButton: [{
+                type: ViewChild,
+                args: ["copyButton", { static: false }]
+            }], replaceButton: [{
+                type: ViewChild,
+                args: ["replaceButton", { static: false }]
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], autoSaveOnIdle: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], toolbarClick: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }] } });
+
+class ConfirmSelectComponent {
+    comfirmSelect;
+    value;
+    dataSource = [];
+    disabled = false;
+    fields = { text: "Game", value: "Id" };
+    placeholder;
+    showSelectAll = true;
+    valueChange = new EventEmitter();
+    translation;
+    selectedItems = [];
+    isInteracted = false;
+    ngOnInit() {
+        this.getInfo();
+        this.resetSelectedItems();
+    }
+    ngOnChanges(changes) {
+        if (changes.value && !changes.value.firstChange) {
+            this.resetSelectedItems();
+        }
+    }
+    getInfo() {
+        this.translation = JSON.parse(localStorage.getItem("translation"));
+    }
+    resetSelectedItems() {
+        this.selectedItems = JSON.parse(JSON.stringify(this.value || []));
+        if (this.comfirmSelect) {
+            this.comfirmSelect.value = this.selectedItems;
+        }
+    }
+    onCancel() {
+        this.isInteracted = true;
+        this.resetSelectedItems();
+        this.comfirmSelect.hidePopup();
+    }
+    onApply() {
+        this.isInteracted = true;
+        const val = this.comfirmSelect.value;
+        this.valueChange.emit(val);
+        this.comfirmSelect.hidePopup();
+    }
+    onClose(e) {
+        if (this.isInteracted) {
+            this.isInteracted = false;
+        }
+        else {
+            this.resetSelectedItems();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmSelectComponent, selector: "rs-confirm-select", inputs: { value: "value", dataSource: "dataSource", disabled: "disabled", fields: "fields", placeholder: "placeholder", showSelectAll: "showSelectAll" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "comfirmSelect", first: true, predicate: ["comfirmSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rs-confirm-select\">\r\n  <ejs-multiselect\r\n    #comfirmSelect\r\n    [dataSource]=\"dataSource\"\r\n    [showDropDownIcon]=\"true\"\r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"selectedItems\"\r\n    [fields]=\"fields\"\r\n    [showSelectAll]=\"showSelectAll\"\r\n    mode=\"CheckBox\"\r\n    [footerTemplate]=\"footerTemplate\"\r\n    [showClearButton]=\"false\"\r\n    (close)=\"onClose($event)\"\r\n    filterType=\"Contains\"\r\n  >\r\n    <ng-template #footerTemplate=\"\" let-data=\"data\">\r\n      <div class=\"confirm-select-footer\">\r\n        <button class=\"e-btn\" (click)=\"onCancel()\">\r\n          {{ translation.CANCEL }}\r\n        </button>\r\n        <button class=\"e-btn e-primary\" (click)=\"onApply()\">\r\n          {{ translation.APPLY }}\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n  </ejs-multiselect>\r\n</div>\r\n", styles: [".confirm-select-footer{display:flex;align-items:center;justify-content:flex-end;padding:0 12px;gap:12px;height:40px;border-top:solid 1px var(--rs-border-color)}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MultiSelectComponent, selector: "ejs-multiselect", inputs: ["actionFailureTemplate", "addTagOnBlur", "allowCustomValue", "allowFiltering", "allowObjectBinding", "changeOnBlur", "closePopupOnSelect", "cssClass", "dataSource", "delimiterChar", "enableGroupCheckBox", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSelectionOrder", "enableVirtualization", "enabled", "fields", "filterBarPlaceholder", "filterType", "floatLabelType", "footerTemplate", "groupTemplate", "headerTemplate", "hideSelectedItem", "htmlAttributes", "ignoreAccent", "ignoreCase", "isDeviceFullScreen", "itemTemplate", "locale", "maximumSelectionLength", "mode", "noRecordsTemplate", "openOnClick", "placeholder", "popupHeight", "popupWidth", "query", "readonly", "selectAllText", "showClearButton", "showDropDownIcon", "showSelectAll", "sortOrder", "text", "unSelectAllText", "value", "valueTemplate", "width", "zIndex"], outputs: ["actionBegin", "actionComplete", "actionFailure", "beforeOpen", "beforeSelectAll", "blur", "change", "chipSelection", "close", "created", "customValueSelection", "dataBound", "destroyed", "filtering", "focus", "open", "removed", "removing", "select", "selectedAll", "tagging", "valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rs-confirm-select", template: "<div class=\"rs-confirm-select\">\r\n  <ejs-multiselect\r\n    #comfirmSelect\r\n    [dataSource]=\"dataSource\"\r\n    [showDropDownIcon]=\"true\"\r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"selectedItems\"\r\n    [fields]=\"fields\"\r\n    [showSelectAll]=\"showSelectAll\"\r\n    mode=\"CheckBox\"\r\n    [footerTemplate]=\"footerTemplate\"\r\n    [showClearButton]=\"false\"\r\n    (close)=\"onClose($event)\"\r\n    filterType=\"Contains\"\r\n  >\r\n    <ng-template #footerTemplate=\"\" let-data=\"data\">\r\n      <div class=\"confirm-select-footer\">\r\n        <button class=\"e-btn\" (click)=\"onCancel()\">\r\n          {{ translation.CANCEL }}\r\n        </button>\r\n        <button class=\"e-btn e-primary\" (click)=\"onApply()\">\r\n          {{ translation.APPLY }}\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n  </ejs-multiselect>\r\n</div>\r\n", styles: [".confirm-select-footer{display:flex;align-items:center;justify-content:flex-end;padding:0 12px;gap:12px;height:40px;border-top:solid 1px var(--rs-border-color)}\n"] }]
+        }], propDecorators: { comfirmSelect: [{
+                type: ViewChild,
+                args: ["comfirmSelect", { static: false }]
+            }], value: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 class IconLoaderService {
     registry;
     domSanitizer;
@@ -19619,12 +20809,12 @@ class IconLoaderService {
             this.registry.addSvgIcon(name, this.domSanitizer.bypassSecurityTrustResourceUrl(path));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconLoaderService, deps: [{ token: i3$1.MatIconRegistry }, { token: i2$5.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconLoaderService, deps: [{ token: i4.MatIconRegistry }, { token: i2$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconLoaderService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconLoaderService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i3$1.MatIconRegistry }, { type: i2$5.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i4.MatIconRegistry }, { type: i2$6.DomSanitizer }]; } });
 
 const storedRoutes = new Map();
 let toBeDeleteUrl;
@@ -19726,6 +20916,8 @@ class RaiseCommonLibModule {
             CheckboxGroupComponent,
             SwitchInputComponent,
             EncryptedInputComponent,
+            SearchInputComponent,
+            ConfirmSelectComponent,
             NewActionNotificationComponent,
             CommonDialogComponent,
             CommonDeleteComponent,
@@ -19734,10 +20926,13 @@ class RaiseCommonLibModule {
             ToolbarItemComponent,
             RsCommentaryComponent,
             RSNavCardGroupComponent,
-            RSToolbarComponent], imports: [CommonModule,
+            RSToolbarComponent,
+            TruncatedTextToggleComponent,
+            RichtexteditorComponent], imports: [CommonModule,
             HttpClientModule,
             ReactiveFormsModule,
             FormsModule,
+            DragDropModule,
             MatSnackBarModule,
             MatMenuModule,
             MatTooltipModule,
@@ -19775,6 +20970,7 @@ class RaiseCommonLibModule {
             CarouselAllModule,
             ToolbarModule,
             TabModule,
+            TreeViewModule,
             PdfViewerModule,
             DropDownButtonModule,
             SplitButtonModule,
@@ -19782,11 +20978,11 @@ class RaiseCommonLibModule {
             HttpClientModule,
             ReactiveFormsModule,
             FormsModule,
+            DragDropModule,
             MatSnackBarModule,
             MatMenuModule,
             MatTooltipModule,
             MatDialogModule,
-            MatIconModule,
             GridModule,
             PagerModule,
             GridAllModule,
@@ -19819,6 +21015,7 @@ class RaiseCommonLibModule {
             CarouselAllModule,
             ToolbarModule,
             TabModule,
+            TreeViewModule,
             PdfViewerModule,
             DropDownButtonModule,
             SplitButtonModule,
@@ -19840,17 +21037,20 @@ class RaiseCommonLibModule {
             CheckboxGroupComponent,
             SwitchInputComponent,
             EncryptedInputComponent,
+            SearchInputComponent,
+            ConfirmSelectComponent,
             DrawerComponent,
             DrawerFormComponent,
             ToolbarItemComponent,
             RsCommentaryComponent,
             RSNavCardGroupComponent,
             RSToolbarComponent,
-            NewActionNotificationComponent,
+            TruncatedTextToggleComponent,
             CommonDialogComponent,
-            CommonDeleteComponent] });
+            RichtexteditorComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RaiseCommonLibModule, providers: [
             PageService,
+            RowDDService,
             SortService,
             FilterService,
             ExcelExportService,
@@ -19887,6 +21087,7 @@ class RaiseCommonLibModule {
             HttpClientModule,
             ReactiveFormsModule,
             FormsModule,
+            DragDropModule,
             MatSnackBarModule,
             MatMenuModule,
             MatTooltipModule,
@@ -19924,6 +21125,7 @@ class RaiseCommonLibModule {
             CarouselAllModule,
             ToolbarModule,
             TabModule,
+            TreeViewModule,
             PdfViewerModule,
             DropDownButtonModule,
             SplitButtonModule,
@@ -19931,11 +21133,11 @@ class RaiseCommonLibModule {
             HttpClientModule,
             ReactiveFormsModule,
             FormsModule,
+            DragDropModule,
             MatSnackBarModule,
             MatMenuModule,
             MatTooltipModule,
             MatDialogModule,
-            MatIconModule,
             GridModule,
             PagerModule,
             GridAllModule,
@@ -19968,6 +21170,7 @@ class RaiseCommonLibModule {
             CarouselAllModule,
             ToolbarModule,
             TabModule,
+            TreeViewModule,
             PdfViewerModule,
             DropDownButtonModule,
             SplitButtonModule,
@@ -19994,6 +21197,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CheckboxGroupComponent,
                         SwitchInputComponent,
                         EncryptedInputComponent,
+                        SearchInputComponent,
+                        ConfirmSelectComponent,
                         NewActionNotificationComponent,
                         CommonDialogComponent,
                         CommonDeleteComponent,
@@ -20002,13 +21207,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ToolbarItemComponent,
                         RsCommentaryComponent,
                         RSNavCardGroupComponent,
-                        RSToolbarComponent
+                        RSToolbarComponent,
+                        TruncatedTextToggleComponent,
+                        RichtexteditorComponent,
                     ],
                     imports: [
                         CommonModule,
                         HttpClientModule,
                         ReactiveFormsModule,
                         FormsModule,
+                        DragDropModule,
                         MatSnackBarModule,
                         MatMenuModule,
                         MatTooltipModule,
@@ -20046,6 +21254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CarouselAllModule,
                         ToolbarModule,
                         TabModule,
+                        TreeViewModule,
                         PdfViewerModule,
                         DropDownButtonModule,
                         SplitButtonModule,
@@ -20053,6 +21262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ],
                     providers: [
                         PageService,
+                        RowDDService,
                         SortService,
                         FilterService,
                         ExcelExportService,
@@ -20091,11 +21301,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         HttpClientModule,
                         ReactiveFormsModule,
                         FormsModule,
+                        DragDropModule,
                         MatSnackBarModule,
                         MatMenuModule,
                         MatTooltipModule,
                         MatDialogModule,
-                        MatIconModule,
                         GridModule,
                         PagerModule,
                         GridAllModule,
@@ -20128,6 +21338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CarouselAllModule,
                         ToolbarModule,
                         TabModule,
+                        TreeViewModule,
                         PdfViewerModule,
                         DropDownButtonModule,
                         SplitButtonModule,
@@ -20149,15 +21360,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CheckboxGroupComponent,
                         SwitchInputComponent,
                         EncryptedInputComponent,
+                        SearchInputComponent,
+                        ConfirmSelectComponent,
                         DrawerComponent,
                         DrawerFormComponent,
                         ToolbarItemComponent,
                         RsCommentaryComponent,
                         RSNavCardGroupComponent,
                         RSToolbarComponent,
-                        NewActionNotificationComponent,
+                        TruncatedTextToggleComponent,
                         CommonDialogComponent,
-                        CommonDeleteComponent,
+                        RichtexteditorComponent,
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
@@ -20171,5 +21384,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CheckboxGroupComponent, CommonDeleteComponent, CommonDialogComponent, CommonFunctionService, CommonGridComponent, DefaultDrawerConfig, DialogService, DrawerComponent, DrawerFormComponent, DrawerService, EmailPattern, EncryptedInputComponent, FloatBoxComponent, GridActionComponent, GridActionItemComponent, GridBoxComponent, IconLoaderService, KeepAliveService, MainContainerComponent, MessageType, MultiTabComponent, NewActionNotificationComponent, RSAsideComponent, RSFooterComponent, RSHeaderComponent, RSNavCardGroupComponent, RSToolbarComponent, RadioGroupComponent, RaiseCommonLibModule, RsCommentaryComponent, RsPageListComponent, RsPageTabComponent, SwitchInputComponent, TagInputComponent, ToolbarItemComponent, TranslationService, filterShowSection };
+export { CheckboxGroupComponent, CommonDialogComponent, CommonFunctionService, CommonGridComponent, ConfirmSelectComponent, DefaultDrawerConfig, DialogService, DrawerComponent, DrawerFormComponent, DrawerService, EmailPattern, EncryptedInputComponent, FloatBoxComponent, GridActionComponent, GridActionItemComponent, GridBoxComponent, IconLoaderService, KeepAliveService, MainContainerComponent, MessageType, MultiTabComponent, NewActionNotificationComponent, RSAsideComponent, RSFooterComponent, RSHeaderComponent, RSNavCardGroupComponent, RSToolbarComponent, RadioGroupComponent, RaiseCommonLibModule, RichtexteditorComponent, RsCommentaryComponent, RsPageListComponent, RsPageTabComponent, SearchInputComponent, SwitchInputComponent, TagInputComponent, ToolbarItemComponent, TranslationService, TruncatedTextToggleComponent, filterShowSection };
 //# sourceMappingURL=raise-common-lib-new.mjs.map