npm - q2-tecton-elements - Versions diffs - 1.45.3 → 1.46.1 - Mend

q2-tecton-elements 1.45.3 → 1.46.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (434) hide show

package/dist/components/q2-chart-donut.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { o as overrideFocus, l as loc, d as isMobile, i as isEventFromElement } from './index2.js';
-import { d as defineCustomElement$3 } from './click-elsewhere2.js';
-import { d as defineCustomElement$2 } from './q2-icon2.js';
+import { d as defineCustomElement$4 } from './click-elsewhere2.js';
+import { d as defineCustomElement$3 } from './q2-icon2.js';
+import { d as defineCustomElement$2 } from './q2-legend2.js';
 import { al as normalizeCssArray, W as Rect, _ as __extends, am as ComponentModel, an as toCamelCase, ao as env, ap as isString, aq as isDom, D as isFunction, ar as normalizeEvent, x as convertToColorString, a0 as isArray, I as each$1, as as bind, at as indexOf, au as getPaddingFromTooltipModel, av as transformLocalCoord, j as isObject, aw as throwError, E as ZRText, ax as getTooltipRenderMode, ay as createOrUpdate, az as clear, aA as register, d as getECData, aB as findPointFromSeries, aC as findEventDispatcher, aD as createTooltipMarkup, aE as TooltipMarkupStyleCreator, aF as getValueLabel, aG as trim, aH as getAxisRawValue, aI as normalizeTooltipFormatResult, a as extend, aJ as buildTooltipMarkup, aK as clone, aL as encodeHTML, aM as format, aN as formatTpl, aO as parsePercent, aP as getLayoutRect, aQ as unregister, aR as ComponentView, aS as Model, aT as preParseFinder, aU as queryReferringComponents, a9 as use, aV as install$5, aW as noop, aX as merge, aY as isNameSpecified, a4 as createHashMap, m as map, a6 as filter, o as isNumber, y as defaults, aZ as parse, a_ as stringify, b as setLabelStyle, a$ as enableHoverEmphasis, b0 as createTextStyle, b1 as setTooltipConfig, b2 as box, b3 as createOrUpdatePatternFromDecal, c as createSymbol, ai as curry$1, G as Group$2, b4 as getLayoutParams, ad as inheritDefaultOption, b5 as mergeLayoutParam, b6 as createIcon, b7 as retrieve2, u as updateProps, b8 as normalizeArcAngles, b9 as linearMap, a3 as makeInner, R as Point, ba as shiftLayoutOnY, i as initProps, s as saveOldStyle, z as setStatesStylesFromModel, t as toggleHoverEmphasis, g as getLabelStatesModels, bb as Polyline, bc as retrieve3, V as Sector, af as removeElementWithFadeOut, C as ChartView, bd as prepareSeriesDataSchema, be as SeriesData, bf as makeSeriesEncodeForNameBased, bg as getPercentSeats, bh as defaultEmphasis, S as SeriesModel, bi as createLegacyDataSelectAction, ab as install$6, aa as install$7, ac as init } from './installCanvasRenderer.js';
 import { l as limitTurnAngle, a as limitSurfaceAngle, g as getSectorCornerRadius, s as setLabelLineStyle, b as getLabelLineStatesModels, i as installLabelLayout } from './sectorHelper.js';
@@ -4035,7 +4036,7 @@ function install(registers) {
   registers.registerProcessor(negativeDataFilter('pie'));
 }
-const q2ChartDonutCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}.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, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:focus{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, 0 2px 4px rgba(0, 0, 0, 0.3))))}.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, 3px)))}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))}";
+const q2ChartDonutCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:focus{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, 0 2px 4px rgba(0, 0, 0, 0.3))))}.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, 3px)))}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 Q2ChartDonutStyle0 = q2ChartDonutCss;
 use([install$4, install$1, install, install$6, install$7, installLabelLayout]);
@@ -4085,6 +4086,9 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
                 case 'Escape':
                     this.clearSelection();
                     break;
+                case ' ':
+                    event.preventDefault();
+                    break;
                 default:
                     return;
             }
@@ -4103,6 +4107,45 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
             this.clearSelection();
             event.stopPropagation();
         };
+        this.onLegendClick = event => {
+            if (event.detail) {
+                const dataIndex = this.getDataIndexForId(event.detail.id);
+                this.selectedId = event.detail.id;
+                this.chart.dispatchAction({
+                    type: 'select',
+                    seriesIndex: 0,
+                    dataIndex,
+                });
+            }
+            else {
+                const dataIndex = this.getDataIndexForId(this.selectedId);
+                this.hoveredId = this.selectedId;
+                this.selectedId = null;
+                this.chart.dispatchAction({
+                    type: 'unselect',
+                    seriesIndex: 0,
+                    dataIndex,
+                });
+            }
+        };
+        this.onLegendMouseleave = event => {
+            const dataIndex = this.getDataIndexForId(event.detail.id);
+            this.hoveredId = this.selectedId;
+            this.chart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: 0,
+                dataIndex,
+            });
+        };
+        this.onLegendMouseenter = event => {
+            const dataIndex = this.getDataIndexForId(event.detail.id);
+            this.hoveredId = event.detail.id;
+            this.chart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: 0,
+                dataIndex,
+            });
+        };
         this.data = [];
         this.chartName = undefined;
         this.format = undefined;
