q2-tecton-elements 1.18.0 → 1.19.0

package/dist/collection/components/q2-chart-donut/index.js

@@ -1,4 +1,4 @@
-import { Component, State, Prop, h, Element, Event, Method, Watch, Listen, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import * as echarts from 'echarts/core';
 import { TooltipComponent, LegendComponent, AriaComponent, } from 'echarts/components';
 import { PieChart } from 'echarts/charts';
@@ -8,12 +8,6 @@ import { isEventFromElement, loc, overrideFocus } from 'src/utils';
 echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);
 export class Q2ChartDonut {
   constructor() {
-    this.innerRadius = '70%';
-    this.outerRadius = '85%';
-    this.minSliceSize = '2.5%';
-    this.selectedOffset = 10;
-    this.hoverScaleSize = 5;
-    this.data = [];
     this.defaultRecord = { id: null, value: null, name: null };
     /// Event Handlers ///
     this.onClickElsewhere = (event) => {
@@ -67,6 +61,19 @@ export class Q2ChartDonut {
       this.clearSelection();
       event.stopPropagation();
     };
+    this.chartName = undefined;
+    this.summaryIcon = undefined;
+    this.summaryName = undefined;
+    this.innerRadius = '70%';
+    this.outerRadius = '85%';
+    this.minSliceSize = '2.5%';
+    this.selectedOffset = 10;
+    this.hoverScaleSize = 5;
+    this.format = undefined;
+    this.isClickable = undefined;
+    this.data = [];
+    this.selectedId = undefined;
+    this.hoveredId = undefined;
   }
   /// LifeCycle Hooks ///
   componentDidLoad() {
@@ -323,355 +330,364 @@ export class Q2ChartDonut {
         'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
       }
       : null;
-    return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } },
-      h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props),
-        icon && (h("q2-icon", { type: icon, style: color && {
-            '--tct-icon-stroke-primary': color,
-            '--tct-icon-stroke-secondary': color,
-            color,
-          } })),
-        name && h("div", { class: "name" }, name),
-        value && h("div", { class: "value" }, displayValue))));
+    return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), icon && (h("q2-icon", { type: icon, style: color && {
+        '--tct-icon-stroke-primary': color,
+        '--tct-icon-stroke-secondary': color,
+        color,
+      } })), name && h("div", { class: "name" }, name), value && h("div", { class: "value" }, displayValue))));
   }
   render() {
-    return (h("click-elsewhere", { onChange: this.onClickElsewhere },
-      h("div", { class: "container" },
-        h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }),
-        this.renderCenterBlock())));
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: "container" }, h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));
   }
   static get is() { return "q2-chart-donut"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "chartName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "chart-name",
-      "reflect": true
-    },
-    "summaryIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "summary-icon",
-      "reflect": true
-    },
-    "summaryName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "summary-name",
-      "reflect": true
-    },
-    "innerRadius": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "inner-radius",
-      "reflect": false,
-      "defaultValue": "'70%'"
-    },
-    "outerRadius": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "outer-radius",
-      "reflect": false,
-      "defaultValue": "'85%'"
-    },
-    "minSliceSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "min-slice-size",
-      "reflect": false,
-      "defaultValue": "'2.5%'"
-    },
-    "selectedOffset": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected-offset",
-      "reflect": false,
-      "defaultValue": "10"
-    },
-    "hoverScaleSize": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "chartName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "chart-name",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "summaryIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "summary-icon",
+        "reflect": true
       },
-      "attribute": "hover-scale-size",
-      "reflect": false,
-      "defaultValue": "5"
-    },
-    "format": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'currency'",
-        "resolved": "\"currency\"",
-        "references": {}
+      "summaryName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "summary-name",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "innerRadius": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inner-radius",
+        "reflect": false,
+        "defaultValue": "'70%'"
       },
-      "attribute": "format",
-      "reflect": true
-    },
-    "isClickable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "outerRadius": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "outer-radius",
+        "reflect": false,
+        "defaultValue": "'85%'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "minSliceSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min-slice-size",
+        "reflect": false,
+        "defaultValue": "'2.5%'"
       },
-      "attribute": "is-clickable",
-      "reflect": true
-    },
-    "data": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IChartData[]",
-        "resolved": "IChartData[]",
-        "references": {
-          "IChartData": {
-            "location": "local"
-          }
-        }
+      "selectedOffset": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-offset",
+        "reflect": false,
+        "defaultValue": "10"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "hoverScaleSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hover-scale-size",
+        "reflect": false,
+        "defaultValue": "5"
       },
-      "defaultValue": "[]"
-    }
-  }; }
-  static get states() { return {
-    "selectedId": {},
-    "hoveredId": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "format": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'currency'",
+          "resolved": "\"currency\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "format",
+        "reflect": true
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "click",
-      "name": "click",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "isClickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-clickable",
+        "reflect": true
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "selectById": {
-      "complexType": {
-        "signature": "(id: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IChartData[]",
+          "resolved": "IChartData[]",
+          "references": {
+            "IChartData": {
+              "location": "local"
+            }
           }
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
       }
-    },
-    "selectByIndex": {
-      "complexType": {
-        "signature": "(index: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "selectedId": {},
+      "hoveredId": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "click",
+        "name": "click",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "selectById": {
+        "complexType": {
+          "signature": "(id: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "clearSelection": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "selectByIndex": {
+        "complexType": {
+          "signature": "(index: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "clearSelection": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "chartName",
-      "methodName": "propsUpdates"
-    }, {
-      "propName": "innerRadius",
-      "methodName": "propsUpdates"
-    }, {
-      "propName": "outerRadius",
-      "methodName": "propsUpdates"
-    }, {
-      "propName": "minSliceSize",
-      "methodName": "propsUpdates"
-    }, {
-      "propName": "hoverScaleSize",
-      "methodName": "propsUpdates"
-    }, {
-      "propName": "selectedOffset",
-      "methodName": "propsUpdates"
-    }, {
-      "propName": "data",
-      "methodName": "propsUpdates"
-    }, {
-      "propName": "data",
-      "methodName": "dataUpdated"
-    }, {
-      "propName": "innerRadius",
-      "methodName": "innerRadiusUpdated"
-    }, {
-      "propName": "outerRadius",
-      "methodName": "outerRadiusUpdated"
-    }]; }
-  static get listeners() { return [{
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "chartName",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "innerRadius",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "outerRadius",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "minSliceSize",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "hoverScaleSize",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "selectedOffset",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "data",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "data",
+        "methodName": "dataUpdated"
+      }, {
+        "propName": "innerRadius",
+        "methodName": "innerRadiusUpdated"
+      }, {
+        "propName": "outerRadius",
+        "methodName": "outerRadiusUpdated"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }