raise-common-lib 0.0.37 → 0.0.39

package/fesm5/raise-common-lib.js

@@ -1579,6 +1579,7 @@ var DrawerService = /** @class */ (function () {
     function DrawerService(router) {
         this.router = router;
         this.resultPromiseResolveMap = new Map();
+        this.ListenChangeCbs = new Set();
     }
     Object.defineProperty(DrawerService.prototype, "cacheKey", {
         get: /**
@@ -1675,7 +1676,9 @@ var DrawerService = /** @class */ (function () {
         if (data === void 0) { data = {}; }
         /** @type {?} */
         var drawer = this.uniqueDrawerComponent;
-        if (!drawer || drawer.$isOpened.getValue()) {
+        if (!this.checkChange("show", { component: component, config: config, data: data }) ||
+            !drawer ||
+            drawer.$isOpened.getValue()) {
             return {
                 instance: null,
                 result: null,
@@ -1712,7 +1715,7 @@ var DrawerService = /** @class */ (function () {
         var drawer = this.uniqueDrawerComponent;
         /** @type {?} */
         var resolve = this.resultPromiseResolveMap.get(this.cacheKey);
-        if (resolve) {
+        if (resolve && this.checkChange("hide")) {
             resolve({ type: "hide" });
             drawer && drawer.back();
         }
@@ -1730,7 +1733,7 @@ var DrawerService = /** @class */ (function () {
         var drawer = this.uniqueDrawerComponent;
         /** @type {?} */
         var resolve = this.resultPromiseResolveMap.get(this.cacheKey);
-        if (resolve) {
+        if (resolve && this.checkChange("complete", { data: data })) {
             resolve({ type: "complete", data: data });
             drawer && drawer.back();
         }
@@ -1748,6 +1751,52 @@ var DrawerService = /** @class */ (function () {
         var drawer = this.uniqueDrawerComponent;
         drawer && drawer.deleteCache(cacheKey);
     };
+    /**
+     * @param {?} callback
+     * @return {?}
+     */
+    DrawerService.prototype.onChange = /**
+     * @param {?} callback
+     * @return {?}
+     */
+    function (callback) {
+        var _this = this;
+        this.ListenChangeCbs.add(callback);
+        return (/**
+         * @return {?}
+         */
+        function () {
+            _this.ListenChangeCbs.delete(callback);
+        });
+    };
+    /**
+     * @private
+     * @param {?} type
+     * @param {?=} detail
+     * @return {?}
+     */
+    DrawerService.prototype.checkChange = /**
+     * @private
+     * @param {?} type
+     * @param {?=} detail
+     * @return {?}
+     */
+    function (type, detail) {
+        if (detail === void 0) { detail = {}; }
+        /** @type {?} */
+        var cancel = false;
+        /** @type {?} */
+        var event = { type: type, cancel: (/**
+             * @return {?}
+             */
+            function () { return (cancel = true); }), detail: detail };
+        this.ListenChangeCbs.forEach((/**
+         * @param {?} cb
+         * @return {?}
+         */
+        function (cb) { return cb(event); }));
+        return !cancel;
+    };
     DrawerService.decorators = [
         { type: Injectable, args: [{
                     providedIn: "root",
@@ -1781,6 +1830,11 @@ if (false) {
      * @private
      */
     DrawerService.prototype.routerSubscription;
+    /**
+     * @type {?}
+     * @private
+     */
+    DrawerService.prototype.ListenChangeCbs;
     /**
      * @type {?}
      * @private
@@ -1802,6 +1856,8 @@ var MultiTabComponent = /** @class */ (function () {
         this.drawer = drawer;
         this.routeReuseStrategy = routeReuseStrategy;
         this.singleReuseUrls = []; //只能单个缓存的url
+        //只能单个缓存的url
+        this.noGenerateTabUrls = []; //不生成tab的url
         this.TAB_WIDTH = 164;
         this.GAP_NORMAL = 54;
         this.GAP_SMALL = 30;
@@ -1870,6 +1926,9 @@ var MultiTabComponent = /** @class */ (function () {
                     if (_this.tabList.length === 0 && !state) {
                         return; // 初始化第一个url不加入multi-tab
                     }
+                    if (_this.noGenerateTabUrls.includes(_this.router.url)) {
+                        return; // 排除不生成tab的url
+                    }
                     _this.setTab(_this.router.url, currentRoute.snapshot.routeConfig.path, state && state.title);
                 }
             }
@@ -2042,7 +2101,7 @@ var MultiTabComponent = /** @class */ (function () {
         this.tabList.push({
             url: url,
             title: title || "default",
-            displayTitle: this.setEllipsisTitle(title || "default"),
+            displayTitle: title,
         });
         this.selectedTab = this.tabList.length - 1;
         this.setEllipsisTitle();
@@ -2126,8 +2185,8 @@ var MultiTabComponent = /** @class */ (function () {
     MultiTabComponent.decorators = [
         { type: Component, args: [{
                     selector: "rs-multi-tab",
-                    template: "<div class=\"rs-multi-tab\" *ngIf=\"tabList.length > 0\">\r\n  <ul>\r\n    <ng-container *ngFor=\"let tab of tabList; let i = index\">\r\n      <li\r\n        [ngClass]=\"selectedTab === i ? 'isSelect' : 'notSelect'\"\r\n        (click)=\"changeTab(tab, i)\"\r\n      >\r\n        <ejs-tooltip\r\n          id=\"notSelectTooltip\"\r\n          [showTipPointer]=\"false\"\r\n          [openDelay]=\"500\"\r\n          *ngIf=\"tab.displayTitle !== tab.title; else originText\"\r\n          style=\"height: 27px\"\r\n        >\r\n          <ng-template #content>\r\n            <div class=\"tooltip-content\">\r\n              {{ tab.title }}\r\n            </div>\r\n          </ng-template>\r\n          <span class=\"tabTitle\">{{ 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\"></span>\r\n        <img\r\n          *ngIf=\"tabList.length !== 1\"\r\n          src=\"../../../assets/img/close-url.svg\"\r\n          (click)=\"closeTab(tab, i)\"\r\n        />\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n  <div class=\"refresh-tab\" (click)=\"refreshTab()\">\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    <span>Refresh Current Tab</span>\r\n  </div>\r\n</div>\r\n",
-                    styles: [".rs-multi-tab{border-bottom:1px solid #e5eaef;height:28px;width:100%;display:flex;justify-content:space-between}.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:100%;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}.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:rgba(31,123,255,.04)}.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{-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{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}}@media (max-width:600px){.rs-multi-tab ul li{padding:0 8px}.rs-multi-tab ul .notSelect .img-block{width:0!important}}"]
+                    template: "<div class=\"rs-multi-tab\" [ngClass]=\"{ 'border': tabList.length > 0 }\">\r\n  <ul>\r\n    <ng-container *ngFor=\"let tab of tabList; let i = index\">\r\n      <li\r\n        [ngClass]=\"selectedTab === i ? 'isSelect' : 'notSelect'\"\r\n        (click)=\"changeTab(tab, i)\"\r\n      >\r\n        <ejs-tooltip\r\n          id=\"notSelectTooltip\"\r\n          [showTipPointer]=\"false\"\r\n          [openDelay]=\"500\"\r\n          *ngIf=\"tab.displayTitle !== tab.title; else originText\"\r\n          style=\"height: 27px\"\r\n        >\r\n          <ng-template #content>\r\n            <div class=\"tooltip-content\">\r\n              {{ tab.title }}\r\n            </div>\r\n          </ng-template>\r\n          <span class=\"tabTitle\">{{ 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\"></span>\r\n        <img\r\n          *ngIf=\"tabList.length !== 1\"\r\n          src=\"../../../assets/img/close-url.svg\"\r\n          (click)=\"closeTab(tab, i)\"\r\n        />\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n  <div class=\"refresh-tab\" (click)=\"refreshTab()\" *ngIf=\"tabList.length > 0\">\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    <span>Refresh Current Tab</span>\r\n  </div>\r\n</div>\r\n",
+                    styles: [".rs-multi-tab{width:100%;display:flex;justify-content:space-between}.rs-multi-tab.border{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}.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:rgba(31,123,255,.04)}.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{-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{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}}@media (max-width:600px){.rs-multi-tab ul li{padding:0 8px}.rs-multi-tab ul .notSelect .img-block{width:0!important}}"]
                 }] }
     ];
     /** @nocollapse */
@@ -2141,6 +2200,7 @@ var MultiTabComponent = /** @class */ (function () {
     ]; };
     MultiTabComponent.propDecorators = {
         singleReuseUrls: [{ type: Input }],
+        noGenerateTabUrls: [{ type: Input }],
         onResize: [{ type: HostListener, args: ["window:resize", ["$event"],] }]
     };
     return MultiTabComponent;
@@ -2150,6 +2210,8 @@ if (false) {
     MultiTabComponent.prototype.keepAlive;
     /** @type {?} */
     MultiTabComponent.prototype.singleReuseUrls;
+    /** @type {?} */
+    MultiTabComponent.prototype.noGenerateTabUrls;
     /**
      * @type {?}
      * @private
@@ -2210,6 +2272,7 @@ var DrawerComponent = /** @class */ (function () {
         this.config = DefaultDrawerConfig;
         this.useTransition = "yes";
         this.$isOpened = new BehaviorSubject(false);
+        this.showToolbarContainer = true;
         this.componentRefMap = new Map();
     }
     /**
@@ -2302,6 +2365,7 @@ var DrawerComponent = /** @class */ (function () {
         /** @type {?} */
         var toolbarContainerEl = this.toolbar.nativeElement;
         toolbarContainerEl.innerHTML = "";
+        this.showToolbarContainer = !!toolbarEl;
         if (toolbarEl) {
             toolbarContainerEl.append(toolbarEl);
         }
@@ -2339,6 +2403,15 @@ var DrawerComponent = /** @class */ (function () {
         this.useTransition = "yes";
         return componentRef.instance;
     };
+    /**
+     * @return {?}
+     */
+    DrawerComponent.prototype.hide = /**
+     * @return {?}
+     */
+    function () {
+        this.service.hide();
+    };
     /**
      * @return {?}
      */
@@ -2396,8 +2469,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)=\"back()\">\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>\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-footer\">\r\n      <div class=\"drawer-toolbar\" #toolbar></div>\r\n    </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;top:0;left:100%}.rs-drawer-container .rs-drawer[data-opened=yes]{left:0;opacity:1;pointer-events:auto}.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}.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;padding-left:12px;border-left:1px solid #bdc4ca;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-content{flex:auto;overflow:hidden}.rs-drawer-container .rs-drawer .drawer-content .drawer-content-container{height:100%;overflow:hidden auto}.rs-drawer-container .rs-drawer .drawer-footer{flex:none;height:32px;padding:16px 0;box-sizing:content-box;border-top:1px solid #eaedf0;display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center}.rs-drawer-container .rs-drawer .drawer-footer .drawer-toolbar{height:32px;display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center}.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] .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-footer{height:0;padding:0;border:none}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-footer .drawer-toolbar{position:absolute;top:7px;right:0;z-index:1}.rs-drawer-container .rs-drawer[data-mode=inner]{height:calc(100% - 16px);margin-top:16px;box-shadow:0 -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}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [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 [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 [drawer-toolbar] button:hover{border-color:#6c7c90}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [drawer-toolbar] button:disabled{opacity:1!important;border-color:#6c7c9066;color:#44566c66;cursor:unset}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [drawer-toolbar] button.primary{border:none;background-color:#1364b3;color:#fff}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [drawer-toolbar] button.primary:hover{background-color:#176bca}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [drawer-toolbar] button.primary:disabled{background-color:#1364b366}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [drawer-toolbar] button img{width:16px;height:16px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=outer] .drawer-toolbar [drawer-toolbar] button{height:26px;font-size:12px;line-height:14px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar [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    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>\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\r\n      class=\"drawer-footer\"\r\n      [attr.data-show-footer]=\"showToolbarContainer ? 'yes' : 'no'\"\r\n    >\r\n      <div class=\"drawer-toolbar\" #toolbar></div>\r\n    </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;top:0;left:100%}.rs-drawer-container .rs-drawer[data-opened=yes]{left:0;opacity:1;pointer-events:auto}.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}.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;padding-left:12px;border-left:1px solid #bdc4ca;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-content{flex:auto;overflow:hidden}.rs-drawer-container .rs-drawer .drawer-content .drawer-content-container{height:100%;overflow:hidden auto}.rs-drawer-container .rs-drawer .drawer-footer{flex:none;height:32px;padding:16px 0;box-sizing:content-box;border-top:1px solid #eaedf0;display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center}.rs-drawer-container .rs-drawer .drawer-footer[data-show-footer=no]{display:none}.rs-drawer-container .rs-drawer .drawer-footer .drawer-toolbar{height:32px;display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center}.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] .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-footer{height:0;padding:0;border:none}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-footer .drawer-toolbar{position:absolute;top:7px;right:0;z-index:1}.rs-drawer-container .rs-drawer[data-mode=inner]{height:calc(100% - 16px);margin-top:16px;box-shadow:0 -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}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [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 [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 [drawer-toolbar] button:hover{border-color:#6c7c90}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [drawer-toolbar] button:disabled{opacity:1!important;border-color:#6c7c9066;color:#44566c66;cursor:unset}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [drawer-toolbar] button.primary{border:none;background-color:#1364b3;color:#fff}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [drawer-toolbar] button.primary:hover{background-color:#176bca}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [drawer-toolbar] button.primary:disabled{background-color:#1364b366}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar [drawer-toolbar] button img{width:16px;height:16px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=outer] .drawer-toolbar [drawer-toolbar] button{height:26px;font-size:12px;line-height:14px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar [drawer-toolbar] button img{display:none}"]
                 }] }
     ];
     /** @nocollapse */
@@ -2431,6 +2504,8 @@ if (false) {
     DrawerComponent.prototype.useTransition;
     /** @type {?} */
     DrawerComponent.prototype.$isOpened;
+    /** @type {?} */
+    DrawerComponent.prototype.showToolbarContainer;
     /**
      * @type {?}
      * @private
@@ -20358,7 +20433,7 @@ var DrawerFormComponent = /** @class */ (function () {
      * @return {?}
      */
     function (field) {
-        if (field.fieldFormType === "Dropdown") {
+        if (["Dropdown", "AutoComplete"].includes(field.fieldFormType)) {
             return __assign({}, this.optionFields, { groupBy: field.groupKey || null });
         }
         return this.optionFields;