@arcgis/charts-components 4.33.0-next.101 → 4.33.0-next.102

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

@@ -1,10 +1,19 @@
 import { c as E } from "../../chunks/runtime.js";
-import { getDefaultNoR2Label as I, removePopover as P, createPopover as T, PopoverType as F, getFieldAlias as b, getDefaultColor as z, reducedOpacity as w } from "@arcgis/charts-shared-utils";
-import { WebChartTypes as y, RESTSymbolType as $ } from "@arcgis/charts-spec";
-import { cloneDeep as L, isEmpty as k, toNumber as C } from "lodash-es";
-import { S as l, b as h } from "../../chunks/interfaces.js";
+import { WebChartTypes as b, RESTSymbolType as P } from "@arcgis/charts-spec";
+import { cloneDeep as I, isEmpty as T, toNumber as z } from "lodash-es";
+import "d3-array";
+import { d as F, c as y, e as $, r as w } from "../../chunks/interfaces.js";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/StatisticDefinition.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+import "@arcgis/core/rest/support/Query.js";
+import "@arcgis/core/time/TimeExtent.js";
+import "@arcgis/core/core/promiseUtils.js";
+import "@arcgis/core/request.js";
+import { r as C, c as L, P as k } from "../../chunks/popover-ui-utils.js";
+import { S as l, b as h } from "../../chunks/interfaces2.js";
 import { d as A, s as m } from "../../chunks/store.js";
-import { a as f, m as g, f as M, s as u, D as V, b as p } from "../../chunks/chart-ui-utils.js";
+import { a as f, m as g, f as M, s as u, D as V, b as p } from "../../chunks/chart-ui-utils2.js";
 import { u as _ } from "../../chunks/useT9n.js";
 import { html as r } from "lit";
 import { createRef as d, ref as a } from "lit-html/directives/ref.js";
