@arcgis/charts-components 5.1.0-next.111 → 5.1.0-next.113

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

@@ -1,42 +1,18 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as P } from "../../chunks/runtime.js";
-import "@arcgis/toolkit/intl";
 import { cloneDeep as T, isEmpty as F, toNumber as $ } from "lodash-es";
-import "luxon";
-import "@arcgis/toolkit/type";
-import { u as f } from "../../chunks/series-types.js";
-import { i as v } from "../../chunks/rest-js-object-literals.js";
-import "@arcgis/core/layers/support/FeatureFilter.js";
-import "@arcgis/core/smartMapping/statistics/histogram.js";
-import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import { b0 as L, bp as b, aK as z, dT as A } from "../../chunks/index.js";
-import "@arcgis/core/Graphic.js";
-import "@arcgis/core/renderers/support/jsonUtils.js";
-import "@arcgis/core/symbols/support/symbolUtils.js";
-import "@arcgis/core/AttributeBinsGraphic.js";
-import "@arcgis/core/layers/support/CodedValueDomain.js";
-import "@arcgis/core/intl.js";
-import "@arcgis/core/request.js";
-import "simple-statistics";
-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 C } from "../../chunks/popover-ui-utils.js";
 import { S as a, g as d } from "../../chunks/interfaces.js";
-import { d as k, s as m } from "../../chunks/store.js";
-import { i as S, m as g, k as M, s as y, D as w, U as u } from "../../chunks/chart-ui-utils2.js";
-import { u as x } from "../../chunks/useT9n.js";
-import { css as V, html as r } from "lit";
+import { d as L, s as m } from "../../chunks/store.js";
+import { i as f, m as g, k as A, s as y, D as k, U as u } from "../../chunks/chart-ui-utils2.js";
+import { u as v } from "../../chunks/useT9n.js";
+import { css as M, html as r } from "lit";
 import { createRef as h, ref as c } from "lit/directives/ref.js";
