@arcgis/charts-components 4.34.0-next.98 → 5.0.0-next.0

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

@@ -1,9 +1,11 @@
 import { c as k } from "../../chunks/runtime.js";
 import { keyed as f } from "lit/directives/keyed.js";
-import { WebChartDataTransformations as b, RESTSymbolType as x } from "@arcgis/charts-spec";
+import "@arcgis/toolkit/intl";
 import { debounce as y } from "lodash-es";
+import { b as u } from "../../chunks/series-types.js";
+import { R as M } from "../../chunks/rest-js-object-literals.js";
 import "d3-array";
-import { c7 as I, a2 as L, a0 as V } from "../../chunks/interfaces.js";
+import { cf as I, a8 as L, a6 as V } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -11,19 +13,18 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import "@arcgis/toolkit/intl";
 import "@arcgis/toolkit/dom";
 import { r as T } from "../../chunks/popover-ui-utils.js";
-import { H as m, c as a, d } from "../../chunks/interfaces2.js";
-import { b as P, m as S, U as C, f as N, s as B, c as D, D as F } from "../../chunks/chart-ui-utils2.js";
+import { H as m, d as a, b as d } from "../../chunks/interfaces3.js";
+import { b as P, m as C, U as S, f as N, s as F, c as D, D as B } from "../../chunks/chart-ui-utils2.js";
 import { d as _, s as H } from "../../chunks/store.js";
 import { u as K } from "../../chunks/useT9n.js";
 import { css as A, html as r } from "lit";