@@ -12,7 +21,7 @@ import { LitElement as D, createEvent as v, safeClassMap as s, safeStyleMap as x
 import { css as N } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.101 */
+v4.33.0-next.102 */
 const i = {
   hostDiv: "host-div",
   label: "label",
@@ -29,7 +38,7 @@ class K extends D {
   constructor() {
     super(...arguments), this._messages = _(), this.scatterPlotPopover = null, this.selectColorElement = d(), this.selectTrendLineElement = d(), this.xAxisElement = d(), this.yAxisElement = d(), this.sizeVariableElement = d(), this.colorModeElement = d(), this.symbolSizeModeElement = d(), this.minSizeInputElement = d(), this.maxSizeInputElement = d(), this.items = [], this.setTrendLineSymbol = (e) => {
       const t = e.detail;
-      this.model.setLinearTrendSymbol(L(t));
+      this.model.setLinearTrendSymbol(I(t));
     }, this.setFixedSymbolRGBAColor = (e) => {
       const t = e.detail, [o, n, c] = t, S = w * 255;
       this.model.setFixedMarkerSymbol({
@@ -48,7 +57,7 @@ class K extends D {
         const t = e.detail;
         t ? this.model.setSizePolicy({
           ...this.model.getSizePolicy(),
-          type: y.SizePolicy,
+          type: b.SizePolicy,
           field: t
         }) : this.model.setSizePolicy(void 0), m.scatterPlotData[m.selectedChartId] = {
           ...m.scatterPlotData[m.selectedChartId],
@@ -92,7 +101,7 @@ class K extends D {
   //#region Lifecycle
   /** @category Lifecycle */
   async load() {
-    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = await I(), this.selectedSizeType = this.getCurrentSymbolSizeType(), this.selectedSizeType === h.Proportional && (m.scatterPlotData[m.selectedChartId] = {
+    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = await F(), this.selectedSizeType = this.getCurrentSymbolSizeType(), this.selectedSizeType === h.Proportional && (m.scatterPlotData[m.selectedChartId] = {
       ...m.scatterPlotData[m.selectedChartId],
       sizePolicyField: this.model.getSizePolicy()?.field
     });
@@ -123,7 +132,7 @@ class K extends D {
     t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   openPopover() {
-    (typeof this.selectedElement == "string" || !k(this.selectedElement)) && this.setupScatterPlotPopover();
+    (typeof this.selectedElement == "string" || !T(this.selectedElement)) && this.setupScatterPlotPopover();
   }
   /** @category Event handler */
   setShowTrendLine(e) {
@@ -186,11 +195,11 @@ class K extends D {
     const t = m.scatterPlotData[m.selectedChartId]?.sizePolicyField;
     e === h.Proportional && t !== void 0 ? this.model.setSizePolicy({
       ...this.model.getSizePolicy(),
-      type: y.SizePolicy,
+      type: b.SizePolicy,
       field: t
     }) : e === h.Fixed && this.model.setSizePolicy({
       ...this.model.getSizePolicy(),
-      type: y.SizePolicy,
+      type: b.SizePolicy,
       field: ""
     });
   }
@@ -228,7 +237,7 @@ class K extends D {
   }
   /** @category Private */
   setupScatterPlotPopover() {
-    this.scatterPlotPopover = P(this.scatterPlotPopover);
+    this.scatterPlotPopover = C(this.scatterPlotPopover);
     const e = {
       setTrendLineSymbol: this.setTrendLineSymbol,
       setFixedSymbolRGBAColor: this.setFixedSymbolRGBAColor,
@@ -237,7 +246,7 @@ class K extends D {
       openChange: this.openChange,
       popoverClose: this.closeScatterPlotPopover
     };
-    switch (this.scatterPlotPopover = T(F.ScatterPlotDataPopover, e), this.scatterPlotPopover.layerFieldsInfo = [...this.layerFieldsInfo], this.scatterPlotPopover.contentKind = this.contentKind, this.contentKind) {
+    switch (this.scatterPlotPopover = L(k.ScatterPlotDataPopover, e), this.scatterPlotPopover.layerFieldsInfo = [...this.layerFieldsInfo], this.scatterPlotPopover.contentKind = this.contentKind, this.contentKind) {
       case l.xAxisField:
         this.scatterPlotPopover.referenceElement = this.xAxisElement.value, this.scatterPlotPopover.placement = "trailing", this.scatterPlotPopover.selectedContent = this.model.getXAxisField(), this.scatterPlotPopover.headingTitle = this._messages.selectAField;
         break;
@@ -250,7 +259,7 @@ class K extends D {
       case l.symbol:
       case l.trendLine: {
         const t = this.selectedElement;
-        this.scatterPlotPopover.selectedContent = this.selectedElement, this.scatterPlotPopover.placement = "leading", Array.isArray(this.selectedElement) ? this.scatterPlotPopover.referenceElement = this.selectColorElement.value : t?.type === $.SLS && (this.scatterPlotPopover.referenceElement = this.selectTrendLineElement.value);
+        this.scatterPlotPopover.selectedContent = this.selectedElement, this.scatterPlotPopover.placement = "leading", Array.isArray(this.selectedElement) ? this.scatterPlotPopover.referenceElement = this.selectColorElement.value : t?.type === P.SLS && (this.scatterPlotPopover.referenceElement = this.selectTrendLineElement.value);
         break;
       }
       default:
@@ -261,7 +270,7 @@ class K extends D {
   }
   /** @category Private */
   removeScatterPlotPopover() {
-    this.scatterPlotPopover !== null && (this.scatterPlotPopover = P(this.scatterPlotPopover)), this.selectedElement = {};
+    this.scatterPlotPopover !== null && (this.scatterPlotPopover = C(this.scatterPlotPopover)), this.selectedElement = {};
   }
   /** @category Private */
   addScatterPlotPopover() {
@@ -276,16 +285,16 @@ class K extends D {
   //#region Rendering
   /** @category Render UX */
   renderXVariable() {
-    return r`<arcgis-charts-config-field-select .label=${b(this.layerFieldsInfo, this.model.getXAxisField() ?? "")} @click=${this.onXVariableSelectChange} ${a(this.xAxisElement)}></arcgis-charts-config-field-select>`;
+    return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.getXAxisField() ?? "")} @click=${this.onXVariableSelectChange} ${a(this.xAxisElement)}></arcgis-charts-config-field-select>`;
   }
   /** @category Render UX */
   renderYVariable() {
-    return r`<arcgis-charts-config-field-select .label=${b(this.layerFieldsInfo, this.model.getYAxisField() ?? "")} @click=${this.onYVariableSelectChange} ${a(this.yAxisElement)}></arcgis-charts-config-field-select>`;
+    return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.getYAxisField() ?? "")} @click=${this.onYVariableSelectChange} ${a(this.yAxisElement)}></arcgis-charts-config-field-select>`;
   }
   /** @category Render UX */
   renderStatistics() {
-    const [e, t, o, n] = [...this.model.getLinearTrendSymbol()?.color ?? z(0)];
-    return r`<div class=${s(i.sectionContainer)}><calcite-label class=${s(i.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${s(i.switchElement)} .checked=${this.model.getShowLinearTrend()} @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.getShowLinearTrend()} .selected=${this.selectedElement?.type === $.SLS} @click=${this.changeElementStyle} ${a(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${x({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${s(i.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${s(i.r2)} .hidden=${!this.model.getShowLinearTrend()}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : M(this.r2, V)}`}</div></div>`;
+    const [e, t, o, n] = [...this.model.getLinearTrendSymbol()?.color ?? $(0)];
+    return r`<div class=${s(i.sectionContainer)}><calcite-label class=${s(i.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${s(i.switchElement)} .checked=${this.model.getShowLinearTrend()} @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.getShowLinearTrend()} .selected=${this.selectedElement?.type === P.SLS} @click=${this.changeElementStyle} ${a(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${x({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${s(i.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${s(i.r2)} .hidden=${!this.model.getShowLinearTrend()}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : M(this.r2, V)}`}</div></div>`;
   }
   /** @category Render UX */
   renderFixedSymbol() {
@@ -293,7 +302,7 @@ class K extends D {
   }
   /** @category Render UX */
   renderSizeVariable() {
-    return r`<arcgis-charts-config-field-select .label=${b(this.layerFieldsInfo, this.model.getSizePolicy()?.field ?? "")} .invalid=${this.layerFieldsInfo.find((e) => e.name === this.model.getSizePolicy()?.field) === void 0} @click=${this.onSizeVariableSelectChange} ${a(this.sizeVariableElement)}></arcgis-charts-config-field-select>`;
+    return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.getSizePolicy()?.field ?? "")} .invalid=${this.layerFieldsInfo.find((e) => e.name === this.model.getSizePolicy()?.field) === void 0} @click=${this.onSizeVariableSelectChange} ${a(this.sizeVariableElement)}></arcgis-charts-config-field-select>`;
   }
   /** @category Render UX */
   renderMinSizeInput() {
@@ -305,7 +314,7 @@ class K extends D {
   }
   /** @category Render UX */
   renderProportionalSymbol() {
-    return r`<div class=${s(i.sectionContainer)}><calcite-label class=${s(i.label)}>${this._messages.numberRequired}${this.renderSizeVariable()}</calcite-label><div class=${s(i.multiInputSection)}><calcite-label class=${s(i.label)}>${this._messages.minSize}${this.renderMinSizeInput()}</calcite-label><calcite-label class=${s(i.label)}>${this._messages.maxSize}${this.renderMaxSizeInput()}</calcite-label></div><calcite-label><calcite-slider min=1 max=100 .minValue=${C(u(this.model.getSizePolicy()?.minSize))} .maxValue=${C(u(this.model.getSizePolicy()?.maxSize))} step=1 @calciteSliderInput=${this.symbolSizeRangeSliderInput}></calcite-slider></calcite-label></div>`;
+    return r`<div class=${s(i.sectionContainer)}><calcite-label class=${s(i.label)}>${this._messages.numberRequired}${this.renderSizeVariable()}</calcite-label><div class=${s(i.multiInputSection)}><calcite-label class=${s(i.label)}>${this._messages.minSize}${this.renderMinSizeInput()}</calcite-label><calcite-label class=${s(i.label)}>${this._messages.maxSize}${this.renderMaxSizeInput()}</calcite-label></div><calcite-label><calcite-slider min=1 max=100 .minValue=${z(u(this.model.getSizePolicy()?.minSize))} .maxValue=${z(u(this.model.getSizePolicy()?.maxSize))} step=1 @calciteSliderInput=${this.symbolSizeRangeSliderInput}></calcite-slider></calcite-label></div>`;
   }
   /** @category Render UX */
   renderSymbolSizeType() {
@@ -313,7 +322,7 @@ class K extends D {
   }
   /** @category Render UX */
   renderSymbol() {
-    const [e, t, o, n] = [...this.model.getFixedMarkerSymbol()?.color ?? z(0)];
+    const [e, t, o, n] = [...this.model.getFixedMarkerSymbol()?.color ?? $(0)];
     return r`<div class=${s(i.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === h.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${s(i.label)}>${this._messages.color}${this.isTableLayer !== !0 ? r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${a(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.getColorMatch()} ${a(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.getColorMatch()} ${a(this.segmentedControlRef)}>${this._messages.singleColor}</calcite-segmented-control-item></calcite-segmented-control>` : null}</calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.color} value=selectColor .hidden=${this.model.getColorMatch() && this.isTableLayer !== !0} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${a(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${x({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${s(i.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
   }
   /** @category Lifecycle */

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

@@ -1,7 +1,7 @@
 /// <reference types="../../index.d.ts" />
 import { Color, IField, ISimpleLineSymbol } from '@arcgis/charts-spec';
 import { ScatterPlotDataPopoverKinds } from '../../interfaces';
-import { PopoverOpenChangePayload } from '../../utils/event-payloads';
+import { PopoverOpenChangePayload } from '../../utils/components/event-payloads';
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 

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

@@ -1,9 +1,19 @@
 import { c as C } from "../../chunks/runtime.js";
 import { keyed as n } from "lit-html/directives/keyed.js";
 import { RESTSymbolType as c } from "@arcgis/charts-spec";
-import { editPopover as v, isNumericField as u, getFieldAlias as y } from "@arcgis/charts-shared-utils";
-import { S as p } from "../../chunks/interfaces.js";
-import { U as h, g as P, i as d } from "../../chunks/chart-ui-utils.js";
+import "lodash-es";
+import "d3-array";
+import { i as v, c as u } from "../../chunks/interfaces.js";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/StatisticDefinition.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+import "@arcgis/core/rest/support/Query.js";
+import "@arcgis/core/time/TimeExtent.js";
+import "@arcgis/core/core/promiseUtils.js";
+import "@arcgis/core/request.js";
+import { e as y } from "../../chunks/popover-ui-utils.js";
+import { S as p } from "../../chunks/interfaces2.js";
+import { U as h, g as P, i as d } from "../../chunks/chart-ui-utils2.js";
 import { u as b } from "../../chunks/useT9n.js";
 import { html as a } from "lit";
 import { createRef as m, ref as g } from "lit-html/directives/ref.js";
@@ -11,7 +21,7 @@ import { LitElement as $, createEvent as l, safeClassMap as r } from "@arcgis/lu
 import { css as S } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.101 */
+v4.33.0-next.102 */
 const s = {
   hostDiv: "host-div",
   jsAppFlyout: "js-app-flyout",
@@ -53,7 +63,7 @@ class F extends $ {
   async updated() {
     setTimeout(async () => {
       await this.picklist.value?.setFocus();
-    }, h.PopoverTimer), v(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
+    }, h.PopoverTimer), y(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
       this.popoverElement.value?.reposition();
     }, h.PopoverTimer);
   }
@@ -111,8 +121,8 @@ class F extends $ {
     this.contentKind === p.sizeVariable && t.push(n(" ", a`<calcite-list-item label=" " value=" " .selected=${d("", this.selectedContent)}></calcite-list-item>`));
     for (let i = 0; i < e; i += 1) {
       const o = this.layerFieldsInfo?.[i] ?? void 0;
-      if (o !== void 0 && u(o)) {
-        const f = y(this.layerFieldsInfo, o.name);
+      if (o !== void 0 && v(o)) {
+        const f = u(this.layerFieldsInfo, o.name);
         t.push(n(o.name, a`<calcite-list-item .label=${f} .value=${o.name} .selected=${d(o.name, this.selectedContent)}></calcite-list-item>`));
       }
     }

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

@@ -1,15 +1,25 @@
-import { c } from "../../chunks/runtime.js";
+import { c as r } from "../../chunks/runtime.js";
 import { html as a } from "lit-html";
-import { editPopover as r } from "@arcgis/charts-shared-utils";
 import { WebChartTypes as e } from "@arcgis/charts-spec";
-import { U as l } from "../../chunks/chart-ui-utils.js";
+import "lodash-es";
+import "d3-array";
+import "../../chunks/interfaces.js";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/StatisticDefinition.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+import "@arcgis/core/rest/support/Query.js";
+import "@arcgis/core/time/TimeExtent.js";
+import "@arcgis/core/core/promiseUtils.js";
+import "@arcgis/core/request.js";
+import { e as c } from "../../chunks/popover-ui-utils.js";
+import { U as l } from "../../chunks/chart-ui-utils2.js";
 import { u as n } from "../../chunks/useT9n.js";
 import { createRef as p, ref as h } from "lit-html/directives/ref.js";
 import { LitElement as m, createEvent as s, safeClassMap as o } from "@arcgis/lumina";
 import { css as d } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.101 */
+v4.33.0-next.102 */
 const t = {
   hostDiv: "host-div",
   selectChartComponent: "select-chart-component",
@@ -42,7 +52,7 @@ class f extends m {
   /** @category Lifecycle */
   /** @category Lifecycle */
   updated() {
-    r(this.selectChartTypePopover.value, this.open), this.hasUpdated || setTimeout(() => {
+    c(this.selectChartTypePopover.value, this.open), this.hasUpdated || setTimeout(() => {
       this.selectChartTypePopover.value?.reposition();
     }, l.PopoverTimer);
   }
@@ -76,7 +86,7 @@ class f extends m {
     })}><calcite-popover .referenceElement=${this.popoverReferenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} label ${h(this.selectChartTypePopover)}><calcite-panel class=${o(t.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", f);
+r("arcgis-charts-config-select-chart-type-popover", f);
 export {
   f as ArcGISChartsConfigSelectChartTypePopover
 };

package/dist/components/arcgis-charts-config-view-charts/customElement.d.ts

@@ -4,7 +4,7 @@ import { SupportedLayer } from '@arcgis/charts-spec';
 import { default as Sublayer } from '@arcgis/core/layers/support/Sublayer';
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { ModelListChangePayload } from '../../utils/event-payloads';
+import { ModelListChangePayload } from '../../utils/components/event-payloads';
 
 /** @private */
 export declare class ArcGISChartsConfigViewCharts extends LitElement {

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

@@ -1,5 +1,17 @@
 import { c as h } from "../../chunks/runtime.js";
-import { getChartIcon as d, formatMessage as m, createPopover as p, PopoverType as C, removePopover as g } from "@arcgis/charts-shared-utils";
+import "@arcgis/charts-spec";
+import "lodash-es";
+import "d3-array";
+import { f as d } from "../../chunks/interfaces.js";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/StatisticDefinition.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+import "@arcgis/core/rest/support/Query.js";
+import "@arcgis/core/time/TimeExtent.js";
+import "@arcgis/core/core/promiseUtils.js";
+import "@arcgis/core/request.js";
+import { g as m } from "../../chunks/chart-ui-utils.js";
+import { c as p, r as C, P as g } from "../../chunks/popover-ui-utils.js";
 import { u as f } from "../../chunks/useT9n.js";
 import { html as o } from "lit";
 import { LitElement as v, createEvent as r, safeClassMap as n } from "@arcgis/lumina";
@@ -7,7 +19,7 @@ import { repeat as u } from "lit-html/directives/repeat.js";
 import { css as w } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.101 */
+v4.33.0-next.102 */
 const c = {
   addChartContainer: "add-chart-container",
   viewChartComponent: "view-chart-component",
@@ -73,8 +85,8 @@ class R extends v {
   /** @category Render UX */
   buildChartList() {
     const e = this.modelList ? u(this.modelList, (t) => t.getChartId(), (t, i) => {
-      const a = t.getChartId(), s = t.getTitleText(), l = d(t.getConfig());
-      return o`<calcite-list-item .label=${s ?? a ?? m(this._messages.chartTitle ?? "", { index: i.toString() })} .selected=${this.selectedChartId === (a?.toString() ?? i.toString())} .value=${a ?? i.toString()} @click=${this.onChartSelect}><calcite-icon slot=content-start .icon=${l}></calcite-icon>${this.disableEditing ? null : o`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end @calciteDropdownClose=${() => this.chartActionClosed(a ?? "")} @calciteDropdownOpen=${() => this.chartActionOpened(a ?? "")} class=${n(c.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 @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 a = t.getChartId(), s = t.getTitleText(), l = m(t.getConfig());
+      return o`<calcite-list-item .label=${s ?? a ?? d(this._messages.chartTitle ?? "", { index: i.toString() })} .selected=${this.selectedChartId === (a?.toString() ?? i.toString())} .value=${a ?? i.toString()} @click=${this.onChartSelect}><calcite-icon slot=content-start .icon=${l}></calcite-icon>${this.disableEditing ? null : o`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end @calciteDropdownClose=${() => this.chartActionClosed(a ?? "")} @calciteDropdownOpen=${() => this.chartActionOpened(a ?? "")} class=${n(c.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 @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=${n(c.header)}>${this.layer.title ?? this.layer.id.toString()}</p>`}<calcite-list label drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${e}${this.disableEditing ? null : o`<div class=${n(c.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;
   }
@@ -122,7 +134,7 @@ class R extends v {
         onChartRename: this.onChartRename,
         popoverClose: this.popoverClose
       };
-      this.chartRenamePopover = p(C.ChartRenamePopover, e), document.body.appendChild(this.chartRenamePopover);
+      this.chartRenamePopover = p(g.ChartRenamePopover, e), document.body.appendChild(this.chartRenamePopover);
     }
     this.chartRenamePopover !== null && (this.chartRenamePopover.open = this.renameOpen, this.chartRenamePopover.name = this.chartTitle, this.chartRenamePopover.popoverReferenceElement = this.renameReferenceElement);
   }
@@ -132,7 +144,7 @@ class R extends v {
    * @category Private
    */
   removeChartRenamePopover() {
-    this.chartRenamePopover !== null && (this.chartRenamePopover.open = !1, this.chartRenamePopover = g(this.chartRenamePopover));
+    this.chartRenamePopover !== null && (this.chartRenamePopover.open = !1, this.chartRenamePopover = C(this.chartRenamePopover));
   }
   //#endregion
   //#region Rendering

package/dist/demo-chart-rendering/common/index.d.ts

@@ -33,6 +33,7 @@ export declare const CategoryNames: {
     readonly TabSelectionOptions: "Selection options";
     readonly TabMessageOptions: "Messaging options";
     readonly TabQueryOptions: "Query options";
+    readonly TabLoaderOptions: "Loader options";
 };
 export type CategoryNames = (typeof CategoryNames)[keyof typeof CategoryNames];
 export declare const ControlLabels: {
@@ -48,6 +49,7 @@ export declare const ControlLabels: {
     readonly CursorRange: "Cursor range";
     readonly CreateMessage: "Create message (placeholder)";
     readonly HideLoaderAnimation: "Hide loader animation";
+    readonly LoaderColors: "Loader colors";
     readonly HideEmptySeries: "Hide empty series";
     readonly ReplaceNoValueCategoryWithZero: "Replace no value category with zero";
     readonly RuntimeDataFilters: "Runtime data filters";

package/dist/demo-chart-rendering/controls/interfaces.d.ts

@@ -1,6 +1,6 @@
-import { SelectionData, SelectionTheme } from '@arcgis/charts-shared-utils';
 import { WebChart, WebChartDataTransformations } from '@arcgis/charts-spec';
 import { ChartOptions } from '../../chart-rendering/common/interfaces';
+import { LoaderColors, SelectionData, SelectionTheme } from '../../utils';
 import { CategoryNames, ControlLabels } from '../common';
 interface NumberOptions {
     min?: number;
@@ -22,6 +22,6 @@ export interface ControlDefinition {
     label: ControlLabels;
     type: "boolean" | "check" | "inline-radio" | "number" | "object" | "range" | "select" | "text";
     options?: BooleanCheckOptions | InlineRadioOptions | NumberOptions | SelectOptions;
-    defaultValue?: ChartOptions | SelectionData | SelectionTheme | WebChart | WebChartDataTransformations | boolean | number | string | null;
+    defaultValue?: ChartOptions | LoaderColors | SelectionData | SelectionTheme | WebChart | WebChartDataTransformations | boolean | number | string | null;
 }
 export {};

package/dist/demo-chart-rendering/selection/index.d.ts

@@ -1,4 +1,4 @@
-import { SelectionData } from '@arcgis/charts-shared-utils';
+import { SelectionData } from '../../utils';
 import { WebChart, WebChartDataTypes } from '@arcgis/charts-spec';
 export declare function generateSelectionToApplyFromOIDs(config?: WebChart): SelectionData | undefined;
 export declare function generateSelectionToApplyFromData(config?: WebChart, currentChartData?: WebChartDataTypes): SelectionData | undefined;

package/dist/docs/api.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-04-28T05:09:49",
+  "timestamp": "2025-04-29T05:07:02",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "4.33.0-next.101",
+    "version": "4.33.0-next.102",
     "typescriptVersion": "5.6.3"
   },
   "schemaVersion": "1.0.0",
@@ -17,6 +17,16 @@
           "name": "ArcGISChart",
           "tagName": "arcgis-chart",
           "description": "The chart component renders various types of charts based on the provided model,\nincluding bar charts, line charts, pie charts, box plots, combo bar and line charts, gauges, scatterplots, and histograms.",
+          "demos": [
+            {
+              "description": "Docs",
+              "url": "https://developers.arcgis.com/javascript/latest/references/charts-components/arcgis-chart/"
+            },
+            {
+              "description": "Demo",
+              "url": "https://developers.arcgis.com/javascript/latest/storybook/charts-components/?path=/story/arcgis-chart--demo&singleStory=true"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "@arcgis/lumina"
@@ -102,8 +112,7 @@
                 "references": [
                   {
                     "name": "ChartElementLimit",
-                    "package": "@arcgis/charts-shared-utils",
-                    "module": "types/defaults/interfaces.d.ts",
+                    "module": "dist/utils/defaults/interfaces.d.ts",
                     "start": 0,
                     "end": 17
                   }
@@ -1087,6 +1096,33 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "loaderColors",
+              "description": "Defines the colors for the loader animation.",
+              "type": {
+                "text": "LoaderColors",
+                "references": [
+                  {
+                    "name": "LoaderColors",
+                    "module": "dist/utils/misc/interfaces.d.ts",
+                    "start": 0,
+                    "end": 12
+                  }
+                ]
+              },
+              "default": "undefined",
+              "docsTags": [
+                {
+                  "name": "type",
+                  "text": "{ LoaderColors  | undefined}"
+                },
+                {
+                  "name": "category",
+                  "text": "Public"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "messageOptions",
@@ -1532,7 +1568,7 @@
               "name": "runtimeDataFilters",
               "description": "Applies runtime data filters to the chart's.",
               "type": {
-                "text": "{\n    distance?: number | undefined;\n    gdbVersion?: string | undefined;\n    geometry?: IEnvelope | IExtent | IPoint | IPolygon | IPolygonWithCurves | IPolyline | undefined;\n    objectIds?: Array<number> | undefined;\n    spatialRelationship?: \"intersects\" | \"contains\" | \"crosses\" | \"disjoint\" | \"envelope-intersects\" | \"index-intersects\" | \"overlaps\" | \"touches\" | \"within\" | \"relation\" | undefined;\n    timeExtent?: [number, number] | undefined;\n    units?: RESTUnits | undefined;\n    where?: string | undefined;\n}"
+                "text": "{\n    distance?: number | undefined;\n    gdbVersion?: string | undefined;\n    geometry?: IExtent | IEnvelope | IPoint | IPolygon | IPolygonWithCurves | IPolyline | undefined;\n    objectIds?: Array<number> | undefined;\n    spatialRelationship?: \"intersects\" | \"contains\" | \"crosses\" | \"disjoint\" | \"envelope-intersects\" | \"index-intersects\" | \"overlaps\" | \"touches\" | \"within\" | \"relation\" | undefined;\n    timeExtent?: [number, number] | undefined;\n    units?: RESTUnits | undefined;\n    where?: string | undefined;\n}"
               },
               "default": "undefined",
               "docsTags": [
@@ -1578,8 +1614,7 @@
                 "references": [
                   {
                     "name": "SelectionData",
-                    "package": "@arcgis/charts-shared-utils",
-                    "module": "types/misc/interfaces.d.ts",
+                    "module": "dist/utils/misc/interfaces.d.ts",
                     "start": 0,
                     "end": 13
                   }
@@ -1610,8 +1645,7 @@
                 "references": [
                   {
                     "name": "SelectionTheme",
-                    "package": "@arcgis/charts-shared-utils",
-                    "module": "types/misc/interfaces.d.ts",
+                    "module": "dist/utils/misc/interfaces.d.ts",
                     "start": 0,
                     "end": 14
                   }
@@ -1826,7 +1860,7 @@
                 "references": [
                   {
                     "name": "MissingSplitBySeriesProps",
-                    "module": "dist/utils/interfaces.d.ts",
+                    "module": "dist/utils/components/interfaces.d.ts",
                     "start": 0,
                     "end": 25
                   }
@@ -2628,8 +2662,7 @@
                 "references": [
                   {
                     "name": "DataWarningObject",
-                    "package": "@arcgis/charts-shared-utils",
-                    "module": "types/chart-config/validator/interfaces.d.ts",
+                    "module": "dist/utils/chart-config/validator/interfaces.d.ts",
                     "start": 0,
                     "end": 17
                   }
@@ -2854,8 +2887,7 @@
                 "references": [
                   {
                     "name": "ValidationStatus",
-                    "package": "@arcgis/charts-shared-utils",
-                    "module": "types/chart-config/validator/interfaces.d.ts",
+                    "module": "dist/utils/chart-config/validator/interfaces.d.ts",
                     "start": 0,
                     "end": 16
                   }
@@ -2901,6 +2933,16 @@
           "name": "ArcGISChartsActionBar",
           "tagName": "arcgis-charts-action-bar",
           "description": "The Charts Action Bar component enhances the Chart component by providing context-specific actions such as rotation, zooming, and filtering. It is designed to work alongside the Chart component and is not intended for standalone use.",
+          "demos": [
+            {
+              "description": "Docs",
+              "url": "https://developers.arcgis.com/javascript/latest/references/charts-components/arcgis-charts-action-bar/"
+            },
+            {
+              "description": "Demo",
+              "url": "https://developers.arcgis.com/javascript/latest/storybook/charts-components/?path=/story/arcgis-charts-action-bar--demo&singleStory=true"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "@arcgis/lumina"
@@ -2954,7 +2996,8 @@
                     "name": "HTMLArcgisChartElement",
                     "module": "index.js",
                     "start": 0,
-                    "end": 22
+                    "end": 22,
+                    "viewUrl": "https://developers.arcgis.com/javascript/latest/references/charts-components/arcgis-chart/"
                   }
                 ]
               },
@@ -3553,7 +3596,7 @@
               "name": "hiddenActions",
               "description": "Holds a list of actions to hide from the action bar.\n\n**Note:** The edit chart action is hidden by default. To show it, remove its value from this array.",
               "type": {
-                "text": "Array<\"legend\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"zoom\" | \"fullExtent\" | \"editChart\">",
+                "text": "Array<\"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"zoom\" | \"editChart\">",
                 "references": [
                   {
                     "name": "Array",