-import { LitElement as _, createEvent as E, renderElement as D, safeClassMap as i, safeStyleMap as I } from "@arcgis/lumina";
+import { LitElement as w, createEvent as z, renderElement as _, safeClassMap as i, safeStyleMap as C } from "@arcgis/lumina";
+import { _ as V, F as x, aB as D } from "../../chunks/index.js";
+import { d as b } from "../../chunks/index3.js";
+import { r as E } from "../../chunks/popover-ui-utils.js";
+import { i as I } from "../../chunks/rest-js-object-literals.js";
+import { u as S } from "../../chunks/chart-object-literals.js";
 const l = {
   label: "label",
   r2: "r2",
@@ -47,14 +23,14 @@ const l = {
   sectionContainer: "section-container",
   multiInputSection: "multi-input-section",
   dimText: "dim-text"
-}, N = V`.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)}:host .number-input{margin-bottom:.5rem;display:flex}:host .number-input>div{width:100%}calcite-list-item{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor)}calcite-slider{margin-top:-1.5rem}.r2{margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor)}.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}.section-container{display:flex;flex-direction:column}.icon-select{cursor:pointer}.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)}.switch-element{margin-right:var(--arcgis-charts-config-margin-minor)}.multi-input-section{display:flex;justify-content:space-between;align-items:center}`;
-class K extends _ {
+}, N = 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)}:host .number-input{margin-bottom:.5rem;display:flex}:host .number-input>div{width:100%}calcite-list-item{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor)}calcite-slider{margin-top:-1.5rem}.r2{margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor)}.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}.section-container{display:flex;flex-direction:column}.icon-select{cursor:pointer}.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)}.switch-element{margin-right:var(--arcgis-charts-config-margin-minor)}.multi-input-section{display:flex;justify-content:space-between;align-items:center}`;
+class K extends w {
   constructor() {
-    super(...arguments), this._messages = x(), this.commonStrings = x({ name: "common", blocking: !0 }), this.scatterplotPopover = null, this.selectColorElement = h(), this.selectTrendLineElement = h(), this.xAxisElement = h(), this.yAxisElement = h(), this.tooltipFieldElement = h(), this.sizeVariableElement = h(), this.colorModeElement = h(), this.symbolSizeModeElement = h(), this.minSizeInputElement = h(), this.maxSizeInputElement = h(), this.items = [], this.setTrendLineSymbol = (e) => {
+    super(...arguments), this._messages = v(), this.commonStrings = v({ name: "common", blocking: !0 }), this.scatterplotPopover = null, this.selectColorElement = h(), this.selectTrendLineElement = h(), this.xAxisElement = h(), this.yAxisElement = h(), this.tooltipFieldElement = h(), this.sizeVariableElement = h(), this.colorModeElement = h(), this.symbolSizeModeElement = h(), this.minSizeInputElement = h(), this.maxSizeInputElement = h(), this.items = [], this.setTrendLineSymbol = (e) => {
       const t = e.detail;
       this.model.linearTrendSymbol = T(t);
     }, this.setFixedSymbolRGBAColor = (e) => {
-      const t = e.detail, [s, o, n] = t, p = A * 255;
+      const t = e.detail, [s, o, n] = t, p = D * 255;
       this.model.fixedMarkerSymbol = {
         ...this.model.fixedMarkerSymbol,
         color: [s, o, n, p]
@@ -62,7 +38,7 @@ class K extends _ {
     }, this.setXYField = (e) => {
       try {
         const t = e.detail;
-        k(m), this.contentKind === a.xAxisField ? this.model.xAxisField = t : this.model.yAxisField = t, this.removeScatterplotPopover();
+        L(m), this.contentKind === a.xAxisField ? this.model.xAxisField = t : this.model.yAxisField = t, this.removeScatterplotPopover();
       } catch (t) {
         throw t instanceof Error && this.arcgisChartsConfigDataChangeError.emit({ error: t, model: this.model }), t;
       }
@@ -74,7 +50,7 @@ class K extends _ {
         const t = e.detail;
         t ? this.model.sizePolicy = {
           ...this.model.sizePolicy,
-          type: f.SizePolicy,
+          type: S.SizePolicy,
           field: t
         } : this.model.sizePolicy = void 0, m.scatterplotData[m.selectedChartId] = {
           ...m.scatterplotData[m.selectedChartId],
@@ -88,13 +64,13 @@ class K extends _ {
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
       const { minSize: e, maxSize: t } = this.model.sizePolicy ?? {};
-      this.minSizeInputElement.value !== void 0 && e !== void 0 && (this.minSizeInputElement.value.value = `${e}`, S(this.minSizeInputElement.value.value, this.minSizeInputElement.value.min, this.minSizeInputElement.value.max) ? g({
+      this.minSizeInputElement.value !== void 0 && e !== void 0 && (this.minSizeInputElement.value.value = `${e}`, f(this.minSizeInputElement.value.value, this.minSizeInputElement.value.min, this.minSizeInputElement.value.max) ? g({
         inputElement: this.minSizeInputElement.value,
         status: u.IDLE
       }) : g({
         inputElement: this.minSizeInputElement.value,
         status: u.INVALID
-      })), this.maxSizeInputElement.value !== void 0 && t !== void 0 && (this.maxSizeInputElement.value.value = `${t}`, S(this.maxSizeInputElement.value.value, this.maxSizeInputElement.value.min, this.maxSizeInputElement.value.max) ? g({
+      })), this.maxSizeInputElement.value !== void 0 && t !== void 0 && (this.maxSizeInputElement.value.value = `${t}`, f(this.maxSizeInputElement.value.value, this.maxSizeInputElement.value.min, this.maxSizeInputElement.value.max) ? g({
         inputElement: this.maxSizeInputElement.value,
         status: u.IDLE
       }) : g({
@@ -104,7 +80,7 @@ class K extends _ {
     }, this.segmentedControlRef = (e) => {
       e && (e.focus = () => {
       }, this.items.push(e));
-    }, this.layerFieldsInfo = [], this.isTableLayer = !1, this.arcgisChartsConfigDataChangeError = E(), this.arcgisChartsConfigScatterplotPopoverChange = E();
+    }, this.layerFieldsInfo = [], this.isTableLayer = !1, this.arcgisChartsConfigDataChangeError = z(), this.arcgisChartsConfigScatterplotPopoverChange = z();
   }
   static {
     this.properties = { selectedElement: 16, selectedSizeType: 16, messageOverrides: 0, model: 0, r2: 9, layerFieldsInfo: 0, isTableLayer: 5 };
@@ -113,7 +89,7 @@ class K extends _ {
     this.styles = N;
   }
   load() {
-    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = L(this.commonStrings);
+    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = V(this.commonStrings);
   }
   willUpdate(e) {
     e.has("model") && (this.updateSymbolSizeInfoInAppState(), this.modelChange(this.model, e.get("model"))), e.has("selectedElement") && this.openPopover();
@@ -147,7 +123,7 @@ class K extends _ {
   }
   symbolSizeChange(e) {
     const t = e.target, { value: s } = t;
-    if (s !== void 0 && S(s, t.min, t.max)) {
+    if (s !== void 0 && f(s, t.min, t.max)) {
       const o = Number.parseInt(s), n = this.model.sizePolicy, p = this.model.fixedMarkerSymbol;
       switch (t.name) {
         case "fixed-symbol-size":
@@ -197,11 +173,11 @@ class K extends _ {
     const t = m.scatterplotData[m.selectedChartId]?.sizePolicyField;
     e === d.Proportional && t !== void 0 ? this.model.sizePolicy = {
       ...this.model.sizePolicy,
-      type: f.SizePolicy,
+      type: S.SizePolicy,
       field: t
     } : e === d.Fixed && (this.model.sizePolicy = {
       ...this.model.sizePolicy,
-      type: f.SizePolicy,
+      type: S.SizePolicy,
       field: ""
     });
   }
@@ -223,7 +199,7 @@ class K extends _ {
     e.stopImmediatePropagation(), this.contentKind = a.sizeVariable, this.selectedElement = this.model.sizePolicy?.field ?? "";
   }
   setupPopover() {
-    this.scatterplotPopover = C(this.scatterplotPopover);
+    this.scatterplotPopover = E(this.scatterplotPopover);
     const e = [...this.layerFieldsInfo];
     let t, s, o, n = "trailing";
     switch (this.contentKind) {
@@ -242,17 +218,17 @@ class K extends _ {
       case a.symbol:
       case a.trendLine: {
         const p = this.selectedElement;
-        o = this.selectedElement, n = "leading", Array.isArray(this.selectedElement) ? t = this.selectColorElement.value : p?.type === v.SLS && (t = this.selectTrendLineElement.value);
+        o = this.selectedElement, n = "leading", Array.isArray(this.selectedElement) ? t = this.selectColorElement.value : p?.type === I.SLS && (t = this.selectTrendLineElement.value);
         break;
       }
       default:
         this.contentKind = a.none, this.removeScatterplotPopover();
         break;
     }
-    this.scatterplotPopover = D(r`<arcgis-charts-config-scatter-plot-popover .headingTitle=${s} .referenceElement=${t} open .contentKind=${this.contentKind} .layerFieldsInfo=${e} .selectedContent=${o} .placement=${n} @arcgisChartsConfigPopoverClose=${this.closeScatterplotPopover} @arcgisChartsConfigScatterplotFillColorChange=${this.setFixedSymbolRGBAColor} @arcgisChartsConfigScatterplotLineStyleChange=${this.setTrendLineSymbol} @arcgisChartsConfigScatterplotXYFieldChange=${this.setXYField} @arcgisChartsConfigScatterplotSizeVariableFieldChange=${this.setSizeVariableField} @arcgisChartsConfigScatterplotAdditionalTooltipFieldChange=${this.setAdditionalTooltipField}></arcgis-charts-config-scatter-plot-popover>`), !document.body.contains(this.scatterplotPopover) && this.scatterplotPopover !== null && document.body.appendChild(this.scatterplotPopover);
+    this.scatterplotPopover = _(r`<arcgis-charts-config-scatter-plot-popover .headingTitle=${s} .referenceElement=${t} open .contentKind=${this.contentKind} .layerFieldsInfo=${e} .selectedContent=${o} .placement=${n} @arcgisChartsConfigPopoverClose=${this.closeScatterplotPopover} @arcgisChartsConfigScatterplotFillColorChange=${this.setFixedSymbolRGBAColor} @arcgisChartsConfigScatterplotLineStyleChange=${this.setTrendLineSymbol} @arcgisChartsConfigScatterplotXYFieldChange=${this.setXYField} @arcgisChartsConfigScatterplotSizeVariableFieldChange=${this.setSizeVariableField} @arcgisChartsConfigScatterplotAdditionalTooltipFieldChange=${this.setAdditionalTooltipField}></arcgis-charts-config-scatter-plot-popover>`), !document.body.contains(this.scatterplotPopover) && this.scatterplotPopover !== null && document.body.appendChild(this.scatterplotPopover);
   }
   removeScatterplotPopover() {
-    this.scatterplotPopover !== null && (this.scatterplotPopover = C(this.scatterplotPopover)), this.selectedElement = void 0;
+    this.scatterplotPopover !== null && (this.scatterplotPopover = E(this.scatterplotPopover)), this.selectedElement = void 0;
   }
   getCurrentSymbolSizeType() {
     const e = this.model.sizePolicy;
@@ -268,8 +244,8 @@ class K extends _ {
     return r`<arcgis-charts-config-field-select .disabled=${this.model.dataStore.aggregated} .label=${b(this.layerFieldsInfo, this.model.additionalTooltipField?.[0] ?? "")} @click=${this.onAdditionalTooltipFieldSelectChange} ${c(this.tooltipFieldElement)}></arcgis-charts-config-field-select>`;
   }
   renderStatistics() {
-    const [e, t, s, o] = [...this.model.linearTrendSymbol?.color ?? z(0)];
-    return r`<div class=${i(l.sectionContainer)}><calcite-label class=${i(l.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${i(l.switchElement)} .checked=${this.model.showLinearTrend} @calciteSwitchChange=${this.setShowTrendLine}></calcite-switch></calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.trendLineStyle} value=selectTrendLine .hidden=${!this.model.showLinearTrend} .selected=${this.selectedElement?.type === v.SLS} @click=${this.changeElementStyle} ${c(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${I({ color: `rgba(${e},${t},${s},${o / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${i(l.r2)} .hidden=${!this.model.showLinearTrend}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : M(this.r2, w)}`}</div></div>`;
+    const [e, t, s, o] = [...this.model.linearTrendSymbol?.color ?? x(0)];
+    return r`<div class=${i(l.sectionContainer)}><calcite-label class=${i(l.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${i(l.switchElement)} .checked=${this.model.showLinearTrend} @calciteSwitchChange=${this.setShowTrendLine}></calcite-switch></calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.trendLineStyle} value=selectTrendLine .hidden=${!this.model.showLinearTrend} .selected=${this.selectedElement?.type === I.SLS} @click=${this.changeElementStyle} ${c(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${C({ color: `rgba(${e},${t},${s},${o / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${i(l.r2)} .hidden=${!this.model.showLinearTrend}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : A(this.r2, k)}`}</div></div>`;
   }
   renderFixedSymbol() {
     return r`<calcite-label class=${i(l.label)}>${this._messages.size}<calcite-input type=number name=fixed-symbol-size class=${i(l.numberInput)} min=1 max=100 step=1 .value=${y(this.model.fixedMarkerSymbol?.size)} @calciteInputInput=${this.symbolSizeChange}></calcite-input></calcite-label>`;
@@ -290,8 +266,8 @@ class K extends _ {
     return r`<calcite-label class=${i(l.label)}>${this._messages.size}<calcite-segmented-control name=symbolSizeType layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeSymbolSizeTypeToggle} ${c(this.symbolSizeModeElement)}><calcite-segmented-control-item .value=${d.Fixed} .checked=${d.Fixed === this.selectedSizeType} ${c(this.segmentedControlRef)}>${this._messages.fixed}</calcite-segmented-control-item><calcite-segmented-control-item .value=${d.Proportional} .checked=${d.Proportional === this.selectedSizeType} ${c(this.segmentedControlRef)}>${this._messages.proportional}</calcite-segmented-control-item></calcite-segmented-control></calcite-label>`;
   }
   renderSymbol() {
-    const [e, t, s, o] = [...this.model.fixedMarkerSymbol?.color ?? z(0)];
-    return r`<div class=${i(l.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === d.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${i(l.label)}>${this._messages.color}${this.isTableLayer ? null : r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${c(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.singleColor}</calcite-segmented-control-item></calcite-segmented-control>`}</calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.color} value=selectColor .hidden=${this.model.colorMatch && !this.isTableLayer} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${c(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${I({ color: `rgba(${e},${t},${s},${o / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
+    const [e, t, s, o] = [...this.model.fixedMarkerSymbol?.color ?? x(0)];
+    return r`<div class=${i(l.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === d.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${i(l.label)}>${this._messages.color}${this.isTableLayer ? null : r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${c(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.singleColor}</calcite-segmented-control-item></calcite-segmented-control>`}</calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.color} value=selectColor .hidden=${this.model.colorMatch && !this.isTableLayer} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${c(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${C({ color: `rgba(${e},${t},${s},${o / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
   }
   render() {
     return r`<h3 class=${i(l.sectionLabel)}>${this._messages.variables}</h3><calcite-label class=${i(l.label)}>${this._messages.xAxisNumber}${this.renderXVariable()}</calcite-label><calcite-label class=${i(l.label)}>${this._messages.yAxisNumber}${this.renderYVariable()}</calcite-label><calcite-label class=${i(l.label)}><span class=${i(this.model.dataStore.aggregated ? l.dimText : "")}>${this._messages.additionalTooltipFields}</span>${this.renderTooltipField()}</calcite-label><h3 class=${i(l.sectionLabel)}>${this._messages.statistics}</h3>${this.renderStatistics()}<h3 class=${i(l.sectionLabel)}>${this._messages.symbol}</h3>${this.renderSymbol()}`;

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

@@ -2,41 +2,15 @@
 import { c as g } from "../../chunks/runtime.js";
 import { css as f, html as o } from "lit";
 import { keyed as c } from "lit/directives/keyed.js";
-import "@arcgis/toolkit/type";
-import "../../chunks/series-types.js";
-import { i as p } from "../../chunks/rest-js-object-literals.js";
-import "@arcgis/toolkit/intl";
-import "lodash-es";
-import "luxon";
-import "@arcgis/core/layers/support/FeatureFilter.js";
-import "@arcgis/core/smartMapping/statistics/histogram.js";
-import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import { c_ as v, bp as y } from "../../chunks/index.js";
-import "@arcgis/core/Graphic.js";
-import "@arcgis/core/renderers/support/jsonUtils.js";
-import "@arcgis/core/symbols/support/symbolUtils.js";
-import "@arcgis/core/AttributeBinsGraphic.js";
-import "@arcgis/core/layers/support/CodedValueDomain.js";
-import "@arcgis/core/intl.js";
-import "@arcgis/core/request.js";
-import "simple-statistics";
-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 u } from "../../chunks/popover-ui-utils.js";
 import { S as n } from "../../chunks/interfaces.js";
-import { a as S, l as $, c as h } from "../../chunks/chart-ui-utils2.js";
-import { u as b } from "../../chunks/useT9n.js";
-import { createRef as m, ref as d } from "lit/directives/ref.js";
-import { LitElement as P, createEvent as l, safeClassMap as a } from "@arcgis/lumina";
+import { a as v, l as y, c as p } from "../../chunks/chart-ui-utils2.js";
+import { u } from "../../chunks/useT9n.js";
+import { createRef as h, ref as d } from "lit/directives/ref.js";
+import { LitElement as S, createEvent as l, safeClassMap as a } from "@arcgis/lumina";
+import { i as m } from "../../chunks/rest-js-object-literals.js";
+import { e as $ } from "../../chunks/popover-ui-utils.js";
+import { d as b } from "../../chunks/index3.js";
+import { bj as P } from "../../chunks/index2.js";
 const r = {
   jsAppFlyout: "js-app-flyout",
   scatterplotPopover: "scatter-plot-popover",
@@ -45,9 +19,9 @@ const r = {
   pickListItemLabel: "pick-list-item-label",
   pickListPanel: "pick-list-panel"
 }, F = f`.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{width:100%}.pick-list-panel{max-height:60vh}`;
-class L extends P {
+class L extends S {
   constructor() {
-    super(...arguments), this.picklist = m(), this._messages = b(), this.popoverElement = m(), this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
+    super(...arguments), this.picklist = h(), this._messages = u(), this.popoverElement = h(), this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 1, contentKind: 1, selectedContent: 1, referenceElement: 0, placement: 1, open: 5, layerFieldsInfo: 0 };
@@ -61,7 +35,7 @@ class L extends P {
   updated() {
     setTimeout(() => {
       this.picklist.value?.setFocus();
-    }, S.PopoverTimer), u(this.popoverElement.value, this.open);
+    }, v.PopoverTimer), $(this.popoverElement.value, this.open);
   }
   seriesPopoverClose() {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
@@ -81,16 +55,16 @@ class L extends P {
   }
   render() {
     const e = this.selectedContent, t = this.selectedContent;
-    return o`<div class=${a({ [r.jsAppFlyout]: !0 })}><calcite-popover class=${a(r.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${$(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${d(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${a(r.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === p.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${!Array.isArray(e) && t?.type !== p.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
+    return o`<div class=${a({ [r.jsAppFlyout]: !0 })}><calcite-popover class=${a(r.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${y(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${d(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${a(r.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === m.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${!Array.isArray(e) && t?.type !== m.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
   }
   renderVariablePickList() {
     const e = this.layerFieldsInfo?.length ?? 0, t = [];
-    (this.contentKind === n.sizeVariable || this.contentKind === n.additionalTooltipFields) && t.push(c(" ", o`<calcite-list-item label=" " value=" " .selected=${h("", this.selectedContent)}></calcite-list-item>`));
+    (this.contentKind === n.sizeVariable || this.contentKind === n.additionalTooltipFields) && t.push(c(" ", o`<calcite-list-item label=" " value=" " .selected=${p("", this.selectedContent)}></calcite-list-item>`));
     for (let i = 0; i < e; i += 1) {
       const s = this.layerFieldsInfo?.[i] ?? void 0;
-      if (s !== void 0 && (this.contentKind === n.additionalTooltipFields || v(s))) {
-        const C = y(this.layerFieldsInfo, s.name);
-        t.push(c(s.name, o`<calcite-list-item .label=${C} .value=${s.name} .selected=${h(s.name, this.selectedContent)}></calcite-list-item>`));
+      if (s !== void 0 && (this.contentKind === n.additionalTooltipFields || P(s))) {
+        const C = b(this.layerFieldsInfo, s.name);
+        t.push(c(s.name, o`<calcite-list-item .label=${C} .value=${s.name} .selected=${p(s.name, this.selectedContent)}></calcite-list-item>`));
       }
     }
     return o`<calcite-panel class=${a(r.pickListPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${a(r.header)}>${this.headingTitle ?? ""}</div><calcite-list label class=${a(r.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onFieldSelectionChange} ${d(this.picklist)}>${t}</calcite-list></calcite-panel>`;

package/dist/components/arcgis-charts-config-select-chart-type-popover/customElement.js

@@ -1,48 +1,20 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c } from "../../chunks/runtime.js";
 import { css as o, html as i } from "lit";
-import "@arcgis/toolkit/intl";
-import "lodash-es";
-import "luxon";
-import "@arcgis/toolkit/type";
-import "../../chunks/series-types.js";
-import "@arcgis/core/layers/support/FeatureFilter.js";
-import "@arcgis/core/smartMapping/statistics/histogram.js";
-import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import { de as r } from "../../chunks/index.js";
-import "@arcgis/core/Graphic.js";
-import "@arcgis/core/renderers/support/jsonUtils.js";
-import "@arcgis/core/symbols/support/symbolUtils.js";
-import "@arcgis/core/AttributeBinsGraphic.js";
-import "@arcgis/core/layers/support/CodedValueDomain.js";
-import "@esri/arcgis-html-sanitizer";
-import "@arcgis/core/intl.js";
-import "@arcgis/core/request.js";
-import "simple-statistics";
-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 p } from "../../chunks/popover-ui-utils.js";
-import { u as n } from "../../chunks/useT9n.js";
-import { createRef as h, ref as m } from "lit/directives/ref.js";
-import { LitElement as d, createEvent as s, safeClassMap as l } from "@arcgis/lumina";
+import { u as r } from "../../chunks/useT9n.js";
+import { createRef as n, ref as h } from "lit/directives/ref.js";
+import { LitElement as p, createEvent as s, safeClassMap as l } from "@arcgis/lumina";
+import { e as m } from "../../chunks/popover-ui-utils.js";
+import { d } from "../../chunks/type-guards.js";
 import { M as e } from "../../chunks/common.js";
 const a = {
   selectChartComponent: "select-chart-component",
   jsAppFlyout: "js-app-flyout",
   panel: "panel"
 }, g = o`.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)}.select-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}calcite-block{width:var(--arcgis-charts-config-calcite-block-default-width);height:var(--arcgis-charts-config-calcite-block-default-height);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.header{margin:0}.panel{max-height:60vh}`;
-class C extends d {
+class C extends p {
   constructor() {
-    super(...arguments), this._messages = n(), this.selectChartTypePopover = h(), this.open = !1, this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSelectChartTypeChange = s();
+    super(...arguments), this._messages = r(), this.selectChartTypePopover = n(), this.open = !1, this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSelectChartTypeChange = s();
   }
   static {
     this.properties = { messageOverrides: 0, headerTitle: 1, layerId: 1, layerType: 1, isRasterBarChartSupported: 5, open: 5, referenceElement: 0, popoverPlacement: 1, selectedModelType: 1 };
@@ -54,7 +26,7 @@ class C extends d {
     await this.selectChartTypePopover.value?.reposition();
   }
   updated() {
-    p(this.selectChartTypePopover.value, this.open);
+    m(this.selectChartTypePopover.value, this.open);
   }
   buildRasterChartTypesList() {
     const t = this.isRasterBarChartSupported === !0;
@@ -62,7 +34,7 @@ class C extends d {
   }
   buildChartTypesList() {
     let t;
-    return r(this.layerType) ? t = this.buildRasterChartTypesList() : t = i`<calcite-list label @click=${this.onChartTypeClick}><calcite-list-item .label=${this._messages.barChart} .value=${e.BarChart} .selected=${this.selectedModelType === e.BarChart}><calcite-icon slot=content-start icon=graph-bar></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.lineChart} .value=${e.LineChart} .selected=${this.selectedModelType === e.LineChart}><calcite-icon slot=content-start icon=graph-time-series></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.pieChart} .value=${e.PieChart} .selected=${this.selectedModelType === e.PieChart}><calcite-icon slot=content-start icon=pie-chart></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.histogram} .value=${e.Histogram} .selected=${this.selectedModelType === e.Histogram}><calcite-icon slot=content-start icon=graph-histogram></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.scatterplot} .value=${e.Scatterplot} .selected=${this.selectedModelType === e.Scatterplot}><calcite-icon slot=content-start icon=graph-scatter-plot></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.boxPlot} .value=${e.BoxPlot} .selected=${this.selectedModelType === e.BoxPlot}><calcite-icon slot=content-start icon=box-chart></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.calendarHeatChart} .value=${e.HeatChart} .selected=${this.selectedModelType === e.HeatChart}><calcite-icon slot=content-start icon=calendar-heat-chart></calcite-icon></calcite-list-item></calcite-list>`, t;
+    return d(this.layerType) ? t = this.buildRasterChartTypesList() : t = i`<calcite-list label @click=${this.onChartTypeClick}><calcite-list-item .label=${this._messages.barChart} .value=${e.BarChart} .selected=${this.selectedModelType === e.BarChart}><calcite-icon slot=content-start icon=graph-bar></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.lineChart} .value=${e.LineChart} .selected=${this.selectedModelType === e.LineChart}><calcite-icon slot=content-start icon=graph-time-series></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.pieChart} .value=${e.PieChart} .selected=${this.selectedModelType === e.PieChart}><calcite-icon slot=content-start icon=pie-chart></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.histogram} .value=${e.Histogram} .selected=${this.selectedModelType === e.Histogram}><calcite-icon slot=content-start icon=graph-histogram></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.scatterplot} .value=${e.Scatterplot} .selected=${this.selectedModelType === e.Scatterplot}><calcite-icon slot=content-start icon=graph-scatter-plot></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.boxPlot} .value=${e.BoxPlot} .selected=${this.selectedModelType === e.BoxPlot}><calcite-icon slot=content-start icon=box-chart></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.calendarHeatChart} .value=${e.HeatChart} .selected=${this.selectedModelType === e.HeatChart}><calcite-icon slot=content-start icon=calendar-heat-chart></calcite-icon></calcite-list-item></calcite-list>`, t;
   }
   onChartTypeClick(t) {
     t.target?.localName === "calcite-list-item" ? this.selectedModelType = t.target?.value : this.selectedModelType = t.target?.parentNode?.value, this.arcgisChartsConfigSelectChartTypeChange.emit();
@@ -81,7 +53,7 @@ class C extends d {
     return i`<div class=${l({
       [a.selectChartComponent]: !0,
       [a.jsAppFlyout]: !0
-    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} auto-close label ${m(this.selectChartTypePopover)}><calcite-panel class=${l(a.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
+    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} auto-close label ${h(this.selectChartTypePopover)}><calcite-panel class=${l(a.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
   }
 }
 c("arcgis-charts-config-select-chart-type-popover", C);

package/dist/components/arcgis-charts-config-view-charts/customElement.js

@@ -1,50 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
 import { keyed as m } from "lit/directives/keyed.js";
-import "@arcgis/toolkit/intl";
-import "lodash-es";
-import "luxon";
-import "@arcgis/toolkit/type";
-import "../../chunks/series-types.js";
-import "@arcgis/core/layers/support/FeatureFilter.js";
-import "@arcgis/core/smartMapping/statistics/histogram.js";
-import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import "../../chunks/index.js";
-import "@arcgis/core/Graphic.js";
-import "@arcgis/core/renderers/support/jsonUtils.js";
-import "@arcgis/core/symbols/support/symbolUtils.js";
-import "@arcgis/core/AttributeBinsGraphic.js";
-import "@arcgis/core/layers/support/CodedValueDomain.js";
-import "@esri/arcgis-html-sanitizer";
-import "@arcgis/core/intl.js";
-import "@arcgis/core/request.js";
-import "simple-statistics";
-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 { g as p } from "../../chunks/chart-ui-utils.js";
-import { r as C } from "../../chunks/popover-ui-utils.js";
-import { u as g } from "../../chunks/useT9n.js";
-import { css as f, html as o } from "lit";
-import { LitElement as v, createEvent as s, safeClassMap as c, renderElement as u } from "@arcgis/lumina";
-import { repeat as w } from "lit/directives/repeat.js";
+import { u as p } from "../../chunks/useT9n.js";
+import { css as C, html as r } from "lit";
+import { LitElement as g, createEvent as o, safeClassMap as c, renderElement as f } from "@arcgis/lumina";
+import { repeat as v } from "lit/directives/repeat.js";
+import { g as u } from "../../chunks/chart-ui-utils.js";
+import { r as w } from "../../chunks/popover-ui-utils.js";
 const n = {
   addChartContainer: "add-chart-container",
   viewChartComponent: "view-chart-component",
   header: "header",
   dropdownPopup: "dropdown-popup"
-}, I = f`.view-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}.add-chart-container{display:flex;justify-content:center;padding:2rem 0;background-color:var(--calcite-color-background)}.header{margin-left:1rem}.dropdown-popup{position:relative}`;
-class R extends v {
+}, I = C`.view-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}.add-chart-container{display:flex;justify-content:center;padding:2rem 0;background-color:var(--calcite-color-background)}.header{margin-left:1rem}.dropdown-popup{position:relative}`;
+class R extends g {
   constructor() {
-    super(...arguments), this._messages = g(), this.chartRenamePopover = null, this.popoverClose = () => {
+    super(...arguments), this._messages = p(), this.chartRenamePopover = null, this.popoverClose = () => {
       const e = this.modelList?.find((t) => t.chartId === this.selectedChartId);
       this.chartTitle = e?.titleText ?? "", this.selectedActionChartId = "", this.removeChartRenamePopover();
     }, this.onChartRename = (e) => {
@@ -59,11 +30,11 @@ class R extends v {
       if (e.detail !== null && e.detail !== void 0) {
         const { newIndex: t, oldIndex: i } = e.detail;
         if (this.modelList !== void 0 && this.modelList?.length > 0) {
-          const r = [...this.modelList], a = r?.[i], h = r?.[t];
-          a && h && (r.splice(i, 1), r.splice(t, 0, a)), this.chartsOrderReorderCounter += 1, this.arcgisChartsConfigModelListReorder.emit({ modelList: r });
+          const a = [...this.modelList], s = a?.[i], h = a?.[t];
+          s && h && (a.splice(i, 1), a.splice(t, 0, s)), this.chartsOrderReorderCounter += 1, this.arcgisChartsConfigModelListReorder.emit({ modelList: a });
         }
       }
-    }, this.isChartRenamePopoverOpen = !1, this.chartTitle = "", this.chartsOrderReorderCounter = 0, this.noGroup = !1, this.disableEditing = !1, this.arcgisChartsConfigModelListReorder = s(), this.arcgisChartsConfigViewChartAddChart = s(), this.arcgisChartsConfigViewChartDelete = s(), this.arcgisChartsConfigViewChartEdit = s(), this.arcgisChartsConfigViewChartSelect = s();
+    }, this.isChartRenamePopoverOpen = !1, this.chartTitle = "", this.chartsOrderReorderCounter = 0, this.noGroup = !1, this.disableEditing = !1, this.arcgisChartsConfigModelListReorder = o(), this.arcgisChartsConfigViewChartAddChart = o(), this.arcgisChartsConfigViewChartDelete = o(), this.arcgisChartsConfigViewChartEdit = o(), this.arcgisChartsConfigViewChartSelect = o();
   }
   static {
     this.properties = { isChartRenamePopoverOpen: 16, chartTitle: 16, selectedActionChartId: 16, chartsOrderReorderCounter: 16, messageOverrides: 0, selectedChartId: 1, layer: 0, modelList: 0, noGroup: 5, disableEditing: 5 };
@@ -92,11 +63,11 @@ class R extends v {
     });
   }
   buildChartList() {
-    const e = this.modelList ? w(this.modelList, (t) => t.chartId, (t, i) => {
-      const r = t.chartId, a = t.titleText, h = p(t.config);
-      return o`<calcite-list-item .label=${a ?? r ?? this._messages.chartTitle} .selected=${this.selectedChartId === (r?.toString() ?? i.toString())} .value=${r ?? i.toString()} @click=${this.onChartSelect}><calcite-icon slot=content-start .icon=${h}></calcite-icon>${this.disableEditing ? null : o`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end .open=${this.selectedActionChartId === r} @calciteDropdownClose=${() => this.chartActionClosed(r ?? "")} @calciteDropdownOpen=${() => this.chartActionOpened(r ?? "")} class=${c(n.dropdownPopup)}><calcite-action scale=l .text=${this._messages.chartActions ?? ""} slot=trigger .active=${r === this.selectedActionChartId}><calcite-icon icon=ellipsis></calcite-icon></calcite-action><calcite-dropdown-group selection-mode=none><calcite-dropdown-item accesskey=edit @calciteDropdownItemSelect=${this.chartEditSelect}>${this._messages.edit}</calcite-dropdown-item><calcite-dropdown-item accesskey=rename @click=${(l) => l.stopPropagation()} @calciteDropdownItemSelect=${this.chartRenameSelect}>${this._messages.rename}</calcite-dropdown-item><calcite-dropdown-item accesskey=delete @calciteDropdownItemSelect=${this.chartDeleteSelect}>${this._messages.delete}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`}</calcite-list-item>`;
+    const e = this.modelList ? v(this.modelList, (t) => t.chartId, (t, i) => {
+      const a = t.chartId, s = t.titleText, h = u(t.config);
+      return r`<calcite-list-item .label=${s ?? a ?? this._messages.chartTitle} .selected=${this.selectedChartId === (a?.toString() ?? i.toString())} .value=${a ?? i.toString()} @click=${this.onChartSelect}><calcite-icon slot=content-start .icon=${h}></calcite-icon>${this.disableEditing ? null : r`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end .open=${this.selectedActionChartId === a} @calciteDropdownClose=${() => this.chartActionClosed(a ?? "")} @calciteDropdownOpen=${() => this.chartActionOpened(a ?? "")} class=${c(n.dropdownPopup)}><calcite-action scale=l .text=${this._messages.chartActions ?? ""} slot=trigger .active=${a === this.selectedActionChartId}><calcite-icon icon=ellipsis></calcite-icon></calcite-action><calcite-dropdown-group selection-mode=none><calcite-dropdown-item accesskey=edit @calciteDropdownItemSelect=${this.chartEditSelect}>${this._messages.edit}</calcite-dropdown-item><calcite-dropdown-item accesskey=rename @click=${(l) => l.stopPropagation()} @calciteDropdownItemSelect=${this.chartRenameSelect}>${this._messages.rename}</calcite-dropdown-item><calcite-dropdown-item accesskey=delete @calciteDropdownItemSelect=${this.chartDeleteSelect}>${this._messages.delete}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`}</calcite-list-item>`;
     }) : null;
-    return this.layer ? o`<div>${this.noGroup ? null : o`<p class=${c(n.header)}>${this.layer.title ?? this.layer.id.toString()}</p>`}${m(this.chartsOrderReorderCounter, o`<calcite-list label .dragEnabled=${!this.disableEditing} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${e}${this.disableEditing ? null : o`<div class=${c(n.addChartContainer)}><calcite-fab slot=fab appearance=outline-fill kind=neutral text-enabled .text=${this._messages.addChart} .label=${this._messages.addChart} @click=${this.onAddChartClick} scale=s></calcite-fab></div>`}</calcite-list>`)}</div>` : null;
+    return this.layer ? r`<div>${this.noGroup ? null : r`<p class=${c(n.header)}>${this.layer.title ?? this.layer.id.toString()}</p>`}${m(this.chartsOrderReorderCounter, r`<calcite-list label .dragEnabled=${!this.disableEditing} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${e}${this.disableEditing ? null : r`<div class=${c(n.addChartContainer)}><calcite-fab slot=fab appearance=outline-fill kind=neutral text-enabled .text=${this._messages.addChart} .label=${this._messages.addChart} @click=${this.onAddChartClick} scale=s></calcite-fab></div>`}</calcite-list>`)}</div>` : null;
   }
   onChartSelect(e) {
     const t = e.currentTarget;
@@ -110,10 +81,10 @@ class R extends v {
   }
   chartRenameSelect(e) {
     if (!this.disableEditing) {
-      const i = e.target.closest("calcite-list-item"), r = this.modelList?.find((a) => a.chartId === this.selectedActionChartId);
+      const i = e.target.closest("calcite-list-item"), a = this.modelList?.find((s) => s.chartId === this.selectedActionChartId);
       i !== null && (this.renameReferenceElement = i), this.arcgisChartsConfigViewChartSelect.emit({
         chartId: this.selectedActionChartId
-      }), this.chartTitle = r?.titleText ?? "", this.setupRenamePopover();
+      }), this.chartTitle = a?.titleText ?? "", this.setupRenamePopover();
     }
   }
   chartDeleteSelect() {
@@ -128,13 +99,13 @@ class R extends v {
     this.selectedActionChartId = e;
   }
   setupRenamePopover() {
-    this.isChartRenamePopoverOpen = !0, this.chartRenamePopover !== null && (this.chartRenamePopover.name = this.chartTitle, this.chartRenamePopover.referenceElement = this.renameReferenceElement), this.chartRenamePopover = u(o`<arcgis-charts-config-chart-rename-popover .name=${this.chartTitle} .referenceElement=${this.renameReferenceElement} .open=${this.isChartRenamePopoverOpen} @arcgisChartsConfigPopoverClose=${this.popoverClose} @arcgisChartsConfigChartRenamePopoverChange=${this.onChartRename}></arcgis-charts-config-chart-rename-popover>`), !document.body.contains(this.chartRenamePopover) && this.chartRenamePopover !== null && document.body.appendChild(this.chartRenamePopover);
+    this.isChartRenamePopoverOpen = !0, this.chartRenamePopover !== null && (this.chartRenamePopover.name = this.chartTitle, this.chartRenamePopover.referenceElement = this.renameReferenceElement), this.chartRenamePopover = f(r`<arcgis-charts-config-chart-rename-popover .name=${this.chartTitle} .referenceElement=${this.renameReferenceElement} .open=${this.isChartRenamePopoverOpen} @arcgisChartsConfigPopoverClose=${this.popoverClose} @arcgisChartsConfigChartRenamePopoverChange=${this.onChartRename}></arcgis-charts-config-chart-rename-popover>`), !document.body.contains(this.chartRenamePopover) && this.chartRenamePopover !== null && document.body.appendChild(this.chartRenamePopover);
   }
   removeChartRenamePopover() {
-    this.chartRenamePopover !== null && (this.isChartRenamePopoverOpen = !1, this.chartRenamePopover = C(this.chartRenamePopover));
+    this.chartRenamePopover !== null && (this.isChartRenamePopoverOpen = !1, this.chartRenamePopover = w(this.chartRenamePopover));
   }
   render() {
-    return o`<div class=${c(n.viewChartComponent)}>${this.buildChartList()}</div>`;
+    return r`<div class=${c(n.viewChartComponent)}>${this.buildChartList()}</div>`;
   }
 }
 d("arcgis-charts-config-view-charts", R);

package/dist/components/arcgis-charts-info-modal/customElement.js

@@ -1,38 +1,12 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
-import { css as m, html as r } from "lit";
-import { LitElement as p, safeClassMap as a, safeStyleMap as i } from "@arcgis/lumina";
-import { H as o } from "../../chunks/resources.js";
-import "@arcgis/toolkit/intl";
-import "lodash-es";
-import "luxon";
-import "@arcgis/toolkit/type";
-import "../../chunks/series-types.js";
-import "@arcgis/core/layers/support/FeatureFilter.js";
-import "@arcgis/core/smartMapping/statistics/histogram.js";
-import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import { dm as c, dn as h, dp as g, cM as f, u, dk as b, d_ as x } from "../../chunks/index.js";
-import "@arcgis/core/Graphic.js";
-import "@arcgis/core/renderers/support/jsonUtils.js";
-import "@arcgis/core/symbols/support/symbolUtils.js";
-import "@arcgis/core/AttributeBinsGraphic.js";
-import "@arcgis/core/layers/support/CodedValueDomain.js";
-import "@arcgis/core/intl.js";
-import "@arcgis/core/request.js";
-import "simple-statistics";
-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";
-const y = 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:block;width:auto;height:auto;overflow:auto}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}.info-modal-container{box-sizing:border-box;width:-webkit-fill-available;height:100%;display:grid;position:absolute;place-items:center;align-content:center;justify-content:center;padding:1rem;text-align:start}.info-modal-container h3.heading-true{display:flex;margin-bottom:auto;background:#0000000d;height:30px;padding:.5rem;justify-self:stretch;text-align:start;align-items:center}.info-modal-container h3.heading-false{background:#0000000d;margin-bottom:auto;text-align:start}.info-modal-container p{justify-self:stretch;text-align:start}.chart-loader-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1001}`;
-class C extends p {
+import { css as c, html as o } from "lit";
+import { LitElement as h, safeClassMap as r, safeStyleMap as a } from "@arcgis/lumina";
+import { H as i } from "../../chunks/resources.js";
+import { as as g, at as m, au as p, e as f, ar as u } from "../../chunks/index.js";
+import { p as b, B as x } from "../../chunks/index3.js";
+const y = c`.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:block;width:auto;height:auto;overflow:auto}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}.info-modal-container{box-sizing:border-box;width:-webkit-fill-available;height:100%;display:grid;position:absolute;place-items:center;align-content:center;justify-content:center;padding:1rem;text-align:start}.info-modal-container h3.heading-true{display:flex;margin-bottom:auto;background:#0000000d;height:30px;padding:.5rem;justify-self:stretch;text-align:start;align-items:center}.info-modal-container h3.heading-false{background:#0000000d;margin-bottom:auto;text-align:start}.info-modal-container p{justify-self:stretch;text-align:start}.chart-loader-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1001}`;
+class C extends h {
   constructor() {
     super(...arguments), this.message = "", this.heading = "", this.showLoader = !1, this.enableAutoTheming = !1;
   }
@@ -43,17 +17,17 @@ class C extends p {
     this.styles = y;
   }
   render() {
-    let e = null;
-    const n = this.calciteThemeApplied === "dark" && this.enableAutoTheming, t = this.loaderColors?.curtainColor ?? (n ? c : h), l = this.loaderColors?.spinnerColor ?? g, s = f({
-      r: t[0],
-      g: t[1],
-      b: t[2],
-      a: t[3] / 255
-    }) ? u : b;
-    return this.showLoader ? e = r`<div class=${a(o.ChartLoaderOverlay)} style=${i({
-      background: `rgb(${t.toString()})`,
+    let t = null;
+    const n = this.calciteThemeApplied === "dark" && this.enableAutoTheming, e = this.loaderColors?.curtainColor ?? (n ? g : m), l = this.loaderColors?.spinnerColor ?? p, s = b({
+      r: e[0],
+      g: e[1],
+      b: e[2],
+      a: e[3] / 255
+    }) ? f : u;
+    return this.showLoader ? t = o`<div class=${r(i.ChartLoaderOverlay)} style=${a({
+      background: `rgb(${e.toString()})`,
       "--calcite-loader-progress-color": `rgb(${l.toString()})`
-    })}><calcite-loader scale=s label=Loading></calcite-loader></div>` : this.message !== void 0 ? e = r`<div class=${a(o.InfoModalContainer)} style=${i({ background: `rgb(${t.toString()})` })}><h3 class=${a(this.heading !== "" ? "heading-true" : "heading-false")} style=${i({ color: `rgb(${s.toString()})` })}>${this.heading}</h3><p style=${i({ color: `rgb(${s.toString()})` })} .innerHTML=${x(this.message) ?? ""}></p></div>` : e = r`<div class=${`${o.InfoModalContainer} ${o.Hide}`}></div>`, e;
+    })}><calcite-loader scale=s label=Loading></calcite-loader></div>` : this.message !== void 0 ? t = o`<div class=${r(i.InfoModalContainer)} style=${a({ background: `rgb(${e.toString()})` })}><h3 class=${r(this.heading !== "" ? "heading-true" : "heading-false")} style=${a({ color: `rgb(${s.toString()})` })}>${this.heading}</h3><p style=${a({ color: `rgb(${s.toString()})` })} .innerHTML=${x(this.message) ?? ""}></p></div>` : t = o`<div class=${`${i.InfoModalContainer} ${i.Hide}`}></div>`, t;
   }
 }
 d("arcgis-charts-info-modal", C);