-import { createRef as u, ref as v } from "lit-html/directives/ref.js";
-import { LitElement as U, createEvent as $, renderElement as z, safeStyleMap as w, safeClassMap as s } from "@arcgis/lumina";
+import { createRef as b, ref as v } from "lit/directives/ref.js";
+import { LitElement as z, createEvent as $, renderElement as U, safeStyleMap as O, safeClassMap as s } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.98 */
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.0 */
 const o = {
   label: "label",
   row: "row",
@@ -32,25 +33,25 @@ const o = {
   sectionLabel: "section-label",
   binTextPadding: "bin-text-padding",
   histogramStatsList: "histogram-stats-list"
-}, j = A`.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;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}calcite-list-item{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor)}.label{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.text{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);width:calc(100% - 1.5rem);height:2rem;margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.row{padding-top:1rem}.bin-count-container{display:flex;flex-wrap:wrap;padding:var(--arcgis-charts-config-margin-minor)}.bin-count-container>calcite-slider{flex-grow:10;min-width:50%}.bin-count-container>calcite-input{margin-bottom:.5rem;margin-top:var(--arcgis-charts-config-margin-minor);margin-left:var(--arcgis-charts-config-margin-minor);width:5rem}.section-label{display:flex;margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.bin-text-padding{margin-left:var(--arcgis-charts-config-margin-minor)}.histogram-stats-list{pointer-events:none;margin-bottom:var(--arcgis-charts-config-margin-minor)}`;
-class q extends U {
+}, j = A`.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}.am5-layer-30{z-index:100!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}calcite-list-item{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor)}.label{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.text{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);width:calc(100% - 1.5rem);height:2rem;margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.row{padding-top:1rem}.bin-count-container{display:flex;flex-wrap:wrap;padding:var(--arcgis-charts-config-margin-minor)}.bin-count-container>calcite-slider{flex-grow:10;min-width:50%}.bin-count-container>calcite-input{margin-bottom:.5rem;margin-top:var(--arcgis-charts-config-margin-minor);margin-left:var(--arcgis-charts-config-margin-minor);width:5rem}.section-label{display:flex;margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.bin-text-padding{margin-left:var(--arcgis-charts-config-margin-minor)}.histogram-stats-list{pointer-events:none;margin-bottom:var(--arcgis-charts-config-margin-minor)}`;
+class R extends z {
   constructor() {
-    super(...arguments), this._messages = K(), this.numericalFieldSelectionElement = u(), this.transformationSelectionElement = u(), this.histogramPopover = null, this.binColorSectionElement = u(), this.binSliderElement = u(), this.binInputElement = u(), this.popoverHeading = "", this.onBinCountChange = y(() => {
+    super(...arguments), this._messages = K(), this.numericalFieldSelectionElement = b(), this.transformationSelectionElement = b(), this.histogramPopover = null, this.binColorSectionElement = b(), this.binSliderElement = b(), this.binInputElement = b(), this.popoverHeading = "", this.onBinCountChange = y(() => {
       const e = this.binInputElement.value?.value;
-      e !== void 0 && P(e, this.binInputElement.value?.min, this.binInputElement.value?.max) ? this.binCountChange(e) : this.binInputElement.value && S({
+      e !== void 0 && P(e, this.binInputElement.value?.min, this.binInputElement.value?.max) ? this.binCountChange(e) : this.binInputElement.value && C({
         inputElement: this.binInputElement.value,
         status: D.INVALID
       });
-    }, C.DebounceTimer), this.onBinCountSliderChange = y(() => {
+    }, S.DebounceTimer), this.onBinCountSliderChange = y(() => {
       this.binCountChange(this.binSliderElement.value?.value?.toString() ?? "");
-    }, C.DebounceTimer), this.onNormalDistColorSelect = (e) => {
-      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.getNormalDistSymbol(), this._messages.normalDistStyle ?? "", this.normalDistOverlayElement);
+    }, S.DebounceTimer), this.onNormalDistColorSelect = (e) => {
+      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.normalDistSymbol, this._messages.normalDistStyle ?? "", this.normalDistOverlayElement);
     }, this.onMeanColorSelect = (e) => {
-      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.getMeanSymbol(), this._messages.meanStyle ?? "", this.meanOverlayElement);
+      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.meanSymbol, this._messages.meanStyle ?? "", this.meanOverlayElement);
     }, this.onMedianColorSelect = (e) => {
-      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.getMedianSymbol(), this._messages.medianStyle ?? "", this.medianOverlayElement);
+      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.medianSymbol, this._messages.medianStyle ?? "", this.medianOverlayElement);
     }, this.onStandardDevColorSelect = (e) => {
-      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.getStandardDevSymbol(), this._messages.standardDevStyle ?? "", this.standardDevOverlayElement);
+      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.standardDevSymbol, this._messages.standardDevStyle ?? "", this.standardDevOverlayElement);
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
     }, this.updateProps = async (e) => {
@@ -59,10 +60,10 @@ class q extends U {
           const { contentKind: t } = e.detail, { value: i } = e.detail;
           switch (_(H), t) {
             case m.transformation:
-              this.model.setDataTransformationType(i ?? b.None);
+              this.model.dataTransformationType = i ?? u.None;
               break;
             case m.numericFields:
-              await this.model.setNumericField(i ?? "");
+              this.model.numericField = i ?? "";
               break;
             default:
               break;
@@ -123,14 +124,14 @@ class q extends U {
   }
   getDataTransformationLabel() {
     let e;
-    switch (this.model.getDataTransformationType()) {
-      case b.None:
+    switch (this.model.dataTransformationType) {
+      case u.None:
         e = this._messages.none ?? "";
         break;
-      case b.Log:
+      case u.Log:
         e = this._messages.log ?? "";
         break;
-      case b.Sqrt:
+      case u.Sqrt:
         e = this._messages.sqRt ?? "";
         break;
       default:
@@ -173,48 +174,48 @@ class q extends U {
         t = void 0;
         break;
     }
-    return N(t, F);
+    return N(t, B);
   }
   binCountChange(e) {
     const t = Number.parseInt(e);
-    this.model.getBinCount() !== t && (this.model.setBinCount(t), this.binInputElement.value && S({
+    this.model.binCount !== t && (this.model.binCount = t, this.binInputElement.value && C({
       inputElement: this.binInputElement.value,
       status: D.IDLE
     }));
   }
   onColorElementSelect(e, t, i) {
-    this.binColorSelected = i === void 0, e.type === x.SFS ? (this.selectedOverlaySymbol = void 0, this.selectedBinColorSymbol = e, this.contentKind = m.fillSymbol) : (this.selectedBinColorSymbol = void 0, this.selectedOverlaySymbol = e, this.overlaySectionElement = i, this.contentKind = m.lineSymbol), this.popoverHeading = t, this.setupPopover();
+    this.binColorSelected = i === void 0, e.type === M.SFS ? (this.selectedOverlaySymbol = void 0, this.selectedBinColorSymbol = e, this.contentKind = m.fillSymbol) : (this.selectedBinColorSymbol = void 0, this.selectedOverlaySymbol = e, this.overlaySectionElement = i, this.contentKind = m.lineSymbol), this.popoverHeading = t, this.setupPopover();
   }
   onNumericFieldSelect(e) {
-    e.stopImmediatePropagation(), this.selectedNumericalField = this.model.getNumericField(), this.contentKind = m.numericFields, this.setupPopover();
+    e.stopImmediatePropagation(), this.selectedNumericalField = this.model.numericField, this.contentKind = m.numericFields, this.setupPopover();
   }
   onTransformationSelect(e) {
-    e.stopImmediatePropagation(), this.selectedTransformationType = this.model.getDataTransformationType(), this.contentKind = m.transformation, this.setupPopover();
+    e.stopImmediatePropagation(), this.selectedTransformationType = this.model.dataTransformationType, this.contentKind = m.transformation, this.setupPopover();
   }
   onBinColorSelect(e) {
-    e.stopImmediatePropagation(), this.onColorElementSelect(this.model.getBinSymbol(), this._messages.binColor ?? "");
+    e.stopImmediatePropagation(), this.onColorElementSelect(this.model.binSymbol, this._messages.binColor ?? "");
   }
   onBinColorChange(e) {
-    this.model.setColorMatch(!1), this.model.setBinSymbol(e.detail), this.selectedBinColorSymbol = e.detail;
+    this.model.colorMatch = !1, this.model.binSymbol = e.detail, this.selectedBinColorSymbol = e.detail;
   }
   onMeanStyleChange(e) {
-    this.model.setMeanSymbol(e.detail);
+    this.model.meanSymbol = e.detail;
   }
   onMedianStyleChange(e) {
-    this.model.setMedianSymbol(e.detail);
+    this.model.medianSymbol = e.detail;
   }
   onStandardDevStyleChange(e) {
-    this.model.setStandardDevSymbol(e.detail);
+    this.model.standardDevSymbol = e.detail;
   }
   onNormalDistStyleChange(e) {
-    this.model.setNormalDistSymbol(e.detail);
+    this.model.normalDistSymbol = e.detail;
   }
   onShowDataLabelsChange(e) {
-    this.model.setDataLabelsVisibility(e.target.checked);
+    this.model.dataLabelsVisibility = e.target.checked;
   }
   onOverlayListChange(e) {
     const t = e.target.selectedItems.map((h) => h.value), i = t.includes(a.Mean), c = t.includes(a.Median), l = t.includes(a.StandardDev), n = t.includes(a.NormalDist);
-    this.meanOverlayVisible !== i && (this.model.setShowMeanOverlay(i), this.meanOverlayVisible = i), this.medianOverlayVisible !== c && (this.model.setShowMedianOverlay(c), this.medianOverlayVisible = c), this.standardDevOverlayVisible !== l && (this.model.setShowStandardDevOverlay(l), this.standardDevOverlayVisible = l), this.normalDistOverlayVisible !== n && (this.model.setShowNormalDistOverlay(n), this.normalDistOverlayVisible = n);
+    this.meanOverlayVisible !== i && (this.model.showMeanOverlay = i, this.meanOverlayVisible = i), this.medianOverlayVisible !== c && (this.model.showMedianOverlay = c, this.medianOverlayVisible = c), this.standardDevOverlayVisible !== l && (this.model.showStandardDevOverlay = l, this.standardDevOverlayVisible = l), this.normalDistOverlayVisible !== n && (this.model.showNormalDistOverlay = n, this.normalDistOverlayVisible = n);
   }
   setupPopover() {
     this.removeHistogramDataPopover();
@@ -234,29 +235,29 @@ class q extends U {
         this.selectedOverlayKind = this.overlaySectionElement?.value, t = this.overlaySectionElement, g = this.selectedOverlaySymbol, i = this.popoverHeading, h = void 0, l = void 0, n = void 0;
         break;
     }
-    this.histogramPopover = z(r`<arcgis-charts-config-histogram-popover .headingTitle=${i} .referenceElement=${t} open .contentKind=${this.contentKind} .layerFieldsInfo=${e} .placement=${c} .selectedNumericField=${n} .selectedTransformationType=${l} .selectedBinColor=${h} .selectedOverlaySymbol=${g} @arcgisChartsConfigPopoverClose=${this.popoverClose} @arcgisChartsConfigHistogramPopoverChange=${this.updateProps} @arcgisChartsConfigHistogramPopoverSymbolChange=${this.updateSymbolProps}></arcgis-charts-config-histogram-popover>`), !document.body.contains(this.histogramPopover) && this.histogramPopover !== null && document.body.appendChild(this.histogramPopover);
+    this.histogramPopover = U(r`<arcgis-charts-config-histogram-popover .headingTitle=${i} .referenceElement=${t} open .contentKind=${this.contentKind} .layerFieldsInfo=${e} .placement=${c} .selectedNumericField=${n} .selectedTransformationType=${l} .selectedBinColor=${h} .selectedOverlaySymbol=${g} @arcgisChartsConfigPopoverClose=${this.popoverClose} @arcgisChartsConfigHistogramPopoverChange=${this.updateProps} @arcgisChartsConfigHistogramPopoverSymbolChange=${this.updateSymbolProps}></arcgis-charts-config-histogram-popover>`), !document.body.contains(this.histogramPopover) && this.histogramPopover !== null && document.body.appendChild(this.histogramPopover);
   }
   renderFieldSelect() {
-    return r`<arcgis-charts-config-field-select .label=${I(this.layerFieldsInfo, this.model.getNumericField())} @click=${this.onNumericFieldSelect} ${v(this.numericalFieldSelectionElement)}></arcgis-charts-config-field-select>`;
+    return r`<arcgis-charts-config-field-select .label=${I(this.layerFieldsInfo, this.model.numericField)} @click=${this.onNumericFieldSelect} ${v(this.numericalFieldSelectionElement)}></arcgis-charts-config-field-select>`;
   }
   renderDataTransformationType() {
     return r`<arcgis-charts-config-field-select .label=${this.getDataTransformationLabel()} @click=${this.onTransformationSelect} ${v(this.transformationSelectionElement)}></arcgis-charts-config-field-select>`;
   }
   renderColorListItem(e) {
-    const { textLabel: t, key: i, value: c, selected: l, ref: n, colorAction: h, color: g } = e, [p, O, E, M] = [...g ?? L()];
-    return f(i, r`<calcite-list-item .label=${t ?? ""} .value=${c} .selected=${l} ${v(n ?? void 0)}><calcite-action text=color slot=actions-end appearance=transparent @click=${h}><calcite-icon icon=line-solid style=${w(p !== void 0 ? { color: `rgba(${p},${O},${E},${(M ?? 0) / 255})` } : {})}></calcite-icon></calcite-action></calcite-list-item>`);
+    const { textLabel: t, key: i, value: c, selected: l, ref: n, colorAction: h, color: g } = e, [p, w, E, x] = [...g ?? L()];
+    return f(i, r`<calcite-list-item .label=${t ?? ""} .value=${c} .selected=${l} ${v(n ?? void 0)}><calcite-action text=color slot=actions-end appearance=transparent @click=${h}><calcite-icon icon=line-solid style=${O(p !== void 0 ? { color: `rgba(${p},${w},${E},${(x ?? 0) / 255})` } : {})}></calcite-icon></calcite-action></calcite-list-item>`);
   }
   renderBinColorElement() {
-    const [e, t, i, c] = [...this.model.getBinSymbol()?.color ?? V(0)];
-    return r`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.binColor} value=selectTrendLine .selected=${this.binColorSelected} @click=${this.onBinColorSelect} ${v(this.binColorSectionElement)}><calcite-icon slot=content-end icon=square-f style=${w({ color: `rgba(${e},${t},${i},${c / 255})` })} class=${s(o.iconSelect)}></calcite-icon></calcite-list-item></calcite-list>`;
+    const [e, t, i, c] = [...this.model.binSymbol?.color ?? V(0)];
+    return r`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.binColor} value=selectTrendLine .selected=${this.binColorSelected} @click=${this.onBinColorSelect} ${v(this.binColorSectionElement)}><calcite-icon slot=content-end icon=square-f style=${O({ color: `rgba(${e},${t},${i},${c / 255})` })} class=${s(o.iconSelect)}></calcite-icon></calcite-list-item></calcite-list>`;
   }
   renderNormalDistOverlay() {
-    return this.normalDistOverlayVisible = this.model.getShowNormalDistOverlay(), this.renderColorListItem({
+    return this.normalDistOverlayVisible = this.model.showNormalDistOverlay, this.renderColorListItem({
       textLabel: this._messages.normalDist,
-      color: this.model.getNormalDistSymbol()?.color,
+      color: this.model.normalDistSymbol?.color,
       key: a.NormalDist,
       value: a.NormalDist,
-      selected: this.model.getShowNormalDistOverlay(),
+      selected: this.model.showNormalDistOverlay,
       ref: (e) => {
         this.normalDistOverlayElement = e;
       },
@@ -264,13 +265,13 @@ class q extends U {
     });
   }
   renderMeanOverlay() {
-    return this.meanOverlayVisible = this.model.getShowMeanOverlay(), this.renderColorListItem({
+    return this.meanOverlayVisible = this.model.showMeanOverlay, this.renderColorListItem({
       textLabel: this._messages.mean,
       textDescription: this.meanValue,
-      color: this.model.getMeanSymbol()?.color,
+      color: this.model.meanSymbol?.color,
       key: a.Mean,
       value: a.Mean,
-      selected: this.model.getShowMeanOverlay(),
+      selected: this.model.showMeanOverlay,
       ref: (e) => {
         this.meanOverlayElement = e;
       },
@@ -278,13 +279,13 @@ class q extends U {
     });
   }
   renderStandardDevOverlay() {
-    return this.standardDevOverlayVisible = this.model.getShowStandardDevOverlay(), this.renderColorListItem({
+    return this.standardDevOverlayVisible = this.model.showStandardDevOverlay, this.renderColorListItem({
       textLabel: this._messages.standardDev,
       textDescription: this.standardDevValue,
-      color: this.model.getStandardDevSymbol()?.color,
+      color: this.model.standardDevSymbol?.color,
       key: a.StandardDev,
       value: a.StandardDev,
-      selected: this.model.getShowStandardDevOverlay(),
+      selected: this.model.showStandardDevOverlay,
       ref: (e) => {
         this.standardDevOverlayElement = e;
       },
@@ -292,13 +293,13 @@ class q extends U {
     });
   }
   renderMedianOverlay() {
-    return this.medianOverlayVisible = this.model.getShowMedianOverlay(), this.renderColorListItem({
+    return this.medianOverlayVisible = this.model.showMedianOverlay, this.renderColorListItem({
       textLabel: this._messages.median,
       textDescription: this.medianValue,
-      color: this.model.getMedianSymbol()?.color,
+      color: this.model.medianSymbol?.color,
       key: a.Median,
       value: a.Median,
-      selected: this.model.getShowMedianOverlay(),
+      selected: this.model.showMedianOverlay,
       ref: (e) => {
         this.medianOverlayElement = e;
       },
@@ -316,17 +317,17 @@ class q extends U {
     return r`<calcite-list label class=${s(o.histogramStatsList)}>${e.map((t) => this.renderStatItem(t))}</calcite-list>`;
   }
   renderShowDataLabels() {
-    return r`<div class=${s(o.row)}><calcite-label class=${s(o.label)} layout=inline-space-between>${this._messages.showDataLabels}<calcite-switch .checked=${this.model.getDataLabelsVisibility()} @calciteSwitchChange=${this.onShowDataLabelsChange}></calcite-switch></calcite-label></div>`;
+    return r`<div class=${s(o.row)}><calcite-label class=${s(o.label)} layout=inline-space-between>${this._messages.showDataLabels}<calcite-switch .checked=${this.model.dataLabelsVisibility} @calciteSwitchChange=${this.onShowDataLabelsChange}></calcite-switch></calcite-label></div>`;
   }
   renderBinsSection() {
-    return r`<div class=${s(o.binCountContainer)}><calcite-slider label-handles min=1 max=64 step=1 snap .value=${this.model.getBinCount()} @calciteSliderChange=${this.onBinCountSliderChange} ${v(this.binSliderElement)}></calcite-slider><calcite-input type=number min=1 max=64 step=1 .value=${B(this.model.getBinCount())} @calciteInputInput=${this.onBinCountChange} ${v(this.binInputElement)}></calcite-input></div>`;
+    return r`<div class=${s(o.binCountContainer)}><calcite-slider label-handles min=1 max=64 step=1 snap .value=${this.model.binCount} @calciteSliderChange=${this.onBinCountSliderChange} ${v(this.binSliderElement)}></calcite-slider><calcite-input type=number min=1 max=64 step=1 .value=${F(this.model.binCount)} @calciteInputInput=${this.onBinCountChange} ${v(this.binInputElement)}></calcite-input></div>`;
   }
   render() {
     const e = this.renderFieldSelect(), t = this.renderDataTransformationType();
     return r`<div><div class=${s(o.sectionLabel)}>${this._messages.variables}</div><calcite-label class=${s(o.label)}>${this._messages.number}${e}</calcite-label><calcite-label class=${s(o.label)}>${this._messages.withTransformation}${t}</calcite-label><div class=${s(o.sectionLabel)}>${this._messages.bins}</div><p class=${s(o.binTextPadding)}>${this._messages.numberOfBins}</p>${this.renderBinsSection()}${this.renderBinColorElement()}<div class=${s(o.sectionLabel)}>${this._messages.overlays}</div>${this.renderOverlayList()}${this.renderShowDataLabels()}<div class=${s(o.sectionLabel)}>${this._messages.statistics}</div>${this.renderStats()}</div>`;
   }
 }
-k("arcgis-charts-config-histogram-data", q);
+k("arcgis-charts-config-histogram-data", R);
 export {
-  q as ArcgisChartsConfigHistogramData
+  R as ArcgisChartsConfigHistogramData
 };

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

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-import { IField, ISimpleFillSymbol, ISimpleLineSymbol, OverlayTerms, WebChartDataTransformations } from '@arcgis/charts-spec';
+import { IField, ISimpleFillSymbol, ISimpleLineSymbol, OverlayTerms, WebChartDataTransformations } from '../../spec';
 import { HistogramDataPopoverKinds } from '../../interfaces';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 

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

@@ -1,10 +1,12 @@
 import { c as y } from "../../chunks/runtime.js";
 import { css as v, html as o } from "lit";
 import { keyed as c } from "lit/directives/keyed.js";
-import { WebChartDataTransformations as s, RESTSymbolType as u } from "@arcgis/charts-spec";
+import { b as s } from "../../chunks/series-types.js";
+import { R as u } from "../../chunks/rest-js-object-literals.js";
+import "@arcgis/toolkit/intl";
 import "lodash-es";
 import "d3-array";
-import { b4 as b, c7 as C, R as $ } from "../../chunks/interfaces.js";
+import { bc as b, cf as C, X as $ } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -12,17 +14,16 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import "@arcgis/toolkit/intl";
 import "@arcgis/toolkit/dom";
 import { e as P } from "../../chunks/popover-ui-utils.js";
-import { H as l } from "../../chunks/interfaces2.js";
+import { H as l } from "../../chunks/interfaces3.js";
 import { U as m, a as S } from "../../chunks/chart-ui-utils2.js";
 import { u as k } from "../../chunks/useT9n.js";
-import { createRef as h, ref as d } from "lit-html/directives/ref.js";
+import { createRef as h, ref as d } from "lit/directives/ref.js";
 import { LitElement as w, createEvent as p, safeClassMap as t } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.98 */
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.0 */
 const i = {
   symbolPropertyPopover: "symbol-property-popover",
   colorPicker: "color-picker",
@@ -31,7 +32,7 @@ const i = {
   pickListItemLabel: "pick-list-item-label",
   fieldSelectPanel: "field-select-panel",
   transformationPanel: "transformation-panel"
-}, x = v`.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)}.right{display:block;text-align:right}.inline{display:inline-flex;flex-wrap:wrap}.symbol-property-popover{min-width:300px}.symbol-property-popover .inline{align-items:center;margin-bottom:1rem;padding:0 1rem}.symbol-property-popover .inline calcite-action{margin-left:.2rem}.symbol-property-popover .inline input,.symbol-property-popover .inline select{width:4rem;margin-left:.5rem;height:24px}.symbol-property-popover .inline select{width:6rem}.symbol-property-popover .color calcite-icon{margin-left:.5rem}.symbol-property-popover .color .color-picker{padding:1rem}.header{margin:0;font-weight:bolder}.pick-list-item-label{font-size:small}.field-select-panel{max-height:60vh}.transformation-panel{width:calc(var(--calcite-panel-width-multiplier) * 12vw);max-width:calc(var(--calcite-panel-width-multiplier) * 300px);min-width:calc(var(--calcite-panel-width-multiplier) * 150px);min-width:calc(var(--calcite-panel-width-multiplier) * 170px)}`;
+}, x = v`.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}.am5-layer-30{z-index:100!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.right{display:block;text-align:right}.inline{display:inline-flex;flex-wrap:wrap}.symbol-property-popover{min-width:300px}.symbol-property-popover .inline{align-items:center;margin-bottom:1rem;padding:0 1rem}.symbol-property-popover .inline calcite-action{margin-left:.2rem}.symbol-property-popover .inline input,.symbol-property-popover .inline select{width:4rem;margin-left:.5rem;height:24px}.symbol-property-popover .inline select{width:6rem}.symbol-property-popover .color calcite-icon{margin-left:.5rem}.symbol-property-popover .color .color-picker{padding:1rem}.header{margin:0;font-weight:bolder}.pick-list-item-label{font-size:small}.field-select-panel{max-height:60vh}.transformation-panel{width:calc(var(--calcite-panel-width-multiplier) * 12vw);max-width:calc(var(--calcite-panel-width-multiplier) * 300px);min-width:calc(var(--calcite-panel-width-multiplier) * 150px);min-width:calc(var(--calcite-panel-width-multiplier) * 170px)}`;
 class T extends w {
   constructor() {
     super(...arguments), this._messages = k(), this.picklist = h(), this.popoverElement = h(), this.layerFieldsInfo = [], this.arcgisChartsConfigHistogramPopoverChange = p(), this.arcgisChartsConfigHistogramPopoverSymbolChange = p(), this.arcgisChartsConfigPopoverClose = p();
@@ -45,7 +46,7 @@ class T extends w {
   async reposition() {
     await this.popoverElement.value?.reposition();
   }
-  async updated() {
+  updated() {
     setTimeout(async () => {
       await this.picklist.value?.setFocus();
     }, m.PopoverTimer), P(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {

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

@@ -3,8 +3,8 @@ import { css as i, html as t } from "lit";
 import { c as a } from "../../chunks/chart-ui-utils2.js";
 import { LitElement as e, safeClassMap as l } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.98 */
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.0 */
 const n = {
   invalidMessageColor: "invalid-message-color"
 }, o = i`:host{display:block}.invalid-message-color{color:red}`;

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

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

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

@@ -1,8 +1,9 @@
 import { c as l } from "../../chunks/runtime.js";
-import "@arcgis/charts-spec";
+import "@arcgis/toolkit/intl";
 import { isEqual as a } from "lodash-es";
+import "../../chunks/series-types.js";
 import "d3-array";
-import { g as n, b1 as h, b4 as c, b5 as d } from "../../chunks/interfaces.js";
+import { g as n, b9 as h, bc as c, bd as d } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -10,20 +11,19 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import "@arcgis/toolkit/intl";
-import { h as m } from "../../chunks/index5.js";
+import { h as m } from "../../chunks/index4.js";
 import "@arcgis/toolkit/dom";
 import { LitElement as g, createEvent as f } from "@arcgis/lumina";
 import { css as p, html as o } from "lit";
-import { C as s } from "../../chunks/interfaces2.js";
+import { C as s } from "../../chunks/interfaces3.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.98 */
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.0 */
 const u = 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 C extends g {
   constructor() {
     super(...arguments), this.onModelConfigChange = async (t) => {
-      const i = t?.detail.config ?? this.model.getConfig();
+      const i = t?.detail.config ?? this.model.config;
       this.layer === void 0 && await this.updateFetchLayerFieldsInfo(i);
     }, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigNoSeriesUpdate = f();
   }
@@ -52,12 +52,12 @@ class C extends g {
     t && t !== e && await this.updateFetchLayerFieldsInfo();
   }
   seriesColorChange(t) {
-    this.activeColorMatch = t?.get(0)?.markerSymbol === void 0, this.model.getColorMatch() && t?.forEach((e, i) => {
+    this.activeColorMatch = t?.get(0)?.markerSymbol === void 0, this.model.colorMatch && t?.forEach((e, i) => {
       e && t?.get(0) !== void 0 && ("lineSymbol" in e && (e.lineSymbol?.color !== void 0 && !a(this.model.getSeriesColor(i), e.lineSymbol.color) && this.model.setSeriesColor(e.lineSymbol.color, i), e.lineSymbol?.style !== void 0 && !a(this.model.getSeriesLineStyle(i), e.lineSymbol.style) && this.model.setSeriesLineStyle(e.lineSymbol.style, i), e.lineSymbol?.width !== void 0 && !a(this.model.getSeriesLineWidth(i), e.lineSymbol.width) && this.model.setSeriesLineWidth(e.lineSymbol.width, i)), "markerSymbol" in e && (e.markerSymbol?.color !== void 0 && !a(this.model.getSeriesMarkerColor(i), e.markerSymbol?.color) && this.model.setSeriesMarkerColor(e.markerSymbol?.color, i), e.markerSymbol?.style !== void 0 && !a(this.model.getSeriesMarkerStyle(i), e.markerSymbol?.style) && this.model.setSeriesMarkerStyle(e.markerSymbol?.style, i), e.markerSymbol?.size !== void 0 && this.model.getSeriesMarkerSize(i) !== e.markerSymbol?.size && this.model.setSeriesMarkerSize(e.markerSymbol?.size, i)));
     });
   }
   async updateFetchLayerFieldsInfo(t) {
-    const e = t ?? this.model.getConfig();
+    const e = t ?? this.model.config;
     let i = this.layer;
     if (!i) {
       const r = m(e) ? e.iLayer : void 0;
@@ -66,7 +66,7 @@ class C extends g {
     i && (this.layerFieldsInfo = await h(i, this.usePopupTemplateFieldsInfo));
   }
   render() {
-    const t = this.layerFieldsInfo?.find((r) => r.name === this.model.getXAxisField()), e = t !== void 0 && (c(t) || d(t));
+    const t = this.layerFieldsInfo?.find((r) => r.name === this.model.xAxisField), e = t !== void 0 && (c(t) || d(t));
     let i;
     switch (this.page) {
       case s.Data:

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

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-import { IField } from '@arcgis/charts-spec';
+import { IField } from '../../spec';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { PropertyValues } from 'lit';
 import { LineChartModel } from '../../model';
@@ -26,9 +26,29 @@ export declare class ArcgisChartsConfigLineChartData extends LitElement {
      * @category Public
      */
     layerFieldsInfo: IField[];
+    /**
+     * Event emitted when time interval is customized.
+     *
+     * @event
+     */
     readonly arcgisChartsConfigCustomizedTimeInterval: TargetedEvent<this, void>;
+    /**
+     * Event emitted when an error is caught on data change.
+     *
+     * @event
+     */
     readonly arcgisChartsConfigDataChangeError: TargetedEvent<this, DataChangeErrorPayload>;
+    /**
+     * A changed event to be emitted when required numeric field(s) is not met.
+     *
+     * @event
+     */
     readonly arcgisChartsConfigLineChartDataNumericFieldValidate: TargetedEvent<this, void>;
+    /**
+     * Event emitted when time interval is reset to default.
+     *
+     * @event
+     */
     readonly arcgisChartsConfigResetTimeInterval: TargetedEvent<this, void>;
     private _messages;
 }