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

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

@@ -1,18 +1,26 @@
-import { c as r } from "../../chunks/runtime.js";
-import "@arcgis/charts-shared-utils";
+import { c as h } from "../../chunks/runtime.js";
 import { WebChartLegendPositions as s } from "@arcgis/charts-spec";
-import "../../chunks/scatter-plot-model.js";
 import { isEmpty as m } 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 "../../chunks/scatter-plot-model.js";
 import { c as o, d as n, b as c } from "../../chunks/type-guards.js";
-import { m as g, b as d } from "../../chunks/chart-ui-utils.js";
-import { u as b } from "../../chunks/useT9n.js";
+import { m as g, b as r } from "../../chunks/chart-ui-utils2.js";
+import { u as p } from "../../chunks/useT9n.js";
 import { html as a } from "lit";
-import { createRef as p, ref as u } from "lit-html/directives/ref.js";
+import { createRef as b, ref as u } from "lit-html/directives/ref.js";
 import { LitElement as x, safeClassMap as i } from "@arcgis/lumina";
 import { css as f } 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.103 */
 const l = {
   textInput: "text-input",
   label: "label",
@@ -21,7 +29,7 @@ const l = {
 }, $ = f`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.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}.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;margin-top:var(--arcgis-charts-top-section-margin)}.text-input,.select{margin-bottom:var(--arcgis-charts-inter-section-margin)}.label{display:flex;justify-content:space-between}.label-container{display:flex;flex-direction:column;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}`;
 class C extends x {
   constructor() {
-    super(...arguments), this._messages = b(), this.characterLimitInputElement = p(), this.onModelConfigChange = () => {
+    super(...arguments), this._messages = p(), this.characterLimitInputElement = b(), this.onModelConfigChange = () => {
       this.requestUpdate();
     }, this.isChartTitleInvalid = !1, this.open = !1;
   }
@@ -56,7 +64,7 @@ class C extends x {
     const { value: t } = e.target;
     this.isChartTitleInvalid = m(t.trim()), this.characterLimitInputElement.value && g({
       inputElement: this.characterLimitInputElement.value,
-      status: this.isChartTitleInvalid ? d.INVALID : d.IDLE
+      status: this.isChartTitleInvalid ? r.INVALID : r.IDLE
     }), this.isChartTitleInvalid || this.model.setTitleText(t);
   }
   /** @category Event handler */
@@ -106,8 +114,8 @@ class C extends x {
   }
   /** @category Event handler */
   legendPositionChange(e) {
-    const h = e.target?.selectedItems[0]?.value;
-    o(this.model) && this.model.setLegendPosition(h);
+    const d = e.target?.selectedItems[0]?.value;
+    o(this.model) && this.model.setLegendPosition(d);
   }
   //#endregion
   //#region Rendering
@@ -132,7 +140,7 @@ class C extends x {
     ] : null}${o(this.model) ? a`<div class=${i(l.labelContainer)}><calcite-label layout=inline-space-between class=${i(l.label)}>${this._messages.legendTitle}<calcite-switch .checked=${this.model.getLegendTitleVisibility()} @calciteSwitchChange=${this.enableLegendTitle}></calcite-switch></calcite-label><calcite-input class=${i(l.textInput)} type=text .disabled=${!this.model.getLegendTitleVisibility()} .value=${this.model.getLegendTitleText()} @calciteInputInput=${this.setChartLegendTitle}></calcite-input></div>` : null}<div class=${i(l.labelContainer)}><calcite-label layout=inline-space-between class=${i(l.label)}>${this._messages.legendPosition}</calcite-label><calcite-combobox clear-disabled label class=${i(l.select)} @calciteComboboxChange=${this.legendPositionChange} selection-mode=single>${this.renderLegendPositions()}</calcite-combobox></div><div class=${i(l.labelContainer)}><calcite-label layout=inline-space-between class=${i(l.label)}>${this._messages.description}<calcite-switch .checked=${this.model.getDescriptionVisibility()} @calciteSwitchChange=${this.enableDescription}></calcite-switch></calcite-label><calcite-text-area .disabled=${!this.model.getDescriptionVisibility()} .value=${this.model.getDescriptionText()} @calciteTextAreaInput=${this.setChartDescription}></calcite-text-area></div>`;
   }
 }
-r("arcgis-charts-config-general", C);
+h("arcgis-charts-config-general", C);
 export {
   C as ArcGISChartsConfigGeneral
 };

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

@@ -2,7 +2,7 @@
 import { ModelWithGuides, GuideOrientation } from '../../model';
 import { CalculatedMinMaxBoundsPayload } from '@arcgis/charts-spec';
 import { default as MapView } from '@arcgis/core/views/MapView';
-import { PopoverChangePayload, PopoverOpenChangePayload } from '../../utils/event-payloads';
+import { PopoverChangePayload, PopoverOpenChangePayload } from '../../utils/components/event-payloads';
 import { GuideChangePayload } from './resource';
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';

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

@@ -1,11 +1,21 @@
 import { c as X } from "../../chunks/runtime.js";
 import { keyed as B } from "lit-html/directives/keyed.js";
-import { findExpectedGuideSymbol as p, isSLS as m, convertTimeZone as R, getDateStringInCalciteDatePickerFormat as E, getTimeStringInCalciteTimePickerFormat as L, createPopover as O, PopoverType as N, getDefaultLineSymbol as Z, isSFS as V } from "@arcgis/charts-shared-utils";
-import { RESTSymbolType as g, WebChartTypes as q, RESTSimpleLineSymbolStyle as z } from "@arcgis/charts-spec";
+import { RESTSymbolType as m, WebChartTypes as R, RESTSimpleLineSymbolStyle as O } from "@arcgis/charts-spec";
+import { cloneDeep as E } from "lodash-es";
+import "d3-array";
+import { v as p, w as N, x as L, y as F, z as Z } 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 { d as g, c as z } from "../../chunks/index.js";
+import { c as V, P as q } from "../../chunks/popover-ui-utils.js";
 import { G } from "../../chunks/scatter-plot-model.js";
-import { cloneDeep as F } from "lodash-es";
 import { b as H, i as W, a as Y } from "../../chunks/type-guards.js";
-import { m as S, c as U, d as j, h as J, k as M, b as $ } from "../../chunks/chart-ui-utils.js";
+import { m as S, c as U, d as j, h as J, k as M, b as $ } from "../../chunks/chart-ui-utils2.js";
 import { d as A } from "../../chunks/default.js";
 import { g as K } from "../../chunks/resource.js";
 import { u as Q } from "../../chunks/useT9n.js";
@@ -15,7 +25,7 @@ import { LitElement as ee, createEvent as T, safeClassMap as o, safeStyleMap as
 import { css as ie } 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.103 */
 const s = {
   row: "row",
   column: "column",
@@ -25,10 +35,10 @@ class se extends ee {
   constructor() {
     super(...arguments), this._messages = Q(), this.startCalciteInput = h(), this.endCalciteInput = h(), this.startDateCalciteInput = h(), this.endDateCalciteInput = h(), this.startTimeCalciteInput = h(), this.endTimeCalciteInput = h(), this.colorElement = h(), this.colorChange = (e) => {
       const t = e.detail, i = this.model.getGuideStart(this.index, this.orientation), n = this.model.getGuideEnd(this.index, this.orientation);
-      if (p(i, n) === g.SLS) {
-        const l = F(A.style), a = this.model.getGuideStyle(this.index, this.orientation), r = {
+      if (p(i, n) === m.SLS) {
+        const l = E(A.style), a = this.model.getGuideStyle(this.index, this.orientation), r = {
           ...l,
-          ...m(a) ? a : {},
+          ...g(a) ? a : {},
           color: t
         };
         this.lineStyleChange({ detail: r });
@@ -36,11 +46,11 @@ class se extends ee {
         this.setColor(t);
     }, this.symbolChange = (e) => {
       const t = e?.detail, i = this.model.getGuideStart(this.index, this.orientation), n = this.model.getGuideEnd(this.index, this.orientation);
-      if (p(i, n) === g.SLS) {
-        const l = F(A.style), a = this.model.getGuideStyle(this.index, this.orientation), r = {
+      if (p(i, n) === m.SLS) {
+        const l = E(A.style), a = this.model.getGuideStyle(this.index, this.orientation), r = {
           ...l,
-          ...m(a) ? a : {},
-          ...m(t) ? t : {}
+          ...g(a) ? a : {},
+          ...g(t) ? t : {}
         };
         this.lineStyleChange({ detail: r });
       } else t?.color !== void 0 && this.setColor(t.color);
@@ -55,7 +65,7 @@ class se extends ee {
     this.styles = oe;
   }
   get isXAxisDateField() {
-    return this.orientation === G.X && H(this.model) && this.model.getXAxisValueFormat()?.type === q.DateAxisFormat;
+    return this.orientation === G.X && H(this.model) && this.model.getXAxisValueFormat()?.type === R.DateAxisFormat;
   }
   //#endregion
   //#region Lifecycle
@@ -114,7 +124,7 @@ class se extends ee {
   }
   /** @category Event handler */
   setGuideDateTimeRange() {
-    const e = this.calculatedMinMaxBounds?.find((c) => c.isXAxis)?.minimum, t = this.calculatedMinMaxBounds?.find((c) => c.isXAxis)?.maximum, i = typeof e == "number" ? new Date(e) : /* @__PURE__ */ new Date(), n = typeof t == "number" ? new Date(t) : /* @__PURE__ */ new Date(), l = new window.Intl.DateTimeFormat().resolvedOptions().timeZone, a = R(this.timeZone) ?? l, r = E(i, a), v = L(i, a), f = E(n, a), _ = L(n, a), P = this.startDateCalciteInput.value?.value ?? "", C = P === "" ? r : P, D = this.startTimeCalciteInput.value?.value ?? "", w = D === "" ? v : D, x = this.endDateCalciteInput.value?.value ?? "", y = x === "" ? f : x, I = this.endTimeCalciteInput.value?.value ?? "", k = I === "" ? _ : I;
+    const e = this.calculatedMinMaxBounds?.find((c) => c.isXAxis)?.minimum, t = this.calculatedMinMaxBounds?.find((c) => c.isXAxis)?.maximum, i = typeof e == "number" ? new Date(e) : /* @__PURE__ */ new Date(), n = typeof t == "number" ? new Date(t) : /* @__PURE__ */ new Date(), l = new window.Intl.DateTimeFormat().resolvedOptions().timeZone, a = N(this.timeZone) ?? l, r = L(i, a), v = F(i, a), f = L(n, a), _ = F(n, a), P = this.startDateCalciteInput.value?.value ?? "", C = P === "" ? r : P, D = this.startTimeCalciteInput.value?.value ?? "", w = D === "" ? v : D, x = this.endDateCalciteInput.value?.value ?? "", y = x === "" ? f : x, I = this.endTimeCalciteInput.value?.value ?? "", k = I === "" ? _ : I;
     let b = !1;
     if (!Array.isArray(C) && C !== void 0 && w !== void 0) {
       const c = `${C}T${w}`;
@@ -191,10 +201,10 @@ class se extends ee {
           this.guidePopoverChange(!1), this.removeGuidePopover();
         }
       };
-      this.guidePopover = O(N.GuidePopover, n);
+      this.guidePopover = V(q.GuidePopover, n);
     }
     const e = this.model.getGuideStyle(this.index, this.orientation), t = this.model.getGuideStart(this.index, this.orientation), i = this.model.getGuideEnd(this.index, this.orientation);
-    p(t, i) === g.SLS ? this.guidePopover.selectedElement = m(e) ? e : void 0 : this.guidePopover.selectedElement = e?.color, this.guidePopover.referenceElement = this.colorElement.value, Array.isArray(e?.color) ? (this.guidePopover.open = !0, this.addGuidePopover()) : (this.guidePopover.open = !1, this.removeGuidePopover());
+    p(t, i) === m.SLS ? this.guidePopover.selectedElement = g(e) ? e : void 0 : this.guidePopover.selectedElement = e?.color, this.guidePopover.referenceElement = this.colorElement.value, Array.isArray(e?.color) ? (this.guidePopover.open = !0, this.addGuidePopover()) : (this.guidePopover.open = !1, this.removeGuidePopover());
   }
   /** @category Private */
   removeGuidePopover() {
@@ -210,8 +220,8 @@ class se extends ee {
    */
   setColor(e) {
     const t = Z({ opacity: 0 }), i = this.model.getGuideStyle(this.index, this.orientation), n = {
-      ...V(i) ? i : {},
-      type: g.SFS,
+      ...z(i) ? i : {},
+      type: m.SFS,
       color: e,
       outline: t
     };
@@ -291,7 +301,7 @@ class se extends ee {
   //#region Rendering
   /** @category Render UX */
   renderColorElement() {
-    const e = this.model.getGuideStyle(this.index, this.orientation), [t, i, n, l] = [...e?.color ?? [1, 1, 1, 255]], a = this.model.getGuideStart(this.index, this.orientation), r = this.model.getGuideEnd(this.index, this.orientation), v = m(e) ? J(e.style) : z.Solid, f = p(a, r) === g.SLS ? `line-${v}` : "square-f";
+    const e = this.model.getGuideStyle(this.index, this.orientation), [t, i, n, l] = [...e?.color ?? [1, 1, 1, 255]], a = this.model.getGuideStart(this.index, this.orientation), r = this.model.getGuideEnd(this.index, this.orientation), v = g(e) ? J(e.style) : O.Solid, f = p(a, r) === m.SLS ? `line-${v}` : "square-f";
     return d`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .value=${this._messages.style} class=${o(s.colorPicker)} .label=${this._messages.style} .selected=${this.guidePopover?.open} @click=${this.onColorElementSelect} ${u(this.colorElement)}><calcite-icon slot=content-end .icon=${f} style=${te({ color: `rgba(${t},${i},${n},${l / 255})` })}></calcite-icon></calcite-list-item></calcite-list>`;
   }
   /** @category Lifecycle */

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

@@ -1,21 +1,31 @@
 import { c as r } from "../../chunks/runtime.js";
 import { html as o } from "lit-html";
 import { RESTSymbolType as l } from "@arcgis/charts-spec";
-import { editPopover as a } from "@arcgis/charts-shared-utils";
+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 { g as i } from "../../chunks/default.js";
 import { u as n } from "../../chunks/useT9n.js";
-import { createRef as c, ref as p } from "lit-html/directives/ref.js";
-import { LitElement as h, createEvent as s, safeClassMap as m } from "@arcgis/lumina";
+import { createRef as p, ref as c } from "lit-html/directives/ref.js";
+import { LitElement as m, createEvent as s, safeClassMap as h } from "@arcgis/lumina";
 import { css as g } 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.103 */
 const C = {
   jsAppFlyout: "js-app-flyout"
 }, d = g``;
-class f extends h {
+class f extends m {
   constructor() {
-    super(...arguments), this._messages = n(), this.popoverElement = c(), this.placement = "leading", this.arcgisChartsConfigGuidePopoverColorChange = s(), this.arcgisChartsConfigGuidePopoverSymbolChange = s(), this.arcgisChartsConfigPopoverClose = s();
+    super(...arguments), this._messages = n(), this.popoverElement = p(), this.placement = "leading", this.arcgisChartsConfigGuidePopoverColorChange = s(), this.arcgisChartsConfigGuidePopoverSymbolChange = s(), this.arcgisChartsConfigPopoverClose = s();
   }
   static {
     this.properties = { messageOverrides: 0, selectedElement: 2, referenceElement: 2, placement: 3, open: 7 };
@@ -60,7 +70,7 @@ class f extends h {
   /** @category Lifecycle */
   render() {
     const t = this.selectedElement, e = this.selectedElement;
-    return o`<div class=${m(C.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} offset-distance=20 offset-skidding=60 label pointer-disabled @calcitePopoverClose=${this.guidePopoverClose} ${p(this.popoverElement)}>${Array.isArray(t) && o`<arcgis-charts-config-color-style .header=${this._messages.fillStyle} enable-close .open=${this.open} .selectedColor=${t} @arcgisChartsConfigColorStyleClose=${this.guidePopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` || ""}${e?.type === l.SLS && o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${e} @arcgisChartsConfigLineStyleClose=${this.guidePopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` || ""}</calcite-popover></div>`;
+    return o`<div class=${h(C.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} offset-distance=20 offset-skidding=60 label pointer-disabled @calcitePopoverClose=${this.guidePopoverClose} ${c(this.popoverElement)}>${Array.isArray(t) && o`<arcgis-charts-config-color-style .header=${this._messages.fillStyle} enable-close .open=${this.open} .selectedColor=${t} @arcgisChartsConfigColorStyleClose=${this.guidePopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` || ""}${e?.type === l.SLS && o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${e} @arcgisChartsConfigLineStyleClose=${this.guidePopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` || ""}</calcite-popover></div>`;
   }
 }
 r("arcgis-charts-config-guide-popover", f);

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

@@ -1,19 +1,28 @@
 import { c as x } from "../../chunks/runtime.js";
-import { editPopover as A } from "@arcgis/charts-shared-utils";
 import "@arcgis/charts-spec";
-import { G as o } from "../../chunks/scatter-plot-model.js";
 import { cloneDeep as r } 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 { e as A } from "../../chunks/popover-ui-utils.js";
+import { G as o } from "../../chunks/scatter-plot-model.js";
 import { i as l, a as h } from "../../chunks/type-guards.js";
 import { d as c } from "../../chunks/default.js";
 import { g as u, H as g } from "../../chunks/resource.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";
-import { LitElement as C, createEvent as $, safeClassMap as f } from "@arcgis/lumina";
+import { LitElement as C, createEvent as $, safeClassMap as p } from "@arcgis/lumina";
 import { css as v } 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.103 */
 const X = v`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.add-guide{display:flex;justify-content:center;padding:.5rem}.add-guide-btn{width:100%}.no-guides{border-radius:2rem}.no-messages{text-align:center}.guide-icon{padding-left:.5rem;padding-top:.5rem;width:1.5rem;height:1.5rem}`;
 class Y extends C {
   constructor() {
@@ -140,7 +149,7 @@ class Y extends C {
   /** @category Lifecycle */
   render() {
     const e = this.getAllGuidesLength(), i = e > 0, t = this.showAddButton && this.enableXAxisGuide && this.enableYAxisGuide, s = this.enableXAxisGuide && !this.enableYAxisGuide, d = !this.enableXAxisGuide && this.enableYAxisGuide;
-    return a`<calcite-popover .open=${!this.showAddButton} .referenceElement=${this.addGuideButton.value ?? document.body} flip-disabled pointer-disabled offset-distance=-18 @calcitePopoverClose=${this.closeAddPopOver} .placement=${e === 0 ? "bottom" : "top"} label ${G(this.popoverElement)}><calcite-panel .heading=${this._messages.guideType}><calcite-action text slot=header-actions-end icon=x @click=${this.closeAddPopOver}></calcite-action>${this.enableXAxisGuide ? a`<calcite-action .label=${this._messages.addXAxisGuide} .text=${this._messages.addXAxisGuide ?? ""} @click=${this.addXGuide} icon=x-axis-guide text-enabled></calcite-action>` : null}${this.enableYAxisGuide ? a`<calcite-action .label=${this._messages.addYAxisGuide} .text=${this._messages.addYAxisGuide ?? ""} @click=${this.addYGuide} icon=y-axis-guide text-enabled></calcite-action>` : null}</calcite-panel></calcite-popover>${i ? this.renderGuides() : a`<div class=${f(g.noMessages)}>${this._messages.noGuidesMsg}</div>`}<div class=${f(g.addGuide)} ${G(this.addGuideButton)}>${t && this.renderAddGuideButton(this.togglePopOver) || ""}${s && this.renderAddGuideButton(this.addXGuide) || ""}${d && this.renderAddGuideButton(this.addYGuide) || ""}</div>`;
+    return a`<calcite-popover .open=${!this.showAddButton} .referenceElement=${this.addGuideButton.value ?? document.body} flip-disabled pointer-disabled offset-distance=-18 @calcitePopoverClose=${this.closeAddPopOver} .placement=${e === 0 ? "bottom" : "top"} label ${G(this.popoverElement)}><calcite-panel .heading=${this._messages.guideType}><calcite-action text slot=header-actions-end icon=x @click=${this.closeAddPopOver}></calcite-action>${this.enableXAxisGuide ? a`<calcite-action .label=${this._messages.addXAxisGuide} .text=${this._messages.addXAxisGuide ?? ""} @click=${this.addXGuide} icon=x-axis-guide text-enabled></calcite-action>` : null}${this.enableYAxisGuide ? a`<calcite-action .label=${this._messages.addYAxisGuide} .text=${this._messages.addYAxisGuide ?? ""} @click=${this.addYGuide} icon=y-axis-guide text-enabled></calcite-action>` : null}</calcite-panel></calcite-popover>${i ? this.renderGuides() : a`<div class=${p(g.noMessages)}>${this._messages.noGuidesMsg}</div>`}<div class=${p(g.addGuide)} ${G(this.addGuideButton)}>${t && this.renderAddGuideButton(this.togglePopOver) || ""}${s && this.renderAddGuideButton(this.addXGuide) || ""}${d && this.renderAddGuideButton(this.addYGuide) || ""}</div>`;
   }
 }
 x("arcgis-charts-config-guides", Y);

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

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { HistogramModel } from '../../model';
-import { SeriesSymbolsMap } from '@arcgis/charts-shared-utils';
+import { SeriesSymbolsMap } from '../../utils';
 import { CalculatedMinMaxBoundsPayload, SupportedLayer, WebChartHistogramDataItem } from '@arcgis/charts-spec';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { PropertyValues } from 'lit';

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

@@ -1,15 +1,25 @@
 import { c as n } from "../../chunks/runtime.js";
-import { isSFS as l, hasILayer as h, getFeatureLayer as d, fetchLayerFieldsInfo as c } from "@arcgis/charts-shared-utils";
+import "@arcgis/charts-spec";
 import { isEqual as r } from "lodash-es";
-import { LitElement as g } from "@arcgis/lumina";
+import "d3-array";
+import { h as l, j as h } 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 as d, h as c } from "../../chunks/index.js";
+import { LitElement as m } from "@arcgis/lumina";
 import { html as i } from "lit";
-import { C as s } from "../../chunks/interfaces.js";
-import { css as m } from "@lit/reactive-element/css-tag.js";
+import { C as s } from "../../chunks/interfaces2.js";
+import { css as p } 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 = m`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
-class f extends g {
+v4.33.0-next.103 */
+const g = p`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
+class f extends m {
   constructor() {
     super(...arguments), this.popoverElement = null, this.onModelConfigChange = async (e) => {
       const t = e?.detail.config ?? this.model.getConfig();
@@ -20,7 +30,7 @@ class f extends g {
     this.properties = { layerFieldsInfo: 16, model: 0, chartData: 0, seriesColor: 2, calculatedMinMaxBounds: 2, page: 3, layer: 0, usePopupTemplateFieldsInfo: 5 };
   }
   static {
-    this.styles = p;
+    this.styles = g;
   }
   //#endregion
   //#region Lifecycle
@@ -57,7 +67,7 @@ class f extends g {
    */
   seriesColorChange(e) {
     this.model.getColorMatch() && e?.forEach((a) => {
-      l(a) && e?.get(0) !== void 0 && !r(this.model.getBinColor(), a) && this.model.setBinColor(a);
+      d(a) && e?.get(0) !== void 0 && !r(this.model.getBinColor(), a) && this.model.setBinColor(a);
     });
   }
   /** @category Private */
@@ -65,10 +75,10 @@ class f extends g {
     const a = e ?? this.model.getConfig();
     let t = this.layer;
     if (!t) {
-      const o = h(a) ? a.iLayer : void 0;
-      o && (t = await d(o));
+      const o = c(a) ? a.iLayer : void 0;
+      o && (t = await l(o));
     }
-    t && (this.layerFieldsInfo = await c(t, this.usePopupTemplateFieldsInfo));
+    t && (this.layerFieldsInfo = await h(t, this.usePopupTemplateFieldsInfo));
   }
   /** @category Event handler */
   popoverOpen(e) {

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

@@ -1,7 +1,7 @@
 /// <reference types="../../index.d.ts" />
 import { HistogramModel } from '../../model';
 import { IField } from '@arcgis/charts-spec';
-import { DataChangeErrorPayload, PopoverChangePayload, PopoverOpenChangePayload } from '../../utils/event-payloads';
+import { DataChangeErrorPayload, PopoverChangePayload, 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-histogram-data/customElement.js

@@ -1,10 +1,19 @@
 import { c as M } from "../../chunks/runtime.js";
 import { keyed as f } from "lit-html/directives/keyed.js";
-import { removePopover as x, createPopover as k, PopoverType as T, getFieldAlias as L, generateRandomRestColor as V, getDefaultColor as N } from "@arcgis/charts-shared-utils";
-import { WebChartDataTransformations as v, RESTSymbolType as I } from "@arcgis/charts-spec";
+import { WebChartDataTransformations as v, RESTSymbolType as x } from "@arcgis/charts-spec";
 import { debounce as C } from "lodash-es";
-import { H as r, c as i, d as n } from "../../chunks/interfaces.js";
-import { a as B, m as y, U as S, f as F, s as _, b as D, D as H } from "../../chunks/chart-ui-utils.js";
+import "d3-array";
+import { c as k, u as T, e as L } 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 V, c as N, P as I } from "../../chunks/popover-ui-utils.js";
+import { H as r, c as i, d as n } from "../../chunks/interfaces2.js";
+import { a as B, m as y, U as S, f as F, s as _, b as D, D as H } from "../../chunks/chart-ui-utils2.js";
 import { d as K, s as A } from "../../chunks/store.js";
 import { u as U } from "../../chunks/useT9n.js";
 import { html as l } from "lit";
@@ -13,7 +22,7 @@ import { LitElement as z, createEvent as u, safeStyleMap as P, safeClassMap as s
 import { css as j } 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.103 */
 const a = {
   hostDiv: "host-div",
   label: "label",
@@ -120,7 +129,7 @@ class R extends z {
    * @category Private
    */
   removeHistogramDataPopover() {
-    this.histogramPopover !== null && (this.histogramPopover.open = !1, this.histogramPopover = x(this.histogramPopover)), this.histogramPopoverChange(!1);
+    this.histogramPopover !== null && (this.histogramPopover.open = !1, this.histogramPopover = V(this.histogramPopover)), this.histogramPopoverChange(!1);
   }
   /** @category Private */
   getDataTransformationLabel() {
@@ -191,7 +200,7 @@ class R extends z {
   }
   /** @category Event handler */
   onColorElementSelect(e, t, o) {
-    e.type === I.SFS ? (this.selectedOverlaySymbol = void 0, this.selectedBinColorSymbol = e, this.contentKind = r.fillSymbol) : (this.selectedBinColorSymbol = void 0, this.selectedOverlaySymbol = e, this.overlaySectionElement = o, this.contentKind = r.lineSymbol), this.popoverHeading = t, this.setupPopover();
+    e.type === x.SFS ? (this.selectedOverlaySymbol = void 0, this.selectedBinColorSymbol = e, this.contentKind = r.fillSymbol) : (this.selectedBinColorSymbol = void 0, this.selectedOverlaySymbol = e, this.overlaySectionElement = o, this.contentKind = r.lineSymbol), this.popoverHeading = t, this.setupPopover();
   }
   /** @category Event handler */
   onNumericFieldSelect() {
@@ -253,7 +262,7 @@ class R extends z {
       popoverClose: this.popoverClose,
       openChange: this.openChange
     };
-    if (this.histogramPopover = k(T.HistogramDataPopover, e), this.histogramPopover !== void 0 && this.histogramPopover !== null) {
+    if (this.histogramPopover = N(I.HistogramDataPopover, e), this.histogramPopover !== void 0 && this.histogramPopover !== null) {
       switch (this.contentKind) {
         case r.transformation:
           this.histogramPopover.selectedTransformationType = this.selectedTransformationType, this.histogramPopover.referenceElement = this.transformationSelectionElement.value, this.histogramPopover.placement = "trailing", this.histogramPopover.selectedBinColor = void 0, this.histogramPopover.selectedOverlaySymbol = void 0, this.histogramPopover.selectedNumericField = void 0;
@@ -282,7 +291,7 @@ class R extends z {
    * @category Render UX
    */
   renderFieldSelect() {
-    return l`<arcgis-charts-config-field-select .label=${L(this.layerFieldsInfo, this.model.getNumericField())} @click=${this.onNumericFieldSelect} ${h(this.numericalFieldSelectionElement)}></arcgis-charts-config-field-select>`;
+    return l`<arcgis-charts-config-field-select .label=${k(this.layerFieldsInfo, this.model.getNumericField())} @click=${this.onNumericFieldSelect} ${h(this.numericalFieldSelectionElement)}></arcgis-charts-config-field-select>`;
   }
   /** @category Render UX */
   renderDataTransformationType() {
@@ -294,12 +303,12 @@ class R extends z {
    */
   // TODO: to see for better pattern to move TSX based utility methods.
   renderColorListItem(e) {
-    const { textLabel: t, key: o, value: c, selected: m, ref: d, colorAction: p, color: $ } = e, [b, O, w, E] = [...$ ?? V()];
+    const { textLabel: t, key: o, value: c, selected: m, ref: d, colorAction: p, color: $ } = e, [b, O, w, E] = [...$ ?? T()];
     return f(o, l`<calcite-list-item .label=${t ?? ""} .value=${c} .selected=${m} ${h(d ?? void 0)}><calcite-action text=color slot=actions-end appearance=transparent @click=${p}><calcite-icon icon=line-solid style=${P(b !== void 0 ? { color: `rgba(${b},${O},${w},${(E ?? 0) / 255})` } : {})}></calcite-icon></calcite-action></calcite-list-item>`);
   }
   /** @category Render UX */
   renderBinColorElement() {
-    const [e, t, o, c] = [...this.model.getBinColor()?.color ?? N(0)];
+    const [e, t, o, c] = [...this.model.getBinColor()?.color ?? L(0)];
     return l`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.binColor} value=selectTrendLine @click=${this.onBinColorSelect} ${h(this.binColorSectionElement)}><calcite-icon slot=content-end icon=square-f style=${P({ color: `rgba(${e},${t},${o},${c / 255})` })} class=${s(a.iconSelect)}></calcite-icon></calcite-list-item></calcite-list>`;
   }
   /** @category Render UX */

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

@@ -1,7 +1,7 @@
 /// <reference types="../../index.d.ts" />
 import { IField, ISimpleFillSymbol, ISimpleLineSymbol, WebChartDataTransformations } from '@arcgis/charts-spec';
 import { HistogramDataPopoverKinds } 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-histogram-popover/customElement.js

@@ -1,9 +1,19 @@
 import { c as y } from "../../chunks/runtime.js";
 import { keyed as c } from "lit-html/directives/keyed.js";
 import { WebChartDataTransformations as o, RESTSymbolType as v } from "@arcgis/charts-spec";
-import { editPopover as C, isNumericField as u, getFieldAlias as b, reducedOpacity as $ } from "@arcgis/charts-shared-utils";
-import { H as s } from "../../chunks/interfaces.js";
-import { U as m, g as P } from "../../chunks/chart-ui-utils.js";
+import "lodash-es";
+import "d3-array";
+import { i as C, c as u, r as b } 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 $ } from "../../chunks/popover-ui-utils.js";
+import { H as s } from "../../chunks/interfaces2.js";
+import { U as m, g as P } from "../../chunks/chart-ui-utils2.js";
 import { u as S } from "../../chunks/useT9n.js";
 import { html as r } from "lit";
 import { createRef as h, ref as d } from "lit-html/directives/ref.js";
@@ -11,7 +21,7 @@ import { LitElement as w, createEvent as p, safeClassMap as i } from "@arcgis/lu
 import { css as k } 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.103 */
 const t = {
   hostDiv: "host-div",
   symbolPropertyPopover: "symbol-property-popover",
@@ -56,7 +66,7 @@ class T extends w {
   async updated() {
     setTimeout(async () => {
       await this.picklist.value?.setFocus();
-    }, m.PopoverTimer), C(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
+    }, m.PopoverTimer), $(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
       this.popoverElement.value?.reposition();
     }, m.PopoverTimer);
   }
@@ -83,7 +93,7 @@ class T extends w {
     if (e === s.numericFields)
       for (let l = 0; l < this.layerFieldsInfo?.length; l += 1) {
         const a = this.layerFieldsInfo[l];
-        u(a) && n.push(c(a.name, r`<calcite-list-item .label=${b(this.layerFieldsInfo, a.name)} .value=${a.name} .selected=${this.selectedNumericField === a.name}></calcite-list-item>`));
+        C(a) && n.push(c(a.name, r`<calcite-list-item .label=${u(this.layerFieldsInfo, a.name)} .value=${a.name} .selected=${this.selectedNumericField === a.name}></calcite-list-item>`));
       }
     else {
       const l = [
@@ -109,7 +119,7 @@ class T extends w {
   }
   /** @category Event handler */
   fillColorChange(e) {
-    const n = e.detail, [l, a, g] = n, f = $ * 255;
+    const n = e.detail, [l, a, g] = n, f = b * 255;
     this.arcgisChartsConfigHistogramPopoverSymbolChange.emit({
       type: v.SFS,
       color: [l, a, g, f]

package/dist/components/arcgis-charts-config-invalid-input-message/customElement.js

@@ -1,11 +1,11 @@
 import { c as s } from "../../chunks/runtime.js";
 import { html as i } from "lit-html";
-import { b as t } from "../../chunks/chart-ui-utils.js";
+import { b as t } from "../../chunks/chart-ui-utils2.js";
 import { LitElement as a, safeClassMap as e } from "@arcgis/lumina";
 import { css as l } 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.103 */
 const n = {
   invalidMessageColor: "invalid-message-color"
 }, o = l`:host{display:block}.invalid-message-color{color:red}`;

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

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { LineChartModel } from '../../model';
-import { SeriesSymbolsMap } from '@arcgis/charts-shared-utils';
+import { SeriesSymbolsMap } from '../../utils';
 import { CalculatedMinMaxBoundsPayload, SupportedLayer } from '@arcgis/charts-spec';
 import { default as MapView } from '@arcgis/core/views/MapView';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';

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

@@ -1,20 +1,30 @@
 import { c as l } from "../../chunks/runtime.js";
-import { hasILayer as n, getFeatureLayer as h, fetchLayerFieldsInfo as c, isNumericField as d, isDateField as m } from "@arcgis/charts-shared-utils";
+import "@arcgis/charts-spec";
 import { isEqual as o } from "lodash-es";
-import { LitElement as g, createEvent as f } from "@arcgis/lumina";
+import "d3-array";
+import { h as n, j as h, i as c, t 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 { h as m } from "../../chunks/index.js";
+import { LitElement as p, createEvent as g } from "@arcgis/lumina";
 import { html as a } from "lit";
-import { C as s } from "../../chunks/interfaces.js";
-import { css as p } from "@lit/reactive-element/css-tag.js";
+import { C as s } from "../../chunks/interfaces2.js";
+import { css as f } 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 C = p`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
-class u extends g {
+v4.33.0-next.103 */
+const C = f`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
+class u extends p {
   constructor() {
     super(...arguments), this.popoverElement = null, this.onModelConfigChange = async (t) => {
       const i = t?.detail.config ?? this.model.getConfig();
       this.layer === void 0 && await this.updateFetchLayerFieldsInfo(i);
-    }, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigNoSeriesUpdate = f();
+    }, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigNoSeriesUpdate = g();
   }
   static {
     this.properties = { layerFieldsInfo: 16, activeColorMatch: 16, model: 0, timeZone: 3, popoverPlacement: 3, seriesColor: 2, calculatedDataMinMaxBounds: 0, calculatedMinMaxBounds: 2, page: 3, layer: 0, usePopupTemplateFieldsInfo: 5 };
@@ -64,10 +74,10 @@ class u extends g {
     const e = t ?? this.model.getConfig();
     let i = this.layer;
     if (!i) {
-      const r = n(e) ? e.iLayer : void 0;
-      r && (i = await h(r));
+      const r = m(e) ? e.iLayer : void 0;
+      r && (i = await n(r));
     }
-    i && (this.layerFieldsInfo = await c(i, this.usePopupTemplateFieldsInfo));
+    i && (this.layerFieldsInfo = await h(i, this.usePopupTemplateFieldsInfo));
   }
   /** @category Event handler */
   popoverOpen(t) {
@@ -82,7 +92,7 @@ class u extends g {
    * @category Lifecycle
    */
   render() {
-    const t = this.layerFieldsInfo?.find((r) => r.name === this.model.getXAxisField()), e = t !== void 0 && (d(t) || m(t));
+    const t = this.layerFieldsInfo?.find((r) => r.name === this.model.getXAxisField()), e = t !== void 0 && (c(t) || d(t));
     let i;
     switch (this.page) {
       case s.Data: