@yoobic/yobi 8.5.0-6 → 8.5.0-8

package/dist/collection/feature-platform/insight/kpi-container/kpi-container.js

@@ -1,5 +1,5 @@
 import { getChartTypes, intersectionObserve, isIntersectionObserverSupported, isWeb, showActionSheet, translate, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooKpiContainerComponent {
   async getSVG(width, height, x, y, margin = 0) {
@@ -197,9 +197,7 @@ export class YooKpiContainerComponent {
       return h("yoo-loader", { class: "absolute", size: "large" });
     }
     else if (!this.config && this.forceEmptyState) {
-      return (h("div", { class: "empty-state" },
-        h("yoo-empty-state", { type: "nodata" }),
-        h("div", null, translate('LISTEMPTY'))));
+      return (h("div", { class: "empty-state" }, h("yoo-empty-state", { type: "nodata" }), h("div", null, translate('LISTEMPTY'))));
     }
     return [
       h("div", { class: 'kpi-container ' + this.type, onClick: () => !isTableau && !isWeb(this.host) && this.onShowDialog() }, this.renderKpi())
@@ -214,14 +212,13 @@ export class YooKpiContainerComponent {
     return !this.dontRender && (h("yoo-kpi", { class: {
         interactive: true,
         rounded: (_f = (_e = this.host) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.contains('rounded') // only yoobic.com hosted iframes should be interactive
-      }, ref: (el) => (this.kpi = el), config: this.config, photosSrc: this.config.photos, type: this.type, chartClass: this.chartClass, style: kpiStyle, isFullScreen: this.isFullScreen, isFullHeight: this.isFullHeight, isFormPreview: this.isFormPreview, definition: this.definition, 
+      }, ref: (el) => (this.kpi = el), config: this.config, photosSrc: this.config.photos, type: this.type, chartClass: this.chartClass, style: kpiStyle, isFullScreen: this.isFullScreen, isFullHeight: this.isFullHeight, isFormPreview: this.isFormPreview, definition: this.definition,
       // showTable={this.showTable}
       disableResize: this.disableResize, onKpiEdited: (ev) => this.onKpiEdited(ev), onKpiClick: (ev) => this.onKpiClick(ev), onKpiDoubleClick: (ev) => this.onKpiDoubleClick(ev), onKpiLegendItemClick: (ev) => this.onKpiLegendItemClick(ev), onKpiLinkClick: (ev) => this.onKpiLinkClick(ev), onOpenInFullscreen: () => this.onShowDialog() }));
   }
   renderHelpButton(descriptionKey) {
     const description = translate(descriptionKey);
-    return (h("yoo-tooltip", { clickable: true, content: description, placement: "right", coeffMaxWidth: 0.85 },
-      h("yoo-icon", { name: "help", color: "stable-alt" })));
+    return (h("yoo-tooltip", { clickable: true, content: description, placement: "right", coeffMaxWidth: 0.85 }, h("yoo-icon", { name: "help", color: "stable-alt" })));
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
@@ -230,700 +227,692 @@ export class YooKpiContainerComponent {
         web: isWeb(this.host),
         [this.type || 'default']: true,
         ...getAppContext(this.host)
-      } },
-      h("div", { class: {
-          container: true,
-          fullscreen: this.isFullScreen,
-          'full-height': this.isFullHeight
-        } },
-        this.isFullScreen || this.hideHeader ? null : (h("div", { class: "heading" },
-          this.isEditMode && isWeb(this.host) && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('YOOBICMOVE'), placement: "bottom" },
-            h("yoo-icon", { class: "margin-right draggable", name: "draggable", color: "stable", size: "medium" }))),
-          h("div", { class: "title" },
-            translateMulti(this.heading), (_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.extraIcones) === null || _b === void 0 ? void 0 :
-            _b.map((extra) => {
-              return h("yoo-icon", { name: extra.icon, color: extra.color, size: "medium", onClick: () => this.onShowDialog() });
-            })),
-          ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpiFormValues) === null || _d === void 0 ? void 0 : _d.locked) && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('GRAPHLOCKED'), placement: "bottom" },
-            h("yoo-icon", { name: "lock", color: "dark", size: "medium" }))),
-          this.isEditMode && isWeb(this.host) && ((_e = this.definition) === null || _e === void 0 ? void 0 : _e.kpiType) === 'CampaignsPivotTableKpi' && ((_f = this.definition) === null || _f === void 0 ? void 0 : _f.showAs) === 'grid' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('TOGGLETOOLBOX'), placement: "bottom" },
-            h("yoo-icon", { name: "settings", color: "stable", size: "medium", onClick: () => this.onToogleToolsPanel() }))),
-          h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: isWeb(this.host) ? translate('SHOWDATA') : '', placement: "bottom" },
-            h("yoo-icon", { name: "maximize", color: "stable", size: "medium", onClick: () => this.onShowDialog() })),
-          this.isInDashboard && ((_h = (_g = this.config) === null || _g === void 0 ? void 0 : _g.exporting) === null || _h === void 0 ? void 0 : _h.showTable) !== false && this.type === 'chart' && ((_j = this.definition) === null || _j === void 0 ? void 0 : _j.kpiType) !== 'CampaignsPivotTableKpi' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('SHOWASTABLE'), placement: "bottom" },
-            h("yoo-icon", { name: "table", color: "stable", size: "medium", onClick: () => this.onToggleTable() }))),
-          ((_l = (_k = this.config) === null || _k === void 0 ? void 0 : _k.exporting) === null || _l === void 0 ? void 0 : _l.showTable) !== false && this.type === 'grid' && ((_m = this.definition) === null || _m === void 0 ? void 0 : _m.kpiType) !== 'CampaignsPivotTableKpi' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('SHOWASCHART'), placement: "bottom" },
-            h("yoo-icon", { name: "chart", color: "stable", size: "medium", onClick: () => this.onToggleTable() }))),
-          this.definition && this.definition.help && this.renderHelpButton(this.definition.help),
-          this.buttons && this.buttons.length > 0 && (h("yoo-icon", { ref: (el) => (iconElement = el), slot: "icon-only", name: "more", color: "stable", size: "medium", onClick: (ev) => this.onShowMore(ev, iconElement) })))),
-        h("slot", { name: "start" }),
-        !this.isFullScreen && !this.hideHeader && ((_o = this.definition) === null || _o === void 0 ? void 0 : _o.description) && (h("yoo-truncate", { class: { subheading: true, grid: ((_p = this.definition) === null || _p === void 0 ? void 0 : _p.showAs) === 'grid' }, showEllipsisButton: true, maxLength: 150, content: translateMulti(this.definition.description) })),
-        h("div", { class: "content" }, this.renderKpiContent()),
-        h("slot", null))));
+      } }, h("div", { class: {
+        container: true,
+        fullscreen: this.isFullScreen,
+        'full-height': this.isFullHeight
+      } }, this.isFullScreen || this.hideHeader ? null : (h("div", { class: "heading" }, this.isEditMode && isWeb(this.host) && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('YOOBICMOVE'), placement: "bottom" }, h("yoo-icon", { class: "margin-right draggable", name: "draggable", color: "stable", size: "medium" }))), h("div", { class: "title" }, translateMulti(this.heading), (_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.extraIcones) === null || _b === void 0 ? void 0 :
+      _b.map((extra) => {
+        return h("yoo-icon", { name: extra.icon, color: extra.color, size: "medium", onClick: () => this.onShowDialog() });
+      })), ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpiFormValues) === null || _d === void 0 ? void 0 : _d.locked) && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('GRAPHLOCKED'), placement: "bottom" }, h("yoo-icon", { name: "lock", color: "dark", size: "medium" }))), this.isEditMode && isWeb(this.host) && ((_e = this.definition) === null || _e === void 0 ? void 0 : _e.kpiType) === 'CampaignsPivotTableKpi' && ((_f = this.definition) === null || _f === void 0 ? void 0 : _f.showAs) === 'grid' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('TOGGLETOOLBOX'), placement: "bottom" }, h("yoo-icon", { name: "settings", color: "stable", size: "medium", onClick: () => this.onToogleToolsPanel() }))), h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: isWeb(this.host) ? translate('SHOWDATA') : '', placement: "bottom" }, h("yoo-icon", { name: "maximize", color: "stable", size: "medium", onClick: () => this.onShowDialog() })), this.isInDashboard && ((_h = (_g = this.config) === null || _g === void 0 ? void 0 : _g.exporting) === null || _h === void 0 ? void 0 : _h.showTable) !== false && this.type === 'chart' && ((_j = this.definition) === null || _j === void 0 ? void 0 : _j.kpiType) !== 'CampaignsPivotTableKpi' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('SHOWASTABLE'), placement: "bottom" }, h("yoo-icon", { name: "table", color: "stable", size: "medium", onClick: () => this.onToggleTable() }))), ((_l = (_k = this.config) === null || _k === void 0 ? void 0 : _k.exporting) === null || _l === void 0 ? void 0 : _l.showTable) !== false && this.type === 'grid' && ((_m = this.definition) === null || _m === void 0 ? void 0 : _m.kpiType) !== 'CampaignsPivotTableKpi' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('SHOWASCHART'), placement: "bottom" }, h("yoo-icon", { name: "chart", color: "stable", size: "medium", onClick: () => this.onToggleTable() }))), this.definition && this.definition.help && this.renderHelpButton(this.definition.help), this.buttons && this.buttons.length > 0 && (h("yoo-icon", { ref: (el) => (iconElement = el), slot: "icon-only", name: "more", color: "stable", size: "medium", onClick: (ev) => this.onShowMore(ev, iconElement) })))), h("slot", { name: "start" }), !this.isFullScreen && !this.hideHeader && ((_o = this.definition) === null || _o === void 0 ? void 0 : _o.description) && (h("yoo-truncate", { class: { subheading: true, grid: ((_p = this.definition) === null || _p === void 0 ? void 0 : _p.showAs) === 'grid' }, showEllipsisButton: true, maxLength: 150, content: translateMulti(this.definition.description) })), h("div", { class: "content" }, this.renderKpiContent()), h("slot", null))));
   }
   static get is() { return "yoo-kpi-container"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["kpi-container.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["kpi-container.css"]
-  }; }
-  static get properties() { return {
-    "chartClass": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "chart-class",
-      "reflect": false
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "heading",
-      "reflect": false
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "IKpiTypes",
-        "resolved": "\"calendar\" | \"carousel\" | \"chart\" | \"chartio\" | \"external\" | \"grid\" | \"map\" | \"micro\"",
-        "references": {
-          "IKpiTypes": {
-            "location": "import",
-            "path": "../../../interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["kpi-container.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kpi-container.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "chartClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "chart-class",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IKpiTypes",
+          "resolved": "\"calendar\" | \"carousel\" | \"chart\" | \"chartio\" | \"external\" | \"grid\" | \"map\" | \"micro\"",
+          "references": {
+            "IKpiTypes": {
+              "location": "import",
+              "path": "../../../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false
-    },
-    "config": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "config",
-      "reflect": false
-    },
-    "isInDashboard": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-in-dashboard",
-      "reflect": false
-    },
-    "disableResize": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disable-resize",
-      "reflect": false
-    },
-    "size": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false
-    },
-    "isFullScreen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-full-screen",
-      "reflect": false
-    },
-    "isFullHeight": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-full-height",
-      "reflect": false
-    },
-    "definition": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IChartDefinition",
-        "resolved": "IChartDefinition",
-        "references": {
-          "IChartDefinition": {
-            "location": "import",
-            "path": "@shared/interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false
+      },
+      "config": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "config",
+        "reflect": false
+      },
+      "isInDashboard": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-in-dashboard",
+        "reflect": false
+      },
+      "disableResize": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-resize",
+        "reflect": false
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false
+      },
+      "isFullScreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-full-screen",
+        "reflect": false
+      },
+      "isFullHeight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-full-height",
+        "reflect": false
+      },
+      "definition": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IChartDefinition",
+          "resolved": "IChartDefinition",
+          "references": {
+            "IChartDefinition": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "forceEmptyState": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "force-empty-state",
-      "reflect": false
-    },
-    "isFormPreview": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-form-preview",
-      "reflect": false
-    },
-    "hideHeader": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hide-header",
-      "reflect": false
-    },
-    "isEditMode": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-edit-mode",
-      "reflect": false
-    },
-    "hasError": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "has-error",
-      "reflect": false
-    },
-    "hasErrorTooMuchData": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "has-error-too-much-data",
-      "reflect": false
-    },
-    "dontRender": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "dont-render",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "isLoading": {}
-  }; }
-  static get events() { return [{
-      "method": "showDetail",
-      "name": "showDetail",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      }
-    }, {
-      "method": "kpiClick",
-      "name": "kpiClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "kpiLinkClick",
-      "name": "kpiLinkClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "kpiDoubleClick",
-      "name": "kpiDoubleClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      }
-    }, {
-      "method": "kpiLegendItemClick",
-      "name": "kpiLegendItemClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "kpiToggleTable",
-      "name": "kpiToggleTable",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "toggleInScrollView",
-      "name": "toggleInScrollView",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "kpiEdit",
-      "name": "kpiEdit",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "forceEmptyState": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "force-empty-state",
+        "reflect": false
+      },
+      "isFormPreview": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-form-preview",
+        "reflect": false
+      },
+      "hideHeader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-header",
+        "reflect": false
+      },
+      "isEditMode": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-edit-mode",
+        "reflect": false
+      },
+      "hasError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-error",
+        "reflect": false
+      },
+      "hasErrorTooMuchData": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-error-too-much-data",
+        "reflect": false
+      },
+      "dontRender": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dont-render",
+        "reflect": false
       }
