q2-tecton-elements 1.63.2 → 1.64.0

package/dist/q2-tecton-elements/q2-chart-donut.entry.js

@@ -1,10 +1,10 @@
 import { r as t, c as e, h as n, g as i } from "./index-CGkHOjh1.js";
 
-import { o as r, i as a, l as s, g as o } from "./index-YJ5sXwiE.js";
+import { o as a, i as r, l as s, g as o } from "./index-YJ5sXwiE.js";
 
 import { u as c, o as l, W as d, j as h, H as u, X as p, Y as v, Z as f, _ as b, $ as g, a0 as m, d as x, c as y, m as w, i as I, g as S } from "./charting-BNYmzAlx.js";
 
-import { T as k, a as z, L as C, b as A, S as T, c as U } from "./install-qbdIiszz.js";
+import { T as k, a as z, L as A, b as C, S as T, c as U } from "./install-qbdIiszz.js";
 
 function install$4(t) {
   c(l);
@@ -87,8 +87,8 @@ function install$4(t) {
 
 function legendSelectActionHandler(t, e, n) {
   var i = t === "allSelect" || t === "inverseSelect";
-  var r = {};
-  var a = [];
+  var a = {};
+  var r = [];
   n.eachComponent({
     mainType: "legend",
     query: e
@@ -98,13 +98,13 @@ function legendSelectActionHandler(t, e, n) {
     } else {
       n[t](e.name);
     }
-    makeSelectedMap(n, r);
-    a.push(n.componentIndex);
+    makeSelectedMap(n, a);
+    r.push(n.componentIndex);
   }));
   var s = {};
   // make selectedMap from all legend components
     n.eachComponent("legend", (function(t) {
-    u(r, (function(e, n) {
+    u(a, (function(e, n) {
       // Force other legend has same selected status
       // Or the first is toggled to true and other are toggled to false
       // In the case one legend has some item unSelected in option. And if other legend
@@ -117,7 +117,7 @@ function legendSelectActionHandler(t, e, n) {
     return i ? {
     selected: s,
     // return legendIndex array to tell the developers which legends are allSelect / inverseSelect
-    legendIndex: a
+    legendIndex: r
   } : {
     name: e.name,
     selected: s
@@ -132,12 +132,12 @@ function makeSelectedMap(t, e) {
         if (i === "\n" || i === "") {
       return;
     }
-    var r = t.isSelected(i);
+    var a = t.isSelected(i);
     if (p(n, i)) {
       // Unselected if any legend is unselected
-      n[i] = n[i] && r;
+      n[i] = n[i] && a;
     } else {
-      n[i] = r;
+      n[i] = a;
     }
   }));
   return n;
@@ -169,8 +169,8 @@ function installLegendAction(t) {
 }
 
 function install$3(t) {
-  t.registerComponentModel(C);
-  t.registerComponentView(A);
+  t.registerComponentModel(A);
+  t.registerComponentView(C);
   t.registerProcessor(t.PRIORITY.PROCESSOR.SERIES_FILTER, legendFilter);
   t.registerSubTypeDefaulter("legend", (function() {
     return "plain";
@@ -299,9 +299,9 @@ function install$1(t) {
       i.filterSelf((function(t) {
         var e = i.getName(t);
         // If in any legend component the status is not selected.
-                for (var r = 0; r < n.length; r++) {
+                for (var a = 0; a < n.length; a++) {
           // @ts-ignore FIXME: LegendModel
-          if (!n[r].isSelected(e)) {
+          if (!n[a].isSelected(e)) {
             return false;
           }
         }
@@ -338,11 +338,11 @@ function install(t) {
   t.registerProcessor(negativeDataFilter("pie"));
 }
 
-const D = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container,.center-card{--comp-background-color:var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)))}.center-card{width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:block}.center-card:is(button){cursor:pointer;background:var(--comp-background-color);border:0;border-radius:var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 4px)))}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
+const j = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)));border-radius:50%}.center-card{height:100%;width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.center-card:is(button){cursor:pointer;background:var(--tct-chart-donut-button-background, transparent);border:0;border-radius:50%}.center-card:is(button):hover{background:var(--tct-chart-donut-button-hover-background, transparent)}.center-card:is(button):active{background:var(--tct-chart-donut-button-active-background, transparent)}.center-card:is(button):focus-visible{background:var(--tct-chart-donut-button-focus-background, transparent)}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
 
 c([ install$4, install$1, install, x, y, w ]);
 
-const j = class {
+const D = class {
   constructor(n) {
     t(this, n);
     this.change = e(this, "change", 7);
@@ -515,13 +515,13 @@ const j = class {
     this.chart = t;
     this.setLegendData();
     this.selectById(this.selectedId);
-    r(this.hostElement);
+    a(this.hostElement);
   }
   // #endregion
   // #region Listeners
   delegateFocus(t) {
     var e;
-    if (!a(t, this.hostElement)) return;
+    if (!r(t, this.hostElement)) return;
     if (!this.isClickable) return;
     (e = this.centerButtonElement) === null || e === void 0 ? void 0 : e.focus();
   }
@@ -668,9 +668,9 @@ const j = class {
   getColors() {
     const t = [ 1, 3, 8, 4, 2, 10, 7, 11, 6, 9, 12, 5 ].map((t => `--comp-color-${t}`));
     return this.data.reduce(((e, n, i) => {
-      let r = t[i % t.length];
-      if (n.color) r = n.color;
-      e.push(S(r, this.chartContainerStyles, this.hostElementStyles) || r);
+      let a = t[i % t.length];
+      if (n.color) a = n.color;
+      e.push(S(a, this.chartContainerStyles, this.hostElementStyles) || a);
       return e;
     }), []);
   }
@@ -679,9 +679,9 @@ const j = class {
     if (t.startsWith("var(") && t.endsWith(")")) {
       const n = /var\((.*)\)/g;
       const i = n.exec(t);
-      const r = i.length >= 2 ? i[1].split(",") : [];
-      t = r[0];
-      e = r[1];
+      const a = i.length >= 2 ? i[1].split(",") : [];
+      t = a[0];
+      e = a[1];
     }
     let n = this.chartContainerStyles.getPropertyValue(t).trim();
     if (!n) n = this.hostElementStyles.getPropertyValue(t).trim();
@@ -729,9 +729,9 @@ const j = class {
       t.event.stop();
     }));
     t.on("selectchanged", (t => {
-      var e, n, i, r;
-      const a = (r = (i = (n = (e = t.selected) === null || e === void 0 ? void 0 : e[0]) === null || n === void 0 ? void 0 : n.dataIndex) === null || i === void 0 ? void 0 : i[0]) !== null && r !== void 0 ? r : null;
-      const s = typeof a === "number" ? this.getDataByIndex(a) : Object.assign({}, this.defaultRecord);
+      var e, n, i, a;
+      const r = (a = (i = (n = (e = t.selected) === null || e === void 0 ? void 0 : e[0]) === null || n === void 0 ? void 0 : n.dataIndex) === null || i === void 0 ? void 0 : i[0]) !== null && a !== void 0 ? a : null;
+      const s = typeof r === "number" ? this.getDataByIndex(r) : Object.assign({}, this.defaultRecord);
       this.selectedId = s.id;
       this.isInChangeEvent = true;
       this.change.emit(s);
@@ -773,9 +773,9 @@ const j = class {
         labelLine: {
           show: false
         },
+        padAngle: 3,
         itemStyle: {
-          borderWidth: 5,
-          borderColor: S("--comp-background-color", this.chartContainerStyles, this.hostElementStyles)
+          borderRadius: 2
         },
         emphasis: {
           disabled: this.isMobile,
@@ -805,11 +805,11 @@ const j = class {
   // #endregion
   // #region Render Methods
   renderCenterBlock() {
-    const {icon: t, name: e, value: i, color: r} = this.centerData;
-    const {isClickable: a} = this;
-    const o = a ? "button" : "div";
+    const {icon: t, name: e, value: i, color: a} = this.centerData;
+    const {isClickable: r} = this;
+    const o = r ? "button" : "div";
     const c = this.displayValue(i);
-    const l = a ? {
+    const l = r ? {
       onKeyDown: this.onButtonKeyDown,
       onClick: this.onButtonClick,
       ref: t => this.centerButtonElement = t,
@@ -819,7 +819,8 @@ const j = class {
     return n("div", {
       class: "center-card-container",
       style: {
-        width: `calc(${this.innerRadius} - 10%)`
+        width: `calc(${this.innerRadius})`,
+        height: `calc(${this.innerRadius})`
       }
     }, n("div", {
       id: "center-card-description",
@@ -829,10 +830,10 @@ const j = class {
       "test-id": "centerCard"
     }, l), !!t && n("q2-icon", {
       type: t,
-      style: r && {
-        "--tct-icon-stroke-primary": r,
-        "--tct-icon-stroke-secondary": r,
-        color: r
+      style: a && {
+        "--tct-icon-stroke-primary": a,
+        "--tct-icon-stroke-secondary": a,
+        color: a
       }
     }), !!e && n("div", {
       class: "name"
@@ -842,15 +843,15 @@ const j = class {
   }
   render() {
     return n("click-elsewhere", {
-      key: "7b0842ae9a1bf7f2d90a6e816423b8f151cc9f80",
+      key: "7fce70ed13e0ab56961564fee31721fe7ad4e850",
       onChange: this.onClickElsewhere
     }, n("figure", {
-      key: "e1862769652dee09eb717ec27ebfba2f32898247"
+      key: "1603c5194a1451188564b52af36cafb1c5cf53f6"
     }, n("div", {
-      key: "cf3eef7cc8614ecceabed79482ad2818ed3d276b",
+      key: "2fbf01b6b59713110ab0888ca3ea5d58e1e2bb97",
       class: "container"
     }, n("div", {
-      key: "87e36066691c80fdf385bd299e6b3e1220aaf180",
+      key: "95fe2ad723f1d11e585299a6edb3637452b3328f",
       ref: t => this.chartContainer = t,
       "aria-describedby": !this.isClickable ? "center-card-description" : undefined,
       class: "chart-container",
@@ -860,9 +861,9 @@ const j = class {
       tabIndex: !this.isClickable ? 0 : undefined,
       onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined
     }), this.renderCenterBlock()), this.showLegend && n("figcaption", {
-      key: "cbba4155c6de3cbc9029967f974f0cfee886ec89"
+      key: "e27530f5c8bcf06034baa2b3d65e4f6194e84838"
     }, n("q2-legend", {
-      key: "e63cdcc2ce1028d6175ed8412b3e47b6b085c11b",
+      key: "a56be723750d75cc5698add048e49c1f9bf3a26f",
       class: "legend",
       data: this.legendData,
       format: this.format,
@@ -890,8 +891,8 @@ const j = class {
   }
 };
 
-j.style = D;
+D.style = j;
 
-export { j as q2_chart_donut };
+export { D as q2_chart_donut };
 //# sourceMappingURL=q2-chart-donut.entry.esm.js.map
 //# sourceMappingURL=q2-chart-donut.entry.js.map