@schneideress/dashboardframework 0.0.187 → 0.0.189

package/fesm2015/schneideress-dashboardframework.js

@@ -1253,14 +1253,11 @@ class RAWidgetContainer {
         this.raPermissionService = raPermissionService;
         this.showPanel = true;
         this.isWidgetLoaded = false;
-        this.isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
         this.lockClass = "unlocked";
         this.lockStatus = RaWidgetlockStatus.Unlocked;
         this.isDownloadIconVisible = false;
         this.isChartDownloadVisible = false;
         this.isGridDownloadVisible = false;
-        this.dropDownShown = false;
-        this.isDownloadChartVisible = false;
         this.enableTitleLine = false;
         this.isGlobalFilterApplied = false;
         this.toolTipValue = '  ';
@@ -1281,6 +1278,7 @@ class RAWidgetContainer {
         this.excelToolTipWidth = '0px';
         this.deleteToolTipWidth = '0px';
         this.noPadding = false;
+        this.isMouseHover = false;
         this.widgetDeleted = new EventEmitter();
         this.isWidgetStateApplicable = false;
         this.widgetEmptyState = '';
@@ -1291,11 +1289,13 @@ class RAWidgetContainer {
          * @return {?}
          */
         (e) => {
-            if (e.target !== this.widgetDropdown.nativeElement) {
-                this.dropDownShown = false;
+            if (e.target.className) {
+                if (e.target.className != 'fal fa-ellipsis-v widget-menu-ellipse') {
+                    this.removeMenu();
+                }
             }
-            if (this.widgetDownload && e.target !== this.widgetDownload.nativeElement) {
-                this.isDownloadChartVisible = false;
+            else {
+                this.removeMenu();
             }
         }));
     }
@@ -1364,6 +1364,7 @@ class RAWidgetContainer {
      * @return {?}
      */
     mouseHover(isHover = true) {
+        this.isMouseHover = isHover;
         if (this.widgetElement) {
             if (typeof this.widgetElement.hoverStatus === "function") {
                 this.widgetElement.hoverStatus(isHover);
@@ -1372,9 +1373,6 @@ class RAWidgetContainer {
                 console.warn('widget framework outdated, please update to version 0.0.96');
             }
         }
-        if (!isHover) {
-            this.hideDropDown();
-        }
     }
     /**
      * @return {?}
@@ -1386,6 +1384,39 @@ class RAWidgetContainer {
         () => {
             this.loadWidget(this.data.widgetInfo);
         }));
+        document.addEventListener("scroll", (/**
+         * @return {?}
+         */
+        () => {
+            this.removeMenu();
+        }));
+        setTimeout((/**
+         * @return {?}
+         */
+        () => {
+            /** @type {?} */
+            let item = jQuery(this.wcWrapper.nativeElement).closest('gridster-item');
+            item.bind('mouseenter', (/**
+             * @return {?}
+             */
+            () => {
+                window.gridsterItemEnter = true;
+            }));
+            item.bind('mouseleave', (/**
+             * @return {?}
+             */
+            () => {
+                window.gridsterItemEnter = false;
+                setTimeout((/**
+                 * @return {?}
+                 */
+                () => {
+                    if (!window.mouseOverWidgetMenu) {
+                        this.removeMenu();
+                    }
+                }));
+            }));
+        }));
     }
     /**
      * @return {?}
@@ -1699,8 +1730,6 @@ class RAWidgetContainer {
                 widgetInfo: widgetInfo,
                 configChanges: this.getConfigChanges(configChanged)
             }));
-            console.log('wiget container filter data is');
-            console.log(widgetConfigFilter);
             if (widgetContainerContext.isWidgetLoaded) {
                 if (this.widgetElement && typeof (this.widgetElement.setConfigFilter) == 'function') {
                     widgetContainerContext.widgetElement.setConfigFilter(widgetConfigFilter);
@@ -1783,18 +1812,6 @@ class RAWidgetContainer {
             }
         });
     }
-    // public downloadClicked() {
-    //   switch (this.downloadIconType) {
-    //     case RADownloadType.Grid:
-    //       this.downloadIconClicked('CSV');
-    //       break;
-    //     case RADownloadType.Chart:
-    //       this.isDownloadChartVisible = true;
-    //       break;
-    //     case RADownloadType.Custom:
-    //       break;
-    //   }
-    // }
     /**
      * @param {?} type
      * @return {?}
@@ -1818,23 +1835,164 @@ class RAWidgetContainer {
                 break;
         }
     }
+    /**
+     * @private
+     * @return {?}
+     */
+    removeMenu() {
+        jQuery('#ra-db-widget-menu').remove();
+    }
     /**
      * Show dropdown on gear icon click
+     * @param {?} e
      * @return {?}
      */
-    showDropDown() {
+    showDropDown(e) {
         this.setDownloadIcon();
-        this.dropDownShown = !this.dropDownShown;
+        this.removeMenu();
+        setTimeout((/**
+         * @return {?}
+         */
+        () => {
+            /** @type {?} */
+            let targetPos = e.target.getBoundingClientRect();
+            /** @type {?} */
+            let style = "position:fixed;top:" + (targetPos.y + 15) + 'px' + ';left:' + (e.pageX - 122) + 'px;z-index:1000;';
+            /** @type {?} */
+            let html = this.getContenxtHtml(style);
+            jQuery(html).appendTo('body');
+            if (this.isWidgetMgmnt) {
+                this.addEventListener('wcEditWidget', this.editWidget);
+                this.addEventListener('wcCopyWidget', this.copyWidget);
+                this.addEventListener('wcMoveWidget', this.moveWidget);
+                this.addEventListener('wcWidgetDelete', this.deleteWidget);
+            }
+            if (this.detailPageUrl) {
+                this.addEventListener('wcVisitWidget', this.visitPage);
+            }
+            if (this.isChartDownloadVisible) {
+                this.addEventListener('wcDownloadPng', this.downloadIconClicked, 'PNG');
+                this.addEventListener('wcDownloadJpg', this.downloadIconClicked, 'JPEG');
+                this.addEventListener('wcDownloadPdf', this.downloadIconClicked, 'PDF');
+                this.addEventListener('wcDownloadSvg', this.downloadIconClicked, 'SVG');
+            }
+            if (this.isGridDownloadVisible) {
+                this.addEventListener('wcDownloadExcel', this.downloadIconClicked, 'CSV');
+            }
+            document.getElementById('ra-db-widget-menu').addEventListener('mouseenter', (/**
+             * @return {?}
+             */
+            () => {
+                window.mouseOverWidgetMenu = true;
+            }));
+            document.getElementById('ra-db-widget-menu').addEventListener('mouseleave', (/**
+             * @return {?}
+             */
+            () => {
+                window.mouseOverWidgetMenu = false;
+                setTimeout((/**
+                 * @return {?}
+                 */
+                () => {
+                    if (!window.gridsterItemEnter) {
+                        this.removeMenu();
+                    }
+                }));
+            }));
+        }));
     }
     /**
-     * Hide dropdown on outside click
+     * @private
+     * @param {?} id
+     * @param {?} event
+     * @param {?=} params
      * @return {?}
      */
-    hideDropDown() {
-        if (this.dropDownShown) {
-            this.dropDownShown = false;
+    addEventListener(id, event, params) {
+        /** @type {?} */
+        let element = document.getElementById(id);
+        if (element) {
+            element.addEventListener('click', (/**
+             * @return {?}
+             */
+            () => {
+                event.call(this, params);
+            }));
         }
-        this.isDownloadChartVisible = false;
+    }
+    /**
+     * @private
+     * @param {?} style
+     * @return {?}
+     */
+    getContenxtHtml(style) {
+        /** @type {?} */
+        let html = '<div id="ra-db-widget-menu"' + 'style="' + style + '" class="download-content dropdown-content widget-config-item dropdown-click" style="z-index: 1002;">';
+        html += '<div style="color: #9FA0A4;font-size: 12px;padding-top: 8px;padding-left: 12px;">';
+        html += this.translateService.translate('Common.settings') + '</div>';
+        if (this.isWidgetMgmnt) {
+            html += this.getHtmlForButton('wcEditWidget', 'fal fa-edit', this.editText);
+            html += this.getHtmlForButton('wcCopyWidget', 'fal fa-copy', this.copyText);
+            html += this.getHtmlForButton('wcMoveWidget', 'fal fa-arrows-alt', this.moveText);
+        }
+        if (this.detailPageUrl) {
+            html += '<a style="max-height: 30px;align-items: center;align-content: center; display: flex;" id="wcVisitWidget">';
+            html += '<i style="padding-left: 4px;font-size: 27px !important;" class="fal fa-angle-right"></i> ';
+            html += '<span style="padding-left: 11px;margin-top: 2px;" style="padding-left: 6px;">';
+            html += this.translateService.translate('Common.visitpage');
+            html += '</span></a>';
+        }
+        html += this.getHr();
+        ;
+        if (this.isDownloadIconVisible) {
+            html += '<span style="color: #9FA0A4;font-size: 12px;">';
+            html += this.translateService.translate('Common.downloads');
+            html += '</span>';
+            if (this.isChartDownloadVisible) {
+                html += '<div style="padding-top: 10px;" class="chartDownload">';
+                html += this.getHtmlForButton('wcDownloadPng', 'fal fa-file-image', this.translateService.translate('Common.png'));
+                html += this.getHtmlForButton('wcDownloadJpg', 'fal fa-file-image', this.translateService.translate('Common.jpeg'));
+                html += this.getHtmlForButton('wcDownloadPdf', 'fal fa-file-pdf', this.translateService.translate('Common.pdf'));
+                html += this.getHtmlForButton('wcDownloadSvg', 'fal fa-file-alt', this.translateService.translate('Common.svg'));
+                html += '</div>';
+            }
+            if (this.isGridDownloadVisible) {
+                html += '<div class="gridDownload">';
+                html += this.getHtmlForButton('wcDownloadExcel', 'fal fa-download', this.excelText);
+                html += '</div>';
+            }
+            if (this.isDownloadIconVisible && this.isWidgetMgmnt) {
+                html += this.getHr();
+            }
+            if (this.isWidgetMgmnt) {
+                html += '<a id="wcWidgetDelete"><i class="fal fa-times" style="padding-left: 3px;color: red;"></i><span>';
+                html += this.deleteText;
+                html += '</span></a>';
+            }
+        }
+        html += '</div>';
+        return html;
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    getHr() {
+        return '<hr class="hr" style="margin-top: 5px;margin-bottom: 5px;">';
+    }
+    /**
+     * @private
+     * @param {?} id
+     * @param {?} fontClass
+     * @param {?} text
+     * @return {?}
+     */
+    getHtmlForButton(id, fontClass, text) {
+        /** @type {?} */
+        let html = '<a id="' + id + '"><i style="width:16px" class="' + fontClass + '"></i> <span style="padding-left: 6px;">';
+        html += text;
+        html += '</span></a>';
+        return html;
     }
     /**
      * @private
@@ -1872,8 +2030,7 @@ class RAWidgetContainer {
 RAWidgetContainer.decorators = [
     { type: Component, args: [{
                 selector: 'ra-widget-container',
-                template: "<div class=\"wc-wrapper\" (mouseenter)=\"mouseHover(true)\" (mouseleave)=\"mouseHover(false)\"\r\n  [ngStyle]=\"{'margin-left': noPadding?'0px':'15px','margin-right': noPadding?'0px':'15px'}\">\r\n  <div class=\"wcheader widget-move\" [ngClass]=\"{'underLine': enableTitleLine || isWidgetStateApplicable}\">\r\n    <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;padding-right: 0px;\">\r\n      <div style=\"display:flex;margin-top:10px;\"\r\n        [ngStyle]=\"{'margin-left': noPadding?'15px':'0px','margin-right': noPadding?'15px':'0px'}\">\r\n        <div class=\"col-md-10 float-left title-label\">\r\n          <ra-tooltip [value]=\"toolTipValue\" [width]=\"toolTipWidth\">\r\n            <div style=\"text-overflow: ellipsis;white-space: nowrap;overflow: hidden;\" (mouseover)=\"mouseOver($event)\"\r\n              #searchInput>{{data.widgetInfo.widgetTitle}}</div>\r\n          </ra-tooltip>\r\n        </div>\r\n\r\n\r\n        <div class=\"col-md-2\" style=\"cursor:default;padding-right: 0px;\">\r\n          <div class=\"float-right\" style=\"display: flex;\">\r\n\r\n            <div class=\"title-bar-lock-icon lock-dropdown\" [hidden]=\"!lockDetails && !lockTemplateInfo\">\r\n              <i class=\"fal fa-lock lock\"></i>\r\n              <div class=\"lock-dropdown-content light widget-config-item\">\r\n                <div *ngIf=\"lockDetails && !lockTemplateInfo\">\r\n                  <label style=\"color: #D9F0FA;\">\r\n                    {{'Common.lockedfields'|translate}}\r\n                  </label>\r\n                  <div style=\"color: white;\">\r\n                    <label class=\"bold\" style=\"margin-bottom: 0px;width: 100%;\" *ngFor=\"let item of lockDetails\">\r\n                      {{item}}\r\n                    </label>\r\n                  </div>\r\n                  <hr>\r\n                  <div style=\"color: #D9F0FA;\">\r\n                    <label>{{'Common.lockedfieldseditinfo'|translate}}</label>\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"!lockDetails && lockTemplateInfo\">\r\n                  <ng-container *ngTemplateOutlet=\"lockTemplateInfo\">\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"dropdown\" style=\"width:10px;\">\r\n              <div class=\"dropbtn title-bar-icon\">\r\n                <i (click)=\"showDropDown()\" #widgetDropdown class=\"fal fa-ellipsis-v\"></i>\r\n              </div>\r\n              <div class=\"download-content dropdown-content widget-config-item\"\r\n                [ngClass]=\"{'dropdown-click': dropDownShown}\" style=\"z-index: 1002;\">\r\n\r\n                <div style=\"color: #9FA0A4;font-size: 12px;padding-top: 8px;padding-left: 12px;\">\r\n                  {{'Common.settings'|translate}}</div>\r\n\r\n                <a style=\"padding-top: 10px;\" (click)=\"editWidget()\" *ngIf=\"isWidgetMgmnt\">\r\n                  <ra-tooltip [value]=\"editToolTipValue\" [width]=\"editToolTipWidth\">\r\n                    <i class=\"fal fa-edit\"></i>\r\n                    <span style=\"padding-left: 6px;\">{{editText}}</span>\r\n                  </ra-tooltip>\r\n                </a>\r\n                <a (click)=\"copyWidget()\" *ngIf=\"isWidgetMgmnt\">\r\n                  <ra-tooltip [value]=\"copyToolTipValue\" [width]=\"copyToolTipWidth\">\r\n                    <i class=\"fal fa-copy\"></i>\r\n                    <span style=\"padding-left: 10px;\">{{copyText}}</span>\r\n                  </ra-tooltip>\r\n                </a>\r\n                <a (click)=\"moveWidget()\" *ngIf=\"isWidgetMgmnt\">\r\n                  <ra-tooltip [value]=\"moveToolTipValue\" [width]=\"moveToolTipWidth\">\r\n                    <i class=\"fal fa-arrows-alt\"></i>\r\n                    <span style=\"padding-left: 9px;\">{{moveText}}</span>\r\n                  </ra-tooltip>\r\n                </a>\r\n                <a *ngIf=\"detailPageUrl\" (click)=\"visitPage()\"\r\n                  style=\"max-height: 30px;align-items: center;align-content: center; display: flex;\">\r\n                  <i style=\"padding-left: 4px;font-size: 27px !important;\" class=\"fal fa-angle-right\"></i>\r\n                  <span style=\"padding-left: 11px;margin-top: 2px;\">{{'Common.visitpage'|translate}}</span>\r\n                </a>\r\n                <hr class=\"hr\" style=\"padding-bottom: 9px;\">\r\n                <span style=\"color: #9FA0A4;font-size: 12px;\"\r\n                  *ngIf=\"isDownloadIconVisible\">{{'Common.downloads'|translate}}</span>\r\n                <div *ngIf=\"isChartDownloadVisible\" style=\"padding-top: 10px;\" class=\"chartDownload\">\r\n                  <a (click)=\"downloadIconClicked('PNG')\">\r\n                    <i class=\"fal fa-file-image\"></i>\r\n                    <span>{{'Common.png'|translate}}</span>\r\n                  </a>\r\n                  <a (click)=\"downloadIconClicked('JPEG')\">\r\n                    <i class=\"fal fa-file-image\"></i>\r\n                    <span>{{'Common.jpeg'|translate}}</span>\r\n                  </a>\r\n                  <a (click)=\"downloadIconClicked('PDF')\">\r\n                    <i class=\"fal fa-file-pdf\"></i>\r\n                    <span>{{'Common.pdf'|translate}}</span>\r\n                  </a>\r\n                  <a (click)=\"downloadIconClicked('SVG')\">\r\n                    <i class=\"fal fa-file-alt\"></i>\r\n                    <span>{{'Common.svg'|translate}}</span>\r\n                  </a>\r\n                </div>\r\n                <div *ngIf=\"isGridDownloadVisible\" class=\"gridDownload\">\r\n                  <a (click)=\"downloadIconClicked('CSV')\">\r\n                    <ra-tooltip [value]=\"excelToolTipValue\" [width]=\"excelToolTipWidth\">\r\n                      <i class=\"fal fa-download\"></i>\r\n                      <span>{{excelText}}</span>\r\n                    </ra-tooltip>\r\n                  </a>\r\n                </div>\r\n                <hr *ngIf=\"isDownloadIconVisible && isWidgetMgmnt\" class=\"hr\">\r\n                <a (click)=\"deleteWidget()\" *ngIf=\"isWidgetMgmnt\">\r\n                  <ra-tooltip [value]=\"deleteToolTipValue\" [width]=\"deleteToolTipWidth\">\r\n                    <i class=\"fal fa-times\" style=\"padding-left: 3px;color: red;\"></i>\r\n                    <span>{{deleteText}}</span>\r\n                  </ra-tooltip>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"wcBody\" [ngStyle]=\"{'bottom': noPadding?'0px':'10px'}\">\r\n    <div [hidden]=\"isWidgetStateApplicable\" class=\"m-fadeOut widget-overlay\" [ngClass]=\"{'m-fadeIn':  showPanel}\">\r\n      <div class=\"lds-roller\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"wc\" [hidden]=\"isWidgetStateApplicable\">\r\n      <div #ctlWidget></div>\r\n    </div>\r\n    <div *ngIf=\"isWidgetStateApplicable\" class=\"defaultConfig\">\r\n      <ra-widget-state style=\"width: 100%;\" [isWidgetStateApplicable]=\"isWidgetStateApplicable\" [isGlobalFilterApplied]=\"isGlobalFilterApplied\"\r\n        [widgetEmptyState]=\"widgetEmptyState\" (editWidgetClicked)=editWidget()>\r\n      </ra-widget-state>\r\n    </div>\r\n    <div>\r\n    </div>\r\n  </div>\r\n</div>",
-                styles: [".sp_icon{float:left;margin:0 15% 0 0}.dropbtn{color:#42b4e6;text-align:right;height:100%}.dropbtn i{cursor:pointer;width:100%;height:100%}.dropdown{visibility:hidden;opacity:0;transition:visibility,opacity .5s linear;position:relative;width:100%}@media screen and (max-width:400px){.dropdown{visibility:visible;opacity:1}}.dropdown hr{margin:0!important}.dropdown-content{display:none;position:absolute;right:0;background-color:#fff;min-width:100px;box-shadow:0 8px 16px 8px rgba(0,0,0,.2);z-index:2;font-size:12px;font-weight:400;width:122px}.dropdown-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.wc{height:100%}.defaultConfig{height:100%;display:flex;align-items:center}.defaultConfig .button{min-height:34px;font-size:13px;width:100%;min-height:34px;color:#fff;display:table;margin:9px 0 0;cursor:pointer;text-align:center;float:left}.defaultConfig .contentarea{width:80%;margin:0 auto;float:left;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.defaultConfig .textarea{width:100%;float:left}.defaultConfig .textarea .icon{width:52px;height:100%;float:left}.defaultConfig .textarea .error-view{color:#dc0a0a}.defaultConfig .textarea .empty-data{color:#5ab5e6}.defaultConfig .textarea .text{width:calc(100% - 52px);min-height:60px;float:left;font-size:14px;text-align:left}.defaultConfig .textarea .icon i{font-size:40px!important}.configuretext{display:table-cell;vertical-align:middle;height:34px}.dropdown-content a:hover{background-color:#f1f1f1}.lockInvisible{margin-right:-17px}.dropdown-click{display:block!important;-webkit-animation:.3s ease-out slide-down;animation:.3s ease-out slide-down}.download-icon{cursor:pointer}.dropdown:hover .dropdown-content{color:#fff}.title-bar-lock-icon{margin:0 3px}.hr{border:0;border-top:1px solid rgba(0,0,0,.1)}.settingstyle{color:#9fa0a4;font-size:12px}@-webkit-keyframes slide-down{0%{opacity:0;transform:translateY(-20%)}100%{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-20%)}100%{opacity:1;transform:translateY(0)}}.widget-config-item i{font-size:17px;color:#42b4e6}.widget-config-item span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}.lock{color:#42b4e6}.locked{color:#42b4e6;background:#fff}.partiallocked{color:#a0d9f2}.unlocked{display:none}.download{visibility:hidden;opacity:0;transition:visibility,opacity .5s linear;position:relative}.wc-wrapper:hover .download{visibility:visible;opacity:1}.download-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.download-content a:hover{background-color:#f1f1f1}.download-content a i{font-size:17px;color:#42b4e6}.download-content a span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}.title-label{width:96%;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lock-dropdown{transition:visibility,opacity .5s linear;position:relative;display:inline-block;margin:0 6px 0 10px}.lock-dropdown-content{display:none;margin-top:8px;position:absolute;right:0;top:79%;box-shadow:0 8px 16px 8px rgba(0,0,0,.2);z-index:899;font-size:12px;min-width:220px!important;min-height:112px;background-color:#219bfd;opacity:.9;padding:15px;color:#fff}.lock-dropdown-content hr{border-bottom:1px solid #fff}.lock-dropdown:hover .lock-dropdown-content{display:block!important;-webkit-animation:.3s ease-out slide-down;animation:.3s ease-out slide-down}"]
+                template: "<div #wcWrapper class=\"wc-wrapper\" (mouseenter)=\"mouseHover(true)\" (mouseleave)=\"mouseHover(false)\"\r\n  [ngStyle]=\"{'margin-left': noPadding?'0px':'15px','margin-right': noPadding?'0px':'15px'}\">\r\n  <div class=\"wcheader widget-move\" [ngClass]=\"{'underLine': enableTitleLine || isWidgetStateApplicable}\">\r\n    <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;padding-right: 0px;\">\r\n      <div style=\"display:flex;margin-top:10px;\"\r\n        [ngStyle]=\"{'margin-left': noPadding?'15px':'0px','margin-right': noPadding?'15px':'0px'}\">\r\n        <div class=\"col-md-10 float-left title-label\">\r\n          <ra-tooltip [value]=\"toolTipValue\" [width]=\"toolTipWidth\">\r\n            <div style=\"text-overflow: ellipsis;white-space: nowrap;overflow: hidden;\" (mouseover)=\"mouseOver($event)\"\r\n              #searchInput>{{data.widgetInfo.widgetTitle}}</div>\r\n          </ra-tooltip>\r\n        </div>\r\n        <div class=\"col-md-2\" style=\"cursor:default;padding-right: 0px;\">\r\n          <div class=\"float-right\" style=\"display: flex;\">\r\n            <div class=\"title-bar-lock-icon lock-dropdown\" [hidden]=\"!lockDetails && !lockTemplateInfo\">\r\n              <i class=\"fal fa-lock lock\"></i>\r\n              <div class=\"lock-dropdown-content light widget-config-item\">\r\n                <div *ngIf=\"lockDetails && !lockTemplateInfo\">\r\n                  <label style=\"color: #D9F0FA;\">\r\n                    {{'Common.lockedfields'|translate}}\r\n                  </label>\r\n                  <div style=\"color: white;\">\r\n                    <label class=\"bold\" style=\"margin-bottom: 0px;width: 100%;\" *ngFor=\"let item of lockDetails\">\r\n                      {{item}}\r\n                    </label>\r\n                  </div>\r\n                  <hr>\r\n                  <div style=\"color: #D9F0FA;\">\r\n                    <label>{{'Common.lockedfieldseditinfo'|translate}}</label>\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"!lockDetails && lockTemplateInfo\">\r\n                  <ng-container *ngTemplateOutlet=\"lockTemplateInfo\">\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"widget-menu\" style=\"width:10px;\" [ngClass]=\"{'widget-menu-show': isMouseHover}\">\r\n              <div class=\"dropbtn title-bar-icon\">\r\n                <i (click)=\"showDropDown($event)\" #widgetDropdown class=\"fal fa-ellipsis-v widget-menu-ellipse\"></i>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"wcBody\" [ngStyle]=\"{'bottom': noPadding?'0px':'10px'}\">\r\n    <div [hidden]=\"isWidgetStateApplicable\" class=\"m-fadeOut widget-overlay\" [ngClass]=\"{'m-fadeIn':  showPanel}\">\r\n      <div class=\"lds-roller\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"wc\" [hidden]=\"isWidgetStateApplicable\">\r\n      <div #ctlWidget></div>\r\n    </div>\r\n    <div *ngIf=\"isWidgetStateApplicable\" class=\"defaultConfig\">\r\n      <ra-widget-state style=\"width: 100%;\" [isWidgetStateApplicable]=\"isWidgetStateApplicable\" [isGlobalFilterApplied]=\"isGlobalFilterApplied\"\r\n        [widgetEmptyState]=\"widgetEmptyState\" (editWidgetClicked)=editWidget()>\r\n      </ra-widget-state>\r\n    </div>\r\n    <div>\r\n    </div>\r\n  </div>\r\n</div>"
             }] }
 ];
 /** @nocollapse */
@@ -1889,8 +2046,8 @@ RAWidgetContainer.ctorParameters = () => [
 RAWidgetContainer.propDecorators = {
     ctlWidget: [{ type: ViewChild, args: ['ctlWidget', { static: false },] }],
     widgetDropdown: [{ type: ViewChild, args: ['widgetDropdown', { static: false },] }],
-    widgetDownload: [{ type: ViewChild, args: ['widgetDownload', { static: false },] }],
     searchInput: [{ type: ViewChild, args: ['searchInput', { static: false },] }],
+    wcWrapper: [{ type: ViewChild, args: ['wcWrapper', { static: false },] }],
     widgetInstanceId: [{ type: Input, args: ['widget-instance-id',] }],
     globalFilter: [{ type: Input, args: ['global-filter',] }],
     data: [{ type: Input, args: ['data',] }],
@@ -1920,11 +2077,6 @@ if (false) {
      * @private
      */
     RAWidgetContainer.prototype.configChanged;
-    /**
-     * @type {?}
-     * @private
-     */
-    RAWidgetContainer.prototype.isIEOrEdge;
     /** @type {?} */
     RAWidgetContainer.prototype.widgetHeight;
     /** @type {?} */
@@ -1938,10 +2090,6 @@ if (false) {
     /** @type {?} */
     RAWidgetContainer.prototype.isGridDownloadVisible;
     /** @type {?} */
-    RAWidgetContainer.prototype.dropDownShown;
-    /** @type {?} */
-    RAWidgetContainer.prototype.isDownloadChartVisible;
-    /** @type {?} */
     RAWidgetContainer.prototype.downloadIconType;
     /** @type {?} */
     RAWidgetContainer.prototype.enableTitleLine;
@@ -1990,14 +2138,16 @@ if (false) {
     /** @type {?} */
     RAWidgetContainer.prototype.noPadding;
     /** @type {?} */
+    RAWidgetContainer.prototype.isMouseHover;
+    /** @type {?} */
     RAWidgetContainer.prototype.ctlWidget;
     /** @type {?} */
     RAWidgetContainer.prototype.widgetDropdown;
     /** @type {?} */
-    RAWidgetContainer.prototype.widgetDownload;
-    /** @type {?} */
     RAWidgetContainer.prototype.searchInput;
     /** @type {?} */
+    RAWidgetContainer.prototype.wcWrapper;
+    /** @type {?} */
     RAWidgetContainer.prototype.widgetInstanceId;
     /** @type {?} */
     RAWidgetContainer.prototype.globalFilter;