@arcgis/charts-components 5.0.0-next.124 → 5.0.0-next.126

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

@@ -4,7 +4,7 @@ import { cloneDeep as T, isEmpty as F, toNumber as $ } from "lodash-es";
 import "d3-array";
 import { W as f } from "../../chunks/series-types.js";
 import { f as v } from "../../chunks/rest-js-object-literals.js";
-import { bt as L, cX as y, aC as z, ap as A } from "../../chunks/index.js";
+import { bt as L, cX as b, aC as z, ap 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";
@@ -22,17 +22,17 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/toolkit/dom";
-import { r as x } from "../../chunks/popover-ui-utils.js";
+import { r as C } from "../../chunks/popover-ui-utils.js";
 import { S as a, c as d } from "../../chunks/interfaces.js";
-import { d as w, s as m } from "../../chunks/store.js";
-import { b as S, m as g, f as k, s as b, D as M, c as u } from "../../chunks/chart-ui-utils2.js";
-import { u as C } from "../../chunks/useT9n.js";
+import { d as k, s as m } from "../../chunks/store.js";
+import { b as S, m as g, f as M, s as y, D as w, c 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 { 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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.124 */
+v5.0.0-next.126 */
 const l = {
   label: "label",
   r2: "r2",
@@ -43,10 +43,10 @@ const l = {
   sectionContainer: "section-container",
   multiInputSection: "multi-input-section",
   dimText: "dim-text"
-}, N = V`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-html-container{z-index:101!important}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.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}`;
+}, N = V`.hide{display:none}.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 _ {
   constructor() {
-    super(...arguments), this._messages = C(), this.commonStrings = C({ 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 = 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) => {
       const t = e.detail;
       this.model.linearTrendSymbol = T(t);
     }, this.setFixedSymbolRGBAColor = (e) => {
@@ -58,7 +58,7 @@ class K extends _ {
     }, this.setXYField = (e) => {
       try {
         const t = e.detail;
-        w(m), this.contentKind === a.xAxisField ? this.model.xAxisField = t : this.model.yAxisField = t, this.removeScatterplotPopover();
+        k(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;
       }
@@ -219,7 +219,7 @@ class K extends _ {
     e.stopImmediatePropagation(), this.contentKind = a.sizeVariable, this.selectedElement = this.model.sizePolicy?.field ?? "";
   }
   setupPopover() {
-    this.scatterplotPopover = x(this.scatterplotPopover);
+    this.scatterplotPopover = C(this.scatterplotPopover);
     const e = [...this.layerFieldsInfo];
     let t, s, o, n = "trailing";
     switch (this.contentKind) {
@@ -248,39 +248,39 @@ class K extends _ {
     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);
   }
   removeScatterplotPopover() {
-    this.scatterplotPopover !== null && (this.scatterplotPopover = x(this.scatterplotPopover)), this.selectedElement = void 0;
+    this.scatterplotPopover !== null && (this.scatterplotPopover = C(this.scatterplotPopover)), this.selectedElement = void 0;
   }
   getCurrentSymbolSizeType() {
     const e = this.model.sizePolicy;
     return e === void 0 || e.field === "" ? d.Fixed : d.Proportional;
   }
   renderXVariable() {
-    return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.xAxisField ?? "")} @click=${this.onXVariableSelectChange} ${c(this.xAxisElement)}></arcgis-charts-config-field-select>`;
+    return r`<arcgis-charts-config-field-select .label=${b(this.layerFieldsInfo, this.model.xAxisField ?? "")} @click=${this.onXVariableSelectChange} ${c(this.xAxisElement)}></arcgis-charts-config-field-select>`;
   }
   renderYVariable() {
-    return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.yAxisField ?? "")} @click=${this.onYVariableSelectChange} ${c(this.yAxisElement)}></arcgis-charts-config-field-select>`;
+    return r`<arcgis-charts-config-field-select .label=${b(this.layerFieldsInfo, this.model.yAxisField ?? "")} @click=${this.onYVariableSelectChange} ${c(this.yAxisElement)}></arcgis-charts-config-field-select>`;
   }
   renderTooltipField() {
-    return r`<arcgis-charts-config-field-select .disabled=${this.model.dataStore.aggregated} .label=${y(this.layerFieldsInfo, this.model.additionalTooltipField?.[0] ?? "")} @click=${this.onAdditionalTooltipFieldSelectChange} ${c(this.tooltipFieldElement)}></arcgis-charts-config-field-select>`;
+    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 : k(this.r2, M)}`}</div></div>`;
+    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>`;
   }
   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=${b(this.model.fixedMarkerSymbol?.size)} @calciteInputInput=${this.symbolSizeChange}></calcite-input></calcite-label>`;
+    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>`;
   }
   renderSizeVariable() {
-    return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.sizePolicy?.field ?? "")} .invalid=${this.layerFieldsInfo.find((e) => e.name === this.model.sizePolicy?.field) === void 0} @click=${this.onSizeVariableSelectChange} ${c(this.sizeVariableElement)}></arcgis-charts-config-field-select>`;
+    return r`<arcgis-charts-config-field-select .label=${b(this.layerFieldsInfo, this.model.sizePolicy?.field ?? "")} .invalid=${this.layerFieldsInfo.find((e) => e.name === this.model.sizePolicy?.field) === void 0} @click=${this.onSizeVariableSelectChange} ${c(this.sizeVariableElement)}></arcgis-charts-config-field-select>`;
   }
   renderMinSizeInput() {
-    return r`<calcite-input type=number name=proportional-symbol-min-size class=${i(l.numberInput)} min=1 .max=${this.model.sizePolicy?.maxSize ?? 100} step=1 .value=${b(this.model.sizePolicy?.minSize)} @calciteInputInput=${this.symbolSizeChange} ${c(this.minSizeInputElement)}></calcite-input>`;
+    return r`<calcite-input type=number name=proportional-symbol-min-size class=${i(l.numberInput)} min=1 .max=${this.model.sizePolicy?.maxSize ?? 100} step=1 .value=${y(this.model.sizePolicy?.minSize)} @calciteInputInput=${this.symbolSizeChange} ${c(this.minSizeInputElement)}></calcite-input>`;
   }
   renderMaxSizeInput() {
-    return r`<calcite-input type=number name=proportional-symbol-max-size class=${i(l.numberInput)} .min=${this.model.sizePolicy?.minSize ?? 1} max=100 step=1 .value=${b(this.model.sizePolicy?.maxSize)} @calciteInputInput=${this.symbolSizeChange} ${c(this.maxSizeInputElement)}></calcite-input>`;
+    return r`<calcite-input type=number name=proportional-symbol-max-size class=${i(l.numberInput)} .min=${this.model.sizePolicy?.minSize ?? 1} max=100 step=1 .value=${y(this.model.sizePolicy?.maxSize)} @calciteInputInput=${this.symbolSizeChange} ${c(this.maxSizeInputElement)}></calcite-input>`;
   }
   renderProportionalSymbol() {
-    return r`<div class=${i(l.sectionContainer)}><calcite-label class=${i(l.label)}>${this._messages.numberRequired}${this.renderSizeVariable()}</calcite-label><div class=${i(l.multiInputSection)}><calcite-label class=${i(l.label)}>${this._messages.minSize}${this.renderMinSizeInput()}</calcite-label><calcite-label class=${i(l.label)}>${this._messages.maxSize}${this.renderMaxSizeInput()}</calcite-label></div><calcite-label><calcite-slider min=1 max=100 .minValue=${$(b(this.model.sizePolicy?.minSize))} .maxValue=${$(b(this.model.sizePolicy?.maxSize))} step=1 @calciteSliderInput=${this.symbolSizeRangeSliderInput}></calcite-slider></calcite-label></div>`;
+    return r`<div class=${i(l.sectionContainer)}><calcite-label class=${i(l.label)}>${this._messages.numberRequired}${this.renderSizeVariable()}</calcite-label><div class=${i(l.multiInputSection)}><calcite-label class=${i(l.label)}>${this._messages.minSize}${this.renderMinSizeInput()}</calcite-label><calcite-label class=${i(l.label)}>${this._messages.maxSize}${this.renderMaxSizeInput()}</calcite-label></div><calcite-label><calcite-slider min=1 max=100 .minValue=${$(y(this.model.sizePolicy?.minSize))} .maxValue=${$(y(this.model.sizePolicy?.maxSize))} step=1 @calciteSliderInput=${this.symbolSizeRangeSliderInput}></calcite-slider></calcite-label></div>`;
   }
   renderSymbolSizeType() {
     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>`;

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

