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

package/dist/components/arcgis-charts-config-create-flow/customElement.js

@@ -1,25 +1,36 @@
 import { c as E } from "../../chunks/runtime.js";
 import { repeat as A } from "lit-html/directives/repeat.js";
 import { keyed as L } from "lit-html/directives/keyed.js";
-import { isPartialConfig as I, sortArrayAUsingArrayB as B, isSupportedChart as w, getChartOrSeriesType as F, getChartText as x, ChartComponentEvents as C, getDataMinMaxFromSeries as N, createPopover as V, PopoverType as U, formatMessage as H } from "@arcgis/charts-shared-utils";
-import { WebChartTypes as o, WebChartTemporalBinningUnits as _ } from "@arcgis/charts-spec";
-import { w as R, B as X, v as O, H as Y, P as G, L as W } from "../../chunks/scatter-plot-model.js";
-import { isEqual as k } from "lodash-es";
+import { WebChartTypes as o, WebChartTemporalBinningUnits as F } from "@arcgis/charts-spec";
+import { isEqual as I } from "lodash-es";
+import { B, D as w, E as k, F as N, G as V, f 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 { C } from "../../chunks/index2.js";
+import { a as x } from "../../chunks/chart-ui-utils.js";
+import { c as H, P as _ } from "../../chunks/popover-ui-utils.js";
+import { w as R, B as X, v as G, H as O, P as Y, L as W } from "../../chunks/scatter-plot-model.js";
 import { j as z, k as T, c as b, l as Z, b as $ } from "../../chunks/type-guards.js";
 import { B as j } from "../../chunks/bar-chart-model.js";
-import { C as n } from "../../chunks/interfaces.js";
-import { c as K, d as q } from "../../chunks/chart-ui-utils.js";
+import { C as n } from "../../chunks/interfaces2.js";
+import { c as K, d as q } from "../../chunks/chart-ui-utils2.js";
+import "d3-array";
 import { LitElement as Q, createEvent as f, safeClassMap as p, nothing as S } from "@arcgis/lumina";
 import { html as h } from "lit";
 import { createRef as J, ref as ee } from "lit-html/directives/ref.js";
 import { u as te } from "../../chunks/useT9n.js";
 import { s as M, g as ae } from "../../chunks/store.js";
-import { s as ie } from "../../chunks/interfaces2.js";
+import { s as ie } from "../../chunks/interfaces3.js";
 import { A as se } from "../../chunks/axis-model-wrapper.js";
 import { css as re } 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 */
 async function oe(c) {
   const { config: e, layer: t } = c, a = c.chartType;
   let i;
@@ -33,15 +44,15 @@ async function oe(c) {
       break;
     }
     case o.PieSeries: {
-      i = new G();
+      i = new Y();
       break;
     }
     case o.HistogramSeries: {
-      i = new Y();
+      i = new O();
       break;
     }
     case o.ScatterSeries: {
-      i = new O();
+      i = new G();
       break;
     }
     case o.BoxPlotSeries: {
@@ -80,7 +91,7 @@ function P(c, e) {
 }
 function ne(c, e, t) {
   return c?.filter(
-    (a) => w(t, a.getConfig()) && a.getLayer()?.id === e
+    (a) => k(t, a.getConfig()) && a.getLayer()?.id === e
   ) ?? [];
 }
 function ce(c) {
@@ -99,7 +110,7 @@ function le(c, e) {
 }
 function D(c, e) {
   const t = c, a = t?.charts?.findIndex((i) => i.id === e.getChartId());
-  t?.charts && a !== void 0 && a > -1 ? t.charts[a] = e.getConfig() : t && !I(e.getConfig()) && he(c, e);
+  t?.charts && a !== void 0 && a > -1 ? t.charts[a] = e.getConfig() : t && !B(e.getConfig()) && he(c, e);
 }
 function he(c, e) {
   const t = c;
@@ -114,17 +125,17 @@ function de(c, e) {
 }
 function pe(c, e) {
   const t = c;
-  t && (t.charts ? t.charts = B({
+  t && (t.charts ? t.charts = w({
     arrayA: t.charts,
     arrayB: e.map((a) => a.getConfig()),
     getKey: (a) => a.id ?? a.title?.content.text ?? ""
   }) : t.charts = e.map((a) => a.getConfig()));
 }
-const ge = re`.host-div{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden;height:inherit}.chart-ui-component{overflow-y:auto;overflow-x:hidden}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.text{display:flex;margin-left:1rem;width:calc(100% - 1.5rem);height:2rem;margin-bottom:.5rem;justify-content:space-between}.field-list{max-height:50vh;overflow-y:scroll}.row{padding:.5rem}.bin-count-container{display:flex;width:calc(100% - 1rem);padding:.5rem}.bin-count-slider{margin-left:1rem;width:calc(90% - 1rem)}.bin-count-input{margin-left:1rem;height:2rem;width:2rem}.bin-row{padding:.5rem 0 .5rem .5rem}.tab-bar{display:flex}.tab{flex:1;height:2.5rem}.host-div.arcgis-charts-rtl .label,.host-div.arcgis-charts-rtl .text,.host-div.arcgis-charts-rtl .bin-count-slider,.host-div.arcgis-charts-rtl .bin-count-input{margin-left:0rem;margin-right:1rem}`;
+const me = re`.host-div{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden;height:inherit}.chart-ui-component{overflow-y:auto;overflow-x:hidden}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.text{display:flex;margin-left:1rem;width:calc(100% - 1.5rem);height:2rem;margin-bottom:.5rem;justify-content:space-between}.field-list{max-height:50vh;overflow-y:scroll}.row{padding:.5rem}.bin-count-container{display:flex;width:calc(100% - 1rem);padding:.5rem}.bin-count-slider{margin-left:1rem;width:calc(90% - 1rem)}.bin-count-input{margin-left:1rem;height:2rem;width:2rem}.bin-row{padding:.5rem 0 .5rem .5rem}.tab-bar{display:flex}.tab{flex:1;height:2.5rem}.host-div.arcgis-charts-rtl .label,.host-div.arcgis-charts-rtl .text,.host-div.arcgis-charts-rtl .bin-count-slider,.host-div.arcgis-charts-rtl .bin-count-input{margin-left:0rem;margin-right:1rem}`;
 function y(c, e) {
-  return !k(c, e);
+  return !I(c, e);
 }
-class me extends Q {
+class ge extends Q {
   //#endregion
   //#region Lifecycle
   constructor() {
@@ -147,14 +158,14 @@ class me extends Q {
             break;
           }
           case o.ScatterSeries: {
-            const l = a, { dataItems: g, r2: u } = l;
-            let m = u;
-            Number.isFinite(u) || (m = void 0), this.r2 = m, i && (i.dataStore.r2 = m), this.calculatedDataMinMaxBounds = this.getDataExtent(g), i && (i.dataStore.calculatedDataMinMaxBounds = this.calculatedDataMinMaxBounds);
+            const l = a, { dataItems: m, r2: u } = l;
+            let g = u;
+            Number.isFinite(u) || (g = void 0), this.r2 = g, i && (i.dataStore.r2 = g), this.calculatedDataMinMaxBounds = this.getDataExtent(m), i && (i.dataStore.calculatedDataMinMaxBounds = this.calculatedDataMinMaxBounds);
             break;
           }
           case o.LineSeries: {
-            const { dataItems: l, timeIntervalInfo: g } = a;
-            T(s) && (g?.size !== void 0 && s.getTemporalBinningSize() !== g?.size && s.setTemporalBinningSize(g?.size), g?.unit !== void 0 && s.getTemporalBinningUnit() !== g?.unit && g?.unit !== _.Quarter && s.setTemporalBinningUnit(g?.unit)), this.calculatedDataMinMaxBounds = this.getDataExtent(l), i && (i.dataStore.calculatedDataMinMaxBounds = this.calculatedDataMinMaxBounds);
+            const { dataItems: l, timeIntervalInfo: m } = a;
+            T(s) && (m?.size !== void 0 && s.getTemporalBinningSize() !== m?.size && s.setTemporalBinningSize(m?.size), m?.unit !== void 0 && s.getTemporalBinningUnit() !== m?.unit && m?.unit !== F.Quarter && s.setTemporalBinningUnit(m?.unit)), this.calculatedDataMinMaxBounds = this.getDataExtent(l), i && (i.dataStore.calculatedDataMinMaxBounds = this.calculatedDataMinMaxBounds);
             break;
           }
         }
@@ -226,7 +237,7 @@ class me extends Q {
     this.properties = { selectedPanel: 16, currentChartTypeText: 16, messageOverrides: 0, modelList: [0, { hasChanged: y }], layerList: [0, { hasChanged: y }], selectedChartId: 3, activeLayerId: 3, disableEditing: 7, syncChartsToLayers: 7, timeZone: 3, headerTitle: 3, open: 7, chartData: [0, { hasChanged: y }], r2: 9, calculatedDataMinMaxBounds: [0, { hasChanged: y }], calculatedMinMaxBounds: [2, { hasChanged: y }], seriesColor: [2, { hasChanged: y }], popoverPlacement: 3, usePopupTemplateFieldsInfo: 5, panelNumber: 11, filterBySelection: 5 };
   }
   static {
-    this.styles = ge;
+    this.styles = me;
   }
   //#endregion
   //#region Public Methods
@@ -264,7 +275,7 @@ class me extends Q {
    */
   modelListReorderChangeListener(e) {
     const { modelList: t } = e.detail;
-    if (this.modelList = B({
+    if (this.modelList = w({
       arrayA: this.modelList,
       arrayB: t,
       getKey: (a) => a.getChartId() ?? a.getTitleText() ?? ""
@@ -294,7 +305,7 @@ class me extends Q {
       for (const r of s.charts ?? []) {
         const l = await oe({
           layer: i,
-          chartType: F(r.series),
+          chartType: N(r.series),
           config: r
         });
         l !== void 0 && e.push(l);
@@ -363,12 +374,12 @@ class me extends Q {
     const t = this.getModel(this.selectedChartId)?.getConfig();
     let a = [];
     if (t !== void 0 && e !== void 0) {
-      const i = N({
+      const i = V({
         chartConfig: t,
         chartData: e
-      }), { minY: s, maxY: r, minX: l, maxX: g } = i;
+      }), { minY: s, maxY: r, minX: l, maxX: m } = i;
       a = [
-        { isXAxis: !0, minimum: l, maximum: g },
+        { isXAxis: !0, minimum: l, maximum: m },
         { isXAxis: !1, minimum: s, maximum: r }
       ];
     }
@@ -383,19 +394,19 @@ class me extends Q {
     e?.forEach((t) => {
       const { isXAxis: a, maximum: i, minimum: s } = t, r = this.getModel(this.selectedChartId);
       if (r !== void 0 && $(r) && this.selectedChartId !== void 0) {
-        const l = new se(r, a), g = ae({
+        const l = new se(r, a), m = ae({
           chartId: this.selectedChartId,
           isXAxis: a,
           isLogarithmic: l.getLogarithmic()
         }), u = M.chartAxesBoundDataMap;
         u[this.selectedChartId] === void 0 && (u[this.selectedChartId] = {});
-        const m = u[this.selectedChartId]?.[g], v = {
-          defaultMinBound: m?.defaultMinBound === m?.currMinBound ? s : m?.defaultMinBound,
+        const g = u[this.selectedChartId]?.[m], v = {
+          defaultMinBound: g?.defaultMinBound === g?.currMinBound ? s : g?.defaultMinBound,
           currMinBound: s,
-          defaultMaxBound: m?.defaultMaxBound === m?.currMaxBound ? i : m?.defaultMaxBound,
+          defaultMaxBound: g?.defaultMaxBound === g?.currMaxBound ? i : g?.defaultMaxBound,
           currMaxBound: i
         };
-        !k(m, v) && this.selectedChartId !== void 0 && u?.[this.selectedChartId] !== void 0 && (u[this.selectedChartId][g] = v);
+        !I(g, v) && this.selectedChartId !== void 0 && u?.[this.selectedChartId] !== void 0 && (u[this.selectedChartId][m] = v);
       }
     });
   }
@@ -409,7 +420,7 @@ class me extends Q {
     if (this.popoverPlacement !== void 0)
       e = this.popoverPlacement;
     else {
-      const t = this.modelList?.filter((i) => w(ie, i.getConfig())).length;
+      const t = this.modelList?.filter((i) => k(ie, i.getConfig())).length;
       e = Number(t) <= 2 ? "bottom" : "top";
     }
     return e;
@@ -442,7 +453,7 @@ class me extends Q {
         onSelectChartTypeChange: this.onSelectChartTypeChange,
         popoverClose: this.onAddChartClose
       };
-      this.selectChartTypePopover = V(U.SelectChartTypePopover, a);
+      this.selectChartTypePopover = H(_.SelectChartTypePopover, a);
     }
     this.selectChartTypePopover !== void 0 && (this.selectChartTypePopover.layerId = t, this.selectChartTypePopover.popoverReferenceElement = e, this.selectChartTypePopover.popoverPlacement = this.getPlacement());
   }
@@ -476,7 +487,7 @@ class me extends Q {
    * @category Private
    */
   clearPartialModels() {
-    this.modelList = this.modelList.filter((e) => !I(e.getConfig()));
+    this.modelList = this.modelList.filter((e) => !B(e.getConfig()));
   }
   /**
    * Event handler chart delete.
@@ -593,7 +604,7 @@ class me extends Q {
    */
   renderTabs() {
     const e = this.getModel(this.selectedChartId);
-    return L("chart-edit", h`<calcite-flow-item .selected=${this.panelNumber >= 1 && !this.disableEditing} @calciteFlowItemBack=${this.onBackFlow} .heading=${this._messages[this.selectedPanel ?? n.Data]} .description=${this.currentChartTypeText !== "" && this._messages.pageFlowTitle !== void 0 ? H(this._messages.pageFlowTitle, {
+    return L("chart-edit", h`<calcite-flow-item .selected=${this.panelNumber >= 1 && !this.disableEditing} @calciteFlowItemBack=${this.onBackFlow} .heading=${this._messages[this.selectedPanel ?? n.Data]} .description=${this.currentChartTypeText !== "" && this._messages.pageFlowTitle !== void 0 ? U(this._messages.pageFlowTitle, {
       chartName: e?.getTitleText() ?? this.currentChartTypeText,
       layerName: e?.getLayer()?.title ?? ""
     }) : ""}>${e?.getChartType() !== void 0 ? h`<calcite-action-bar class=${p(d.tabBar)} layout=horizontal expand-disabled dir=${this.direction ?? S}><calcite-action class=${p(d.tab)} icon=configure scale=s alignment=center .active=${this.selectedPanel === n.Data || this.selectedPanel === void 0} @click=${() => {
@@ -648,7 +659,7 @@ class me extends Q {
     return a;
   }
 }
-E("arcgis-charts-config-create-flow", me);
+E("arcgis-charts-config-create-flow", ge);
 export {
-  me as ArcGISChartsConfigCreateFlow
+  ge as ArcGISChartsConfigCreateFlow
 };

package/dist/components/arcgis-charts-config-create-flow/resource.d.ts

@@ -1,5 +1,5 @@
 import { ChartModel } from '../../model';
-import { SupportedCharts } from '@arcgis/charts-shared-utils';
+import { SupportedCharts } from '../../utils';
 import { SupportedLayer } from '@arcgis/charts-spec';
 import { default as Sublayer } from '@arcgis/core/layers/support/Sublayer.js';
 export declare const HTMLClasses: {

package/dist/components/arcgis-charts-config-field-select/customElement.js

@@ -4,7 +4,7 @@ import { LitElement as c, safeClassMap as t } from "@arcgis/lumina";
 import { css as a } 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 e = {
   fieldSelectButtonSection: "field-select-btn-section",
   fieldSelectButton: "field-select-btn",

package/dist/components/arcgis-charts-config-font-style/customElement.js

@@ -1,16 +1,24 @@
 import { c as d } from "../../chunks/runtime.js";
 import { html as l } from "lit-html";
-import { getDefaultTextSymbol as u } from "@arcgis/charts-shared-utils";
-import { RESTSymbolType as y, RESTFontWeight as s, RESTFontStyle as c, RESTFontDecoration as r } from "@arcgis/charts-spec";
+import { RESTSymbolType as u, RESTFontWeight as s, RESTFontStyle as c, RESTFontDecoration as r } from "@arcgis/charts-spec";
 import { merge as o } from "lodash-es";
-import { a as S, m as h, s as g, b as m } from "../../chunks/chart-ui-utils.js";
+import "d3-array";
+import { A as y } 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 { a as S, m as h, s as g, b as m } from "../../chunks/chart-ui-utils2.js";
 import { u as v } from "../../chunks/useT9n.js";
 import { createRef as b, ref as C } from "lit-html/directives/ref.js";
 import { LitElement as $, createEvent as p, safeClassMap as i } from "@arcgis/lumina";
 import { css as x } 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 E = {
   arial: "Arial",
   arialBlack: "Arial Black",
@@ -36,7 +44,7 @@ const E = {
 class I extends $ {
   constructor() {
     super(...arguments), this._messages = v(), this.fontSizeInputElement = b(), this.fontStyle = {
-      type: y.TS
+      type: u.TS
     }, this.arcgisChartsConfigFontStyleChange = p(), this.arcgisChartsConfigFontStyleClose = p();
   }
   static {
@@ -122,7 +130,7 @@ class I extends $ {
   //#region Rendering
   /** @category Render UX */
   renderFonts() {
-    const t = Object.values(E).map((e) => l`<calcite-option .value=${e} .selected=${e === this.fontStyle?.font?.family || e === u().font?.family?.split(",")[0] && this.fontStyle?.font?.family === void 0}>${e}</calcite-option>`);
+    const t = Object.values(E).map((e) => l`<calcite-option .value=${e} .selected=${e === this.fontStyle?.font?.family || e === y().font?.family?.split(",")[0] && this.fontStyle?.font?.family === void 0}>${e}</calcite-option>`);
     return this.fontStyle?.font?.family === "" && t.push(l`<calcite-option value selected></calcite-option>`), t;
   }
   /** @category Lifecycle */

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

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { ChartModel } from '../../model';
-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';
 import { ArcgisChartsConfigFormatPopover } from '../arcgis-charts-config-format-popover/customElement.js';

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

@@ -1,34 +1,44 @@
 import { c as A } from "../../chunks/runtime.js";
 import { ref as B } from "lit-html/directives/ref.js";
-import { isSLS as u, isWebChartTextSymbol as l, removePopover as E, createPopover as V, PopoverType as $ } from "@arcgis/charts-shared-utils";
-import { RESTSimpleLineSymbolStyle as M, RESTSymbolType as f, RESTFontWeight as D, RESTFontStyle as w, RESTFontDecoration as N } from "@arcgis/charts-spec";
-import { U as G, V as i, W as c } from "../../chunks/scatter-plot-model.js";
-import { isEmpty as b, cloneDeep as r, isArray as L, isObject as k, mergeWith as W } from "lodash-es";
-import { e as y, b as m, d, f as S, c as h, g as T, h as O } from "../../chunks/type-guards.js";
-import { l as X } from "../../chunks/chart-ui-utils.js";
+import { RESTSimpleLineSymbolStyle as V, RESTSymbolType as f, RESTFontWeight as $, RESTFontStyle as M, RESTFontDecoration as D } from "@arcgis/charts-spec";
+import { isEmpty as u, cloneDeep as r, isArray as E, isObject as L, mergeWith as w } from "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 { d as b, e as l } from "../../chunks/index.js";
+import { r as k, c as N, P as G } from "../../chunks/popover-ui-utils.js";
+import { U as W, V as i, W as m } from "../../chunks/scatter-plot-model.js";
+import { e as y, b as d, d as c, f as S, c as h, g as T, h as O } from "../../chunks/type-guards.js";
+import { l as X } from "../../chunks/chart-ui-utils2.js";
 import { u as R } from "../../chunks/useT9n.js";
-import { html as v } from "lit";
-import { LitElement as Y, createEvent as F, safeClassMap as g } from "@arcgis/lumina";
+import { html as P } from "lit";
+import { LitElement as Y, createEvent as F, safeClassMap as p } from "@arcgis/lumina";
 import { css as _ } 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 */
-const P = {
+v4.33.0-next.102 */
+const v = {
   type: f.TS,
   color: [1, 1, 1, 255],
   font: {
     family: "Tahoma",
     size: 12,
-    decoration: N.None,
-    style: w.Normal,
-    weight: D.Normal
+    decoration: D.None,
+    style: M.Normal,
+    weight: $.Normal
   }
 }, C = {
   type: f.SLS,
   color: [1, 1, 1, 255],
-  style: M.Solid,
+  style: V.Solid,
   width: 2
-}, p = {
+}, g = {
   hostDiv: "host-div",
   element: "chart-element",
   elementList: "element-list",
@@ -43,7 +53,7 @@ class z extends Y {
         this.selectedSymbols = [], this.updateSelectedElement(this.selectedSymbols);
       else {
         const o = this.getFormatValue(s);
-        this.selectedSymbols = [s], this.initSelectedSymbols(u(o) ? o : C);
+        this.selectedSymbols = [s], this.initSelectedSymbols(b(o) ? o : C);
       }
       this.setupFormatPopover();
     }, this.textPropertyChange = (t) => {
@@ -61,20 +71,20 @@ class z extends Y {
         this.selectedTexts = [], this.updateSelectedElement(this.selectedTexts), this.setupFormatPopover();
       else {
         const o = this.getFormatValue(s);
-        this.selectedTexts = [s], this.initSelectedTexts(l(o) ? o : P), this.setupFormatPopover();
+        this.selectedTexts = [s], this.initSelectedTexts(l(o) ? o : v), this.setupFormatPopover();
       }
       this.lastSelectedText = s;
     }, this.backgroundChange = (t) => {
       const e = t;
       let s;
-      e.target?.localName === "calcite-list-item" ? s = e.target?.value : s = e.target?.parentNode?.value, this.selectedSymbols = [], this.selectedTexts = [], this.selectedBackground.includes(s) ? (this.selectedBackground = [], this.selectedElement = {}) : (this.selectedBackground = [s], this.selectedElement = b(this.getFormatValue(s)) ? void 0 : this.getFormatValue(s)), this.setupFormatPopover();
+      e.target?.localName === "calcite-list-item" ? s = e.target?.value : s = e.target?.parentNode?.value, this.selectedSymbols = [], this.selectedTexts = [], this.selectedBackground.includes(s) ? (this.selectedBackground = [], this.selectedElement = {}) : (this.selectedBackground = [s], this.selectedElement = u(this.getFormatValue(s)) ? void 0 : this.getFormatValue(s)), this.setupFormatPopover();
     }, this.updateSymbolProps = (t) => {
       const e = t.detail;
       this.selectedSymbols.forEach((s) => {
         this.setFormatValue(s, e);
       }), this.selectedElement = r(t.target.selectedElement);
     }, this.updateBackground = (t) => {
-      this.setFormatValue(G.Background, t.detail), this.selectedElement = t.detail;
+      this.setFormatValue(W.Background, t.detail), this.selectedElement = t.detail;
     }, this.updateTextProps = (t) => {
       const { font: e, color: s } = t.detail;
       this.selectedTexts.forEach((o) => {
@@ -92,7 +102,7 @@ class z extends Y {
       this.formatPopover === t?.target && (this.selectedTexts = [], this.selectedSymbols = [], this.selectedBackground = [], this.selectedElement = {}, this.removeFormatPopover());
     }, this.mergeFormatValues = (t, e) => {
       let s = !1;
-      L(t) && L(e) || k(t) && k(e) ? s = !0 : s = t === e;
+      E(t) && E(e) || L(t) && L(e) ? s = !0 : s = t === e;
       const o = typeof t == "number" || typeof e == "number" ? Number.NaN : "";
       return s ? void 0 : o;
     }, this.openChange = (t) => {
@@ -156,11 +166,11 @@ class z extends Y {
       const s = r(this.getFormatValue(t[0]));
       this.selectedElement = t?.reduce((o, a) => {
         const n = this.getFormatValue(a);
-        return W(o, n, this.mergeFormatValues);
+        return w(o, n, this.mergeFormatValues);
       }, s);
     } else {
       let s = r(e);
-      b(e) && (this.selectedSymbols?.length > 0 && (s = r(C)), this.selectedTexts?.length > 0 && (s = r(P))), this.selectedElement = s;
+      u(e) && (this.selectedSymbols?.length > 0 && (s = r(C)), this.selectedTexts?.length > 0 && (s = r(v))), this.selectedElement = s;
     }
   }
   /**
@@ -169,7 +179,7 @@ class z extends Y {
    */
   initSelectedTexts(t) {
     let e = r(t);
-    b(t) && (e = r(P)), this.selectedElement = e;
+    u(t) && (e = r(v)), this.selectedElement = e;
   }
   /**
    * @param value
@@ -177,11 +187,11 @@ class z extends Y {
    */
   initSelectedSymbols(t) {
     let e = r(t);
-    b(t) && (e = r(C)), this.selectedElement = e;
+    u(t) && (e = r(C)), this.selectedElement = e;
   }
   /** @category Private */
   setupFormatPopover() {
-    this.formatPopover = E(this.formatPopover);
+    this.formatPopover = k(this.formatPopover);
     const t = this.selectedElement, e = {
       selectedElement: this.selectedElement,
       referenceElement: this.el,
@@ -193,12 +203,12 @@ class z extends Y {
       placement: "auto",
       popoverClose: this.formatPopoverClose
     };
-    this.formatPopover = V($.FormatPopover, e), t?.type === f.TS || t?.type === f.SLS || // To check if the selected element is background.
+    this.formatPopover = N(G.FormatPopover, e), t?.type === f.TS || t?.type === f.SLS || // To check if the selected element is background.
     Array.isArray(this.selectedElement) ? (this.formatPopover.open = !0, this.addFormatPopover()) : (this.formatPopover.open = !1, this.removeFormatPopover());
   }
   /** @category Private */
   removeFormatPopover() {
-    this.formatPopover !== null && (this.formatPopover.open = !1, this.formatPopover = E(this.formatPopover)), this.formatPopoverChange(!1);
+    this.formatPopover !== null && (this.formatPopover.open = !1, this.formatPopover = k(this.formatPopover)), this.formatPopoverChange(!1);
   }
   /** @category Private */
   addFormatPopover() {
@@ -212,11 +222,11 @@ class z extends Y {
       case i.Description:
         return this.model.getDescriptionSymbol();
       case i.XAxisTitle:
-        return d(this.model) ? this.model.getXAxisTitleSymbol() : void 0;
+        return c(this.model) ? this.model.getXAxisTitleSymbol() : void 0;
       case i.YAxisTitle:
-        return m(this.model) ? this.model.getYAxisTitleSymbol() : void 0;
+        return d(this.model) ? this.model.getYAxisTitleSymbol() : void 0;
       case i.AxisLabels:
-        return d(this.model) ? this.model.getAxisLabelsSymbol() : void 0;
+        return c(this.model) ? this.model.getAxisLabelsSymbol() : void 0;
       case i.GuideLabels:
         return T(this.model) ? this.model.getGuideLabelsSymbol() : void 0;
       case i.LegendText:
@@ -225,11 +235,11 @@ class z extends Y {
         return h(this.model) ? this.model.getLegendTitleSymbol() : void 0;
       case i.DataLabels:
         return S(this.model) ? this.model.getDataLabelsSymbol() : void 0;
-      case c.AxisLines:
-        return d(this.model) ? this.model.getAxisLinesSymbol() : void 0;
-      case c.GridLines:
-        return m(this.model) ? this.model.getGridLinesSymbol() : void 0;
-      case c.LeaderLines:
+      case m.AxisLines:
+        return c(this.model) ? this.model.getAxisLinesSymbol() : void 0;
+      case m.GridLines:
+        return d(this.model) ? this.model.getGridLinesSymbol() : void 0;
+      case m.LeaderLines:
         return y(this.model) ? this.model.getTicksSymbol() : void 0;
       case i.Background:
         return this.model.getBackgroundColor();
@@ -247,13 +257,13 @@ class z extends Y {
         l(e) && this.model.setDescriptionSymbol(e);
         break;
       case i.XAxisTitle:
-        d(this.model) && l(e) && this.model.setXAxisTitleSymbol(e);
+        c(this.model) && l(e) && this.model.setXAxisTitleSymbol(e);
         break;
       case i.YAxisTitle:
-        m(this.model) && l(e) && this.model.setYAxisTitleSymbol(e);
+        d(this.model) && l(e) && this.model.setYAxisTitleSymbol(e);
         break;
       case i.AxisLabels:
-        d(this.model) && l(e) && this.model.setAxisLabelsSymbol(e);
+        c(this.model) && l(e) && this.model.setAxisLabelsSymbol(e);
         break;
       case i.GuideLabels:
         T(this.model) && l(e) && this.model.setGuideLabelsSymbol(e);
@@ -267,14 +277,14 @@ class z extends Y {
       case i.DataLabels:
         S(this.model) && l(e) && this.model.setDataLabelsSymbol(e);
         break;
-      case c.AxisLines:
-        d(this.model) && u(e) && this.model.setAxisLinesSymbol(e);
+      case m.AxisLines:
+        c(this.model) && b(e) && this.model.setAxisLinesSymbol(e);
         break;
-      case c.GridLines:
-        m(this.model) && u(e) && this.model.setGridLinesSymbol(e);
+      case m.GridLines:
+        d(this.model) && b(e) && this.model.setGridLinesSymbol(e);
         break;
-      case c.LeaderLines:
-        y(this.model) && u(e) && this.model.setTicksSymbol(e);
+      case m.LeaderLines:
+        y(this.model) && b(e) && this.model.setTicksSymbol(e);
         break;
       case i.Background:
         Array.isArray(e) && this.model.setBackgroundColor(e);
@@ -291,19 +301,19 @@ class z extends Y {
   renderFormatElements() {
     this.textProperties = [
       i.Title,
-      ...d(this.model) ? [i.XAxisTitle] : [],
-      ...m(this.model) ? [i.YAxisTitle] : [],
+      ...c(this.model) ? [i.XAxisTitle] : [],
+      ...d(this.model) ? [i.YAxisTitle] : [],
       ...h(this.model) ? [i.LegendTitle] : [],
       i.Description,
       ...h(this.model) ? [i.LegendText] : [],
-      ...d(this.model) ? [i.AxisLabels] : [],
+      ...c(this.model) ? [i.AxisLabels] : [],
       ...T(this.model) ? [i.GuideLabels] : [],
       ...S(this.model) ? [i.DataLabels] : []
     ], O(this.model) && (this.textProperties = this.textProperties.filter((s) => s !== i.DataLabels)), this.symbolProperties = [
       i.Background,
-      ...d(this.model) ? [c.AxisLines] : [],
-      ...m(this.model) ? [c.GridLines] : [],
-      ...y(this.model) ? [c.LeaderLines] : []
+      ...c(this.model) ? [m.AxisLines] : [],
+      ...d(this.model) ? [m.GridLines] : [],
+      ...y(this.model) ? [m.LeaderLines] : []
     ];
     const t = this.textProperties.map((s) => this.renderTextElement(s, this.textPropertyChange)), e = this.symbolProperties.map((s) => s === i.Background ? this.renderTextElement(s, this.backgroundChange) : this.renderTextElement(s, this.symbolPropertyChange));
     return { textElements: t, symbolElements: e };
@@ -311,12 +321,12 @@ class z extends Y {
   /** @category Render UX */
   renderTextElement(t, e) {
     const s = X(t), o = this.getFormatValue(t), a = typeof o == "string" ? o : "", n = this.selectedTexts.includes(t) || this.selectedSymbols.includes(t) || this.selectedBackground.includes(t);
-    return v`<calcite-list-item class=${g(p.element)} .label=${this._messages[t]} .description=${a} .value=${t} .selected=${n} @click=${e} ${B(this.updateSelectableElements)}>${s !== void 0 ? v`<calcite-icon slot=content-start scale=s .icon=${s}></calcite-icon>` : null}</calcite-list-item>`;
+    return P`<calcite-list-item class=${p(g.element)} .label=${this._messages[t]} .description=${a} .value=${t} .selected=${n} @click=${e} ${B(this.updateSelectableElements)}>${s !== void 0 ? P`<calcite-icon slot=content-start scale=s .icon=${s}></calcite-icon>` : null}</calcite-list-item>`;
   }
   /** @category Lifecycle */
   render() {
     const { textElements: t, symbolElements: e } = this.renderFormatElements();
-    return v`<div class=${g(p.hostDiv)}><div class=${g(p.sectionLabel)}>${this._messages.textElements}</div><calcite-list label class=${g(p.elementList)} selection-mode=multiple selection-appearance=border @calciteListChange=${this.correctTextElementSelection}>${t}</calcite-list><div class=${g(p.sectionLabel)}>${this._messages.symbolElements}</div><calcite-list label class=${g(p.elementList)} selection-mode=single selection-appearance=border>${e}</calcite-list></div>`;
+    return P`<div class=${p(g.hostDiv)}><div class=${p(g.sectionLabel)}>${this._messages.textElements}</div><calcite-list label class=${p(g.elementList)} selection-mode=multiple selection-appearance=border @calciteListChange=${this.correctTextElementSelection}>${t}</calcite-list><div class=${p(g.sectionLabel)}>${this._messages.symbolElements}</div><calcite-list label class=${p(g.elementList)} selection-mode=single selection-appearance=border>${e}</calcite-list></div>`;
   }
 }
 A("arcgis-charts-config-format", z);

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

@@ -1,18 +1,28 @@
 import { c as i } from "../../chunks/runtime.js";
 import { html as o } from "lit-html";
-import { editPopover as a } from "@arcgis/charts-shared-utils";
 import { RESTSymbolType as r } from "@arcgis/charts-spec";
+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 a } from "../../chunks/popover-ui-utils.js";
 import { u as l } from "../../chunks/useT9n.js";
-import { createRef as n, ref as c } from "lit-html/directives/ref.js";
-import { LitElement as p, createEvent as s, safeClassMap as h } from "@arcgis/lumina";
-import { css as m } from "@lit/reactive-element/css-tag.js";
+import { createRef as n, ref as p } from "lit-html/directives/ref.js";
+import { LitElement as c, createEvent as s, safeClassMap as m } from "@arcgis/lumina";
+import { css as h } 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 g = {
   jsAppFlyout: "js-app-flyout"
-}, C = m``;
-class f extends p {
+}, C = h``;
+class f extends c {
   constructor() {
     super(...arguments), this._messages = l(), this.popoverElement = n(), this.placement = "leading", this.arcgisChartsConfigFormatPopoverColorChange = s(), this.arcgisChartsConfigFormatPopoverSymbolChange = s(), this.arcgisChartsConfigFormatPopoverTextChange = s(), this.arcgisChartsConfigPopoverClose = s();
   }
@@ -61,7 +71,7 @@ class f extends p {
   /** @category Lifecycle */
   render() {
     const e = this.selectedElement, t = this.selectedElement;
-    return o`<div class=${h(g.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} label @calcitePopoverClose=${this.closePopover} pointer-disabled ${c(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.backgroundElement} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.closePopover} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === r.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.closePopover} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${t?.type === r.TS ? o`<arcgis-charts-config-font-style .header=${this._messages.textStyle} .open=${this.open} enable-close .fontStyle=${t} @arcgisChartsConfigFontStyleClose=${this.closePopover} @arcgisChartsConfigFontStyleChange=${this.updateTextProperties}></arcgis-charts-config-font-style>` : null}</calcite-popover></div>`;
+    return o`<div class=${m(g.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} label @calcitePopoverClose=${this.closePopover} pointer-disabled ${p(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.backgroundElement} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.closePopover} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === r.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.closePopover} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${t?.type === r.TS ? o`<arcgis-charts-config-font-style .header=${this._messages.textStyle} .open=${this.open} enable-close .fontStyle=${t} @arcgisChartsConfigFontStyleClose=${this.closePopover} @arcgisChartsConfigFontStyleChange=${this.updateTextProperties}></arcgis-charts-config-font-style>` : null}</calcite-popover></div>`;
   }
 }
 i("arcgis-charts-config-format-popover", f);