raise-common-lib 0.0.78 → 0.0.80

package/fesm5/raise-common-lib.js

@@ -1,7 +1,9 @@
 import { __assign, __read, __spread } from 'tslib';
 import { EventEmitter, Component, ChangeDetectorRef, ViewChild, Input, Output, HostBinding, ContentChild, Injectable, ɵɵdefineInjectable, ɵɵinject, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChildren, Inject, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { 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, SortService, FilterService, ExcelExportService, EditService, ResizeService, ToolbarService, ColumnChooserService, AggregateService, ColumnMenuService, DetailRowService, SelectionService, GroupService } from '@syncfusion/ej2-angular-grids';
 import { times, debounce } from 'lodash';
+import { CarouselAllModule, ToolbarModule, TabModule } from '@syncfusion/ej2-angular-navigations';
+import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
 import { NavigationEnd, Router, ActivatedRoute, RouteReuseStrategy } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { Subject, BehaviorSubject } from 'rxjs';
@@ -23,7 +25,6 @@ import { DropDownListModule, DropDownTreeModule, MultiSelectAllModule, AutoCompl
 import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
 import { ChartAllModule, AccumulationChartAllModule, RangeNavigatorAllModule, AccumulationChartModule, PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
 import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
-import { CarouselAllModule, ToolbarModule, TabModule } from '@syncfusion/ej2-angular-navigations';
 import { PdfViewerModule, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService as ToolbarService$1, NavigationService, TextSearchService, TextSelectionService, PrintService } from '@syncfusion/ej2-angular-pdfviewer';
 import { DropDownButtonModule, SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
 import { RichTextEditorAllModule, HtmlEditorService, ToolbarService as ToolbarService$2 } from '@syncfusion/ej2-angular-richtexteditor';
@@ -1450,6 +1451,29 @@ var RsPageTabComponent = /** @class */ (function () {
      * @return {?}
      */
     function () { };
+    /**
+     * @return {?}
+     */
+    RsPageTabComponent.prototype.ngAfterViewInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        if (this.currentTab !== undefined) {
+            /** @type {?} */
+            var idx_1 = this.tabList.findIndex((/**
+             * @param {?} ele
+             * @return {?}
+             */
+            function (ele) { return ele.value === _this.currentTab; }));
+            setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                _this.tabObj.select(idx_1);
+            }), 30);
+        }
+    };
     /**
      * @param {?} e
      * @return {?}
@@ -1459,16 +1483,34 @@ var RsPageTabComponent = /** @class */ (function () {
      * @return {?}
      */
     function (e) {
-        this.tabChange.emit(this.tabList[e.selectedIndex]);
+        if (e.isInteracted) {
+            this.tabChange.emit(this.tabList[e.selectedIndex]);
+        }
+    };
+    // 切换tab,传入下标
+    // 切换tab,传入下标
+    /**
+     * @param {?} idx
+     * @return {?}
+     */
+    RsPageTabComponent.prototype.changeTab = 
+    // 切换tab,传入下标
+    /**
+     * @param {?} idx
+     * @return {?}
+     */
+    function (idx) {
+        this.tabObj.select(idx);
     };
     RsPageTabComponent.decorators = [
         { type: Component, args: [{
                     selector: "rs-page-tab",
-                    template: "<div class=\"rs-page-list-wrap\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <div class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</div>\r\n  </ng-template>\r\n  <ejs-tab\r\n    class=\"rs-tab\"\r\n    (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",
+                    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(../../assets/img/icon-more.svg);background-size:14px 3px;background-repeat:no-repeat;background-position:4px 14px}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons::before{display:none}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons:hover{background-color:#eff5fb!important;border-color:#b1d0fc!important;background-image:url(../../assets/img/icon-more-active.svg)}.rs-page-list-wrap .rs-tab .e-toolbar-pop{min-width:160px;border-radius:10px;background:#fff;box-shadow:0 0 8px 0 rgba(0,0,0,.25);padding:8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap{padding:0 8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-tab-text{color:#44566c;font-family:Arial;font-size:13px;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover{border-radius:6px;background:rgba(31,123,255,.05)}.rs-page-list-wrap .rs-grid-wrap{flex:1;height:0}"]
                 }] }
     ];
     RsPageTabComponent.propDecorators = {
+        tabObj: [{ type: ViewChild, args: ["tabObj", { static: false },] }],
         pageTitle: [{ type: Input }],
         customPageTitle: [{ type: Input }],
         tabList: [{ type: Input }],
@@ -1478,6 +1520,8 @@ var RsPageTabComponent = /** @class */ (function () {
     return RsPageTabComponent;
 }());
 if (false) {
+    /** @type {?} */
+    RsPageTabComponent.prototype.tabObj;
     /** @type {?} */
     RsPageTabComponent.prototype.pageTitle;
     /** @type {?} */
@@ -1535,7 +1579,15 @@ var GridBoxComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        this.gridContent.grid.search(this.searchValue);
+        if (this.gridContent) {
+            this.gridContent.grid.search(this.searchValue);
+        }
+        else if (this.orignGrid) {
+            this.orignGrid.search(this.searchValue);
+        }
+        else if (this.treeGrid) {
+            this.treeGrid.search(this.searchValue);
+        }
     };
     /**
      * @return {?}
@@ -1555,6 +1607,8 @@ var GridBoxComponent = /** @class */ (function () {
     ];
     GridBoxComponent.propDecorators = {
         gridContent: [{ type: ContentChild, args: [CommonGridComponent, { static: true },] }],
+        orignGrid: [{ type: ContentChild, args: [GridComponent, { static: true },] }],
+        treeGrid: [{ type: ContentChild, args: [TreeGridComponent, { static: true },] }],
         wholeToolbarSlot: [{ type: ContentChild, args: ["wholeToolbarSlot", { static: true },] }],
         pageTitle: [{ type: Input }],
         customPageTitle: [{ type: Input }],
@@ -1566,6 +1620,10 @@ if (false) {
     /** @type {?} */
     GridBoxComponent.prototype.gridContent;
     /** @type {?} */
+    GridBoxComponent.prototype.orignGrid;
+    /** @type {?} */
+    GridBoxComponent.prototype.treeGrid;
+    /** @type {?} */
     GridBoxComponent.prototype.wholeToolbarSlot;
     /** @type {?} */
     GridBoxComponent.prototype.pageTitle;
@@ -2594,11 +2652,22 @@ var DrawerComponent = /** @class */ (function () {
      * @return {?}
      */
     function (cache) {
-        this.setSlotElement(cache.toolbarEl, this.toolbar.nativeElement);
-        this.setSlotElement(cache.headerEl, this.header.nativeElement);
-        /** @type {?} */
-        var drawerTop = cache.config.top ? cache.config.top + "px" : "";
-        this.element.nativeElement.style.setProperty("--drawer-top", drawerTop);
+        this.setSlotElement(cache.toolbarEl, this.toolbarSlot.nativeElement);
+        this.setSlotElement(cache.headerEl, this.headerSlot.nativeElement);
+        this.setSlotElement(cache.topEl, this.topSlot.nativeElement);
+        if (!cache.topEl) {
+            /** @type {?} */
+            var drawerTop = cache.config.top ? cache.config.top + "px" : "";
+            this.element.nativeElement.style.setProperty("--drawer-top", drawerTop);
+        }
+        if (cache.config.mode === "inner") {
+            this.content.nativeElement.insertBefore(this.header.nativeElement, this.content.nativeElement.firstChild);
+            this.content.nativeElement.append(this.toolbarSlot.nativeElement);
+        }
+        else {
+            this.drawer.nativeElement.insertBefore(this.header.nativeElement, this.drawer.nativeElement.firstChild);
+            this.header.nativeElement.append(this.toolbarSlot.nativeElement);
+        }
     };
     /**
      * @template T
@@ -2624,11 +2693,14 @@ var DrawerComponent = /** @class */ (function () {
         /** @type {?} */
         var headerEl = this.getSlotElement(componentRef, "[drawer-header]");
         /** @type {?} */
+        var topEl = this.getSlotElement(componentRef, "[drawer-top]");
+        /** @type {?} */
         var cache = {
             config: showConfig,
             ref: componentRef,
             toolbarEl: toolbarEl,
             headerEl: headerEl,
+            topEl: topEl,
         };
         this.setComponentData(componentRef, data);
         this.componentRefMap.set(this.service.cacheKey, cache);
@@ -2704,8 +2776,8 @@ var DrawerComponent = /** @class */ (function () {
     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    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  >\r\n    <div class=\"drawer-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\" #header></div>\r\n    </div>\r\n    <div class=\"drawer-content\">\r\n      <div class=\"drawer-content-container\">\r\n        <ng-template #dynamicComponentContainer></ng-template>\r\n      </div>\r\n    </div>\r\n    <div class=\"drawer-toolbar-slot\" #toolbar></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:opacity .5s ease-in-out,left .5s ease-in-out}.rs-drawer-container .rs-drawer .drawer-header{flex:none;display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;box-sizing:content-box;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button{flex:none;display:flex;flex-flow:row nowrap;align-items:center;padding:0;border:none;background-color:transparent;cursor:pointer}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button::before{content:url(../../assets/img/drawer-back.svg);width:24px;height:24px;margin-right:8px;transition:transform 125ms ease-in-out}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button:hover::before{transform:translateX(-2px)}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button .drawer-sub-title{margin-right:12px;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title{flex:none;min-height:14px;padding:0 12px;border-left:1px solid #bdc4ca;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title:empty{padding:0}.rs-drawer-container .rs-drawer .drawer-content{flex:auto;overflow:hidden;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-content .drawer-content-container{height:100%;overflow:hidden auto}.rs-drawer-container .rs-drawer .drawer-toolbar-slot{flex:none;height:32px;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[data-mode=inner],.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-content{padding:0 20px;border:1px solid #ebedf0;border-radius:15px;background-color:#fff}.rs-drawer-container .rs-drawer[data-mode=outer]{margin-top:var(--drawer-top,0);background-color:#f8fafb}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-header{height:46px;padding:0 24px 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=outer] .drawer-toolbar-slot{position:absolute;top:7px;right:0;z-index:1}.rs-drawer-container .rs-drawer[data-mode=inner]{height:calc(100% - var(--drawer-top,16px));margin-top:var(--drawer-top,16px);box-shadow:0 min(0,var(--drawer-top,-16px)) #f8fafb}.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{padding:0 20px 0 8px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-content .drawer-content-container{margin-right:-20px;padding-right:20px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar-slot{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}"]
+                    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  >\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\" #content>\r\n      <div class=\"drawer-content-container\">\r\n        <ng-template #dynamicComponentContainer></ng-template>\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:opacity .5s ease-in-out,left .5s ease-in-out}.rs-drawer-container .rs-drawer .drawer-header{flex:none;display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;box-sizing:content-box;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button{flex:none;display:flex;flex-flow:row nowrap;align-items:center;padding:0;border:none;background-color:transparent;cursor:pointer}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button::before{content:url(../../assets/img/drawer-back.svg);width:24px;height:24px;margin-right:8px;transition:transform 125ms ease-in-out}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button:hover::before{transform:translateX(-2px)}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button .drawer-sub-title{margin-right:12px;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title{flex:none;min-height:14px;padding:0 12px;border-left:1px solid #bdc4ca;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title:empty{padding:0}.rs-drawer-container .rs-drawer .drawer-content{flex:auto;padding:0 20px;border:1px solid #ebedf0;border-radius:15px;background-color:#fff;overflow:hidden;pointer-events:auto;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[data-mode=outer] .drawer-header{height:46px;padding:0 0 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{margin-top:var(--drawer-top,0);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{margin-top:var(--drawer-top,16px);box-shadow:0 min(0,var(--drawer-top,-16px)) #f8fafb}.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}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar-slot{width:100%;padding:16px 0;box-sizing:content-box;border-top:1px solid #eaedf0}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar]{display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center;gap:12px}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button{display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;gap:6px;min-width:80px;height:32px;padding:0 12px;border:1px solid #adb5bd;border-radius:4px;background-color:#fff;cursor:pointer;color:#44566c;font-size:13px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button:hover{border-color:#6c7c90}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button:disabled{opacity:1!important;border-color:#6c7c9066;color:#44566c66;cursor:unset}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary{border:none;background-color:#1364b3;color:#fff}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary:hover{background-color:#176bca}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary:disabled{background-color:#1364b366}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button img{width:16px;height:16px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=outer] .drawer-toolbar-slot [drawer-toolbar] button{height:26px;font-size:12px;line-height:14px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar-slot [drawer-toolbar] button img{display:none}"]
                 }] }
     ];
     /** @nocollapse */
@@ -2715,8 +2787,12 @@ var DrawerComponent = /** @class */ (function () {
     ]; };
     DrawerComponent.propDecorators = {
         element: [{ type: ViewChild, args: ["element", { static: false },] }],
-        toolbar: [{ type: ViewChild, args: ["toolbar", { static: false },] }],
+        drawer: [{ type: ViewChild, args: ["drawer", { static: false },] }],
         header: [{ type: ViewChild, args: ["header", { static: false },] }],
+        content: [{ type: ViewChild, args: ["content", { static: false },] }],
+        toolbarSlot: [{ type: ViewChild, args: ["toolbarSlot", { static: false },] }],
+        headerSlot: [{ type: ViewChild, args: ["headerSlot", { static: false },] }],
+        topSlot: [{ type: ViewChild, args: ["topSlot", { static: false },] }],
         container: [{ type: ViewChild, args: ["dynamicComponentContainer", {
                         read: ViewContainerRef,
                         static: false,
@@ -2728,9 +2804,17 @@ if (false) {
     /** @type {?} */
     DrawerComponent.prototype.element;
     /** @type {?} */
-    DrawerComponent.prototype.toolbar;
+    DrawerComponent.prototype.drawer;
     /** @type {?} */
     DrawerComponent.prototype.header;
+    /** @type {?} */
+    DrawerComponent.prototype.content;
+    /** @type {?} */
+    DrawerComponent.prototype.toolbarSlot;
+    /** @type {?} */
+    DrawerComponent.prototype.headerSlot;
+    /** @type {?} */
+    DrawerComponent.prototype.topSlot;
     /**
      * @type {?}
      * @private