@arcgis/charts-components 5.2.0-next.60 → 5.2.0-next.62

package/dist/components/arcgis-charts-config-create-flow/customElement.js

@@ -15,7 +15,7 @@ import { css as X, html as h } from "lit";
 import { createRef as Z, ref as K } from "lit/directives/ref.js";
 import { u as L } from "../../chunks/useT9n.js";
 import { c as j, a as x, g as q } from "../../chunks/store.js";
-import { dt as Y, _ as Q, du as J, K as ee, cp as te } from "../../chunks/index2.js";
+import { du as Y, _ as Q, dv as J, K as ee, co as te } from "../../chunks/index2.js";
 import { A as ae } from "../../chunks/axis-model-wrapper.js";
 import { h as se, f as y } from "../../chunks/web-component-utils.js";
 import { a as ie } from "../../chunks/chart-ui-utils2.js";

package/dist/components/arcgis-charts-config-pie-chart-slices/customElement.js

@@ -1,16 +1,16 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as T } from "../../chunks/runtime.js";
+import { c as L } from "../../chunks/runtime.js";
 import { keyed as f } from "lit/directives/keyed.js";
-import { debounce as C, isEmpty as E, toNumber as x } from "lodash-es";
-import { b as $, a as N, s as p } from "../../chunks/chart-ui-utils2.js";
-import { u as G } from "../../chunks/useT9n.js";
-import { css as _, html as d } from "lit";
+import { debounce as $, isEmpty as E, toNumber as x } from "lodash-es";
+import { b as C, a as N, s as p } from "../../chunks/chart-ui-utils2.js";
+import { u as _ } from "../../chunks/useT9n.js";
+import { css as G, html as d, nothing as z } from "lit";
 import { createRef as m, ref as g } from "lit/directives/ref.js";
-import { LitElement as z, renderElement as S, safeStyleMap as u, safeClassMap as s } from "@arcgis/lumina";
+import { LitElement as w, renderElement as S, safeStyleMap as u, safeClassMap as s } from "@arcgis/lumina";
 import { b as h } from "../../chunks/common.js";
 import { aA as I, aB as y } from "../../chunks/index.js";
 import { r as P } from "../../chunks/popover-ui-utils.js";