-    }, {
-      "method": "kpiEdited",
-      "name": "kpiEdited",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IChartDefinition",
-        "resolved": "IChartDefinition",
-        "references": {
-          "IChartDefinition": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "isLoading": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "showDetail",
+        "name": "showDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
         }
-      }
-    }, {
-      "method": "kpiUpdateColors",
-      "name": "kpiUpdateColors",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "kpiDelete",
-      "name": "kpiDelete",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "kpiDuplicate",
-      "name": "kpiDuplicate",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "kpiCopyToAnotherTab",
-      "name": "kpiCopyToAnotherTab",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "kpiChartChangeType",
-      "name": "kpiChartChangeType",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "TChartType",
-        "resolved": "\"area\" | \"areaspline\" | \"bar\" | \"column\" | \"doughnut\" | \"header\" | \"heatmap\" | \"line\" | \"pie\" | \"radar\" | \"scatter\" | \"spline\" | \"treemap\" | \"wordcloud\"",
-        "references": {
-          "TChartType": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
+      }, {
+        "method": "kpiClick",
+        "name": "kpiClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
-      }
-    }, {
-      "method": "kpiToggleToolsPanel",
-      "name": "kpiToggleToolsPanel",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "kpiViewInfo",
-      "name": "kpiViewInfo",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "kpiRefresh",
-      "name": "kpiRefresh",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "getSVG": {
-      "complexType": {
-        "signature": "(width: any, height: any, x: any, y: any, margin?: number) => Promise<string>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }, {
+        "method": "kpiLinkClick",
+        "name": "kpiLinkClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "kpiDoubleClick",
+        "name": "kpiDoubleClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        }
+      }, {
+        "method": "kpiLegendItemClick",
+        "name": "kpiLegendItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "kpiToggleTable",
+        "name": "kpiToggleTable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "toggleInScrollView",
+        "name": "toggleInScrollView",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "kpiEdit",
+        "name": "kpiEdit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "kpiEdited",
+        "name": "kpiEdited",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IChartDefinition",
+          "resolved": "IChartDefinition",
+          "references": {
+            "IChartDefinition": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }, {
+        "method": "kpiUpdateColors",
+        "name": "kpiUpdateColors",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<string>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "toogleToolsPanel": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "kpiDelete",
+        "name": "kpiDelete",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "kpiDuplicate",
+        "name": "kpiDuplicate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "kpiCopyToAnotherTab",
+        "name": "kpiCopyToAnotherTab",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "kpiChartChangeType",
+        "name": "kpiChartChangeType",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "TChartType",
+          "resolved": "\"area\" | \"areaspline\" | \"bar\" | \"column\" | \"doughnut\" | \"header\" | \"heatmap\" | \"line\" | \"pie\" | \"radar\" | \"scatter\" | \"spline\" | \"treemap\" | \"wordcloud\"",
+          "references": {
+            "TChartType": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }, {
+        "method": "kpiToggleToolsPanel",
+        "name": "kpiToggleToolsPanel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "kpiViewInfo",
+        "name": "kpiViewInfo",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "kpiRefresh",
+        "name": "kpiRefresh",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getSVG": {
+        "complexType": {
+          "signature": "(width: any, height: any, x: any, y: any, margin?: number) => Promise<string>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "resize": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "toogleToolsPanel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setLoading": {
-      "complexType": {
-        "signature": "(loading: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "resize": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "setLoading": {
+        "complexType": {
+          "signature": "(loading: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "isEditMode",
-      "methodName": "onChangeEditMode"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "isEditMode",
+        "methodName": "onChangeEditMode"
+      }];
+  }
 }