@@ -4113,9 +4156,11 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
         this.outerRadius = '85%';
         this.selectedId = undefined;
         this.selectedOffset = 10;
+        this.showLegend = false;
         this.summaryIcon = undefined;
         this.summaryName = undefined;
         this.hoveredId = undefined;
+        this.legendData = undefined;
     }
     /// LifeCycle Hooks ///
     componentDidLoad() {
@@ -4128,6 +4173,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
         this.setupChartEvents(chart);
         this.checkSelectedId();
         this.chart = chart;
+        this.setLegendData();
         this.selectById(this.selectedId);
         overrideFocus(this.hostElement);
     }
@@ -4150,6 +4196,9 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
     get isMobile() {
         return isMobile();
     }
+    get legendHoveredId() {
+        return this.hoveredId === this.selectedId ? null : this.hoveredId;
+    }
     /// Helpers ///
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
@@ -4222,6 +4271,17 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
     getMinSliceSizeAsAngle() {
         return (parseFloat(this.minSliceSize) / 100) * 360;
     }
+    getDataIndexForId(id) {
+        return this.data.findIndex(item => item.id === id);
+    }
+    setLegendData() {
+        const chartColors = this.chart.getOption().series[0].color;
+        this.legendData = this.data.map((item, index) => {
+            if (!item.color)
+                item.color = chartColors[index];
+            return item;
+        });
+    }
     // Edit with caution. Echarts does not interpret events the same on mobile.
     setupChartEvents(chart) {
         if (!this.isMobile) {
@@ -4247,6 +4307,13 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
                 this.isInChangeEvent = false;
             }, 0);
         });
+        chart.on('finished', () => {
+            var _a;
+            const canvas = chart.getDom().querySelector('canvas');
+            if ((_a = canvas === null || canvas === void 0 ? void 0 : canvas.hasAttribute('aria-hidden')) !== null && _a !== void 0 ? _a : false)
+                return;
+            canvas.setAttribute('aria-hidden', 'true');
+        });
     }
     updateChart(chart) {
         return chart.setOption({
@@ -4414,14 +4481,14 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
                 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
             }
             : null;
-        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, isClickable && (h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description'))), h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (h("q2-icon", { type: icon, style: color && {
+        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description')), 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", { key: 'e5bec431c5bdc58d9ec1f89d374a7e24475f832b', onChange: this.onClickElsewhere }, h("div", { key: 'd1bf82b8746b7d9c000d1493a69f77306dbe61ed', class: "container" }, h("div", { key: 'f4e6e3fba1b86f91a429daaa70a7811ed192a503', ref: el => (this.chartContainer = el), class: "chart-container", role: "status", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));
+        return (h("click-elsewhere", { key: '53c1a369526583b3260eecebc9d20a98d7eee02f', onChange: this.onClickElsewhere }, h("figure", { key: '3c995800e322483fc72d193643632a9b10394e87' }, h("div", { key: '13ec1654546b45801c8f92c7cdd317951408659e', class: "container" }, h("div", { key: '93b2989c435714e0ba8d93327483603c830d677b', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '850fa60a26cd2b39dc534260efa9634f82cfc220' }, h("q2-legend", { key: '7a8b918ad722cfefd05c28688819e0a41f39e11e', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -4446,9 +4513,11 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
         "outerRadius": [1025, "outer-radius"],
         "selectedId": [1025, "selected-id"],
         "selectedOffset": [2, "selected-offset"],
+        "showLegend": [516, "show-legend"],
         "summaryIcon": [513, "summary-icon"],
         "summaryName": [513, "summary-name"],
         "hoveredId": [32],
+        "legendData": [32],
         "selectById": [64],
         "selectByIndex": [64],
         "clearSelection": [64],
@@ -4467,7 +4536,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["q2-chart-donut", "click-elsewhere", "q2-icon"];
+    const components = ["q2-chart-donut", "click-elsewhere", "q2-icon", "q2-legend"];
     components.forEach(tagName => { switch (tagName) {
         case "q2-chart-donut":
             if (!customElements.get(tagName)) {
@@ -4476,10 +4545,15 @@ function defineCustomElement$1() {
             break;
         case "click-elsewhere":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "q2-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "q2-legend":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }