@arcgis/charts-components 5.1.0-next.99 → 5.1.0

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

@@ -1,44 +1,17 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as T } from "../../chunks/runtime.js";
 import { keyed as f } from "lit/directives/keyed.js";
-import { b as m } from "../../chunks/common.js";
-import "@arcgis/toolkit/type";
-import "../../chunks/series-types.js";
-import { i as E } from "../../chunks/rest-js-object-literals.js";
-import "@arcgis/toolkit/intl";
-import { debounce as C, isEmpty as N, toNumber as x } from "lodash-es";
-import "luxon";
-import { dA as $, dB as S } from "../../chunks/index.js";
-import "@arcgis/core/Graphic.js";
-import "@arcgis/core/renderers/support/jsonUtils.js";
-import "@arcgis/core/symbols/support/symbolUtils.js";
-import "@esri/arcgis-html-sanitizer";
-import "@arcgis/core/layers/support/FeatureFilter.js";
-import "@arcgis/core/smartMapping/statistics/histogram.js";
-import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import "@arcgis/core/AttributeBinsGraphic.js";
-import "@arcgis/core/layers/support/CodedValueDomain.js";
-import "@arcgis/core/intl.js";
-import "simple-statistics";
-import "@arcgis/core/request.js";
-import "@arcgis/core/core/sql.js";
-import "@arcgis/core/geometry/support/jsonUtils.js";
-import "@arcgis/core/rest/support/AttributeBinsQuery.js";
-import "@arcgis/core/rest/support/Query.js";
-import "@arcgis/core/rest/support/StatisticDefinition.js";
-import "@arcgis/core/time/TimeExtent.js";
-import "@arcgis/core/core/promiseUtils.js";
-import "@arcgis/core/applications/Components/imageryUtils.js";
-import "@arcgis/core/geometry/Extent.js";
-import "@arcgis/core/geometry/Point.js";
-import "@arcgis/toolkit/dom";
-import { r as I } from "../../chunks/popover-ui-utils.js";
-import { a as y, d as G, s as g } from "../../chunks/chart-ui-utils2.js";
-import { u as _ } from "../../chunks/useT9n.js";
-import { css as w, html as d } from "lit";
-import { createRef as h, ref as p } from "lit/directives/ref.js";
-import { LitElement as M, renderElement as P, safeStyleMap as u, safeClassMap as s } from "@arcgis/lumina";
-const o = {
+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 { 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 { b as h } from "../../chunks/common.js";
+import { aw as I, ax as y } from "../../chunks/index.js";
+import { r as P } from "../../chunks/popover-ui-utils.js";
+import { i as M } from "../../chunks/rest-js-object-literals.js";
+const a = {
   sectionLabel: "section-label",
   label: "label",
   sliceList: "slice-list",
@@ -47,15 +20,15 @@ const o = {
   sliderInputContainer: "slider-input-container",
   groupingLabelContainer: "grouping-label-container",
   numberInput: "number-input"
-}, z = w`: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 M {
+}, z = _`: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 {
   constructor() {
-    super(...arguments), this._messages = _(), this.slicesPopover = null, this.donutSizeSliderElement = h(), this.groupingThresholdElement = h(), this.groupingThresholdSliderElement = h(), this.labelCharacterLimitElement = h(), this.decimalPlacesElement = h(), this.open = !1, this.onDonutSizeSliderChange = C(() => {
-      this.donutSizeSliderElement.value && Number.isInteger(this.donutSizeSliderElement.value?.value) && (this.model.innerRadiusSize = this.donutSizeSliderElement.value.value ?? $);
-    }, y.SliderTimer), this.onGroupingThresholdSliderChange = C(() => {
+    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(() => {
       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;
-    }, y.SliderTimer), this.sliceNameChange = (e) => {
+    }, $.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 = {
@@ -70,14 +43,14 @@ class k extends M {
           ...t,
           fillSymbol: {
             ...t.fillSymbol,
-            type: E.SFS,
+            type: M.SFS,
             color: l
           }
         });
       }
     }, this.slicesPopoverClose = (e) => {
       const { selectedSliceId: l } = e.detail;
-      l === this.selectedSliceId && (this.selectedSliceId = void 0, this.slicesPopover = I(this.slicesPopover));
+      l === this.selectedSliceId && (this.selectedSliceId = void 0, this.slicesPopover = P(this.slicesPopover));
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
     }, this.popoverPlacement = "leading";
@@ -101,7 +74,7 @@ class k extends M {
     l?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   selectedSliceIdChange() {
-    if (!N(this.selectedSliceId)) {
+    if (!E(this.selectedSliceId)) {
       const e = this.model.slices, l = this.model.sliceGrouping;
       let i, t;
       if (this.selectedSliceId === l?.sliceId)
@@ -110,33 +83,33 @@ class k extends M {
         const r = e.findIndex((n) => n.sliceId === this.selectedSliceId);
         i = this.model.getSliceName(r), t = this.model.getSliceColor(r);
       }
-      this.slicesPopover = P(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=${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);
     }
   }
   removeSlicesPopover() {
-    this.slicesPopover !== void 0 && this.slicesPopover !== null && (this.slicesPopover.open = !1, this.slicesPopover.selectedName = void 0, this.slicesPopover.selectedColor = void 0, this.slicesPopover = I(this.slicesPopover));
+    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 t = this.model.slices;
     const r = this.chartData?.dataItems;
-    r && (t = t?.filter((a) => r?.findIndex((c) => c.arcgis_charts_slice_id === a.sliceId) !== -1)), t?.forEach((a) => {
-      if (a.fillSymbol?.color !== void 0) {
+    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] = [...a.fillSymbol.color];
+        const [c, b, v, L] = [...o.fillSymbol.color];
         e = `rgba(${c},${b},${v},${L / 255})`;
       }
-      if (a !== void 0 && !this.model.groupedSliceIds.includes(a.sliceId)) {
-        let c = a.sliceId;
-        c === S.emptySliceId ? c = this._messages.emptySlice ?? "" : c === S.nullSliceId && (c = this._messages.nullSlice ?? ""), i?.push(f(a.sliceId, d`<calcite-list-item .label=${a.label ?? a.sliceId} .description=${c} .value=${a.sliceId} .selected=${this.selectedSliceId === a.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
+      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>`));
       }
     });
     const n = this.model.sliceGrouping;
     if (n?.fillSymbol?.color !== void 0) {
       l = "square-f";
-      const [a, c, b, v] = [...n.fillSymbol.color];
-      e = `rgba(${a},${c},${b},${v / 255})`;
+      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;
   }
@@ -146,17 +119,17 @@ class k extends M {
     return this.model.slices?.forEach((t) => {
       if (t.fillSymbol?.color !== void 0) {
         l = "square-f";
-        const [r, n, a, c] = [...t.fillSymbol.color];
-        e = `rgba(${r},${n},${a},${c / 255})`;
+        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;
   }
   buildSliceList() {
-    return d`<calcite-list label class=${s(o.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSliceListItem()}</calcite-list>`;
+    return d`<calcite-list label 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(o.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildGroupedSlicesListItem()}</calcite-list>`;
+    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;
@@ -175,7 +148,7 @@ class k extends M {
   }
   onDisplayTypeChange(e) {
     const l = e.target.selectedItem;
-    this.model.displayType = l.value;
+    this.model.displayType = l?.value;
   }
   resetSlicesOriginal() {
     this.selectedSliceId = void 0, this.model.colorMatch = !0, this.model.resetSlices();
@@ -183,7 +156,7 @@ class k extends M {
   onCalciteListOrderChange(e) {
     if (e.detail !== null && e.detail !== void 0) {
       const { newIndex: l, oldIndex: i } = e.detail;
-      this.model.moveSeries(i, l);
+      this.model.moveSeries(i ?? 0, l ?? i ?? 0);
     }
   }
   openSlicesPopover(e) {
@@ -193,15 +166,15 @@ class k extends M {
   }
   createTooltip(e) {
     const l = e.target;
-    this.tooltip = P(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);
+    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);
   }
   destroyTooltip() {
-    G(this.tooltip);
+    N(this.tooltip);
   }
   render() {
-    return d`<div class=${s(o.sectionLabel)}>${this._messages.settings}</div><calcite-label class=${s(o.label)}>${this._messages.shape}<calcite-slider min=0 max=100 step=1 snap .value=${this.model.innerRadiusSize ?? $} @calciteSliderChange=${this.onDonutSizeSliderChange} ${p(this.donutSizeSliderElement)}></calcite-slider></calcite-label><div class=${s(o.pieDonutLabelsContainer)}><calcite-label class=${s(o.label)}>${this._messages.pie}</calcite-label><calcite-label class=${s(o.label)}>${this._messages.donut}</calcite-label></div><calcite-label class=${s(o.label)}><div class=${s(o.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(o.sliderInputContainer)}><calcite-slider min=0 max=50 step=1 snap .value=${x(g(this.model.groupingThreshold ?? 0))} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${p(this.groupingThresholdSliderElement)}></calcite-slider><calcite-input class=${s(o.numberInput)} type=number min=0 max=100 step=1 suffix-text=% .value=${g(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 @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) => {
       e.stopPropagation();
-    }} ${p(this.groupingThresholdElement)}></calcite-input></div></calcite-label><div class=${s(o.sectionLabel)}>${this._messages.labels}</div><calcite-label class=${s(o.label)}>${this._messages.labelCharacterLimit}<calcite-input type=number min=1 step=1 .value=${g(this.model.labelCharacterLimit)} @calciteInputInput=${this.onLabelCharacterLimitChange} ${p(this.labelCharacterLimitElement)}></calcite-input></calcite-label><calcite-label class=${s(o.label)}>${this._messages.decimalPlaces}<calcite-input type=number min=0 max=20 step=1 .value=${g(this.model.decimalPlaces)} @calciteInputInput=${this.onDecimalPlacesChange} ${p(this.decimalPlacesElement)}></calcite-input></calcite-label><calcite-label class=${s(o.label)}>${this._messages.display}<calcite-radio-button-group class=${s(o.radioGroup)} name=display layout=vertical @calciteRadioButtonGroupChange=${this.onDisplayTypeChange}><calcite-label layout=inline><calcite-radio-button .value=${m.Value} .checked=${this.model.displayType === m.Value}></calcite-radio-button>${this._messages.value}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${m.Percentage} .checked=${this.model.displayType === m.Percentage}></calcite-radio-button>${this._messages.percentage}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${m.Both} .checked=${this.model.displayType === m.Both}></calcite-radio-button>${this._messages.both}</calcite-label></calcite-radio-button-group></calcite-label><div class=${s(o.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(o.sectionLabel)}>${this._messages.groupedSlices}</div>${this.buildGroupedSliceList()}`;
+    }} ${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);

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

@@ -1,46 +1,18 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as n } from "../../chunks/runtime.js";
-import { css as p, html as m } from "lit";
-import "@arcgis/toolkit/intl";
-import "lodash-es";
-import "luxon";
-import "../../chunks/series-types.js";
-import "@arcgis/toolkit/type";
-import { dP as h } from "../../chunks/index.js";
-import "@arcgis/core/Graphic.js";
-import "@arcgis/core/renderers/support/jsonUtils.js";
-import "@arcgis/core/symbols/support/symbolUtils.js";
-import "@esri/arcgis-html-sanitizer";
-import "@arcgis/core/layers/support/FeatureFilter.js";
-import "@arcgis/core/smartMapping/statistics/histogram.js";
-import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import "@arcgis/core/AttributeBinsGraphic.js";
-import "@arcgis/core/layers/support/CodedValueDomain.js";
-import "@arcgis/core/intl.js";
-import "simple-statistics";
-import "@arcgis/core/request.js";
-import "@arcgis/core/core/sql.js";
-import "@arcgis/core/geometry/support/jsonUtils.js";
-import "@arcgis/core/rest/support/AttributeBinsQuery.js";
-import "@arcgis/core/rest/support/Query.js";
-import "@arcgis/core/rest/support/StatisticDefinition.js";
-import "@arcgis/core/time/TimeExtent.js";
-import "@arcgis/core/core/promiseUtils.js";
-import "@arcgis/core/applications/Components/imageryUtils.js";
-import "@arcgis/core/geometry/Extent.js";
-import "@arcgis/core/geometry/Point.js";
-import "@arcgis/toolkit/dom";
-import { e as d } from "../../chunks/popover-ui-utils.js";
-import { u as g } from "../../chunks/useT9n.js";
-import { createRef as C, ref as v } from "lit/directives/ref.js";
-import { LitElement as f, createEvent as i, safeClassMap as o } from "@arcgis/lumina";
-const s = {
+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 s, safeClassMap as i } from "@arcgis/lumina";
+import { e as v } from "../../chunks/popover-ui-utils.js";
+import { aB as f } from "../../chunks/index.js";
+const o = {
   jsAppFlyout: "js-app-flyout",
   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}`;
-class y extends f {
+class y extends C {
   constructor() {
-    super(...arguments), this._messages = g(), this.popoverElement = C(), 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 };
@@ -52,7 +24,7 @@ class y extends f {
     await this.popoverElement.value?.reposition();
   }
   updated() {
-    d(this.popoverElement.value, this.open);
+    v(this.popoverElement.value, this.open);
   }
   sliceNameChange(e) {
     const t = e.target.value;
@@ -64,14 +36,14 @@ class y extends f {
     });
   }
   colorChange(e) {
-    const t = e instanceof CustomEvent ? e.detail : e, [r, a, l] = t, c = h * 255;
-    this.selectedColor = [r, a, l, c], this.arcgisChartsConfigSlicesPopoverColorChange.emit({ color: [r, a, l, c] });
+    const t = e instanceof CustomEvent ? e.detail : e, [a, l, r] = t, c = f * 255;
+    this.selectedColor = [a, l, r, c], this.arcgisChartsConfigSlicesPopoverColorChange.emit({ color: [a, l, r, c] });
   }
   render() {
     const e = this.selectedColor !== void 0 ? [...this.selectedColor] : void 0;
-    return m`<div class=${o({
-      [s.jsAppFlyout]: !0
-    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${v(this.popoverElement)}><calcite-panel .heading=${this._messages.sliceStyle} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${o(s.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.sliceNameChange}></calcite-input></calcite-label></div><div class=${o(s.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 class=${i({
+      [o.jsAppFlyout]: !0
+    })}><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=${i(o.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.sliceNameChange}></calcite-input></calcite-label></div><div class=${i(o.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,92 +1,70 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as r } from "../../chunks/runtime.js";
-import "@arcgis/toolkit/intl";
 import { isEqual as l } from "lodash-es";
-import "luxon";
-import "../../chunks/series-types.js";
-import "@arcgis/toolkit/type";
-import { bz as n, a8 as p, bH as d } from "../../chunks/index.js";
-import "@arcgis/core/Graphic.js";
-import "@arcgis/core/renderers/support/jsonUtils.js";
-import "@arcgis/core/symbols/support/symbolUtils.js";
-import "@esri/arcgis-html-sanitizer";
-import "@arcgis/core/layers/support/FeatureFilter.js";
-import "@arcgis/core/smartMapping/statistics/histogram.js";
-import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import "@arcgis/core/AttributeBinsGraphic.js";
-import "@arcgis/core/layers/support/CodedValueDomain.js";
-import "@arcgis/core/intl.js";
-import "simple-statistics";
-import "@arcgis/core/request.js";
-import "@arcgis/core/core/sql.js";
-import "@arcgis/core/geometry/support/jsonUtils.js";
-import "@arcgis/core/rest/support/AttributeBinsQuery.js";
-import "@arcgis/core/rest/support/Query.js";
-import "@arcgis/core/rest/support/StatisticDefinition.js";
-import "@arcgis/core/time/TimeExtent.js";
-import "@arcgis/core/core/promiseUtils.js";
-import { h as m } from "../../chunks/index4.js";
-import "@arcgis/core/applications/Components/imageryUtils.js";
-import "@arcgis/core/geometry/Extent.js";
-import "@arcgis/core/geometry/Point.js";
-import "@arcgis/toolkit/dom";
-import { LitElement as h, createEvent as c } from "@arcgis/lumina";
-import { css as f, html as a } from "lit";
+import { LitElement as n, createEvent as d } from "@arcgis/lumina";
+import { css as c, html as s } from "lit";
 import { C as o } from "../../chunks/interfaces.js";
-const g = f`: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 u extends h {
+import { ac as h, bw as p, aw as f, I as m, ak as g } from "../../chunks/index2.js";
+import { h as u } from "../../chunks/index5.js";
+import { c as y } from "../../chunks/type-guards.js";
+const F = 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 b extends n {
   constructor() {
     super(...arguments), this.onModelConfigChange = async (e) => {
-      const i = e?.detail.config ?? this.model.config;
-      this.layer === void 0 && await this.updateFetchLayerFieldsInfo(i);
-    }, this.popoverPlacement = "leading", this.usePopupTemplateFieldsInfo = !1, this.arcgisChartsConfigWebChartChange = c();
+      const t = e?.detail.config ?? this.model.config;
+      this.layer === void 0 && await this.updateFetchLayerFieldsInfo(t);
+    }, 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 };
   }
   static {
-    this.styles = g;
+    this.styles = F;
   }
   async load() {
     await this.updateFetchLayerFieldsInfo(this.model?.config), this.modelChange(this.model);
   }
   willUpdate(e) {
-    let t = !1;
-    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("r2") && this.r2Change(this.r2), e.has("layer") && this.layer !== void 0 && !l(e.get("layer"), this.layer) && (t = !0), (e.has("usePopupTemplateFieldsInfo") && this.usePopupTemplateFieldsInfo !== e.get("usePopupTemplateFieldsInfo") || e.has("popupTemplateFieldInfosEnabled") && this.popupTemplateFieldInfosEnabled !== e.get("popupTemplateFieldInfosEnabled")) && (t = !0), this.layerFieldsInfo === void 0 && (t = !0), t && this.updateFetchLayerFieldsInfo();
+    let a = !1;
+    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("r2") && this.r2Change(this.r2), e.has("layer") && this.layer !== void 0 && !l(e.get("layer"), this.layer) && (a = !0), (e.has("usePopupTemplateFieldsInfo") && this.usePopupTemplateFieldsInfo !== e.get("usePopupTemplateFieldsInfo") || e.has("popupTemplateFieldInfosEnabled") && this.popupTemplateFieldInfosEnabled !== e.get("popupTemplateFieldInfosEnabled")) && (a = !0), this.layerFieldsInfo === void 0 && (a = !0), a && this.updateFetchLayerFieldsInfo();
   }
-  modelChange(e, t) {
-    t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
+  modelChange(e, a) {
+    a?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   r2Change(e) {
     Number.isFinite(e) || (this.r2 = void 0);
   }
   async updateFetchLayerFieldsInfo(e) {
-    const t = e ?? this.model.config;
-    let i = this.layer;
-    if (!i) {
-      const s = m(t) ? t.iLayer : void 0;
-      s && (i = await n(s));
+    const a = e ?? this.model.config;
+    let t = this.layer;
+    if (!t) {
+      const i = u(a) ? a.iLayer : void 0;
+      i && (t = await h(i));
+    }
+    if (t) {
+      await p(t);
+      const i = this.usePopupTemplateFieldsInfo || this.popupTemplateFieldInfosEnabled;
+      this.layerFieldsInfo = y(t) ? f({ layer: t, popupTemplateFieldInfosEnabled: i, chartType: a?.type }) : m(t, i);
     }
-    i && (await i.load(), this.layerFieldsInfo = p(i, this.usePopupTemplateFieldsInfo || this.popupTemplateFieldInfosEnabled));
   }
   render() {
     let e;
     switch (this.page) {
       case o.Data:
-        const t = d(this.layer), i = t && "isTable" in t ? t.isTable : !1;
-        e = a`<arcgis-charts-config-scatter-plot-data .model=${this.model} .r2=${this.r2} .layerFieldsInfo=${this.layerFieldsInfo} .isTableLayer=${i}></arcgis-charts-config-scatter-plot-data>`;
+        const a = g(this.layer), t = a && "isTable" in a ? a.isTable : !1;
+        e = s`<arcgis-charts-config-scatter-plot-data .model=${this.model} .r2=${this.r2} .layerFieldsInfo=${this.layerFieldsInfo} .isTableLayer=${t}></arcgis-charts-config-scatter-plot-data>`;
         break;
       case o.Axes:
-        e = a`<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>`;
+        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 o.Guides:
-        e = a`<arcgis-charts-config-guides .model=${this.model} enable-x-axis-guide enable-y-axis-guide></arcgis-charts-config-guides>`;
+        e = s`<arcgis-charts-config-guides .model=${this.model} enable-x-axis-guide enable-y-axis-guide></arcgis-charts-config-guides>`;
         break;
       case o.Format:
-        e = a`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
+        e = s`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
         break;
       case o.General:
-        e = a`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
+        e = s`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
         break;
       default:
         e = "";
@@ -95,7 +73,7 @@ class u extends h {
     return e;
   }
 }
-r("arcgis-charts-config-scatter-plot", u);
+r("arcgis-charts-config-scatter-plot", b);
 export {
-  u as ArcgisChartsConfigScatterplot
+  b as ArcgisChartsConfigScatterplot
 };