@arcgis/charts-components 5.2.0-next.13 → 5.2.0-next.130

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 "es-toolkit/compat";
+import { b as C, a as N, s as p } from "../../chunks/chart-ui-utils.js";
+import { u as _ } from "../../chunks/useT9n.js";
+import { css as G, html as d, nothing as w } from "lit";
 import { createRef as m, ref as g } from "lit/directives/ref.js";
-import { LitElement as w, renderElement as S, safeStyleMap as u, safeClassMap as s } from "@arcgis/lumina";
+import { LitElement as z, renderElement as S, safeStyleMap as u, safeClassMap as s } from "@arcgis/lumina";
 import { b as h } from "../../chunks/common.js";
-import { aw as I, ax as y } from "../../chunks/index.js";
+import { a4 as I, p as y } from "../../chunks/index3.js";
 import { r as P } from "../../chunks/popover-ui-utils.js";
-import { i as z } from "../../chunks/rest-js-object-literals.js";
+import { b 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{display:flex}.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}.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 w {
+}, 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 z {
   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(() => {
-      this.donutSizeSliderElement.value && Number.isInteger(this.donutSizeSliderElement.value?.value) && (this.model.innerRadiusSize = this.donutSizeSliderElement.value.value ?? I);
-    }, $.SliderTimer), this.onGroupingThresholdSliderChange = 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.innerRadius = this.donutSizeSliderElement.value.value ?? I);
+    }, 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: z.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 w {
   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.innerRadius ?? 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 ?? "" ?? w} @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

@@ -5,10 +5,10 @@ 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 s, safeClassMap as r } from "@arcgis/lumina";
 import { e as v } from "../../chunks/popover-ui-utils.js";
-import { aB as f } from "../../chunks/index.js";
+import { r as f } from "../../chunks/index3.js";
 const c = {
   panelChildrenContainer: "panel-children-container"
-}, 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;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
+}, 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 = s(), this.arcgisChartsConfigSlicesPopoverColorChange = s(), this.arcgisChartsConfigSlicesPopoverNameChange = s();
@@ -40,7 +40,7 @@ class y extends C {
   }
   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);

package/dist/components/arcgis-charts-config-scatter-plot/customElement.js

@@ -1,13 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as r } from "../../chunks/runtime.js";
-import { isEqual as l } from "lodash-es";
+import { isEqual as l } from "es-toolkit/compat";
 import { LitElement as n, createEvent as d } from "@arcgis/lumina";
