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

package/dist/chunks/serial-chart-model.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { isEqual as D } from "lodash-es";
-import { q as I, u, r as h } from "./chart-object-literals.js";
-import { bd as b, bs as v, k as p, ap as M } from "./index2.js";
+import { q as b, u, r as h } from "./chart-object-literals.js";
+import { bd as I, bs as v, k as p, ap as M } from "./index2.js";
 import { i as P } from "./index4.js";
 import { C as O } from "./chart-model.js";
 import { m as o } from "./model-setter.js";
@@ -15,24 +15,24 @@ import { W as ge, c as ce, d as fe } from "./generate-x-axis-title.js";
 import { W as he, a as pe } from "./x-bounds.js";
 import { W as me } from "./data-labels-symbol.js";
 import { W as de } from "./rotated-state.js";
-import { g as W, u as ye, s as T, j as ue, k as Se, f as _e, h as xe } from "./utils.js";
+import { g as W, u as ye, s as T, h as ue, j as Se, k as _e, f as xe } from "./utils.js";
 import { d as F, e as B, a as Te } from "./data.js";
-import { B as Fe, Z as Be, x as Ce, a4 as Ae, a2 as Ie } from "./index.js";
+import { B as Fe, Z as Be, x as Ce, a4 as Ae, a2 as be } from "./index.js";
 import { s as L } from "./series-types.js";
 const C = (s, e) => e.series?.[s].assignToSecondValueAxis ?? !1, A = (s) => {
   const { assign: e, seriesIndex: i, config: t, commonStrings: r } = s;
   e && t.axes !== void 0 && !t.axes?.[2] && (t.axes[2] = Ce(r, u.BarSeries)[1]), t.series && t.series.forEach((a, g) => {
     g === i ? a.assignToSecondValueAxis = e : g !== i && a?.assignToSecondValueAxis !== !0 && (a.assignToSecondValueAxis = !1);
   }), t.axes?.[2] && !t.series.some((a) => a.assignToSecondValueAxis) && t.axes.splice(2, 1);
-}, be = (s, e) => e.series?.[s]?.name, ve = (s, e, i) => {
+}, Ie = (s, e) => e.series?.[s]?.name, ve = (s, e, i) => {
   i.series?.[e] && (i.series[e].name = s);
 }, Oe = (s, e) => {
   const i = e.series?.[s];
   let t;
-  return b(i) ? t = i.fillSymbol?.color : v(i) && (t = i.lineSymbol?.color), t;
+  return I(i) ? t = i.fillSymbol?.color : v(i) && (t = i.lineSymbol?.color), t;
 }, We = (s, e, i) => {
   const t = i.series?.[e];
-  t && (b(t) ? t.fillSymbol = {
+  t && (I(t) ? t.fillSymbol = {
     ...Fe(e),
     ...t.fillSymbol,
     color: s
@@ -45,7 +45,7 @@ const C = (s, e) => e.series?.[s].assignToSecondValueAxis ?? !1, A = (s) => {
   e.series?.sort(
     (i, t) => s.findIndex((r) => i.id === r) - s.findIndex((r) => t.id === r)
   );
-}, Me = (s) => s.stackedType ?? I.Side, Pe = (s) => {
+}, Me = (s) => s.stackedType ?? b.Side, Pe = (s) => {
   const { newStackedType: e, config: i, layerInfo: t, commonStrings: r } = s;
   if (i.stackedType = e, t !== void 0) {
     const a = W({
@@ -57,7 +57,7 @@ const C = (s, e) => e.series?.[s].assignToSecondValueAxis ?? !1, A = (s) => {
     });
     ye(i, 1, a);
   }
-  i.axes?.[1] && (e === I.Stacked100 ? i.axes[1].valueFormat = Ae() : i.axes[1].valueFormat = Ie()), T({ config: i, value: null, axisIndex: 1, isMax: !1 }), T({ config: i, value: null, axisIndex: 1, isMax: !0 });
+  i.axes?.[1] && (e === b.Stacked100 ? i.axes[1].valueFormat = Ae() : i.axes[1].valueFormat = be()), T({ config: i, value: null, axisIndex: 1, isMax: !1 }), T({ config: i, value: null, axisIndex: 1, isMax: !0 });
 }, Ve = (s) => {
   const e = {};
   return s.series.forEach((i) => {
@@ -277,10 +277,18 @@ class n extends O {
   }
   /**
    * Updates the series based on the layer filter.
+   *
+   * @deprecated since 5.2. Use {@link model/serial-chart-model/serial-chart-model#rebuildSeries rebuildSeries} instead.
    */
   updateSeriesFromLayerFilter() {
     this.layerInfo !== void 0 && m(this.getBuildNewSeriesProps());
   }
+  /**
+   * Rebuilds the series based on the current configuration.
+   */
+  async rebuildSeries() {
+    await this.processSeriesRebuild("rebuildSeries");
+  }
   /**
    * Whether temporal binning is enabled for all series in the config.
    *
@@ -303,7 +311,7 @@ class n extends O {
    * @param seriesIndex - The index of the series.
    */
   getSeriesName(e) {
-    return be(e, this._config);
+    return Ie(e, this._config);
   }
   setSeriesName(e, i) {
     ve(e, i, this._config);
@@ -523,6 +531,6 @@ xe(n, Xe);
 export {
   n as S,
   ve as a,
-  be as g,
+  Ie as g,
   We as s
 };

package/dist/chunks/utils.js

@@ -3,7 +3,7 @@ import { substitute as b } from "@arcgis/core/intl.js";
 import { w as C, H as j, M as q, T as k, F as M, x as W } from "./index.js";
 import { g as $ } from "./series-types.js";
 import { l as E, d as S, q as U, D as H } from "./index3.js";
-import { bw as K, ap as I, ag as P, h as O, cs as L, a6 as h, cr as V, aJ as X } from "./index2.js";
+import { bw as K, ap as I, ag as P, h as O, cr as L, cs as V, aJ as X, a6 as h } from "./index2.js";
 import { q as R, u as f, r as A, p as G } from "./chart-object-literals.js";
 import { d as T } from "./type-guards.js";
 function se(s, e, i) {
@@ -102,12 +102,12 @@ async function xe(s) {
   };
   let p = "";
   o?.length === 0 ? p = I(i).idField : o && ([p] = o);
-  let y = i ? T(i) ? await V({
+  let y = i ? T(i) ? await L({
     layer: i,
     category: e?.series[0].x ?? "",
     splitByField: a
   }) : Array.from(
-    (await L({
+    (await V({
       queryObject: i,
       category: e?.series[0].x ?? "",
       splitByField: a,
@@ -167,7 +167,7 @@ async function Fe(s) {
     geometry: i?.dataFilters?.geometry
   };
   let n;
-  return T(r) ? n = (await V({
+  return T(r) ? n = (await L({
     layer: r,
     category: t,
     fetchNullValues: u
@@ -179,7 +179,7 @@ async function Fe(s) {
       fieldValue: l
     }) ?? l;
   }) : n = // fetch unique category values asynchronously
-  Array.from((await L({ queryObject: r, category: t, queryConfig: g, errorStrings: a })).keys()).map(
+  Array.from((await V({ queryObject: r, category: t, queryConfig: g, errorStrings: a })).keys()).map(
     (x) => {
       const l = String(x);
       return h({
@@ -199,12 +199,12 @@ export {
   Fe as c,
   ne as d,
   le as e,
-  xe as f,
+  pe as f,
   ae as g,
-  pe as h,
+  ye as h,
   Ae as i,
-  ye as j,
-  me as k,
+  me as j,
+  xe as k,
   re as l,
   v as m,
   de as n,

package/dist/chunks/x-bounds.js

@@ -8,7 +8,7 @@ import { ai as S, M as L, T as b, a0 as T } from "./index.js";
 import { M as C, bF as M, bE as X } from "./index2.js";
 import { m as a, C as f } from "./model-setter.js";
 import { e as B, f as A } from "./utils2.js";
-import { l as p, s as y, h as O } from "./utils.js";
+import { l as p, s as y, f as O } from "./utils.js";
 const P = (t) => {
   for (const e of t.axes ?? [])
     for (const i of e?.guides ?? [])

package/dist/components/arcgis-chart/customElement.d.ts

@@ -830,7 +830,8 @@ export abstract class ArcgisChart extends LitElement {
    */
   accessor filterByExtent: boolean;
   /**
-   * When `true`, all chart elements are filtered based on the selection.
+   * When `true`, the chart uses the current selection as a data filter and renders only selected elements instead of rendering the full dataset with selection styling.
+   * Axis bounds, time binning intervals will be computed based on the selected elements only.
    *
    * **Note**: Not applicable to gauges or charts configured with imagery layers.
    *
@@ -838,7 +839,7 @@ export abstract class ArcgisChart extends LitElement {
    */
   accessor filterBySelection: boolean;
   /**
-   * When `true`, all chart elements are filtered based on the view extent.
+   * When `true`, chart queries are constrained to the current map view extent. The chart refreshes as the view extent changes, and the axis bounds or other derived values are recalculated from the view extent data.
    *
    * @default false
    */
@@ -846,12 +847,35 @@ export abstract class ArcgisChart extends LitElement {
   /**
    * Callback function used to format the gauge inner label. If the returned string contains HTML tags they will be interpreted as such.
    *
+   * @example
+   * ```ts
+   * // Render a centered custom gauge label with the value formatted to 2 decimal places.
+   * chartElement.gaugeInnerLabelFormatter = (value) => {
+   *   return `<div style="text-align: center;"><u>Custom gauge inner label: </u><br /><b>${Number(value).toFixed(2)}</b></div>`;
+   * };
+   * ```
+   *
+   * ![gaugeInnerLabelFormatter](https://developers.arcgis.com/javascript/latest/assets/references/components/chart/gaugeInnerLabelFormatter.avif)
+   *
    * **Note**: Applicable to gauges only.
    */
   accessor gaugeInnerLabelFormatter: GaugeInnerLabelFormatCallback | undefined;
   /**
    * Callback function used to format the axes guides tooltip. If the returned string contains HTML tags they will be interpreted as such.
    *
+   * @example
+   * ```ts
+   * // Render a custom tooltip with the guide's start and end values.
+   * chartElement.guideTooltipFormatter = (guide) => {
+   *   return `
+   *     <u>Custom guide tooltip</u><br />
+   *     Range: <b>${guide.start} - ${guide.end}</b>
+   *   `;
+   * };
+   * ```
+   *
+   * ![guideTooltipFormatter](https://developers.arcgis.com/javascript/latest/assets/references/components/chart/guideTooltipFormatter.avif)
+   *
    * **Note**: Not applicable to pie charts.
    */
   accessor guideTooltipFormatter: GuideTooltipFormatCallback | undefined;
@@ -915,18 +939,18 @@ export abstract class ArcgisChart extends LitElement {
    */
   accessor ignoreSmoothRenderingLimit: boolean;
   /**
-   * This property will be effective when the component's `view` is provided or when the `layer` is set to a FeatureLayerView.
+   * When `true`, it signals the queries to ignore the view's extent, whether an additional geometry filter is provided or not.
    *
-   * By default the queries made by the chart will consider the view's extent as the unique geometry filter applicable. This implies ignoring any
-   * geometry passed through the model (`component.model.dataFilters`) or the runtime filters (`component.runtimeDataFilters`).
+   * This property will be effective when the component's [view](https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart/#view) property is provided or when the [layer](https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart/#layer) property is set to [`FeatureLayerView`](/references/core/views/layers/FeatureLayerView/).
    *
-   * Setting this property to `false` signals the queries to ignore the view's extent, whether an additional geometry filter is provided or not.
+   * By default the queries made by the chart will consider the view's extent as the unique geometry filter applicable. This implies ignoring any
+   * geometry filters passed through the [model](https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart/#model) or the [runtimeDataFilters](https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart/#runtimeDataFilters) properties.
    *
    * @default false
    */
   accessor ignoreViewExtent: boolean;
   /**
-   * Disables all interactions on the chart.
+   * When `true`, all interactions such as zooming and selection are disabled on the chart. The chart will be rendered in a read-only state.
    *
    * @default false
    */
@@ -953,9 +977,10 @@ export abstract class ArcgisChart extends LitElement {
   /**
    * Layer item ID associated with the chart to be rendered. Can be used in conjunction with the `chartIndex` property. If `layerItemId` is set without `chartIndex`, the first chart in the layer will be rendered.
    *
-   * The layer item ID can be found in the URL of the layer's item page on ArcGIS Online or Enterprise. For example, in the URL `https://www.arcgis.com/home/item.html?id=8871626e970a4f3e9d6113ec63a92f2f`, the layer item ID is `8871626e970a4f3e9d6113ec63a92f2f`.
+   * The layer item ID can be found in the URL of the layer's item page on ArcGIS Online or Enterprise.
+   * For example, in the URL `https://www.arcgis.com/home/item.html?id=8871626e970a4f3e9d6113ec63a92f2f`, the layer item ID is `8871626e970a4f3e9d6113ec63a92f2f`.
    *
-   * Supported layers include: `FeatureLayer`, `SubtypeSublayer`, `ImageryLayer`, `ImageryTileLayer` and `WCSLayer`.
+   * Supported layer types include: [`FeatureLayer`](/references/core/layers/FeatureLayer), [`SubtypeSublayer`](/references/core/layers/support/SubtypeSublayer), [`ImageryLayer`](/references/core/layers/ImageryLayer), [`ImageryTileLayer`](/references/core/layers/ImageryTileLayer) and [`WCSLayer`](/references/core/layers/WCSLayer).
    *
    * @example
    * ```html
@@ -981,8 +1006,25 @@ export abstract class ArcgisChart extends LitElement {
    */
   accessor legendPosition: WebChartLegendPositions | undefined;
   /**
-   * A callback function used to format the legend value labels. If the returned string contains HTML tags they will be interpreted as such.
-   * If provided, the formatter will be used if at least [displayNumericValue](https://developers.arcgis.com/javascript/latest/references/charts-components/spec/web-chart/#WebChartPieChartLegend-displayNumericValue) or [displayPercentage](https://developers.arcgis.com/javascript/latest/references/charts-components/spec/web-chart/#WebChartPieChartLegend-displayPercentage) is `true`.
+   * When the pie chart label contains either a numeric value or a percentage (which can be set through the
+   * [setDisplayNumericValue](https://developers.arcgis.com/javascript/latest/references/charts-components/model/pie-chart-model/pie-chart-model/#setDisplayNumericValue) and
+   * [setDisplayPercentage](https://developers.arcgis.com/javascript/latest/references/charts-components/model/pie-chart-model/pie-chart-model/#setDisplayPercentage) methods from the pie chart model), this property
+   * can be used to format the numeric value and/or percentage. If the returned string contains HTML tags they will be interpreted as such.
+   *
+   * @example
+   * ```ts
+   * // Set the pie chart model to display both numeric value and percentage.
+   * pieChartModel.setDisplayNumericValue(true);
+   * pieChartModel.setDisplayPercentage(true);
+   *
+   * // Render the numeric value and percentage in bold and italic respectively, with 2 decimal places.
+   * chartElement.legendValueLabelFormatter = (value, percentage) => {
+   *   const formatTo2Decimals = (input) => Number(input).toFixed(2);
+   *   return `<strong><u>${formatTo2Decimals(value)}</u></strong> (<em>${formatTo2Decimals(percentage)}%</em>)`;
+   * };
+   * ```
+   *
+   * ![legendValueLabelFormatter](https://developers.arcgis.com/javascript/latest/assets/references/components/chart/legendValueLabelFormatter.avif)
    *
    * **Note**: Applicable to pie charts only.
    */

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);