@@ -1,12 +1,12 @@
-import { c as C } from "../../chunks/runtime.js";
-import { css as u, html as s } from "lit";
+import { c as f } from "../../chunks/runtime.js";
+import { css as v, html as o } from "lit";
 import { keyed as c } from "lit/directives/keyed.js";
 import "../../chunks/series-types.js";
 import { f as p } from "../../chunks/rest-js-object-literals.js";
 import "@arcgis/toolkit/intl";
 import "lodash-es";
 import "d3-array";
-import { bK as v, cX as y } from "../../chunks/index.js";
+import { bK as y, cX as u } from "../../chunks/index.js";
 import "@arcgis/core/Graphic.js";
 import "@arcgis/core/renderers/support/jsonUtils.js";
 import "@arcgis/core/symbols/support/symbolUtils.js";
@@ -24,15 +24,15 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/toolkit/dom";
-import { e as b } from "../../chunks/popover-ui-utils.js";
+import { e as S } from "../../chunks/popover-ui-utils.js";
 import { S as n } from "../../chunks/interfaces.js";
-import { U as h, a as S, i as d } from "../../chunks/chart-ui-utils2.js";
-import { u as $ } from "../../chunks/useT9n.js";
-import { createRef as m, ref as g } from "lit/directives/ref.js";
-import { LitElement as P, createEvent as l, safeClassMap as a } from "@arcgis/lumina";
+import { U as h, a as $, i as m } from "../../chunks/chart-ui-utils2.js";
+import { u as P } from "../../chunks/useT9n.js";
+import { createRef as d, ref as C } from "lit/directives/ref.js";
+import { LitElement as b, createEvent as l, safeClassMap as a } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.124 */
+v5.0.0-next.126 */
 const r = {
   jsAppFlyout: "js-app-flyout",
   scatterplotPopover: "scatter-plot-popover",
@@ -40,10 +40,10 @@ const r = {
   header: "header",
   pickListItemLabel: "pick-list-item-label",
   pickListPanel: "pick-list-panel"
-}, F = u`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-html-container{z-index:101!important}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.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 k extends P {
+}, F = v`.hide{display:none}.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 b {
   constructor() {
-    super(...arguments), this.picklist = m(), this._messages = $(), this.popoverElement = m(), this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
+    super(...arguments), this.picklist = d(), this._messages = P(), this.popoverElement = d(), 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 };
@@ -57,7 +57,7 @@ class k extends P {
   updated() {
     setTimeout(() => {
       this.picklist.value?.setFocus();
-    }, h.PopoverTimer), b(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
+    }, h.PopoverTimer), S(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
       this.popoverElement.value?.reposition();
     }, h.PopoverTimer);
   }
@@ -79,22 +79,22 @@ class k extends P {
   }
   render() {
     const e = this.selectedContent, t = this.selectedContent;
-    return s`<div class=${a({ [r.jsAppFlyout]: !0 })}><calcite-popover class=${a(r.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${S(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${g(this.popoverElement)}>${Array.isArray(e) ? s`<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 ? s`<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=${$(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${C(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>`;
   }
   renderVariablePickList() {
     const e = this.layerFieldsInfo?.length ?? 0, t = [];
-    (this.contentKind === n.sizeVariable || this.contentKind === n.additionalTooltipFields) && t.push(c(" ", s`<calcite-list-item label=" " value=" " .selected=${d("", this.selectedContent)}></calcite-list-item>`));
+    (this.contentKind === n.sizeVariable || this.contentKind === n.additionalTooltipFields) && t.push(c(" ", o`<calcite-list-item label=" " value=" " .selected=${m("", this.selectedContent)}></calcite-list-item>`));
     for (let i = 0; i < e; i += 1) {
-      const o = this.layerFieldsInfo?.[i] ?? void 0;
-      if (o !== void 0 && (this.contentKind === n.additionalTooltipFields || v(o))) {
-        const f = y(this.layerFieldsInfo, o.name);
-        t.push(c(o.name, s`<calcite-list-item .label=${f} .value=${o.name} .selected=${d(o.name, this.selectedContent)}></calcite-list-item>`));
+      const s = this.layerFieldsInfo?.[i] ?? void 0;
+      if (s !== void 0 && (this.contentKind === n.additionalTooltipFields || y(s))) {
+        const g = u(this.layerFieldsInfo, s.name);
+        t.push(c(s.name, o`<calcite-list-item .label=${g} .value=${s.name} .selected=${m(s.name, this.selectedContent)}></calcite-list-item>`));
       }
     }
-    return s`<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} ${g(this.picklist)}>${t}</calcite-list></calcite-panel>`;
+    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} ${C(this.picklist)}>${t}</calcite-list></calcite-panel>`;
   }
 }
-C("arcgis-charts-config-scatter-plot-popover", k);
+f("arcgis-charts-config-scatter-plot-popover", L);
 export {
-  k as ArcgisChartsConfigScatterplotPopover
+  L as ArcgisChartsConfigScatterplotPopover
 };

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

@@ -1,5 +1,5 @@
-import { c as l } from "../../chunks/runtime.js";
-import { css as c, html as a } from "lit";
+import { c } from "../../chunks/runtime.js";
+import { css as l, html as a } from "lit";
 import "@arcgis/toolkit/intl";
 import "lodash-es";
 import "d3-array";
@@ -23,22 +23,22 @@ import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/toolkit/dom";
 import { e as r } from "../../chunks/popover-ui-utils.js";
-import { U as n } from "../../chunks/chart-ui-utils2.js";
-import { u as p } from "../../chunks/useT9n.js";
+import { U as p } from "../../chunks/chart-ui-utils2.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 o, safeClassMap as s } from "@arcgis/lumina";
+import { LitElement as d, createEvent as s, safeClassMap as o } from "@arcgis/lumina";
 import { M as e } from "../../chunks/common.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.124 */
+v5.0.0-next.126 */
 const i = {
   selectChartComponent: "select-chart-component",
   jsAppFlyout: "js-app-flyout",
   panel: "panel"
-}, g = c`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-html-container{z-index:101!important}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.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 f extends d {
+}, g = l`.hide{display:none}.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 {
   constructor() {
-    super(...arguments), this._messages = p(), this.selectChartTypePopover = h(), this.arcgisChartsConfigPopoverClose = o(), this.arcgisChartsConfigSelectChartTypeChange = o();
+    super(...arguments), this._messages = n(), this.selectChartTypePopover = h(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSelectChartTypeChange = s();
   }
   static {
     this.properties = { messageOverrides: 0, headerTitle: 1, layerId: 1, open: 5, referenceElement: 0, popoverPlacement: 1, selectedModelType: 1 };
@@ -52,7 +52,7 @@ class f extends d {
   updated() {
     r(this.selectChartTypePopover.value, this.open), this.hasUpdated || setTimeout(() => {
       this.selectChartTypePopover.value?.reposition();
-    }, n.PopoverTimer);
+    }, p.PopoverTimer);
   }
   buildChartTypesList() {
     return a`<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>`;
@@ -71,13 +71,13 @@ class f extends d {
     }, 250);
   }
   render() {
-    return a`<div class=${s({
+    return a`<div class=${o({
       [i.selectChartComponent]: !0,
       [i.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=${s(i.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 ${m(this.selectChartTypePopover)}><calcite-panel class=${o(i.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
   }
 }
-l("arcgis-charts-config-select-chart-type-popover", f);
+c("arcgis-charts-config-select-chart-type-popover", C);
 export {
-  f as ArcgisChartsConfigSelectChartTypePopover
+  C as ArcgisChartsConfigSelectChartTypePopover
 };

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

@@ -30,7 +30,7 @@ import { LitElement as v, createEvent as s, safeClassMap as c, renderElement as
 import { repeat as w } from "lit/directives/repeat.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.124 */
+v5.0.0-next.126 */
 const n = {
   addChartContainer: "add-chart-container",
   viewChartComponent: "view-chart-component",

package/dist/docs/api.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2026-01-14T04:47:06",
+  "timestamp": "2026-01-15T04:44:42",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "5.0.0-next.124",
+    "version": "5.0.0-next.126",
     "typescriptVersion": "5.9.3"
   },
   "schemaVersion": "2.1.0",
@@ -1390,29 +1390,6 @@
                       }
                     ]
                   }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "NotifyOptions | undefined",
-                    "references": [
-                      {
-                        "name": "NotifyOptions",
-                        "module": "dist/chart-rendering/common/interfaces.d.ts",
-                        "start": 0,
-                        "end": 13
-                      }
-                    ],
-                    "values": [
-                      {
-                        "type": "NotifyOptions"
-                      },
-                      {
-                        "type": "undefined"
-                      }
-                    ]
-                  }
                 }
               ],
               "return": {
@@ -1429,7 +1406,7 @@
                   ]
                 }
               },
-              "signature": "(message?: string, heading?: string, options?: NotifyOptions): Promise<void>"
+              "signature": "(message?: string, heading?: string): Promise<void>"
             },
             {
               "kind": "method",
@@ -2306,6 +2283,30 @@
                 "text": "void"
               }
             },
+            {
+              "name": "arcgisInvalidConfigWarningRaise",
+              "description": "Event triggered when an invalid configuration is detected.",
+              "type": {
+                "text": "DataWarningObject",
+                "references": [
+                  {
+                    "name": "DataWarningObject",
+                    "module": "dist/utils/chart-config/validator/interfaces.d.ts",
+                    "start": 0,
+                    "end": 17
+                  }
+                ]
+              },
+              "docsTags": [
+                {
+                  "name": "type",
+                  "text": "{EventEmitter<DataWarningObject>}"
+                },
+                {
+                  "name": "event"
+                }
+              ]
+            },
             {
               "name": "arcgisLegendItemVisibilityChange",
               "description": "Event triggered once a legend item visibility has been changed.",
@@ -4000,6 +4001,157 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/arcgis-charts-config-info-modal",
+      "sourcePath": "src/components/charts-config-info-modal/charts-config-info-modal.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "name": "ArcgisChartsConfigInfoModal",
+          "tagName": "arcgis-charts-config-info-modal",
+          "pascalCaseName": "ArcgisChartsConfigInfoModal",
+          "demos": [
+            {
+              "description": "Docs",
+              "url": "https://developers.arcgis.com/javascript/latest/references/charts-components/arcgis-charts-config-info-modal/"
+            }
+          ],
+          "superclass": {
+            "name": "PublicLitElement",
+            "module": "PublicLitElement",
+            "package": "@arcgis/lumina"
+          },
+          "members": [
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string",
+                "values": [
+                  {
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"\"",
+              "attribute": "heading"
+            },
+            {
+              "kind": "field",
+              "name": "message",
+              "type": {
+                "text": "string",
+                "values": [
+                  {
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"\"",
+              "attribute": "message"
+            },
+            {
+              "kind": "field",
+              "name": "showErrorModalInfo",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "false",
+              "attribute": "show-error-modal-info"
+            },
+            {
+              "kind": "method",
+              "name": "componentOnReady",
+              "description": "Create a promise that resolves once component is fully loaded.",
+              "docsTags": [
+                {
+                  "name": "example",
+                  "text": "```js\nconst arcgisChartsConfigInfoModal = document.querySelector(\"arcgis-charts-config-info-modal\");\ndocument.body.append(arcgisChartsConfigInfoModal);\nawait arcgisChartsConfigInfoModal.componentOnReady();\nconsole.log(\"arcgis-charts-config-info-modal is ready to go!\");\n```"
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "Promise<this>",
+                  "references": [
+                    {
+                      "module": "lib/lib.es5.d.ts",
+                      "name": "Promise",
+                      "package": "typescript",
+                      "start": 0,
+                      "end": 7
+                    }
+                  ]
+                }
+              },
+              "inheritedFrom": {
+                "name": "PublicLitElement",
+                "module": "PublicLitElement",
+                "package": "@arcgis/lumina"
+              },
+              "signature": "(): Promise<this>"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "heading",
+              "type": {
+                "text": "string",
+                "values": [
+                  {
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"\"",
+              "fieldName": "heading"
+            },
+            {
+              "name": "message",
+              "type": {
+                "text": "string",
+                "values": [
+                  {
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"\"",
+              "fieldName": "message"
+            },
+            {
+              "name": "show-error-modal-info",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "false",
+              "fieldName": "showErrorModalInfo"
+            }
+          ],
+          "importPath": "components/arcgis-charts-config-info-modal"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "arcgis-charts-config-info-modal",
+          "declaration": {
+            "name": "ArcgisChartsConfigInfoModal"
+          }
+        }
+      ]
     }
   ]
 }