-import { css as c, html as i } from "lit";
-import { C as s } from "../../chunks/interfaces.js";
-import { ac as h, bw as f, I as p, ak as g } from "../../chunks/index2.js";
-import { h as m } from "../../chunks/index5.js";
-const u = c`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
-class y extends n {
+import { css as c, html as s } from "lit";
+import { C as o } from "../../chunks/interfaces.js";
+import { bL as h, bM as p, bg as f, ce as g, t as m, aT as u } from "../../chunks/index.js";
+import { i as y } from "../../chunks/type-guards.js";
+const b = c`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
+class F extends n {
   constructor() {
     super(...arguments), this.onModelConfigChange = async (e) => {
       const t = e?.detail.config ?? this.model.config;
@@ -15,10 +15,10 @@ class y extends n {
     }, this.popoverPlacement = "leading", this.usePopupTemplateFieldsInfo = !1, this.arcgisChartsConfigWebChartChange = d();
   }
   static {
-    this.properties = { layerFieldsInfo: 16, model: 0, popoverPlacement: 1, r2: 9, calculatedDataMinMaxBounds: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, usePopupTemplateFieldsInfo: 5, popupTemplateFieldInfosEnabled: 5 };
+    this.properties = { layerFieldsInfo: 16, model: 0, popoverPlacement: 1, r2: 9, calculatedDataMinMaxBounds: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, view: 0, usePopupTemplateFieldsInfo: 5, popupTemplateFieldInfosEnabled: 5 };
   }
   static {
-    this.styles = u;
+    this.styles = b;
   }
   async load() {
     await this.updateFetchLayerFieldsInfo(this.model?.config), this.modelChange(this.model);
@@ -37,29 +37,33 @@ class y extends n {
     const a = e ?? this.model.config;
     let t = this.layer;
     if (!t) {
-      const o = m(a) ? a.iLayer : void 0;
-      o && (t = await h(o));
+      const i = h(a) ? a.iLayer : void 0;
+      i && (t = await p(i));
+    }
+    if (t) {
+      await f(t);
+      const i = this.usePopupTemplateFieldsInfo || this.popupTemplateFieldInfosEnabled;
+      this.layerFieldsInfo = y(t) ? g({ layer: t, popupTemplateFieldInfosEnabled: i, chartType: a?.type }) : m(t, i);
     }
-    t && (await f(t), this.layerFieldsInfo = p(t, this.usePopupTemplateFieldsInfo || this.popupTemplateFieldInfosEnabled));
   }
   render() {
     let e;
     switch (this.page) {
-      case s.Data:
-        const a = g(this.layer), t = a && "isTable" in a ? a.isTable : !1;
-        e = i`<arcgis-charts-config-scatter-plot-data .model=${this.model} .r2=${this.r2} .layerFieldsInfo=${this.layerFieldsInfo} .isTableLayer=${t}></arcgis-charts-config-scatter-plot-data>`;
+      case o.Data:
+        const a = u(this.layer), t = a && "isTable" in a ? a.isTable : !1;
+        e = s`<arcgis-charts-config-scatter-plot-data .view=${this.view} .model=${this.model} .r2=${this.r2} .layerFieldsInfo=${this.layerFieldsInfo} .isTableLayer=${t}></arcgis-charts-config-scatter-plot-data>`;
         break;
-      case s.Axes:
-        e = i`<arcgis-charts-config-axes .model=${this.model} show-min-x-bound-option show-max-x-bound-option show-min-y-bound-option show-max-y-bound-option show-enable-x-log-option show-enable-y-log-option .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds}></arcgis-charts-config-axes>`;
+      case o.Axes:
+        e = s`<arcgis-charts-config-axes .model=${this.model} show-min-x-bound-option show-max-x-bound-option show-min-y-bound-option show-max-y-bound-option show-enable-x-log-option show-enable-y-log-option .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds}></arcgis-charts-config-axes>`;
         break;
-      case s.Guides:
-        e = i`<arcgis-charts-config-guides .model=${this.model} enable-x-axis-guide enable-y-axis-guide></arcgis-charts-config-guides>`;
+      case o.Guides:
+        e = s`<arcgis-charts-config-guides .model=${this.model} enable-x-axis-guide enable-y-axis-guide></arcgis-charts-config-guides>`;
         break;
-      case s.Format:
-        e = i`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
+      case o.Format:
+        e = s`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
         break;
-      case s.General:
-        e = i`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
+      case o.General:
+        e = s`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
         break;
       default:
         e = "";
@@ -68,7 +72,7 @@ class y extends n {
     return e;
   }
 }
-r("arcgis-charts-config-scatter-plot", y);
+r("arcgis-charts-config-scatter-plot", F);
 export {
-  y as ArcgisChartsConfigScatterplot
+  F as ArcgisChartsConfigScatterplot
 };

package/dist/components/arcgis-charts-config-scatter-plot-aoi/customElement.js

@@ -0,0 +1,70 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as a } from "../../chunks/runtime.js";
+import { html as r } from "lit";
+import { LitElement as n, createEvent as h, nothing as o } from "@arcgis/lumina";
+import g from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
+import { u as l } from "../../chunks/useT9n.js";
+import { cy as s, cz as d } from "../../chunks/index.js";
+const e = {
+  Circle: "circle",
+  FreehandPolygon: "freehandPolygon",
+  Polygon: "polygon",
+  Polyline: "polyline",
+  Rectangle: "rectangle"
+};
+class m extends n {
+  constructor() {
+    super(...arguments), this._messages = l({ blocking: !0 }), this.commonStrings = l({ name: "common", blocking: !0 }), this.handleAoiToolClick = async (t) => {
+      this.selectedTool = t, await this.startAoiSketch(t);
+    }, this.arcgisImageryScatterplotAoiChange = h();
+  }
+  static {
+    this.properties = { selectedTool: 16, messageOverrides: 0, view: 0 };
+  }
+  disconnectedCallback() {
+    this.sketchListenerHandle && this.sketchListenerHandle.remove(), this.sketchViewModel && (this.sketchViewModel.destroy(), this.sketchViewModel = void 0), super.disconnectedCallback();
+  }
+  async startAoiSketch(t) {
+    if (this.view?.map && t) {
+      const i = s(this.view) ?? d(this.view);
+      this.sketchViewModel ? this.sketchViewModel.cancel() : (this.sketchViewModel = new g({
+        view: this.view,
+        layer: i,
+        activeFillSymbol: {
+          type: "simple-fill",
+          style: "solid",
+          color: [0, 255, 255, 0.25],
+          outline: { color: [0, 255, 255], width: 1 }
+        },
+        polylineSymbol: {
+          type: "simple-line",
+          color: [0, 255, 255],
+          width: 1
+        },
+        // disable update for imagery aoi sketch tool
+        updateOnGraphicClick: !1
+      }), this.addAoiSketchListener()), await this.sketchViewModel.create(t);
+    }
+  }
+  addAoiSketchListener() {
+    if (this.sketchViewModel) {
+      const t = this.sketchViewModel.on("create", (i) => {
+        if (i.state === "complete") {
+          const c = i.graphic?.geometry;
+          (c?.type === "polygon" || c?.type === "polyline") && (this.arcgisImageryScatterplotAoiChange.emit({
+            tool: this.selectedTool ?? c.type,
+            newGeometry: c.toJSON()
+          }), s(this.view)?.remove(i.graphic), this.selectedTool = void 0);
+        }
+      });
+      this.sketchListenerHandle?.remove(), this.sketchListenerHandle = t;
+    }
+  }
+  render() {
+    return r`<calcite-action-group layout=horizontal id=charts-config-scatter-plot-aoi-action-group><calcite-action id=charts-config-scatter-plot-aoi-line icon=line .text=${this.commonStrings.imageryAoiToolsStrings.polyline} title=${this._messages.draw.polyline ?? o} .active=${this.selectedTool === e.Polyline} @click=${() => this.handleAoiToolClick(e.Polyline)}></calcite-action><calcite-action id=charts-config-scatter-plot-aoi-circle icon=circle .text=${this.commonStrings.imageryAoiToolsStrings.circle} title=${this._messages.draw.circle ?? o} .active=${this.selectedTool === e.Circle} @click=${() => this.handleAoiToolClick(e.Circle)}></calcite-action><calcite-action id=charts-config-scatter-plot-aoi-rectangle icon=rectangle .text=${this.commonStrings.imageryAoiToolsStrings.rectangle} title=${this._messages.draw.rectangle ?? o} .active=${this.selectedTool === e.Rectangle} @click=${() => this.handleAoiToolClick(e.Rectangle)}></calcite-action><calcite-action id=charts-config-scatter-plot-aoi-polygon icon=polygon .text=${this.commonStrings.imageryAoiToolsStrings.polygon} title=${this._messages.draw.polygon ?? o} .active=${this.selectedTool === e.Polygon} @click=${() => this.handleAoiToolClick(e.Polygon)}></calcite-action><calcite-action id=charts-config-scatter-plot-aoi-freehand-area icon=freehand-area .text=${this.commonStrings.imageryAoiToolsStrings.freehandPolygon} title=${this._messages.draw.freehandPolygon ?? o} .active=${this.selectedTool === e.FreehandPolygon} @click=${() => this.handleAoiToolClick(e.FreehandPolygon)}></calcite-action></calcite-action-group>`;
+  }
+}
+a("arcgis-charts-config-scatter-plot-aoi", m);
+export {
+  m as ArcgisChartsConfigScatterplotAoi
+};

package/dist/components/arcgis-charts-config-scatter-plot-aoi/index.js

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-action-group";
+import "@esri/calcite-components/components/calcite-action";
+export * from "./customElement.js";