-import { i as w } from "../../chunks/rest-js-object-literals.js";
+import { i as M } from "../../chunks/rest-js-object-literals.js";
 const a = {
   sectionLabel: "section-label",
   label: "label",
@@ -20,46 +20,50 @@ const a = {
   sliderInputContainer: "slider-input-container",
   groupingLabelContainer: "grouping-label-container",
   numberInput: "number-input"
-}, M = _`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.section-label{display:flex;margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.label{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.label .grouping-label-container{display:flex;justify-content:space-between}.label .slider-input-container calcite-slider{--calcite-label-margin-bottom: var(--arcgis-charts-intra-section-margin) !important;margin-right:var(--arcgis-charts-config-margin-minor);flex-grow:1}.label .slider-input-container .number-input{width:8rem}.label .slider-input-container{display:flex}.slice-list{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-major)}.radio-group{margin-top:var(--arcgis-charts-config-margin-minor)}.pie-donut-labels-container{display:flex;justify-content:space-between;margin-top:calc(var(--arcgis-charts-config-margin-minor) * -3)}`;
-class k extends z {
+}, k = G`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.section-label{display:flex;margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.label{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.label .grouping-label-container{display:flex;justify-content:space-between}.label .slider-input-container calcite-slider{--calcite-label-margin-bottom: var(--arcgis-charts-intra-section-margin) !important;margin-right:var(--arcgis-charts-config-margin-minor);flex-grow:1}.label .slider-input-container .number-input{width:8rem}.label .slider-input-container{display:flex}.slice-list{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-major)}.radio-group{margin-top:var(--arcgis-charts-config-margin-minor)}.pie-donut-labels-container{display:flex;justify-content:space-between;margin-top:calc(var(--arcgis-charts-config-margin-minor) * -3)}`;
+class D extends w {
   constructor() {
-    super(...arguments), this._messages = G(), this.slicesPopover = null, this.donutSizeSliderElement = m(), this.groupingThresholdElement = m(), this.groupingThresholdSliderElement = m(), this.labelCharacterLimitElement = m(), this.decimalPlacesElement = m(), this.open = !1, this.onDonutSizeSliderChange = C(() => {
+    super(...arguments), this._messages = _(), this.slicesPopover = null, this.donutSizeSliderElement = m(), this.groupingThresholdElement = m(), this.groupingThresholdSliderElement = m(), this.labelCharacterLimitElement = m(), this.decimalPlacesElement = m(), this.open = !1, this.onDonutSizeSliderChange = $(() => {
       this.donutSizeSliderElement.value && Number.isInteger(this.donutSizeSliderElement.value?.value) && (this.model.innerRadiusSize = this.donutSizeSliderElement.value.value ?? I);
-    }, $.SliderTimer), this.onGroupingThresholdSliderChange = C(() => {
+    }, C.SliderTimer), this.onGroupingThresholdSliderChange = $(() => {
       const e = this.groupingThresholdSliderElement.value?.value;
       e !== void 0 && !Number.isNaN(e) ? (this.groupingThresholdElement?.value && (this.groupingThresholdElement.value.value = e.toString()), this.groupingThresholdSliderElement.value && (this.groupingThresholdSliderElement.value.value = e), this.model.groupingThreshold = e) : this.model.groupingThreshold = 0;
-    }, $.SliderTimer), this.sliceNameChange = (e) => {
+    }, C.SliderTimer), this.sliceNameChange = (e) => {
       if (e.detail !== null || e.detail !== void 0) {
-        const l = e.detail?.name, i = this.model.slices?.findIndex((r) => r.sliceId === this.selectedSliceId), t = this.model.sliceGrouping;
-        i != null && i >= 0 ? this.model.setSliceName(l, i) : t?.sliceId === this.selectedSliceId && t !== void 0 && (this.model.sliceGrouping = {
+        const i = e.detail?.name, l = this.model.slices?.findIndex((r) => r.sliceId === this.selectedSliceId), t = this.model.sliceGrouping;
+        l != null && l >= 0 ? this.model.setSliceName(i, l) : t?.sliceId === this.selectedSliceId && t !== void 0 && (this.model.sliceGrouping = {
           ...t,
-          label: l
+          label: i
         });
       }
     }, this.sliceColorChange = (e) => {
       if (e.detail !== null && e.detail !== void 0) {
-        const { color: l } = e.detail, i = this.model.slices?.findIndex((r) => r.sliceId === this.selectedSliceId), t = this.model.sliceGrouping;
-        i != null && i >= 0 ? (this.model.colorMatch = !1, this.model.setSliceColor(l, i)) : t?.sliceId === this.selectedSliceId && t !== void 0 && (this.model.colorMatch = !1, this.model.sliceGrouping = {
+        const { color: i } = e.detail, l = this.model.slices?.findIndex((r) => r.sliceId === this.selectedSliceId), t = this.model.sliceGrouping;
+        l != null && l >= 0 ? (this.model.colorMatch = !1, this.model.setSliceColor(i, l)) : t?.sliceId === this.selectedSliceId && t !== void 0 && (this.model.colorMatch = !1, this.model.sliceGrouping = {
           ...t,
           fillSymbol: {
             ...t.fillSymbol,
-            type: w.SFS,
-            color: l
+            type: M.SFS,
+            color: i
           }
         });
       }
     }, this.slicesPopoverClose = (e) => {
-      const { selectedSliceId: l } = e.detail;
-      l === this.selectedSliceId && (this.selectedSliceId = void 0, this.slicesPopover = P(this.slicesPopover));
+      const { selectedSliceId: i } = e.detail;
+      i === this.selectedSliceId && (this.selectedSliceId = void 0, this.slicesPopover = P(this.slicesPopover));
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
-    }, this.popoverPlacement = "leading";
+    }, this.onGroupingThresholdChange = $(() => {
+      const e = this.groupingThresholdElement.value?.value ?? "";
+      let i = Number.parseInt(e);
+      i > 100 ? i = 100 : i < 0 && (i = 0), Number.isNaN(i) ? this.model.groupingThreshold = 0 : (this.groupingThresholdElement?.value && (this.groupingThresholdElement.value.value = i.toString()), this.model.groupingThreshold = i, this.groupingThresholdSliderElement.value && (this.groupingThresholdSliderElement.value.value = i));
+    }, C.DebounceTimer), this.popoverPlacement = "leading";
   }
   static {
     this.properties = { selectedSliceId: 16, messageOverrides: 0, model: 0, popoverPlacement: 1, chartData: 0 };
   }
   static {
-    this.styles = M;
+    this.styles = k;
   }
   load() {
     this.modelChange(this.model), this.onModelConfigChange();
@@ -70,114 +74,109 @@ class k extends z {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeSlicesPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  modelChange(e, l) {
-    l?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
+  modelChange(e, i) {
+    i?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   selectedSliceIdChange() {
     if (!E(this.selectedSliceId)) {
-      const e = this.model.slices, l = this.model.sliceGrouping;
-      let i, t;
-      if (this.selectedSliceId === l?.sliceId)
-        i = l?.label, t = l?.fillSymbol?.color;
+      const e = this.model.slices, i = this.model.sliceGrouping;
+      let l, t;
+      if (this.selectedSliceId === i?.sliceId)
+        l = i?.label, t = i?.fillSymbol?.color;
       else if (e !== void 0) {
         const r = e.findIndex((n) => n.sliceId === this.selectedSliceId);
-        i = this.model.getSliceName(r), t = this.model.getSliceColor(r);
+        l = this.model.getSliceName(r), t = this.model.getSliceColor(r);
       }
-      this.slicesPopover = S(d`<arcgis-charts-config-pie-chart-slices-popover .referenceElement=${this.el} .placement=${this.popoverPlacement} .open=${this.open} .selectedSliceId=${this.selectedSliceId} .selectedName=${i} .selectedColor=${t} @arcgisChartsConfigSlicesPopoverColorChange=${this.sliceColorChange} @arcgisChartsConfigSlicesPopoverNameChange=${this.sliceNameChange} @arcgisChartsConfigPopoverClose=${this.slicesPopoverClose}></arcgis-charts-config-pie-chart-slices-popover>`), this.slicesPopover && !document.body.contains(this.slicesPopover) && document.body.appendChild(this.slicesPopover);
+      this.slicesPopover = S(d`<arcgis-charts-config-pie-chart-slices-popover .referenceElement=${this.el} .placement=${this.popoverPlacement} .open=${this.open} .selectedSliceId=${this.selectedSliceId} .selectedName=${l} .selectedColor=${t} @arcgisChartsConfigSlicesPopoverColorChange=${this.sliceColorChange} @arcgisChartsConfigSlicesPopoverNameChange=${this.sliceNameChange} @arcgisChartsConfigPopoverClose=${this.slicesPopoverClose}></arcgis-charts-config-pie-chart-slices-popover>`), this.slicesPopover && !document.body.contains(this.slicesPopover) && document.body.appendChild(this.slicesPopover);
     }
   }
   removeSlicesPopover() {
     this.slicesPopover !== void 0 && this.slicesPopover !== null && (this.slicesPopover.open = !1, this.slicesPopover.selectedName = void 0, this.slicesPopover.selectedColor = void 0, this.slicesPopover = P(this.slicesPopover));
   }
   buildSliceListItem() {
-    let e = "#CCCCCC", l = "minus-square";
-    const i = [];
+    let e = "#CCCCCC", i = "minus-square";
+    const l = [];
     let t = this.model.slices;
     const r = this.chartData?.dataItems;
     r && (t = t?.filter((o) => r?.findIndex((c) => c.arcgis_charts_slice_id === o.sliceId) !== -1)), t?.forEach((o) => {
       if (o.fillSymbol?.color !== void 0) {
-        l = "square-f";
-        const [c, b, v, L] = [...o.fillSymbol.color];
-        e = `rgba(${c},${b},${v},${L / 255})`;
+        i = "square-f";
+        const [c, b, v, T] = [...o.fillSymbol.color];
+        e = `rgba(${c},${b},${v},${T / 255})`;
       }
       if (o !== void 0 && !this.model.groupedSliceIds.includes(o.sliceId)) {
         let c = o.sliceId;
-        c === y.emptySliceId ? c = this._messages.emptySlice ?? "" : c === y.nullSliceId && (c = this._messages.nullSlice ?? ""), i?.push(f(o.sliceId, d`<calcite-list-item .label=${o.label ?? o.sliceId} .description=${c} .value=${o.sliceId} .selected=${this.selectedSliceId === o.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
+        c === y.emptySliceId ? c = this._messages.emptySlice ?? "" : c === y.nullSliceId && (c = this._messages.nullSlice ?? ""), l?.push(f(o.sliceId, d`<calcite-list-item .label=${o.label ?? o.sliceId} .description=${c} .value=${o.sliceId} .selected=${this.selectedSliceId === o.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${i} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
       }
     });
     const n = this.model.sliceGrouping;
     if (n?.fillSymbol?.color !== void 0) {
-      l = "square-f";
+      i = "square-f";
       const [o, c, b, v] = [...n.fillSymbol.color];
       e = `rgba(${o},${c},${b},${v / 255})`;
     }
-    return this.model.groupedSliceIds.length > 0 && i?.push(f(n?.sliceId, d`<calcite-list-item .label=${n?.label ?? n?.sliceId ?? ""} .description=${this._messages.groupedSlices} .value=${n?.sliceId ?? ""} .selected=${this.selectedSliceId === n?.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`)), i;
+    return this.model.groupedSliceIds.length > 0 && l?.push(f(n?.sliceId, d`<calcite-list-item .label=${n?.label ?? n?.sliceId ?? ""} .description=${this._messages.groupedSlices} .value=${n?.sliceId ?? ""} .selected=${this.selectedSliceId === n?.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${i} style=${u({ color: e })}></calcite-icon></calcite-list-item>`)), l;
   }
   buildGroupedSlicesListItem() {
-    let e = "#CCCCCC", l = "minus-square";
-    const i = [];
+    let e = "#CCCCCC", i = "minus-square";
+    const l = [];
     return this.model.slices?.forEach((t) => {
       if (t.fillSymbol?.color !== void 0) {
-        l = "square-f";
+        i = "square-f";
         const [r, n, o, c] = [...t.fillSymbol.color];
         e = `rgba(${r},${n},${o},${c / 255})`;
       }
-      t !== void 0 && this.model.groupedSliceIds.includes(t.sliceId) && i?.push(f(t.sliceId, d`<calcite-list-item .label=${t.label ?? t.sliceId} .description=${t.sliceId} .value=${t.sliceId} .selected=${this.selectedSliceId === t.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
-    }), i;
+      t !== void 0 && this.model.groupedSliceIds.includes(t.sliceId) && l?.push(f(t.sliceId, d`<calcite-list-item .label=${t.label ?? t.sliceId} .description=${t.sliceId} .value=${t.sliceId} .selected=${this.selectedSliceId === t.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${i} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
+    }), l;
   }
   buildSliceList() {
-    return d`<calcite-list label class=${s(a.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSliceListItem()}</calcite-list>`;
+    return d`<calcite-list .label=${this._messages.slices ?? ""} class=${s(a.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSliceListItem()}</calcite-list>`;
   }
   buildGroupedSliceList() {
-    return d`<calcite-list label class=${s(a.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildGroupedSlicesListItem()}</calcite-list>`;
-  }
-  onGroupingThresholdChange(e) {
-    const l = e.target.value;
-    let i = Number.parseInt(l);
-    i > 100 ? i = 100 : i < 0 && (i = 0), Number.isNaN(i) ? this.model.groupingThreshold = 0 : (this.groupingThresholdElement?.value && (this.groupingThresholdElement.value.value = i.toString()), this.model.groupingThreshold = i, this.groupingThresholdSliderElement.value && (this.groupingThresholdSliderElement.value.value = i));
+    return d`<calcite-list .label=${this._messages.groupedSlices ?? ""} class=${s(a.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildGroupedSlicesListItem()}</calcite-list>`;
   }
   onLabelCharacterLimitChange(e) {
-    const l = e.target.value;
-    let i = Number.parseInt(l);
-    i < 1 && (i = 1), Number.isNaN(i) ? this.model.labelCharacterLimit = null : (this.labelCharacterLimitElement.value && (this.labelCharacterLimitElement.value.value = i.toString()), this.model.labelCharacterLimit = i);
+    const i = e.target.value;
+    let l = Number.parseInt(i);
+    l < 1 && (l = 1), Number.isNaN(l) ? this.model.labelCharacterLimit = null : (this.labelCharacterLimitElement.value && (this.labelCharacterLimitElement.value.value = l.toString()), this.model.labelCharacterLimit = l);
   }
   onDecimalPlacesChange(e) {
-    const l = e.target.value;
-    let i = Number.parseInt(l);
-    i < 0 ? i = 0 : i > 20 && (i = 20), Number.isNaN(i) ? this.model.decimalPlaces = 0 : (this.decimalPlacesElement.value && (this.decimalPlacesElement.value.value = i.toString()), this.model.decimalPlaces = i);
+    const i = e.target.value;
+    let l = Number.parseInt(i);
+    l < 0 ? l = 0 : l > 20 && (l = 20), Number.isNaN(l) ? this.model.decimalPlaces = 0 : (this.decimalPlacesElement.value && (this.decimalPlacesElement.value.value = l.toString()), this.model.decimalPlaces = l);
   }
   onDisplayTypeChange(e) {
-    const l = e.target.selectedItem;
-    this.model.displayType = l?.value;
+    const i = e.target.selectedItem;
+    this.model.displayType = i?.value;
   }
   resetSlicesOriginal() {
     this.selectedSliceId = void 0, this.model.colorMatch = !0, this.model.resetSlices();
   }
   onCalciteListOrderChange(e) {
     if (e.detail !== null && e.detail !== void 0) {
-      const { newIndex: l, oldIndex: i } = e.detail;
-      this.model.moveSeries(i ?? 0, l ?? i ?? 0);
+      const { newIndex: i, oldIndex: l } = e.detail;
+      this.model.moveSeries(l ?? 0, i ?? l ?? 0);
     }
   }
   openSlicesPopover(e) {
     e.stopImmediatePropagation(), this.removeSlicesPopover();
-    const l = e.target, i = l.localName === "calcite-list-item" ? l : l.parentNode;
-    i.value === this.model.sliceGrouping?.sliceId ? this.selectedSliceId = this.model.sliceGrouping?.sliceId : this.selectedSliceId = i.value, this.open = !0;
+    const i = e.target, l = i.localName === "calcite-list-item" ? i : i.parentNode;
+    l.value === this.model.sliceGrouping?.sliceId ? this.selectedSliceId = this.model.sliceGrouping?.sliceId : this.selectedSliceId = l.value, this.open = !0;
   }
   createTooltip(e) {
-    const l = e.target;
-    this.tooltip = S(d`<calcite-tooltip style=${u({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${l} open placement=top .innerHTML=${this._messages.groupingInfo ?? "" ?? ""}></calcite-tooltip>`), document.body.appendChild(this.tooltip);
+    const i = e.currentTarget;
+    this.tooltip = S(d`<calcite-tooltip style=${u({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${i} open placement=top .innerHTML=${this._messages.groupingInfo ?? "" ?? ""}></calcite-tooltip>`), document.body.appendChild(this.tooltip);
   }
   destroyTooltip() {
     N(this.tooltip);
   }
   render() {
-    return d`<div class=${s(a.sectionLabel)}>${this._messages.settings}</div><calcite-label class=${s(a.label)}>${this._messages.shape}<calcite-slider min=0 max=100 step=1 snap .value=${this.model.innerRadiusSize ?? I} @calciteSliderChange=${this.onDonutSizeSliderChange} ${g(this.donutSizeSliderElement)}></calcite-slider></calcite-label><div class=${s(a.pieDonutLabelsContainer)}><calcite-label class=${s(a.label)}>${this._messages.pie}</calcite-label><calcite-label class=${s(a.label)}>${this._messages.donut}</calcite-label></div><calcite-label class=${s(a.label)}><div class=${s(a.groupingLabelContainer)}><div>${this._messages.groupingPercent}</div><calcite-icon icon=information scale=s flip-rtl @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-icon></div><div class=${s(a.sliderInputContainer)}><calcite-slider min=0 max=50 step=1 snap .value=${x(p(this.model.groupingThreshold ?? 0))} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${g(this.groupingThresholdSliderElement)}></calcite-slider><calcite-input class=${s(a.numberInput)} type=number min=0 max=100 step=1 suffix-text=% .value=${p(this.model.groupingThreshold ?? 0)} @calciteInputInput=${this.onGroupingThresholdChange} @click=${(e) => {
+    return d`<div class=${s(a.sectionLabel)}>${this._messages.settings}</div><calcite-label class=${s(a.label)}>${this._messages.shape}<calcite-slider min=0 max=100 step=1 snap .value=${this.model.innerRadiusSize ?? I} @calciteSliderChange=${this.onDonutSizeSliderChange} ${g(this.donutSizeSliderElement)}></calcite-slider></calcite-label><div class=${s(a.pieDonutLabelsContainer)}><calcite-label class=${s(a.label)}>${this._messages.pie}</calcite-label><calcite-label class=${s(a.label)}>${this._messages.donut}</calcite-label></div><calcite-label class=${s(a.label)}><div class=${s(a.groupingLabelContainer)}><div>${this._messages.groupingPercent}</div><calcite-icon icon=information scale=s flip-rtl role=img tabindex=0 aria-label=${this._messages.groupingInfo ?? "" ?? z} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} @focus=${this.createTooltip} @blur=${this.destroyTooltip}></calcite-icon></div><div class=${s(a.sliderInputContainer)}><calcite-slider min=0 max=50 step=1 snap .value=${x(p(this.model.groupingThreshold ?? 0))} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${g(this.groupingThresholdSliderElement)}></calcite-slider><calcite-input class=${s(a.numberInput)} type=number min=0 max=100 step=1 suffix-text=% .value=${p(this.model.groupingThreshold ?? 0)} @calciteInputInput=${this.onGroupingThresholdChange} @click=${(e) => {
       e.stopPropagation();
     }} ${g(this.groupingThresholdElement)}></calcite-input></div></calcite-label><div class=${s(a.sectionLabel)}>${this._messages.labels}</div><calcite-label class=${s(a.label)}>${this._messages.labelCharacterLimit}<calcite-input type=number min=1 step=1 .value=${p(this.model.labelCharacterLimit)} @calciteInputInput=${this.onLabelCharacterLimitChange} ${g(this.labelCharacterLimitElement)}></calcite-input></calcite-label><calcite-label class=${s(a.label)}>${this._messages.decimalPlaces}<calcite-input type=number min=0 max=20 step=1 .value=${p(this.model.decimalPlaces)} @calciteInputInput=${this.onDecimalPlacesChange} ${g(this.decimalPlacesElement)}></calcite-input></calcite-label><calcite-label class=${s(a.label)}>${this._messages.display}<calcite-radio-button-group class=${s(a.radioGroup)} name=display layout=vertical @calciteRadioButtonGroupChange=${this.onDisplayTypeChange}><calcite-label layout=inline><calcite-radio-button .value=${h.Value} .checked=${this.model.displayType === h.Value}></calcite-radio-button>${this._messages.value}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Percentage} .checked=${this.model.displayType === h.Percentage}></calcite-radio-button>${this._messages.percentage}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Both} .checked=${this.model.displayType === h.Both}></calcite-radio-button>${this._messages.both}</calcite-label></calcite-radio-button-group></calcite-label><div class=${s(a.sectionLabel)}>${this._messages.slices}<calcite-button @click=${this.resetSlicesOriginal} .disabled=${!this.model.resetAvailable()} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.buildSliceList()}<div class=${s(a.sectionLabel)}>${this._messages.groupedSlices}</div>${this.buildGroupedSliceList()}`;
   }
 }
-T("arcgis-charts-config-pie-chart-slices", k);
+L("arcgis-charts-config-pie-chart-slices", D);
 export {
-  k as ArcgisChartsConfigPieChartSlices
+  D as ArcgisChartsConfigPieChartSlices
 };

package/dist/components/arcgis-charts-config-pie-chart-slices-popover/customElement.js

@@ -3,7 +3,7 @@ import { c as n } from "../../chunks/runtime.js";
 import { css as p, html as h } from "lit";
 import { u as m } from "../../chunks/useT9n.js";
 import { createRef as d, ref as g } from "lit/directives/ref.js";
-import { LitElement as C, createEvent as i, safeClassMap as r } from "@arcgis/lumina";
+import { LitElement as C, createEvent as s, safeClassMap as r } from "@arcgis/lumina";
 import { e as v } from "../../chunks/popover-ui-utils.js";
 import { aF as f } from "../../chunks/index.js";
 const c = {
@@ -11,7 +11,7 @@ const c = {
 }, u = p`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{overflow-y:auto;width:min-content}.panel-children-container{display:flex}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}.panel-children-container{padding:0 1rem;margin-top:1rem}`;
 class y extends C {
   constructor() {
-    super(...arguments), this._messages = m(), this.popoverElement = d(), this.selectedSliceId = "", this.open = !1, this.arcgisChartsConfigPopoverClose = i(), this.arcgisChartsConfigSlicesPopoverColorChange = i(), this.arcgisChartsConfigSlicesPopoverNameChange = i();
+    super(...arguments), this._messages = m(), this.popoverElement = d(), this.selectedSliceId = "", this.open = !1, this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSlicesPopoverColorChange = s(), this.arcgisChartsConfigSlicesPopoverNameChange = s();
   }
   static {
     this.properties = { messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedSliceId: 1, placement: 1, open: 5 };
@@ -35,12 +35,12 @@ class y extends C {
     });
   }
   colorChange(e) {
-    const t = e instanceof CustomEvent ? e.detail : e, [s, o, a] = t, l = f * 255;
-    this.selectedColor = [s, o, a, l], this.arcgisChartsConfigSlicesPopoverColorChange.emit({ color: [s, o, a, l] });
+    const t = e instanceof CustomEvent ? e.detail : e, [i, o, a] = t, l = f * 255;
+    this.selectedColor = [i, o, a, l], this.arcgisChartsConfigSlicesPopoverColorChange.emit({ color: [i, o, a, l] });
   }
   render() {
     const e = this.selectedColor !== void 0 ? [...this.selectedColor] : void 0;
-    return h`<div><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${g(this.popoverElement)}><calcite-panel .heading=${this._messages.sliceStyle} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${r(c.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.sliceNameChange}></calcite-input></calcite-label></div><div class=${r(c.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
+    return h`<div><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} .label=${this._messages.sliceStyle ?? ""} auto-close ${g(this.popoverElement)}><calcite-panel .heading=${this._messages.sliceStyle} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${r(c.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.sliceNameChange}></calcite-input></calcite-label></div><div class=${r(c.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
   }
 }
 n("arcgis-charts-config-pie-chart-slices-popover", y);